@shepai/cli 1.122.2 → 1.123.0-pr396.ac74a97

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { ReactFlowProvider, ReactFlow } from '@xyflow/react';
 import { RepositoryNode } from './repository-node.js';
 const nodeTypes = { repositoryNode: RepositoryNode };
-function RepositoryNodeCanvas({ data, style = { width: 500, height: 250 }, }) {
+function RepositoryNodeCanvas({ data, style = { width: 550, height: 300 }, }) {
     const nodes = useMemo(() => [{ id: 'node-1', type: 'repositoryNode', 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 }) }) }));
 }
@@ -15,6 +15,9 @@ const meta = {
     },
     args: {
         name: 'shep-ai/cli',
+        branch: 'main',
+        commitMessage: 'feat: add dark mode toggle',
+        committer: 'Jane Doe',
     },
 };
 export default meta;
@@ -41,37 +44,84 @@ export const LongName = {
 };
 const onAdd = () => undefined;
 const multipleRepos = [
-    { name: 'shep-ai/cli' },
-    { name: 'vercel/edge-runtime' },
-    { name: 'acme-corp/web-dashboard-v2' },
-    { name: 'openai/tiktoken' },
+    {
+        name: 'shep-ai/cli',
+        branch: 'main',
+        commitMessage: 'feat: add dark mode toggle',
+        committer: 'Jane Doe',
+    },
+    {
+        name: 'vercel/edge-runtime',
+        branch: 'feat/streaming',
+        commitMessage: 'fix: handle edge cases in streaming',
+        committer: 'John Smith',
+        behindCount: 3,
+    },
+    {
+        name: 'acme-corp/web-dashboard-v2',
+        branch: 'develop',
+        commitMessage: 'chore: update dependencies',
+        committer: 'Bot',
+        behindCount: 12,
+    },
+    {
+        name: 'openai/tiktoken',
+        branch: 'main',
+        commitMessage: 'perf: optimize token encoding',
+        committer: 'Alice Chen',
+    },
 ];
 export const Multiple = {
     render: () => {
         const nodes = multipleRepos.map((data, i) => ({
             id: `repo-${i}`,
             type: 'repositoryNode',
-            position: { x: 0, y: i * 80 },
+            position: { x: 0, y: i * 140 },
             data,
         }));
-        return (_jsx("div", { style: { width: 500, height: 500 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+        return (_jsx("div", { style: { width: 600, height: 750 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
     },
 };
 const multipleReposWithButton = [
-    { name: 'shep-ai/cli', onAdd },
-    { name: 'vercel/edge-runtime', onAdd },
-    { name: 'acme-corp/web-dashboard-v2', onAdd },
-    { name: 'openai/tiktoken', onAdd },
+    {
+        name: 'shep-ai/cli',
+        onAdd,
+        branch: 'main',
+        commitMessage: 'feat: add dark mode toggle',
+        committer: 'Jane Doe',
+    },
+    {
+        name: 'vercel/edge-runtime',
+        onAdd,
+        branch: 'feat/streaming',
+        commitMessage: 'fix: handle edge cases in streaming',
+        committer: 'John Smith',
+        behindCount: 3,
+    },
+    {
+        name: 'acme-corp/web-dashboard-v2',
+        onAdd,
+        branch: 'develop',
+        commitMessage: 'chore: update dependencies',
+        committer: 'Bot',
+    },
+    {
+        name: 'openai/tiktoken',
+        onAdd,
+        branch: 'main',
+        commitMessage: 'perf: optimize token encoding',
+        committer: 'Alice Chen',
+    },
 ];
 export const MultipleWithButton = {
     render: () => {
         const nodes = multipleReposWithButton.map((data, i) => ({
             id: `repo-${i}`,
             type: 'repositoryNode',
-            position: { x: 0, y: i * 80 },
+            position: { x: 0, y: i * 140 },
             data,
         }));
-        return (_jsx("div", { style: { width: 500, height: 500 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+        return (_jsx("div", { style: { width: 600, height: 750 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
     },
 };
 export const WithPulseAdd = {
@@ -108,16 +158,29 @@ export const WithDeleteButton = {
     argTypes: {
         onDelete: { action: 'onDelete' },
     },
-    render: (args) => _jsx(RepositoryNodeCanvas, { data: args, style: { width: 550, height: 250 } }),
+    render: (args) => _jsx(RepositoryNodeCanvas, { data: args, style: { width: 600, height: 300 } }),
 };
 const multipleReposWithActions = [
-    { id: 'r1', name: 'shep-ai/cli', repositoryPath: '/home/user/shep-ai/cli', onAdd, onDelete },
+    {
+        id: 'r1',
+        name: 'shep-ai/cli',
+        repositoryPath: '/home/user/shep-ai/cli',
+        onAdd,
+        onDelete,
+        branch: 'main',
+        commitMessage: 'feat(web): enrich repository node with branch and commit info',
+        committer: 'Ariel Shadkhan',
+    },
     {
         id: 'r2',
         name: 'vercel/edge-runtime',
         repositoryPath: '/home/user/vercel/edge-runtime',
         onAdd,
         onDelete,
+        branch: 'feat/streaming-v2',
+        commitMessage: 'fix: handle edge cases in streaming response',
+        committer: 'John Smith',
+        behindCount: 5,
     },
     {
         id: 'r3',
@@ -125,6 +188,10 @@ const multipleReposWithActions = [
         repositoryPath: '/home/user/acme-corp/web-dashboard-v2',
         onAdd,
         onDelete,
+        branch: 'develop',
+        commitMessage: 'chore(deps): update all dependencies to latest',
+        committer: 'Renovate Bot',
+        behindCount: 23,
     },
     {
         id: 'r4',
@@ -132,6 +199,9 @@ const multipleReposWithActions = [
         repositoryPath: '/home/user/openai/tiktoken',
         onAdd,
         onDelete,
+        branch: 'main',
+        commitMessage: 'perf: optimize token encoding for large inputs',
+        committer: 'Alice Chen',
     },
 ];
 export const MultipleWithActions = {
@@ -139,9 +209,29 @@ export const MultipleWithActions = {
         const nodes = multipleReposWithActions.map((data, i) => ({
             id: `repo-${i}`,
             type: 'repositoryNode',
-            position: { x: 0, y: i * 80 },
+            position: { x: 0, y: i * 140 },
             data,
         }));
-        return (_jsx("div", { style: { width: 500, height: 500 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+        return (_jsx("div", { style: { width: 600, height: 800 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+    },
+};
+export const WithGitInfo = {
+    args: {
+        repositoryPath: '/home/user/shep-ai/cli',
+        branch: 'feat/repo-node-enrichment',
+        commitMessage: 'feat(web): enrich repository node with branch and commit info',
+        committer: 'Ariel Shadkhan',
+        behindCount: 0,
     },
+    render: (args) => _jsx(RepositoryNodeCanvas, { data: args }),
+};
+export const WithGitInfoBehind = {
+    args: {
+        repositoryPath: '/home/user/shep-ai/cli',
+        branch: 'feat/old-feature-branch',
+        commitMessage: 'fix: resolve merge conflict in auth module',
+        committer: 'Jane Doe',
+        behindCount: 7,
+    },
+    render: (args) => _jsx(RepositoryNodeCanvas, { data: args }),
 };

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":"AAqBA,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,kDA+I9B"}
+{"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":"AAoBA,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,kDA8J9B"}

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

@@ -1,7 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useEffect } from 'react';
-import { Github, Plus, TerminalSquare, Copy, Check, Loader2, CheckCircle2, AlertCircle, Terminal, } from 'lucide-react';
+import { FolderOpen, Copy, Check, Loader2, CheckCircle2, AlertCircle, Terminal, ChevronDown, } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
 import { isAgentSetupComplete } from '../../../app/actions/agent-setup-flag.js';
@@ -13,12 +13,12 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     const [loading, setLoading] = useState(false);
     const [agentReady, setAgentReady] = useState(null);
     const [authStatus, setAuthStatus] = useState(null);
+    const [cliExpanded, setCliExpanded] = useState(false);
     useEffect(() => {
         isAgentSetupComplete().then((done) => {
             setAgentReady(done);
         });
     }, []);
-    // Background auth check — runs after agent setup is complete
     useEffect(() => {
         if (!agentReady)
             return;
@@ -52,28 +52,28 @@ export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     }, []);
     if (agentReady === null)
         return null;
-    return (_jsx("div", { "data-testid": "control-center-empty-state", className: cn('flex flex-col items-center justify-center', className), children: _jsx("div", { className: "animate-in fade-in slide-in-from-bottom-2 w-96 rounded-2xl border border-white/30 bg-white/50 px-8 py-8 shadow-lg backdrop-blur-xl duration-300 dark:border-white/10 dark:bg-white/5", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsxs("div", { className: "mb-2 text-center", children: [_jsx("h1", { className: "text-xl font-bold tracking-tight", children: "Features" }), _jsx("p", { className: "text-muted-foreground text-sm font-light", children: "Control Center" })] }), !agentReady ? (
-                    /* Step 1: Agent setup */
-                    _jsx(WelcomeAgentSetup, { onComplete: handleAgentSetupComplete, className: "w-full" })) : (
-                    /* Step 2: Add repository (shown immediately after agent is configured) */
-                    _jsxs(_Fragment, { children: [_jsx(AgentAuthBanner, { status: authStatus, onRetry: handleRetryAuth }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx(Github, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Repositories" })] }), _jsxs("button", { type: "button", "data-testid": "empty-state-add-repository", onClick: handlePickerClick, disabled: loading, className: "border-border hover:border-foreground/40 flex w-full cursor-pointer items-center gap-2.5 rounded-md border border-dashed px-4 py-2.5 transition-colors disabled:cursor-wait disabled:opacity-50", children: [loading ? (_jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" })) : (_jsx(Plus, { className: "text-muted-foreground h-4 w-4" })), _jsx("span", { className: "text-xs font-medium", children: loading ? 'Opening…' : 'Add Repository' })] }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [_jsx("div", { className: "bg-border h-px w-10" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TerminalSquare, { className: "h-3 w-3" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Or via CLI" })] }), _jsx("div", { className: "bg-border h-px w-10" })] }), _jsxs("div", { "data-testid": "cli-code-block", className: "relative w-full rounded-md bg-zinc-900 px-3 py-2 font-mono text-[11px] text-zinc-300", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-2 right-2 cursor-pointer rounded p-1 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-300", "aria-label": "Copy commands", children: copied ? _jsx(Check, { className: "h-3 w-3" }) : _jsx(Copy, { className: "h-3 w-3" }) }), _jsx("div", { className: "space-y-0.5", children: commands.map((cmd) => (_jsxs("div", { className: "whitespace-nowrap", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), _jsx("span", { children: cmd })] }, cmd))) })] }), _jsx("p", { className: "text-muted-foreground text-[10px]", children: "Feature will appear on canvas once created" })] }))] }) }) }));
+    return (_jsxs("div", { "data-testid": "control-center-empty-state", className: cn('relative flex h-full w-full flex-col items-center justify-center px-8', className), children: [!agentReady ? (
+            /* 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: {
+                    animationDelay: '400ms',
+                    animationDuration: '600ms',
+                    animationFillMode: 'both',
+                }, children: [_jsxs("button", { type: "button", onClick: () => setCliExpanded(!cliExpanded), className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 transition-colors duration-200", children: [_jsx(Terminal, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-sm", children: "or use the CLI" }), _jsx(ChevronDown, { className: cn('h-3.5 w-3.5 transition-transform duration-200', cliExpanded ? '' : 'rotate-180') })] }), cliExpanded ? (_jsx("div", { className: "animate-in fade-in slide-in-from-top-1 mt-3 w-80 duration-200", children: _jsxs("div", { "data-testid": "cli-code-block", className: "relative rounded-xl bg-zinc-900 px-5 py-4 font-mono text-[13px] leading-relaxed text-zinc-400", children: [_jsx("button", { type: "button", "data-testid": "cli-code-block-copy", onClick: handleCopy, className: "absolute top-3 right-3 cursor-pointer rounded-md p-1.5 text-zinc-600 transition-colors hover:bg-zinc-800 hover:text-zinc-300", "aria-label": "Copy commands", children: copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-400" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) }), _jsx("div", { className: "space-y-1", children: commands.map((cmd) => (_jsxs("div", { className: "whitespace-nowrap", children: [_jsx("span", { className: "text-zinc-600 select-none", children: "$ " }), _jsx("span", { className: "text-zinc-300", children: cmd })] }, cmd))) })] }) })) : null] })) : null] }));
 }
-/** Compact auth status banner — shows checking/success/error states */
+/** Inline status pill — minimal, no background box */
 function AgentAuthBanner({ status, onRetry, }) {
-    // Still checking — show subtle spinner
     if (!status) {
-        return (_jsxs("div", { className: "bg-muted/50 flex w-full items-center gap-2 rounded-md px-3 py-1.5", children: [_jsx(Loader2, { className: "text-muted-foreground h-3 w-3 animate-spin" }), _jsx("span", { className: "text-muted-foreground text-[10px]", children: "Checking agent setup\u2026" })] }));
+        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" })] }));
     }
-    // All good — compact success, auto-fades
     if (status.installed && status.authenticated) {
-        return (_jsxs("div", { className: "animate-in fade-in flex w-full items-center gap-2 rounded-md bg-emerald-500/10 px-3 py-1.5", children: [_jsx(CheckCircle2, { className: "h-3 w-3 text-emerald-600 dark:text-emerald-400" }), _jsxs("span", { className: "text-[10px] text-emerald-700 dark:text-emerald-300", children: [status.label, " ready"] })] }));
+        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"] })] }));
     }
-    // Not installed
     if (!status.installed) {
-        return (_jsxs("div", { className: "flex w-full flex-col gap-2 rounded-md bg-amber-500/10 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-3 w-3 text-amber-600 dark:text-amber-400" }), _jsxs("span", { className: "text-[10px] font-medium text-amber-700 dark:text-amber-300", children: [status.label, " not installed"] })] }), status.binaryName ? (_jsxs("div", { className: "rounded bg-zinc-900 px-2 py-1 font-mono text-[10px] text-zinc-300", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), "npm install -g ", status.binaryName] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "self-start text-[10px] font-medium text-amber-700 underline underline-offset-2 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100", 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, " 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" })] }));
     }
-    // Installed but not authenticated
-    return (_jsxs("div", { className: "flex w-full flex-col gap-2 rounded-md bg-amber-500/10 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AlertCircle, { className: "h-3 w-3 text-amber-600 dark:text-amber-400" }), _jsxs("span", { className: "text-[10px] font-medium text-amber-700 dark:text-amber-300", children: [status.label, " needs authentication"] })] }), status.authCommand ? (_jsxs("div", { className: "rounded bg-zinc-900 px-2 py-1 font-mono text-[10px] text-zinc-300", children: [_jsx("span", { className: "text-zinc-500 select-none", children: "$ " }), status.authCommand] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [status.binaryName ? (_jsxs("button", { type: "button", "data-testid": "auth-banner-open-terminal", onClick: async () => {
+    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 () => {
                             try {
                                 const toolId = status.agentType === 'claude-code' ? 'claude-code' : status.agentType;
                                 await fetch(`/api/tools/${toolId}/launch`, { method: 'POST' });
@@ -81,5 +81,5 @@ function AgentAuthBanner({ status, onRetry, }) {
                             catch {
                                 // best effort
                             }
-                        }, className: "flex items-center gap-1 rounded border border-amber-600/30 px-2 py-0.5 text-[10px] font-medium text-amber-700 transition-colors hover:bg-amber-500/10 dark:text-amber-300", children: [_jsx(Terminal, { className: "h-2.5 w-2.5" }), "Open ", status.label] })) : null, _jsx("button", { type: "button", onClick: onRetry, className: "text-[10px] font-medium text-amber-700 underline underline-offset-2 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100", children: "Re-check" })] })] }));
+                        }, 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" })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAuB5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CA2UzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAGpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAuB5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAkWzF"}

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

@@ -27,8 +27,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const drawerTimerRef = useRef(null);
     const { defaultViewport, onMoveEnd: handleViewportChange, resetViewport, } = useViewportPersistence();
     const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleRetryFeature, handleStartFeature, handleStopFeature, handleDeleteRepository, createFeatureNode, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
-    // Publish sidebar features to context whenever feature node data changes
-    const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
+    // Publish sidebar features + repo state to context
+    const { setFeatures: setSidebarFeatures, setHasRepositories: setSidebarHasRepos } = useSidebarFeaturesContext();
     const featureNodes = useMemo(() => nodes.filter((n) => n.type === 'featureNode'), [nodes]);
     const sidebarKey = useMemo(() => {
         return featureNodes
@@ -119,21 +119,29 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             guardedNavigate(() => router.push('/'));
         }
     }, [router, pathname, guardedNavigate]);
+    // Shared: after adding first repo, center canvas and open create drawer
+    const focusAndOpenDrawer = useCallback((repoPath) => {
+        // Wait for next render so the repo node exists in the DOM
+        setTimeout(() => {
+            fitView(AUTO_FOCUS_OPTIONS);
+            // Open the create-feature drawer after the fitView animation completes
+            drawerTimerRef.current = setTimeout(() => {
+                guardedNavigate(() => router.push(`/create?repo=${encodeURIComponent(repoPath)}`));
+            }, AUTO_FOCUS_DRAWER_DELAY_MS);
+        }, 0);
+    }, [fitView, guardedNavigate, router]);
+    // Wrapper: add repo + auto-focus if canvas was empty
+    const addRepoAndFocus = useCallback((path) => {
+        const { wasEmpty, repoPath } = handleAddRepository(path);
+        if (wasEmpty) {
+            focusAndOpenDrawer(repoPath);
+        }
+    }, [handleAddRepository, focusAndOpenDrawer]);
     // Listen for global "add repository" events from the top bar button
     useEffect(() => {
         const handler = (e) => {
             const path = e.detail.path;
-            const { wasEmpty, repoPath } = handleAddRepository(path);
-            if (wasEmpty) {
-                // Wait for next render so the repo node exists in the DOM, then auto-focus
-                setTimeout(() => {
-                    fitView(AUTO_FOCUS_OPTIONS);
-                    // Open the create-feature drawer after the fitView animation completes
-                    drawerTimerRef.current = setTimeout(() => {
-                        guardedNavigate(() => router.push(`/create?repo=${encodeURIComponent(repoPath)}`));
-                    }, AUTO_FOCUS_DRAWER_DELAY_MS);
-                }, 0);
-            }
+            addRepoAndFocus(path);
         };
         window.addEventListener('shep:add-repository', handler);
         return () => {
@@ -142,7 +150,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 clearTimeout(drawerTimerRef.current);
             }
         };
-    }, [handleAddRepository, fitView, guardedNavigate, router]);
+    }, [addRepoAndFocus]);
     // Listen for create events from the create drawer (with real feature ID from server)
     useEffect(() => {
         const handler = (e) => {
@@ -212,6 +220,10 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         handleViewportChange(viewport);
     }, [handleViewportChange]);
     const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
+    // Publish repo state to sidebar context so AppShell can hide FAB during onboarding
+    useEffect(() => {
+        setSidebarHasRepos(hasRepositories);
+    }, [hasRepositories, setSidebarHasRepos]);
     // Debounced latch: prevent empty-state flicker during brief reconcile gaps
     // (e.g. stale poll momentarily drops repos), but allow the empty state to
     // return after a real delete once repos stay gone past the debounce window.
@@ -227,7 +239,9 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             setShowCanvas(true);
         }
         else if (showCanvas) {
-            // Repos gone — wait before showing empty state (debounce stale polls)
+            // Repos gone — clear saved viewport so next add starts centered,
+            // then wait before showing empty state (debounce stale polls)
+            resetViewport();
             latchTimerRef.current = setTimeout(() => {
                 setShowCanvas(false);
                 latchTimerRef.current = null;
@@ -237,7 +251,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             if (latchTimerRef.current)
                 clearTimeout(latchTimerRef.current);
         };
-    }, [hasRepositories, showCanvas]);
+    }, [hasRepositories, showCanvas, resetViewport]);
     // Pulse the "+" button when there's a single repo with no features and the
     // create-feature drawer is not open — draws attention to the next action.
     const isCreateDrawerOpen = pathname.startsWith('/create');
@@ -249,5 +263,5 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             return nodes;
         return nodes.map((n) => n.type === 'repositoryNode' ? { ...n, data: { ...n.data, pulseAdd: true } } : n);
     }, [nodes, isCreateDrawerOpen]);
-    return (_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, onResetViewport: resetViewport, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }));
+    return (_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? edges : [], selectedFeatureId: selectedFeatureId, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, onResetViewport: resetViewport, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: addRepoAndFocus }) }));
 }

