Directive page improvements

1 files changed, 11 insertions, 1 deletions

diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx
index f9e7eed..b73463d 100644
--- a/makima/frontend/src/components/directives/DirectiveDetail.tsx
+++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx
@@ -54,6 +54,16 @@ export function DirectiveDetail({
   const hasTerminalTasks = directive.steps.some((s) => s.taskId && terminalStatuses.has(s.status));
 
   // Build task map from directive steps and orchestrator
+  // Derive a stable key from the actual task IDs to avoid recreating the map on every poll
+  const taskMapKey = useMemo(() => {
+    const parts: string[] = [];
+    if (directive.orchestratorTaskId) parts.push(`o:${directive.orchestratorTaskId}`);
+    for (const step of directive.steps) {
+      if (step.taskId) parts.push(`${step.id}:${step.taskId}`);
+    }
+    return parts.join(",");
+  }, [directive.orchestratorTaskId, directive.steps]);
+
   const taskMap = useMemo(() => {
     const map = new Map<string, string>();
     if (directive.orchestratorTaskId) {
@@ -65,7 +75,7 @@ export function DirectiveDetail({
       }
     }
     return map;
-  }, [directive.orchestratorTaskId, directive.steps]);
+  }, [taskMapKey]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Subscribe to all task outputs
   const { connected, entries, clearEntries } = useMultiTaskSubscription({