@shepai/cli 1.70.2 → 1.72.0

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

@@ -1,15 +1,20 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
 import { FeaturesCanvas } from '../../features/features-canvas/index.js';
-import { ControlCenterDrawer, computeDrawerView } from '../../common/control-center-drawer/index.js';
 import { NotificationPermissionBanner } from '../../common/notification-permission-banner/index.js';
-import { getWorkflowDefaults } from '../../../app/actions/get-workflow-defaults.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';
 import { ControlCenterEmptyState } from './control-center-empty-state.js';
 import { useControlCenterState } from './use-control-center-state.js';
 export function ControlCenterInner({ initialNodes, initialEdges }) {
-    const { nodes, edges, selectedNode, isCreateDrawerOpen, isDeleting, pendingRepositoryPath, onNodesChange, handleConnect, handleAddFeature, handleAddFeatureToRepo, handleAddFeatureToFeature, handleAddRepository, handleNodeClick, clearSelection, handleCreateFeatureSubmit, handleDeleteFeature, handleDeleteRepository, closeCreateDrawer, selectFeatureById, pendingParentFeatureId, } = useControlCenterState(initialNodes, initialEdges);
+    const router = useRouter();
+    const pathname = usePathname();
+    const selectedFeatureId = useSelectedFeatureId();
+    const clickSound = useSoundAction('click');
+    const { nodes, edges, onNodesChange, handleConnect, handleAddRepository, handleDeleteFeature, handleDeleteRepository, createFeatureNode, } = useControlCenterState(initialNodes, initialEdges);
     // Publish sidebar features to context whenever feature node data changes
     const { setFeatures: setSidebarFeatures } = useSidebarFeaturesContext();
     const sidebarKey = useMemo(() => {
@@ -41,55 +46,59 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
             .filter(Boolean);
         setSidebarFeatures(sidebarItems);
     }, [sidebarKey, nodes, setSidebarFeatures]);
-    // Feature list for the parent selector in the create drawer
-    const featureOptions = useMemo(() => nodes
-        .filter((n) => n.type === 'featureNode')
-        .map((n) => {
-        const data = n.data;
-        return { id: data.featureId, name: data.name };
-    })
-        .filter((f) => f.id && !f.id.startsWith('#')), [nodes]);
-    // Workflow defaults for the create-feature drawer
-    const [workflowDefaults, setWorkflowDefaults] = useState();
-    useEffect(() => {
-        getWorkflowDefaults()
-            .then(setWorkflowDefaults)
-            .catch(() => {
-            // Settings unavailable — create drawer falls back to all-false defaults
-        });
-    }, []);
-    // Repository drawer state (independent of feature selection)
-    const [selectedRepoNode, setSelectedRepoNode] = useState(null);
-    // Close all drawers — used on pane click and canvas drag
-    const handleClearDrawers = useCallback(() => {
-        clearSelection();
-        setSelectedRepoNode(null);
-        closeCreateDrawer();
-    }, [clearSelection, closeCreateDrawer]);
-    // Open repository drawer when a repo node is clicked
+    // ── URL-based navigation handlers ────────────────────────────────────
+    const handleNodeClick = useCallback((_event, node) => {
+        if (node.type === 'featureNode') {
+            const data = node.data;
+            if (data.state === 'creating')
+                return;
+            clickSound.play();
+            router.push(`/feature/${data.featureId}`);
+        }
+    }, [router, clickSound]);
+    const handleAddFeature = useCallback(() => {
+        clickSound.play();
+        router.push('/create');
+    }, [router, clickSound]);
+    const handleAddFeatureToRepo = useCallback((repoNodeId) => {
+        clickSound.play();
+        const node = nodes.find((n) => n.id === repoNodeId);
+        const repoPath = node?.data?.repositoryPath;
+        if (repoPath) {
+            router.push(`/create?repo=${encodeURIComponent(repoPath)}`);
+        }
+        else {
+            router.push('/create');
+        }
+    }, [nodes, router, clickSound]);
+    const handleAddFeatureToFeature = useCallback((featureNodeId) => {
+        const featureId = featureNodeId.startsWith('feat-') ? featureNodeId.slice(5) : featureNodeId;
+        // Find the repo node that owns this feature
+        const repoEdge = edges.find((e) => e.target === featureNodeId);
+        const repoNode = repoEdge ? nodes.find((n) => n.id === repoEdge.source) : null;
+        const repoPath = repoNode?.data?.repositoryPath;
+        clickSound.play();
+        const params = new URLSearchParams();
+        if (repoPath)
+            params.set('repo', repoPath);
+        params.set('parent', featureId);
+        router.push(`/create?${params.toString()}`);
+    }, [nodes, edges, router, clickSound]);
     const handleRepositoryClick = useCallback((nodeId) => {
         const node = nodes.find((n) => n.id === nodeId);
         if (node?.type === 'repositoryNode') {
-            clearSelection();
-            setSelectedRepoNode(node.data);
+            const data = node.data;
+            if (data.id) {
+                router.push(`/repository/${data.id}`);
+            }
         }
-    }, [nodes, clearSelection]);
-    // Derive the single active drawer view from all current state
-    const drawerView = computeDrawerView({
-        selectedNode,
-        isCreateDrawerOpen,
-        pendingRepositoryPath,
-        pendingParentFeatureId,
-        selectedRepoNode,
-        features: featureOptions,
-        workflowDefaults,
-    });
-    // Listen for global "open create drawer" events from the sidebar
-    useEffect(() => {
-        const handler = () => handleAddFeature();
-        window.addEventListener('shep:open-create-drawer', handler);
-        return () => window.removeEventListener('shep:open-create-drawer', handler);
-    }, [handleAddFeature]);
+    }, [nodes, router]);
+    // Close all drawers — navigate back to root
+    const handleClearDrawers = useCallback(() => {
+        if (pathname !== '/') {
+            router.push('/');
+        }
+    }, [router, pathname]);
     // Listen for global "add repository" events from the top bar button
     useEffect(() => {
         const handler = (e) => {
@@ -99,18 +108,26 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         window.addEventListener('shep:add-repository', handler);
         return () => window.removeEventListener('shep:add-repository', handler);
     }, [handleAddRepository]);
-    // Listen for notification "Review" clicks to open the relevant drawer
+    // Listen for optimistic create events from the create drawer
     useEffect(() => {
         const handler = (e) => {
-            const featureId = e.detail.featureId;
-            selectFeatureById(featureId);
+            const detail = e.detail;
+            // Find the repo node to connect to
+            const repoNode = nodes.find((n) => n.type === 'repositoryNode' &&
+                n.data.repositoryPath === detail.repositoryPath);
+            createFeatureNode(repoNode?.id ?? null, {
+                state: 'creating',
+                name: detail.name,
+                description: detail.description,
+                repositoryPath: detail.repositoryPath,
+            });
         };
-        window.addEventListener('shep:select-feature', handler);
-        return () => window.removeEventListener('shep:select-feature', handler);
-    }, [selectFeatureById]);
+        window.addEventListener('shep:feature-created', handler);
+        return () => window.removeEventListener('shep:feature-created', handler);
+    }, [nodes, createFeatureNode]);
     const hasRepositories = nodes.some((n) => n.type === 'repositoryNode');
     if (!hasRepositories) {
-        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }), _jsx(ControlCenterDrawer, { view: drawerView, onClose: handleClearDrawers, onDelete: handleDeleteFeature, isDeleting: isDeleting, onCreateSubmit: handleCreateFeatureSubmit })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, 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 }) }), _jsx(ControlCenterDrawer, { view: drawerView, onClose: handleClearDrawers, onDelete: handleDeleteFeature, isDeleting: isDeleting, onCreateSubmit: handleCreateFeatureSubmit })] }));
+    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 }) })] }));
 }

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

