@shepai/cli 1.53.1 → 1.54.0

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.js

@@ -9,6 +9,8 @@ import { deleteFeature } from '../../../app/actions/delete-feature.js';
 import { addRepository } from '../../../app/actions/add-repository.js';
 import { deleteRepository } from '../../../app/actions/delete-repository.js';
 import { useAgentEventsContext } from '../../../hooks/agent-events-provider.js';
+import { useSound } from '../../../hooks/use-sound.js';
+import { mapEventTypeToState, mapPhaseNameToLifecycle, } from '../../common/feature-node/derive-feature-state.js';
 let nextFeatureId = 0;
 export function useControlCenterState(initialNodes, initialEdges) {
     const router = useRouter();
@@ -28,6 +30,9 @@ export function useControlCenterState(initialNodes, initialEdges) {
     const [selectedNode, setSelectedNode] = useState(null);
     const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
     const [isDeleting, setIsDeleting] = useState(false);
+    const deleteSound = useSound('transition_down', { volume: 0.5 });
+    const createSound = useSound('transition_up', { volume: 0.5 });
+    const clickSound = useSound('tap_01', { volume: 0.3 });
     const [pendingRepoNodeId, setPendingRepoNodeId] = useState(null);
     // Sync server props into local state when router.refresh() delivers new data
     const initialNodeKey = initialNodes
@@ -38,6 +43,17 @@ export function useControlCenterState(initialNodes, initialEdges) {
         .map((e) => e.id)
         .sort()
         .join(',');
+    // Track previous feature states so we can detect transitions on server refresh
+    const prevFeatureStatesRef = useRef(new Map());
+    // Stable key that changes when feature DATA changes (state/lifecycle), not just IDs.
+    const initialDataKey = initialNodes
+        .filter((n) => n.type === 'featureNode')
+        .map((n) => {
+        const d = n.data;
+        return `${n.id}:${d.state}:${d.lifecycle}`;
+    })
+        .sort()
+        .join(',');
     // Sync server props into local state — keyed by derived strings (initialNodeKey/initialEdgeKey)
     // to avoid infinite re-renders from unstable array references.
     useEffect(() => {
@@ -69,33 +85,128 @@ export function useControlCenterState(initialNodes, initialEdges) {
     useEffect(() => {
         setEdges(initialEdges);
     }, [initialEdgeKey, initialEdges, setEdges]);
-    // Refresh server data when SSE agent events arrive (status changes)
-    const { lastEvent } = useAgentEventsContext();
-    const processedEventRef = useRef(null);
+    // Fallback notifications from server-refresh state transitions.
+    // Fires only when SSE didn't already deliver the matching event for a feature,
+    // e.g. when the SSE connection was down or the event was seeded into the cache.
+    const { events } = useAgentEventsContext();
+    useEffect(() => {
+        const prevStates = prevFeatureStatesRef.current;
+        for (const node of initialNodes) {
+            if (node.type !== 'featureNode')
+                continue;
+            const data = node.data;
+            const prev = prevStates.get(node.id);
+            if (prev !== undefined && prev !== data.state) {
+                // Check if SSE already delivered a matching event for this feature
+                const sseAlreadyCovered = events.some((e) => e.featureId === data.featureId && mapEventTypeToState(e.eventType) === data.state);
+                if (!sseAlreadyCovered) {
+                    if (data.state === 'done') {
+                        toast.success(data.name, { description: 'Feature completed!' });
+                    }
+                    else if (data.state === 'action-required') {
+                        toast.warning(data.name, {
+                            description: 'Waiting for your approval',
+                            action: {
+                                label: 'Review',
+                                onClick: () => {
+                                    window.dispatchEvent(new CustomEvent('shep:select-feature', {
+                                        detail: { featureId: data.featureId },
+                                    }));
+                                },
+                            },
+                        });
+                    }
+                    else if (data.state === 'error') {
+                        toast.error(data.name, { description: data.errorMessage ?? 'Agent failed' });
+                    }
+                }
+            }
+            prevStates.set(node.id, data.state);
+        }
+    }, [initialDataKey, initialNodes, events]);
+    // Targeted optimistic updates from SSE agent events + debounced reconciliation.
+    // Uses `events` array (not `lastEvent`) so that React batching cannot silently
+    // drop events when multiple SSE messages arrive in the same tick.
+    const processedEventCountRef = useRef(0);
+    const reconcileTimerRef = useRef(undefined);
     useEffect(() => {
-        if (!lastEvent)
+        return () => clearTimeout(reconcileTimerRef.current);
+    }, []);
+    useEffect(() => {
+        if (events.length <= processedEventCountRef.current)
             return;
-        const key = `${lastEvent.agentRunId}-${lastEvent.eventType}-${lastEvent.timestamp}`;
-        if (processedEventRef.current === key)
+        const newEvents = events.slice(processedEventCountRef.current);
+        processedEventCountRef.current = events.length;
+        for (const event of newEvents) {
+            const newState = mapEventTypeToState(event.eventType);
+            const newLifecycle = mapPhaseNameToLifecycle(event.phaseName);
+            // Targeted node update — only clone the matched node
+            setNodes((prev) => prev.map((node) => {
+                if (node.type !== 'featureNode')
+                    return node;
+                const data = node.data;
+                if (data.featureId !== event.featureId)
+                    return node;
+                return {
+                    ...node,
+                    data: {
+                        ...data,
+                        state: newState,
+                        ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
+                    },
+                };
+            }));
+            // Update drawer if it's showing the matched feature
+            setSelectedNode((prev) => {
+                if (prev?.featureId !== event.featureId)
+                    return prev;
+                return {
+                    ...prev,
+                    state: newState,
+                    ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
+                };
+            });
+        }
+        // Debounced background reconciliation (3s after last SSE event)
+        clearTimeout(reconcileTimerRef.current);
+        reconcileTimerRef.current = setTimeout(() => router.refresh(), 3000);
+    }, [events, router]);
+    // Periodic polling fallback: refresh server data every 5s when any feature
+    // is in an active state (running/action-required). This ensures the UI stays
+    // current even if the SSE connection drops — belt-and-suspenders alongside SSE.
+    useEffect(() => {
+        const hasActiveFeature = nodes.some((n) => {
+            if (n.type !== 'featureNode')
+                return false;
+            const data = n.data;
+            return (data.state === 'running' || data.state === 'action-required' || data.state === 'creating');
+        });
+        if (!hasActiveFeature)
             return;
-        processedEventRef.current = key;
-        router.refresh();
-    }, [lastEvent, router]);
+        const interval = setInterval(() => router.refresh(), 5_000);
+        return () => clearInterval(interval);
+    }, [nodes, router]);
     const onNodesChange = useCallback((changes) => {
         setNodes((ns) => applyNodeChanges(changes, ns));
     }, []);
+    const closeSound = useSound('transition_down', { volume: 0.01 });
     const clearSelection = useCallback(() => {
-        setSelectedNode(null);
-    }, []);
+        setSelectedNode((prev) => {
+            if (prev)
+                closeSound.play();
+            return null;
+        });
+    }, [closeSound]);
     const handleNodeClick = useCallback((_event, node) => {
         if (node.type === 'featureNode') {
             const data = node.data;
             if (data.state === 'creating')
                 return;
+            clickSound.play();
             setIsCreateDrawerOpen(false);
             setSelectedNode(data);
         }
-    }, []);
+    }, [clickSound]);
     // Keyboard shortcut: Escape to deselect
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -242,9 +353,10 @@ export function useControlCenterState(initialNodes, initialEdges) {
         return id;
     }, [setEdges]);
     const handleAddFeature = useCallback(() => {
+        clickSound.play();
         setSelectedNode(null);
         setIsCreateDrawerOpen(true);
-    }, []);
+    }, [clickSound]);
     const [pendingParentFeatureId, setPendingParentFeatureId] = useState();
     const handleCreateFeatureSubmit = useCallback((data) => {
         // 1. Insert optimistic node instantly
@@ -272,6 +384,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
                 toast.error(result.error);
                 return;
             }
+            createSound.play();
             router.refresh();
         })
             .catch(() => {
@@ -280,11 +393,12 @@ export function useControlCenterState(initialNodes, initialEdges) {
             setEdges((prev) => prev.filter((e) => e.target !== tempId));
             toast.error('Failed to create feature');
         });
-    }, [router, createFeatureNode, pendingRepoNodeId, pendingParentFeatureId, setEdges]);
+    }, [router, createFeatureNode, pendingRepoNodeId, createSound, pendingParentFeatureId, setEdges]);
     const closeCreateDrawer = useCallback(() => {
+        closeSound.play();
         setIsCreateDrawerOpen(false);
         setPendingParentFeatureId(undefined);
-    }, []);
+    }, [closeSound]);
     const handleDeleteFeature = useCallback(async (featureId) => {
         setIsDeleting(true);
         try {
@@ -305,6 +419,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
                 setEdges(result.edges);
                 return result.nodes;
             });
+            deleteSound.play();
             toast.success('Feature deleted successfully');
             router.refresh();
         }
