@shepai/cli 1.137.0 → 1.138.0

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

@@ -245,3 +245,73 @@ export const DagreLayout = {
         initialEdges: dagreLayoutedEdges,
     },
 };
+// --- Archive toggle stories ---
+const archiveRepoNode = {
+    id: 'repo-archive',
+    type: 'repositoryNode',
+    position: { x: 50, y: 115 },
+    data: { name: 'shep-ai/cli' },
+};
+const archivedFeatureNodes = [
+    {
+        id: 'feat-active',
+        type: 'featureNode',
+        position: { x: 400, y: 0 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/auth-module',
+        },
+    },
+    {
+        id: 'feat-done',
+        type: 'featureNode',
+        position: { x: 400, y: 230 },
+        data: {
+            name: 'Payment Gateway',
+            description: 'Stripe integration for subscriptions',
+            featureId: '#f2',
+            lifecycle: 'deploy',
+            state: 'done',
+            progress: 100,
+            runtime: '1h 42m',
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/payment-gateway',
+        },
+    },
+    {
+        id: 'feat-archived',
+        type: 'featureNode',
+        position: { x: 800, y: 115 },
+        data: {
+            name: 'Old Dashboard',
+            description: 'Previous iteration of the admin dashboard',
+            featureId: '#f3',
+            lifecycle: 'maintain',
+            state: 'archived',
+            progress: 100,
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/old-dashboard',
+        },
+    },
+];
+/**
+ * Canvas with active and archived features.
+ * The archive toggle button appears in the top-right corner ("Show archived").
+ * Click the toggle to reveal the dimmed archived feature node.
+ */
+export const WithArchivedFeatures = {
+    args: {
+        initialNodes: [archiveRepoNode, ...archivedFeatureNodes],
+        initialEdges: [
+            { id: 'e-repo-active', source: 'repo-archive', target: 'feat-active', ...dashedEdge },
+            { id: 'e-repo-done', source: 'repo-archive', target: 'feat-done', ...dashedEdge },
+            { id: 'e-repo-archived', source: 'repo-archive', target: 'feat-archived', ...dashedEdge },
+        ],
+    },
+};

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

@@ -14,12 +14,18 @@ export interface ControlCenterState {
         repoPath: string;
     };
     handleLayout: (direction: LayoutDirection) => void;
+    handleArchiveFeature: (featureId: string) => void;
     handleDeleteFeature: (featureId: string, cleanup?: boolean, cascadeDelete?: boolean, closePr?: boolean) => void;
     handleRetryFeature: (featureId: string) => void;
     handleStartFeature: (featureId: string) => void;
     handleStopFeature: (featureId: string) => void;
+    handleUnarchiveFeature: (featureId: string) => void;
     handleDeleteRepository: (repositoryId: string) => Promise<void>;
     createFeatureNode: (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>, edgeType?: string) => string;
+    /** Whether archived features are shown on the canvas. */
+    showArchived: boolean;
+    /** Toggle archived feature visibility. */
+    setShowArchived: (show: boolean) => void;
     /** Stable lookup: repositoryPath for a feature node. */
     getFeatureRepositoryPath: (featureNodeId: string) => string | undefined;
     /** Stable lookup: repository data by nodeId. */

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":"AAKA,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,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAgBjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,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,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAwhBpB"}
+{"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":"AAKA,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,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAkBjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,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,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/E,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,oBAAoB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,mBAAmB,EAAE,CACnB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,kBAAkB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sBAAsB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,yDAAyD;IACzD,YAAY,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAQD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CA+kBpB"}

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

@@ -1,12 +1,14 @@
 'use client';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { layoutWithDagre, CANVAS_LAYOUT_DEFAULTS, } from '../../../lib/layout-with-dagre.js';
+import { archiveFeature } from '../../../app/actions/archive-feature.js';
 import { deleteFeature } from '../../../app/actions/delete-feature.js';
 import { resumeFeature } from '../../../app/actions/resume-feature.js';
 import { startFeature } from '../../../app/actions/start-feature.js';
 import { stopFeature } from '../../../app/actions/stop-feature.js';
+import { unarchiveFeature } from '../../../app/actions/unarchive-feature.js';
 import { addRepository } from '../../../app/actions/add-repository.js';
 import { deleteRepository } from '../../../app/actions/delete-repository.js';
 import { getFeatureMetadata } from '../../../app/actions/get-feature-metadata.js';