package/dist/src/presentation/web/components/features/control-center/welcome-agent-setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcome-agent-setup.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/welcome-agent-setup.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAuNlF"}
+{"version":3,"file":"welcome-agent-setup.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/welcome-agent-setup.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CA4NlF"}

package/dist/src/presentation/web/components/features/control-center/welcome-agent-setup.js

@@ -1,15 +1,13 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { ChevronRight, ChevronLeft, Loader2, Bot } from 'lucide-react';
+import { ChevronLeft, Loader2 } from 'lucide-react';
 import { getAllAgentModels } from '../../../app/actions/get-all-agent-models.js';
 import { updateAgentAndModel } from '../../../app/actions/update-agent-and-model.js';
 import { getAgentTypeIcon } from '../../common/feature-node/agent-type-icons.js';
 import { getModelMeta } from '../../../lib/model-metadata.js';
 import { cn } from '../../../lib/utils.js';
 const STEPS = ['select-agent', 'select-model'];
-/** Fixed width for the wizard content area to prevent layout jumps */
-const WIZARD_WIDTH = 'w-72';
 export function WelcomeAgentSetup({ onComplete, className }) {
     const [groups, setGroups] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -25,7 +23,6 @@ export function WelcomeAgentSetup({ onComplete, className }) {
             .finally(() => setLoading(false));
     }, []);
     const activeGroup = selectedAgent ? groups.find((g) => g.agentType === selectedAgent) : null;