@@ -314,7 +429,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
         finally {
             setIsDeleting(false);
         }
-    }, [router, edges, setEdges]);
+    }, [router, edges, deleteSound, setEdges]);
     const handleDeleteRepository = useCallback(async (repositoryId) => {
         const repoNodeId = `repo-${repositoryId}`;
         // Optimistic: remove node and its edges immediately
@@ -327,6 +442,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
                 router.refresh();
                 return;
             }
+            deleteSound.play();
             toast.success('Repository removed');
             router.refresh();
         }
@@ -334,12 +450,13 @@ export function useControlCenterState(initialNodes, initialEdges) {
             toast.error('Failed to remove repository');
             router.refresh();
         }
-    }, [router, setEdges]);
+    }, [router, deleteSound, setEdges]);
     const handleAddFeatureToRepo = useCallback((repoNodeId) => {
+        clickSound.play();
         setSelectedNode(null);
         setPendingRepoNodeId(repoNodeId);
         setIsCreateDrawerOpen(true);
-    }, []);
+    }, [clickSound]);
     const handleAddFeatureToFeature = useCallback((featureNodeId) => {
         // Extract feature ID from node ID (format: "feat-<uuid>")
         const featureId = featureNodeId.startsWith('feat-') ? featureNodeId.slice(5) : featureNodeId;
@@ -428,6 +545,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
                 target: e.target === tempId ? realId : e.target,
                 id: e.id.replace(tempId, realId),
             })));