@@ -25,7 +27,9 @@ export function useControlCenterState(initialNodes, initialEdges) {
     const router = useRouter();
     const deleteSound = useSoundAction('delete');
     const createSound = useSoundAction('create');
-    const { nodes, edges, reconcile, updateFeature, addPendingFeature, removeFeature, restoreFeature, addRepository: addRepositoryToMap, removeRepository, replaceRepository, getFeatureRepositoryPath, getRepositoryData, getRepoMapSize, setCallbacks, beginMutation, endMutation, isMutating, } = useGraphState(initialNodes, initialEdges);
+    // Archive toggle: persists during session, resets on page reload (FR-10)
+    const [showArchived, setShowArchived] = useState(false);
+    const { nodes, edges, reconcile, updateFeature, addPendingFeature, removeFeature, restoreFeature, addRepository: addRepositoryToMap, removeRepository, replaceRepository, getFeatureRepositoryPath, getRepositoryData, getRepoMapSize, setCallbacks, beginMutation, endMutation, isMutating, } = useGraphState(initialNodes, initialEdges, showArchived);
     // Refs for stable access to latest nodes/edges without callback recreation
     const nodesRef = useRef(nodes);
     const edgesRef = useRef(edges);
@@ -279,6 +283,46 @@ export function useControlCenterState(initialNodes, initialEdges) {
         })
             .finally(() => endMutation());
     }, [beginMutation, endMutation]);
+    const handleArchiveFeature = useCallback((featureId) => {
+        const nodeId = `feat-${featureId}`;
+        beginMutation();
+        updateFeature(nodeId, { state: 'archived' });
+        archiveFeature(featureId)
+            .then((result) => {
+            if (result.error) {
+                updateFeature(nodeId, { state: 'done' });
+                toast.error(result.error);
+            }
+            else {
+                toast.success('Feature archived');
+            }
+        })
+            .catch(() => {
+            updateFeature(nodeId, { state: 'done' });
+            toast.error('Failed to archive feature');
+        })
+            .finally(() => endMutation());
+    }, [updateFeature, beginMutation, endMutation]);
+    const handleUnarchiveFeature = useCallback((featureId) => {
+        const nodeId = `feat-${featureId}`;
+        beginMutation();
+        updateFeature(nodeId, { state: 'done' });
+        unarchiveFeature(featureId)
+            .then((result) => {
+            if (result.error) {
+                updateFeature(nodeId, { state: 'archived' });
+                toast.error(result.error);
+            }
+            else {
+                toast.success('Feature unarchived');
+            }
+        })
+            .catch(() => {
+            updateFeature(nodeId, { state: 'archived' });
+            toast.error('Failed to unarchive feature');
+        })
+            .finally(() => endMutation());
+    }, [updateFeature, beginMutation, endMutation]);
     const handleDeleteFeature = useCallback((featureId, cleanup, cascadeDelete, closePr) => {
         const nodeId = `feat-${featureId}`;
         const shouldCascade = cascadeDelete === true;
@@ -455,13 +499,17 @@ export function useControlCenterState(initialNodes, initialEdges) {
         onNodesChange,
         handleConnect,
         handleAddRepository,
+        handleArchiveFeature,
         handleLayout,
         handleDeleteFeature,
         handleRetryFeature,
         handleStartFeature,
         handleStopFeature,
+        handleUnarchiveFeature,
         handleDeleteRepository,
         createFeatureNode,
+        showArchived,
+        setShowArchived,
         getFeatureRepositoryPath,
         getRepositoryData,
         setCallbacks,

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,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAsKD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+JD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}

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

@@ -6,8 +6,6 @@ import { Plus, FolderPlus, Github, GitBranch } from 'lucide-react';
 import { SidebarProvider, SidebarInset } from '../../ui/sidebar.js';
 import { AppSidebar } from '../../layouts/app-sidebar/index.js';
 import { FloatingActionButton, } from '../../common/floating-action-button/index.js';
-import { ThemeToggle } from '../../common/theme-toggle/index.js';
-import { SoundToggle } from '../../common/sound-toggle/index.js';
 import { ReactFileManagerDialog } from '../../common/react-file-manager-dialog/index.js';
 import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
 import { GitHubImportDialog } from '../../common/github-import-dialog/index.js';
@@ -121,7 +119,7 @@ function AppShellInner({ children }) {
         featureFlags.githubImport,
         featureFlags.adoptBranch,
     ]);
-    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, onFeatureClick: handleFeatureClick }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsxs("div", { className: "absolute top-3 right-3 z-50 flex gap-1", "data-test-id": "canvas-actions-toolbar", children: [_jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children }), isControlCenterRoute(pathname) && hasRepositories ? (_jsx(FloatingActionButton, { actions: fabActions })) : null, featureFlags.githubImport ? (_jsx(GitHubImportDialog, { open: githubDialogOpen, onOpenChange: setGithubDialogOpen, onImportComplete: handleGitHubImportComplete })) : null] }) }), _jsx(ReactFileManagerDialog, { open: showReactPicker, onOpenChange: (open) => {
+    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, onFeatureClick: handleFeatureClick }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsx("main", { className: "h-full", children: children }), isControlCenterRoute(pathname) && hasRepositories ? (_jsx(FloatingActionButton, { actions: fabActions })) : null, featureFlags.githubImport ? (_jsx(GitHubImportDialog, { open: githubDialogOpen, onOpenChange: setGithubDialogOpen, onImportComplete: handleGitHubImportComplete })) : null] }) }), _jsx(ReactFileManagerDialog, { open: showReactPicker, onOpenChange: (open) => {
                     if (!open)
                         setShowReactPicker(false);
                 }, onSelect: handleReactPickerSelect })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAG/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CAgHjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,GACf,EAAE,eAAe,2CA6MjB"}

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

