@shepai/cli 1.122.2 → 1.123.0

package/dist/src/presentation/web/components/common/feature-drawer-tabs/use-tab-data-fetch.js

@@ -54,11 +54,16 @@ export function useTabDataFetch(featureId, fetchers) {
         const currentFeatureId = featureIdRef.current;
         if (!fetcher)
             return;
+        // Only show loading spinner when there's no existing data.
+        // On refresh (data already present), keep showing stale data while fetching
+        // to avoid flickering the entire tab on every poll cycle.
         if (mountedRef.current) {
-            setTabStates((prev) => ({
-                ...prev,
-                [tab]: { ...prev[tab], loading: true, error: null },
-            }));
+            setTabStates((prev) => {
+                const hasData = prev[tab]?.data !== null;
+                if (hasData)
+                    return prev; // Keep stale data visible — no loading flash
+                return { ...prev, [tab]: { ...prev[tab], loading: true, error: null } };
+            });
         }
         try {
             const data = await fetcher(currentFeatureId);
@@ -71,11 +76,15 @@ export function useTabDataFetch(featureId, fetchers) {
         }
         catch (error) {
             if (mountedRef.current) {
-                const message = error instanceof Error ? error.message : 'Failed to fetch tab data';
-                setTabStates((prev) => ({
-                    ...prev,
-                    [tab]: { data: null, loading: false, error: message },
-                }));
+                setTabStates((prev) => {
+                    const message = error instanceof Error ? error.message : 'Failed to fetch tab data';
+                    // On refresh failure, keep existing data instead of clearing it
+                    const existingData = prev[tab]?.data ?? null;
+                    return {
+                        ...prev,
+                        [tab]: { data: existingData, loading: false, error: existingData ? null : message },
+                    };
+                });
             }
         }
     }, []);

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

@@ -9,6 +9,14 @@ export interface RepositoryNodeData {
     repositoryPath?: string;
     /** Creation timestamp (epoch ms) — used for stable vertical ordering. */
     createdAt?: number;
+    /** Current git branch name (e.g. "main", "feat/my-feature") */
+    branch?: string;
+    /** Commit message of the branch HEAD (first line only) */
+    commitMessage?: string;
+    /** Name of the person who made the latest commit */
+    committer?: string;
+    /** Number of commits the current branch is behind the default branch. null if on default branch or unknown. */
+    behindCount?: number | null;
     onClick?: () => void;
     onAdd?: () => void;
     onDelete?: (repositoryId: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"repository-node-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,WAAW,kBAAkB;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"repository-node-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node-config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,WAAW,kBAAkB;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+GAA+G;IAC/G,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC"}

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":"AAsBA,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,2CAyR5F"}
+{"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,2CA+U5F"}

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback } from 'react';
 import { Handle, Position } from '@xyflow/react';
 import { useRouter } from 'next/navigation';
-import { Github, Plus, Code2, Terminal, FolderOpen, Trash2, Play, Square } from 'lucide-react';
+import { Github, Plus, Code2, Terminal, FolderOpen, Trash2, Play, Square, GitBranch, GitCommitHorizontal, ArrowDown, User, } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { ActionButton } from '../../common/action-button/index.js';
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
@@ -72,9 +72,9 @@ export function RepositoryNode({ data }) {
                         e.stopPropagation();
                         data.onClick?.();
                     }
-                }, className: "nodrag bg-card flex min-w-[18rem] cursor-pointer items-center gap-3 rounded-full border px-4 py-3 shadow-sm", 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 }), featureFlags.envDeploy ? (_jsxs(_Fragment, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex items-center", children: _jsx(ActionButton, { label: isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server', onClick: isDeploymentActive ? deployAction.stop : deployAction.deploy, loading: deployAction.deployLoading || deployAction.stopLoading, error: !!deployAction.deployError, icon: isDeploymentActive ? Square : Play, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { children: isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server' })] }) }), isDeploymentActive ? (_jsx(DeploymentStatusBadge, { status: deployAction.status, url: deployAction.url, targetId: data.repositoryPath })) : null] })) : null] })) : 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.onAdd || data.showHandles ? (_jsx(Handle, { type: "source", position: Position.Right, isConnectable: !data.showHandles, className: "opacity-0!" })) : null] }));
+                }, 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 }), featureFlags.envDeploy ? (_jsxs(_Fragment, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "flex items-center", children: _jsx(ActionButton, { label: isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server', onClick: isDeploymentActive ? deployAction.stop : deployAction.deploy, loading: deployAction.deployLoading || deployAction.stopLoading, error: !!deployAction.deployError, icon: isDeploymentActive ? Square : Play, iconOnly: true, variant: "ghost", size: "icon-xs" }) }) }), _jsx(TooltipContent, { children: isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server' })] }) }), isDeploymentActive ? (_jsx(DeploymentStatusBadge, { status: deployAction.status, url: deployAction.url, targetId: data.repositoryPath })) : null] })) : null] })) : 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 ? (_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] }) })) : 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.onAdd || data.showHandles ? (_jsx(Handle, { type: "source", position: Position.Right, isConnectable: !data.showHandles, className: "opacity-0!" })) : null] }));
 }

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

@@ -14,4 +14,6 @@ export declare const WithActions: Story;
 export declare const WithActionsAndAddButton: Story;
 export declare const WithDeleteButton: Story;
 export declare const MultipleWithActions: Story;
+export declare const WithGitInfo: Story;
+export declare const WithGitInfoBehind: Story;
 //# sourceMappingURL=repository-node.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"repository-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,0BAA0B,CAAC;AAgCvF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CASlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAWF,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAC;AASF,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAQrC,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AA2BF,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAC"}
+{"version":3,"file":"repository-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/repository-node/repository-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,0BAA0B,CAAC;AAgCvF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAYlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAiCF,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAC;AAkCF,eAAO,MAAM,kBAAkB,EAAE,KAwBhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAQrC,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,KAS9B,CAAC;AA+CF,eAAO,MAAM,mBAAmB,EAAE,KAwBjC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAS/B,CAAC"}

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"}