From ad5af0f7677c73fc159a3036b9479d1d847adf97 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Fri, 13 Feb 2026 20:35:22 +0000
Subject: Directive page improvements

---
 makima/frontend/src/hooks/useDirectives.ts         | 23 +++++++++++++++++++---
 .../frontend/src/hooks/useMultiTaskSubscription.ts |  5 +++--
 2 files changed, 23 insertions(+), 5 deletions(-)

(limited to 'makima/frontend/src/hooks')

diff --git a/makima/frontend/src/hooks/useDirectives.ts b/makima/frontend/src/hooks/useDirectives.ts
index e67733c..0453d14 100644
--- a/makima/frontend/src/hooks/useDirectives.ts
+++ b/makima/frontend/src/hooks/useDirectives.ts
@@ -63,6 +63,19 @@ export function useDirective(id: string | undefined) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // Silently refresh without setting loading state (for polls)
+  const silentRefresh = useCallback(async () => {
+    if (!id) return;
+    try {
+      const d = await getDirective(id);
+      setDirective(d);
+      setError(null);
+    } catch (e) {
+      // Don't overwrite existing data on poll failure
+    }
+  }, [id]);
+
+  // Full refresh with loading state (for initial load / explicit refresh)
   const refresh = useCallback(async () => {
     if (!id) return;
     try {
@@ -77,9 +90,13 @@ export function useDirective(id: string | undefined) {
     }
   }, [id]);
 
+  // Reset state and fetch when ID changes
   useEffect(() => {
+    setDirective(null);
+    setError(null);
+    setLoading(true);
     refresh();
-  }, [refresh]);
+  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Auto-poll while directive is active, has an orchestrator task, or has a completion task
   useEffect(() => {
@@ -90,9 +107,9 @@ export function useDirective(id: string | undefined) {
       directive.completionTaskId != null;
     if (!needsPolling) return;
 
-    const interval = setInterval(refresh, 5000);
+    const interval = setInterval(silentRefresh, 5000);
     return () => clearInterval(interval);
-  }, [directive?.status, directive?.orchestratorTaskId, directive?.completionTaskId, refresh]);
+  }, [directive?.status, directive?.orchestratorTaskId, directive?.completionTaskId, silentRefresh]);
 
   const update = useCallback(async (req: UpdateDirectiveRequest) => {
     if (!id) return;
diff --git a/makima/frontend/src/hooks/useMultiTaskSubscription.ts b/makima/frontend/src/hooks/useMultiTaskSubscription.ts
index 19d6dea..4303f1b 100644
--- a/makima/frontend/src/hooks/useMultiTaskSubscription.ts
+++ b/makima/frontend/src/hooks/useMultiTaskSubscription.ts
@@ -38,8 +38,9 @@ export function useMultiTaskSubscription(options: UseMultiTaskSubscriptionOption
     enabledRef.current = enabled;
   }, [enabled]);
 
-  // Derive task IDs from the map
-  const taskIds = useMemo(() => Array.from(taskMap.keys()), [taskMap]);
+  // Derive task IDs from the map, stabilized to avoid unnecessary effect triggers
+  const taskIdsKey = useMemo(() => Array.from(taskMap.keys()).sort().join(","), [taskMap]);
+  const taskIds = useMemo(() => Array.from(taskMap.keys()), [taskIdsKey]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const subscribeToTask = useCallback((ws: WebSocket, taskId: string) => {
     if (ws.readyState === WebSocket.OPEN) {
-- 
cgit v1.2.3