@shepai/cli 1.72.9 → 1.73.0

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

@@ -16,28 +16,27 @@ export function useRepositoryActions(input) {
     const folderTimerRef = useRef(null);
     // Clear timers on unmount
     useEffect(() => {
-        const ideTimer = ideTimerRef.current;
-        const shellTimer = shellTimerRef.current;
-        const folderTimer = folderTimerRef.current;
+        const ideRef = ideTimerRef;
+        const shellRef = shellTimerRef;
+        const folderRef = folderTimerRef;
         return () => {
-            if (ideTimer)
-                clearTimeout(ideTimer);
-            if (shellTimer)
-                clearTimeout(shellTimer);
-            if (folderTimer)
-                clearTimeout(folderTimer);
+            if (ideRef.current)
+                clearTimeout(ideRef.current);
+            if (shellRef.current)
+                clearTimeout(shellRef.current);
+            if (folderRef.current)
+                clearTimeout(folderRef.current);
         };
     }, []);
-    const performToolbarAction = useCallback(async (action, setLoading, setError, timerRef, isLoading) => {
+    const performAction = useCallback(async (action, setLoading, setError, timerRef, isLoading) => {
         if (!input || isLoading)
             return;
-        // Clear any existing timer
         if (timerRef.current)
             clearTimeout(timerRef.current);
         setLoading(true);
         setError(null);
         try {
-            const result = await action({ repositoryPath: input.repositoryPath });
+            const result = await action();
             if (!result.success) {
                 const errorMessage = result.error ?? 'An unexpected error occurred';
                 setError(errorMessage);
@@ -53,33 +52,9 @@ export function useRepositoryActions(input) {
             setLoading(false);
         }
     }, [input]);
-    const performFolderAction = useCallback(async (action, setLoading, setError, timerRef, isLoading) => {
-        if (!input || isLoading)
-            return;
-        if (timerRef.current)
-            clearTimeout(timerRef.current);
-        setLoading(true);
-        setError(null);
-        try {
-            const result = await action(input.repositoryPath);
-            if (!result.success) {
-                const errorMessage = result.error ?? 'An unexpected error occurred';
-                setError(errorMessage);
-                timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
-            }
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
-            setError(errorMessage);
-            timerRef.current = setTimeout(() => setError(null), ERROR_CLEAR_DELAY);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [input]);
-    const handleOpenIde = useCallback(() => performToolbarAction(openIde, setIdeLoading, setIdeError, ideTimerRef, ideLoading), [performToolbarAction, ideLoading]);
-    const handleOpenShell = useCallback(() => performToolbarAction(openShell, setShellLoading, setShellError, shellTimerRef, shellLoading), [performToolbarAction, shellLoading]);
-    const handleOpenFolder = useCallback(() => performFolderAction(openFolder, setFolderLoading, setFolderError, folderTimerRef, folderLoading), [performFolderAction, folderLoading]);
+    const handleOpenIde = useCallback(() => performAction(() => openIde({ repositoryPath: input.repositoryPath }), setIdeLoading, setIdeError, ideTimerRef, ideLoading), [performAction, ideLoading, input]);
+    const handleOpenShell = useCallback(() => performAction(() => openShell({ repositoryPath: input.repositoryPath }), setShellLoading, setShellError, shellTimerRef, shellLoading), [performAction, shellLoading, input]);
+    const handleOpenFolder = useCallback(() => performAction(() => openFolder(input.repositoryPath), setFolderLoading, setFolderError, folderTimerRef, folderLoading), [performAction, folderLoading, input]);
     return {
         openInIde: handleOpenIde,
         openInShell: handleOpenShell,

package/dist/src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.d.ts

@@ -1,8 +1,6 @@
 export interface SidebarSectionHeaderProps {
     label: string;
-    onFolderClick?: () => void;
-    onMenuClick?: () => void;
     className?: string;
 }
-export declare function SidebarSectionHeader({ label, onFolderClick, onMenuClick, className, }: SidebarSectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSectionHeader({ label, className }: SidebarSectionHeaderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=sidebar-section-header.d.ts.map

package/dist/src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-section-header.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,aAAa,EACb,WAAW,EACX,SAAS,GACV,EAAE,yBAAyB,2CA0C3B"}
+{"version":3,"file":"sidebar-section-header.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAQnF"}

package/dist/src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.js

@@ -1,11 +1,7 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Folder, GripHorizontal } from 'lucide-react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarGroup } from '../../ui/sidebar.js';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
-import { useSidebar } from '../../ui/sidebar.js';
 import { cn } from '../../../lib/utils.js';
-export function SidebarSectionHeader({ label, onFolderClick, onMenuClick, className, }) {
-    const { state, isMobile } = useSidebar();
-    return (_jsx(SidebarGroup, { "data-testid": "sidebar-section-header", className: cn('px-2 py-1', className), children: _jsxs("div", { className: "text-sidebar-foreground flex h-7 w-full shrink-0 items-center px-2 text-sm font-medium", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsxs("span", { className: "text-sidebar-foreground/70 flex shrink-0 items-center gap-0.5", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onFolderClick, className: "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex size-7 items-center justify-center rounded-md p-0 outline-hidden transition-colors focus-visible:ring-2 [&>svg]:size-4", "aria-label": "Open features folder", children: _jsx(Folder, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, children: "Open features folder" })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onMenuClick, className: "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex size-7 items-center justify-center rounded-md p-0 outline-hidden transition-colors focus-visible:ring-2 [&>svg]:size-4", "aria-label": "Features options", children: _jsx(GripHorizontal, { className: "size-4" }) }) }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== 'collapsed' || isMobile, children: "Features options" })] })] })] }) }));
+export function SidebarSectionHeader({ label, className }) {
+    return (_jsx(SidebarGroup, { "data-testid": "sidebar-section-header", className: cn('px-2 py-1', className), children: _jsx("div", { className: "text-sidebar-foreground flex h-7 w-full shrink-0 items-center px-2 text-sm font-medium", children: _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }) }) }));
 }

