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

package/web/.next/standalone/src/presentation/web/CLAUDE.md

@@ -37,6 +37,66 @@ pnpm dev:cli ui
 | WebSocket upgrades | Forwarded (HMR works)                                   | NOT forwarded in `WebServerService`                     |
 | Next.js mode       | Always dev                                              | dev when run from source, prod when installed           |
 
+## Graph State Architecture (Domain-Model-Driven)
+
+All canvas node/edge state is managed through **domain Maps as the single source of truth**.
+
+```
+Server (layout.tsx)                    Client (useGraphState)
+┌──────────────────┐                  ┌─────────────────────────────┐
+│ initialNodes[]   │──parseMaps──→    │ Domain Maps (source of truth)│
+│ initialEdges[]   │                  │  featureMap: Map<id, Entry>  │
+└──────────────────┘                  │  repoMap: Map<id, Entry>     │
+                                      │  pendingMap: Map<id, Entry>  │
+SSE Events                            │                              │
+┌──────────────────┐                  └──────────┬──────────────────┘
+│ NotificationEvent│──updateFeature──→           │
+└──────────────────┘                             │ deriveGraph() + layoutWithDagre()
+                                                 ▼
+Optimistic UI                         ┌─────────────────────────────┐
+┌──────────────────┐                  │ Derived (read-only)          │
+│ shep:feature-    │──addPending───→  │  nodes: CanvasNodeType[]     │
+│ created event    │                  │  edges: Edge[]               │
+└──────────────────┘                  │  (callbacks + layout applied)│
+                                      └─────────────────────────────┘
+```
+
+### Key Files
+
+| File                                                             | Purpose                                                              |
+| ---------------------------------------------------------------- | -------------------------------------------------------------------- |
+| `lib/derive-graph.ts`                                            | Pure function: domain Maps → nodes + edges (with callbacks injected) |
+| `hooks/use-graph-state.ts`                                       | Hook: domain Maps state + reconciliation + derivation + layout       |
+| `components/features/control-center/use-control-center-state.ts` | Wraps useGraphState, handles server actions + SSE events             |
+| `components/features/control-center/control-center-inner.tsx`    | Wires callbacks via `setCallbacks()`, passes nodes/edges to canvas   |
+| `components/features/features-canvas/features-canvas.tsx`        | Renders React Flow; only adds `selectedFeatureId` highlighting       |
+
+### Design Principles
+
+1. **Domain Maps are the source of truth** — all mutations go through Maps (featureMap, repoMap, pendingMap)
+2. **Edges are derived, never stored** — repo→feature edges from `repositoryPath` matching, dep edges from `parentNodeId`
+3. **Callbacks via ref** — `callbacksRef` + stable `useMemo([])` wrapper prevents circular re-renders
+4. **Layout in derivation** — `layoutWithDagre` runs inside `useMemo` after `deriveGraph()`
+5. **`onNodesChange` is a no-op** — since `nodesDraggable=false`, we ignore all React Flow changes
+
+### Mutation Paths
+
+| Operation         | Flow                                                                                                    |
+| ----------------- | ------------------------------------------------------------------------------------------------------- |
+| SSE event         | `useAgentEventsContext` → `updateFeature(nodeId, {state, lifecycle})`                                   |
+| Server prop sync  | `useEffect` watches `initialNodeKey` → `reconcile(newNodes, newEdges)`                                  |
+| Optimistic create | `shep:feature-created` event → `createFeatureNode()` → `addPendingFeature()`                            |
+| Delete feature    | `handleDeleteFeature()` → `removeFeature()` → server action → `restoreFeature()` on error               |
+| Add repository    | `handleAddRepository()` → `addRepository(tempId)` → server action → `replaceRepository(tempId, realId)` |
+
+### Reconciliation
+
+`reconcile(newNodes, newEdges)` merges server data into domain Maps:
+
+- Replaces featureMap and repoMap with fresh server data
+- Preserves pending (creating) features in featureMap unless matched by `name + repositoryPath`
+- Cleans pendingMap entries that now have a real counterpart in server data
+
 ## SSE / Real-Time Update Architecture
 
 ```
@@ -45,8 +105,8 @@ DB polling (500ms) -> /api/agent-events (SSE route)
         -> postMessage to all browser tabs
             -> useAgentEvents hook (hooks/use-agent-events.ts)
                 -> AgentEventsProvider context (hooks/agent-events-provider.tsx)
-                    -> useControlCenterState (optimistic node updates via setNodes)
-                        -> React state updates -> sidebar + React Flow canvas
+                    -> useControlCenterState (SSE effect calls updateFeature)
+                        -> domain Maps update -> derivation -> React Flow canvas
 ```
 
 ### SSE Key Files