-    /** Animate step transition: fade out → change step → fade in */
     const transitionTo = useCallback((nextStep, setup) => {
         setTransitioning(true);
         setVisible(false);
@@ -46,14 +43,19 @@ export function WelcomeAgentSetup({ onComplete, className }) {
                 clearTimeout(timeoutRef.current);
         };
     }, []);
-    /** Save agent+model selection and complete the wizard */
     const saveAndComplete = useCallback(async (agentType, model) => {
         setSaving(true);
         try {
             await updateAgentAndModel(agentType, model);
-            onComplete();
+            // Fade out the entire wizard before handing off to the next view
+            setVisible(false);
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(() => {
+                onComplete();
+            }, 200);
         }
-        finally {
+        catch {
             setSaving(false);
         }
     }, [onComplete]);
@@ -65,7 +67,6 @@ export function WelcomeAgentSetup({ onComplete, className }) {
             });
         }
         else {
-            // No models — save immediately
             saveAndComplete(agentType, null);
         }
     }, [groups, transitionTo, saveAndComplete]);
@@ -82,19 +83,25 @@ export function WelcomeAgentSetup({ onComplete, className }) {
         }
     }, [step, transitionTo]);
     if (loading) {
-        return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex flex-col items-center justify-center gap-3', className), children: [_jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Loading agents\u2026" })] }));
+        return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex flex-col items-center justify-center gap-4', className), children: [_jsx(Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Loading agents\u2026" })] }));
     }
     const stepIndex = STEPS.indexOf(step);
