auto-save 2026-05-14 11:04 (~6)

web/app/page.tsx

@@ -96,6 +96,7 @@ const EDGES_RAW: Array<[string, string]> = [
 
 export default function Home() {
   const { resolvedTheme } = useTheme()
+  const [clientReady, setClientReady] = useState(false)
   const [jobs, setJobs] = useState<Job[]>([])
   const [activeJobId, setActiveJobId] = useState<string | null>(null)
   const job = useMemo(() => jobs.find((j) => j.id === activeJobId) ?? null, [jobs, activeJobId])
@@ -122,6 +123,10 @@ export default function Home() {
   const flowRef = useRef<any>(null)
   const lastVideoPanelFocusKey = useRef("")
 
+  useEffect(() => {
+    setClientReady(true)
+  }, [])
+
   const setSelectedFramesForJob = useCallback((jobId: string, updater: Set<number> | ((prev: Set<number>) => Set<number>)) => {
     setSelectedFramesByJob((prev) => {
       const current = new Set(prev[jobId] ?? [])
@@ -985,26 +990,30 @@ export default function Home() {
         {/* 右区：DAG 节点流图（原顶部 storyboard dock 已删除） */}
         <section className="relative flex-1 min-h-0 flex flex-col">
           <div className="relative flex-1 min-h-0">
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            onInit={(instance) => { flowRef.current = instance }}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            nodeTypes={NODE_TYPES}
-            colorMode={resolvedTheme === "light" ? "light" : "dark"}
-            fitView
-            fitViewOptions={{ padding: 0.12 }}
-            minZoom={0.2}
-            maxZoom={1.5}
-            proOptions={{ hideAttribution: true }}
-          >
-            <Background variant={BackgroundVariant.Dots} gap={28} size={1.4} />
-            <Controls position="bottom-left" />
-            <MiniMap position="bottom-right" pannable zoomable nodeStrokeWidth={2} />
-          </ReactFlow>
+          {clientReady ? (
+            <ReactFlow
+              nodes={nodes}
+              edges={edges}
+              onInit={(instance) => { flowRef.current = instance }}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              nodeTypes={NODE_TYPES}
+              colorMode={resolvedTheme === "light" ? "light" : "dark"}
+              fitView
+              fitViewOptions={{ padding: 0.12 }}
+              minZoom={0.2}
+              maxZoom={1.5}
+              proOptions={{ hideAttribution: true }}
+            >
+              <Background variant={BackgroundVariant.Dots} gap={28} size={1.4} />
+              <Controls position="bottom-left" />
+              <MiniMap position="bottom-right" pannable zoomable nodeStrokeWidth={2} />
+            </ReactFlow>
+          ) : (
+            <div className="h-full w-full" suppressHydrationWarning />
+          )}
           </div>
-          <AudioStrip job={job} />
+          {clientReady && <AudioStrip job={job} />}
         </section>
 
         <Toaster theme="system" position="top-center" />