@shepai/cli 1.20.1 → 1.22.0

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

@@ -0,0 +1,9 @@
+import type { Edge } from '@xyflow/react';
+import type { CanvasNodeType } from '../../features/features-canvas/index.js';
+interface ControlCenterInnerProps {
+    initialNodes: CanvasNodeType[];
+    initialEdges: Edge[];
+}
+export declare function ControlCenterInner({ initialNodes, initialEdges }: ControlCenterInnerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=control-center-inner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAI5E,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,2CA6BzF"}

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FeaturesCanvas } from '../../features/features-canvas/index.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, onNodesChange, handleConnect, handleAddFeature, handleAddFeatureToRepo, handleAddFeatureToFeature, handleAddRepository, handleNodeClick, clearSelection, } = useControlCenterState(initialNodes, initialEdges);
+    return (_jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: clearSelection, onRepositoryAdd: handleAddFeatureToRepo, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }));
+}

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

@@ -0,0 +1,8 @@
+import type { Edge } from '@xyflow/react';
+import type { CanvasNodeType } from '../../features/features-canvas/index.js';
+export interface ControlCenterProps {
+    initialNodes: CanvasNodeType[];
+    initialEdges: Edge[];
+}
+export declare function ControlCenter({ initialNodes, initialEdges }: 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

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } 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 }) }) }));
+}

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlCenter } from './control-center.js';
+declare const meta: Meta<typeof ControlCenter>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+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.
+ *
+ * Demonstrates the Vertical / Horizontal toolbar buttons that re-layout the graph.
+ * Initial layout is LR (horizontal). Click "Vertical" to switch to TB, or
+ * "Horizontal" to switch back.
+ */
+export declare const DagreLayout: Story;
+//# sourceMappingURL=control-center.stories.d.ts.map

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

@@ -0,0 +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;AAOjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAcpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4DnC,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;AA8HF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC"}

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

