diff --git a/.memory/worklog.json b/.memory/worklog.json
index 37adf31..9074d6d 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -174,6 +174,13 @@
       "message": "auto-save 2026-05-12 17:50 (~1)",
       "hash": "440164e",
       "files_changed": 1
+    },
+    {
+      "ts": "2026-05-12T18:29:59+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-12 18:29 (+1, ~1)",
+      "hash": "aa5ad08",
+      "files_changed": 2
     }
   ]
 }
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 95f108a..1127ad3 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -240,12 +240,12 @@ export default function Home() {
           <ThemeToggle />
         </header>
 
-        {/* 上区：看板（60vh）— 10 列映射底部节点 */}
-        <section className="relative z-10 flex-shrink-0 border-b border-white/5" style={{ height: "60vh" }}>
+        {/* 上区：折叠看板 — 默认仅一条 tile 栏，点击 tile 才展开 */}
+        <section className="relative z-10 flex-shrink-0">
           <Dashboard data={nodeData} />
         </section>
 
-        {/* 下区：紧凑 DAG 节点流图 */}
+        {/* 下区：紧凑 DAG 节点流图（撑满剩余高度） */}
         <section className="relative flex-1 min-h-0">
           <ReactFlow
             nodes={nodes}
diff --git a/web/components/dashboard.tsx b/web/components/dashboard.tsx
index b1ba948..498488e 100644
--- a/web/components/dashboard.tsx
+++ b/web/components/dashboard.tsx
@@ -1,14 +1,13 @@
 "use client"
-import { useRef, useState } from "react"
+import { useRef, useState, type ReactNode } from "react"
 import {
   Link2, Upload, Download, Scissors, Image as ImageIcon,
   Mic, Languages, FileEdit, Sparkles, Film, FileVideo, Loader2, Plus, Check,
+  ChevronDown, X,
 } from "lucide-react"
 import { type Job, frameUrl, videoUrl } from "@/lib/api"
 import { type NodeData } from "@/components/nodes"
 
-const COL_W = 280
-
 type ColType = "input" | "process" | "ai" | "output"
 const TYPE_GRAD: Record<ColType, string> = {
   input: "linear-gradient(135deg, #6366f1, #a855f7)",
@@ -19,30 +18,16 @@ const TYPE_GRAD: Record<ColType, string> = {
 
 type ColState = "pending" | "running" | "done" | "failed"
 const STATE_DOT: Record<ColState, string> = {
-  pending: "bg-white/20",
-  running: "bg-violet-400 animate-pulse",
-  done: "bg-emerald-400",
-  failed: "bg-red-400",
+  pending: "bg-white/25",
+  running: "bg-violet-300 shadow-[0_0_8px_rgba(167,139,250,0.8)] animate-pulse",
+  done: "bg-emerald-300 shadow-[0_0_8px_rgba(110,231,183,0.7)]",
+  failed: "bg-red-400 shadow-[0_0_8px_rgba(248,113,113,0.7)]",
 }
 
-function ColumnHeader({ type, title, label, state }: { type: ColType; title: string; label: string; state: ColState }) {
-  return (
-    <div className="rounded-lg overflow-hidden mb-3 sticky top-0 z-10 shadow-lg">
-      <div className="relative px-3 py-2 flex items-center gap-2" style={{ background: TYPE_GRAD[type] }}>
-        <span className="text-white font-semibold text-[13px] flex-1 truncate">{title}</span>
-        <span className={`h-2 w-2 rounded-full ${STATE_DOT[state]}`} />
-      </div>
-      <div className="bg-black/40 dark:bg-black/40 px-3 py-1.5 text-[10px] uppercase tracking-widest text-white/60 font-mono border-t border-white/5">
-        {label}
-      </div>
-    </div>
-  )
-}
-
-function MiniCard({ children, className = "", onClick }: { children: React.ReactNode; className?: string; onClick?: (e: React.MouseEvent) => void }) {
+function MiniCard({ children, className = "", onClick }: { children: ReactNode; className?: string; onClick?: (e: React.MouseEvent) => void }) {
   return (
     <div
-      className={`rounded-lg bg-white/[0.04] dark:bg-white/[0.04] border border-white/8 dark:border-white/10 backdrop-blur-md p-2.5 text-[var(--text-strong)] ${onClick ? "cursor-pointer hover:bg-white/[0.07] hover:border-white/20 transition" : ""} ${className}`}
+      className={`rounded-lg bg-white/[0.04] dark:bg-white/[0.04] border border-white/10 backdrop-blur-md p-2.5 text-[var(--text-strong)] ${onClick ? "cursor-pointer hover:bg-white/[0.07] hover:border-white/20 transition" : ""} ${className}`}
       onClick={onClick}
     >
       {children}
@@ -59,6 +44,7 @@ export function Dashboard({ data }: Props) {
   const [url, setUrl] = useState("")
   const [videoT, setVideoT] = useState(0)
   const [addingFrame, setAddingFrame] = useState(false)
+  const [expanded, setExpanded] = useState<Set<string>>(new Set())
   const fileRef = useRef<HTMLInputElement>(null)
   const videoRef = useRef<HTMLVideoElement>(null)
 
@@ -72,7 +58,6 @@ export function Dashboard({ data }: Props) {
   const hasZh = job?.transcript.some((s) => s.zh) ?? false
   const isFailed = job?.status === "failed"
 
-  /* 每列状态 */
   const colState: Record<string, ColState> = {
     input: !job ? "pending" : "done",
     download: !job ? "pending" : isDownloading ? "running" : hasVideo ? "done" : isFailed && job.progress < 30 ? "failed" : "pending",
@@ -86,326 +71,387 @@ export function Dashboard({ data }: Props) {
     compose: "pending",
   }
 
-  return (
-    <div className="w-full h-full overflow-x-auto overflow-y-hidden">
-      <div className="flex gap-3 px-4 py-3 h-full" style={{ minWidth: 10 * (COL_W + 12) + 32 }}>
+  /* 每列摘要 = tile 副标题 */
+  const colSummary: Record<string, string> = {
+    input: job ? (job.url.startsWith("upload://") ? "📎 上传" : "🔗 链接") : "等待",
+    download: hasVideo && job ? `${job.width}×${job.height} · ${job.duration.toFixed(1)}s` : isDownloading ? "下载中…" : "—",
+    split: hasFrames ? "wav 已生成" : isSplitting ? "拆轨中…" : "—",
+    keyframe: hasFrames ? `${data.selectedFrames.size}/${job!.frames.length} 选用` : "—",
+    asr: hasTranscript ? `${job!.transcript.length} 段` : "—",
+    translate: hasZh ? `${job!.transcript.filter((s) => s.zh).length} 段` : "—",
+    rewrite: "占位",
+    imagegen: data.selectedFrames.size > 0 ? `${data.selectedFrames.size} 张待生` : "占位",
+    videogen: "占位",
+    compose: "占位",
+  }
 
-        {/* 1. Input */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="input" title="输入 · Input" label="STEP 1" state={colState.input} />
-          <div className="space-y-2.5">
-            <MiniCard>
-              <input
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-                placeholder="粘贴 TikTok 链接"
-                disabled={isDownloading || data.submitting}
-                className="w-full text-[12px] px-2.5 py-1.5 rounded-md bg-white/60 dark:bg-black/40 border border-black/10 dark:border-white/10 outline-none text-[var(--text-strong)] placeholder:text-[var(--text-faint)] focus:ring-2 focus:ring-[var(--ring)] disabled:opacity-40"
-              />
-              <div className="mt-2 flex gap-1.5">
-                <button
-                  type="button"
-                  disabled={isDownloading || data.submitting || !url.trim()}
-                  onClick={() => data.onSubmitUrl(url.trim())}
-                  className="flex-1 text-[11px] py-1.5 rounded-md bg-white text-black hover:bg-white/90 disabled:opacity-30 disabled:cursor-not-allowed inline-flex items-center justify-center gap-1"
-                >
-                  {(data.submitting || isDownloading) && <Loader2 className="h-3 w-3 animate-spin" />}
-                  {isDownloading ? "下载中" : "提交"}
-                </button>
-                <button
-                  type="button"
-                  disabled={isDownloading || data.submitting}
-                  onClick={() => fileRef.current?.click()}
-                  className="text-[11px] px-2 py-1.5 rounded-md bg-white/[0.06] border border-white/15 hover:bg-white/[0.12] inline-flex items-center gap-1 disabled:opacity-30"
-                >
-                  <Upload className="h-3 w-3" />
-                </button>
-                <input
-                  ref={fileRef}
-                  type="file"
-                  accept="video/mp4,video/quicktime,video/webm,.mp4,.mov,.webm,.mkv,.m4v"
-                  className="hidden"
-                  onChange={(e) => {
-                    const f = e.target.files?.[0]
-                    if (f) data.onUploadFile(f)
-                    e.target.value = ""
-                  }}
-                />
+  const TILES: Array<{ key: string; title: string; type: ColType; icon: ReactNode; step: number }> = [
+    { key: "input", title: "输入", type: "input", icon: <Link2 className="h-3.5 w-3.5" />, step: 1 },
+    { key: "download", title: "下载", type: "process", icon: <Download className="h-3.5 w-3.5" />, step: 2 },
+    { key: "split", title: "拆分", type: "process", icon: <Scissors className="h-3.5 w-3.5" />, step: 3 },
+    { key: "keyframe", title: "关键帧", type: "ai", icon: <ImageIcon className="h-3.5 w-3.5" />, step: 4 },
+    { key: "asr", title: "转录", type: "ai", icon: <Mic className="h-3.5 w-3.5" />, step: 5 },
+    { key: "translate", title: "翻译", type: "ai", icon: <Languages className="h-3.5 w-3.5" />, step: 6 },
+    { key: "rewrite", title: "改写", type: "ai", icon: <FileEdit className="h-3.5 w-3.5" />, step: 7 },
+    { key: "imagegen", title: "生图", type: "ai", icon: <Sparkles className="h-3.5 w-3.5" />, step: 8 },
+    { key: "videogen", title: "生视频", type: "ai", icon: <Film className="h-3.5 w-3.5" />, step: 9 },
+    { key: "compose", title: "合成", type: "output", icon: <FileVideo className="h-3.5 w-3.5" />, step: 10 },
+  ]
+
+  // 单选展开：toggle 同一 key = 收起；点其他 key = 切换
+  const toggleTile = (key: string) => setExpanded((prev) => (prev.has(key) ? new Set() : new Set([key])))
+  const closeTile = (_key: string) => setExpanded(new Set())
+
+  return (
+    <div className="w-full">
+      {/* Tile Bar — 一直显示 */}
+      <div className="px-4 pt-3 pb-2 flex items-center gap-1.5 overflow-x-auto">
+        {TILES.map((t) => {
+          const state = colState[t.key]
+          const isOpen = expanded.has(t.key)
+          return (
+            <button
+              key={t.key}
+              type="button"
+              onClick={() => toggleTile(t.key)}
+              className={`shrink-0 group rounded-lg overflow-hidden border transition flex flex-col text-left ${
+                isOpen ? "border-violet-400/60 ring-2 ring-violet-400/40" : "border-white/8 hover:border-white/20"
+              }`}
+              style={{ width: 134 }}
+            >
+              <div className="relative px-2.5 py-1.5 flex items-center gap-1.5" style={{ background: TYPE_GRAD[t.type] }}>
+                <span className="text-white/70 text-[9px] font-mono">{String(t.step).padStart(2, "0")}</span>
+                <span className="text-white">{t.icon}</span>
+                <span className="text-white text-[12px] font-medium">{t.title}</span>
+                <span className="ml-auto flex items-center gap-1">
+                  <span className={`h-2 w-2 rounded-full ${STATE_DOT[state]}`} />
+                  <ChevronDown className={`h-3 w-3 text-white/70 transition ${isOpen ? "rotate-180" : ""}`} />
+                </span>
               </div>
-            </MiniCard>
-            {hasVideo && (
-              <MiniCard>
-                <button
-                  type="button"
-                  disabled={isAnalyzing || data.analyzing}
-                  onClick={data.onAnalyze}
-                  className={`w-full text-[12px] py-2 rounded-md bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:opacity-95 disabled:opacity-40 inline-flex items-center justify-center gap-1.5 font-semibold ${!isAnalyzing && !data.analyzing && !hasFrames ? "animate-pulse" : ""}`}
-                >
-                  {(isAnalyzing || data.analyzing) ? <><Loader2 className="h-3.5 w-3.5 animate-spin" /> 解析中…</> : hasFrames ? "重新解析" : "▶ 开始解析"}
-                </button>
-              </MiniCard>
-            )}
-            {job && (
-              <MiniCard>
-                <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1">来源</div>
-                <div className="text-[11px] font-mono text-[var(--text-strong)] break-all">
-                  {job.url.startsWith("upload://") ? `📎 ${job.url.slice(9)}` : job.url}
+              <div className="px-2.5 py-1 bg-black/40 text-[10px] text-[var(--text-soft)] truncate">
+                {colSummary[t.key]}
+              </div>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* 展开面板 — 多卡同时展开，按 step 顺序排列 */}
+      {expanded.size > 0 && (
+        <div className="relative mx-4 mb-3 rounded-xl border border-white/10 bg-black/30 backdrop-blur-xl overflow-hidden" style={{ maxHeight: "52vh" }}>
+          <div className="flex items-center justify-between px-4 py-2 border-b border-white/8">
+            <span className="text-[10px] uppercase tracking-widest text-[var(--text-faint)]">展开详情</span>
+            <button
+              onClick={() => setExpanded(new Set())}
+              className="text-[var(--text-faint)] hover:text-[var(--text-strong)]"
+              title="收起"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+          <div className="overflow-y-auto p-3 space-y-3" style={{ maxHeight: "calc(52vh - 40px)" }}>
+            {TILES.filter((t) => expanded.has(t.key)).map((t) => (
+              <section key={t.key} className="rounded-lg border border-white/8 overflow-hidden">
+                <div className="flex items-center justify-between px-3 py-1.5" style={{ background: TYPE_GRAD[t.type] }}>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-white/70 text-[9px] font-mono">{String(t.step).padStart(2, "0")}</span>
+                    <span className="text-white">{t.icon}</span>
+                    <span className="text-[12.5px] font-semibold text-white">{t.title}</span>
+                    <span className="text-[10px] text-white/60 ml-2">{colSummary[t.key]}</span>
+                  </div>
+                  <button
+                    onClick={() => closeTile(t.key)}
+                    className="text-white/70 hover:text-white"
+                    title="收起此卡"
+                  >
+                    <X className="h-3.5 w-3.5" />
+                  </button>
                 </div>
-              </MiniCard>
-            )}
+                <div className="p-3 bg-black/20">
+                  {renderSection(t.key)}
+                </div>
+              </section>
+            ))}
           </div>
         </div>
+      )}
+    </div>
+  )
 
-        {/* 2. Download */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="process" title="下载 · Download" label="STEP 2 · yt-dlp" state={colState.download} />
-          <div className="space-y-2.5">
-            <MiniCard>
-              <div className="text-[11px] text-[var(--text-soft)] leading-relaxed">
-                {job?.url.startsWith("upload://") ? "本地上传 · 跳过下载" : "TikTok / yt-dlp 兼容站点"}
+  function renderSection(key: string): ReactNode {
+    return (
+      <>
+
+            {/* ---- Input ---- */}
+            {key === "input" && (
+              <div className="grid grid-cols-2 gap-3 max-w-2xl">
+                <MiniCard>
+                  <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">链接 / 上传</div>
+                  <input
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    placeholder="粘贴 TikTok 链接"
+                    disabled={isDownloading || data.submitting}
+                    className="w-full text-[12px] px-2.5 py-1.5 rounded-md bg-black/40 border border-white/10 outline-none text-[var(--text-strong)] placeholder:text-[var(--text-faint)] focus:ring-2 focus:ring-[var(--ring)] disabled:opacity-40"
+                  />
+                  <div className="mt-2 flex gap-1.5">
+                    <button
+                      type="button"
+                      disabled={isDownloading || data.submitting || !url.trim()}
+                      onClick={() => data.onSubmitUrl(url.trim())}
+                      className="flex-1 text-[11.5px] py-1.5 rounded-md bg-white text-black hover:bg-white/90 disabled:opacity-30 inline-flex items-center justify-center gap-1"
+                    >
+                      {(data.submitting || isDownloading) && <Loader2 className="h-3 w-3 animate-spin" />}
+                      {isDownloading ? "下载中" : "提交"}
+                    </button>
+                    <button
+                      type="button"
+                      disabled={isDownloading || data.submitting}
+                      onClick={() => fileRef.current?.click()}
+                      className="text-[11.5px] px-2.5 py-1.5 rounded-md bg-white/[0.06] border border-white/15 hover:bg-white/[0.12] inline-flex items-center gap-1 disabled:opacity-30"
+                    >
+                      <Upload className="h-3 w-3" /> 上传
+                    </button>
+                    <input
+                      ref={fileRef}
+                      type="file"
+                      accept="video/mp4,video/quicktime,video/webm,.mp4,.mov,.webm,.mkv,.m4v"
+                      className="hidden"
+                      onChange={(e) => {
+                        const f = e.target.files?.[0]
+                        if (f) data.onUploadFile(f)
+                        e.target.value = ""
+                      }}
+                    />
+                  </div>
+                </MiniCard>
+                {hasVideo && (
+                  <MiniCard>
+                    <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">下一步</div>
+                    <button
+                      type="button"
+                      disabled={isAnalyzing || data.analyzing}
+                      onClick={data.onAnalyze}
+                      className={`w-full text-[12.5px] py-2 rounded-md bg-gradient-to-r from-indigo-500 to-violet-500 text-white hover:opacity-95 disabled:opacity-40 inline-flex items-center justify-center gap-1.5 font-semibold shadow-lg shadow-violet-500/30 ${!isAnalyzing && !data.analyzing && !hasFrames ? "animate-pulse" : ""}`}
+                    >
+                      {(isAnalyzing || data.analyzing) ? <><Loader2 className="h-3.5 w-3.5 animate-spin" /> 解析中…</> : hasFrames ? "重新解析" : "▶ 开始解析"}
+                    </button>
+                    {job && (
+                      <div className="mt-2 text-[10px] font-mono text-[var(--text-faint)] truncate">
+                        {job.url.startsWith("upload://") ? `📎 ${job.url.slice(9)}` : job.url}
+                      </div>
+                    )}
+                  </MiniCard>
+                )}
               </div>
-            </MiniCard>
-            {hasVideo && job && (
-              <>
-                <MiniCard className="overflow-hidden p-0">
+            )}
+
+            {/* ---- Download ---- */}
+            {key === "download" && hasVideo && job && (
+              <div className="grid grid-cols-[auto_1fr] gap-4 max-w-4xl items-start">
+                <MiniCard className="p-0 overflow-hidden" >
                   <video
                     ref={videoRef}
                     src={videoUrl(job.id)}
                     controls
                     onTimeUpdate={(e) => setVideoT((e.target as HTMLVideoElement).currentTime)}
-                    className="block w-full bg-black"
+                    className="block bg-black"
+                    style={{ width: 260 }}
+                  />
+                </MiniCard>
+                <div className="space-y-2">
+                  <MiniCard>
+                    <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">元数据</div>
+                    <div className="grid grid-cols-3 gap-3 text-[11px] font-mono">
+                      <div><div className="text-[var(--text-faint)] text-[9.5px]">分辨率</div><div className="text-[var(--text-strong)] text-[13px] mt-0.5">{job.width}×{job.height}</div></div>
+                      <div><div className="text-[var(--text-faint)] text-[9.5px]">时长</div><div className="text-[var(--text-strong)] text-[13px] mt-0.5">{job.duration.toFixed(1)}s</div></div>
+                      <div><div className="text-[var(--text-faint)] text-[9.5px]">来源</div><div className="text-[var(--text-strong)] text-[13px] mt-0.5">{job.url.startsWith("upload://") ? "上传" : "yt-dlp"}</div></div>
+                    </div>
+                  </MiniCard>
+                </div>
+              </div>
+            )}
+            {key === "download" && !hasVideo && (
+              <div className="text-[11.5px] text-[var(--text-faint)] py-4 text-center">{isDownloading ? "yt-dlp 下载中…" : "等待提交"}</div>
+            )}
+
+            {/* ---- Split ---- */}
+            {key === "split" && (
+              <div className="grid grid-cols-2 gap-3 max-w-2xl">
+                <MiniCard>
+                  <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1">视频流</div>
+                  <div className="text-[13px] text-[var(--text-strong)]">→ 关键帧抽取</div>
+                  <div className="text-[10.5px] text-[var(--text-faint)] mt-1">ffmpeg fast seek + Laplacian 评分</div>
+                </MiniCard>
+                <MiniCard>
+                  <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1">音频流</div>
+                  <div className="text-[13px] text-[var(--text-strong)]">→ ASR (16kHz mono wav)</div>
+                  <div className="text-[10.5px] text-[var(--text-faint)] mt-1">ffmpeg -vn -ac 1 -ar 16000</div>
+                </MiniCard>
+              </div>
+            )}
+
+            {/* ---- Keyframe ---- */}
+            {key === "keyframe" && (
+              <div className="space-y-3">
+                {hasVideo && job && (
+                  <MiniCard>
+                    <button
+                      type="button"
+                      disabled={addingFrame}
+                      onClick={async () => {
+                        const t = videoRef.current?.currentTime ?? videoT
+                        setAddingFrame(true)
+                        try { await data.onAddManualFrame(t) } finally { setAddingFrame(false) }
+                      }}
+                      className="w-full text-[12px] py-2 rounded-md border border-dashed border-emerald-400/40 bg-emerald-400/5 hover:bg-emerald-400/10 text-emerald-300 disabled:opacity-50 inline-flex items-center justify-center gap-1.5"
+                    >
+                      {addingFrame ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Plus className="h-3.5 w-3.5" />}
+                      + 把视频 {videoT.toFixed(1)}s 加为关键帧
+                    </button>
+                  </MiniCard>
+                )}
+                {!hasFrames ? (
+                  <div className="text-[11.5px] text-[var(--text-faint)] py-4 text-center">等待解析后抽取（默认 5 张）</div>
+                ) : (
+                  <div className="grid grid-cols-5 gap-3">
+                    {job!.frames.map((f) => {
+                      const isSel = data.selectedFrames.has(f.index)
+                      return (
+                        <MiniCard key={f.index} className={`p-0 overflow-hidden ${isSel ? "ring-2 ring-emerald-400 border-emerald-400" : ""}`}>
+                          <button
+                            type="button"
+                            onClick={(e) => { e.stopPropagation(); data.onExpandFrame(f.index) }}
+                            className="block w-full aspect-video bg-black relative overflow-hidden"
+                          >
+                            <img src={frameUrl(job!.id, f.index)} alt={`frame ${f.index}`} className="absolute inset-0 w-full h-full object-cover" />
+                            <div className="absolute top-1 left-1 bg-black/70 text-white text-[9px] font-mono px-1.5 py-0.5 rounded">#{f.index + 1}</div>
+                            <div className="absolute bottom-1 right-1 bg-black/70 text-white text-[9px] font-mono px-1.5 py-0.5 rounded">{f.timestamp.toFixed(1)}s</div>
+                          </button>
+                          <div className="px-2 py-1.5 flex items-center justify-between">
+                            <span className="text-[10.5px] text-[var(--text-soft)]">分镜 {f.index + 1}</span>
+                            <button
+                              type="button"
+                              onClick={(e) => { e.stopPropagation(); data.onToggleFrame(f.index) }}
+                              className={`text-[10px] px-1.5 py-0.5 rounded inline-flex items-center gap-0.5 ${isSel ? "bg-emerald-500 text-white" : "bg-white/10 text-[var(--text-soft)] border border-white/10"}`}
+                            >
+                              <Check className="h-2.5 w-2.5" />
+                              {isSel ? "已选" : "选用"}
+                            </button>
+                          </div>
+                        </MiniCard>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* ---- ASR / Translate ---- */}
+            {(key === "asr" || key === "translate") && (
+              !hasTranscript ? (
+                <div className="text-[11.5px] text-[var(--text-faint)] py-4 text-center">
+                  {colState.asr === "running" ? "Gemini 转录中…" : "等待关键帧抽取"}
+                </div>
+              ) : (
+                <div className="grid grid-cols-2 gap-3">
+                  {job!.transcript.map((s) => (
+                    <MiniCard key={s.index}>
+                      <div className="text-[9.5px] font-mono text-[var(--text-faint)] mb-1.5">
+                        {s.start.toFixed(1)}s → {s.end.toFixed(1)}s
+                      </div>
+                      <div className="text-[12px] text-[var(--text-strong)] leading-snug mb-1">
+                        <span className="text-[var(--text-faint)] mr-1 text-[10px]">EN</span>{s.en}
+                      </div>
+                      <div className="text-[12px] text-[var(--text-strong)] leading-snug">
+                        <span className="text-[var(--text-faint)] mr-1 text-[10px]">ZH</span>{s.zh || <span className="text-[var(--text-faint)]">翻译中…</span>}
+                      </div>
+                    </MiniCard>
+                  ))}
+                </div>
+              )
+            )}
+
+            {/* ---- Rewrite ---- */}
+            {key === "rewrite" && (
+              <div className="grid grid-cols-2 gap-3 max-w-2xl">
+                <MiniCard>
+                  <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">产品信息</div>
+                  <textarea
+                    rows={4}
+                    placeholder="SKG 产品关键卖点（占位）"
+                    disabled
+                    className="w-full text-[12px] px-2 py-1.5 rounded-md bg-black/30 border border-dashed border-white/10 placeholder:text-[var(--text-faint)] text-[var(--text-strong)] resize-none opacity-70"
                   />
                 </MiniCard>
                 <MiniCard>
-                  <div className="grid grid-cols-2 gap-2 text-[10.5px] font-mono">
-                    <div>
-                      <div className="text-[var(--text-faint)] uppercase tracking-widest text-[9px] mb-0.5">分辨率</div>
-                      <div className="text-[var(--text-strong)] text-[12px]">{job.width}×{job.height}</div>
+                  <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">模型 & 状态</div>
+                  <div className="text-[11.5px] text-[var(--text-soft)] mb-1">模型：<span className="font-mono text-[var(--text-strong)]">gemini-2.5-pro</span></div>
+                  <div className="text-[10.5px] text-[var(--text-faint)]">下一冲刺接入</div>
+                </MiniCard>
+              </div>
+            )}
+
+            {/* ---- ImageGen ---- */}
+            {key === "imagegen" && (
+              <div className="space-y-3">
+                <MiniCard>
+                  <div className="grid grid-cols-2 gap-2 text-[11.5px]">
+                    <div className="rounded-md bg-violet-500/10 border border-violet-400/30 px-2.5 py-2">
+                      <div className="text-[9.5px] text-violet-300 uppercase tracking-widest">推荐</div>
+                      <div className="text-[var(--text-strong)]">nano-banana-pro</div>
+                      <div className="text-[10px] text-[var(--text-faint)]">Gemini 3 Pro Image</div>
                     </div>
-                    <div>
-                      <div className="text-[var(--text-faint)] uppercase tracking-widest text-[9px] mb-0.5">时长</div>
-                      <div className="text-[var(--text-strong)] text-[12px]">{job.duration.toFixed(1)}s</div>
+                    <div className="rounded-md bg-white/[0.04] border border-white/10 px-2.5 py-2">
+                      <div className="text-[9.5px] text-[var(--text-faint)] uppercase tracking-widest">备选</div>
+                      <div className="text-[var(--text-strong)]">gpt-image-2</div>
+                      <div className="text-[10px] text-[var(--text-faint)]">OpenAI</div>
                     </div>
                   </div>
                 </MiniCard>
-              </>
+                {data.selectedFrames.size === 0 ? (
+                  <div className="text-[11.5px] text-[var(--text-faint)] py-3 text-center">在「关键帧」里勾选后启动</div>
+                ) : (
+                  <div className="grid grid-cols-5 gap-3">
+                    {Array.from({ length: data.selectedFrames.size }).map((_, i) => (
+                      <MiniCard key={i} className="aspect-video flex items-center justify-center">
+                        <span className="text-[11px] text-[var(--text-faint)]">#{i + 1} 待生</span>
+                      </MiniCard>
+                    ))}
+                  </div>
+                )}
+              </div>
             )}
-          </div>
-        </div>
 
-        {/* 3. Split */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="process" title="拆分 · Split" label="STEP 3 · ffmpeg" state={colState.split} />
-          <div className="space-y-2.5">
-            <MiniCard>
-              <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1">视频流</div>
-              <div className="text-[12px] text-[var(--text-strong)]">→ 关键帧抽取</div>
-            </MiniCard>
-            <MiniCard>
-              <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1">音频流</div>
-              <div className="text-[12px] text-[var(--text-strong)]">→ ASR (16kHz mono wav)</div>
-            </MiniCard>
-          </div>
-        </div>
-
-        {/* 4. Keyframe — 5 张缩略图 */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader
-            type="ai"
-            title="关键帧 · Keyframes"
-            label={`STEP 4 · ${hasFrames ? `${data.selectedFrames.size}/${job!.frames.length} 选用` : "等待"}`}
-            state={colState.keyframe}
-          />
-          <div className="space-y-2.5">
-            {hasVideo && job && (
-              <MiniCard>
-                <button
-                  type="button"
-                  disabled={addingFrame}
-                  onClick={async () => {
-                    const t = videoRef.current?.currentTime ?? videoT
-                    setAddingFrame(true)
-                    try { await data.onAddManualFrame(t) } finally { setAddingFrame(false) }
-                  }}
-                  className="w-full text-[11px] py-1.5 rounded-md border border-dashed border-emerald-400/40 bg-emerald-400/5 hover:bg-emerald-400/10 text-emerald-300 disabled:opacity-50 inline-flex items-center justify-center gap-1"
-                >
-                  {addingFrame ? <Loader2 className="h-3 w-3 animate-spin" /> : <Plus className="h-3 w-3" />}
-                  + 把视频 {videoT.toFixed(1)}s 加为关键帧
-                </button>
-              </MiniCard>
-            )}
-            {!hasFrames ? (
-              <MiniCard>
-                <div className="text-[11px] text-[var(--text-faint)] text-center py-3">
-                  等待解析后抽取（默认 5 张）
-                </div>
-              </MiniCard>
-            ) : (
-              job!.frames.map((f) => {
-                const isSel = data.selectedFrames.has(f.index)
-                return (
-                  <MiniCard key={f.index} className={`p-0 overflow-hidden ${isSel ? "ring-2 ring-emerald-400 border-emerald-400" : ""}`}>
-                    <button
-                      type="button"
-                      onClick={(e) => { e.stopPropagation(); data.onExpandFrame(f.index) }}
-                      className="block w-full aspect-video bg-black relative overflow-hidden"
-                    >
-                      <img src={frameUrl(job!.id, f.index)} alt={`frame ${f.index}`} className="absolute inset-0 w-full h-full object-cover" />
-                      <div className="absolute top-1 left-1 bg-black/70 text-white text-[9px] font-mono px-1.5 py-0.5 rounded">#{f.index + 1}</div>
-                      <div className="absolute bottom-1 right-1 bg-black/70 text-white text-[9px] font-mono px-1.5 py-0.5 rounded">{f.timestamp.toFixed(1)}s</div>
-                    </button>
-                    <div className="px-2 py-1.5 flex items-center justify-between">
-                      <span className="text-[10.5px] text-[var(--text-soft)]">分镜 {f.index + 1}</span>
-                      <button
-                        type="button"
-                        onClick={(e) => { e.stopPropagation(); data.onToggleFrame(f.index) }}
-                        className={`text-[10px] px-1.5 py-0.5 rounded inline-flex items-center gap-0.5 ${isSel ? "bg-emerald-500 text-white" : "bg-white/10 text-[var(--text-soft)] border border-white/10"}`}
-                      >
-                        <Check className="h-2.5 w-2.5" />
-                        {isSel ? "已选" : "选用"}
-                      </button>
-                    </div>
+            {/* ---- VideoGen ---- */}
+            {key === "videogen" && (
+              <div className="grid grid-cols-3 gap-3 max-w-2xl">
+                {["Sora 2 · SKG", "Seedance · 外部", "Kling · 外部"].map((m) => (
+                  <MiniCard key={m}>
+                    <div className="text-[10.5px] text-[var(--text-soft)]">{m}</div>
                   </MiniCard>
-                )
-              })
-            )}
-          </div>
-        </div>
-
-        {/* 5. ASR */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="ai" title="转录 · ASR" label="STEP 5 · Gemini" state={colState.asr} />
-          <div className="space-y-2.5">
-            {!hasTranscript ? (
-              <MiniCard>
-                <div className="text-[11px] text-[var(--text-faint)] text-center py-3">
-                  {colState.asr === "running" ? "Gemini 转录中…" : "等待关键帧抽取"}
-                </div>
-              </MiniCard>
-            ) : (
-              job!.transcript.map((s) => (
-                <MiniCard key={s.index}>
-                  <div className="text-[9.5px] font-mono text-[var(--text-faint)] mb-1">
-                    {s.start.toFixed(1)}s → {s.end.toFixed(1)}s
-                  </div>
-                  <div className="text-[11.5px] text-[var(--text-strong)] leading-snug">{s.en}</div>
-                </MiniCard>
-              ))
-            )}
-          </div>
-        </div>
-
-        {/* 6. Translate */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="ai" title="翻译 · Translate" label="STEP 6 · EN → ZH" state={colState.translate} />
-          <div className="space-y-2.5">
-            {!hasZh ? (
-              <MiniCard>
-                <div className="text-[11px] text-[var(--text-faint)] text-center py-3">等待 ASR 完成</div>
-              </MiniCard>
-            ) : (
-              job!.transcript.map((s) => (
-                <MiniCard key={s.index}>
-                  <div className="text-[9.5px] font-mono text-[var(--text-faint)] mb-1">
-                    {s.start.toFixed(1)}s → {s.end.toFixed(1)}s
-                  </div>
-                  <div className="text-[11.5px] text-[var(--text-strong)] leading-snug">{s.zh || <span className="text-[var(--text-faint)]">翻译中…</span>}</div>
-                </MiniCard>
-              ))
-            )}
-          </div>
-        </div>
-
-        {/* 7. Rewrite */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="ai" title="改写 · Rewrite" label="STEP 7 · 接产品信息" state={colState.rewrite} />
-          <div className="space-y-2.5">
-            <MiniCard>
-              <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">产品信息</div>
-              <textarea
-                rows={3}
-                placeholder="SKG 产品关键卖点（占位）"
-                disabled
-                className="w-full text-[11.5px] px-2 py-1.5 rounded-md bg-black/30 border border-dashed border-white/10 placeholder:text-[var(--text-faint)] text-[var(--text-strong)] resize-none opacity-70"
-              />
-            </MiniCard>
-            <MiniCard>
-              <div className="text-[10.5px] text-[var(--text-soft)]">
-                模型：<span className="font-mono text-[var(--text-strong)]">gemini-2.5-pro</span>
-              </div>
-              <div className="text-[10px] text-[var(--text-faint)] mt-0.5">下一冲刺接入</div>
-            </MiniCard>
-          </div>
-        </div>
-
-        {/* 8. ImageGen */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="ai" title="生图 · Image Gen" label={`STEP 8 · ${data.selectedFrames.size > 0 ? `${data.selectedFrames.size} 张待生` : "选关键帧"}`} state={colState.imagegen} />
-          <div className="space-y-2.5">
-            <MiniCard>
-              <div className="grid grid-cols-2 gap-1.5 text-[10.5px]">
-                <div className="rounded bg-violet-500/10 border border-violet-400/30 px-1.5 py-1.5">
-                  <div className="text-[9px] text-violet-300 uppercase tracking-widest">推荐</div>
-                  <div className="text-[var(--text-strong)] text-[10.5px]">nano-banana-pro</div>
-                </div>
-                <div className="rounded bg-white/[0.04] border border-white/10 px-1.5 py-1.5">
-                  <div className="text-[9px] text-[var(--text-faint)] uppercase tracking-widest">备选</div>
-                  <div className="text-[var(--text-strong)] text-[10.5px]">gpt-image-2</div>
-                </div>
-              </div>
-            </MiniCard>
-            {data.selectedFrames.size === 0 ? (
-              <MiniCard>
-                <div className="text-[11px] text-[var(--text-faint)] text-center py-2">
-                  选关键帧后，每张 → 1 张生成图
-                </div>
-              </MiniCard>
-            ) : (
-              Array.from({ length: data.selectedFrames.size }).map((_, i) => (
-                <MiniCard key={i} className="aspect-video flex items-center justify-center">
-                  <span className="text-[11px] text-[var(--text-faint)]">生成图 #{i + 1} · 待启动</span>
-                </MiniCard>
-              ))
-            )}
-          </div>
-        </div>
-
-        {/* 9. VideoGen */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="ai" title="生视频 · Video Gen" label="STEP 9 · 多家可切" state={colState.videogen} />
-          <div className="space-y-2.5">
-            <MiniCard>
-              <div className="text-[10px] uppercase tracking-widest text-[var(--text-faint)] mb-1.5">模型</div>
-              <div className="space-y-1.5 text-[11px]">
-                {["Sora 2 · SKG 网关", "Seedance · 外部 API", "Kling · 外部 API"].map((m) => (
-                  <div key={m} className="rounded border border-dashed border-white/10 px-2 py-1 text-[var(--text-strong)]">{m}</div>
                 ))}
               </div>
-            </MiniCard>
-            <MiniCard>
-              <div className="text-[11px] text-[var(--text-faint)] text-center py-2">
-                按改写文案生成视频片段
-              </div>
-            </MiniCard>
-          </div>
-        </div>
+            )}
 
-        {/* 10. Compose */}
-        <div className="shrink-0 h-full overflow-y-auto" style={{ width: COL_W }}>
-          <ColumnHeader type="output" title="合成 · Compose" label="STEP 10 · ffmpeg + TTS" state={colState.compose} />
-          <div className="space-y-2.5">
-            <MiniCard className="aspect-video flex items-center justify-center">
-              <span className="text-[11px] text-[var(--text-faint)]">成品视频 · 待合成</span>
-            </MiniCard>
-            <MiniCard>
-              <div className="text-[10.5px] text-[var(--text-soft)]">
-                视频片段 + 字幕 / TTS<br />
-                <span className="text-[10px] text-[var(--text-faint)]">本地 ffmpeg · 零 API</span>
+            {/* ---- Compose ---- */}
+            {key === "compose" && (
+              <div className="grid grid-cols-2 gap-3 max-w-2xl">
+                <MiniCard className="aspect-video flex items-center justify-center">
+                  <span className="text-[11.5px] text-[var(--text-faint)]">成品视频 · 待合成</span>
+                </MiniCard>
+                <MiniCard>
+                  <div className="text-[11px] text-[var(--text-soft)]">
+                    视频片段 + 字幕 / TTS
+                  </div>
+                  <div className="text-[10px] text-[var(--text-faint)] mt-1">本地 ffmpeg · 零 API</div>
+                </MiniCard>
               </div>
-            </MiniCard>
+            )}
+
           </div>
         </div>
-      </div>
+      )}
     </div>
   )
 }