-    return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex flex-col items-center gap-4', WIZARD_WIDTH, className), children: [_jsx("div", { className: "flex flex-col items-center gap-1", children: _jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [step === 'select-agent' && (_jsxs(_Fragment, { children: [_jsx(Bot, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: "Choose your agent" })] })), step === 'select-model' && activeGroup
-                            ? (() => {
-                                const AgentIcon = getAgentTypeIcon(activeGroup.agentType);
-                                return (_jsxs(_Fragment, { children: [_jsx(AgentIcon, { className: "h-3.5 w-3.5" }), _jsxs("span", { className: "text-[10px] font-semibold tracking-widest uppercase", children: [activeGroup.label, " \u2014 Pick a model"] })] }));
-                            })()
-                            : null] }) }), _jsx("div", { className: "flex w-full items-center gap-1", children: STEPS.map((s, i) => (_jsx("div", { className: cn('h-0.5 flex-1 rounded-full transition-colors duration-300', i <= stepIndex ? 'bg-foreground/60' : 'bg-muted') }, s))) }), _jsxs("div", { className: cn('flex w-full flex-col items-center transition-opacity duration-150', visible && !transitioning ? 'opacity-100' : 'opacity-0'), children: [step === 'select-agent' && (_jsx("div", { "data-testid": "agent-list", className: "flex w-full flex-col gap-1.5", children: groups.map((group) => {
-                            const GroupIcon = getAgentTypeIcon(group.agentType);
-                            return (_jsxs("button", { type: "button", disabled: saving, "data-testid": `agent-option-${group.agentType}`, className: "border-border hover:border-foreground/40 flex w-full cursor-pointer items-center gap-2.5 rounded-md border border-dashed px-4 py-2.5 transition-colors disabled:opacity-50", onClick: () => handleAgentSelect(group.agentType), children: [_jsx(GroupIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" }), _jsx("span", { className: "flex-1 text-left text-xs font-medium", children: group.label }), _jsx(ChevronRight, { className: "text-muted-foreground h-3 w-3" })] }, group.agentType));
-                        }) })), step === 'select-model' && activeGroup ? (_jsxs("div", { "data-testid": "model-list", className: "flex w-full flex-col gap-1.5", children: [_jsxs("button", { type: "button", disabled: saving, className: "text-muted-foreground hover:text-foreground mb-0.5 flex cursor-pointer items-center gap-1 self-start text-[10px] font-medium transition-colors", onClick: handleBack, children: [_jsx(ChevronLeft, { className: "h-3 w-3" }), "Back"] }), _jsx("div", { className: "flex max-h-48 w-full flex-col gap-1.5 overflow-y-auto", children: activeGroup.models.map((m) => {
-                                    const meta = getModelMeta(m.id);
-                                    return (_jsxs("button", { type: "button", disabled: saving, "data-testid": `model-option-${m.id}`, className: "border-border hover:border-foreground/40 flex w-full cursor-pointer items-center gap-2.5 rounded-md border border-dashed px-4 py-2.5 text-left transition-colors disabled:opacity-50", onClick: () => handleModelSelect(m.id), children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-xs font-medium", children: meta.displayName || m.displayName }), _jsx("span", { className: "text-muted-foreground text-[10px] leading-tight", children: meta.description || m.description })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-3 w-3 shrink-0" })] }, m.id));
-                                }) })] })) : null] })] }));
+    // Dynamic hero text per step
+    const heroTitle = step === 'select-agent' ? 'Choose your agent' : activeGroup ? `Pick a model` : 'Pick a model';
+    const heroSubtitle = step === 'select-agent'
+        ? 'Select the AI coding agent you want Shep to use.'
+        : activeGroup
+            ? `Choose which ${activeGroup.label} model to run.`
+            : '';
+    return (_jsxs("div", { "data-testid": "welcome-agent-setup", className: cn('flex w-full flex-col items-center', className), children: [_jsx("div", { className: "mb-8 flex w-full max-w-xs items-center gap-1.5", children: STEPS.map((s, i) => (_jsx("div", { className: cn('h-[3px] flex-1 rounded-full transition-colors duration-300', i <= stepIndex ? 'bg-foreground/60' : 'bg-muted') }, s))) }), _jsxs("div", { className: cn('flex w-full flex-col items-center transition-opacity duration-200', visible && !transitioning ? 'opacity-100' : 'opacity-0'), children: [_jsx("h1", { className: "text-foreground/90 text-center text-5xl font-extralight tracking-tight", children: heroTitle }), _jsx("p", { className: "text-muted-foreground mt-3 text-center text-lg leading-relaxed font-light", children: heroSubtitle }), _jsxs("div", { className: "mt-8 flex w-full flex-col items-center", children: [step === 'select-agent' && (_jsx("div", { "data-testid": "agent-list", className: "grid w-full max-w-lg gap-3", style: {
+                                    gridTemplateColumns: `repeat(${Math.min(groups.length, 4)}, minmax(0, 1fr))`,
+                                }, children: groups.map((group) => {
+                                    const GroupIcon = getAgentTypeIcon(group.agentType);
+                                    return (_jsxs("button", { type: "button", disabled: saving, "data-testid": `agent-option-${group.agentType}`, className: "border-border hover:bg-accent hover:border-foreground/20 flex cursor-pointer flex-col items-center gap-3 rounded-2xl border px-4 py-5 transition-all duration-150 active:scale-[0.97] disabled:opacity-50", onClick: () => handleAgentSelect(group.agentType), children: [_jsx(GroupIcon, { className: "text-foreground/70 h-7 w-7" }), _jsx("span", { className: "text-sm font-medium", children: group.label })] }, group.agentType));
+                                }) })), step === 'select-model' && activeGroup ? (_jsxs("div", { "data-testid": "model-list", className: "flex w-full max-w-lg flex-col items-center gap-4", children: [_jsxs("button", { type: "button", disabled: saving, className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 self-start text-sm transition-colors", onClick: handleBack, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), "Back"] }), _jsx("div", { className: "grid w-full gap-3", style: {
+                                            gridTemplateColumns: `repeat(${Math.min(activeGroup.models.length, 3)}, minmax(0, 1fr))`,
+                                        }, children: activeGroup.models.map((m) => {
+                                            const meta = getModelMeta(m.id);
+                                            return (_jsxs("button", { type: "button", disabled: saving, "data-testid": `model-option-${m.id}`, className: "border-border hover:bg-accent hover:border-foreground/20 flex cursor-pointer flex-col items-center gap-2 rounded-2xl border px-4 py-5 text-center transition-all duration-150 active:scale-[0.97] disabled:opacity-50", onClick: () => handleModelSelect(m.id), children: [_jsx("span", { className: "text-sm font-medium", children: meta.displayName || m.displayName }), _jsx("span", { className: "text-muted-foreground text-xs leading-tight", children: meta.description || m.description })] }, m.id));
+                                        }) })] })) : null] })] })] }));
 }

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", 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 }, 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/layouts/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA0FD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvE,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA4FD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAUnD"}

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