@@ -0,0 +1,249 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ControlCenter } from './control-center.js';
+import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
+const meta = {
+    title: 'Features/ControlCenter',
+    component: ControlCenter,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '100vh' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const featureNodes = [
+    {
+        id: 'feat-1',
+        type: 'featureNode',
+        position: { x: 400, y: 0 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+        },
+    },
+    {
+        id: 'feat-2',
+        type: 'featureNode',
+        position: { x: 400, y: 230 },
+        data: {
+            name: 'User Dashboard',
+            description: 'Main dashboard layout and widgets',
+            featureId: '#f2',
+            lifecycle: 'research',
+            state: 'action-required',
+            progress: 20,
+        },
+    },
+    {
+        id: 'feat-3',
+        type: 'featureNode',
+        position: { x: 800, y: 115 },
+        data: {
+            name: 'API Gateway',
+            description: 'Rate limiting and routing',
+            featureId: '#f3',
+            lifecycle: 'deploy',
+            state: 'done',
+            progress: 100,
+        },
+    },
+];
+const repoNode = {
+    id: 'repo-1',
+    type: 'repositoryNode',
+    position: { x: 50, y: 115 },
+    data: { name: 'shep-ai/cli' },
+};
+const addRepoNode = {
+    id: 'add-repo',
+    type: 'addRepositoryNode',
+    position: { x: 50, y: 302 },
+    data: {},
+};
+const dashedEdge = { style: { strokeDasharray: '5 5' } };
+export const Empty = {
+    args: {
+        initialNodes: [],
+        initialEdges: [],
+    },
+};
+export const WithFeatures = {
+    args: {
+        initialNodes: featureNodes,
+        initialEdges: [
+            { id: 'e1-3', source: 'feat-1', target: 'feat-3' },
+            { id: 'e2-3', source: 'feat-2', target: 'feat-3' },
+        ],
+    },
+};
+export const WithToolbar = {
+    args: {
+        initialNodes: [featureNodes[0], featureNodes[1]],
+        initialEdges: [],
+    },
+};
+export const WithNodeActions = {
+    args: {
+        initialNodes: [repoNode, addRepoNode, ...featureNodes],
+        initialEdges: [
+            { id: 'e-repo-f1', source: 'repo-1', target: 'feat-1', ...dashedEdge },
+            { id: 'e-repo-f2', source: 'repo-1', target: 'feat-2', ...dashedEdge },
+            { id: 'e1-3', source: 'feat-1', target: 'feat-3' },
+        ],
+    },
+};
+/**
+ * Interactive story — starts with just an "Add Repository" button.
+ *
+ * User flow:
+ * 1. Click "Add Repository" → native folder picker → select a folder → repo node appears
+ * 2. Hover the repo node → click (+) → a new feature node appears connected to the repo
+ * 3. Hover the feature node → click (+) → another feature appears connected to the first
+ *
+ * You can also use the toolbar "Add Feature" button to create unconnected features.
+ */
+export const Interactive = {
+    args: {
+        initialNodes: [
+            {
+                id: 'add-repo',
+                type: 'addRepositoryNode',
+                position: { x: 50, y: 50 },
+                data: {},
+            },
+        ],
+        initialEdges: [],
+    },
+};
+// --- Dagre-layouted story: multiple repos with feature trees ---
+const dagreRepoNodes = [
+    {
+        id: 'repo-cli',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'shep-ai/cli' },
+    },
+    {
+        id: 'repo-web',
+        type: 'repositoryNode',
+        position: { x: 0, y: 0 },
+        data: { name: 'shep-ai/web' },
+    },
+];
+const dagreFeatureNodes = [
+    {
+        id: 'feat-auth',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Auth Module',
+            description: 'OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 65,
+        },
+    },
+    {
+        id: 'feat-sso',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'SSO Integration',
+            description: 'Single sign-on across services',
+            featureId: '#f2',
+            lifecycle: 'research',
+            state: 'action-required',
+            progress: 20,
+        },
+    },
+    {
+        id: 'feat-dashboard',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'User Dashboard',
+            description: 'Main dashboard layout and widgets',
+            featureId: '#f3',
+            lifecycle: 'requirements',
+            state: 'running',
+            progress: 10,
+        },
+    },
+    {
+        id: 'feat-gateway',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'API Gateway',
+            description: 'Rate limiting and routing',
+            featureId: '#f4',
+            lifecycle: 'deploy',
+            state: 'done',
+            progress: 100,
+        },
+    },
+    {
+        id: 'feat-admin',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        data: {
+            name: 'Admin Panel',
+            description: 'Internal admin tools',
+            featureId: '#f5',
+            lifecycle: 'review',
+            state: 'blocked',
+            progress: 40,
+            blockedBy: 'API Gateway',
+        },
+    },
+];
+const dagreAddRepo = {
+    id: 'add-repo',
+    type: 'addRepositoryNode',
+    position: { x: 0, y: 0 },
+    data: {},
+};
+const dagreNodesRaw = [...dagreRepoNodes, ...dagreFeatureNodes, dagreAddRepo];
+const dagreEdges = [
+    // cli repo → Auth, SSO
+    { id: 'e-cli-auth', source: 'repo-cli', target: 'feat-auth', style: { strokeDasharray: '5 5' } },
+    { id: 'e-cli-sso', source: 'repo-cli', target: 'feat-sso', style: { strokeDasharray: '5 5' } },
+    // web repo → Dashboard, Admin
+    {
+        id: 'e-web-dash',
+        source: 'repo-web',
+        target: 'feat-dashboard',
+        style: { strokeDasharray: '5 5' },
+    },
+    {
+        id: 'e-web-admin',
+        source: 'repo-web',
+        target: 'feat-admin',
+        style: { strokeDasharray: '5 5' },
+    },
+    // Feature dependencies: Auth → Gateway, SSO → Gateway, Gateway → Admin
+    { id: 'e-auth-gw', source: 'feat-auth', target: 'feat-gateway' },
+    { id: 'e-sso-gw', source: 'feat-sso', target: 'feat-gateway' },
+    { id: 'e-gw-admin', source: 'feat-gateway', target: 'feat-admin' },
+];
+const { nodes: dagreLayoutedNodes, edges: dagreLayoutedEdges } = layoutWithDagre(dagreNodesRaw, dagreEdges, { direction: 'LR' });
+/**
+ * Dagre auto-layout story — two repositories with interconnected feature trees.
+ *
+ * Demonstrates the Vertical / Horizontal toolbar buttons that re-layout the graph.
+ * Initial layout is LR (horizontal). Click "Vertical" to switch to TB, or
+ * "Horizontal" to switch back.
+ */
+export const DagreLayout = {
+    args: {
+        initialNodes: dagreLayoutedNodes,
+        initialEdges: dagreLayoutedEdges,
+    },
+};

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

@@ -0,0 +1,3 @@
+export { ControlCenter, type ControlCenterProps } from './control-center.js';
+export { useControlCenterState, type ControlCenterState } from './use-control-center-state.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,KAAK,kBAAkB,EAAE,MAAM,4BAA4B,CAAC"}

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

@@ -0,0 +1,2 @@
+export { ControlCenter } from './control-center.js';
+export { useControlCenterState } from './use-control-center-state.js';

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

@@ -0,0 +1,20 @@
+import type { Connection, Edge, NodeChange } from '@xyflow/react';
+import type { FeatureNodeData } from '../../common/feature-node/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;
+    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;
+}
+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

@@ -0,0 +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":"AAIA,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;AAEhF,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,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;CACpD;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CA6PpB"}

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

