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

package/dist/src/presentation/web/app/actions/create-feature.js

@@ -27,15 +27,33 @@ export async function createFeature(input) {
     };
     try {
         const createFeatureUseCase = resolve('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) => {
+            // eslint-disable-next-line no-console
+            console.error('[createFeature] initializeAndSpawn failed:', err);
+        });
+        return { feature };
     }
     catch (error) {
         const message = error instanceof Error ? error.message : 'Failed to create feature';

package/dist/src/presentation/web/app/actions/get-feature-metadata.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare function getFeatureMetadata(featureId: string): Promise<{
+    name: string;
+    description: string;
+} | null>;
+//# sourceMappingURL=get-feature-metadata.d.ts.map

package/dist/src/presentation/web/app/actions/get-feature-metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-feature-metadata.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/get-feature-metadata.ts"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAsB,kBAAkB,CACtC,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC,CAKvD"}

package/dist/src/presentation/web/app/actions/get-feature-metadata.js

@@ -0,0 +1,14 @@
+'use server';
+import { resolve } from '../../lib/server-container.js';
+/**
+ * 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) {
+    const featureRepo = resolve('IFeatureRepository');
+    const feature = await featureRepo.findById(featureId);
+    if (!feature)
+        return null;
+    return { name: feature.name, description: feature.description };
+}

package/dist/src/presentation/web/app/actions/get-graph-data.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Server action that fetches fresh graph nodes and edges.
+ * Used as a lightweight polling fallback for active features,
+ * avoiding full router.refresh() page re-renders.
+ */
+export declare function fetchGraphData(): Promise<{
+    nodes: import("../../components/features/features-canvas/index.js").CanvasNodeType[];
+    edges: import("@xyflow/react").Edge[];
+}>;
+//# sourceMappingURL=get-graph-data.d.ts.map

package/dist/src/presentation/web/app/actions/get-graph-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-graph-data.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/actions/get-graph-data.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAsB,cAAc;;;GAEnC"}

package/dist/src/presentation/web/app/actions/get-graph-data.js

@@ -0,0 +1,10 @@
+'use server';
+import { getGraphData } from '../(dashboard)/get-graph-data.js';
+/**
+ * Server action that fetches fresh graph nodes and edges.
+ * Used as a lightweight polling fallback for active features,
+ * avoiding full router.refresh() page re-renders.
+ */
+export async function fetchGraphData() {
+    return getGraphData();
+}

package/dist/src/presentation/web/app/api/agent-events/route.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/app/api/agent-events/route.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAgBH,eAAO,MAAM,OAAO,kBAAkB,CAAC;AA4DvC,wBAAgB,GAAG,CAAC,OAAO,EAAE,OAAO,GAAG,QAAQ,CAkM9C"}
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/app/api/agent-events/route.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAgBH,eAAO,MAAM,OAAO,kBAAkB,CAAC;AA+DvC,wBAAgB,GAAG,CAAC,OAAO,EAAE,OAAO,GAAG,QAAQ,CAmN9C"}

package/dist/src/presentation/web/app/api/agent-events/route.js

@@ -24,12 +24,15 @@ const HEARTBEAT_INTERVAL_MS = 30_000;
  * can derive the correct FeatureLifecyclePhase via mapPhaseNameToLifecycle().
  */
 const LIFECYCLE_TO_NODE = {
+    [SdlcLifecycle.Started]: 'requirements',
     [SdlcLifecycle.Analyze]: 'analyze',
     [SdlcLifecycle.Requirements]: 'requirements',
     [SdlcLifecycle.Research]: 'research',
     [SdlcLifecycle.Planning]: 'plan',
     [SdlcLifecycle.Implementation]: 'implement',
     [SdlcLifecycle.Review]: 'merge',
+    [SdlcLifecycle.Maintain]: 'maintain',
+    [SdlcLifecycle.Blocked]: 'blocked',
 };
 const STATUS_TO_EVENT = {
     [AgentRunStatus.running]: {
@@ -150,6 +153,21 @@ export function GET(request) {
                                     });
                                 }
                             }
