@shepai/cli 1.72.9-pr220.f17b60a → 1.73.0-pr222.ef53005

package/web/.next/standalone/src/presentation/web/app/layout.tsx

@@ -53,7 +53,7 @@ export default function RootLayout({
       </head>
       <body className="min-h-screen antialiased">
         <AppShell>{children}</AppShell>
-        <Toaster />
+        <Toaster position="bottom-center" />
       </body>
     </html>
   );

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx

@@ -56,6 +56,7 @@ import type { MergeReviewData } from '@/components/common/merge-review';
 import { resolveSseEventUpdates } from '@/components/common/feature-node/derive-feature-state';
 import { deriveFeatureViewType } from './drawer-view';
 import type { DrawerView } from './drawer-view';
+import { useArtifactFetch } from './use-artifact-fetch';
 
 export interface FeatureDrawerClientProps {
   view: DrawerView;
@@ -87,6 +88,10 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
   const processedCountRef = useRef(0);
 
   useEffect(() => {
+    // Clamp cursor if events were pruned
+    if (processedCountRef.current > events.length) {
+      processedCountRef.current = 0;
+    }
     if (!featureNode || events.length <= processedCountRef.current) return;
 
     const newEvents = events.slice(processedCountRef.current);
@@ -96,9 +101,9 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
       if (update.featureId !== featureNode.featureId) continue;
 
       // Trigger a server refresh to get the latest drawer view,
-      // but skip when the user has unsaved changes or a rejection is in-flight
-      // to avoid the refresh interfering with the reject handler's navigation.
-      if (!isDirtyRef.current && !isRejectingRef.current) router.refresh();
+      // but skip when the drawer is closed, the user has unsaved changes,
+      // or a rejection is in-flight to avoid unnecessary refreshes.
+      if (isOpenRef.current && !isDirtyRef.current && !isRejectingRef.current) router.refresh();
 
       if (update.state !== undefined || update.lifecycle !== undefined) {
         // Optimistically update the node data AND re-derive the view type so the
@@ -129,6 +134,19 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
   // the close animation when the path no longer matches a feature route.
   const pathname = usePathname();
   const isOpen = pathname.startsWith('/feature/');
+  const isOpenRef = useRef(isOpen);
+  const wasOpenRef = useRef(isOpen);
+
+  // When the drawer re-opens, force a server refresh so the view is always fresh.
+  // SSE skips router.refresh() while the drawer is closed, so data can go stale.
+  useEffect(() => {
+    if (isOpen && !wasOpenRef.current) {
+      router.refresh();
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen, router]);
+
+  isOpenRef.current = isOpen;
 
   const onClose = useCallback(() => {
     router.push('/');
@@ -141,21 +159,17 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
   const [prdData, setPrdData] = useState<PrdQuestionnaireData | null>(null);
   const [prdSelections, setPrdSelections] = useState<Record<string, string>>({});
   const [prdDefaultSelections, setPrdDefaultSelections] = useState<Record<string, string>>({});
-  const [isLoadingPrd, setIsLoadingPrd] = useState(false);
 
   // ── Tech state ─────────────────────────────────────────────────────────
   const [techData, setTechData] = useState<TechDecisionsReviewData | null>(null);
-  const [isLoadingTech, setIsLoadingTech] = useState(false);
 
   // ── Product decisions state (for tech review Product tab) ─────────────
   const [techProductData, setTechProductData] = useState<
     ProductDecisionsSummaryData | null | undefined
   >(undefined);
-  const [isLoadingTechProduct, setIsLoadingTechProduct] = useState(false);
 
   // ── Merge state ────────────────────────────────────────────────────────
   const [mergeData, setMergeData] = useState<MergeReviewData | null>(null);
-  const [isLoadingMerge, setIsLoadingMerge] = useState(false);
 
   // ── Delete state ───────────────────────────────────────────────────────
   const [isDeleting, setIsDeleting] = useState(false);
@@ -173,120 +187,71 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
   // ── Data fetching ─────────────────────────────────────────────────────
 
   const prdFeatureId = view.type === 'prd-review' ? view.node.featureId : null;
-  useEffect(() => {
-    setPrdSelections({});
-    setPrdDefaultSelections({});
-    setPrdData(null);
-    if (!prdFeatureId) return;
-
-    let cancelled = false;
-    setIsLoadingPrd(true);
-    getFeatureArtifact(prdFeatureId)
-      .then((result) => {
-        if (cancelled) return;
-        if (result.error) {
-          toast.error(result.error);
-          return;
-        }
-        if (result.questionnaire) {
-          setPrdData(result.questionnaire);
-          const defaults: Record<string, string> = {};
-          for (const q of result.questionnaire.questions) {
-            const recommended = q.options.find((o) => o.recommended);
-            if (recommended) defaults[q.id] = recommended.id;
-          }
-          setPrdSelections(defaults);
-          setPrdDefaultSelections(defaults);
+  const isLoadingPrd = useArtifactFetch(
+    prdFeatureId,
+    getFeatureArtifact,
+    (result) => {
+      if (result.error) {
+        toast.error(result.error);
+        return;
+      }
+      if (result.questionnaire) {
+        setPrdData(result.questionnaire);
+        const defaults: Record<string, string> = {};
+        for (const q of result.questionnaire.questions) {
+          const recommended = q.options.find((o) => o.recommended);
+          if (recommended) defaults[q.id] = recommended.id;
         }
-      })
-      .catch(() => {
-        if (!cancelled) toast.error('Failed to load questionnaire');
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoadingPrd(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [prdFeatureId]);
+        setPrdSelections(defaults);
+        setPrdDefaultSelections(defaults);
+      }
+    },
+    () => {
+      setPrdSelections({});
+      setPrdDefaultSelections({});
+      setPrdData(null);
+    },
+    'Failed to load questionnaire'
+  );
 
   const techFeatureId = view.type === 'tech-review' ? view.node.featureId : null;
-  useEffect(() => {
-    setTechData(null);
-    if (!techFeatureId) return;
-
-    let cancelled = false;
-    setIsLoadingTech(true);
-    getResearchArtifact(techFeatureId)
-      .then((result) => {
-        if (cancelled) return;
-        if (result.error) {
-          toast.error(result.error);
-          return;
-        }
-        if (result.techDecisions) setTechData(result.techDecisions);
-      })
-      .catch(() => {
-        if (!cancelled) toast.error('Failed to load tech decisions');
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoadingTech(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [techFeatureId]);
+  const isLoadingTech = useArtifactFetch(
+    techFeatureId,
+    getResearchArtifact,
+    (result) => {
+      if (result.error) {
+        toast.error(result.error);
+        return;
+      }
+      if (result.techDecisions) setTechData(result.techDecisions);
+    },
+    () => setTechData(null),
+    'Failed to load tech decisions'
+  );
 
-  useEffect(() => {
-    setTechProductData(undefined);
-    if (!techFeatureId) return;
-
-    let cancelled = false;
-    setIsLoadingTechProduct(true);
-    getFeatureArtifact(techFeatureId)
-      .then((result) => {
-        if (cancelled) return;
-        if (result.productDecisions) {
-          setTechProductData(result.productDecisions);
-        }
-      })
-      .catch(() => {
-        // Silent failure — the product tab is supplementary
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoadingTechProduct(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [techFeatureId]);
+  const isLoadingTechProduct = useArtifactFetch(
+    techFeatureId,
+    getFeatureArtifact,
+    (result) => {
+      if (result.productDecisions) setTechProductData(result.productDecisions);
+    },
+    () => setTechProductData(undefined)
+  );
 
   const mergeFeatureId = view.type === 'merge-review' ? view.node.featureId : null;
-  useEffect(() => {
-    setMergeData(null);
-    if (!mergeFeatureId) return;
-
-    let cancelled = false;
-    setIsLoadingMerge(true);
-    getMergeReviewData(mergeFeatureId)
-      .then((result) => {
-        if (cancelled) return;
-        if ('error' in result) {
-          toast.error(result.error);
-          return;
-        }
-        setMergeData(result);
-      })
-      .catch(() => {
-        if (!cancelled) toast.error('Failed to load merge review data');
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoadingMerge(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [mergeFeatureId]);
+  const isLoadingMerge = useArtifactFetch(
+    mergeFeatureId,
+    getMergeReviewData,
+    (result) => {
+      if ('error' in result) {
+        toast.error(result.error);
+        return;
+      }
+      setMergeData(result);
+    },
+    () => setMergeData(null),
+    'Failed to load merge review data'
+  );
 
   // ── Close guard ──────────────────────────────────────────────────────
   const isChatDirty = chatInput.trim().length > 0;

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/use-artifact-fetch.ts

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+
+/**
+ * Generic hook for fetching drawer artifact data when a feature ID changes.
+ * Handles loading state, cancellation on unmount/re-fetch, and error toasting.
+ *
+ * @param featureId - The feature ID to fetch for, or null to reset.
+ * @param fetcher - Async function that fetches the artifact data.
+ * @param onSuccess - Called with the fetch result when successful and not cancelled.
+ * @param onReset - Called immediately when featureId changes (before fetching).
+ * @param errorMessage - Optional toast message shown on fetch failure.
+ * @returns Whether the fetch is currently in progress.
+ */
+export function useArtifactFetch<TResult>(
+  featureId: string | null,
+  fetcher: (id: string) => Promise<TResult>,
+  onSuccess: (result: TResult) => void,
+  onReset: () => void,
+  errorMessage?: string
+): boolean {
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Use refs to avoid stale callbacks in the effect without triggering re-runs.
+  const onSuccessRef = useRef(onSuccess);
+  const onResetRef = useRef(onReset);
+  onSuccessRef.current = onSuccess;
+  onResetRef.current = onReset;
+
+  useEffect(() => {
+    onResetRef.current();
+    if (!featureId) return;
+
+    let cancelled = false;
+    setIsLoading(true);
+
+    fetcher(featureId)
+      .then((result) => {
+        if (!cancelled) onSuccessRef.current(result);
+      })
+      .catch(() => {
+        if (!cancelled && errorMessage) toast.error(errorMessage);
+      })
+      .finally(() => {
+        if (!cancelled) setIsLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [featureId, fetcher, errorMessage]);
+
+  return isLoading;
+}

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer/use-feature-actions.ts

@@ -37,15 +37,14 @@ export function useFeatureActions(input: FeatureActionsInput | null): FeatureAct
   const shellTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const specsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Clear timers on unmount
+  // Clear timers on unmount — read .current inside cleanup so we get the
+  // actual timer value at teardown time, not the always-null value at mount.
   useEffect(() => {
-    const ideTimer = ideTimerRef.current;
-    const shellTimer = shellTimerRef.current;
-    const specsTimer = specsTimerRef.current;
+    const refs = [ideTimerRef, shellTimerRef, specsTimerRef];
     return () => {
-      if (ideTimer) clearTimeout(ideTimer);
-      if (shellTimer) clearTimeout(shellTimer);
-      if (specsTimer) clearTimeout(specsTimer);
+      for (const ref of refs) {
+        if (ref.current) clearTimeout(ref.current);
+      }
     };
   }, []);
 

package/web/.next/standalone/src/presentation/web/components/common/repository-node/use-repository-actions.ts

@@ -37,22 +37,19 @@ export function useRepositoryActions(input: RepositoryActionsInput | null): Repo
 
   // Clear timers on unmount
   useEffect(() => {
-    const ideTimer = ideTimerRef.current;
-    const shellTimer = shellTimerRef.current;
-    const folderTimer = folderTimerRef.current;
+    const ideRef = ideTimerRef;
+    const shellRef = shellTimerRef;
+    const folderRef = folderTimerRef;
     return () => {
-      if (ideTimer) clearTimeout(ideTimer);
-      if (shellTimer) clearTimeout(shellTimer);
-      if (folderTimer) clearTimeout(folderTimer);
+      if (ideRef.current) clearTimeout(ideRef.current);
+      if (shellRef.current) clearTimeout(shellRef.current);
+      if (folderRef.current) clearTimeout(folderRef.current);
     };
   }, []);
 
-  const performToolbarAction = useCallback(
+  const performAction = useCallback(
     async (
-      action: (input: { repositoryPath: string }) => Promise<{
-        success: boolean;
-        error?: string;
-      }>,
+      action: () => Promise<{ success: boolean; error?: string }>,
       setLoading: (v: boolean) => void,
       setError: (v: string | null) => void,
       timerRef: React.RefObject<ReturnType<typeof setTimeout> | null>,
@@ -60,48 +57,13 @@ export function useRepositoryActions(input: RepositoryActionsInput | null): Repo
     ) => {
       if (!input || isLoading) return;
 
-      // Clear any existing timer
       if (timerRef.current) clearTimeout(timerRef.current);
 
       setLoading(true);
       setError(null);
 
       try {
-        const result = await action({ repositoryPath: input.repositoryPath });
-
-        if (!result.success) {
-          const errorMessage = result.error ?? 'An unexpected error occurred';
-          setError(errorMessage);
-          timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
-        }
-      } catch (err: unknown) {
-        const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
-        setError(errorMessage);
-        timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [input]
-  );
-
-  const performFolderAction = useCallback(
-    async (
-      action: (repositoryPath: string) => Promise<{ success: boolean; error?: string }>,
-      setLoading: (v: boolean) => void,
-      setError: (v: string | null) => void,
-      timerRef: React.RefObject<ReturnType<typeof setTimeout> | null>,
-      isLoading: boolean
-    ) => {
-      if (!input || isLoading) return;
-
-      if (timerRef.current) clearTimeout(timerRef.current);
-
-      setLoading(true);
-      setError(null);
-
-      try {
-        const result = await action(input.repositoryPath);
+        const result = await action();
 
         if (!result.success) {
           const errorMessage = result.error ?? 'An unexpected error occurred';
@@ -120,26 +82,39 @@ export function useRepositoryActions(input: RepositoryActionsInput | null): Repo
   );
 
   const handleOpenIde = useCallback(
-    () => performToolbarAction(openIde, setIdeLoading, setIdeError, ideTimerRef, ideLoading),
-    [performToolbarAction, ideLoading]
+    () =>
+      performAction(
+        () => openIde({ repositoryPath: input!.repositoryPath }),
+        setIdeLoading,
+        setIdeError,
+        ideTimerRef,
+        ideLoading
+      ),
+    [performAction, ideLoading, input]
   );
 
   const handleOpenShell = useCallback(
     () =>
-      performToolbarAction(openShell, setShellLoading, setShellError, shellTimerRef, shellLoading),
-    [performToolbarAction, shellLoading]
+      performAction(
+        () => openShell({ repositoryPath: input!.repositoryPath }),
+        setShellLoading,
+        setShellError,
+        shellTimerRef,
+        shellLoading
+      ),
+    [performAction, shellLoading, input]
   );
 
   const handleOpenFolder = useCallback(
     () =>
-      performFolderAction(
-        openFolder,
+      performAction(
+        () => openFolder(input!.repositoryPath),
         setFolderLoading,
         setFolderError,
         folderTimerRef,
         folderLoading
       ),
-    [performFolderAction, folderLoading]
+    [performAction, folderLoading, input]
   );
 
   return {

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -44,20 +44,20 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
   // Publish sidebar features to context whenever feature node data changes
   const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
 
+  const featureNodes = useMemo(() => nodes.filter((n) => n.type === 'featureNode'), [nodes]);
+
   const sidebarKey = useMemo(() => {
-    return nodes
-      .filter((n) => n.type === 'featureNode')
+    return featureNodes
       .map((n) => {
         const d = n.data as FeatureNodeData;
-        return `${d.featureId}:${d.state}:${d.runtime ?? ''}:${d.startedAt ?? ''}`;
+        return `${d.featureId}:${d.state}:${d.name}`;
       })
       .sort()
       .join(',');
-  }, [nodes]);
+  }, [featureNodes]);
 
   useEffect(() => {
-    const sidebarItems = nodes
-      .filter((n) => n.type === 'featureNode')
+    const sidebarItems = featureNodes
       .map((n) => {
         const d = n.data as FeatureNodeData;
         const status = mapNodeStateToSidebarStatus(d.state);
@@ -79,7 +79,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     }[];
 
     setSidebarFeatures(sidebarItems);
-  }, [sidebarKey, nodes, setSidebarFeatures]);
+  }, [sidebarKey, featureNodes, setSidebarFeatures]);
 
   // ── URL-based navigation handlers ────────────────────────────────────
 

package/web/.next/standalone/src/presentation/web/components/features/control-center/use-control-center-state.ts

@@ -16,8 +16,11 @@ import { deleteFeature } from '@/app/actions/delete-feature';
 import { addRepository } from '@/app/actions/add-repository';
 import { deleteRepository } from '@/app/actions/delete-repository';
 import { getFeatureMetadata } from '@/app/actions/get-feature-metadata';
+import { fetchGraphData } from '@/app/actions/get-graph-data';
 import { useAgentEventsContext } from '@/hooks/agent-events-provider';
 import { useSoundAction } from '@/hooks/use-sound-action';
+import { createLogger } from '@/lib/logger';
+
 import {
   mapEventTypeToState,
   resolveSseEventUpdates,
@@ -25,6 +28,9 @@ import {
 import { useGraphState, type GraphCallbacks } from '@/hooks/use-graph-state';
 import type { FeatureEntry } from '@/lib/derive-graph';
 
+const log = createLogger('[Polling]');
+const POLL_INTERVAL_MS = 3_000;
+
 export interface ControlCenterState {
   nodes: CanvasNodeType[];
   edges: Edge[];
@@ -76,6 +82,14 @@ export function useControlCenterState(
     setCallbacks,
   } = useGraphState(initialNodes, initialEdges);
 
+  // Refs for stable access to latest nodes/edges without callback recreation
+  const nodesRef = useRef(nodes);
+  const edgesRef = useRef(edges);
+  useEffect(() => {
+    nodesRef.current = nodes;
+    edgesRef.current = edges;
+  }, [nodes, edges]);
+
   // Sync server props into domain Maps when initialNodes/initialEdges change.
   // Keyed by a stable string so we don't re-reconcile on every render.
   const initialNodeKey = useMemo(
@@ -148,6 +162,10 @@ export function useControlCenterState(
   const processedEventCountRef = useRef(0);
 
   useEffect(() => {
+    // Clamp cursor if events were pruned
+    if (processedEventCountRef.current > events.length) {
+      processedEventCountRef.current = 0;
+    }
     if (events.length <= processedEventCountRef.current) return;
     const newEvents = events.slice(processedEventCountRef.current);
     processedEventCountRef.current = events.length;
@@ -177,6 +195,10 @@ export function useControlCenterState(
   const processedMetadataCountRef = useRef(0);
 
   useEffect(() => {
+    // Clamp cursor if events were pruned
+    if (processedMetadataCountRef.current > events.length) {
+      processedMetadataCountRef.current = 0;
+    }
     if (events.length <= processedMetadataCountRef.current) return;
     const newEvents = events.slice(processedMetadataCountRef.current);
     processedMetadataCountRef.current = events.length;
@@ -199,6 +221,25 @@ export function useControlCenterState(
     }
   }, [events, updateFeature]);
 
+  // --- Polling fallback: catch any SSE events that were missed ---
+  useEffect(() => {
+    log.debug(`polling enabled (${POLL_INTERVAL_MS}ms interval)`);
+
+    const timer = setInterval(async () => {
+      try {
+        const { nodes: freshNodes, edges: freshEdges } = await fetchGraphData();
+        reconcile(freshNodes, freshEdges);
+      } catch {
+        log.warn('poll fetch failed — will retry next interval');
+      }
+    }, POLL_INTERVAL_MS);
+
+    return () => {
+      log.debug('polling disabled');
+      clearInterval(timer);
+    };
+  }, [reconcile]);
+
   // onNodesChange is a no-op: nodes are derived from domain Maps.
   // Since nodesDraggable=false and elementsSelectable=false, only React Flow's
   // internal replace/dimensions changes come through — we ignore them all.
@@ -245,7 +286,7 @@ export function useControlCenterState(
       const nodeId = `feat-${featureId}`;
 
       // Find the current entry for rollback
-      const prevEntry = nodes
+      const prevEntry = nodesRef.current
         .filter((n) => n.id === nodeId)
         .map((n) => ({
           nodeId: n.id,
@@ -270,7 +311,7 @@ export function useControlCenterState(
           toast.error('Failed to delete feature');
         });
     },
-    [nodes, router, deleteSound, removeFeature, restoreFeature]
+    [router, deleteSound, removeFeature, restoreFeature]
   );
 
   const handleDeleteRepository = useCallback(
@@ -279,14 +320,14 @@ export function useControlCenterState(
 
       // Find children of this repo via edges
       const childFeatureIds = new Set(
-        edges.filter((e) => e.source === repoNodeId).map((e) => e.target)
+        edgesRef.current.filter((e) => e.source === repoNodeId).map((e) => e.target)
       );
 
       // Snapshot for rollback
       const prevRepoData = getRepositoryData(repoNodeId);
       const childSnapshots = new Map<string, FeatureEntry>();
       for (const childId of childFeatureIds) {
-        const childNode = nodes.find((n) => n.id === childId);
+        const childNode = nodesRef.current.find((n) => n.id === childId);
         if (childNode) {
           childSnapshots.set(childId, { nodeId: childId, data: childNode.data as FeatureNodeData });
         }
@@ -320,8 +361,6 @@ export function useControlCenterState(
       }
     },
     [
-      edges,
-      nodes,
       deleteSound,
       removeRepository,
       removeFeature,
@@ -335,10 +374,13 @@ export function useControlCenterState(
     (direction: LayoutDirection) => {
       // Layout is applied via reconcile on next server prop update.
       // For immediate re-layout, we apply dagre and trigger a reconcile-like update.
-      const result = layoutWithDagre(nodes, edges, { ...CANVAS_LAYOUT_DEFAULTS, direction });
+      const result = layoutWithDagre(nodesRef.current, edgesRef.current, {
+        ...CANVAS_LAYOUT_DEFAULTS,
+        direction,
+      });
       reconcile(result.nodes, result.edges);
     },
-    [nodes, edges, reconcile]
+    [reconcile]
   );
 
   const handleAddRepository = useCallback(

package/web/.next/standalone/src/presentation/web/hooks/agent-events-provider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, type ReactNode } from 'react';
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
 import {
   useAgentEvents,
   type UseAgentEventsOptions,
@@ -18,7 +18,12 @@ interface AgentEventsProviderProps extends UseAgentEventsOptions {
  * Wrap the app once; use `useAgentEventsContext()` to read.
  */
 export function AgentEventsProvider({ children, runId }: AgentEventsProviderProps) {
-  const value = useAgentEvents({ runId });
+  const { events, lastEvent, connectionStatus } = useAgentEvents({ runId });
+
+  const value = useMemo<UseAgentEventsResult>(
+    () => ({ events, lastEvent, connectionStatus }),
+    [events, lastEvent, connectionStatus]
+  );
 
   return <AgentEventsContext.Provider value={value}>{children}</AgentEventsContext.Provider>;
 }