@shepai/cli 1.53.2 → 1.55.0

package/dist/src/presentation/web/components/common/feature-node/derive-feature-state.js

@@ -4,7 +4,7 @@
  * Derives UI node state and progress from the Feature domain model
  * and its associated AgentRun status (mirrors CLI feat ls logic).
  */
-import { SdlcLifecycle, AgentRunStatus, TaskState } from '../../../../../../packages/core/src/domain/generated/index.js';
+import { SdlcLifecycle, AgentRunStatus, TaskState, NotificationEventType, } from '../../../../../../packages/core/src/domain/generated/index.js';
 /**
  * Derives the visual node state from a Feature and its optional AgentRun.
  *
@@ -73,3 +73,31 @@ export function deriveProgress(feature) {
     const doneCount = tasks.filter((t) => t.state === TaskState.Done).length;
     return Math.round((doneCount / tasks.length) * 100);
 }
+/** Maps a NotificationEventType to the corresponding FeatureNodeState for optimistic UI updates. */
+export function mapEventTypeToState(eventType) {
+    switch (eventType) {
+        case NotificationEventType.AgentStarted:
+        case NotificationEventType.PhaseCompleted:
+            return 'running';
+        case NotificationEventType.WaitingApproval:
+            return 'action-required';
+        case NotificationEventType.AgentCompleted:
+            return 'done';
+        case NotificationEventType.AgentFailed:
+            return 'error';
+    }
+}
+/** Maps an SSE event phaseName to a FeatureLifecyclePhase. Mirrors page.tsx nodeToLifecyclePhase. */
+const phaseNameToLifecycle = {
+    analyze: 'requirements',
+    requirements: 'requirements',
+    research: 'research',
+    plan: 'implementation',
+    implement: 'implementation',
+    merge: 'review',
+};
+export function mapPhaseNameToLifecycle(phaseName) {
+    if (!phaseName)
+        return undefined;
+    return phaseNameToLifecycle[phaseName];
+}

package/dist/src/presentation/web/components/common/repository-node/repository-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"repository-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,2CA0L5F"}
+{"version":3,"file":"repository-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,kBAAkB,CAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,2CA2L5F"}

package/dist/src/presentation/web/components/common/repository-node/repository-node.js