@@ -0,0 +1,219 @@
+'use client';
+import { useState, useCallback, useEffect } from 'react';
+import { applyNodeChanges } from '@xyflow/react';
+import { layoutWithDagre } from '../../../lib/layout-with-dagre.js';
+let nextFeatureId = 0;
+export function useControlCenterState(initialNodes, initialEdges) {
+    const [nodes, setNodes] = useState(initialNodes);
+    const [edges, setEdges] = useState(initialEdges);
+    const [selectedNode, setSelectedNode] = useState(null);
+    const onNodesChange = useCallback((changes) => {
+        setNodes((ns) => applyNodeChanges(changes, ns));
+    }, []);
+    const clearSelection = useCallback(() => {
+        setSelectedNode(null);
+    }, []);
+    const handleNodeClick = useCallback((_event, node) => {
+        if (node.type === 'featureNode') {
+            setSelectedNode(node.data);
+        }
+    }, []);
+    // 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;
+        setNodes((currentNodes) => {
+            const sourceNode = currentNodes.find((n) => n.id === connection.source);
+            if (sourceNode?.type !== 'repositoryNode')
+                return currentNodes;
+            // Block if target feature already has a repo source
+            setEdges((currentEdges) => {
+                const targetAlreadyHasRepo = currentEdges.some((e) => {
+                    const edgeSource = currentNodes.find((n) => n.id === e.source);
+                    return edgeSource?.type === 'repositoryNode' && e.target === connection.target;
+                });
+                if (targetAlreadyHasRepo)
+                    return currentEdges;
+                return [
+                    ...currentEdges,
+                    {
+                        id: `edge-${connection.source}-${connection.target}`,
+                        source: connection.source,
+                        target: connection.target,
+                        style: { strokeDasharray: '5 5' },
+                    },
+                ];
+            });
+            return currentNodes;
+        });
+    }, []);
+    const createFeatureNode = useCallback((sourceNodeId) => {
+        const id = `feature-${Date.now()}-${nextFeatureId++}`;
+        const newFeatureData = {
+            name: 'New Feature',
+            description: 'Describe what this feature does',
+            featureId: `#${id.slice(-4)}`,
+            lifecycle: 'requirements',
+            state: 'running',
+            progress: 0,
+        };
+        setNodes((currentNodes) => {
+            // Find siblings connected to the same parent
+            const siblingIds = sourceNodeId
+                ? new Set(edges.filter((e) => e.source === sourceNodeId).map((e) => e.target))
+                : new Set();
+            const siblings = currentNodes.filter((n) => siblingIds.has(n.id));
+            let position;
+            if (siblings.length > 0) {
+                // Place below the bottom-most sibling, matching X
+                const sortedYs = siblings.map((n) => n.position.y).sort((a, b) => a - b);
+                const maxY = sortedYs[sortedYs.length - 1];
+                // Derive gap from existing spacing between siblings, or use default
+                const gap = sortedYs.length > 1 ? sortedYs[1] - sortedYs[0] : 160;
+                position = { x: siblings[0].position.x, y: maxY + gap };
+            }
+            else if (sourceNodeId) {
+                // First child — position to the right of parent
+                const parent = currentNodes.find((n) => n.id === sourceNodeId);
+                // Parent width + consistent 56px gap (repo: 224+56=280, feature: 288+56=344)
+                const xOffset = parent?.type === 'featureNode' ? 344 : 280;
+                position = parent
+                    ? { x: parent.position.x + xOffset, y: parent.position.y }
+                    : { x: 400, y: 200 };
+            }
+            else {
+                // Standalone feature — place below all existing nodes
+                const maxY = currentNodes.length > 0 ? Math.max(...currentNodes.map((n) => n.position.y)) : 0;
+                position = { x: 400, y: currentNodes.length > 0 ? maxY + 160 : 200 };
+            }
+            // The new node's bottom edge (featureNode height = 140)
+            const newBottom = position.y + 140;
+            // Find the old group bottom before adding the new node
+            const groupNodeIds = new Set([sourceNodeId, ...siblingIds]);
+            const oldGroupBottom = currentNodes
+                .filter((n) => groupNodeIds.has(n.id))
+                .reduce((max, n) => {
+                const h = n.type === 'featureNode' ? 140 : 50;
+                return Math.max(max, n.position.y + h);
+            }, 0);
+            // Shift amount: how much the group grew past its old bottom
+            const shift = Math.max(0, newBottom - oldGroupBottom);
+            // Push down all nodes that are below the old group bottom
+            const shifted = shift > 0
+                ? currentNodes.map((n) => {
+                    if (groupNodeIds.has(n.id) || siblingIds.has(n.id))
+                        return n;
+                    if (n.position.y >= oldGroupBottom) {
+                        return { ...n, position: { ...n.position, y: n.position.y + shift } };
+                    }
+                    return n;
+                })
+                : currentNodes;
+            // Re-center the parent node vertically to its children
+            const recentered = sourceNodeId
+                ? shifted.map((n) => {
+                    if (n.id !== sourceNodeId)
+                        return n;
+                    const allChildYs = [...siblings.map((s) => s.position.y), position.y];
+                    const groupCenter = (Math.min(...allChildYs) + Math.max(...allChildYs) + 140) / 2;
+                    const parentHeight = n.type === 'featureNode' ? 140 : 50;
+                    return {
+                        ...n,
+                        position: { ...n.position, y: groupCenter - parentHeight / 2 },
+                    };
+                })
+                : shifted;
+            return [
+                ...recentered,
+                {
+                    id,
+                    type: 'featureNode',
+                    position,
+                    data: newFeatureData,
+                },
+            ];
+        });
+        if (sourceNodeId) {
+            setEdges((currentEdges) => [
+                ...currentEdges,
+                {
+                    id: `edge-${sourceNodeId}-${id}`,
+                    source: sourceNodeId,
+                    target: id,
+                    style: { strokeDasharray: '5 5' },
+                },
+            ]);
+        }
+        setSelectedNode(newFeatureData);
+    }, [edges]);
+    const handleAddFeature = useCallback(() => {
+        createFeatureNode(null);
+    }, [createFeatureNode]);
+    const handleAddFeatureToRepo = useCallback((repoNodeId) => {
+        createFeatureNode(repoNodeId);
+    }, [createFeatureNode]);
+    const handleAddFeatureToFeature = useCallback((featureNodeId) => {
+        createFeatureNode(featureNodeId);
+    }, [createFeatureNode]);
+    const handleLayout = useCallback((direction) => {
+        setNodes((currentNodes) => {
+            const currentEdges = edges;
+            const result = layoutWithDagre(currentNodes, currentEdges, {
+                direction,
+                ranksep: 60,
+                nodesep: 20,
+            });
+            setEdges(result.edges);
+            return result.nodes;
+        });
+    }, [edges]);
+    const handleAddRepository = useCallback((path) => {
+        const id = `repo-${Date.now()}`;
+        setNodes((currentNodes) => {
+            const addRepoNode = currentNodes.find((n) => n.type === 'addRepositoryNode');
+            const position = addRepoNode
+                ? { x: addRepoNode.position.x, y: addRepoNode.position.y }
+                : { x: 50, y: 50 };
+            const newNode = {
+                id,
+                type: 'repositoryNode',
+                position,
+                data: {
+                    name: path
+                        .replace(/[\\/]+$/, '')
+                        .split(/[\\/]/)
+                        .pop() ?? path,
+                },
+            };
+            // Shift the add-repo node down
+            return currentNodes
+                .map((n) => n.type === 'addRepositoryNode'
+                ? { ...n, position: { ...n.position, y: n.position.y + 80 } }
+                : n)
+                .concat(newNode);
+        });
+    }, []);
+    return {
+        nodes,
+        edges,
+        selectedNode,
+        onNodesChange,
+        handleConnect,
+        clearSelection,
+        handleNodeClick,
+        handleAddFeature,
+        handleAddFeatureToRepo,
+        handleAddFeatureToFeature,
+        handleAddRepository,
+        handleLayout,
+    };
+}

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

