@shepai/cli 1.138.0 → 1.139.0

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,238 +17,339 @@ 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: 'feat-1',
-        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: '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: 'feat-2',
+        id: 'repo-infra',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'acme/infra' },
+    },
+];
+const fullSpectrumFeatures = [
+    // --- backend features ---
+    {
+        id: 'feat-payment',
         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: 'Payment Processing',
+            description: 'Stripe integration with webhook handling, idempotency keys, and retry logic for failed charges',
+            featureId: 'e2c8d4',
+            lifecycle: 'requirements',
             state: 'action-required',
-            progress: 20,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/user-dashboard',
+            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-3',
+        id: 'feat-graphql',
         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',
-            state: 'done',
-            progress: 100,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/api-gateway',
+            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: 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-4',
+        id: 'feat-rate-limiter',
         type: 'featureNode',
-        position: { x: 800, y: 345 },
+        position: { x: 0, y: 0 },
         data: {
-            name: 'Merge Review',
-            description: 'PR ready for merge approval',
-            featureId: '#f4',
+            name: 'Rate Limiter',
+            description: 'Sliding window rate limiting with Redis backing store and per-tenant quotas',
+            featureId: '3b5d7f',
             lifecycle: 'review',
             state: 'action-required',
-            progress: 90,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/merge-review',
+            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,
+            },
         },
     },
-];
-const repoNode = {
-    id: 'repo-1',
-    type: 'repositoryNode',
-    position: { x: 50, y: 115 },
-    data: { name: 'shep-ai/cli' },
-};
-const dashedEdge = { style: { strokeDasharray: '5 5' } };
-export const Empty = {
-    args: {
-        initialNodes: [],
-        initialEdges: [],
-    },
-};
-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: [],
-    },
-};
-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' },
-        ],
+    {
+        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,
+        },
     },
-};
-// --- Dagre-layouted story: multiple repos with feature trees ---
-const dagreRepoNodes = [
     {
-        id: 'repo-cli',
-        type: 'repositoryNode',
+        id: 'feat-audit-log',
+        type: 'featureNode',
         position: { x: 0, y: 0 },
-        data: { name: 'shep-ai/cli' },
+        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: 'repo-web',
-        type: 'repositoryNode',
+        id: 'feat-dashboard',
+        type: 'featureNode',
         position: { x: 0, y: 0 },
-        data: { name: 'shep-ai/web' },
+        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,
+            },
+        },
     },
-];
-const dagreFeatureNodes = [
     {
-        id: 'feat-auth',
+        id: 'feat-onboarding',
         type: 'featureNode',
         position: { x: 0, y: 0 },
         data: {
-            name: 'Auth Module',
-            description: 'OAuth2 authentication flow',
-            featureId: '#f1',
+            name: 'Onboarding Flow',
+            description: 'Multi-step wizard with progress tracking, field validation, and email verification',
+            featureId: 'b4c6d2',
             lifecycle: 'implementation',
-            state: 'running',
-            progress: 65,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/auth-module',
+            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-sso',
+        id: 'feat-notifications',
         type: 'featureNode',
         position: { x: 0, y: 0 },
         data: {
-            name: 'SSO Integration',
-            description: 'Single sign-on across services',
-            featureId: '#f2',
-            lifecycle: 'research',
-            state: 'action-required',
-            progress: 20,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/sso-integration',
+            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-dashboard',
+        id: 'feat-readme',
         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',
+            name: 'Update README',
+            description: 'Rewrite developer docs with setup guide, API reference, and architecture diagrams',
+            featureId: '1a3b5c',
+            lifecycle: 'maintain',
+            state: 'done',
+            progress: 100,
+            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-gateway',
+        id: 'feat-ci',
         type: 'featureNode',
         position: { x: 0, y: 0 },
         data: {
-            name: 'API Gateway',
-            description: 'Rate limiting and routing',
-            featureId: '#f4',
-            lifecycle: 'deploy',
+            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,
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/api-gateway',
+            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-admin',
+        id: 'feat-terraform',
         type: 'featureNode',
         position: { x: 0, y: 0 },
         data: {
-            name: 'Admin Panel',
-            description: 'Internal admin tools',
-            featureId: '#f5',
-            lifecycle: 'review',
-            state: 'blocked',
-            progress: 40,
-            blockedBy: 'API Gateway',
-            repositoryPath: '/home/user/my-repo',
-            branch: 'feat/admin-panel',
+            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 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 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: 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.
- */
-export const DagreLayout = {
+const { nodes: fullSpectrumNodes, edges: fullSpectrumLayoutedEdges } = layoutWithDagre([...fullSpectrumRepos, ...fullSpectrumFeatures], fullSpectrumEdges, { direction: 'LR' });
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Empty = {
+    args: {
+        initialNodes: [],
+        initialEdges: [],
+    },
+};
+export const WithFeatures = {
     args: {
-        initialNodes: dagreLayoutedNodes,
-        initialEdges: dagreLayoutedEdges,
+        initialNodes: fullSpectrumNodes,
+        initialEdges: fullSpectrumLayoutedEdges,
     },
 };
 // --- Archive toggle stories ---