@@ -58,18 +118,9 @@ DB polling (500ms) -> /api/agent-events (SSE route)
 | `public/agent-events-sw.js`                                      | Service Worker: multiplexes single SSE to all tabs     |
 | `hooks/use-agent-events.ts`                                      | Client hook: registers with SW, receives events        |
 | `hooks/agent-events-provider.tsx`                                | React context wrapping `useAgentEvents`                |
-| `components/features/control-center/use-control-center-state.ts` | Processes SSE events into React Flow node updates      |
+| `components/features/control-center/use-control-center-state.ts` | SSE effect calls `updateFeature()` on domain Maps      |
 | `components/common/feature-node/derive-feature-state.ts`         | Maps event types/phases to UI state/lifecycle          |
 
-### SSE Event Flow Details
-
-1. **SSE route** seeds a per-connection cache on first poll (no events emitted for initial state)
-2. Subsequent polls compare DB state against cache, emit only deltas
-3. **Service Worker** connects to `/api/agent-events` via EventSource on first subscriber
-4. SW broadcasts `{ type: 'notification', data }` to all tabs via `clients.matchAll()`
-5. **useControlCenterState** effect processes new events, calls `setNodes()` to update node state/lifecycle
-6. **Polling fallback** (5s interval) fetches via `fetchGraphData()` server action for active features
-
 ### SSE Lifecycle Mappings
 
 The SSE route maps `SdlcLifecycle` enum -> agent graph node names -> client `FeatureLifecyclePhase`:
@@ -94,21 +145,17 @@ React Flow v12 (`@xyflow/react` ^12.10.0) has specific behaviors that affect rea
 - **Internal Zustand store**: React Flow syncs props to an internal `nodeLookup` Map via `StoreUpdater`
 - **Memoized NodeWrapper**: Each node is wrapped in `memo(NodeWrapper)` which subscribes to store via `useStore(selector, shallow)`
 - **NodeWrapper gets node from store**, NOT from props directly. It does `s.nodeLookup.get(id)` with `shallow` comparison
-- **Single ReactFlowProvider**: There must be exactly ONE `ReactFlowProvider` ancestor. Multiple nested providers create separate stores, causing the outer one's `StoreUpdater` to sync nodes to a store that the inner components don't read from
+- **Single ReactFlowProvider**: There must be exactly ONE `ReactFlowProvider` ancestor. Multiple nested providers create separate stores
 
-### Circular Update Loop (FIXED — do not reintroduce)
+### Circular Update Loop Prevention
 
-In controlled mode, `enrichedNodes` (useMemo in FeaturesCanvas) creates new node objects every render
-(adding callbacks to `data`). StoreUpdater sees different references and emits `replace` changes via
-`onNodesChange`. If `onNodesChange` applies these 'replace' changes back to state via `applyNodeChanges`,
-it overwrites SSE-driven state updates with stale data from the previous render, AND triggers another
-`enrichedNodes` recalculation → infinite loop (110+ renders on page load).
+With the domain-model-driven architecture, the circular update loop is prevented by design:
 
-**Fix**: `onNodesChange` in `use-control-center-state.ts` filters out `replace` changes. Only `dimensions`,
-`position`, `select`, etc. are applied. StoreUpdater still syncs props to its internal store regardless —
-our state remains the source of truth.
+1. **Callbacks are stable** — injected via `callbacksRef` + stable `useMemo([])` wrapper, so node objects don't change when callbacks change
+2. **`onNodesChange` is a no-op** — domain Maps are the source of truth, React Flow's internal changes are ignored
+3. **`enrichedNodes` only adds `selectedFeatureId`** — no callback injection in FeaturesCanvas
 
-**NEVER** remove the `c.type !== 'replace'` filter from `onNodesChange`.
+**NEVER** make `onNodesChange` apply `replace` changes back to state.
 
 ## Testing Real-Time Updates
 
@@ -124,24 +171,21 @@ our state remains the source of truth.
 
 When a user creates a feature, the UI uses optimistic updates:
 
-1. **Create drawer** dispatches `shep:feature-created` → canvas adds a temp node (`feature-<ts>` ID, state `creating`)
+1. **Create drawer** dispatches `shep:feature-created` → `createFeatureNode()` → `addPendingFeature()` adds temp node to pendingMap
 2. Drawer closes immediately via `router.push('/')`
 3. Server action `createFeature` runs in background → agent starts