@@ -1,8 +1,11 @@
+import type { ReactNode } from 'react';
 import type { Edge } from '@xyflow/react';
 import type { CanvasNodeType } from '../../features/features-canvas/index.js';
 export interface ControlCenterProps {
     initialNodes: CanvasNodeType[];
     initialEdges: Edge[];
+    /** Drawer content rendered by the @drawer parallel route slot. */
+    drawer?: ReactNode;
 }
-export declare function ControlCenter({ initialNodes, initialEdges }: ControlCenterProps): import("react/jsx-runtime").JSX.Element;
+export declare function ControlCenter({ initialNodes, initialEdges, drawer }: ControlCenterProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=control-center.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"control-center.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAG5E,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,kBAAkB,2CAQ/E"}
+{"version":3,"file":"control-center.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAG5E,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;IACrB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,kBAAkB,2CASvF"}

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

@@ -1,7 +1,7 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ReactFlowProvider } from '@xyflow/react';
 import { ControlCenterInner } from './control-center-inner.js';
-export function ControlCenter({ initialNodes, initialEdges }) {
-    return (_jsx("div", { "data-testid": "control-center", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsx(ControlCenterInner, { initialNodes: initialNodes, initialEdges: initialEdges }) }) }));
+export function ControlCenter({ initialNodes, initialEdges, drawer }) {
+    return (_jsxs("div", { "data-testid": "control-center", className: "h-full w-full", children: [_jsx(ReactFlowProvider, { children: _jsx(ControlCenterInner, { initialNodes: initialNodes, initialEdges: initialEdges }) }), _jsx("div", { children: drawer }, "drawer")] }));
 }

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

