fix(dashboard): dedupe agents to stop duplicate-key warning storm

A duplicate agent id slipping through useAgents (race between initial fetch
and an SSE refresh, or backend pagination edge case) was flooding React with
"Encountered two children with the same key" warnings. With the active panel
re-rendering on every transcript event the warning fired every few ms and
snowballed the console buffer until the page crashed with OOM.

Dedupe by id at the hook (so every consumer benefits) and again in
ActiveAgentsPanel as belt-and-braces.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/dashboard/app/components/ActiveAgentsPanel.tsx

@@ -80,16 +80,22 @@ interface ActiveAgentsPanelProps {
 }
 
 export function ActiveAgentsPanel({ agents, projectId, onAgentSelect }: ActiveAgentsPanelProps) {
-  if (agents.length === 0) return null;
+  // Dedupe by id defensively. The store should return unique agents but a race
+  // between the initial fetch and an SSE refresh can briefly surface the same
+  // agent twice — without this guard React floods the console with duplicate
+  // key warnings (which previously snowballed into OOM).
+  const uniqueAgents = Array.from(new Map(agents.map((a) => [a.id, a])).values());
+
+  if (uniqueAgents.length === 0) return null;
 
   return (
     <div className="active-agents-panel">
       <div className="active-agents-panel-header">
         <Activity size={16} />
-        <span>Active Agents ({agents.length})</span>
+        <span>Active Agents ({uniqueAgents.length})</span>
       </div>
       <div className="active-agents-grid">
-        {agents.map(agent => (
+        {uniqueAgents.map(agent => (
           <LiveAgentCard key={agent.id} agent={agent} projectId={projectId} onSelect={onAgentSelect} />
         ))}
       </div>

packages/dashboard/app/hooks/useAgents.ts

@@ -34,7 +34,12 @@ export function useAgents(projectId?: string, options?: UseAgentsOptions) {
         },
         projectId,
       );
-      setAgents(data);
+      // Defensive dedupe: a race between the initial fetch and an SSE refresh
+      // (or a backend that returned the same agent twice) would otherwise put
+      // duplicate ids into every list rendered from this hook, flooding React
+      // with duplicate-key warnings until the dashboard runs out of heap.
+      const unique = Array.from(new Map(data.map((a) => [a.id, a])).values());
+      setAgents(unique);
     } catch (err) {
       console.error("Failed to load agents:", err);
     } finally {