-4. SSE events arrive with real feature ID (`feat-<uuid>`) — **these won't match the temp node**
-5. **Polling fallback** (5s) detects new server node → replaces temp `creating` node in-place
+4. SSE events arrive with real feature ID (`feat-<uuid>`) — these update featureMap via `updateFeature()`
+5. **Server prop sync** (rerender with new initialNodes) → `reconcile()` detects matching real feature → removes pending from both featureMap and pendingMap
 
 ### Key constraints
 
-- **Temp node IDs don't match SSE events**: Optimistic nodes use `feature-<ts>` IDs, server uses `feat-<uuid>`.
-  SSE-driven `setNodes()` can't find the temp node. The polling fallback handles the swap.
-- **Create drawer `isSubmitting`**: Must NOT reset until pathname leaves `/create`. Resetting in `.finally()`
-  causes the drawer to flash open because `router.push('/')` is async and pathname hasn't changed yet.
-- **Parallel routes preserve state**: The `CreateDrawerClient` component is NOT unmounted on navigation.
-  `isOpen` is derived from pathname, not mount/unmount lifecycle.
+- **Temp node IDs don't match SSE events**: Optimistic nodes use `feature-<ts>` IDs, server uses `feat-<uuid>`. SSE events call `updateFeature('feat-<uuid>', ...)` which doesn't match the temp ID. The reconcile on next server prop update handles the swap.
+- **Create drawer `isSubmitting`**: Must NOT reset until pathname leaves `/create`. Resetting in `.finally()` causes the drawer to flash open because `router.push('/')` is async and pathname hasn't changed yet.
+- **Parallel routes preserve state**: The `CreateDrawerClient` component is NOT unmounted on navigation. `isOpen` is derived from pathname, not mount/unmount lifecycle.
 
 ## Common Pitfalls
 
 - **No events when nothing changes**: SSE only emits deltas. If no feature state changes, no events are sent. This is correct behavior.
-- **Polling fallback dependency**: The 5s polling `useEffect` depends on a derived `hasActiveFeature` boolean (not `nodes` directly). Using `[nodes]` as a dependency would reset the interval on every node change, potentially preventing it from ever firing.
 - **Storybook mocks**: New server actions need mocks in `.storybook/mocks/app/actions/` or Storybook build breaks.
 - **`output: 'standalone'`** in next.config.ts: Production builds use standalone mode. Route handlers are bundled differently.
+- **Map insertion order affects dagre layout**: After remove+restore of a feature, the Map insertion order may change, causing slightly different dagre positions. This is expected behavior — don't write tests asserting exact position preservation across remove/restore cycles.

package/web/.next/standalone/src/presentation/web/app/actions/create-feature.ts

