@shepai/cli 1.137.0 → 1.138.0-pr445.9f2c136

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":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAuB5E,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,2CAuWzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAKpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAuB5E,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,2CAoYzF"}

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

@@ -1,8 +1,10 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { useReactFlow } from '@xyflow/react';
+import { Panel, useReactFlow } from '@xyflow/react';
+import { Eye, EyeOff } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
 import { useSidebarFeaturesContext, mapNodeStateToSidebarStatus, } from '../../../hooks/sidebar-features-context.js';
 import { useSelectedFeatureId } from '../../../hooks/use-selected-feature-id.js';
@@ -26,7 +28,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const { fitView } = useReactFlow();
     const drawerTimerRef = useRef(null);
     const { defaultViewport, onMoveEnd: handleViewportChange, resetViewport, } = useViewportPersistence();
-    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleRetryFeature, handleStartFeature, handleStopFeature, handleDeleteRepository, createFeatureNode, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
+    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleArchiveFeature, handleDeleteFeature, handleRetryFeature, handleStartFeature, handleStopFeature, handleUnarchiveFeature, handleDeleteRepository, createFeatureNode, showArchived, setShowArchived, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
     // Publish sidebar features + repo state to context
     const { setFeatures: setSidebarFeatures, setHasRepositories: setSidebarHasRepos } = useSidebarFeaturesContext();
     const featureNodes = useMemo(() => nodes.filter((n) => n.type === 'featureNode'), [nodes]);
@@ -201,6 +203,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             onRetryFeature: handleRetryFeature,
             onStartFeature: handleStartFeature,
             onStopFeature: handleStopFeature,
+            onArchiveFeature: handleArchiveFeature,
+            onUnarchiveFeature: handleUnarchiveFeature,
             onRepositoryAdd: handleAddFeatureToRepo,
             onRepositoryClick: handleRepositoryClick,
             onRepositoryDelete: handleDeleteRepository,
@@ -208,10 +212,12 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     }, [
         setCallbacks,
         handleAddFeatureToFeature,
+        handleArchiveFeature,
         handleDeleteFeature,
         handleRetryFeature,
         handleStartFeature,
         handleStopFeature,
+        handleUnarchiveFeature,
         handleAddFeatureToRepo,
         handleRepositoryClick,
         handleDeleteRepository,
@@ -263,5 +269,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             return nodes;
         return nodes.map((n) => n.type === 'repositoryNode' ? { ...n, data: { ...n.data, pulseAdd: true } } : n);
     }, [nodes, isCreateDrawerOpen]);
-    return (_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, onResetViewport: resetViewport, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: addRepoAndFocus }) }));
+    const archiveToggle = (_jsx(Panel, { position: "top-right", children: _jsxs("button", { type: "button", "aria-label": showArchived ? 'Hide archived features' : 'Show archived features', "data-testid": "archive-toggle-button", onClick: () => setShowArchived(!showArchived), className: cn('bg-card flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors', showArchived
+                ? 'border-primary/30 text-primary'
+                : 'text-muted-foreground hover:text-foreground'), children: [showArchived ? _jsx(Eye, { className: "h-3.5 w-3.5" }) : _jsx(EyeOff, { className: "h-3.5 w-3.5" }), showArchived ? 'Archived visible' : 'Show archived'] }) }));
+    return (_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, onResetViewport: resetViewport, toolbar: archiveToggle, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: addRepoAndFocus }) }));
 }

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

@@ -5,14 +5,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Empty: Story;
 export declare const WithFeatures: Story;