@@ -1,17 +1,22 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from 'next/navigation';
-import { Home, Wrench, Puzzle, Settings } from 'lucide-react';
-import { Sidebar, SidebarHeader, SidebarContent, SidebarMenu, SidebarMenuItem, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
+import Link from 'next/link';
+import { Home, Moon, Sun, Volume2, VolumeOff, Wrench, Puzzle, Settings } from 'lucide-react';
+import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
 import { SidebarNavItem } from '../../common/sidebar-nav-item/index.js';
 import { SidebarCollapseToggle } from '../../common/sidebar-collapse-toggle/index.js';
 import { ShepLogo } from '../../common/shep-logo/index.js';
 import { VersionBadge } from '../../common/version-badge/index.js';
 import { FeatureListItem } from '../../common/feature-list-item/index.js';
+import { useSoundEnabled } from '../../../hooks/use-sound-enabled.js';
+import { useTheme } from '../../../hooks/useTheme.js';
+import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { FeatureStatusGroup } from '../../common/feature-status-group/index.js';
 import { SidebarSectionHeader } from '../../common/sidebar-section-header/index.js';
 import { featureStatusConfig, featureStatusOrder } from '../../common/feature-status-config.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { useDeferredMount } from '../../../hooks/use-deferred-mount.js';
 import { useVersion } from '../../../hooks/use-version.js';
 export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
@@ -20,6 +25,11 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
     const collapsed = state === 'collapsed';
     const { mounted: showExpanded, visible: expandedVisible } = useDeferredMount(collapsed, 200);
     const versionData = useVersion();
+    const { enabled: soundEnabled, toggle: toggleSound } = useSoundEnabled();
+    const { resolvedTheme, theme, setTheme } = useTheme();
+    const toggleOnSound = useSoundAction('toggle-on');
+    const toggleOffSound = useSoundAction('toggle-off');
+    const clickSound = useSoundAction('navigate');
     const grouped = featureStatusOrder.map((key) => {
         const { label } = featureStatusConfig[key];
         const items = features.filter((f) => f.status === key);
@@ -29,9 +39,39 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, }) {
                                             'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
                                             'transition-opacity duration-200 ease-out',
                                             expandedVisible ? 'opacity-100' : 'opacity-0',
-                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: "Control Center", href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: "Tools", href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: "Skills", href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: "Settings", href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
-                        'min-w-0 overflow-hidden transition-opacity duration-200 ease-out',
+                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: "Control Center", href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: "Tools", href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: "Skills", href: "/skills", active: pathname === '/skills' })) : null] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
+                        'flex min-h-0 flex-1 flex-col overflow-hidden transition-opacity duration-200 ease-out',
                         '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                         expandedVisible ? 'opacity-100' : 'opacity-0',