@@ -0,0 +1,22 @@
+import type { Connection, Edge, NodeChange } from '@xyflow/react';
+import type { FeatureNodeType } from '../../common/feature-node/index.js';
+import type { RepositoryNodeType } from '../../common/repository-node/index.js';
+import type { AddRepositoryNodeType } from '../../common/add-repository-node/index.js';
+export type CanvasNodeType = FeatureNodeType | RepositoryNodeType | AddRepositoryNodeType;
+export interface FeaturesCanvasProps {
+    nodes: CanvasNodeType[];
+    edges: Edge[];
+    onNodesChange?: (changes: NodeChange<CanvasNodeType>[]) => void;
+    onAddFeature?: () => void;
+    onNodeAction?: (nodeId: string) => void;
+    onNodeSettings?: (nodeId: string) => void;
+    onNodeClick?: (event: React.MouseEvent, node: CanvasNodeType) => void;
+    onPaneClick?: (event: React.MouseEvent) => void;
+    onRepositoryAdd?: (repoNodeId: string) => void;
+    onConnect?: (connection: Connection) => void;
+    onRepositorySelect?: (path: string) => void;
+    toolbar?: React.ReactNode;
+    emptyState?: React.ReactNode;
+}
+export declare function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNodeAction, onNodeSettings, onConnect, onNodeClick, onPaneClick, onRepositoryAdd, onRepositorySelect, 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

@@ -0,0 +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,EAAE,MAAM,kCAAkC,CAAC;AAExE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAErF,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,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,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,kBAAkB,EAClB,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAgGrB"}