+                            // 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] ?? '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/dist/src/presentation/web/components/common/add-repository-button/add-repository-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-repository-button.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/add-repository-button/add-repository-button.tsx"],"names":[],"mappings":"AAQA,UAAU,wBAAwB;IAChC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAuCzE"}

package/dist/src/presentation/web/components/common/add-repository-button/index.d.ts

@@ -0,0 +1,2 @@
+export { AddRepositoryButton } from './add-repository-button.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/add-repository-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/add-repository-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/src/presentation/web/components/common/{add-repository-node → add-repository-button}/index.js

@@ -1,2 +1 @@
-export { AddRepositoryNode } from './add-repository-node.js';
 export { AddRepositoryButton } from './add-repository-button.js';

package/dist/src/presentation/web/components/common/add-repository-button/pick-folder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pick-folder.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/add-repository-button/pick-folder.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAsB,UAAU,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAQzD"}

package/dist/src/presentation/web/components/common/control-center-drawer/create-drawer-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/create-drawer-client.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iEAAiE,CAAC;AAC3G,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAG5E,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,cAAc,EACd,eAAe,EACf,QAAQ,EACR,gBAAgB,GACjB,EAAE,uBAAuB,2CA+EzB"}
+{"version":3,"file":"create-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/create-drawer-client.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iEAAiE,CAAC;AAC3G,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAE5E,MAAM,WAAW,uBAAuB;IACtC,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,cAAc,EACd,eAAe,EACf,QAAQ,EACR,gBAAgB,GACjB,EAAE,uBAAuB,2CA6EzB"}

package/dist/src/presentation/web/components/common/control-center-drawer/create-drawer-client.js

@@ -5,10 +5,8 @@ import { useRouter, usePathname } from 'next/navigation';
 import { toast } from 'sonner';
 import { createFeature } from '../../../app/actions/create-feature.js';
 import { FeatureCreateDrawer } from '../../common/feature-create-drawer/index.js';
-import { useSoundAction } from '../../../hooks/use-sound-action.js';
 export function CreateDrawerClient({ repositoryPath, initialParentId, features, workflowDefaults, }) {
     const router = useRouter();
-    const createSound = useSoundAction('create');
     const [isSubmitting, setIsSubmitting] = useState(false);
     // Derive open state from the URL. Next.js parallel routes preserve slot
     // content during soft navigation, so this component is NOT unmounted when
@@ -17,48 +15,48 @@ export function CreateDrawerClient({ repositoryPath, initialParentId, features,
     // When submitting, force the drawer closed immediately — router.push('/')
     // is async and the pathname may not update before the next render.
     const pathname = usePathname();
-    const isOpen = !isSubmitting && pathname.startsWith('/create');
-    // Safety net: if the drawer is closed (e.g. via form submit + isSubmitting)
-    // but router.push('/') hasn't taken effect yet, force-clear the route.
+    const isOnCreateRoute = pathname.startsWith('/create');
+    const isOpen = !isSubmitting && isOnCreateRoute;
+    // Reset isSubmitting once the route has actually changed away from /create,
+    // so the drawer can reopen on future visits. Without this, isSubmitting
+    // would stay true forever since parallel routes preserve component state.
     useEffect(() => {
-        if (!isOpen && pathname.startsWith('/create')) {
-            router.replace('/');
+        if (!isOnCreateRoute && isSubmitting) {
+            setIsSubmitting(false);
         }
-    }, [isOpen, pathname, router]);
+    }, [isOnCreateRoute, isSubmitting]);
     const onClose = useCallback(() => {
         router.push('/');
     }, [router]);
     const onSubmit = useCallback((data) => {
         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'));
-        })
-            .finally(() => {
             setIsSubmitting(false);
         });
-    }, [router, createSound]);
+    }, [router]);
     return (_jsx(FeatureCreateDrawer, { open: isOpen, onClose: onClose, onSubmit: onSubmit, repositoryPath: repositoryPath, features: features, workflowDefaults: workflowDefaults, initialParentId: initialParentId, isSubmitting: isSubmitting }));
 }

