feat: initial public release (MAESTRO)

2026-06-03 05:08:00 +00:00
commit f5c7666f6b
823 changed files with 184150 additions and 0 deletions
@@ -0,0 +1,67 @@
+import type { AmazonData } from './types';
+
+function StarRating({ rating }: { rating: number }) {
+  const full = Math.floor(rating);
+  const half = rating - full >= 0.5;
+  const stars: string[] = [];
+  for (let i = 0; i < full; i++) stars.push('\u2605');
+  if (half) stars.push('\u2606');
+  return <span className="text-amber-400" style={{ fontSize: 10 }}>{stars.join('')} {rating.toFixed(1)}</span>;
+}
+
+export function AmazonProductsCard({ data, onExpand }: { data: AmazonData; onExpand: () => void }) {
+  const { query, products } = data;
+
+  return (
+    <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 my-2 not-prose" style={{ maxWidth: 600 }}>
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-sm">&#128722;</span>
+        <span className="font-semibold text-slate-700" style={{ fontSize: 13 }}>Amazon 検索結果: 「{query}」</span>
+        <span className="text-slate-400 ml-auto" style={{ fontSize: 11 }}>{products.length}件</span>
+      </div>
+
+      {/* Horizontal scroll cards */}
+      <div className="flex gap-3 overflow-x-auto pb-1">
+        {products.slice(0, 5).map((p) => (
+          <a
+            key={p.asin}
+            href={p.productUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-white border border-slate-200 rounded-lg p-2 cursor-pointer hover:border-blue-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
+            style={{ minWidth: 160, maxWidth: 160 }}
+          >
+            <div className="w-full h-20 bg-slate-100 rounded flex items-center justify-center mb-2 overflow-hidden">
+              {p.imageUrl ? (
+                <img src={p.imageUrl} alt={p.title} className="max-h-full max-w-full object-contain" />
+              ) : (
+                <span className="text-2xl">&#128190;</span>
+              )}
+            </div>
+            <div className="font-semibold text-slate-800 leading-tight mb-1 line-clamp-2" style={{ fontSize: 11 }}>
+              {p.title}
+            </div>
+            {p.price && (
+              <div className="font-bold text-red-600" style={{ fontSize: 13 }}>{p.price}</div>
+            )}
+            {p.rating != null && (
+              <StarRating rating={p.rating} />
+            )}
+          </a>
+        ))}
+      </div>
+
+      {/* Expand button */}
+      <div className="text-center mt-2">
+        <button
+          onClick={onExpand}
+          className="text-blue-500 hover:text-blue-700 cursor-pointer bg-transparent border-none"
+          style={{ fontSize: 11 }}
+        >
+          &#9660; 詳細を表示
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,92 @@
+import type { AmazonData } from './types';
+
+function StarRating({ rating, reviewCount }: { rating: number; reviewCount?: number }) {
+  const full = Math.floor(rating);
+  const half = rating - full >= 0.5;
+  const stars: string[] = [];
+  for (let i = 0; i < full; i++) stars.push('\u2605');
+  if (half) stars.push('\u2606');
+  return (
+    <span className="text-amber-400 text-sm">
+      {stars.join('')} {rating.toFixed(1)}
+      {reviewCount != null && <span className="text-slate-400 text-xs ml-1">({reviewCount.toLocaleString()}件)</span>}
+    </span>
+  );
+}
+
+export function AmazonProductsDetail({ data }: { data: AmazonData }) {
+  const { query, products } = data;
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-bold text-slate-800 mb-4">
+        &#128722; Amazon 検索結果: 「{query}」
+      </h2>
+
+      <div className="space-y-6">
+        {products.map((p, i) => (
+          <div key={p.asin} className="bg-white border border-slate-200 rounded-xl p-4">
+            <div className="flex gap-4 flex-col sm:flex-row">
+              {/* Product image */}
+              <div className="w-full sm:w-40 h-40 bg-slate-50 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
+                {p.imageUrl ? (
+                  <img src={p.imageUrl} alt={p.title} className="max-h-full max-w-full object-contain" />
+                ) : (
+                  <span className="text-4xl">&#128190;</span>
+                )}
+              </div>
+
+              {/* Product info */}
+              <div className="flex-1 min-w-0">
+                <div className="text-slate-400 mb-1" style={{ fontSize: 13 }}>#{i + 1}</div>
+                <h3 className="text-sm font-semibold text-slate-800 leading-snug mb-2">{p.title}</h3>
+
+                {p.price && (
+                  <div className="text-xl font-bold text-red-600 mb-1">{p.price}</div>
+                )}
+
+                {p.rating != null && (
+                  <div className="mb-2">
+                    <StarRating rating={p.rating} reviewCount={p.reviewCount} />
+                  </div>
+                )}
+
+                <div className="text-xs text-slate-400 mb-3">ASIN: {p.asin}</div>
+
+                <div className="flex gap-2 flex-wrap">
+                  <a
+                    href={p.productUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1 px-3 py-1.5 bg-amber-400 hover:bg-amber-500 text-slate-900 text-xs font-semibold rounded-lg no-underline transition-colors"
+                  >
+                    Amazon で見る
+                  </a>
+                  <a
+                    href={p.keepaDetailUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold rounded-lg no-underline transition-colors"
+                  >
+                    Keepa で見る
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            {/* Keepa price graph */}
+            <div className="mt-4 bg-slate-50 rounded-lg p-3">
+              <div className="text-xs text-slate-500 mb-2">&#128200; 価格推移 (Keepa)</div>
+              <img
+                src={p.keepaGraphUrl}
+                alt={`${p.title} 価格推移`}
+                className="w-full rounded"
+                loading="lazy"
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { StructuredBlock, AmazonData, MapData, XPostData, YouTubeData } from './types';
+import { AmazonProductsCard } from './AmazonProductsCard';
+import { AmazonProductsDetail } from './AmazonProductsDetail';
+import { MapPlacesCard } from './MapPlacesCard';
+import { MapPlacesDetail } from './MapPlacesDetail';
+import { XPostsCard } from './XPostsCard';
+import { XPostsDetail } from './XPostsDetail';
+import { YouTubeVideosCard } from './YouTubeVideosCard';
+import { YouTubeVideosDetail } from './YouTubeVideosDetail';
+import { EmbedModal } from './EmbedModal';
+
+async function fetchStructuredBlock(taskId: number, refId: string): Promise<StructuredBlock> {
+  const res = await fetch(`/api/local/tasks/${taskId}/files/raw?section=logs&path=structured/${refId}.json`);
+  if (!res.ok) throw new Error(`Failed to fetch embed: ${res.status}`);
+  return res.json();
+}
+
+export function EmbedBlock({ refId, taskId }: { refId: string; taskId: number }) {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['embed', taskId, refId],
+    queryFn: () => fetchStructuredBlock(taskId, refId),
+    staleTime: Infinity,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 my-2 max-w-[600px] animate-pulse">
+        <div className="h-4 bg-slate-200 rounded w-48 mb-3" />
+        <div className="flex gap-3">
+          <div className="w-40 h-24 bg-slate-200 rounded" />
+          <div className="w-40 h-24 bg-slate-200 rounded" />
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !data) return null;
+
+  return (
+    <>
+      {data.type === 'amazon_products' && (
+        <AmazonProductsCard
+          data={data.data as AmazonData}
+          onExpand={() => setModalOpen(true)}
+        />
+      )}
+      {data.type === 'map_places' && (
+        <MapPlacesCard
+          data={data.data as MapData}
+          onExpand={() => setModalOpen(true)}
+        />
+      )}
+      {data.type === 'x_posts' && (
+        <XPostsCard
+          data={data.data as XPostData}
+          onExpand={() => setModalOpen(true)}
+        />
+      )}
+      {data.type === 'youtube_videos' && (
+        <YouTubeVideosCard
+          data={data.data as YouTubeData}
+          onExpand={() => setModalOpen(true)}
+        />
+      )}
+
+      <EmbedModal open={modalOpen} onClose={() => setModalOpen(false)}>
+        {data.type === 'amazon_products' && (
+          <AmazonProductsDetail data={data.data as AmazonData} />
+        )}
+        {data.type === 'map_places' && (
+          <MapPlacesDetail data={data.data as MapData} />
+        )}
+        {data.type === 'x_posts' && (
+          <XPostsDetail data={data.data as XPostData} />
+        )}
+        {data.type === 'youtube_videos' && (
+          <YouTubeVideosDetail data={data.data as YouTubeData} />
+        )}
+      </EmbedModal>
+    </>
+  );
+}
@@ -0,0 +1,67 @@
+import { useEffect, useCallback, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+interface EmbedModalProps {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+export function EmbedModal({ open, onClose, children }: EmbedModalProps) {
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') onClose();
+  }, [onClose]);
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+        document.body.style.overflow = '';
+      };
+    }
+  }, [open, handleKeyDown]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50" />
+
+      {/* Modal content */}
+      <div
+        className="
+          relative bg-white overflow-y-auto
+          w-full h-full
+          sm:w-auto sm:h-auto sm:max-w-[720px] sm:max-h-[85vh] sm:min-w-[400px]
+          sm:rounded-2xl sm:shadow-2xl sm:m-4
+        "
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="
+            sticky top-0 float-right z-10
+            m-3 w-8 h-8
+            flex items-center justify-center
+            bg-slate-100 hover:bg-slate-200
+            rounded-full text-slate-500 hover:text-slate-700
+            transition-colors cursor-pointer border-none text-lg
+          "
+          aria-label="閉じる"
+        >
+          &#10005;
+        </button>
+
+        {children}
+      </div>
+    </div>,
+    document.body,
+  );
+}
@@ -0,0 +1,43 @@
+import type { MapData } from './types';
+
+export function MapPlacesCard({ data, onExpand }: { data: MapData; onExpand: () => void }) {
+  const { query, places } = data;
+
+  return (
+    <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 my-2 not-prose" style={{ maxWidth: 600 }}>
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-sm">&#128205;</span>
+        <span className="font-semibold text-slate-700" style={{ fontSize: 13 }}>地図検索結果: 「{query}」</span>
+        <span className="text-slate-400 ml-auto" style={{ fontSize: 11 }}>{places.length}件</span>
+      </div>
+
+      {/* Place list */}
+      <div className="space-y-1.5">
+        {places.slice(0, 5).map((p, i) => (
+          <div
+            key={`${p.lat}-${p.lon}`}
+            className="flex items-start gap-2 bg-white border border-slate-200 rounded-lg px-3 py-2"
+          >
+            <span className="text-slate-400 font-mono flex-shrink-0" style={{ fontSize: 11 }}>{i + 1}</span>
+            <div className="min-w-0">
+              <div className="font-semibold text-slate-800 truncate" style={{ fontSize: 12 }}>{p.name}</div>
+              <div className="text-slate-400 truncate" style={{ fontSize: 11 }}>{p.address}</div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Expand button */}
+      <div className="text-center mt-2">
+        <button
+          onClick={onExpand}
+          className="text-blue-500 hover:text-blue-700 cursor-pointer bg-transparent border-none"
+          style={{ fontSize: 11 }}
+        >
+          &#9660; 地図で表示
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,125 @@
+import { useEffect, useRef } from 'react';
+import type { MapData } from './types';
+
+// Leaflet CDN を動的にロードする
+let leafletLoaded = false;
+let leafletLoadPromise: Promise<void> | null = null;
+
+function loadLeaflet(): Promise<void> {
+  if (leafletLoaded) return Promise.resolve();
+  if (leafletLoadPromise) return leafletLoadPromise;
+
+  leafletLoadPromise = new Promise<void>((resolve, reject) => {
+    // CSS
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://unpkg.com/[email protected]/dist/leaflet.css';
+    document.head.appendChild(link);
+
+    // JS
+    const script = document.createElement('script');
+    script.src = 'https://unpkg.com/[email protected]/dist/leaflet.js';
+    script.onload = () => {
+      leafletLoaded = true;
+      resolve();
+    };
+    script.onerror = () => reject(new Error('Failed to load Leaflet'));
+    document.head.appendChild(script);
+  });
+
+  return leafletLoadPromise;
+}
+
+declare const L: typeof import('leaflet');
+
+export function MapPlacesDetail({ data }: { data: MapData }) {
+  const { query, places } = data;
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<import('leaflet').Map | null>(null);
+
+  useEffect(() => {
+    if (!mapRef.current || places.length === 0) return;
+    let cancelled = false;
+
+    loadLeaflet().then(() => {
+      if (cancelled || !mapRef.current) return;
+
+      // 既存のマップがあれば破棄
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.remove();
+      }
+
+      const center = { lat: places[0]!.lat, lon: places[0]!.lon };
+      const map = L.map(mapRef.current).setView([center.lat, center.lon], 13);
+      mapInstanceRef.current = map;
+
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        maxZoom: 19,
+      }).addTo(map);
+
+      const markers = places.map((p) =>
+        L.marker([p.lat, p.lon])
+          .addTo(map)
+          .bindPopup(`<b>${p.name}</b><br>${p.address}`),
+      );
+
+      if (markers.length > 1) {
+        const group = L.featureGroup(markers);
+        map.fitBounds(group.getBounds().pad(0.15));
+      }
+
+      // モーダルが開いた直後はサイズが確定していない場合がある
+      setTimeout(() => map.invalidateSize(), 100);
+    });
+
+    return () => {
+      cancelled = true;
+      if (mapInstanceRef.current) {
+        mapInstanceRef.current.remove();
+        mapInstanceRef.current = null;
+      }
+    };
+  }, [places]);
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-bold text-slate-800 mb-4">
+        &#128205; 地図検索結果: 「{query}」
+      </h2>
+
+      {/* Leaflet map */}
+      <div
+        ref={mapRef}
+        style={{ height: 400 }}
+        className="w-full rounded-xl overflow-hidden border border-slate-200 mb-6"
+      />
+
+      {/* Place list */}
+      <div className="space-y-4">
+        {places.map((p, i) => (
+          <div key={`${p.lat}-${p.lon}`} className="bg-white border border-slate-200 rounded-xl p-4">
+            <div className="text-slate-400 mb-1" style={{ fontSize: 13 }}>#{i + 1}</div>
+            <h3 className="text-sm font-semibold text-slate-800 leading-snug mb-2">{p.name}</h3>
+
+            <div className="text-xs text-slate-600 space-y-1 mb-3">
+              <div>&#128205; {p.address}</div>
+              <div>&#128204; {p.lat.toFixed(6)}, {p.lon.toFixed(6)}</div>
+              {p.type && <div>&#127991; {p.type}</div>}
+              {p.details && <div>&#128172; {p.details}</div>}
+            </div>
+
+            <a
+              href={p.mapUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold rounded-lg no-underline transition-colors"
+            >
+              OpenStreetMap で開く
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,66 @@
+import type { XPostData } from './types';
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+export function XPostsCard({ data, onExpand }: { data: XPostData; onExpand: () => void }) {
+  const { query, posts } = data;
+
+  return (
+    <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 my-2 not-prose" style={{ maxWidth: 600 }}>
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className="font-bold text-slate-800" style={{ fontSize: 14 }}>&#120143;</span>
+        <span className="font-semibold text-slate-700" style={{ fontSize: 13 }}>X 検索結果: 「{query}」</span>
+        <span className="text-slate-400 ml-auto" style={{ fontSize: 11 }}>{posts.length}件</span>
+      </div>
+
+      {/* Post list */}
+      <div className="space-y-1.5">
+        {posts.slice(0, 5).map((p) => (
+          <a
+            key={p.id}
+            href={p.postUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-start gap-2 bg-white border border-slate-200 rounded-lg px-3 py-2 no-underline hover:border-blue-300 hover:shadow-sm transition-all"
+          >
+            <img
+              src={p.authorImageUrl}
+              alt={p.authorScreenName}
+              className="rounded-full flex-shrink-0"
+              style={{ width: 24, height: 24 }}
+              loading="lazy"
+            />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-1">
+                <span className="font-semibold text-slate-800 truncate" style={{ fontSize: 12 }}>{p.authorName}</span>
+                <span className="text-slate-400 flex-shrink-0" style={{ fontSize: 11 }}>@{p.authorScreenName}</span>
+              </div>
+              <div className="text-slate-600 truncate" style={{ fontSize: 11 }}>{p.text.replace(/\n/g, ' ')}</div>
+              <div className="flex gap-3 mt-0.5 text-slate-400" style={{ fontSize: 10 }}>
+                <span>&#9829; {formatNumber(p.likes)}</span>
+                <span>&#128257; {formatNumber(p.retweets)}</span>
+                <span>&#128065; {formatNumber(p.views)}</span>
+              </div>
+            </div>
+          </a>
+        ))}
+      </div>
+
+      {/* Expand button */}
+      <div className="text-center mt-2">
+        <button
+          onClick={onExpand}
+          className="text-blue-500 hover:text-blue-700 cursor-pointer bg-transparent border-none"
+          style={{ fontSize: 11 }}
+        >
+          &#9660; 詳細を表示
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,77 @@
+import type { XPostData } from './types';
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+function formatDate(iso: string): string {
+  try {
+    return new Date(iso).toLocaleString('ja-JP', {
+      year: 'numeric', month: 'short', day: 'numeric',
+      hour: '2-digit', minute: '2-digit',
+    });
+  } catch {
+    return iso;
+  }
+}
+
+export function XPostsDetail({ data }: { data: XPostData }) {
+  const { query, posts } = data;
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-bold text-slate-800 mb-4">
+        <span style={{ fontSize: 20 }}>&#120143;</span> X 検索結果: 「{query}」
+      </h2>
+
+      <div className="space-y-4">
+        {posts.map((p) => (
+          <div key={p.id} className="bg-white border border-slate-200 rounded-xl p-4">
+            {/* Author header */}
+            <div className="flex items-center gap-3 mb-3">
+              <img
+                src={p.authorImageUrl}
+                alt={p.authorScreenName}
+                className="rounded-full flex-shrink-0"
+                style={{ width: 40, height: 40 }}
+                loading="lazy"
+              />
+              <div>
+                <div className="font-semibold text-slate-800" style={{ fontSize: 14 }}>{p.authorName}</div>
+                <div className="text-slate-400" style={{ fontSize: 12 }}>@{p.authorScreenName}</div>
+              </div>
+              <div className="text-slate-400 ml-auto" style={{ fontSize: 11 }}>
+                {formatDate(p.createdAt)}
+              </div>
+            </div>
+
+            {/* Post text */}
+            <div className="text-sm text-slate-700 leading-relaxed whitespace-pre-wrap mb-3">
+              {p.text}
+            </div>
+
+            {/* Metrics */}
+            <div className="flex gap-4 text-slate-400 mb-3" style={{ fontSize: 12 }}>
+              <span title="いいね">&#9829; {formatNumber(p.likes)}</span>
+              <span title="リポスト">&#128257; {formatNumber(p.retweets)}</span>
+              <span title="返信">&#128172; {formatNumber(p.replies)}</span>
+              <span title="表示">&#128065; {formatNumber(p.views)}</span>
+            </div>
+
+            {/* Link */}
+            <a
+              href={p.postUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 px-3 py-1.5 bg-slate-900 hover:bg-slate-700 text-white text-xs font-semibold rounded-lg no-underline transition-colors"
+            >
+              X で見る
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,70 @@
+import type { YouTubeData } from './types';
+
+export function YouTubeVideosCard({ data, onExpand }: { data: YouTubeData; onExpand: () => void }) {
+  const { query, videos } = data;
+
+  return (
+    <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 my-2 not-prose" style={{ maxWidth: 600 }}>
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-sm">&#9654;</span>
+        <span className="font-semibold text-slate-700" style={{ fontSize: 13 }}>YouTube 検索結果: 「{query}」</span>
+        <span className="text-slate-400 ml-auto" style={{ fontSize: 11 }}>{videos.length}件</span>
+      </div>
+
+      {/* Horizontal scroll thumbnails */}
+      <div className="flex gap-3 overflow-x-auto pb-1">
+        {videos.slice(0, 5).map((v) => (
+          <a
+            key={v.videoId}
+            href={v.videoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="bg-white border border-slate-200 rounded-lg overflow-hidden cursor-pointer hover:border-red-300 hover:shadow-sm transition-all flex-shrink-0 no-underline"
+            style={{ minWidth: 200, maxWidth: 200 }}
+          >
+            <div className="relative">
+              <img
+                src={v.thumbnailUrl}
+                alt={v.title}
+                className="w-full object-cover"
+                style={{ height: 112 }}
+                loading="lazy"
+              />
+              {v.duration && (
+                <span
+                  className="absolute bottom-1 right-1 bg-black/80 text-white px-1 rounded"
+                  style={{ fontSize: 10 }}
+                >
+                  {v.duration}
+                </span>
+              )}
+            </div>
+            <div className="p-2">
+              <div className="font-semibold text-slate-800 leading-tight mb-1 line-clamp-2" style={{ fontSize: 11 }}>
+                {v.title}
+              </div>
+              <div className="text-slate-400 truncate" style={{ fontSize: 10 }}>
+                {v.channelName}
+              </div>
+              {v.viewCount && (
+                <div className="text-slate-400" style={{ fontSize: 10 }}>{v.viewCount}</div>
+              )}
+            </div>
+          </a>
+        ))}
+      </div>
+
+      {/* Expand button */}
+      <div className="text-center mt-2">
+        <button
+          onClick={onExpand}
+          className="text-blue-500 hover:text-blue-700 cursor-pointer bg-transparent border-none"
+          style={{ fontSize: 11 }}
+        >
+          &#9660; 詳細を表示
+        </button>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,67 @@
+import type { YouTubeData } from './types';
+
+export function YouTubeVideosDetail({ data }: { data: YouTubeData }) {
+  const { query, videos } = data;
+
+  return (
+    <div className="p-6">
+      <h2 className="text-lg font-bold text-slate-800 mb-4">
+        &#9654; YouTube 検索結果: 「{query}」
+      </h2>
+
+      <div className="space-y-6">
+        {videos.map((v, i) => (
+          <div key={v.videoId} className="bg-white border border-slate-200 rounded-xl p-4">
+            <div className="flex gap-4 flex-col sm:flex-row">
+              {/* Thumbnail */}
+              <a
+                href={v.videoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="relative flex-shrink-0 no-underline"
+              >
+                <img
+                  src={v.thumbnailUrl}
+                  alt={v.title}
+                  className="rounded-lg object-cover"
+                  style={{ width: 240, height: 135 }}
+                  loading="lazy"
+                />
+                {v.duration && (
+                  <span
+                    className="absolute bottom-2 right-2 bg-black/80 text-white px-1.5 py-0.5 rounded"
+                    style={{ fontSize: 11 }}
+                  >
+                    {v.duration}
+                  </span>
+                )}
+              </a>
+
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <div className="text-slate-400 mb-1" style={{ fontSize: 13 }}>#{i + 1}</div>
+                <h3 className="text-sm font-semibold text-slate-800 leading-snug mb-2">{v.title}</h3>
+                <div className="text-xs text-slate-500 mb-1">{v.channelName}</div>
+                <div className="flex gap-3 text-xs text-slate-400 mb-2">
+                  {v.viewCount && <span>&#128065; {v.viewCount}</span>}
+                  {v.publishedAt && <span>&#128197; {v.publishedAt}</span>}
+                </div>
+                {v.description && (
+                  <div className="text-xs text-slate-500 leading-relaxed mb-3">{v.description}</div>
+                )}
+                <a
+                  href={v.videoUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs font-semibold rounded-lg no-underline transition-colors"
+                >
+                  YouTube で見る
+                </a>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,76 @@
+export type BlockType = 'amazon_products' | 'map_places' | 'x_posts' | 'youtube_videos';
+
+export interface StructuredBlock {
+  refId: string;
+  type: BlockType;
+  title: string;
+  data: AmazonData | MapData | XPostData | YouTubeData;
+}
+
+export interface AmazonData {
+  query: string;
+  products: AmazonProduct[];
+}
+
+export interface AmazonProduct {
+  asin: string;
+  title: string;
+  price?: string;
+  rating?: number;
+  reviewCount?: number;
+  imageUrl?: string;
+  productUrl: string;
+  keepaGraphUrl: string;
+  keepaDetailUrl: string;
+}
+
+export interface MapPlaceItem {
+  name: string;
+  address: string;
+  lat: number;
+  lon: number;
+  type: string;
+  details: string;
+  mapUrl: string;
+}
+
+export interface MapData {
+  query: string;
+  places: MapPlaceItem[];
+}
+
+export interface XPostItem {
+  id: string;
+  text: string;
+  authorName: string;
+  authorScreenName: string;
+  authorImageUrl: string;
+  likes: number;
+  retweets: number;
+  replies: number;
+  views: number;
+  createdAt: string;
+  postUrl: string;
+}
+
+export interface XPostData {
+  query: string;
+  posts: XPostItem[];
+}
+
+export interface YouTubeVideoItem {
+  videoId: string;
+  title: string;
+  channelName: string;
+  thumbnailUrl: string;
+  videoUrl: string;
+  viewCount: string;
+  publishedAt: string;
+  duration: string;
+  description: string;
+}
+
+export interface YouTubeData {
+  query: string;
+  videos: YouTubeVideoItem[];
+}