Directive page improvements

1 files changed, 20 insertions, 3 deletions

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;