@@ -14,7 +14,7 @@ export function RepositoryNode({ data }) {
     return (_jsxs("div", { className: "group relative", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, data.onDelete && data.id ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute top-1/2 -left-10 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Remove repository", "data-testid": "repository-node-delete-button", onClick: (e) => {
                                                 e.stopPropagation();
                                                 setConfirmOpen(true);
-                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Remove repository" })] }) }) }), _jsx(AlertDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Remove repository?" }), _jsxs(AlertDialogDescription, { children: ["This will remove ", _jsx("strong", { children: data.name }), " from your workspace. The repository files on disk won't be affected."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", onClick: () => data.onDelete?.(data.id), children: "Remove" })] })] }) })] })) : null, _jsxs("div", { role: "button", tabIndex: 0, "data-testid": "repository-node-card", onClick: (e) => {
+                                            }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Remove repository" })] }) }) }), _jsx(AlertDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Remove repository?" }), _jsxs(AlertDialogDescription, { children: ["This will remove ", _jsx("strong", { children: data.name }), " from your workspace. The repository files on disk won't be affected."] })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", onClick: () => data.onDelete?.(data.id), children: "Remove" })] })] }) })] })) : null, _jsxs("div", { role: "button", tabIndex: 0, "data-testid": "repository-node-card", "data-repo-name": data.name, onClick: (e) => {
                     e.stopPropagation();
                     data.onClick?.();
                 }, onKeyDown: (e) => {

package/dist/src/presentation/web/components/common/sound-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { SoundToggle } from './sound-toggle.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/sound-toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sound-toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/src/presentation/web/components/common/sound-toggle/index.js

@@ -0,0 +1 @@
+export { SoundToggle } from './sound-toggle.js';

package/dist/src/presentation/web/components/common/sound-toggle/sound-toggle.d.ts

@@ -0,0 +1,2 @@
+export declare function SoundToggle(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sound-toggle.d.ts.map

package/dist/src/presentation/web/components/common/sound-toggle/sound-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sound-toggle.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sound-toggle/sound-toggle.tsx"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,4CAc1B"}

package/dist/src/presentation/web/components/common/sound-toggle/sound-toggle.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Volume2, VolumeOff } from 'lucide-react';
+import { Button } from '../../ui/button.js';
+import { useSoundEnabled } from '../../../hooks/use-sound-enabled.js';
+export function SoundToggle() {
+    const { enabled, toggle } = useSoundEnabled();
+    return (_jsxs(Button, { variant: "ghost", size: "icon", onClick: toggle, "aria-label": enabled ? 'Mute sounds' : 'Unmute sounds', children: [enabled ? _jsx(Volume2, { className: "h-5 w-5" }) : _jsx(VolumeOff, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Toggle sound" })] }));
+}

package/dist/src/presentation/web/components/common/sound-toggle/sound-toggle.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SoundToggle } from './sound-toggle.js';
+declare const meta: Meta<typeof SoundToggle>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InContext: Story;
+//# sourceMappingURL=sound-toggle.stories.d.ts.map

package/dist/src/presentation/web/components/common/sound-toggle/sound-toggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sound-toggle.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sound-toggle/sound-toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAOlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC"}

package/dist/src/presentation/web/components/common/sound-toggle/sound-toggle.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SoundToggle } from './sound-toggle.js';
+const meta = {
+    title: 'Composed/SoundToggle',
+    component: SoundToggle,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(SoundToggle, {}),
+};
+export const InContext = {
+    render: () => (_jsxs("div", { className: "flex items-center gap-4 rounded-lg border p-4", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: "Toggle sound:" }), _jsx(SoundToggle, {})] })),
+};

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAgB1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAW5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAmZzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAgB1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAY5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAgazF"}

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

@@ -14,10 +14,11 @@ import { PrdQuestionnaireDrawer } from '../../common/prd-questionnaire/index.js'
 import { TechDecisionsDrawer } from '../../common/tech-decisions-review/index.js';
 import { MergeReviewDrawer } from '../../common/merge-review/index.js';
 import { NotificationPermissionBanner } from '../../common/notification-permission-banner/index.js';
+import { useSound } from '../../../hooks/use-sound.js';
 import { ControlCenterEmptyState } from './control-center-empty-state.js';
 import { useControlCenterState } from './use-control-center-state.js';
 export function ControlCenterInner({ initialNodes, initialEdges }) {
-    const { nodes, edges, selectedNode, isCreateDrawerOpen, isDeleting, pendingRepositoryPath, onNodesChange, handleConnect, handleAddFeature, handleAddFeatureToRepo, handleAddFeatureToFeature, handleAddRepository, handleNodeClick, clearSelection, handleCreateFeatureSubmit, handleDeleteFeature, handleDeleteRepository, closeCreateDrawer, pendingParentFeatureId, } = useControlCenterState(initialNodes, initialEdges);
+    const { nodes, edges, selectedNode, isCreateDrawerOpen, isDeleting, pendingRepositoryPath, onNodesChange, handleConnect, handleAddFeature, handleAddFeatureToRepo, handleAddFeatureToFeature, handleAddRepository, handleNodeClick, clearSelection, handleCreateFeatureSubmit, handleDeleteFeature, handleDeleteRepository, closeCreateDrawer, selectFeatureById, pendingParentFeatureId, } = useControlCenterState(initialNodes, initialEdges);
     // Extract feature list for the parent selector in the create drawer
     const featureOptions = useMemo(() => nodes
         .filter((n) => n.type === 'featureNode')
@@ -42,6 +43,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const [isLoadingQuestionnaire, setIsLoadingQuestionnaire] = useState(false);
     // Reject state (shared by both drawers)
     const [isRejecting, setIsRejecting] = useState(false);
+    const rejectSound = useSound('caution', { volume: 0.5 });
     // Tech decisions drawer state
     const [techDecisionsData, setTechDecisionsData] = useState(null);
     const [isLoadingTechDecisions, setIsLoadingTechDecisions] = useState(false);
@@ -94,6 +96,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 toast.error(result.error ?? `Failed to reject ${label.toLowerCase()}`);
                 return;
             }
+            rejectSound.play();
             toast.success(`${label} rejected — agent re-iterating (iteration ${result.iteration})`);
             if (result.iterationWarning) {
                 toast.warning(`Iteration ${result.iteration} — consider approving or adjusting feedback to avoid excessive iterations`);
@@ -104,7 +107,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         finally {
             setIsRejecting(false);
         }
-    }, [selectedNode?.featureId, clearSelection]);
+    }, [selectedNode?.featureId, clearSelection, rejectSound]);
     const handlePrdReject = useCallback((feedback) => handleReject(feedback, 'Requirements', () => setPrdSelections({})), [handleReject]);
     const handleTechDecisionsReject = useCallback((feedback) => handleReject(feedback, 'Plan'), [handleReject]);
     const handleMergeReject = useCallback((feedback) => handleReject(feedback, 'Merge'), [handleReject]);
@@ -233,6 +236,15 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         window.addEventListener('shep:open-create-drawer', handler);
         return () => window.removeEventListener('shep:open-create-drawer', handler);
     }, [handleAddFeature]);
+    // Listen for notification "Review" clicks to open the relevant drawer
+    useEffect(() => {
+        const handler = (e) => {
+            const featureId = e.detail.featureId;
+            selectFeatureById(featureId);
+        };
+        window.addEventListener('shep:select-feature', handler);
+        return () => window.removeEventListener('shep:select-feature', handler);
+    }, [selectFeatureById]);
     if (!hasRepositories) {
         return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }), _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults, features: featureOptions, initialParentId: pendingParentFeatureId })] }));
     }

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

@@ -26,6 +26,7 @@ export interface ControlCenterState {
     handleDeleteRepository: (repositoryId: string) => Promise<void>;
     isDeleting: boolean;
     createFeatureNode: (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>) => string;
+    selectFeatureById: (featureId: string) => void;
 }
 export declare function useControlCenterState(initialNodes: CanvasNodeType[], initialEdges: Edge[]): ControlCenterState;
 //# sourceMappingURL=use-control-center-state.d.ts.map

package/dist/src/presentation/web/components/features/control-center/use-control-center-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAOhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,sBAAsB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,yBAAyB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yBAAyB,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KACpC,MAAM,CAAC;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAmjBpB"}
+{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAYhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,sBAAsB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,yBAAyB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yBAAyB,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KACpC,MAAM,CAAC;IACZ,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAgtBpB"}

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/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"}