@@ -26,7 +26,7 @@ function AppShellInner({ children }) {
     const featureFlags = useFeatureFlags();
     // Subscribe to agent lifecycle events and dispatch toast/browser notifications
     useNotifications();
-    const { features } = useSidebarFeaturesContext();
+    const { features, hasRepositories } = useSidebarFeaturesContext();
     const handleNewFeature = useCallback(() => {
         guardedNavigate(() => router.push('/create'));
     }, [router, guardedNavigate]);
@@ -63,7 +63,7 @@ function AppShellInner({ children }) {
             loading: addingRepo,
         },
     ], [handleNewFeature, handleAddRepository, addingRepo]);
-    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, onFeatureClick: handleFeatureClick }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsxs("div", { className: "absolute top-3 right-3 z-50 flex gap-1", "data-test-id": "canvas-actions-toolbar", children: [_jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children }), isControlCenterRoute(pathname) && _jsx(FloatingActionButton, { actions: fabActions })] }) })] }));
+    return (_jsxs(SidebarProvider, { defaultOpen: false, children: [_jsx(AppSidebar, { features: features, featureFlags: featureFlags, onFeatureClick: handleFeatureClick }), _jsx(SidebarInset, { children: _jsxs("div", { className: "relative h-full", children: [_jsxs("div", { className: "absolute top-3 right-3 z-50 flex gap-1", "data-test-id": "canvas-actions-toolbar", children: [_jsx(SoundToggle, {}), _jsx(ThemeToggle, {})] }), _jsx("main", { className: "h-full", children: children }), isControlCenterRoute(pathname) && hasRepositories ? (_jsx(FloatingActionButton, { actions: fabActions })) : null] }) })] }));
 }
 export function AppShell({ children }) {
     return (_jsx(AgentEventsProvider, { children: _jsx(DrawerCloseGuardProvider, { children: _jsx(SidebarFeaturesProvider, { children: _jsx(AppShellInner, { children: children }) }) }) }));

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

@@ -18,6 +18,8 @@ export declare function mapNodeStateToSidebarStatus(state: FeatureNodeState): Fe
 interface SidebarFeaturesContextValue {
     features: SidebarFeatureItem[];
     setFeatures: (features: SidebarFeatureItem[]) => void;
+    hasRepositories: boolean;
+    setHasRepositories: (value: boolean) => void;
 }
 interface SidebarFeaturesProviderProps {
     children: ReactNode;

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

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

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

@@ -24,7 +24,8 @@ export function mapNodeStateToSidebarStatus(state) {
 const SidebarFeaturesContext = createContext(null);
 export function SidebarFeaturesProvider({ children }) {
     const [features, setFeatures] = useState([]);
-    const value = useMemo(() => ({ features, setFeatures }), [features]);
+    const [hasRepositories, setHasRepositories] = useState(false);
+    const value = useMemo(() => ({ features, setFeatures, hasRepositories, setHasRepositories }), [features, hasRepositories]);
     return (_jsx(SidebarFeaturesContext.Provider, { value: value, children: children }));
 }
 export function useSidebarFeaturesContext() {

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -8,7 +8,7 @@ export const CANVAS_LAYOUT_DEFAULTS = {
 /** Known node-type dimensions for the canvas node types */
 const NODE_DIMENSIONS = {
     featureNode: { width: 288, height: 140 },
-    repositoryNode: { width: 328, height: 50 },
+    repositoryNode: { width: 400, height: 110 },
 };
 function getNodeSize(node, defaultSize) {
     // Prefer per-node size from data, then type-based lookup, then default