+            createSound.play();
             router.refresh();
         })
             .catch(() => {
@@ -439,7 +557,20 @@ export function useControlCenterState(initialNodes, initialEdges) {
                 : n));
             toast.error('Failed to add repository');
         });
-    }, [router, setEdges]);
+    }, [router, createSound, setEdges]);
+    // Ref keeps latest nodes so selectFeatureById has a stable identity
+    const nodesRef = useRef(nodes);
+    nodesRef.current = nodes;
+    const selectFeatureById = useCallback((featureId) => {
+        const node = nodesRef.current.find((n) => n.type === 'featureNode' && n.data.featureId === featureId);
+        if (node) {
+            const data = node.data;
+            if (data.state !== 'creating') {
+                setIsCreateDrawerOpen(false);
+                setSelectedNode(data);
+            }
+        }
+    }, []);
     const pendingNode = pendingRepoNodeId ? nodes.find((n) => n.id === pendingRepoNodeId) : null;
     const pendingRepositoryPath = pendingNode?.data?.repositoryPath ?? '';
     return {
@@ -464,5 +595,6 @@ export function useControlCenterState(initialNodes, initialEdges) {
         handleDeleteRepository,
         isDeleting,
         createFeatureNode,
+        selectFeatureById,
     };
 }

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -63,5 +63,5 @@ export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNo
         }
         return (_jsx("div", { "data-testid": "features-canvas-empty", children: _jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) }) }));
     }