package/dist/src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.stories.d.ts

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof SidebarSectionHeader>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-export declare const WithActions: Story;
 //# sourceMappingURL=sidebar-section-header.stories.d.ts.map

package/dist/src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-section-header.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAgB3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAOF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC"}
+{"version":3,"file":"sidebar-section-header.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,oBAAoB,CAgB3C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/src/presentation/web/components/common/sidebar-section-header/sidebar-section-header.stories.js

@@ -18,14 +18,3 @@ export const Default = {
         label: 'Features',
     },
 };
-function noop() {
-    // Intentional no-op for Storybook interaction demos
-    return;
-}
-export const WithActions = {
-    args: {
-        label: 'Features',
-        onFolderClick: noop,
-        onMenuClick: noop,
-    },
-};

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { Github, Plus, TerminalSquare, Copy, Check, Loader2 } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
-import { pickFolder } from '../../common/add-repository-node/pick-folder.js';
+import { pickFolder } from '../../common/add-repository-button/pick-folder.js';
 const commands = ['cd ~/my-repo', 'shep feat new "create modern, sleek dashboards"'];
 export function ControlCenterEmptyState({ onRepositorySelect, className, }) {
     const [copied, setCopied] = useState(false);

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,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAc5E,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,2CA4NzF"}
+{"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,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAa5E,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,2CAoOzF"}

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

@@ -1,9 +1,8 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
-import { NotificationPermissionBanner } from '../../common/notification-permission-banner/index.js';
 import { useSidebarFeaturesContext, mapNodeStateToSidebarStatus, } from '../../../hooks/sidebar-features-context.js';
 import { useSelectedFeatureId } from '../../../hooks/use-selected-feature-id.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
@@ -16,22 +15,21 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
     const selectedFeatureId = useSelectedFeatureId();
     const clickSound = useSoundAction('click');
     const { guardedNavigate } = useDrawerCloseGuard();
-    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleDeleteRepository, createFeatureNode, } = useControlCenterState(initialNodes, initialEdges);
+    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleDeleteRepository, createFeatureNode, setCallbacks, } = useControlCenterState(initialNodes, initialEdges);
     // Publish sidebar features to context whenever feature node data changes
     const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
