@shepai/cli 1.92.1 → 1.92.2

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.stories.d.ts

@@ -6,6 +6,8 @@ type Story = StoryObj<typeof meta>;
 export declare const ActionNeeded: Story;
 export declare const InProgress: Story;
 export declare const Done: Story;
+export declare const Blocked: Story;
+export declare const Error: Story;
 export declare const WithClickHandler: Story;
 export declare const WithoutAgent: Story;
 //# sourceMappingURL=feature-list-item.stories.d.ts.map

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-list-item.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-list-item/feature-list-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAgBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}
+{"version":3,"file":"feature-list-item.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-list-item/feature-list-item.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAgBtC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}

package/dist/src/presentation/web/components/common/feature-list-item/feature-list-item.stories.js

@@ -39,6 +39,22 @@ export const Done = {
         modelId: 'gemini-2.5-pro',
     },
 };
+export const Blocked = {
+    args: {
+        name: 'Dependency Resolver',
+        status: 'blocked',
+        agentType: 'claude-code',
+        modelId: 'claude-sonnet-4-6',
+    },
+};
+export const Error = {
+    args: {
+        name: 'Broken Pipeline',
+        status: 'error',
+        agentType: 'cursor',
+        modelId: 'claude-opus-4-6',
+    },
+};
 export const WithClickHandler = {
     args: {
         name: 'API Gateway',

package/dist/src/presentation/web/components/common/feature-status-badges/feature-status-badges.stories.js

@@ -15,31 +15,31 @@ const meta = {
 export default meta;
 export const AllStatuses = {
     args: {
-        counts: { 'action-needed': 2, 'in-progress': 3, done: 5 },
+        counts: { 'action-needed': 2, 'in-progress': 3, blocked: 1, error: 1, done: 5 },
     },
 };
 export const ActionNeededOnly = {
     args: {
-        counts: { 'action-needed': 4, 'in-progress': 0, done: 0 },
+        counts: { 'action-needed': 4, 'in-progress': 0, blocked: 0, error: 0, done: 0 },
     },
 };
 export const InProgressOnly = {
     args: {
-        counts: { 'action-needed': 0, 'in-progress': 2, done: 0 },
+        counts: { 'action-needed': 0, 'in-progress': 2, blocked: 0, error: 0, done: 0 },
     },
 };
 export const DoneOnly = {
     args: {
-        counts: { 'action-needed': 0, 'in-progress': 0, done: 7 },
+        counts: { 'action-needed': 0, 'in-progress': 0, blocked: 0, error: 0, done: 7 },
     },
 };
 export const LargeCounts = {
     args: {
-        counts: { 'action-needed': 12, 'in-progress': 99, done: 150 },
+        counts: { 'action-needed': 12, 'in-progress': 99, blocked: 5, error: 3, done: 150 },
     },
 };
 export const Empty = {
     args: {
-        counts: { 'action-needed': 0, 'in-progress': 0, done: 0 },
+        counts: { 'action-needed': 0, 'in-progress': 0, blocked: 0, error: 0, done: 0 },
     },
 };

package/dist/src/presentation/web/components/common/feature-status-config.d.ts

@@ -1,5 +1,5 @@
 import type { LucideIcon } from 'lucide-react';
-export type FeatureStatus = 'action-needed' | 'in-progress' | 'done';
+export type FeatureStatus = 'action-needed' | 'in-progress' | 'blocked' | 'error' | 'done';
 export interface FeatureStatusConfig {
     icon: LucideIcon;
     iconClass: string;

package/dist/src/presentation/web/components/common/feature-status-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-status-config.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/common/feature-status-config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,MAAM,CAAC;AAErE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,mBAAmB,CAmB1E,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAA6C,CAAC"}
+{"version":3,"file":"feature-status-config.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/common/feature-status-config.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3F,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,aAAa,EAAE,mBAAmB,CA+B1E,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,EAM7C,CAAC"}

package/dist/src/presentation/web/components/common/feature-status-config.js

@@ -1,4 +1,4 @@
-import { CircleAlert, Loader2, CircleCheck } from 'lucide-react';
+import { CircleAlert, Loader2, CircleCheck, Ban, CircleX } from 'lucide-react';
 export const featureStatusConfig = {
     'action-needed': {
         icon: CircleAlert,
@@ -12,6 +12,18 @@ export const featureStatusConfig = {
         bgClass: 'bg-blue-500/10',
         label: 'In Progress',
     },
+    blocked: {
+        icon: Ban,
+        iconClass: 'text-gray-400',
+        bgClass: 'bg-gray-400/10',
+        label: 'Blocked',
+    },
+    error: {
+        icon: CircleX,
+        iconClass: 'text-red-500',
+        bgClass: 'bg-red-500/10',
+        label: 'Error',
+    },
     done: {
         icon: CircleCheck,
         iconClass: 'text-emerald-500',
@@ -19,4 +31,10 @@ export const featureStatusConfig = {
         label: 'Done',
     },
 };
-export const featureStatusOrder = ['action-needed', 'in-progress', 'done'];
+export const featureStatusOrder = [
+    'action-needed',
+    'error',
+    'blocked',
+    'in-progress',
+    'done',
+];

package/dist/src/presentation/web/hooks/sidebar-features-context.d.ts

@@ -11,7 +11,7 @@ export interface SidebarFeatureItem {
     modelId?: string;
 }
 /**
- * Maps a canvas FeatureNodeState to the sidebar's 3-state FeatureStatus.
+ * Maps a canvas FeatureNodeState to the sidebar's 5-state FeatureStatus.
  * Returns `null` for `creating` (optimistic UI) — these should be excluded from the sidebar.
  */
 export declare function mapNodeStateToSidebarStatus(state: FeatureNodeState): FeatureStatus | null;

package/dist/src/presentation/web/hooks/sidebar-features-context.js

@@ -2,18 +2,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState, useMemo } from 'react';
 // ---------------------------------------------------------------------------
-// Pure mapping: FeatureNodeState (6-state) → FeatureStatus (3-state) | null
+// Pure mapping: FeatureNodeState (6-state) → FeatureStatus (5-state) | null
 // ---------------------------------------------------------------------------
 const stateMapping = {
     'action-required': 'action-needed',
     running: 'in-progress',
     done: 'done',
-    blocked: 'in-progress',
-    error: 'in-progress',
+    blocked: 'blocked',
+    error: 'error',
     creating: null,
 };
 /**
- * Maps a canvas FeatureNodeState to the sidebar's 3-state FeatureStatus.
+ * Maps a canvas FeatureNodeState to the sidebar's 5-state FeatureStatus.
  * Returns `null` for `creating` (optimistic UI) — these should be excluded from the sidebar.
  */
 export function mapNodeStateToSidebarStatus(state) {

package/dist/src/presentation/web/lib/layout-with-dagre.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,EAAE,aAIpC,CAAC;AAkCF;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CAoK/B"}
+{"version":3,"file":"layout-with-dagre.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/layout-with-dagre.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,+DAA+D;AAC/D,eAAO,MAAM,sBAAsB,EAAE,aAIpC,CAAC;AAkCF;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,IAAI,EAC5C,KAAK,EAAE,CAAC,EAAE,EACV,KAAK,EAAE,IAAI,EAAE,EACb,IAAI,GAAE,aAAkB,GACvB;IAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,CAyL/B"}

package/dist/src/presentation/web/lib/layout-with-dagre.js

@@ -75,9 +75,15 @@ export function layoutWithDagre(nodes, edges, opts = {}) {
         const size = getNodeSize(node, nodeSize);
         centerMap.set(node.id, { cx: dagreNode.x, cy: dagreNode.y, w: size.width, h: size.height });
     }
-    // Post-process: center each group of children around their parent's
-    // secondary-axis center so the edge fans out symmetrically.
-    // Build parent→children map from the edges.
+    // ── Proper tree layout for the secondary axis ──
+    // Dagre gives us correct primary-axis (rank/X) positions but its secondary-
+    // axis (Y) positioning doesn't respect our tree structure well. Replace it
+    // with a bottom-up tree layout:
+    //   1. Compute subtree heights (leaves → roots)
+    //   2. Position children centered on parent (roots → leaves)
+    // This guarantees: no overlaps, parents centered on children, and straight
+    // lines for 1-to-1 connections at every depth.
+    // Build parent→children map from edges
     const childrenOf = new Map();
     for (const edge of edges) {
         if (!centerMap.has(edge.source) || !centerMap.has(edge.target))
@@ -86,63 +92,80 @@ export function layoutWithDagre(nodes, edges, opts = {}) {
             childrenOf.set(edge.source, []);
         childrenOf.get(edge.source).push(edge.target);
     }
-    for (const [parentId, childIds] of childrenOf) {
-        if (childIds.length <= 1)
-            continue;
-        const parent = centerMap.get(parentId);
-        const parentCenter = isHorizontal ? parent.cy : parent.cx;
-        // Sort children by their current secondary-axis position
-        const sorted = childIds
-            .filter((id) => centerMap.has(id))
-            .sort((a, b) => {
-            const pa = centerMap.get(a);
-            const pb = centerMap.get(b);
-            return isHorizontal ? pa.cy - pb.cy : pa.cx - pb.cx;
-        });
-        // Compute the current center of the children group
-        const first = centerMap.get(sorted[0]);
-        const last = centerMap.get(sorted[sorted.length - 1]);
-        const groupCenter = isHorizontal ? (first.cy + last.cy) / 2 : (first.cx + last.cx) / 2;
-        // Shift all children so the group center aligns with the parent center
-        const shift = parentCenter - groupCenter;
-        if (Math.abs(shift) > 1) {
-            for (const childId of sorted) {
-                const c = centerMap.get(childId);
-                if (isHorizontal) {
-                    c.cy += shift;
-                }
-                else {
-                    c.cx += shift;
-                }
-            }
-        }
-    }
-    // Enforce input-order within each sibling group so that the caller's
-    // sort (e.g. by createdAt) is respected on the secondary axis.
+    // Sort children by input order (preserves caller's ordering, e.g. createdAt)
     const inputIndex = new Map();
     for (let i = 0; i < graphNodes.length; i++) {
         inputIndex.set(graphNodes[i].id, i);
     }
-    for (const [, childIds] of childrenOf) {
-        const valid = childIds.filter((id) => centerMap.has(id));
-        if (valid.length <= 1)
-            continue;
-        // Collect current secondary-axis positions, sorted ascending
-        const positions = valid
-            .map((id) => (isHorizontal ? centerMap.get(id).cy : centerMap.get(id).cx))
-            .sort((a, b) => a - b);
-        // Sort children by input index (preserves caller's ordering, e.g. createdAt)
-        const byInput = [...valid].sort((a, b) => (inputIndex.get(a) ?? 0) - (inputIndex.get(b) ?? 0));
-        // Assign sorted positions in input order
-        for (let i = 0; i < byInput.length; i++) {
-            const c = centerMap.get(byInput[i]);
-            if (isHorizontal) {
-                c.cy = positions[i];
-            }
-            else {
-                c.cx = positions[i];
-            }
+    for (const [, kids] of childrenOf) {
+        kids.sort((a, b) => (inputIndex.get(a) ?? 0) - (inputIndex.get(b) ?? 0));
+    }
+    // Find tree roots (nodes that are parents but not children)
+    const childSet = new Set();
+    for (const ids of childrenOf.values()) {
+        for (const id of ids)
+            childSet.add(id);
+    }
+    // Include leaf nodes that have no children and are not in childrenOf keys
+    const allConnected = new Set(centerMap.keys());
+    const roots = [...allConnected].filter((id) => !childSet.has(id));
+    // Bottom-up: compute the total secondary-axis span each subtree needs
+    const subtreeSpan = new Map();
+    function computeSpan(nodeId) {
+        if (subtreeSpan.has(nodeId))
+            return subtreeSpan.get(nodeId);
+        const c = centerMap.get(nodeId);
+        const nodeSpan = isHorizontal ? c.h : c.w;
+        const kids = childrenOf.get(nodeId);
+        if (!kids || kids.length === 0) {
+            subtreeSpan.set(nodeId, nodeSpan);
+            return nodeSpan;
         }
+        let childrenTotalSpan = 0;
+        for (const kid of kids) {
+            childrenTotalSpan += computeSpan(kid);
+        }
+        childrenTotalSpan += (kids.length - 1) * nodesep;
+        const span = Math.max(nodeSpan, childrenTotalSpan);
+        subtreeSpan.set(nodeId, span);
+        return span;
+    }
+    for (const root of roots)
+        computeSpan(root);
+    // Top-down: position each node on the secondary axis, centering parent
+    // on its children block. For 1-to-1 edges the child gets the same
+    // secondary-axis value as its parent (straight line).
+    function positionTree(nodeId, centerPos) {
+        const c = centerMap.get(nodeId);
+        if (isHorizontal) {
+            c.cy = centerPos;
+        }
+        else {
+            c.cx = centerPos;
+        }
+        const kids = childrenOf.get(nodeId);
+        if (!kids || kids.length === 0)
+            return;
+        // Total span occupied by children
+        let childrenTotalSpan = 0;
+        for (const kid of kids) {
+            childrenTotalSpan += subtreeSpan.get(kid) ?? 0;
+        }
+        childrenTotalSpan += (kids.length - 1) * nodesep;
+        // Start from the top of the centered children block
+        let cursor = centerPos - childrenTotalSpan / 2;
+        for (const kid of kids) {
+            const kidSpan = subtreeSpan.get(kid) ?? 0;
+            positionTree(kid, cursor + kidSpan / 2);
+            cursor += kidSpan + nodesep;
+        }
+    }
+    // Position each root tree. Stack root trees vertically with nodesep gap.
+    let rootCursor = 0;
+    for (const root of roots) {
+        const span = subtreeSpan.get(root) ?? 0;
+        positionTree(root, rootCursor + span / 2);
+        rootCursor += span + nodesep;
     }
     // Build result array converting center-coords to React Flow top-left
     const result = [];