@@ -72,15 +72,40 @@ export async function createFeature(
 
   try {
     const createFeatureUseCase = resolve<CreateFeatureUseCase>('CreateFeatureUseCase');
-    const result = await createFeatureUseCase.execute({
+
+    // Phase 1 (fast): create DB record with real UUID — returns immediately
+    const { feature, shouldSpawn } = await createFeatureUseCase.createRecord({
       userInput,
       repositoryPath,
       approvalGates: gates,
       push: push ?? false,
       openPr: openPr ?? false,
       ...(parentId ? { parentId } : {}),
+      name,
+      description,
     });
-    return { feature: result.feature };
+
+    // Phase 2 (background): metadata generation, worktree, spec, agent spawn
+    // Fire-and-forget — the UI gets the real feature ID immediately
+    createFeatureUseCase
+      .initializeAndSpawn(
+        feature,
+        {
+          userInput,
+          repositoryPath,
+          approvalGates: gates,
+          push: push ?? false,
+          openPr: openPr ?? false,
+          ...(parentId ? { parentId } : {}),
+        },
+        shouldSpawn
+      )
+      .catch((err: unknown) => {
+        // eslint-disable-next-line no-console
+        console.error('[createFeature] initializeAndSpawn failed:', err);
+      });
+
+    return { feature };
   } catch (error: unknown) {
     const message = error instanceof Error ? error.message : 'Failed to create feature';
     return { error: message };

package/web/.next/standalone/src/presentation/web/app/actions/get-feature-metadata.ts

@@ -0,0 +1,18 @@
+'use server';
+
+import { resolve } from '@/lib/server-container';
+import type { IFeatureRepository } from '@shepai/core/application/ports/output/repositories/feature-repository.interface';
+
+/**
+ * Lightweight server action to fetch a single feature's name and description.
+ * Used by the SSE effect to update node metadata after AI metadata generation
+ * without a full graph reconcile (which can overwrite SSE-driven state).
+ */
+export async function getFeatureMetadata(
+  featureId: string
+): Promise<{ name: string; description: string } | null> {
+  const featureRepo = resolve<IFeatureRepository>('IFeatureRepository');
+  const feature = await featureRepo.findById(featureId);
+  if (!feature) return null;
+  return { name: feature.name, description: feature.description };
+}

package/web/.next/standalone/src/presentation/web/app/api/agent-events/route.ts

@@ -191,6 +191,23 @@ export function GET(request: Request): Response {
                 }
               }
 
+              // Check for feature name change (AI metadata generation updates name)
+              if (prev.featureName !== feature.name) {
+                prev.featureName = feature.name;
+                const nodeName =
+                  LIFECYCLE_TO_NODE[feature.lifecycle as SdlcLifecycle] ?? 'requirements';
+                emitEvent({
+                  eventType: NotificationEventType.PhaseCompleted,
+                  agentRunId: run.id,
+                  featureId: feature.id,
+                  featureName: feature.name,
+                  phaseName: nodeName,
+                  message: `Feature metadata updated`,
+                  severity: NotificationSeverity.Info,
+                  timestamp: new Date().toISOString(),
+                });
+              }
+
               // Check for lifecycle change (agent stays "running" but moves through phases)
               if (prev.lifecycle !== feature.lifecycle) {
                 prev.lifecycle = feature.lifecycle;

package/web/.next/standalone/src/presentation/web/components/common/add-repository-button/index.ts

@@ -0,0 +1 @@
+export { AddRepositoryButton } from './add-repository-button';

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/create-drawer-client.tsx

@@ -8,7 +8,6 @@ import { FeatureCreateDrawer } from '@/components/common/feature-create-drawer';
 import type { FeatureCreatePayload } from '@/components/common/feature-create-drawer';
 import type { ParentFeatureOption } from '@/components/common/feature-create-drawer/feature-create-drawer';
 import type { WorkflowDefaults } from '@/app/actions/get-workflow-defaults';
-import { useSoundAction } from '@/hooks/use-sound-action';
 
 export interface CreateDrawerClientProps {
   repositoryPath: string;
@@ -24,7 +23,6 @@ export function CreateDrawerClient({
   workflowDefaults,
 }: CreateDrawerClientProps) {
   const router = useRouter();
-  const createSound = useSoundAction('create');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Derive open state from the URL. Next.js parallel routes preserve slot
@@ -54,40 +52,38 @@ export function CreateDrawerClient({
     (data: FeatureCreatePayload) => {
       setIsSubmitting(true);
 
-      // Dispatch event for optimistic canvas update before navigating
-      window.dispatchEvent(
-        new CustomEvent('shep:feature-created', {
-          detail: {
-            name: data.name,
-            description: data.description,
-            repositoryPath: data.repositoryPath,
-            parentId: data.parentId,
-          },
-        })
-      );
-
       // Close the drawer immediately for responsive UI
       router.push('/');
 
-      // Fire server action in the background
+      // Server action Phase 1 returns fast with real feature ID (DB record created)
+      // Phase 2 (metadata, worktree, agent) runs in background on server
       createFeature(data)
         .then((result) => {
           if (result.error) {
             toast.error(result.error);
-            // Dispatch rollback event
             window.dispatchEvent(new CustomEvent('shep:feature-create-failed'));
             return;
           }
-          createSound.play();
+          // Dispatch event with real feature ID so control center adds it to featureMap
+          window.dispatchEvent(
+            new CustomEvent('shep:feature-created', {
+              detail: {
+                featureId: result.feature!.id,
+                name: result.feature!.name,
+                description: result.feature!.description,
+                repositoryPath: result.feature!.repositoryPath,
+                parentId: data.parentId,
+              },
+            })
+          );
         })
         .catch(() => {
           toast.error('Failed to create feature');
           window.dispatchEvent(new CustomEvent('shep:feature-create-failed'));
-          // Reset on error so the user can retry without navigating away
           setIsSubmitting(false);
         });
     },
-    [router, createSound]
+    [router]
   );
 
   return (

package/web/.next/standalone/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx

@@ -8,7 +8,7 @@ import type {
   PrdApprovalPayload,
   QuestionSelectionChange,
 } from '@shepai/core/domain/generated/output';
-import { PrStatus } from '@shepai/core/domain/generated/output';
+import { PrStatus, NotificationEventType } from '@shepai/core/domain/generated/output';
 import { approveFeature } from '@/app/actions/approve-feature';
 import { rejectFeature } from '@/app/actions/reject-feature';
 import { getFeatureArtifact } from '@/app/actions/get-feature-artifact';
@@ -94,9 +94,22 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
     const newEvents = events.slice(processedCountRef.current);
     processedCountRef.current = events.length;
 
+    // PhaseCompleted must NOT set state when WaitingApproval is in the same poll batch.
+    // But when it arrives without WaitingApproval (e.g. post-approval), allow it as
+    // a fallback for missed AgentStarted events.
+    const waitingApprovalInBatch = newEvents.some(
+      (e) =>
+        e.featureId === featureNode.featureId &&
+        e.eventType === NotificationEventType.WaitingApproval
+    );
+
     for (const event of newEvents) {
       if (event.featureId !== featureNode.featureId) continue;
-      const newState = mapEventTypeToState(event.eventType);
+
+      const newState =
+        event.eventType === NotificationEventType.PhaseCompleted && waitingApprovalInBatch
+          ? undefined
+          : mapEventTypeToState(event.eventType);
       const newLifecycle = mapPhaseNameToLifecycle(event.phaseName);
 
       // Trigger a server refresh to get the latest drawer view,
@@ -104,24 +117,26 @@ export function FeatureDrawerClient({ view: initialView }: FeatureDrawerClientPr
       // to avoid the refresh interfering with the reject handler's navigation.
       if (!isDirtyRef.current && !isRejectingRef.current) router.refresh();
 
-      // Optimistically update the node data for immediate UI feedback
-      setView((prev) => {
-        if (
-          prev.type !== 'feature' &&
-          prev.type !== 'prd-review' &&
-          prev.type !== 'tech-review' &&
-          prev.type !== 'merge-review'
-        )
-          return prev;
-        return {
-          ...prev,
-          node: {
+      if (newState !== undefined || newLifecycle !== undefined) {
+        // Optimistically update the node data AND re-derive the view type so the
+        // drawer switches immediately (e.g. prd-review → feature when agent resumes)
+        // without waiting for the router.refresh() round-trip.
+        setView((prev) => {
+          if (
+            prev.type !== 'feature' &&
+            prev.type !== 'prd-review' &&
+            prev.type !== 'tech-review' &&
+            prev.type !== 'merge-review'
+          )
+            return prev;
+          const updatedNode = {
             ...prev.node,
-            state: newState,
+            ...(newState !== undefined && { state: newState }),
             ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
-          },
-        };
-      });
+          };
+          return { ...prev, type: deriveViewType(updatedNode), node: updatedNode };
+        });
+      }
     }
   }, [events, featureNode, router]);
 
@@ -765,3 +780,14 @@ function DetailRow({ label, value }: { label: string; value: string }) {
     </div>
   );
 }
+
+/** Mirrors computeDrawerView logic — derives view type from live node data. */
+function deriveViewType(
+  node: FeatureNodeData
+): 'feature' | 'prd-review' | 'tech-review' | 'merge-review' {
+  if (node.lifecycle === 'requirements' && node.state === 'action-required') return 'prd-review';
+  if (node.lifecycle === 'implementation' && node.state === 'action-required') return 'tech-review';
+  if (node.lifecycle === 'review' && (node.state === 'action-required' || node.state === 'error'))
+    return 'merge-review';
+  return 'feature';
+}

package/web/.next/standalone/src/presentation/web/components/common/index.ts

@@ -4,11 +4,7 @@ export {
   computeDrawerView,
   type DrawerView,
 } from './control-center-drawer';
-export {
-  AddRepositoryNode,
-  type AddRepositoryNodeData,
-  type AddRepositoryNodeType,
-} from './add-repository-node';
+export { AddRepositoryButton } from './add-repository-button';
 export { ElapsedTime, formatElapsed } from './elapsed-time';
 export { EmptyState, type EmptyStateProps } from './empty-state';
 export {
@@ -35,7 +31,6 @@ export {
 export { FeatureStatusBadges, type FeatureStatusBadgesProps } from './feature-status-badges';
 export { FeatureStatusGroup, type FeatureStatusGroupProps } from './feature-status-group';
 export { LoadingSkeleton } from './loading-skeleton';
-export { NotificationPermissionBanner } from './notification-permission-banner';
 export {
   RepositoryNode,
   type RepositoryNodeData,

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

@@ -3,7 +3,7 @@
 import { useState, useCallback } from 'react';
 import { Github, Plus, TerminalSquare, Copy, Check, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { pickFolder } from '@/components/common/add-repository-node/pick-folder';
+import { pickFolder } from '@/components/common/add-repository-button/pick-folder';
 
 export interface ControlCenterEmptyStateProps {
   onRepositorySelect?: (path: string) => void;

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