@shepai/cli 1.52.2 → 1.53.0

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { approveFeature } from '../../../app/actions/approve-feature.js';
 import { rejectFeature } from '../../../app/actions/reject-feature.js';
@@ -17,7 +17,16 @@ import { NotificationPermissionBanner } from '../../common/notification-permissi
 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, } = useControlCenterState(initialNodes, initialEdges);
+    const { nodes, edges, selectedNode, isCreateDrawerOpen, isDeleting, pendingRepositoryPath, onNodesChange, handleConnect, handleAddFeature, handleAddFeatureToRepo, handleAddFeatureToFeature, handleAddRepository, handleNodeClick, clearSelection, handleCreateFeatureSubmit, handleDeleteFeature, handleDeleteRepository, closeCreateDrawer, pendingParentFeatureId, } = useControlCenterState(initialNodes, initialEdges);
+    // Extract 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('#')), // exclude optimistic temp nodes
+    [nodes]);
     // Workflow defaults for the create-feature drawer
     const [workflowDefaults, setWorkflowDefaults] = useState();
     useEffect(() => {
@@ -225,7 +234,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
         return () => window.removeEventListener('shep:open-create-drawer', handler);
     }, [handleAddFeature]);
     if (!hasRepositories) {
-        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }), _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }), _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults, features: featureOptions, initialParentId: pendingParentFeatureId })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: clearSelection, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryDelete: handleDeleteRepository, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(FeatureDrawer, { selectedNode: showPrdDrawer || showTechDecisionsDrawer || showMergeReviewDrawer ? null : selectedNode, onClose: clearSelection, onDelete: handleDeleteFeature, isDeleting: isDeleting }), showPrdDrawer ? (_jsx(PrdQuestionnaireDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureDescription: selectedNode?.description, featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: questionnaireData, selections: prdSelections, onSelect: handlePrdSelect, onApprove: handlePrdApprove, onReject: handlePrdReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingQuestionnaire })) : null, showTechDecisionsDrawer ? (_jsx(TechDecisionsDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: techDecisionsData, onApprove: handleTechDecisionsApprove, onReject: handleTechDecisionsReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingTechDecisions })) : null, showMergeReviewDrawer ? (_jsx(MergeReviewDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: mergeReviewData, onApprove: handleMergeApprove, onReject: handleMergeReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingMergeReview })) : null, _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NotificationPermissionBanner, {}), _jsx(FeaturesCanvas, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeAction: handleAddFeatureToFeature, onNodeClick: handleNodeClick, onPaneClick: clearSelection, onRepositoryAdd: handleAddFeatureToRepo, onRepositoryDelete: handleDeleteRepository, onRepositorySelect: handleAddRepository, emptyState: _jsx(ControlCenterEmptyState, { onRepositorySelect: handleAddRepository }) }), _jsx(FeatureDrawer, { selectedNode: showPrdDrawer || showTechDecisionsDrawer || showMergeReviewDrawer ? null : selectedNode, onClose: clearSelection, onDelete: handleDeleteFeature, isDeleting: isDeleting }), showPrdDrawer ? (_jsx(PrdQuestionnaireDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureDescription: selectedNode?.description, featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: questionnaireData, selections: prdSelections, onSelect: handlePrdSelect, onApprove: handlePrdApprove, onReject: handlePrdReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingQuestionnaire })) : null, showTechDecisionsDrawer ? (_jsx(TechDecisionsDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: techDecisionsData, onApprove: handleTechDecisionsApprove, onReject: handleTechDecisionsReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingTechDecisions })) : null, showMergeReviewDrawer ? (_jsx(MergeReviewDrawer, { open: true, onClose: clearSelection, featureName: selectedNode?.name ?? '', featureId: selectedNode?.featureId, repositoryPath: selectedNode?.repositoryPath, branch: selectedNode?.branch, specPath: selectedNode?.specPath, data: mergeReviewData, onApprove: handleMergeApprove, onReject: handleMergeReject, isRejecting: isRejecting, onDelete: handleDeleteFeature, isDeleting: isDeleting, isProcessing: isLoadingMergeReview })) : null, _jsx(FeatureCreateDrawer, { open: isCreateDrawerOpen, onClose: closeCreateDrawer, onSubmit: handleCreateFeatureSubmit, repositoryPath: pendingRepositoryPath, workflowDefaults: workflowDefaults, features: featureOptions, initialParentId: pendingParentFeatureId })] }));
 }

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