-export declare const WithToolbar: Story;
-export declare const WithNodeActions: Story;
 /**
- * Dagre auto-layout story — two repositories with interconnected feature trees.
- *
- * Demonstrates the Vertical / Horizontal toolbar buttons that re-layout the graph.
- * Initial layout is LR (horizontal). Click "Vertical" to switch to TB, or
- * "Horizontal" to switch back.
+ * 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 declare const DagreLayout: Story;
+export declare const WithArchivedFeatures: Story;
 //# sourceMappingURL=control-center.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-center.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAkBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA0EnC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAiIF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC"}
+{"version":3,"file":"control-center.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAejD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAoBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyVnC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AA4DF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC"}

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

@@ -3,6 +3,12 @@ import { ControlCenter } from './control-center.js';
 import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
 import { AgentEventsProvider } from '../../../hooks/agent-events-provider.js';
 import { DrawerCloseGuardProvider } from '../../../hooks/drawer-close-guard.js';
+import { SidebarFeaturesProvider } from '../../../hooks/sidebar-features-context.js';
+import { DeploymentState, PrStatus, CiStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+// eslint-disable-next-line @typescript-eslint/no-empty-function -- storybook noop callbacks
+const noop = () => { };
+// eslint-disable-next-line @typescript-eslint/no-empty-function -- storybook noop callbacks
+const noopId = (_id) => { };
 const meta = {
     title: 'Features/ControlCenter',
     component: ControlCenter,
@@ -11,79 +17,329 @@ const meta = {
         layout: 'fullscreen',
     },
     decorators: [
-        (Story) => (_jsx(AgentEventsProvider, { children: _jsx(DrawerCloseGuardProvider, { children: _jsx("div", { style: { height: '100vh' }, children: _jsx(Story, {}) }) }) })),
+        (Story) => (_jsx(AgentEventsProvider, { children: _jsx(SidebarFeaturesProvider, { children: _jsx(DrawerCloseGuardProvider, { children: _jsx("div", { style: { height: '100vh' }, children: _jsx(Story, {}) }) }) }) })),
     ],
 };
 export default meta;
-const featureNodes = [
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+const dashedEdge = { style: { strokeDasharray: '5 5' } };
+// ---------------------------------------------------------------------------
+// FullSpectrum — realistic multi-repo workspace with every state represented
+// ---------------------------------------------------------------------------
+const fullSpectrumRepos = [
+    {
+        id: 'repo-backend',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'acme/backend' },
+    },
+    {
+        id: 'repo-frontend',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'acme/frontend' },
+    },
+    {
+        id: 'repo-infra',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'acme/infra' },
+    },
+];
+const fullSpectrumFeatures = [
+    // --- backend features ---
     {
-        id: 'feat-1',
+        id: 'feat-payment',
         type: 'featureNode',
-        position: { x: 400, y: 0 },
+        position: { x: 0, y: 0 },
         data: {
-            name: 'Auth Module',
-            description: 'OAuth2 authentication flow',
-            featureId: '#f1',
+            name: 'Payment Processing',
+            description: 'Stripe integration with webhook handling, idempotency keys, and retry logic for failed charges',
+            featureId: 'e2c8d4',
+            lifecycle: 'requirements',
+            state: 'action-required',
+            progress: 15,
+            repositoryPath: '/home/user/acme/backend',
+            branch: 'feat/payment-processing',
+            agentType: 'claude-code',
+            startedAt: Date.now() - 12 * 60_000,
+            showHandles: true,
+            onDelete: noop,
+            onAction: noop,
+            hasAgentRun: true,
+            pr: undefined,
+        },
+    },
+    {
+        id: 'feat-graphql',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'GraphQL API Layer',
+            description: 'Replace REST endpoints with GraphQL schema, resolvers, and client-side codegen for type-safe queries',
+            featureId: 'c4a6b8',
             lifecycle: 'implementation',
             state: 'running',
-            progress: 65,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/auth-module',
+            progress: 47,
+            repositoryPath: '/home/user/acme/backend',
+            branch: 'feat/graphql-api',
+            agentType: 'claude-code',
+            startedAt: Date.now() - 38 * 60_000,
+            showHandles: true,
+            onDelete: noop,
+            onAction: noop,
+            hasAgentRun: true,
+            hasPlan: true,
         },
     },
     {
-        id: 'feat-2',
+        id: 'feat-rate-limiter',
         type: 'featureNode',
-        position: { x: 400, y: 230 },
+        position: { x: 0, y: 0 },
         data: {
-            name: 'User Dashboard',
-            description: 'Main dashboard layout and widgets',
-            featureId: '#f2',
-            lifecycle: 'research',
+            name: 'Rate Limiter',
+            description: 'Sliding window rate limiting with Redis backing store and per-tenant quotas',
+            featureId: '3b5d7f',
+            lifecycle: 'review',
             state: 'action-required',
-            progress: 20,
-            repositoryPath: '/home/user/my-repo',
+            progress: 92,
+            repositoryPath: '/home/user/acme/backend',
+            branch: 'feat/rate-limiter',
+            agentType: 'claude-code',
+            showHandles: true,
+            onDelete: noop,
+            onAction: noop,
+            hasAgentRun: true,
+            hasPlan: true,
+            deployment: {
+                status: DeploymentState.Ready,
+                url: 'https://feat-rate-limiter.preview.acme.dev',
+            },
+            pr: {
+                url: 'https://github.com/acme/backend/pull/142',
+                number: 142,
+                status: PrStatus.Open,
+                ciStatus: CiStatus.Success,
+                mergeable: true,
+            },
+        },
+    },
+    {
+        id: 'feat-webhooks',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Webhook Delivery System',
+            description: 'Reliable webhook delivery with exponential backoff, dead letter queue, and delivery dashboard',
+            featureId: 'a1f3c9',
+            lifecycle: 'implementation',
+            state: 'blocked',
+            progress: 30,
+            blockedBy: 'GraphQL API Layer',
+            repositoryPath: '/home/user/acme/backend',
+            branch: 'feat/webhooks',
+            agentType: 'cursor',
+            showHandles: true,
+            onDelete: noop,
+            hasAgentRun: true,
+            hasPlan: true,
+        },
+    },
+    {
+        id: 'feat-audit-log',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Audit Log',
+            description: 'Immutable audit trail for all mutations with structured event schema and compliance export',
+            featureId: 'd8e2a1',
+            lifecycle: 'research',
+            state: 'running',
+            progress: 22,
+            repositoryPath: '/home/user/acme/backend',
+            branch: 'feat/audit-log',
+            agentType: 'gemini-cli',
+            startedAt: Date.now() - 5 * 60_000,
+            showHandles: true,
+            onDelete: noop,
+            onAction: noop,
+            hasAgentRun: true,
+        },
+    },
+    // --- frontend features ---
+    {
+        id: 'feat-dashboard',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'User Dashboard',
+            description: 'Analytics dashboard with real-time charts, filterable data tables, and CSV export',
+            featureId: '5e7a9c',
+            lifecycle: 'maintain',
+            state: 'done',
+            progress: 100,
+            runtime: '2h 15m',
+            repositoryPath: '/home/user/acme/frontend',
             branch: 'feat/user-dashboard',
+            agentType: 'claude-code',
+            showHandles: true,
+            onDelete: noop,
+            hasAgentRun: true,
+            hasPlan: true,
+            deployment: { status: DeploymentState.Ready, url: 'https://feat-dashboard.preview.acme.dev' },
+            pr: {
+                url: 'https://github.com/acme/frontend/pull/87',
+                number: 87,
+                status: PrStatus.Merged,
+                ciStatus: CiStatus.Success,
+            },
         },
     },
     {
-        id: 'feat-3',
+        id: 'feat-onboarding',
         type: 'featureNode',
-        position: { x: 800, y: 115 },
+        position: { x: 0, y: 0 },
         data: {
-            name: 'API Gateway',
-            description: 'Rate limiting and routing',
-            featureId: '#f3',
-            lifecycle: 'deploy',
+            name: 'Onboarding Flow',
+            description: 'Multi-step wizard with progress tracking, field validation, and email verification',
+            featureId: 'b4c6d2',
+            lifecycle: 'implementation',
+            state: 'error',
+            progress: 55,
+            errorMessage: 'Build failed: Cannot find module @acme/shared-ui',
+            repositoryPath: '/home/user/acme/frontend',
+            branch: 'feat/onboarding',
+            agentType: 'claude-code',
+            showHandles: true,
+            onDelete: noop,
+            onRetry: noopId,
+            hasAgentRun: true,
+            hasPlan: true,
+        },
+    },
+    {
+        id: 'feat-notifications',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Push Notifications',
+            description: 'Browser push notifications with service worker, permission prompts, and preference center',
+            featureId: 'f2a8e5',
+            lifecycle: 'pending',
+            state: 'pending',
+            progress: 0,
+            repositoryPath: '/home/user/acme/frontend',
+            branch: 'feat/push-notifications',
+            showHandles: true,
+            onDelete: noop,
+            onStart: noopId,
+        },
+    },
+    {
+        id: 'feat-readme',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Update README',
+            description: 'Rewrite developer docs with setup guide, API reference, and architecture diagrams',
+            featureId: '1a3b5c',
+            lifecycle: 'maintain',
             state: 'done',
             progress: 100,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/api-gateway',
+            runtime: '8m',
+            repositoryPath: '/home/user/acme/frontend',
+            branch: 'feat/update-readme',
+            agentType: 'claude-code',
+            fastMode: true,
+            showHandles: true,
+            onDelete: noop,
+            hasAgentRun: true,
+            deployment: { status: DeploymentState.Ready, url: 'https://feat-readme.preview.acme.dev' },
+            pr: {
+                url: 'https://github.com/acme/frontend/pull/91',
+                number: 91,
+                status: PrStatus.Merged,
+                ciStatus: CiStatus.Success,
+            },
         },
     },
+    // --- infra features ---
     {
-        id: 'feat-4',
+        id: 'feat-ci',
         type: 'featureNode',
-        position: { x: 800, y: 345 },
+        position: { x: 0, y: 0 },
         data: {
-            name: 'Merge Review',
-            description: 'PR ready for merge approval',
-            featureId: '#f4',
-            lifecycle: 'review',
-            state: 'action-required',
-            progress: 90,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/merge-review',
+            name: 'CI Pipeline Setup',
+            description: 'GitHub Actions CI/CD with matrix builds, caching, and automatic preview deployments',
+            featureId: '7c9e1a',
+            lifecycle: 'maintain',
+            state: 'done',
+            progress: 100,
+            runtime: '45m',
+            repositoryPath: '/home/user/acme/infra',
+            branch: 'feat/ci-pipeline',
+            agentType: 'claude-code',
+            showHandles: true,
+            onDelete: noop,
+            hasAgentRun: true,
+            hasPlan: true,
+            pr: {
+                url: 'https://github.com/acme/infra/pull/34',
+                number: 34,
+                status: PrStatus.Merged,
+                ciStatus: CiStatus.Success,
+            },
+        },
+    },
+    {
+        id: 'feat-terraform',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Terraform Modules',
+            description: 'Reusable Terraform modules for VPC, ECS, RDS, and ElastiCache with multi-region support',
+            featureId: '9d1f3b',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 71,
+            repositoryPath: '/home/user/acme/infra',
+            branch: 'feat/terraform-modules',
+            agentType: 'aider',
+            startedAt: Date.now() - 22 * 60_000,
+            showHandles: true,
+            onDelete: noop,
+            onAction: noop,
+            hasAgentRun: true,
+            hasPlan: true,
+            deployment: { status: DeploymentState.Booting },
         },
     },
 ];
-const repoNode = {
-    id: 'repo-1',
-    type: 'repositoryNode',
-    position: { x: 50, y: 115 },
-    data: { name: 'shep-ai/cli' },
-};
-const dashedEdge = { style: { strokeDasharray: '5 5' } };
+const fullSpectrumEdges = [
+    // repo → feature edges
+    { id: 'e-be-payment', source: 'repo-backend', target: 'feat-payment', ...dashedEdge },
+    { id: 'e-be-graphql', source: 'repo-backend', target: 'feat-graphql', ...dashedEdge },
+    { id: 'e-be-rate', source: 'repo-backend', target: 'feat-rate-limiter', ...dashedEdge },
+    { id: 'e-be-webhooks', source: 'repo-backend', target: 'feat-webhooks', ...dashedEdge },
+    { id: 'e-be-audit', source: 'repo-backend', target: 'feat-audit-log', ...dashedEdge },
+    { id: 'e-fe-dash', source: 'repo-frontend', target: 'feat-dashboard', ...dashedEdge },
+    { id: 'e-fe-onboard', source: 'repo-frontend', target: 'feat-onboarding', ...dashedEdge },
+    { id: 'e-fe-notif', source: 'repo-frontend', target: 'feat-notifications', ...dashedEdge },
+    { id: 'e-fe-readme', source: 'repo-frontend', target: 'feat-readme', ...dashedEdge },
+    { id: 'e-infra-ci', source: 'repo-infra', target: 'feat-ci', ...dashedEdge },
+    { id: 'e-infra-tf', source: 'repo-infra', target: 'feat-terraform', ...dashedEdge },
+    // dependency edges
+    { id: 'e-graphql-webhooks', source: 'feat-graphql', target: 'feat-webhooks' },
+    { id: 'e-graphql-rate', source: 'feat-graphql', target: 'feat-rate-limiter' },
+    { id: 'e-payment-dashboard', source: 'feat-payment', target: 'feat-dashboard' },
+    { id: 'e-ci-terraform', source: 'feat-ci', target: 'feat-terraform' },
+];
+const { nodes: fullSpectrumNodes, edges: fullSpectrumLayoutedEdges } = layoutWithDagre([...fullSpectrumRepos, ...fullSpectrumFeatures], fullSpectrumEdges, { direction: 'LR' });
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
 export const Empty = {
     args: {
         initialNodes: [],
@@ -92,49 +348,22 @@ export const Empty = {
 };
 export const WithFeatures = {
     args: {
-        initialNodes: featureNodes,
-        initialEdges: [
-            { id: 'e1-3', source: 'feat-1', target: 'feat-3' },
-            { id: 'e2-3', source: 'feat-2', target: 'feat-3' },
-        ],
-    },
-};
-export const WithToolbar = {
-    args: {
-        initialNodes: [featureNodes[0], featureNodes[1]],
-        initialEdges: [],
+        initialNodes: fullSpectrumNodes,
+        initialEdges: fullSpectrumLayoutedEdges,
     },
 };
-export const WithNodeActions = {
-    args: {
-        initialNodes: [repoNode, ...featureNodes],
-        initialEdges: [
-            { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
-            { id: 'e-repo-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
-            { id: 'e1-3', source: 'feat-1', target: 'feat-3' },
-        ],
-    },
+// --- Archive toggle stories ---
+const archiveRepoNode = {
+    id: 'repo-archive',
+    type: 'repositoryNode',
+    position: { x: 50, y: 115 },
+    data: { name: 'shep-ai/cli' },
 };
-// --- Dagre-layouted story: multiple repos with feature trees ---
-const dagreRepoNodes = [
+const archivedFeatureNodes = [
     {
-        id: 'repo-cli',
-        type: 'repositoryNode',
-        position: { x: 0, y: 0 },
-        data: { name: 'shep-ai/cli' },
-    },
-    {
-        id: 'repo-web',
-        type: 'repositoryNode',
-        position: { x: 0, y: 0 },
-        data: { name: 'shep-ai/web' },
-    },
-];
-const dagreFeatureNodes = [
-    {
-        id: 'feat-auth',
+        id: 'feat-active',
         type: 'featureNode',
-        position: { x: 0, y: 0 },
+        position: { x: 400, y: 0 },
         data: {
             name: 'Auth Module',
             description: 'OAuth2 authentication flow',
@@ -147,101 +376,49 @@ const dagreFeatureNodes = [
         },
     },
     {
-        id: 'feat-sso',
+        id: 'feat-done',
         type: 'featureNode',
-        position: { x: 0, y: 0 },
+        position: { x: 400, y: 230 },
         data: {
-            name: 'SSO Integration',
-            description: 'Single sign-on across services',
+            name: 'Payment Gateway',
+            description: 'Stripe integration for subscriptions',
             featureId: '#f2',
-            lifecycle: 'research',
-            state: 'action-required',
-            progress: 20,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/sso-integration',
-        },
-    },
-    {
-        id: 'feat-dashboard',
-        type: 'featureNode',
-        position: { x: 0, y: 0 },
-        data: {
-            name: 'User Dashboard',
-            description: 'Main dashboard layout and widgets',
-            featureId: '#f3',
-            lifecycle: 'requirements',
-            state: 'running',
-            progress: 10,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/user-dashboard',
-        },
-    },
-    {
-        id: 'feat-gateway',
-        type: 'featureNode',
-        position: { x: 0, y: 0 },
-        data: {
-            name: 'API Gateway',
-            description: 'Rate limiting and routing',
-            featureId: '#f4',
             lifecycle: 'deploy',
             state: 'done',
             progress: 100,
+            runtime: '1h 42m',
             repositoryPath: '/home/user/my-repo',
-            branch: 'feat/api-gateway',
+            branch: 'feat/payment-gateway',
         },
     },
     {
-        id: 'feat-admin',
+        id: 'feat-archived',
         type: 'featureNode',
-        position: { x: 0, y: 0 },
+        position: { x: 800, y: 115 },
         data: {
-            name: 'Admin Panel',
-            description: 'Internal admin tools',
-            featureId: '#f5',
-            lifecycle: 'review',
-            state: 'blocked',
-            progress: 40,
-            blockedBy: 'API Gateway',
+            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/admin-panel',
+            branch: 'feat/old-dashboard',
         },
     },
 ];
-const dagreNodesRaw = [...dagreRepoNodes, ...dagreFeatureNodes];
-const dagreEdges = [
-    // cli repo → Auth, SSO
-    { id: 'e-cli-auth', source: 'repo-cli', target: 'feat-auth', style: { strokeDasharray: '5 5' } },
-    { id: 'e-cli-sso', source: 'repo-cli', target: 'feat-sso', style: { strokeDasharray: '5 5' } },
-    // web repo → Dashboard, Admin
-    {
-        id: 'e-web-dash',
-        source: 'repo-web',
-        target: 'feat-dashboard',
-        style: { strokeDasharray: '5 5' },
-    },
-    {
-        id: 'e-web-admin',
-        source: 'repo-web',
-        target: 'feat-admin',
-        style: { strokeDasharray: '5 5' },
-    },
-    // Feature dependencies: Auth → Gateway, SSO → Gateway, Gateway → Admin
-    { id: 'e-auth-gw', source: 'feat-auth', target: 'feat-gateway' },
-    { id: 'e-sso-gw', source: 'feat-sso', target: 'feat-gateway' },
-    { id: 'e-gw-admin', source: 'feat-gateway', target: 'feat-admin' },
-];
-const { nodes: dagreLayoutedNodes, edges: dagreLayoutedEdges } = layoutWithDagre(dagreNodesRaw, dagreEdges, { direction: 'LR' });
 /**
- * Dagre auto-layout story — two repositories with interconnected feature trees.
- *
- * Demonstrates the Vertical / Horizontal toolbar buttons that re-layout the graph.
- * Initial layout is LR (horizontal). Click "Vertical" to switch to TB, or
- * "Horizontal" to switch back.
+ * 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 DagreLayout = {
+export const WithArchivedFeatures = {
     args: {
-        initialNodes: dagreLayoutedNodes,
-        initialEdges: dagreLayoutedEdges,
+        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 },
+        ],
     },
 };