-    return (_jsx("div", { "data-testid": "features-canvas", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), onRepositorySelect ? (_jsx(Panel, { position: "top-right", className: "mr-12", children: _jsx(AddRepositoryButton, { onSelect: onRepositorySelect }) })) : null, toolbar] }) }) }));
+    return (_jsx("div", { "data-testid": "features-canvas", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), onRepositorySelect ? (_jsx(Panel, { position: "top-right", className: "mr-16", children: _jsx(AddRepositoryButton, { onSelect: onRepositorySelect }) })) : null, toolbar] }) }) }));
 }

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.d.ts

@@ -14,4 +14,5 @@ export declare const SingleRepositoryMultipleFeatures: Story;
 export declare const MultipleRepositories: Story;
 export declare const MultipleRepositoriesMixedConnections: Story;
 export declare const InteractiveWithRepository: Story;
+export declare const AddRepositoryButtonClearanceCheck: Story;
 //# sourceMappingURL=features-canvas.stories.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AA4DF,eAAO,MAAM,mCAAmC,EAAE,KAOjD,CAAC;AAkCF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAgEF,eAAO,MAAM,gCAAgC,EAAE,KAW9C,CAAC;AAuDF,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAC;AA2GF,eAAO,MAAM,oCAAoC,EAAE,KAOlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC"}
