auto-save 2026-05-13 13:42 (+1, ~4)

web/app/page.tsx

@@ -14,6 +14,7 @@ import {
 } from "@/components/nodes"
 import { ThemeToggle } from "@/components/theme-toggle"
 import { Dashboard, type DashboardHandle } from "@/components/dashboard"
+import { StoryboardBar } from "@/components/storyboard-bar"
 import { addManualFrame, analyzeJob, createJob, getJob, uploadJob, deleteFrame, deleteGeneratedImage, type Job } from "@/lib/api"
 import { VideoLightbox } from "@/components/video-lightbox"
 
@@ -317,8 +318,14 @@ export default function Home() {
           <Dashboard ref={dashboardRef} data={nodeData} />
         </aside>
 
-        {/* 右区：紧凑 DAG 节点流图（撑满剩余宽度） */}
-        <section className="relative flex-1 min-h-0">
+        {/* 右区：顶部 storyboard bar + DAG 节点流图 */}
+        <section className="relative flex-1 min-h-0 flex flex-col">
+          <StoryboardBar
+            job={job}
+            selectedFrames={selectedFrames}
+            onExpandFrame={setExpandedFrame}
+          />
+          <div className="relative flex-1 min-h-0">
           <ReactFlow
             nodes={nodes}
             edges={edges}
@@ -336,6 +343,7 @@ export default function Home() {
             <Controls position="bottom-left" />
             <MiniMap position="bottom-right" pannable zoomable nodeStrokeWidth={2} />
           </ReactFlow>
+          </div>
         </section>
 
         <Toaster theme="system" position="bottom-center" />