From b9d543a46565d7a6648fc9b9484bc078e6aeec5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=9F=E6=9C=88?= <xingyue@shazhou.work>
Date: Thu, 14 May 2026 16:53:47 +0800
Subject: [PATCH] fix: move hooks before early returns to fix Rules of Hooks
 crash

---
 .../src/components/workflow-list.tsx          | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/workflow-dashboard/src/components/workflow-list.tsx b/packages/workflow-dashboard/src/components/workflow-list.tsx
index 651182e..d6325fd 100644
--- a/packages/workflow-dashboard/src/components/workflow-list.tsx
+++ b/packages/workflow-dashboard/src/components/workflow-list.tsx
@@ -109,6 +109,21 @@ function ExpandedWorkflowBody({
   const [highlightedRole, setHighlightedRole] = useState<string | null>(null);
   const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const detail = cacheEntry?.status === "ok" ? cacheEntry.detail : null;
+  const descriptor = detail?.descriptor ?? null;
+  const roleEntries = descriptor !== null ? Object.entries(descriptor.roles) : [];
+
+  // All roles are "completed" (static view, all nodes lit) — must be before early returns
+  const allLitStates = useMemo(() => {
+    const m = new Map<string, NodeState>();
+    m.set("__start__", "completed");
+    m.set("__end__", "completed");
+    for (const [name] of roleEntries) {
+      m.set(name, "completed");
+    }
+    return m;
+  }, [roleEntries]);
+
   if (cacheEntry === undefined || cacheEntry.status === "loading") {
     return (
       <p className="text-sm py-2" style={{ color: "var(--color-text-muted)" }}>
@@ -125,14 +140,10 @@ function ExpandedWorkflowBody({
     );
   }
 
-  const { detail } = cacheEntry;
-  const descriptor = detail.descriptor;
   const edgeCount = descriptor !== null ? descriptor.graph.edges.length : 0;
-  const vc = versionCount(detail);
+  const vc = detail !== null ? versionCount(detail) : 0;
 
   const hasGraph = descriptor !== null && edgeCount > 0;
-  const roleEntries =
-    descriptor !== null ? Object.entries(descriptor.roles) : [];
 
   function handleGraphNodeClick(nodeId: string) {
     const el = document.getElementById(`role-${nodeId}`);
@@ -146,17 +157,6 @@ function ExpandedWorkflowBody({
     }, 1500);
   }
 
-  // All roles are "completed" (static view, all nodes lit)
-  const allLitStates = useMemo(() => {
-    const m = new Map<string, NodeState>();
-    m.set("__start__", "completed");
-    m.set("__end__", "completed");
-    for (const [name] of roleEntries) {
-      m.set(name, "completed");
-    }
-    return m;
-  }, [roleEntries]);
-
   return (
     <div className="pt-3 border-t flex gap-4" style={{ borderColor: "var(--color-border)" }}>
       {/* Left: graph sidebar */}