-                    ].join(' '), children: [_jsx(SidebarSectionHeader, { label: "Features" }), _jsx(ScrollArea, { children: grouped.map(({ key, label, items }) => items.length > 0 ? (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, agentType: feature.agentType, modelId: feature.modelId, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, key)) : null) })] })) : null }), _jsx(SidebarRail, {})] }));
+                    ].join(' '), children: [_jsx(SidebarSectionHeader, { label: "Features" }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: grouped.map(({ key, label, items }) => items.length > 0 ? (_jsx(FeatureStatusGroup, { label: label, count: items.length, children: items.map((feature) => (_jsx(FeatureListItem, { name: feature.name, status: feature.status, startedAt: feature.startedAt, duration: feature.duration, agentType: feature.agentType, modelId: feature.modelId, onClick: onFeatureClick ? () => onFeatureClick(feature.featureId) : undefined }, feature.featureId))) }, key)) : null) })] })) : null }), _jsx(SidebarFooter, { className: "border-t p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { asChild: true, tooltip: "Settings", className: "w-auto flex-none", children: _jsx(Link, { href: '/settings', onClick: () => clickSound.play(), children: _jsx(Settings, { className: "h-4 w-4" }) }) }) }), _jsx(TooltipContent, { side: "top", hidden: collapsed, children: "Settings" })] }) }), !collapsed && _jsx("div", { className: "flex-1" }), !collapsed && (_jsxs(TooltipProvider, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(SidebarMenuButton, { className: "w-auto flex-none", onClick: () => {
+                                                            clickSound.play();
+                                                            toggleSound();
+                                                        }, "aria-label": soundEnabled ? 'Mute sounds' : 'Unmute sounds', children: soundEnabled ? (_jsx(Volume2, { className: "h-4 w-4" })) : (_jsx(VolumeOff, { className: "h-4 w-4" })) }) }), _jsx(TooltipContent, { side: "top", children: soundEnabled ? 'Mute sounds' : 'Unmute sounds' })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { className: "w-auto flex-none", onClick: (e) => {
+                                                            const currentResolved = theme === 'system' ? resolvedTheme : theme;
+                                                            const goingToDark = currentResolved !== 'dark';
+                                                            const newTheme = theme === 'system'
+                                                                ? resolvedTheme === 'dark'
+                                                                    ? 'light'
+                                                                    : 'dark'
+                                                                : theme === 'dark'
+                                                                    ? 'light'
+                                                                    : 'dark';
+                                                            if (goingToDark) {
+                                                                toggleOnSound.play();
+                                                            }
+                                                            else {
+                                                                toggleOffSound.play();
+                                                            }
+                                                            const prefersReducedMotion = typeof window !== 'undefined' &&
+                                                                window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+                                                            if (!('startViewTransition' in document) || prefersReducedMotion) {
+                                                                setTheme(newTheme);
+                                                                return;
+                                                            }
+                                                            document.documentElement.style.setProperty('--x', `${e.clientX}px`);
+                                                            document.documentElement.style.setProperty('--y', `${e.clientY}px`);
+                                                            document.startViewTransition(() => {
+                                                                setTheme(newTheme);
+                                                            });
+                                                        }, "aria-label": `Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} mode`, children: [_jsx(Sun, { className: "h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" }), _jsx(Moon, { className: "absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" })] }) }), _jsx(TooltipContent, { side: "top", children: resolvedTheme === 'dark' ? 'Light mode' : 'Dark mode' })] })] }))] }) }) }) }), _jsx(SidebarRail, {})] }));
 }

package/dist/src/presentation/web/hooks/sidebar-features-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-features-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/sidebar-features-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4DAA4D,CAAC;AACnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAiBD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAEzF;AAMD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CAYjF;AAED,wBAAgB,yBAAyB,IAAI,2BAA2B,CAMvE"}
+{"version":3,"file":"sidebar-features-context.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/sidebar-features-context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4DAA4D,CAAC;AACnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAkBD;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,IAAI,CAEzF;AAMD,UAAU,2BAA2B;IACnC,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,WAAW,EAAE,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,4BAA4B,2CAYjF;AAED,wBAAgB,yBAAyB,IAAI,2BAA2B,CAMvE"}

package/dist/src/presentation/web/hooks/sidebar-features-context.js

