@shepai/cli 1.135.3 → 1.136.0

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

@@ -2,13 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { expect, fn, waitFor } from '@storybook/test';
 import { ReactFlowProvider, ReactFlow, useNodesState } from '@xyflow/react';
-import { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { DeploymentState, PrStatus, CiStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { FeatureNode } from './feature-node.js';
 const nodeTypes = { featureNode: FeatureNode };
 /** Renders a single FeatureNode as a proper React Flow node (with node wrapper + pointer events). */
 function FeatureNodeCanvas({ data, style = { width: 600, height: 400 }, }) {
     const nodes = useMemo(() => [{ id: 'node-1', type: 'featureNode', position: { x: 0, y: 0 }, data }], [data]);
-    return (_jsx("div", { style: style, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+    return (_jsx("div", { style: style, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, panOnDrag: false, zoomOnScroll: false, proOptions: { hideAttribution: true }, fitView: true, className: "[&_.react-flow__pane]:!cursor-default" }) }) }));
 }
 const meta = {
     title: 'Composed/FeatureNode',
@@ -19,10 +19,17 @@ const meta = {
     args: {
         name: 'Auth Module',
         description: 'Implement OAuth2 authentication flow',
-        featureId: '#f1',
-        lifecycle: 'requirements',
+        featureId: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+        lifecycle: 'implementation',
         state: 'running',
         progress: 45,
+        agentType: 'claude-code',
+        modelId: 'claude-sonnet-4-6',
+        repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
+        branch: 'feat/auth-module',
+        hasAgentRun: true,
+        hasPlan: true,
     },
 };
 export default meta;
@@ -32,66 +39,92 @@ export const Default = {
 const allStatesData = [
     {
         name: 'User Onboarding',
-        description: 'Implement guided onboarding wizard',
+        description: 'Implement guided onboarding wizard with step-by-step tutorial',
         featureId: '',
         lifecycle: 'requirements',
         state: 'creating',
         progress: 0,
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: '',
     },
     {
         name: 'Auth Module',
-        description: 'Implement OAuth2 authentication flow',
-        featureId: '#f1',
+        description: 'Implement OAuth2 authentication flow with SSO support',
+        featureId: '11111111-1111-1111-1111-111111111111',
         lifecycle: 'implementation',
         state: 'running',
         progress: 45,
         agentType: 'claude-code',
         modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/auth-module',
+        worktreePath: '/home/user/.shep/repos/abc123/wt/feat-auth-module',
+        hasAgentRun: true,
+        hasPlan: true,
+        deployment: { status: DeploymentState.Ready, url: 'http://localhost:3001' },
     },
     {
         name: 'API Rate Limiting',
-        description: 'Implement sliding window rate limiting for public...',
-        featureId: '#bi1',
+        description: 'Implement sliding window rate limiting for public endpoints',
+        featureId: '22222222-2222-2222-2222-222222222222',
         lifecycle: 'requirements',
         state: 'action-required',
         progress: 22,
         agentType: 'claude-code',
         modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/api-rate-limiting',
+        worktreePath: '/home/user/.shep/repos/abc123/wt/feat-api-rate-limiting',
+        hasAgentRun: true,
+        hasPlan: true,
     },
     {
         name: 'Data Pipeline',
         description: 'ETL pipeline for analytics dashboard',
-        featureId: '#bi2',
+        featureId: '33333333-3333-3333-3333-333333333333',
         lifecycle: 'implementation',
         state: 'action-required',
         progress: 40,
         agentType: 'cursor',
         modelId: 'claude-opus-4-6',
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/data-pipeline',
+        worktreePath: '/home/user/.shep/repos/abc123/wt/feat-data-pipeline',
+        hasAgentRun: true,
+        hasPlan: true,
+        deployment: { status: DeploymentState.Booting },
     },
     {
         name: 'Merge Review',
         description: 'PR ready for merge approval',
-        featureId: '#bi3',
+        featureId: '44444444-4444-4444-4444-444444444444',
         lifecycle: 'review',
         state: 'action-required',
         progress: 90,
         agentType: 'gemini-cli',
         modelId: 'gemini-2.5-pro',
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/merge-review',
+        worktreePath: '/home/user/.shep/repos/abc123/wt/feat-merge-review',
+        hasAgentRun: true,
+        hasPlan: true,
+        pr: {
+            url: 'https://github.com/user/my-repo/pull/87',
+            number: 87,
+            status: PrStatus.Open,
+            ciStatus: CiStatus.Success,
+            mergeable: true,
+        },
     },
     {
         name: 'Payment Gateway',
         description: 'Stripe integration for subscriptions',
-        featureId: '#f3',
+        featureId: '55555555-5555-5555-5555-555555555555',
         lifecycle: 'deploy',
         state: 'done',
         progress: 100,
@@ -99,12 +132,24 @@ const allStatesData = [
         agentType: 'claude-code',
         modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/payment-gateway',
+        worktreePath: '/home/user/.shep/repos/abc123/wt/feat-payment-gateway',
+        fastMode: true,
+        hasAgentRun: true,
+        hasPlan: true,
+        pr: {
+            url: 'https://github.com/user/my-repo/pull/85',
+            number: 85,
+            status: PrStatus.Merged,
+            ciStatus: CiStatus.Success,
+        },
+        deployment: { status: DeploymentState.Ready, url: 'http://localhost:3002' },
     },
     {
         name: 'Search Index',
         description: 'Elasticsearch full-text search setup',
-        featureId: '#f4',
+        featureId: '66666666-6666-6666-6666-666666666666',
         lifecycle: 'implementation',
         state: 'blocked',
         progress: 20,
@@ -112,40 +157,61 @@ const allStatesData = [
         agentType: 'claude-code',
         modelId: 'claude-opus-4-6',
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/search-index',
+        worktreePath: '/home/user/.shep/repos/abc123/wt/feat-search-index',
+        hasAgentRun: true,
+        hasPlan: true,
     },
     {
         name: 'Email Service',
         description: 'Transactional email with SendGrid',
-        featureId: '#f5',
+        featureId: '77777777-7777-7777-7777-777777777777',
         lifecycle: 'review',
         state: 'error',
         progress: 30,
-        errorMessage: 'Build failed: type mismatch',
-        agentType: 'dev',
-        modelId: 'gpt-8',
+        errorMessage: 'Build failed: Cannot find module @sendgrid/mail',
+        agentType: 'aider',
+        modelId: 'claude-sonnet-4-6',
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/email-service',
+        worktreePath: '/home/user/.shep/repos/abc123/wt/feat-email-service',
+        hasAgentRun: true,
+        hasPlan: true,
+        pr: {
+            url: 'https://github.com/user/my-repo/pull/86',
+            number: 86,
+            status: PrStatus.Open,
+            ciStatus: CiStatus.Failure,
+        },
+        onRetry: fn(),
     },
     {
         name: 'Notification Service',
         description: 'Push notification integration',
-        featureId: '#f7',
+        featureId: '88888888-8888-8888-8888-888888888888',
         lifecycle: 'pending',
         state: 'pending',
         progress: 0,
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/notification-service',
+        onStart: fn(),
     },
     {
         name: 'Legacy API Cleanup',
         description: 'Remove deprecated REST endpoints',
-        featureId: '#f6',
+        featureId: '99999999-9999-9999-9999-999999999999',
         lifecycle: 'implementation',
         state: 'deleting',
         progress: 0,
         repositoryPath: '/home/user/my-repo',
+        repositoryName: 'my-repo',
         branch: 'feat/legacy-api-cleanup',
+        worktreePath: '/home/user/.shep/repos/abc123/wt/feat-legacy-api-cleanup',
+        agentType: 'claude-code',
+        hasAgentRun: true,
     },
 ];
 export const AllStates = {

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

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

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

@@ -71,15 +71,17 @@ export function RepositoryNode({ data }) {
                         e.stopPropagation();
                         data.onClick?.();
                     }
-                }, className: "nodrag bg-card flex w-[26rem] cursor-pointer flex-col overflow-hidden rounded-xl border shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx(Github, { className: "text-muted-foreground h-5 w-5 shrink-0" }), _jsx("span", { "data-testid": "repository-node-name", className: "min-w-0 truncate text-sm font-medium", children: data.name }), _jsxs("div", { className: cn('flex shrink-0 items-center gap-2', (data.repositoryPath ?? data.onAdd) && 'ml-auto'), onClick: (e) => e.stopPropagation(), children: [data.repositoryPath ? (_jsxs(_Fragment, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex items-center", children: _jsx(ActionButton, { label: "Open in IDE", onClick: actions.openInIde, loading: actions.ideLoading, error: !!actions.ideError, icon: Code2, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { children: "Open in IDE" })] }) }), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex items-center", children: _jsx(ActionButton, { label: "Open in Shell", onClick: actions.openInShell, loading: actions.shellLoading, error: !!actions.shellError, icon: Terminal, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { children: "Open in Shell" })] }) }), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex items-center", children: _jsx(ActionButton, { label: "Open Folder", onClick: actions.openFolder, loading: actions.folderLoading, error: !!actions.folderError, icon: FolderOpen, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { children: "Open Folder" })] }) }), _jsx(FeatureSessionsDropdown, { repositoryPath: data.repositoryPath, onCreateFromSession: handleCreateFromSession })] })) : null, data.onAdd ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Add feature", "data-testid": "repository-node-add-button", onClick: (e) => {
+                }, className: "nodrag bg-card flex w-[26rem] cursor-pointer flex-col overflow-hidden rounded-xl border shadow-sm dark:bg-neutral-800/80", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx(Github, { className: "text-muted-foreground h-5 w-5 shrink-0" }), _jsx("span", { "data-testid": "repository-node-name", className: "min-w-0 truncate text-sm font-medium", children: data.name }), _jsxs("div", { className: cn('flex shrink-0 items-center gap-2', (data.repositoryPath ?? data.onAdd) && 'ml-auto'), onClick: (e) => e.stopPropagation(), children: [data.repositoryPath ? (_jsxs(_Fragment, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex items-center", children: _jsx(ActionButton, { label: "Open in IDE", onClick: actions.openInIde, loading: actions.ideLoading, error: !!actions.ideError, icon: Code2, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { children: "Open in IDE" })] }) }), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex items-center", children: _jsx(ActionButton, { label: "Open in Shell", onClick: actions.openInShell, loading: actions.shellLoading, error: !!actions.shellError, icon: Terminal, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { children: "Open in Shell" })] }) }), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex items-center", children: _jsx(ActionButton, { label: "Open Folder", onClick: actions.openFolder, loading: actions.folderLoading, error: !!actions.folderError, icon: FolderOpen, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { children: "Open Folder" })] }) }), _jsx(FeatureSessionsDropdown, { repositoryPath: data.repositoryPath, onCreateFromSession: handleCreateFromSession })] })) : null, data.onAdd ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Add feature", "data-testid": "repository-node-add-button", onClick: (e) => {
                                                             e.stopPropagation();
                                                             data.onAdd?.();
                                                         }, className: cn('text-muted-foreground hover:bg-accent dark:hover:bg-accent/50 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:text-blue-500', data.pulseAdd &&
-                                                            'animate-pulse-cta bg-blue-100 text-blue-500 dark:bg-blue-900/40'), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Add feature" })] }) })) : null] })] }), data.branch ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "repository-node-git-info", className: "text-muted-foreground border-t px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-3 text-xs", children: [_jsxs("span", { className: "flex items-center gap-1 truncate", "data-testid": "repository-node-branch", children: [_jsx(GitBranch, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", children: data.branch })] }), data.behindCount != null && data.behindCount > 0 ? (_jsxs("span", { className: "flex shrink-0 items-center gap-1 whitespace-nowrap text-amber-500", "data-testid": "repository-node-behind", children: [_jsx(ArrowDown, { className: "h-3 w-3 shrink-0" }), data.behindCount, " behind"] })) : null] }) }), data.commitMessage ? (_jsx("div", { "data-testid": "repository-node-commit-info", className: "text-muted-foreground border-t px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx(GitCommitHorizontal, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", "data-testid": "repository-node-commit-message", children: data.commitMessage }), data.committer ? (_jsxs("span", { className: "text-muted-foreground/70 ml-auto flex shrink-0 items-center gap-1", "data-testid": "repository-node-committer", children: [_jsx(User, { className: "h-3 w-3 shrink-0" }), _jsx("span", { children: data.committer })] })) : null] }) })) : null] })) : data.gitInfoStatus === 'not-a-repo' ? (
+                                                            'animate-pulse-cta bg-blue-100 text-blue-500 dark:bg-blue-900/40'), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Add feature" })] }) })) : null] })] }), data.branch ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "repository-node-git-info", className: "text-muted-foreground border-border/50 border-t px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-3 text-xs", children: [_jsxs("span", { className: "flex items-center gap-1 truncate", "data-testid": "repository-node-branch", children: [_jsx(GitBranch, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", children: data.branch })] }), data.behindCount != null && data.behindCount > 0 ? (_jsxs("span", { className: "flex shrink-0 items-center gap-1 whitespace-nowrap text-amber-500", "data-testid": "repository-node-behind", children: [_jsx(ArrowDown, { className: "h-3 w-3 shrink-0" }), data.behindCount, " behind"] })) : null] }) }), data.commitMessage ? (_jsx("div", { "data-testid": "repository-node-commit-info", className: "text-muted-foreground border-border/50 border-t px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx(GitCommitHorizontal, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", "data-testid": "repository-node-commit-message", children: data.commitMessage }), data.committer ? (_jsxs("span", { className: "text-muted-foreground/70 ml-auto flex shrink-0 items-center gap-1", "data-testid": "repository-node-committer", children: [_jsx(User, { className: "h-3 w-3 shrink-0" }), _jsx("span", { children: data.committer })] })) : null] }) })) : null] })) : data.gitInfoStatus === 'not-a-repo' ? (
                     /* Not a git repo — two rows for consistency with loading/ready states */
-                    _jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "repository-node-not-repo", className: "text-muted-foreground border-t px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx(FolderOpen, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "min-w-0 truncate opacity-60", children: data.repositoryPath ?? 'Unknown path' })] }) }), _jsx("div", { className: "text-muted-foreground border-t px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs opacity-40", children: [_jsx(GitBranch, { className: "h-3 w-3 shrink-0" }), _jsx("span", { children: "Not a git repository" })] }) })] })) : data.gitInfoStatus !== 'ready' ? (
+                    _jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "repository-node-not-repo", className: "text-muted-foreground border-border/50 border-t px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx(FolderOpen, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "min-w-0 truncate opacity-60", children: data.repositoryPath ?? 'Unknown path' })] }) }), _jsx("div", { className: "text-muted-foreground border-border/50 border-t px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs opacity-40", children: [_jsx(GitBranch, { className: "h-3 w-3 shrink-0" }), _jsx("span", { children: "Not a git repository" })] }) })] })) : data.gitInfoStatus !== 'ready' ? (
                     /* Loading — show skeleton placeholders for both rows */
-                    _jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "repository-node-git-loading", className: "border-t px-4 py-2", children: _jsxs("div", { className: "flex h-4 items-center gap-2 text-xs", children: [_jsx(GitBranch, { className: "text-muted-foreground h-3 w-3 shrink-0" }), _jsx("span", { className: "bg-muted h-3 w-20 animate-pulse rounded" })] }) }), _jsx("div", { className: "border-t px-4 py-2", children: _jsxs("div", { className: "flex h-4 items-center gap-2 text-xs", children: [_jsx(GitCommitHorizontal, { className: "text-muted-foreground h-3 w-3 shrink-0" }), _jsx("span", { className: "bg-muted h-3 w-36 animate-pulse rounded" })] }) })] })) : null, featureFlags.envDeploy && data.repositoryPath ? (_jsx("div", { "data-testid": "repository-node-dev-preview", className: "border-t px-4 py-2", onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [deployAction.deployError ? (_jsx("span", { className: "truncate text-xs text-red-500", children: deployAction.deployError })) : isDeploymentActive ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "mr-0.5 inline-block h-2 w-2 shrink-0 rounded-full bg-green-500" }), deployAction.url ? (_jsx("a", { href: deployAction.url, target: "_blank", rel: "noopener noreferrer", className: "truncate text-green-700 hover:underline dark:text-green-400", children: deployAction.url })) : (_jsx("span", { className: "text-muted-foreground", children: "Starting..." }))] })) : (_jsxs("span", { className: "text-muted-foreground", children: ["Run", _jsx("span", { className: "text-muted-foreground/50 ml-2 text-[10px]", children: "start local environment" })] })), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "ml-auto flex items-center", children: _jsx(ActionButton, { label: deployAction.deployError
+                    _jsxs(_Fragment, { children: [_jsx("div", { "data-testid": "repository-node-git-loading", className: "border-border/50 border-t px-4 py-2", children: _jsxs("div", { className: "flex h-4 items-center gap-2 text-xs", children: [_jsx(GitBranch, { className: "text-muted-foreground h-3 w-3 shrink-0" }), _jsx("span", { className: "bg-muted h-3 w-20 animate-pulse rounded" })] }) }), _jsx("div", { className: "border-border/50 border-t px-4 py-2", children: _jsxs("div", { className: "flex h-4 items-center gap-2 text-xs", children: [_jsx(GitCommitHorizontal, { className: "text-muted-foreground h-3 w-3 shrink-0" }), _jsx("span", { className: "bg-muted h-3 w-36 animate-pulse rounded" })] }) })] })) : null, featureFlags.envDeploy && data.repositoryPath ? (_jsx("div", { "data-testid": "repository-node-dev-preview", className: "border-border/50 border-t px-4 py-2", onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [deployAction.deployError ? (_jsx("span", { className: "truncate text-xs text-red-500", children: deployAction.deployError })) : isDeploymentActive ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "mr-0.5 inline-block h-2 w-2 shrink-0 rounded-full bg-green-500" }), deployAction.url ? (_jsx("a", { href: deployAction.url, target: "_blank", rel: "noopener noreferrer", className: "truncate text-green-700 hover:underline dark:text-green-400", children: deployAction.url })) : (_jsx("span", { className: "text-muted-foreground", children: "Starting..." }))] })) : (_jsxs("span", { className: "text-muted-foreground", children: ["Run", _jsx("span", { className: "text-muted-foreground/50 ml-2 text-[10px]", children: "start local environment" })] })), _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: cn('ml-auto flex items-center', !isDeploymentActive &&
+                                                        !deployAction.deployError &&
+                                                        '[&_button]:text-green-600 [&_button]:hover:text-green-700 dark:[&_button]:text-green-400 dark:[&_button]:hover:text-green-300'), children: _jsx(ActionButton, { label: deployAction.deployError
                                                             ? 'Retry'
                                                             : isDeploymentActive
                                                                 ? 'Stop Dev Server'

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

@@ -1 +1 @@
-{"version":3,"file":"control-center-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,uBAAuB,CAAC,EACtC,kBAAkB,EAClB,SAAS,GACV,EAAE,4BAA4B,kDAuL9B"}
+{"version":3,"file":"control-center-empty-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,4BAA4B;IAC3C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,uBAAuB,CAAC,EACtC,kBAAkB,EAClB,SAAS,GACV,EAAE,4BAA4B,kDAmM9B"}

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

@@ -1,13 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from 'react';
-import { FolderOpen, Copy, Check, Loader2, CheckCircle2, AlertCircle, Terminal, ChevronDown, } from 'lucide-react';
+import { FolderOpen, Copy, Check, Loader2, CheckCircle2, AlertCircle, Terminal, ChevronDown, ExternalLink, } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
 import { ReactFileManagerDialog } from '../../common/react-file-manager-dialog/index.js';
 import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
 import { isAgentSetupComplete } from '../../../app/actions/agent-setup-flag.js';
 import { checkAgentAuth } from '../../../app/actions/check-agent-auth.js';
+import { checkToolStatus } from '../../../app/actions/check-tool-status.js';
 import { WelcomeAgentSetup } from './welcome-agent-setup.js';
 const commands = ['cd ~/my-repo', 'shep feat new "sleek dashboard"'];
 export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
@@ -17,6 +18,7 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     const [agentReady, setAgentReady] = useState(null);
     const [authStatus, setAuthStatus] = useState(null);
     const [cliExpanded, setCliExpanded] = useState(false);
+    const [toolStatus, setToolStatus] = useState(null);
     const { reactFileManager: useReactFileManager } = useFeatureFlags();
     useEffect(() => {
         isAgentSetupComplete().then((done) => {
@@ -27,6 +29,7 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
         if (!agentReady)
             return;
         checkAgentAuth().then(setAuthStatus);
+        checkToolStatus().then(setToolStatus);
     }, [agentReady]);
     async function handlePickerClick() {
         if (loading)
@@ -74,7 +77,7 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
             /* Agent setup wizard — owns its own hero */
             _jsx(WelcomeAgentSetup, { onComplete: handleAgentSetupComplete })) : (
             /* Repository step — fade in to match wizard transitions */
-            _jsxs("div", { className: "animate-in fade-in flex w-full max-w-md flex-col items-center duration-300", children: [_jsx("h1", { className: "text-foreground/90 text-center text-5xl font-extralight tracking-tight", children: "Add a project" }), _jsxs("p", { className: "text-muted-foreground mt-3 text-center text-lg leading-relaxed font-light", children: ["Add your project folder to unlock feature creation.", _jsx("br", {}), "Describe what you need \u2014 Shep handles the rest."] }), _jsx("div", { className: "mt-8", children: _jsx(AgentAuthBanner, { status: authStatus, onRetry: handleRetryAuth }) }), _jsxs("button", { type: "button", "data-testid": "empty-state-add-repository", onClick: handlePickerClick, disabled: loading, className: "bg-foreground text-background hover:bg-foreground/90 mt-10 flex w-full cursor-pointer items-center justify-center gap-2.5 rounded-xl px-6 py-4 text-base font-medium shadow-lg transition-all duration-200 hover:shadow-xl active:scale-[0.98] disabled:cursor-wait disabled:opacity-50", children: [loading ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsx(FolderOpen, { className: "h-5 w-5" })), loading ? 'Opening…' : 'Choose a Folder'] }), _jsx("p", { className: "text-muted-foreground/60 mt-3 text-center text-sm", children: "Any folder works \u2014 git will be initialized automatically if needed." })] })), agentReady ? (_jsxs("div", { className: "absolute bottom-8 flex flex-col items-center", style: {
+            _jsxs("div", { className: "animate-in fade-in flex w-full max-w-md flex-col items-center duration-300", children: [_jsx("h1", { className: "text-foreground/90 text-center text-5xl font-extralight tracking-tight", children: "Add a project" }), _jsxs("p", { className: "text-muted-foreground mt-3 text-center text-lg leading-relaxed font-light", children: ["Add your project folder to unlock feature creation.", _jsx("br", {}), "Describe what you need \u2014 Shep handles the rest."] }), _jsxs("div", { className: "mt-8 flex w-full flex-col gap-3", children: [_jsx(AgentAuthBanner, { status: authStatus, onRetry: handleRetryAuth }), _jsx(ToolStatusRow, { label: "Git", status: toolStatus?.git ?? null, missingHint: "Required for all phases" }), _jsx(ToolStatusRow, { label: "GitHub CLI", status: toolStatus?.gh ?? null, missingHint: "Required for pull requests" })] }), _jsxs("button", { type: "button", "data-testid": "empty-state-add-repository", onClick: handlePickerClick, disabled: loading, className: "bg-foreground text-background hover:bg-foreground/90 mt-10 flex w-full cursor-pointer items-center justify-center gap-2.5 rounded-xl px-6 py-4 text-base font-medium shadow-lg transition-all duration-200 hover:shadow-xl active:scale-[0.98] disabled:cursor-wait disabled:opacity-50", children: [loading ? (_jsx(Loader2, { className: "h-5 w-5 animate-spin" })) : (_jsx(FolderOpen, { className: "h-5 w-5" })), loading ? 'Opening…' : 'Choose a Folder'] }), _jsx("p", { className: "text-muted-foreground/60 mt-3 text-center text-sm", children: "Any folder works \u2014 git will be initialized automatically if needed." })] })), agentReady ? (_jsxs("div", { className: "absolute bottom-8 flex flex-col items-center", style: {
                     animationDelay: '400ms',
                     animationDuration: '600ms',
                     animationFillMode: 'both',
@@ -83,24 +86,47 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
                         setShowReactPicker(false);
                 }, onSelect: handleReactPickerSelect })] }));
 }
-/** Inline status pill — minimal, no background box */
+/** Status row for the AI agent (Claude Code, etc.) */
 function AgentAuthBanner({ status, onRetry, }) {
     if (!status) {
-        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Loader2, { className: "text-muted-foreground/50 h-3.5 w-3.5 animate-spin" }), _jsx("span", { className: "text-muted-foreground/50 text-sm", children: "Checking setup\u2026" })] }));
+        return (_jsx(ChecklistRow, { icon: _jsx(Loader2, { className: "text-muted-foreground/50 h-4 w-4 animate-spin" }), children: _jsx("span", { className: "text-muted-foreground/50 text-sm", children: "Checking setup\u2026" }) }));
     }
     if (status.installed && status.authenticated) {
-        return (_jsxs("div", { className: "animate-in fade-in flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500" }), _jsxs("span", { className: "text-sm text-emerald-600 dark:text-emerald-400", children: [status.label, " ready"] })] }));
+        return (_jsx(ChecklistRow, { icon: _jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500" }), children: _jsxs("span", { className: "text-sm text-emerald-600 dark:text-emerald-400", children: [status.label, " ready"] }) }));
     }
     if (!status.installed) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), _jsxs("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: [status.label, " not installed"] })] }), status.binaryName ? (_jsxs("code", { className: "rounded-lg bg-zinc-100 px-3 py-1.5 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400", children: ["npm install -g ", status.binaryName] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: "Re-check" })] }));
+        return (_jsxs(ChecklistRow, { icon: _jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), children: [_jsxs("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: [status.label, " not installed"] }), status.installCommand ? _jsx(CopyableCommand, { command: status.installCommand }) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: "Re-check" })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), _jsxs("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: [status.label, " needs authentication"] })] }), status.authCommand ? (_jsx("code", { className: "rounded-lg bg-zinc-100 px-3 py-1.5 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400", children: status.authCommand })) : null, _jsxs("div", { className: "flex items-center gap-3", children: [status.binaryName ? (_jsxs("button", { type: "button", "data-testid": "auth-banner-open-terminal", onClick: async () => {
+    return (_jsxs(ChecklistRow, { icon: _jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), children: [_jsxs("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: [status.label, " needs authentication"] }), status.authCommand ? _jsx(CopyableCommand, { command: status.authCommand }) : null, _jsxs("div", { className: "flex items-center gap-3", children: [status.binaryName ? (_jsxs("button", { type: "button", "data-testid": "auth-banner-open-terminal", onClick: async () => {
                             try {
                                 const toolId = status.agentType === 'claude-code' ? 'claude-code' : status.agentType;
                                 await fetch(`/api/tools/${toolId}/launch`, { method: 'POST' });
                             }
                             catch {
-                                // best effort
+                                /* best effort */
                             }
-                        }, className: "flex items-center gap-1.5 text-xs font-medium text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: [_jsx(Terminal, { className: "h-3 w-3" }), "Open ", status.label] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: "Re-check" })] })] }));
+                        }, className: "flex items-center gap-1 text-xs font-medium text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: [_jsx(Terminal, { className: "h-3 w-3" }), "Open ", status.label] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: "Re-check" })] })] }));
+}
+/** Status row for system tools (git, gh) */
+function ToolStatusRow({ label, status, missingHint, }) {
+    if (!status) {
+        return (_jsx(ChecklistRow, { icon: _jsx(Loader2, { className: "text-muted-foreground/50 h-4 w-4 animate-spin" }), children: _jsxs("span", { className: "text-muted-foreground/50 text-sm", children: ["Checking ", label, "\u2026"] }) }));
+    }
+    if (status.installed) {
+        return (_jsx(ChecklistRow, { icon: _jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500" }), children: _jsxs("span", { className: "flex items-baseline gap-2", children: [_jsxs("span", { className: "text-sm text-emerald-600 dark:text-emerald-400", children: [label, " ready"] }), status.version ? (_jsxs("span", { className: "text-muted-foreground/40 text-xs", children: ["v", status.version] })) : null] }) }));
+    }
+    return (_jsxs(ChecklistRow, { icon: _jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" }), children: [_jsxs("span", { className: "text-sm font-medium text-amber-600 dark:text-amber-400", children: [label, " not found"] }), _jsx("span", { className: "text-muted-foreground/50 text-xs", children: missingHint }), status.installCommand ? _jsx(CopyableCommand, { command: status.installCommand }) : null, status.installUrl ? (_jsxs("a", { href: status.installUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-xs text-amber-600 underline underline-offset-2 hover:text-amber-800 dark:text-amber-400", children: ["Docs ", _jsx(ExternalLink, { className: "h-3 w-3" })] })) : null] }));
+}
+/** Checklist row: icon pinned left, children stacked vertically and fill width */
+function ChecklistRow({ icon, children }) {
+    return (_jsxs("div", { className: "animate-in fade-in flex items-start gap-2.5", children: [_jsx("div", { className: "mt-0.5 shrink-0", children: icon }), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: children })] }));
+}
+/** Compact copyable command block — fills available row width */
+function CopyableCommand({ command }) {
+    const [copied, setCopied] = useState(false);
+    return (_jsxs("button", { type: "button", onClick: async () => {
+            await navigator.clipboard.writeText(command);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }, className: "group/cmd flex cursor-pointer items-center justify-between gap-2 rounded-md bg-zinc-100 py-1 pr-2 pl-2.5 text-left transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:hover:bg-zinc-700", children: [_jsx("code", { className: "min-w-0 truncate text-[11px] leading-relaxed text-zinc-600 dark:text-zinc-300", children: command }), copied ? (_jsx(Check, { className: "h-3 w-3 shrink-0 text-emerald-500" })) : (_jsx(Copy, { className: "h-3 w-3 shrink-0 text-zinc-400 opacity-0 transition-opacity group-hover/cmd:opacity-100" }))] }));
 }

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

@@ -3,6 +3,22 @@ import { ControlCenterEmptyState } from './control-center-empty-state.js';
 declare const meta: Meta<typeof ControlCenterEmptyState>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+/** All tools installed — the happy path */
+export declare const AllToolsReady: Story;
+/** Git is missing — blocks all workflow phases */
+export declare const GitMissing: Story;
+/** GitHub CLI is missing — PR features unavailable */
+export declare const GhCliMissing: Story;
+/** Both git and gh are missing */
+export declare const BothToolsMissing: Story;
+/** Claude Code not installed */
+export declare const ClaudeCodeNotInstalled: Story;
+/** Cursor CLI not installed */
+export declare const CursorCliNotInstalled: Story;
+/** Gemini CLI not installed */
+export declare const GeminiCliNotInstalled: Story;
+/** Agent not installed + tools missing — worst case */
+export declare const EverythingMissing: Story;
+/** With callback — for interaction testing */
 export declare const WithCallback: Story;
 //# sourceMappingURL=control-center-empty-state.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-center-empty-state.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,uBAAuB,CAc9C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC"}
+{"version":3,"file":"control-center-empty-state.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-empty-state.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,uBAAuB,CAc9C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA+FnC,2CAA2C;AAC3C,eAAO,MAAM,aAAa,EAAE,KAG3B,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,UAAU,EAAE,KAGxB,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,EAAE,KAG9B,CAAC;AAEF,gCAAgC;AAChC,eAAO,MAAM,sBAAsB,EAAE,KAGpC,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,qBAAqB,EAAE,KAGnC,CAAC;AAEF,+BAA+B;AAC/B,eAAO,MAAM,qBAAqB,EAAE,KAGnC,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,iBAAiB,EAAE,KAG/B,CAAC;AAEF,8CAA8C;AAC9C,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC"}

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

@@ -12,9 +12,118 @@ const meta = {
     ],
 };
 export default meta;
-export const Default = {
+const agentReady = {
+    agentType: 'claude-code',
+    installed: true,
+    authenticated: true,
+    label: 'Claude Code',
+    binaryName: 'claude',
+    installCommand: 'curl -fsSL https://claude.ai/install.sh | bash',
+    authCommand: null,
+};
+const claudeNotInstalled = {
+    agentType: 'claude-code',
+    installed: false,
+    authenticated: false,
+    label: 'Claude Code',
+    binaryName: 'claude',
+    installCommand: 'curl -fsSL https://claude.ai/install.sh | bash',
+    authCommand: 'Install Claude Code first',
+};
+const cursorNotInstalled = {
+    agentType: 'cursor',
+    installed: false,
+    authenticated: false,
+    label: 'Cursor CLI',
+    binaryName: 'cursor-agent',
+    installCommand: 'curl https://cursor.com/install -fsS | bash',
+    authCommand: 'Install Cursor CLI first',
+};
+const geminiNotInstalled = {
+    agentType: 'gemini-cli',
+    installed: false,
+    authenticated: false,
+    label: 'Gemini CLI',
+    binaryName: 'gemini',
+    installCommand: 'npm install -g @google/gemini-cli',
+    authCommand: 'Install Gemini CLI first',
+};
+const gitReady = {
+    installed: true,
+    version: '2.43.0',
+    installCommand: 'sudo apt-get install -y git',
+    installUrl: 'https://git-scm.com',
+};
+const gitMissing = {
+    installed: false,
+    version: null,
+    installCommand: 'sudo apt-get install -y git',
+    installUrl: 'https://git-scm.com',
+};
+const ghReady = {
+    installed: true,
+    version: '2.40.1',
+    installCommand: 'sudo apt install gh -y',
+    installUrl: 'https://cli.github.com',
+};
+const ghMissing = {
+    installed: false,
+    version: null,
+    installCommand: 'sudo apt install gh -y',
+    installUrl: 'https://cli.github.com',
+};
+function setMocks(agent, git, gh) {
+    return () => {
+        const win = globalThis;
+        win.__mockAgentAuth = agent;
+        win.__mockToolStatus = { git, gh };
+        return () => {
+            delete win.__mockAgentAuth;
+            delete win.__mockToolStatus;
+        };
+    };
+}
+/** All tools installed — the happy path */
+export const AllToolsReady = {
+    args: {},
+    beforeEach: setMocks(agentReady, gitReady, ghReady),
+};
+/** Git is missing — blocks all workflow phases */
+export const GitMissing = {
+    args: {},
+    beforeEach: setMocks(agentReady, gitMissing, ghReady),
+};
+/** GitHub CLI is missing — PR features unavailable */
+export const GhCliMissing = {
+    args: {},
+    beforeEach: setMocks(agentReady, gitReady, ghMissing),
+};
+/** Both git and gh are missing */
+export const BothToolsMissing = {
+    args: {},
+    beforeEach: setMocks(agentReady, gitMissing, ghMissing),
+};
+/** Claude Code not installed */
+export const ClaudeCodeNotInstalled = {
+    args: {},
+    beforeEach: setMocks(claudeNotInstalled, gitReady, ghReady),
+};
+/** Cursor CLI not installed */
+export const CursorCliNotInstalled = {
+    args: {},
+    beforeEach: setMocks(cursorNotInstalled, gitReady, ghReady),
+};
+/** Gemini CLI not installed */
+export const GeminiCliNotInstalled = {
+    args: {},
+    beforeEach: setMocks(geminiNotInstalled, gitReady, ghReady),
+};
+/** Agent not installed + tools missing — worst case */
+export const EverythingMissing = {
     args: {},
+    beforeEach: setMocks(claudeNotInstalled, gitMissing, ghMissing),
 };
+/** With callback — for interaction testing */
 export const WithCallback = {
     args: {
         onRepositorySelect: (path) => {

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMvF,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAElE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,QAAQ,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAmBD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CA2HrB"}
+{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAMvF,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAG9E,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,CAAC;AAElE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,QAAQ,CAAC;IACjC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAmBD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CA4HrB"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -60,5 +60,5 @@ export function FeaturesCanvas({ nodes, edges, selectedFeatureId, defaultViewpor
     }, [isEmpty]);
     const fallbackEmptyState = isEmpty && !emptyState ? (_jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) })) : null;
     const overlayContent = emptyState ?? fallbackEmptyState;
-    return (_jsxs("div", { "data-testid": isEmpty ? 'features-canvas-empty' : 'features-canvas', "data-no-drawer-close": true, className: "dark:bg-background pointer-events-auto relative h-full w-full bg-[#f6f7f8]", children: [_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1, color: "#b8bcc4", className: "dark:[&_circle]:!fill-white/[0.1]" }), !isEmpty && (_jsx(Controls, { showInteractive: false, children: onResetViewport ? _jsx(ResetButton, { onResetViewport: onResetViewport }) : null })), toolbar] }), showOverlay && overlayContent ? (_jsx("div", { className: cn('pointer-events-none absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300', overlayExiting ? 'opacity-0' : 'animate-in fade-in opacity-100 duration-200'), children: _jsx("div", { className: "pointer-events-auto h-full w-full", children: overlayContent }) })) : null] }));
+    return (_jsxs("div", { "data-testid": isEmpty ? 'features-canvas-empty' : 'features-canvas', "data-no-drawer-close": true, className: "dark:bg-background pointer-events-auto relative h-full w-full bg-[#f6f7f8]", children: [_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, className: "[&_.react-flow__pane]:!cursor-default", children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1, color: "#b8bcc4", className: "dark:[&_circle]:!fill-white/[0.1]" }), !isEmpty && (_jsx(Controls, { showInteractive: false, children: onResetViewport ? _jsx(ResetButton, { onResetViewport: onResetViewport }) : null })), toolbar] }), showOverlay && overlayContent ? (_jsx("div", { className: cn('pointer-events-none absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300', overlayExiting ? 'opacity-0' : 'animate-in fade-in opacity-100 duration-200'), children: _jsx("div", { className: "pointer-events-auto h-full w-full", children: overlayContent }) })) : null] }));
 }

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

@@ -17,4 +17,5 @@ export declare const InteractiveWithRepository: Story;
 export declare const WithSavedViewport: Story;
 export declare const ZoomedOutViewport: Story;
 export declare const FastModeFeatures: Story;
+export declare const FullSpectrum: Story;
 //# sourceMappingURL=features-canvas.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwKnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAoDF,eAAO,MAAM,mCAAmC,EAAE,KAKjD,CAAC;AA4BF,eAAO,MAAM,gCAAgC,EAAE,KAO9C,CAAC;AA0DF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAiDF,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC;AAqGF,eAAO,MAAM,oCAAoC,EAAE,KAKlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAMvC,CAAC;AAIF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAsEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC"}
+{"version":3,"file":"features-canvas.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAyNnC,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAoDF,eAAO,MAAM,mCAAmC,EAAE,KAKjD,CAAC;AA4BF,eAAO,MAAM,gCAAgC,EAAE,KAO9C,CAAC;AA0DF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAiDF,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC;AAqGF,eAAO,MAAM,oCAAoC,EAAE,KAKlD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAMvC,CAAC;AAIF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAsEF,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAC;AAoYF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}