@@ -1,32 +1,17 @@
 import type { Connection, Edge, NodeChange } from '@xyflow/react';
 import type { FeatureNodeData } from '../../common/feature-node/index.js';
-import type { FeatureCreatePayload } from '../../common/feature-create-drawer/index.js';
 import type { CanvasNodeType } from '../../features/features-canvas/index.js';
 import { type LayoutDirection } from '../../../lib/layout-with-dagre.js';
 export interface ControlCenterState {
     nodes: CanvasNodeType[];
     edges: Edge[];
-    selectedNode: FeatureNodeData | null;
-    isCreateDrawerOpen: boolean;
-    pendingRepositoryPath: string;
-    /** Parent feature ID pre-selected when (+) is clicked on a feature node. */
-    pendingParentFeatureId: string | undefined;
     onNodesChange: (changes: NodeChange<CanvasNodeType>[]) => void;
     handleConnect: (connection: Connection) => void;
-    clearSelection: () => void;
-    handleNodeClick: (event: React.MouseEvent, node: CanvasNodeType) => void;
-    handleAddFeature: () => void;
-    handleAddFeatureToRepo: (repoNodeId: string) => void;
-    handleAddFeatureToFeature: (featureNodeId: string) => void;
     handleAddRepository: (path: string) => void;
     handleLayout: (direction: LayoutDirection) => void;
-    handleCreateFeatureSubmit: (data: FeatureCreatePayload) => void;
-    closeCreateDrawer: () => void;
     handleDeleteFeature: (featureId: string) => Promise<void>;
     handleDeleteRepository: (repositoryId: string) => Promise<void>;
-    isDeleting: boolean;
     createFeatureNode: (sourceNodeId: string | null, dataOverride?: Partial<FeatureNodeData>) => string;
-    selectFeatureById: (featureId: string) => 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,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAC5E,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAYhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,sBAAsB,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3C,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,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,sBAAsB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,yBAAyB,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,mBAAmB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;IACnD,yBAAyB,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,sBAAsB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,CACjB,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,YAAY,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,KACpC,MAAM,CAAC;IACZ,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CA4sBpB"}
+{"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,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAWhF,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,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,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,KACpC,MAAM,CAAC;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CA4hBpB"}

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

@@ -4,7 +4,6 @@ import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import { applyNodeChanges } from '@xyflow/react';
 import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
-import { createFeature } from '../../../app/actions/create-feature.js';
 import { deleteFeature } from '../../../app/actions/delete-feature.js';
 import { addRepository } from '../../../app/actions/add-repository.js';
 import { deleteRepository } from '../../../app/actions/delete-repository.js';
@@ -27,13 +26,8 @@ export function useControlCenterState(initialNodes, initialEdges) {
             return next;
         });
     }, []);
-    const [selectedNode, setSelectedNode] = useState(null);
-    const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
-    const [isDeleting, setIsDeleting] = useState(false);
     const deleteSound = useSoundAction('delete');
     const createSound = useSoundAction('create');
-    const clickSound = useSoundAction('click');
-    const [pendingRepoNodeId, setPendingRepoNodeId] = useState(null);
     // Sync server props into local state when router.refresh() delivers new data
     const initialNodeKey = initialNodes
         .map((n) => n.id)
@@ -109,9 +103,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
                             action: {
                                 label: 'Review',
                                 onClick: () => {
-                                    window.dispatchEvent(new CustomEvent('shep:select-feature', {
-                                        detail: { featureId: data.featureId },
-                                    }));
+                                    router.push(`/feature/${data.featureId}`);
                                 },
                             },
                         });