+{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AA4DF,eAAO,MAAM,mCAAmC,EAAE,KAOjD,CAAC;AAkCF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAgEF,eAAO,MAAM,gCAAgC,EAAE,KAW9C,CAAC;AAuDF,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAC;AA2GF,eAAO,MAAM,oCAAoC,EAAE,KAOlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KASvC,CAAC;AAKF,eAAO,MAAM,iCAAiC,EAAE,KAoC/C,CAAC"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.stories.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FeaturesCanvas } from './features-canvas.js';
 import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
 const meta = {
@@ -562,3 +562,33 @@ export const InteractiveWithRepository = {
         onRepositoryAdd: () => undefined,
     },
 };
+// Story to visually verify the Add Repository button does not overlap the ThemeToggle.
+// The simulated ThemeToggle (top-3 right-3, 40×40 px) is rendered as an overlay so
+// reviewers can confirm the mr-16 (64 px) gap keeps the Panel clear of the toggle zone.
+export const AddRepositoryButtonClearanceCheck = {
+    decorators: [
+        (Story) => (_jsxs("div", { style: { height: '100vh', position: 'relative' }, children: [_jsx(Story, {}), _jsx("div", { style: {
+                        position: 'absolute',
+                        top: 12,
+                        right: 12,
+                        width: 40,
+                        height: 40,
+                        background: 'rgba(255, 0, 0, 0.35)',
+                        border: '2px dashed red',
+                        borderRadius: 6,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: 10,
+                        pointerEvents: 'none',
+                        zIndex: 50,
+                    }, children: "Theme" })] })),
+    ],
+    args: {
+        nodes: repoFeatureNodes,
+        edges: repoFeatureEdges,
+        onNodeAction: () => undefined,
+        onNodeSettings: () => undefined,
+        onRepositorySelect: () => undefined,
+    },
+};

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA0BD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAMnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA2BD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAMnD"}

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.js

@@ -4,6 +4,7 @@ import { useCallback } from 'react';
 import { SidebarProvider, SidebarInset } from '../../ui/sidebar.js';
 import { AppSidebar } from '../../layouts/app-sidebar/index.js';
 import { ThemeToggle } from '../../common/theme-toggle/index.js';
+import { SoundToggle } from '../../common/sound-toggle/index.js';
 import { AgentEventsProvider } from '../../../hooks/agent-events-provider.js';
 import { useNotifications } from '../../../hooks/use-notifications.js';
 /** Inner shell that consumes the agent-events context for notifications. */
@@ -13,7 +14,7 @@ function AppShellInner({ children }) {
     const handleNewFeature = useCallback(() => {
         window.dispatchEvent(new CustomEvent('shep:open-create-drawer'));
     }, []);
-    return (_jsxs(SidebarProvider, { children: [_jsx(AppSidebar, { features: [], onNewFeature: handleNewFeature }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsx("div", { className: "absolute top-3 right-3 z-50", children: _jsx(ThemeToggle, {}) }), _jsx("main", { className: "h-full", children: children })] }) })] }));
+    return (_jsxs(SidebarProvider, { children: [_jsx(AppSidebar, { features: [], onNewFeature: handleNewFeature }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsxs("div", { className: "absolute top-3 right-3 z-50 flex gap-1", children: [_jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children })] }) })] }));
 }
 export function AppShell({ children }) {
     return (_jsx(AgentEventsProvider, { children: _jsx(AppShellInner, { children: children }) }));

package/dist/src/presentation/web/dev-server.js

@@ -17,6 +17,7 @@ import path from 'node:path';
 import { initializeContainer, container } from '../../../packages/core/src/infrastructure/di/container.js';
 import { InitializeSettingsUseCase } from '../../../packages/core/src/application/use-cases/settings/initialize-settings.use-case.js';
 import { initializeSettings } from '../../../packages/core/src/infrastructure/services/settings.service.js';
+import { initializeNotificationWatcher, getNotificationWatcher, } from '../../../packages/core/src/infrastructure/services/notifications/notification-watcher.service.js';
 const DEFAULT_PORT = 3000;
 async function isPortAvailable(port) {
     return new Promise((resolve) => {
@@ -53,6 +54,13 @@ async function main() {
         const initSettingsUseCase = container.resolve(InitializeSettingsUseCase);
         const settings = await initSettingsUseCase.execute();
         initializeSettings(settings);
+        // Start notification watcher for real-time SSE events (same as shep ui)
+        const runRepo = container.resolve('IAgentRunRepository');
+        const phaseTimingRepo = container.resolve('IPhaseTimingRepository');
+        const featureRepo = container.resolve('IFeatureRepository');
+        const notificationService = container.resolve('INotificationService');
+        initializeNotificationWatcher(runRepo, phaseTimingRepo, featureRepo, notificationService);
+        getNotificationWatcher().start();
     }
     catch (error) {
         console.warn('[dev-server] DI initialization failed — features will be empty:', error);
@@ -92,6 +100,12 @@ async function main() {
         console.log('\n[dev-server] Shutting down...');
         const forceExit = setTimeout(() => process.exit(0), 2000);
         try {
+            try {
+                getNotificationWatcher().stop();
+            }
+            catch {
+                /* not initialized */
+            }
             server.closeAllConnections();
             await Promise.all([
                 new Promise((resolve) => server.close(() => resolve())),

package/dist/src/presentation/web/hooks/use-agent-events.d.ts

@@ -8,5 +8,12 @@ export interface UseAgentEventsResult {
     lastEvent: NotificationEvent | null;
     connectionStatus: ConnectionStatus;
 }
+/**
+ * Hook that receives real-time agent notification events via a Service Worker.
+ *
+ * The SW maintains a single SSE connection to /api/agent-events and
+ * broadcasts events to all open tabs. Falls back to direct EventSource
+ * when Service Workers are unavailable.
+ */
 export declare function useAgentEvents(options?: UseAgentEventsOptions): UseAgentEventsResult;
 //# sourceMappingURL=use-agent-events.d.ts.map

package/dist/src/presentation/web/hooks/use-agent-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-agent-events.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-agent-events.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAOD,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,qBAAqB,GAAG,oBAAoB,CAsFpF"}
+{"version":3,"file":"use-agent-events.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-agent-events.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;AAE3E,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAID;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,qBAAqB,GAAG,oBAAoB,CA2GpF"}

package/dist/src/presentation/web/hooks/use-agent-events.js

@@ -1,53 +1,143 @@
 'use client';
 import { useCallback, useEffect, useRef, useState } from 'react';
-const BASE_BACKOFF_MS = 1000;
-const MAX_BACKOFF_MS = 30_000;
-/** Only reset backoff after connection is stable for this long */
-const STABLE_CONNECTION_MS = 5_000;
+const SW_PATH = '/agent-events-sw.js';
+/**
+ * Hook that receives real-time agent notification events via a Service Worker.
+ *
+ * The SW maintains a single SSE connection to /api/agent-events and
+ * broadcasts events to all open tabs. Falls back to direct EventSource
+ * when Service Workers are unavailable.
+ */
 export function useAgentEvents(options) {
     const [events, setEvents] = useState([]);
     const [lastEvent, setLastEvent] = useState(null);
     const [connectionStatus, setConnectionStatus] = useState('disconnected');
-    const backoffRef = useRef(BASE_BACKOFF_MS);
-    const reconnectTimerRef = useRef(null);
-    const stableTimerRef = useRef(null);
-    const esRef = useRef(null);
     const runId = options?.runId;
-    const connect = useCallback(() => {
-        if (typeof window === 'undefined' || typeof EventSource === 'undefined') {
+    const swRef = useRef(null);
+    const onMessage = useCallback((event) => {
+        const msg = event.data;
+        if (!msg || typeof msg !== 'object')
             return;
+        if (msg.type === 'notification') {
+            const parsed = msg.data;
+            setEvents((prev) => [...prev, parsed]);
+            setLastEvent(parsed);
         }
-        // Prevent duplicate connections
-        if (esRef.current) {
+        else if (msg.type === 'status') {
+            setConnectionStatus(msg.status);
+        }
+    }, []);
+    useEffect(() => {
+        if (typeof window === 'undefined')
             return;
+        // ?sse=direct bypasses the Service Worker for debugging
+        const bypassSW = typeof location !== 'undefined' && new URLSearchParams(location.search).has('sse');
+        // Fallback: direct EventSource when SW not supported or bypassed
+        if (!navigator.serviceWorker || bypassSW) {
+            return connectDirectEventSource(runId, setEvents, setLastEvent, setConnectionStatus);
         }
+        let cancelled = false;
+        const fallbackCleanupRef = { current: undefined };
+        function subscribeToWorker(worker) {
+            if (cancelled)
+                return;
+            swRef.current = worker;
+            worker.postMessage({ type: 'subscribe', runId });
+            setConnectionStatus('connecting');
+        }
+        // Listen for messages from whatever SW controls this page
+        navigator.serviceWorker.addEventListener('message', onMessage);
+        // Re-subscribe when SW controller changes (e.g., after SW update via skipWaiting)
+        function handleControllerChange() {
+            if (cancelled)
+                return;
+            const newController = navigator.serviceWorker.controller;
+            if (newController) {
+                swRef.current = newController;
+                newController.postMessage({ type: 'subscribe', runId });
+                setConnectionStatus('connecting');
+            }
+        }
+        navigator.serviceWorker.addEventListener('controllerchange', handleControllerChange);
+        navigator.serviceWorker
+            .register(SW_PATH, { scope: '/' })
+            .then((registration) => {
+            if (cancelled)
+                return;
+            // Use the active worker, or wait for it to activate
+            const sw = registration.active ?? registration.installing ?? registration.waiting;
+            if (!sw) {
+                // No worker at all — fall back to direct EventSource
+                fallbackCleanupRef.current = connectDirectEventSource(runId, setEvents, setLastEvent, setConnectionStatus);
+                return;
+            }
+            if (sw.state === 'activated') {
+                subscribeToWorker(sw);
+            }
+            else {
+                sw.addEventListener('statechange', () => {
+                    if (sw.state === 'activated')
+                        subscribeToWorker(sw);
+                });
+            }
+        })
+            .catch(() => {
+            // SW registration failed — fall back to direct EventSource
+            if (!cancelled) {
+                fallbackCleanupRef.current = connectDirectEventSource(runId, setEvents, setLastEvent, setConnectionStatus);
+            }
+        });
+        return () => {
+            cancelled = true;
+            navigator.serviceWorker.removeEventListener('message', onMessage);
+            navigator.serviceWorker.removeEventListener('controllerchange', handleControllerChange);
+            swRef.current?.postMessage({ type: 'unsubscribe' });
+            swRef.current = null;
+            fallbackCleanupRef.current?.();
+        };
+    }, [runId, onMessage]);
+    return { events, lastEvent, connectionStatus };
+}
+// --- EventSource fallback (identical to the previous implementation) ---
+const BASE_BACKOFF_MS = 1000;
+const MAX_BACKOFF_MS = 30_000;
+const STABLE_CONNECTION_MS = 5_000;
+function connectDirectEventSource(runId, setEvents, setLastEvent, setConnectionStatus) {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    if (typeof EventSource === 'undefined')
+        return () => { };
+    let es = null;
+    let stopped = false;
+    let backoff = BASE_BACKOFF_MS;
+    let reconnectTimer = null;
+    let stableTimer = null;
+    function connect() {
+        if (stopped)
+            return;
         const url = runId
             ? `/api/agent-events?runId=${encodeURIComponent(runId)}`
             : '/api/agent-events';
-        const es = new EventSource(url);
-        esRef.current = es;
+        es = new EventSource(url);
         setConnectionStatus('connecting');
         es.onopen = () => {
             setConnectionStatus('connected');
-            // Only reset backoff after connection stays open for a while
-            stableTimerRef.current = setTimeout(() => {
-                stableTimerRef.current = null;
-                backoffRef.current = BASE_BACKOFF_MS;
+            stableTimer = setTimeout(() => {
+                stableTimer = null;
+                backoff = BASE_BACKOFF_MS;
             }, STABLE_CONNECTION_MS);
         };
         es.onerror = () => {
-            es.close();
-            esRef.current = null;
+            es?.close();
+            es = null;
             setConnectionStatus('disconnected');
-            // Cancel stable timer — connection wasn't stable
-            if (stableTimerRef.current !== null) {
-                clearTimeout(stableTimerRef.current);
-                stableTimerRef.current = null;
+            if (stableTimer !== null) {
+                clearTimeout(stableTimer);
+                stableTimer = null;
             }
-            const delay = backoffRef.current;
-            backoffRef.current = Math.min(delay * 2, MAX_BACKOFF_MS);
-            reconnectTimerRef.current = setTimeout(() => {
-                reconnectTimerRef.current = null;
+            const delay = backoff;
+            backoff = Math.min(delay * 2, MAX_BACKOFF_MS);
+            reconnectTimer = setTimeout(() => {
+                reconnectTimer = null;
                 connect();
             }, delay);
         };
@@ -56,23 +146,21 @@ export function useAgentEvents(options) {
             setEvents((prev) => [...prev, parsed]);
             setLastEvent(parsed);
         }));
-    }, [runId]);
-    useEffect(() => {
-        connect();
-        return () => {
-            if (reconnectTimerRef.current !== null) {
-                clearTimeout(reconnectTimerRef.current);
-                reconnectTimerRef.current = null;
-            }
-            if (stableTimerRef.current !== null) {
-                clearTimeout(stableTimerRef.current);
-                stableTimerRef.current = null;
-            }
-            if (esRef.current) {
-                esRef.current.close();
-                esRef.current = null;
-            }
-        };
-    }, [connect]);
-    return { events, lastEvent, connectionStatus };
+    }
+    connect();
+    return () => {
+        stopped = true;
+        if (reconnectTimer !== null) {
+            clearTimeout(reconnectTimer);
+            reconnectTimer = null;
+        }
+        if (stableTimer !== null) {
+            clearTimeout(stableTimer);
+            stableTimer = null;
+        }
+        if (es) {
+            es.close();
+            es = null;
+        }
+    };
 }

package/dist/src/presentation/web/hooks/use-notifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-notifications.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-notifications.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD;AAqBD,wBAAgB,gBAAgB,IAAI,sBAAsB,CAmCzD"}
+{"version":3,"file":"use-notifications.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-notifications.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,sBAAsB,EAAE,sBAAsB,CAAC;CAChD;AA4CD,wBAAgB,gBAAgB,IAAI,sBAAsB,CAgEzD"}