package/dist/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx"],"names":[],"mappings":"AA2DA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,wBAAwB,2CAimBlF"}
+{"version":3,"file":"feature-drawer-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/control-center-drawer/feature-drawer-client.tsx"],"names":[],"mappings":"AA2DA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,wBAAwB,2CAgnBlF"}

package/dist/src/presentation/web/components/common/control-center-drawer/feature-drawer-client.js

@@ -4,7 +4,7 @@ import { useState, useCallback, useEffect, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { toast } from 'sonner';
 import { Loader2, Trash2, ExternalLink, GitCommitHorizontal, Play, Square } from 'lucide-react';
-import { PrStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { PrStatus, NotificationEventType } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { approveFeature } from '../../../app/actions/approve-feature.js';
 import { rejectFeature } from '../../../app/actions/reject-feature.js';
 import { getFeatureArtifact } from '../../../app/actions/get-feature-artifact.js';
@@ -59,32 +59,41 @@ export function FeatureDrawerClient({ view: initialView }) {
             return;
         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,
             // but skip when the user has unsaved changes or a rejection is in-flight
             // 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]);
     // Derive open state from the URL. Next.js parallel routes preserve slot
@@ -420,3 +429,13 @@ function FeatureDetails({ data }) {
 function DetailRow({ label, value }) {
     return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-sm", children: value })] }));
 }
+/** Mirrors computeDrawerView logic — derives view type from live node data. */
+function deriveViewType(node) {
+    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/dist/src/presentation/web/components/common/feature-node/derive-feature-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"derive-feature-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/derive-feature-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAIL,qBAAqB,EACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE3F;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,GAAG,gBAAgB,CA4C9F;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAYvD;AAED,oGAAoG;AACpG,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,qBAAqB,GAAG,gBAAgB,CAkBtF;AAYD,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,MAAM,GAAG,SAAS,GAC5B,qBAAqB,GAAG,SAAS,CAGnC"}
+{"version":3,"file":"derive-feature-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/derive-feature-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAIL,qBAAqB,EACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE3F;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,GAAG,gBAAgB,CA4C9F;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAYvD;AAED,oGAAoG;AACpG,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,qBAAqB,GAAG,gBAAgB,CAkBtF;AAcD,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,MAAM,GAAG,SAAS,GAC5B,qBAAqB,GAAG,SAAS,CAGnC"}

package/dist/src/presentation/web/components/common/feature-node/derive-feature-state.js

@@ -101,6 +101,8 @@ const phaseNameToLifecycle = {
     plan: 'implementation',
     implement: 'implementation',
     merge: 'review',
+    maintain: 'maintain',
+    blocked: 'requirements',
 };
 export function mapPhaseNameToLifecycle(phaseName) {
     if (!phaseName)

package/dist/src/presentation/web/components/common/index.d.ts

@@ -1,5 +1,5 @@
 export { ControlCenterDrawer, type ControlCenterDrawerProps, computeDrawerView, type DrawerView, } from './control-center-drawer/index.js';
-export { AddRepositoryNode, type AddRepositoryNodeData, type AddRepositoryNodeType, } from './add-repository-node/index.js';
+export { AddRepositoryButton } from './add-repository-button/index.js';
 export { ElapsedTime, formatElapsed } from './elapsed-time/index.js';
 export { EmptyState, type EmptyStateProps } from './empty-state/index.js';
 export { FeatureCreateDrawer, type FeatureCreateDrawerProps, type FeatureCreatePayload, } from './feature-create-drawer/index.js';
@@ -10,7 +10,6 @@ export { FeatureNode, featureNodeStateConfig, type FeatureNodeState, type Featur
 export { FeatureStatusBadges, type FeatureStatusBadgesProps } from './feature-status-badges/index.js';
 export { FeatureStatusGroup, type FeatureStatusGroupProps } from './feature-status-group/index.js';
 export { LoadingSkeleton } from './loading-skeleton/index.js';
-export { NotificationPermissionBanner } from './notification-permission-banner/index.js';
 export { RepositoryNode, type RepositoryNodeData, type RepositoryNodeType, } from './repository-node/index.js';
 export { PageHeader } from './page-header/index.js';
 export { PrdQuestionnaire, PrdQuestionnaireDrawer, type PrdQuestionnaireProps, type PrdQuestionnaireDrawerProps, type PrdQuestion, type PrdFinalAction, type PrdOption, type PrdQuestionnaireData, } from './prd-questionnaire/index.js';

package/dist/src/presentation/web/components/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,iBAAiB,EACjB,KAAK,UAAU,GAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,iBAAiB,EACjB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EACL,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,WAAW,EACX,sBAAsB,EACtB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,sBAAsB,GAC5B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,EACL,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,2BAA2B,EAChC,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,oBAAoB,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,iBAAiB,EACjB,KAAK,UAAU,GAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACjF,OAAO,EACL,iBAAiB,EACjB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,GACzB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,WAAW,EACX,sBAAsB,EACtB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,sBAAsB,GAC5B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EACL,cAAc,EACd,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,2BAA2B,EAChC,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,oBAAoB,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,qBAAqB,EAAE,KAAK,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AACnG,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/src/presentation/web/components/common/index.js

@@ -1,5 +1,5 @@
 export { ControlCenterDrawer, computeDrawerView, } from './control-center-drawer/index.js';
-export { AddRepositoryNode, } from './add-repository-node/index.js';
+export { AddRepositoryButton } from './add-repository-button/index.js';
 export { ElapsedTime, formatElapsed } from './elapsed-time/index.js';
 export { EmptyState } from './empty-state/index.js';
 export { FeatureCreateDrawer, } from './feature-create-drawer/index.js';
@@ -10,7 +10,6 @@ export { FeatureNode, featureNodeStateConfig, } from './feature-node/index.js';
 export { FeatureStatusBadges } from './feature-status-badges/index.js';
 export { FeatureStatusGroup } from './feature-status-group/index.js';
 export { LoadingSkeleton } from './loading-skeleton/index.js';
-export { NotificationPermissionBanner } from './notification-permission-banner/index.js';
 export { RepositoryNode, } from './repository-node/index.js';
 export { PageHeader } from './page-header/index.js';
 export { PrdQuestionnaire, PrdQuestionnaireDrawer, } from './prd-questionnaire/index.js';

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

@@ -23,7 +23,7 @@ export function RepositoryNode({ data }) {
         }
         : null);
     const isDeploymentActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
-    return (_jsxs("div", { className: "group relative", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, data.onDelete && data.id ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute top-1/2 -left-10 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Remove repository", "data-testid": "repository-node-delete-button", onClick: (e) => {
+    return (_jsxs("div", { className: cn('group relative', data.onDelete && data.id && 'pl-10'), children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, data.onDelete && data.id ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute top-1/2 left-0 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Remove repository", "data-testid": "repository-node-delete-button", onClick: (e) => {
                                                 e.stopPropagation();
                                                 setConfirmOpen(true);
                                             }, className: "bg-card text-muted-foreground hover:border-destructive hover:text-destructive flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: "Remove repository" })] }) }) }), _jsx(Dialog, { open: confirmOpen, onOpenChange: setConfirmOpen, children: _jsxs(DialogContent, { className: "max-w-xs", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Remove repository?" }), _jsxs(DialogDescription, { children: ["This will remove ", _jsx("strong", { children: data.name }), " and all its features from your workspace. The repository files on disk won't be affected."] })] }), _jsxs(DialogFooter, { className: "grid grid-cols-2 gap-2 sm:flex-none", children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(Button, { variant: "destructive", onClick: () => {

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,7 +15,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 +111,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 +121,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 +132,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 +142,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"}