@shepai/cli 1.72.9-pr218.000ada0 → 1.72.9-pr220.e1bfec0

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

@@ -16,7 +16,7 @@ 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 sidebarKey = useMemo(() => {
@@ -112,7 +112,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 +122,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 +133,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 +143,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 (_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 (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _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;AAYjC,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE7E,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;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAuVpB"}