@@ -13,6 +13,7 @@ const stateMapping = {
     error: 'error',
     creating: null,
     deleting: null,
+    archived: null,
 };
 /**
  * Maps a canvas FeatureNodeState to the sidebar's 5-state FeatureStatus.

package/dist/src/presentation/web/hooks/use-graph-state.d.ts

@@ -54,5 +54,5 @@ export interface UseGraphStateReturn {
     isMutating: () => boolean;
 }
 type FeatureDataUpdates = Partial<Pick<FeatureNodeData, 'state' | 'lifecycle' | 'name' | 'description'>>;
-export declare function useGraphState(initialNodes: CanvasNodeType[], initialEdges: Edge[]): UseGraphStateReturn;
+export declare function useGraphState(initialNodes: CanvasNodeType[], initialEdges: Edge[], showArchived?: boolean): UseGraphStateReturn;
 //# sourceMappingURL=use-graph-state.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-graph-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mDAAmD;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClE,uEAAuE;IACvE,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,yDAAyD;IACzD,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sDAAsD;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,2DAA2D;IAC3D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,gCAAgC;IAChC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtF,gEAAgE;IAChE,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,+EAA+E;IAC/E,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,0EAA0E;IAC1E,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAuCD,KAAK,kBAAkB,GAAG,OAAO,CAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,CACtE,CAAC;AA8BF,wBAAgB,aAAa,CAC3B,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,mBAAmB,CA+ZrB"}
+{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-graph-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAEL,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,mDAAmD;IACnD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,mDAAmD;IACnD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd;;;;OAIG;IACH,SAAS,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClE,uEAAuE;IACvE,aAAa,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,kEAAkE;IAClE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1F,yDAAyD;IACzD,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,sDAAsD;IACtD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9D,2DAA2D;IAC3D,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,gCAAgC;IAChC,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACtF,gEAAgE;IAChE,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,yDAAyD;IACzD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,+EAA+E;IAC/E,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,0EAA0E;IAC1E,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAuCD,KAAK,kBAAkB,GAAG,OAAO,CAC/B,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,aAAa,CAAC,CACtE,CAAC;AA8BF,wBAAgB,aAAa,CAC3B,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,EACpB,YAAY,UAAQ,GACnB,mBAAmB,CA8arB"}

package/dist/src/presentation/web/hooks/use-graph-state.js

@@ -56,7 +56,7 @@ function mapsEqual(a, b) {
     }
     return true;
 }
-export function useGraphState(initialNodes, initialEdges) {
+export function useGraphState(initialNodes, initialEdges, showArchived = false) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: parse only on mount (like useState initializer)
     const init = useMemo(() => parseMaps(initialNodes, initialEdges), []);
     const [featureMap, setFeatureMap] = useState(init.featureMap);
@@ -91,14 +91,29 @@ export function useGraphState(initialNodes, initialEdges) {
         onRepositoryDelete: (repositoryId) => callbacksRef.current.onRepositoryDelete?.(repositoryId),
         onRetryFeature: (featureId) => callbacksRef.current.onRetryFeature?.(featureId),
         onStartFeature: (featureId) => callbacksRef.current.onStartFeature?.(featureId),
+        onArchiveFeature: (featureId) => callbacksRef.current.onArchiveFeature?.(featureId),
+        onUnarchiveFeature: (featureId) => callbacksRef.current.onUnarchiveFeature?.(featureId),
     }), []);
     // Stable refs for domain Maps (for use in callbacks without depending on state)
     const featureMapRef = useRef(featureMap);
     featureMapRef.current = featureMap;
     const repoMapRef = useRef(repoMap);
     repoMapRef.current = repoMap;
+    // Filter archived features from the Map when the toggle is off.
+    // This gives instant toggle response (no server round-trip) per NFR-3.
+    const visibleFeatureMap = useMemo(() => {
+        if (showArchived)
+            return featureMap;
+        const filtered = new Map();
+        for (const [id, entry] of featureMap) {
+            if (entry.data.state !== 'archived') {
+                filtered.set(id, entry);
+            }
+        }
+        return filtered.size === featureMap.size ? featureMap : filtered;
+    }, [featureMap, showArchived]);
     // Derive graph from domain Maps (runs on every Map change, but dagre only on topology change)
-    const derived = useMemo(() => deriveGraph(featureMap, repoMap, pendingMap, stableCallbacks), [featureMap, repoMap, pendingMap, stableCallbacks]);
+    const derived = useMemo(() => deriveGraph(visibleFeatureMap, repoMap, pendingMap, stableCallbacks), [visibleFeatureMap, repoMap, pendingMap, stableCallbacks]);
     // Cache dagre layout positions — only re-run when node set or edge connections change
     const layoutCacheRef = useRef({ key: '', positions: new Map() });
     const { nodes, edges } = useMemo(() => {

package/dist/src/presentation/web/hooks/use-sound-action.d.ts

@@ -30,12 +30,12 @@ export declare const SOUND_ACTION_MAP: {
         readonly volume: 0.3;
     };
     readonly expand: {
-        readonly sound: "swipe";
-        readonly volume: 0.3;
+        readonly sound: "tap_01";
+        readonly volume: 0.2;
     };
     readonly collapse: {
-        readonly sound: "swipe";
-        readonly volume: 0.3;
+        readonly sound: "tap_01";
+        readonly volume: 0.2;
     };
     readonly 'menu-open': {
         readonly sound: "select";

package/dist/src/presentation/web/hooks/use-sound-action.js

@@ -14,8 +14,8 @@ export const SOUND_ACTION_MAP = {
     'toggle-off': { sound: 'toggle_off', volume: 0.3 },
     click: { sound: 'tap_01', volume: 0.3 },
     cancel: { sound: 'transition_down', volume: 0.3 },
-    expand: { sound: 'swipe', volume: 0.3 },
-    collapse: { sound: 'swipe', volume: 0.3 },
+    expand: { sound: 'tap_01', volume: 0.2 },
+    collapse: { sound: 'tap_01', volume: 0.2 },
     'menu-open': { sound: 'select', volume: 0.3 },
     copy: { sound: 'select', volume: 0.3 },
     // Drawers & transitions (volume 0.4) — noticeable transitions

package/dist/src/presentation/web/lib/derive-graph.d.ts

@@ -41,6 +41,10 @@ export interface GraphCallbacks {
     onStartFeature?: (featureId: string) => void;
     /** Called when the user stops a running feature. */
     onStopFeature?: (featureId: string) => void;
