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

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

@@ -3,12 +3,6 @@ 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,
@@ -17,339 +11,238 @@ const meta = {
         layout: 'fullscreen',
     },
     decorators: [
-        (Story) => (_jsx(AgentEventsProvider, { children: _jsx(SidebarFeaturesProvider, { children: _jsx(DrawerCloseGuardProvider, { children: _jsx("div", { style: { height: '100vh' }, children: _jsx(Story, {}) }) }) }) })),
+        (Story) => (_jsx(AgentEventsProvider, { children: _jsx(DrawerCloseGuardProvider, { children: _jsx("div", { style: { height: '100vh' }, children: _jsx(Story, {}) }) }) })),
     ],
 };
 export default meta;
-// ---------------------------------------------------------------------------
-// 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' },
-    },
+const featureNodes = [
     {
-        id: 'repo-infra',
-        type: 'repositoryNode',
-        position: { x: 0, y: 0 },
-        data: { name: 'acme/infra' },
+        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',
+        },
     },
-];
-const fullSpectrumFeatures = [
-    // --- backend features ---
     {
-        id: 'feat-payment',
+        id: 'feat-2',
         type: 'featureNode',
-        position: { x: 0, y: 0 },
+        position: { x: 400, y: 230 },
         data: {
-            name: 'Payment Processing',
-            description: 'Stripe integration with webhook handling, idempotency keys, and retry logic for failed charges',
-            featureId: 'e2c8d4',
-            lifecycle: 'requirements',
+            name: 'User Dashboard',
+            description: 'Main dashboard layout and widgets',
+            featureId: '#f2',
+            lifecycle: 'research',
             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,
+            progress: 20,
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/user-dashboard',
         },
     },
     {
-        id: 'feat-graphql',
+        id: 'feat-3',
         type: 'featureNode',
-        position: { x: 0, y: 0 },
+        position: { x: 800, y: 115 },
         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: 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,
+            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',
         },
     },
     {
-        id: 'feat-rate-limiter',
+        id: 'feat-4',
         type: 'featureNode',
-        position: { x: 0, y: 0 },
+        position: { x: 800, y: 345 },
         data: {
-            name: 'Rate Limiter',
-            description: 'Sliding window rate limiting with Redis backing store and per-tenant quotas',
-            featureId: '3b5d7f',
+            name: 'Merge Review',
+            description: 'PR ready for merge approval',
+            featureId: '#f4',
             lifecycle: 'review',
             state: 'action-required',
-            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,
-            },
+            progress: 90,
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/merge-review',
         },
     },
-    {
-        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,
-        },
+];
+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' },
+        ],
+    },
+};
+// --- Dagre-layouted story: multiple repos with feature trees ---
+const dagreRepoNodes = [
     {
-        id: 'feat-audit-log',
-        type: 'featureNode',
+        id: 'repo-cli',
+        type: 'repositoryNode',
         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,
-        },
+        data: { name: 'shep-ai/cli' },
     },
-    // --- frontend features ---
     {
-        id: 'feat-dashboard',
-        type: 'featureNode',
+        id: 'repo-web',
+        type: 'repositoryNode',
         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,
-            },
-        },
+        data: { name: 'shep-ai/web' },
     },
+];
+const dagreFeatureNodes = [
     {
-        id: 'feat-onboarding',
+        id: 'feat-auth',
         type: 'featureNode',
         position: { x: 0, y: 0 },
         data: {
-            name: 'Onboarding Flow',
-            description: 'Multi-step wizard with progress tracking, field validation, and email verification',
-            featureId: 'b4c6d2',
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
             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,
+            state: 'running',
+            progress: 65,
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/auth-module',
         },
     },
     {
-        id: 'feat-notifications',
+        id: 'feat-sso',
         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,
+            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',
         },
     },
     {
-        id: 'feat-readme',
+        id: 'feat-dashboard',
         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,
-            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,
-            },
+            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',
         },
     },
-    // --- infra features ---
     {
-        id: 'feat-ci',
+        id: 'feat-gateway',
         type: 'featureNode',
         position: { x: 0, y: 0 },
         data: {
-            name: 'CI Pipeline Setup',
-            description: 'GitHub Actions CI/CD with matrix builds, caching, and automatic preview deployments',
-            featureId: '7c9e1a',
-            lifecycle: 'maintain',
+            name: 'API Gateway',
+            description: 'Rate limiting and routing',
+            featureId: '#f4',
+            lifecycle: 'deploy',
             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,
-            },
+            repositoryPath: '/home/user/my-repo',
+            branch: 'feat/api-gateway',
         },
     },
     {
-        id: 'feat-terraform',
+        id: 'feat-admin',
         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 },
+            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',
         },
     },
 ];
-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: [],
-        initialEdges: [],
+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' },
     },
-};
-export const WithFeatures = {
+    {
+        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.
+ */
+export const DagreLayout = {
     args: {
-        initialNodes: fullSpectrumNodes,
-        initialEdges: fullSpectrumLayoutedEdges,
+        initialNodes: dagreLayoutedNodes,
+        initialEdges: dagreLayoutedEdges,
     },
 };
 // --- Archive toggle stories ---