@@ -123,7 +115,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
             }
             prevStates.set(node.id, data.state);
         }
-    }, [initialDataKey, initialNodes, events]);
+    }, [initialDataKey, initialNodes, events, router]);
     // Targeted optimistic updates from SSE agent events + debounced reconciliation.
     // Uses `events` array (not `lastEvent`) so that React batching cannot silently
     // drop events when multiple SSE messages arrive in the same tick.
@@ -156,16 +148,6 @@ export function useControlCenterState(initialNodes, initialEdges) {
                     },
                 };
             }));
-            // Update drawer if it's showing the matched feature
-            setSelectedNode((prev) => {
-                if (prev?.featureId !== event.featureId)
-                    return prev;
-                return {
-                    ...prev,
-                    state: newState,
-                    ...(newLifecycle !== undefined && { lifecycle: newLifecycle }),
-                };
-            });
         }
         // Debounced background reconciliation (3s after last SSE event)
         clearTimeout(reconcileTimerRef.current);
@@ -189,29 +171,6 @@ export function useControlCenterState(initialNodes, initialEdges) {
     const onNodesChange = useCallback((changes) => {
         setNodes((ns) => applyNodeChanges(changes, ns));
     }, []);
-    const clearSelection = useCallback(() => {
-        setSelectedNode(null);
-    }, []);
-    const handleNodeClick = useCallback((_event, node) => {
-        if (node.type === 'featureNode') {
-            const data = node.data;
-            if (data.state === 'creating')
-                return;
-            clickSound.play();
-            setIsCreateDrawerOpen(false);
-            setSelectedNode(data);
-        }
-    }, [clickSound]);
-    // Keyboard shortcut: Escape to deselect
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
-                clearSelection();
-            }
-        };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [clearSelection]);
     const handleConnect = useCallback((connection) => {
         if (!connection.source || !connection.target)
             return;
@@ -342,76 +301,25 @@ export function useControlCenterState(initialNodes, initialEdges) {
                 },
             ]);
         }
-        if (newFeatureData.state !== 'creating') {
-            setSelectedNode(newFeatureData);
-        }
         return id;
     }, [setEdges]);
