@shepai/cli 1.72.8 → 1.72.9-pr220.99e5e13

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center-inner.tsx

@@ -7,7 +7,6 @@ import { FeaturesCanvas } from '@/components/features/features-canvas';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { FeatureNodeData } from '@/components/common/feature-node';
 import type { RepositoryNodeData } from '@/components/common/repository-node';
-import { NotificationPermissionBanner } from '@/components/common/notification-permission-banner';
 import {
   useSidebarFeaturesContext,
   mapNodeStateToSidebarStatus,
@@ -39,6 +38,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     handleDeleteFeature,
     handleDeleteRepository,
     createFeatureNode,
+    setCallbacks,
   } = useControlCenterState(initialNodes, initialEdges);
 
   // Publish sidebar features to context whenever feature node data changes
@@ -163,11 +163,12 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     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: Event) => {
       const detail = (
         e as CustomEvent<{
+          featureId: string;
           name: string;
           description?: string;
           repositoryPath: string;
@@ -183,6 +184,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
           parentNodeId,
           {
             state: 'creating',
+            featureId: detail.featureId,
             name: detail.name,
             description: detail.description,
             repositoryPath: detail.repositoryPath,
@@ -200,7 +202,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
       );
 
       createFeatureNode(repoNode?.id ?? null, {
-        state: 'creating',
+        state: 'running',
+        featureId: detail.featureId,
         name: detail.name,
         description: detail.description,
         repositoryPath: detail.repositoryPath,
@@ -210,37 +213,41 @@ export function ControlCenterInner({ initialNodes, initialEdges }: ControlCenter
     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 (
-      <>
-        <NotificationPermissionBanner />
-        <ControlCenterEmptyState onRepositorySelect={handleAddRepository} />
-      </>
-    );
+    return <ControlCenterEmptyState onRepositorySelect={handleAddRepository} />;
   }
 
   return (
-    <>
-      <NotificationPermissionBanner />
-      <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={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
-      />
-    </>
+    <FeaturesCanvas
+      nodes={nodes}
+      edges={edges}
+      selectedFeatureId={selectedFeatureId}
+      onNodesChange={onNodesChange}
+      onConnect={handleConnect}
+      onAddFeature={handleAddFeature}
+      onNodeClick={handleNodeClick}
+      onPaneClick={handleClearDrawers}
+      emptyState={<ControlCenterEmptyState onRepositorySelect={handleAddRepository} />}
+    />
   );
 }

package/web/.next/standalone/src/presentation/web/components/features/control-center/control-center.stories.tsx

@@ -4,7 +4,6 @@ import { ControlCenter } from './control-center';
 import type { CanvasNodeType } from '@/components/features/features-canvas';
 import type { FeatureNodeType } from '@/components/common/feature-node';
 import type { RepositoryNodeType } from '@/components/common/repository-node';
-import type { AddRepositoryNodeType } from '@/components/common/add-repository-node';
 import { layoutWithDagre } from '@/lib/layout-with-dagre';
 import { AgentEventsProvider } from '@/hooks/agent-events-provider';
 import { DrawerCloseGuardProvider } from '@/hooks/drawer-close-guard';
@@ -102,13 +101,6 @@ const repoNode: RepositoryNodeType = {
   data: { name: 'shep-ai/cli' },
 };
 
-const addRepoNode: AddRepositoryNodeType = {
-  id: 'add-repo',
-  type: 'addRepositoryNode',
-  position: { x: 50, y: 302 },
-  data: {},
-};
-
 const dashedEdge = { style: { strokeDasharray: '5 5' } };
 
 export const Empty: Story = {
@@ -137,7 +129,7 @@ export const WithToolbar: Story = {
 
 export const WithNodeActions: Story = {
   args: {
-    initialNodes: [repoNode, addRepoNode, ...featureNodes] as CanvasNodeType[],
+    initialNodes: [repoNode, ...featureNodes] as CanvasNodeType[],
     initialEdges: [
       { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
       { id: 'e-repo-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
@@ -146,30 +138,6 @@ export 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 const Interactive: Story = {
-  args: {
-    initialNodes: [
-      {
-        id: 'add-repo',
-        type: 'addRepositoryNode',
-        position: { x: 50, y: 50 },
-        data: {},
-      } as AddRepositoryNodeType,
-    ] as CanvasNodeType[],
-    initialEdges: [],
-  },
-};
-
 // --- Dagre-layouted story: multiple repos with feature trees ---
 
 const dagreRepoNodes: RepositoryNodeType[] = [
@@ -266,14 +234,7 @@ const dagreFeatureNodes: FeatureNodeType[] = [
   },
 ];
 
-const dagreAddRepo: AddRepositoryNodeType = {
-  id: 'add-repo',
-  type: 'addRepositoryNode',
-  position: { x: 0, y: 0 },
-  data: {},
-};
-
-const dagreNodesRaw: CanvasNodeType[] = [...dagreRepoNodes, ...dagreFeatureNodes, dagreAddRepo];
+const dagreNodesRaw: CanvasNodeType[] = [...dagreRepoNodes, ...dagreFeatureNodes];
 
 const dagreEdges: Edge[] = [
   // cli repo → Auth, SSO