+    const featureNodes = useMemo(() => nodes.filter((n) => n.type === 'featureNode'), [nodes]);
     const sidebarKey = useMemo(() => {
-        return nodes
-            .filter((n) => n.type === 'featureNode')
+        return featureNodes
             .map((n) => {
             const d = n.data;
-            return `${d.featureId}:${d.state}:${d.runtime ?? ''}:${d.startedAt ?? ''}`;
+            return `${d.featureId}:${d.state}:${d.name}`;
         })
             .sort()
             .join(',');
-    }, [nodes]);
+    }, [featureNodes]);
     useEffect(() => {
-        const sidebarItems = nodes
-            .filter((n) => n.type === 'featureNode')
+        const sidebarItems = featureNodes
             .map((n) => {
             const d = n.data;
             const status = mapNodeStateToSidebarStatus(d.state);
@@ -47,7 +45,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         })
             .filter(Boolean);
         setSidebarFeatures(sidebarItems);
-    }, [sidebarKey, nodes, setSidebarFeatures]);
+    }, [sidebarKey, featureNodes, setSidebarFeatures]);
     // ── URL-based navigation handlers ────────────────────────────────────
     const handleNodeClick = useCallback((_event, node) => {
         if (node.type === 'featureNode') {
@@ -112,7 +110,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         window.addEventListener('shep:add-repository', handler);
         return () => window.removeEventListener('shep:add-repository', handler);
     }, [handleAddRepository]);
-    // Listen for optimistic create events from the create drawer
+    // Listen for create events from the create drawer (with real feature ID from server)
     useEffect(() => {
         const handler = (e) => {
             const detail = e.detail;
@@ -122,6 +120,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 const parentNodeId = `feat-${detail.parentId}`;
                 createFeatureNode(parentNodeId, {
                     state: 'creating',
+                    featureId: detail.featureId,
                     name: detail.name,
                     description: detail.description,
                     repositoryPath: detail.repositoryPath,
@@ -132,7 +131,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             const repoNode = nodes.find((n) => n.type === 'repositoryNode' &&
                 n.data.repositoryPath === detail.repositoryPath);
             createFeatureNode(repoNode?.id ?? null, {
-                state: 'creating',
+                state: 'running',
+                featureId: detail.featureId,
                 name: detail.name,
                 description: detail.description,
                 repositoryPath: detail.repositoryPath,
@@ -141,9 +141,26 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         window.addEventListener('shep:feature-created', handler);
         return () => window.removeEventListener('shep:feature-created', handler);
     }, [nodes, createFeatureNode]);
+    // Wire callbacks into derived node data (via ref — no re-render).
+    useEffect(() => {
+        setCallbacks({
+            onNodeAction: handleAddFeatureToFeature,
+            onFeatureDelete: handleDeleteFeature,
+            onRepositoryAdd: handleAddFeatureToRepo,
+            onRepositoryClick: handleRepositoryClick,
+            onRepositoryDelete: handleDeleteRepository,
+        });
+    }, [
+        setCallbacks,
+        handleAddFeatureToFeature,
+        handleDeleteFeature,
+        handleAddFeatureToRepo,
+        handleRepositoryClick,
+        handleDeleteRepository,
+    ]);
     const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
     if (!hasRepositories) {
-        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository })] }));
+        return _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository });
     }
-    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, selectedFeatureId: selectedFeatureId, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryClick: handleRepositoryClick, onRepositoryDelete: handleDeleteRepository, onFeatureDelete: handleDeleteFeature, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) })] }));
+    return (_jsx(FeaturesCanvas, { nodes: nodes, edges: edges, selectedFeatureId: selectedFeatureId, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }));
 }

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

@@ -7,17 +7,6 @@ export declare const Empty: Story;
 export declare const WithFeatures: Story;
 export declare const WithToolbar: Story;
 export declare const WithNodeActions: Story;