-    const handleAddFeature = useCallback(() => {
-        clickSound.play();
-        setSelectedNode(null);
-        setIsCreateDrawerOpen(true);
-    }, [clickSound]);
-    const [pendingParentFeatureId, setPendingParentFeatureId] = useState();
-    const handleCreateFeatureSubmit = useCallback((data) => {
-        // 1. Insert optimistic node instantly
-        // For child features, connect to the parent feature node instead of the repo node
-        const sourceNodeId = pendingParentFeatureId
-            ? `feat-${pendingParentFeatureId}`
-            : pendingRepoNodeId;
-        const tempId = createFeatureNode(sourceNodeId, {
-            state: 'creating',
-            name: data.name,
-            description: data.description,
-            repositoryPath: data.repositoryPath,
-        }, pendingParentFeatureId ? 'dependencyEdge' : undefined);
-        // 2. Close drawer and clear pending state immediately
-        setIsCreateDrawerOpen(false);
-        setPendingRepoNodeId(null);
-        setPendingParentFeatureId(undefined);
-        // 3. Fire server action in the background
-        createFeature(data)
-            .then((result) => {
-            if (result.error) {
-                // Rollback: remove optimistic node and edge
-                setNodes((prev) => prev.filter((n) => n.id !== tempId));
-                setEdges((prev) => prev.filter((e) => e.target !== tempId));
-                toast.error(result.error);
-                return;
-            }
-            createSound.play();
-            router.refresh();
-        })
-            .catch(() => {
-            // Rollback: remove optimistic node and edge
-            setNodes((prev) => prev.filter((n) => n.id !== tempId));
-            setEdges((prev) => prev.filter((e) => e.target !== tempId));
-            toast.error('Failed to create feature');
-        });
-    }, [router, createFeatureNode, pendingRepoNodeId, createSound, pendingParentFeatureId, setEdges]);
-    const closeCreateDrawer = useCallback(() => {
-        setIsCreateDrawerOpen(false);
-        setPendingParentFeatureId(undefined);
-    }, []);
     const handleDeleteFeature = useCallback(async (featureId) => {
-        setIsDeleting(true);
         try {
             const result = await deleteFeature(featureId);
             if (result.error) {
                 toast.error(result.error);
                 return;
             }
-            setSelectedNode(null);
             setNodes((currentNodes) => {
                 const remainingNodes = currentNodes.filter((n) => n.id !== featureId);
                 const remainingEdges = edges.filter((e) => e.source !== featureId && e.target !== featureId);
-                const result = layoutWithDagre(remainingNodes, remainingEdges, {
+                const layoutResult = layoutWithDagre(remainingNodes, remainingEdges, {
                     direction: 'LR',
                     ranksep: 200,
                     nodesep: 60,
                 });
-                setEdges(result.edges);
-                return result.nodes;
+                setEdges(layoutResult.edges);
+                return layoutResult.nodes;
             });
             deleteSound.play();
             toast.success('Feature deleted successfully');
@@ -420,9 +328,6 @@ export function useControlCenterState(initialNodes, initialEdges) {
         catch {
             toast.error('Failed to delete feature');
         }
-        finally {
-            setIsDeleting(false);
-        }
     }, [router, edges, deleteSound, setEdges]);
     const handleDeleteRepository = useCallback(async (repositoryId) => {
         const repoNodeId = `repo-${repositoryId}`;
@@ -445,24 +350,6 @@ export function useControlCenterState(initialNodes, initialEdges) {
             router.refresh();
         }
     }, [router, deleteSound, setEdges]);
-    const handleAddFeatureToRepo = useCallback((repoNodeId) => {
-        clickSound.play();
-        setSelectedNode(null);
-        setPendingRepoNodeId(repoNodeId);
-        setIsCreateDrawerOpen(true);
-    }, [clickSound]);
-    const handleAddFeatureToFeature = useCallback((featureNodeId) => {
-        // Extract feature ID from node ID (format: "feat-<uuid>")
-        const featureId = featureNodeId.startsWith('feat-') ? featureNodeId.slice(5) : featureNodeId;
-        // Find the repo node that owns this feature
-        const repoEdge = edges.find((e) => e.target === featureNodeId);
-        const repoNodeId = repoEdge?.source ?? null;
-        clickSound.play();
-        setSelectedNode(null);
-        setPendingRepoNodeId(repoNodeId);
-        setPendingParentFeatureId(featureId);
-        setIsCreateDrawerOpen(true);
-    }, [edges, clickSound]);
     const handleLayout = useCallback((direction) => {
         setNodes((currentNodes) => {
             const currentEdges = edges;
@@ -553,43 +440,15 @@ export function useControlCenterState(initialNodes, initialEdges) {
             toast.error('Failed to add repository');
         });
     }, [router, createSound, setEdges]);
-    // Ref keeps latest nodes so selectFeatureById has a stable identity
-    const nodesRef = useRef(nodes);
-    nodesRef.current = nodes;
-    const selectFeatureById = useCallback((featureId) => {
-        const node = nodesRef.current.find((n) => n.type === 'featureNode' && n.data.featureId === featureId);
-        if (node) {
-            const data = node.data;
-            if (data.state !== 'creating') {
-                setIsCreateDrawerOpen(false);
-                setSelectedNode(data);
-            }
-        }
-    }, []);
-    const pendingNode = pendingRepoNodeId ? nodes.find((n) => n.id === pendingRepoNodeId) : null;
-    const pendingRepositoryPath = pendingNode?.data?.repositoryPath ?? '';
     return {
         nodes,
         edges,
-        selectedNode,
-        isCreateDrawerOpen,
-        pendingRepositoryPath,
-        pendingParentFeatureId,
         onNodesChange,
         handleConnect,
-        clearSelection,
-        handleNodeClick,
-        handleAddFeature,
-        handleAddFeatureToRepo,
-        handleAddFeatureToFeature,
         handleAddRepository,
         handleLayout,
-        handleCreateFeatureSubmit,
-        closeCreateDrawer,
         handleDeleteFeature,
         handleDeleteRepository,
-        isDeleting,
         createFeatureNode,
-        selectFeatureById,
     };
 }

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts

@@ -6,6 +6,7 @@ export type CanvasNodeType = FeatureNodeType | RepositoryNodeType | AddRepositor
 export interface FeaturesCanvasProps {
     nodes: CanvasNodeType[];
     edges: Edge[];
+    selectedFeatureId?: string | null;
     onNodesChange?: (changes: NodeChange<CanvasNodeType>[]) => void;
     onAddFeature?: () => void;
     onNodeAction?: (nodeId: string) => void;
@@ -22,5 +23,5 @@ export interface FeaturesCanvasProps {
     toolbar?: React.ReactNode;
     emptyState?: React.ReactNode;
 }
-export declare function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositoryClick, onRepositoryDelete, onFeatureDelete, onRepositorySelect, onCanvasDrag, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturesCanvas({ nodes, edges, selectedFeatureId, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositoryClick, onRepositoryDelete, onFeatureDelete, onRepositorySelect, onCanvasDrag, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=features-canvas.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAGrF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAE1F,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CA4HrB"}
+{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKlE,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAGrF,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAE1F,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAmIrB"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -9,7 +9,7 @@ import { FeatureNode } from '../../common/feature-node/index.js';
 import { RepositoryNode } from '../../common/repository-node/index.js';
 import { AddRepositoryNode } from '../../common/add-repository-node/index.js';
 import { DependencyEdge } from './dependency-edge.js';
-export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositoryClick, onRepositoryDelete, onFeatureDelete, onRepositorySelect, onCanvasDrag, toolbar, emptyState, }) {
+export function FeaturesCanvas({ nodes, edges, selectedFeatureId, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositoryClick, onRepositoryDelete, onFeatureDelete, onRepositorySelect, onCanvasDrag, toolbar, emptyState, }) {
     const nodeTypes = useMemo(() => ({
         featureNode: FeatureNode,
         repositoryNode: RepositoryNode,
@@ -31,6 +31,11 @@ export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNo
     }, [nodes, edges]);
     const enrichedNodes = useMemo(() => nodes.map((node) => ({
         ...node,
+        // React Flow passes `selected` as a prop to the node component
+        ...(node.type === 'featureNode' && {
+            selected: selectedFeatureId != null &&
+                node.data.featureId === selectedFeatureId,
+        }),
         data: {
             ...node.data,
             showHandles: edges.length > 0,
@@ -53,6 +58,7 @@ export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNo
     })), [
         nodes,
         edges.length,
+        selectedFeatureId,
         onNodeAction,
         onNodeSettings,
         onFeatureDelete,

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAapD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA0CD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAQnD"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-shell/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcpD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+CD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAQnD"}

package/dist/src/presentation/web/components/layouts/app-shell/app-shell.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import { useRouter } from 'next/navigation';
 import { SidebarProvider, SidebarInset } from '../../ui/sidebar.js';
 import { AppSidebar } from '../../layouts/app-sidebar/index.js';
 import { AddRepositoryButton } from '../../common/add-repository-node/index.js';
@@ -11,15 +12,16 @@ import { SidebarFeaturesProvider, useSidebarFeaturesContext, } from '../../../ho
 import { useNotifications } from '../../../hooks/use-notifications.js';
 /** Inner shell that consumes the agent-events context for notifications. */
 function AppShellInner({ children }) {
+    const router = useRouter();
     // Subscribe to agent lifecycle events and dispatch toast/browser notifications
     useNotifications();
     const { features } = useSidebarFeaturesContext();
     const handleNewFeature = useCallback(() => {
-        window.dispatchEvent(new CustomEvent('shep:open-create-drawer'));
-    }, []);
+        router.push('/create');
+    }, [router]);
     const handleFeatureClick = useCallback((featureId) => {
-        window.dispatchEvent(new CustomEvent('shep:select-feature', { detail: { featureId } }));
-    }, []);
+        router.push(`/feature/${featureId}`);
+    }, [router]);
     const handleRepositorySelect = useCallback((path) => {
         window.dispatchEvent(new CustomEvent('shep:add-repository', { detail: { path } }));
     }, []);

package/dist/src/presentation/web/hooks/use-deployment-logs.d.ts

@@ -0,0 +1,7 @@
+import type { LogEntry } from '../../../../packages/core/src/application/ports/output/services/deployment-service.interface.js';
+export interface UseDeploymentLogsResult {
+    logs: LogEntry[];
+    isConnected: boolean;
+}
+export declare function useDeploymentLogs(targetId: string | null | undefined): UseDeploymentLogsResult;
+//# sourceMappingURL=use-deployment-logs.d.ts.map

package/dist/src/presentation/web/hooks/use-deployment-logs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-deployment-logs.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/hooks/use-deployment-logs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6EAA6E,CAAC;AAG5G,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,uBAAuB,CAuD9F"}