+    /** Called when the user archives a feature. */
+    onArchiveFeature?: (featureId: string) => void;
+    /** Called when the user unarchives a feature. */
+    onUnarchiveFeature?: (featureId: string) => void;
 }
 /**
  * Derives React Flow nodes and edges from domain Maps.

package/dist/src/presentation/web/lib/derive-graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derive-graph.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/derive-graph.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,qDAAqD;AACrD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,CAAC;IACtB,sGAAsG;IACtG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wDAAwD;AACxD,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAED,gFAAgF;AAChF,MAAM,WAAW,cAAc;IAC7B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qEAAqE;IACrE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,8CAA8C;IAC9C,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,6EAA6E;IAC7E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,oDAAoD;IACpD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,EACrC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,EAC/B,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,EACrC,SAAS,CAAC,EAAE,cAAc,GACzB;IAAE,KAAK,EAAE,cAAc,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CAiK5C"}
+{"version":3,"file":"derive-graph.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/derive-graph.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,qDAAqD;AACrD,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,CAAC;IACtB,sGAAsG;IACtG,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wDAAwD;AACxD,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAED,gFAAgF;AAChF,MAAM,WAAW,cAAc;IAC7B,4FAA4F;IAC5F,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,qEAAqE;IACrE,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,8CAA8C;IAC9C,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,OAAO,EACjB,aAAa,CAAC,EAAE,OAAO,EACvB,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,6EAA6E;IAC7E,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,oDAAoD;IACpD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,EACrC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,EAC/B,UAAU,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,EACrC,SAAS,CAAC,EAAE,cAAc,GACzB;IAAE,KAAK,EAAE,cAAc,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CA4K5C"}

package/dist/src/presentation/web/lib/derive-graph.js

@@ -115,6 +115,17 @@ export function deriveGraph(featureMap, repoMap, pendingMap, callbacks) {
                 callbacks?.onStopFeature && {
                 onStop: callbacks.onStopFeature,
             }),
+            ...(!isCreating &&
+                entry.data.state !== 'archived' &&
+                entry.data.state !== 'deleting' &&
+                callbacks?.onArchiveFeature && {
+                onArchive: callbacks.onArchiveFeature,
+            }),
+            ...(!isCreating &&
+                entry.data.state === 'archived' &&
+                callbacks?.onUnarchiveFeature && {
+                onUnarchive: callbacks.onUnarchiveFeature,
+            }),
         };
         nodes.push({
             id: nodeId,