-/**
- * Interactive story — starts with just an "Add Repository" button.
- *
- * User flow:
- * 1. Click "Add Repository" → native folder picker → select a folder → repo node appears
- * 2. Hover the repo node → click (+) → a new feature node appears connected to the repo
- * 3. Hover the feature node → click (+) → another feature appears connected to the first
- *
- * You can also use the toolbar "Add Feature" button to create unconnected features.
- */
-export declare const Interactive: Story;
 /**
  * Dagre auto-layout story — two repositories with interconnected feature trees.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"control-center.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAkBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiFnC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAwIF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC"}
+{"version":3,"file":"control-center.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAQjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAkBpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA0EnC,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAiIF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC"}

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

@@ -83,12 +83,6 @@ const repoNode = {
     position: { x: 50, y: 115 },
     data: { name: 'shep-ai/cli' },
 };
-const addRepoNode = {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 50, y: 302 },
-    data: {},
-};
 const dashedEdge = { style: { strokeDasharray: '5 5' } };
 export const Empty = {
     args: {
@@ -113,7 +107,7 @@ export const WithToolbar = {
 };
 export const WithNodeActions = {
     args: {
-        initialNodes: [repoNode, addRepoNode, ...featureNodes],
+        initialNodes: [repoNode, ...featureNodes],
         initialEdges: [
             { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
             { id: 'e-repo-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
@@ -121,29 +115,6 @@ export const WithNodeActions = {
         ],
     },
 };
-/**
- * Interactive story — starts with just an "Add Repository" button.
- *
- * User flow:
- * 1. Click "Add Repository" → native folder picker → select a folder → repo node appears
- * 2. Hover the repo node → click (+) → a new feature node appears connected to the repo
- * 3. Hover the feature node → click (+) → another feature appears connected to the first
- *
- * You can also use the toolbar "Add Feature" button to create unconnected features.
- */
-export const Interactive = {
-    args: {
-        initialNodes: [
-            {
-                id: 'add-repo',
-                type: 'addRepositoryNode',
-                position: { x: 50, y: 50 },
-                data: {},
-            },
-        ],
-        initialEdges: [],
-    },
-};
 // --- Dagre-layouted story: multiple repos with feature trees ---
 const dagreRepoNodes = [
     {
@@ -237,13 +208,7 @@ const dagreFeatureNodes = [
         },
     },
 ];
-const dagreAddRepo = {
-    id: 'add-repo',
-    type: 'addRepositoryNode',
-    position: { x: 0, y: 0 },
-    data: {},
-};
-const dagreNodesRaw = [...dagreRepoNodes, ...dagreFeatureNodes, dagreAddRepo];
+const dagreNodesRaw = [...dagreRepoNodes, ...dagreFeatureNodes];
 const dagreEdges = [
     // cli repo → Auth, SSO
     { id: 'e-cli-auth', source: 'repo-cli', target: 'feat-auth', style: { strokeDasharray: '5 5' } },

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

@@ -1,7 +1,9 @@
 import type { Connection, Edge, NodeChange } from '@xyflow/react';
 import type { FeatureNodeData } from '../../common/feature-node/index.js';
+import type { RepositoryNodeData } from '../../common/repository-node/index.js';
 import type { CanvasNodeType } from '../../features/features-canvas/index.js';
 import { type LayoutDirection } from '../../../lib/layout-with-dagre.js';
+import { type GraphCallbacks } from '../../../hooks/use-graph-state.js';
 export interface ControlCenterState {
     nodes: CanvasNodeType[];
     edges: Edge[];
@@ -12,6 +14,12 @@ export interface ControlCenterState {
     handleDeleteFeature: (featureId: string) => void;
     handleDeleteRepository: (repositoryId: string) => Promise<void>;
     createFeatureNode: (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>, edgeType?: string) => string;
+    /** Stable lookup: repositoryPath for a feature node. */
+    getFeatureRepositoryPath: (featureNodeId: string) => string | undefined;
+    /** Stable lookup: repository data by nodeId. */
+    getRepositoryData: (nodeId: string) => RepositoryNodeData | undefined;
+    /** Sync callbacks into derived node data (does not trigger re-render). */
+    setCallbacks: (callbacks: GraphCallbacks) => void;
 }
 export declare function useControlCenterState(initialNodes: CanvasNodeType[], initialEdges: Edge[]): ControlCenterState;
 //# sourceMappingURL=use-control-center-state.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAwlBpB"}
+{"version":3,"file":"use-control-center-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/use-control-center-state.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAWjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG7E,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,EACvC,QAAQ,CAAC,EAAE,MAAM,KACd,MAAM,CAAC;IACZ,wDAAwD;IACxD,wBAAwB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACxE,gDAAgD;IAChD,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IACtE,0EAA0E;IAC1E,YAAY,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;CACnD;AAOD,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAgWpB"}