@@ -9,6 +9,8 @@ export interface ControlCenterState {
     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;

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;AAOhF,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,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;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAshBpB"}
+{"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;AAOhF,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;CACb;AAID,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAAE,EAC9B,YAAY,EAAE,IAAI,EAAE,GACnB,kBAAkB,CAmjBpB"}

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

@@ -134,7 +134,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
             return currentNodes;
         });
     }, [setEdges]);
-    const createFeatureNode = useCallback((sourceNodeId, dataOverride) => {
+    const createFeatureNode = useCallback((sourceNodeId, dataOverride, edgeType) => {
         const id = `feature-${Date.now()}-${nextFeatureId++}`;
         const newFeatureData = {
             name: dataOverride?.name ?? 'New Feature',
@@ -227,10 +227,12 @@ export function useControlCenterState(initialNodes, initialEdges) {
             setEdges((currentEdges) => [
                 ...currentEdges,
                 {
-                    id: `edge-${sourceNodeId}-${id}`,
+                    id: edgeType === 'dependencyEdge'
+                        ? `dep-${sourceNodeId}-${id}`
+                        : `edge-${sourceNodeId}-${id}`,
                     source: sourceNodeId,
                     target: id,
-                    style: { strokeDasharray: '5 5' },
+                    ...(edgeType ? { type: edgeType } : { style: { strokeDasharray: '5 5' } }),
                 },
             ]);
         }
@@ -243,17 +245,23 @@ export function useControlCenterState(initialNodes, initialEdges) {
         setSelectedNode(null);
         setIsCreateDrawerOpen(true);
     }, []);
+    const [pendingParentFeatureId, setPendingParentFeatureId] = useState();
     const handleCreateFeatureSubmit = useCallback((data) => {
         // 1. Insert optimistic node instantly
-        const tempId = createFeatureNode(pendingRepoNodeId, {
+        // 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) => {
@@ -272,9 +280,10 @@ export function useControlCenterState(initialNodes, initialEdges) {
             setEdges((prev) => prev.filter((e) => e.target !== tempId));
             toast.error('Failed to create feature');
         });
-    }, [router, createFeatureNode, pendingRepoNodeId, setEdges]);
+    }, [router, createFeatureNode, pendingRepoNodeId, pendingParentFeatureId, setEdges]);
     const closeCreateDrawer = useCallback(() => {
         setIsCreateDrawerOpen(false);
+        setPendingParentFeatureId(undefined);
     }, []);
     const handleDeleteFeature = useCallback(async (featureId) => {
         setIsDeleting(true);
@@ -332,8 +341,16 @@ export function useControlCenterState(initialNodes, initialEdges) {
         setIsCreateDrawerOpen(true);
     }, []);
     const handleAddFeatureToFeature = useCallback((featureNodeId) => {
-        createFeatureNode(featureNodeId);
-    }, [createFeatureNode]);
+        // 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;
+        setSelectedNode(null);
+        setPendingRepoNodeId(repoNodeId);
+        setPendingParentFeatureId(featureId);
+        setIsCreateDrawerOpen(true);
+    }, [edges]);
     const handleLayout = useCallback((direction) => {
         setNodes((currentNodes) => {
             const currentEdges = edges;
@@ -431,6 +448,7 @@ export function useControlCenterState(initialNodes, initialEdges) {
         selectedNode,
         isCreateDrawerOpen,
         pendingRepositoryPath,
+        pendingParentFeatureId,
         onNodesChange,
         handleConnect,
         clearSelection,

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

@@ -0,0 +1,7 @@
+import type { EdgeProps } from '@xyflow/react';
+/**
+ * Custom React Flow edge for parent→child feature dependencies.
+ * Uses bezier curves and dashed style matching repo→feature edges.
+ */
+export declare function DependencyEdge(props: EdgeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dependency-edge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dependency-edge.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/dependency-edge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,2CAmB9C"}

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

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseEdge, getBezierPath } from '@xyflow/react';
+/**
+ * Custom React Flow edge for parent→child feature dependencies.
+ * Uses bezier curves and dashed style matching repo→feature edges.
+ */
+export function DependencyEdge(props) {
+    const [edgePath] = getBezierPath({
+        sourceX: props.sourceX,
+        sourceY: props.sourceY,
+        targetX: props.targetX,
+        targetY: props.targetY,
+        sourcePosition: props.sourcePosition,
+        targetPosition: props.targetPosition,
+    });
+    return (_jsx(BaseEdge, { id: props.id, path: edgePath, style: {
+            strokeDasharray: '5 5',
+        } }));
+}

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import '@xyflow/react/dist/style.css';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;
+//# sourceMappingURL=dependency-edge.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dependency-edge.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/dependency-edge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,OAAO,8BAA8B,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAWX,CAAC;AAEF,eAAe,IAAI,CAAC;AA2BpB,eAAO,MAAM,OAAO,EAAE,QAgCrB,CAAC"}

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReactFlow, ReactFlowProvider } from '@xyflow/react';
+import { DependencyEdge } from './dependency-edge.js';
+import { FeatureNode } from '../../common/feature-node/index.js';
+import '@xyflow/react/dist/style.css';
+const meta = {
+    title: 'Features/DependencyEdge',
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '800px', height: '400px' }, children: _jsx(ReactFlowProvider, { children: _jsx(Story, {}) }) })),
+    ],
+};
+export default meta;
+const parentData = {
+    name: 'Auth System',
+    description: 'User authentication',
+    featureId: 'feat-1234',
+    lifecycle: 'implementation',
+    state: 'running',
+    progress: 60,
+    repositoryPath: '/repo',
+    branch: 'feat/auth',
+    showHandles: true,
+};
+const childData = {
+    name: 'Login Page',
+    description: 'Login UI component',
+    featureId: 'feat-5678',
+    lifecycle: 'requirements',
+    state: 'blocked',
+    progress: 0,
+    repositoryPath: '/repo',
+    branch: 'feat/login',
+    blockedBy: 'Auth System',
+    showHandles: true,
+};
+export const Default = {
+    render: () => (_jsx(ReactFlow, { nodes: [
+            {
+                id: 'parent',
+                type: 'featureNode',
+                position: { x: 50, y: 100 },
+                data: parentData,
+            },
+            {
+                id: 'child',
+                type: 'featureNode',
+                position: { x: 450, y: 100 },
+                data: childData,
+            },
+        ], edges: [
+            {
+                id: 'dep-1',
+                source: 'parent',
+                target: 'child',
+                type: 'dependencyEdge',
+            },
+        ], nodeTypes: { featureNode: FeatureNode }, edgeTypes: { dependencyEdge: DependencyEdge }, fitView: true, nodesDraggable: false, nodesConnectable: false })),
+};

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;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,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,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,kBAAkB,EAClB,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CA2GrB"}
+{"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,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,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,kBAAkB,EAClB,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAmHrB"}

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

@@ -8,12 +8,16 @@ import { EmptyState } from '../../common/empty-state/index.js';
 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, onRepositoryDelete, onRepositorySelect, toolbar, emptyState, }) {
     const nodeTypes = useMemo(() => ({
         featureNode: FeatureNode,
         repositoryNode: RepositoryNode,
         addRepositoryNode: AddRepositoryNode,
     }), []);
+    const edgeTypes = useMemo(() => ({
+        dependencyEdge: DependencyEdge,
+    }), []);
     // Prevent a feature from having more than one source repository
     const isValidConnection = useCallback((connection) => {
         const sourceNode = nodes.find((n) => n.id === connection.source);
@@ -59,5 +63,5 @@ export function FeaturesCanvas({ nodes, edges, onNodesChange, onAddFeature, onNo
         }
         return (_jsx("div", { "data-testid": "features-canvas-empty", children: _jsx(EmptyState, { title: "No features yet", description: "Get started by creating your first feature.", action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Feature"] }) }) }));
     }
-    return (_jsx("div", { "data-testid": "features-canvas", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }) }));
+    return (_jsx("div", { "data-testid": "features-canvas", className: "h-full w-full", children: _jsx(ReactFlowProvider, { children: _jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, isValidConnection: isValidConnection, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, defaultViewport: { x: 30, y: 30, zoom: 0.85 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, children: [_jsx(Background, {}), _jsx(Controls, {}), toolbar] }) }) }));
 }