@shepai/cli 1.20.1 → 1.22.0

package/dist/src/presentation/web/components/common/feature-node/agent-type-icons.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getAgentTypeIcon, DefaultAgentIcon } from './agent-type-icons.js';
+const allAgentTypes = [
+    { type: 'claude-code', label: 'Claude Code' },
+    { type: 'cursor', label: 'Cursor' },
+    { type: 'gemini-cli', label: 'Gemini CLI' },
+    { type: 'aider', label: 'Aider' },
+    { type: 'continue', label: 'Continue' },
+];
+function AgentIconGallery({ size }) {
+    return (_jsxs("div", { className: "flex flex-wrap gap-6", children: [allAgentTypes.map(({ type, label }) => {
+                const Icon = getAgentTypeIcon(type);
+                return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "border-border bg-muted/30 rounded-md border p-3", children: _jsx(Icon, { className: `h-${size} w-${size}`, style: { width: size * 4, height: size * 4 } }) }), _jsx("span", { className: "text-sm font-medium", children: label }), _jsx("code", { className: "text-muted-foreground text-xs", children: type })] }, type));
+            }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "border-border bg-muted/30 rounded-md border p-3", children: _jsx(DefaultAgentIcon, { style: { width: size * 4, height: size * 4 } }) }), _jsx("span", { className: "text-sm font-medium", children: "Fallback" }), _jsx("code", { className: "text-muted-foreground text-xs", children: "undefined" })] })] }));
+}
+const meta = {
+    title: 'Common/AgentTypeIcons',
+    tags: ['autodocs'],
+    parameters: { layout: 'centered' },
+};
+export default meta;
+export const AllIcons = {
+    render: () => _jsx(AgentIconGallery, { size: 10 }),
+};
+export const SmallIcons = {
+    render: () => _jsx(AgentIconGallery, { size: 5 }),
+};
+export const LargeIcons = {
+    render: () => _jsx(AgentIconGallery, { size: 16 }),
+};

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

@@ -0,0 +1,28 @@
+/**
+ * Feature State Derivation
+ *
+ * Derives UI node state and progress from the Feature domain model
+ * and its associated AgentRun status (mirrors CLI feat ls logic).
+ */
+import type { Feature, AgentRun } from '../../../../../../packages/core/src/domain/generated/index.js';
+import type { FeatureNodeState } from './feature-node-state-config.js';
+/**
+ * Derives the visual node state from a Feature and its optional AgentRun.
+ *
+ * Priority (mirrors CLI formatStatus):
+ * 1. Agent waiting_approval → action-required
+ * 2. Agent failed → error
+ * 3. Agent interrupted/cancelled → blocked
+ * 4. Agent completed + Maintain lifecycle → done
+ * 5. Agent running/pending → running
+ * 6. No agent run → fall back to plan tasks / lifecycle
+ */
+export declare function deriveNodeState(feature: Feature, agentRun?: AgentRun | null): FeatureNodeState;
+/**
+ * Derives progress percentage from Feature.plan.tasks.
+ *
+ * Returns the percentage of tasks in Done state.
+ * Returns 100 for Maintain lifecycle, 0 if no plan.
+ */
+export declare function deriveProgress(feature: Feature): number;
+//# sourceMappingURL=derive-feature-state.d.ts.map

package/dist/src/presentation/web/components/common/feature-node/derive-feature-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive-feature-state.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/derive-feature-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAEpE;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,GAAG,gBAAgB,CAuC9F;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAYvD"}

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

@@ -0,0 +1,71 @@
+/**
+ * Feature State Derivation
+ *
+ * Derives UI node state and progress from the Feature domain model
+ * and its associated AgentRun status (mirrors CLI feat ls logic).
+ */
+import { SdlcLifecycle, AgentRunStatus, TaskState } from '../../../../../../packages/core/src/domain/generated/index.js';
+/**
+ * Derives the visual node state from a Feature and its optional AgentRun.
+ *
+ * Priority (mirrors CLI formatStatus):
+ * 1. Agent waiting_approval → action-required
+ * 2. Agent failed → error
+ * 3. Agent interrupted/cancelled → blocked
+ * 4. Agent completed + Maintain lifecycle → done
+ * 5. Agent running/pending → running
+ * 6. No agent run → fall back to plan tasks / lifecycle
+ */
+export function deriveNodeState(feature, agentRun) {
+    if (agentRun) {
+        switch (agentRun.status) {
+            case AgentRunStatus.waitingApproval:
+                return 'action-required';
+            case AgentRunStatus.failed:
+                return 'error';
+            case AgentRunStatus.interrupted:
+            case AgentRunStatus.cancelled:
+                return 'blocked';
+            case AgentRunStatus.completed:
+                return feature.lifecycle === SdlcLifecycle.Maintain ? 'done' : 'done';
+            case AgentRunStatus.running:
+            case AgentRunStatus.pending:
+                return 'running';
+        }
+    }
+    // No agent run — fall back to plan tasks
+    if (feature.lifecycle === SdlcLifecycle.Maintain) {
+        return 'done';
+    }
+    const tasks = feature.plan?.tasks;
+    if (!tasks || tasks.length === 0) {
+        return 'running';
+    }
+    if (tasks.some((t) => t.state === TaskState.Review)) {
+        return 'action-required';
+    }
+    if (tasks.some((t) => t.state === TaskState.WIP)) {
+        return 'running';
+    }
+    if (tasks.every((t) => t.state === TaskState.Done)) {
+        return 'done';
+    }
+    return 'running';
+}
+/**
+ * Derives progress percentage from Feature.plan.tasks.
+ *
+ * Returns the percentage of tasks in Done state.
+ * Returns 100 for Maintain lifecycle, 0 if no plan.
+ */
+export function deriveProgress(feature) {
+    if (feature.lifecycle === SdlcLifecycle.Maintain) {
+        return 100;
+    }
+    const tasks = feature.plan?.tasks;
+    if (!tasks || tasks.length === 0) {
+        return 0;
+    }
+    const doneCount = tasks.filter((t) => t.state === TaskState.Done).length;
+    return Math.round((doneCount / tasks.length) * 100);
+}

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

@@ -0,0 +1,42 @@
+import { type LucideIcon } from 'lucide-react';
+import type { Node } from '@xyflow/react';
+import type { AgentTypeValue } from './agent-type-icons.js';
+export type FeatureNodeState = 'running' | 'action-required' | 'done' | 'blocked' | 'error';
+export type FeatureLifecyclePhase = 'requirements' | 'research' | 'implementation' | 'review' | 'deploy' | 'maintain';
+/** Human-readable display labels for lifecycle phases. */
+export declare const lifecycleDisplayLabels: Record<FeatureLifecyclePhase, string>;
+/** Present-participle verbs for the running badge, keyed by lifecycle phase. */
+export declare const lifecycleRunningVerbs: Record<FeatureLifecyclePhase, string>;
+export interface FeatureNodeData {
+    [key: string]: unknown;
+    name: string;
+    description?: string;
+    featureId: string;
+    lifecycle: FeatureLifecyclePhase;
+    state: FeatureNodeState;
+    progress: number;
+    /** Human-readable runtime for done state (e.g. "2h 15m") */
+    runtime?: string;
+    /** Feature name this node is blocked by */
+    blockedBy?: string;
+    /** Short error message for error state */
+    errorMessage?: string;
+    /** Agent executor type (e.g. "claude-code", "cursor"). */
+    agentType?: AgentTypeValue;
+    onAction?: () => void;
+    onSettings?: () => void;
+    showHandles?: boolean;
+}
+export type FeatureNodeType = Node<FeatureNodeData, 'featureNode'>;
+export interface FeatureNodeStateConfig {
+    icon: LucideIcon;
+    borderClass: string;
+    labelClass: string;
+    progressClass: string;
+    badgeClass: string;
+    badgeBgClass: string;
+    label: string;
+    showProgressBar: boolean;
+}
+export declare const featureNodeStateConfig: Record<FeatureNodeState, FeatureNodeStateConfig>;
+//# sourceMappingURL=feature-node-state-config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAClG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5F,MAAM,MAAM,qBAAqB,GAC7B,cAAc,GACd,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,UAAU,CAAC;AAEf,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOxE,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOvE,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,qBAAqB,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CAmDnF,CAAC"}

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

@@ -0,0 +1,71 @@
+import { Loader2, AlertTriangle, CircleCheck, Ban, CircleX } from 'lucide-react';
+/** Human-readable display labels for lifecycle phases. */
+export const lifecycleDisplayLabels = {
+    requirements: 'REQUIREMENTS',
+    research: 'RESEARCH',
+    implementation: 'IMPLEMENTATION',
+    review: 'REVIEW',
+    deploy: 'DEPLOY & QA',
+    maintain: 'COMPLETED',
+};
+/** Present-participle verbs for the running badge, keyed by lifecycle phase. */
+export const lifecycleRunningVerbs = {
+    requirements: 'Analyzing',
+    research: 'Researching',
+    implementation: 'Implementing',
+    review: 'Reviewing',
+    deploy: 'Deploying',
+    maintain: 'Maintaining',
+};
+export const featureNodeStateConfig = {
+    running: {
+        icon: Loader2,
+        borderClass: 'border-l-blue-500',
+        labelClass: 'text-blue-500',
+        progressClass: 'bg-blue-500',
+        badgeClass: 'text-blue-700',
+        badgeBgClass: 'bg-blue-50',
+        label: 'Running',
+        showProgressBar: false,
+    },
+    'action-required': {
+        icon: AlertTriangle,
+        borderClass: 'border-l-amber-500',
+        labelClass: 'text-amber-500',
+        progressClass: 'bg-amber-500',
+        badgeClass: 'text-amber-800',
+        badgeBgClass: 'bg-amber-50 border border-amber-200',
+        label: 'User action required',
+        showProgressBar: false,
+    },
+    done: {
+        icon: CircleCheck,
+        borderClass: 'border-l-emerald-500',
+        labelClass: 'text-emerald-500',
+        progressClass: 'bg-emerald-500',
+        badgeClass: 'text-emerald-700',
+        badgeBgClass: 'bg-emerald-50',
+        label: 'Done',
+        showProgressBar: false,
+    },
+    blocked: {
+        icon: Ban,
+        borderClass: 'border-l-gray-400',
+        labelClass: 'text-gray-400',
+        progressClass: 'bg-gray-400',
+        badgeClass: 'text-gray-600',
+        badgeBgClass: 'bg-gray-100',
+        label: 'Blocked',
+        showProgressBar: false,
+    },
+    error: {
+        icon: CircleX,
+        borderClass: 'border-l-red-500',
+        labelClass: 'text-red-500',
+        progressClass: 'bg-red-500',
+        badgeClass: 'text-red-700',
+        badgeBgClass: 'bg-red-50',
+        label: 'Error',
+        showProgressBar: false,
+    },
+};

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

@@ -0,0 +1,7 @@
+import type { FeatureNodeData } from './feature-node-state-config.js';
+export declare function FeatureNode({ data, selected, }: {
+    data: FeatureNodeData;
+    selected?: boolean;
+    [key: string]: unknown;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=feature-node.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwBnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CA6IA"}

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

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Handle, Position } from '@xyflow/react';
+import { Settings, Plus } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { featureNodeStateConfig, lifecycleDisplayLabels, lifecycleRunningVerbs, } from './feature-node-state-config.js';
+import { getAgentTypeIcon } from './agent-type-icons.js';
+function AgentIcon({ agentType, className }) {
+    const IconComponent = getAgentTypeIcon(agentType);
+    return _jsx(IconComponent, { className: className });
+}
+function getBadgeText(data) {
+    const config = featureNodeStateConfig[data.state];
+    switch (data.state) {
+        case 'running':
+            return lifecycleRunningVerbs[data.lifecycle];
+        case 'done':
+            return data.runtime ? `Completed in ${data.runtime}` : 'Completed';
+        case 'blocked':
+            return data.blockedBy ? `Waiting on ${data.blockedBy}` : 'Blocked';
+        case 'error':
+            return data.errorMessage ?? 'Something went wrong';
+        default:
+            return config.label;
+    }
+}
+export function FeatureNode({ data, selected, }) {
+    const config = featureNodeStateConfig[data.state];
+    const Icon = config.icon;
+    return (_jsxs("div", { className: "group relative", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, _jsxs("div", { "data-testid": "feature-node-card", className: cn('bg-card flex min-h-35 w-72 flex-col rounded-lg border p-3 shadow-sm', selected && 'ring-primary ring-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { "data-testid": "feature-node-lifecycle-label", className: cn('text-[10px] font-semibold tracking-wider'), children: lifecycleDisplayLabels[data.lifecycle] }), data.onSettings ? (_jsx("button", { type: "button", "aria-label": "Settings", "data-testid": "feature-node-settings-button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    data.onSettings?.();
+                                }, className: "nodrag text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1", children: _jsx(Settings, { className: "h-3.5 w-3.5" }) })) : null] }), _jsx("h3", { className: "mt-1 truncate text-sm font-bold", children: data.name }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-0.5 truncate text-xs", children: data.description })) : null, _jsx("div", { className: "mt-auto pt-2", children: data.state === 'running' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(AgentIcon, { agentType: data.agentType, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : (_jsxs("div", { "data-testid": "feature-node-badge", className: cn('mt-1.5 flex items-center justify-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium', config.badgeBgClass, config.badgeClass), children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: getBadgeText(data) })] })) })] }), data.onAction ? (_jsx(Handle, { type: "source", position: Position.Right, className: "h-0! w-0! border-0! bg-transparent!", children: _jsx("button", { type: "button", "aria-label": "Add", "data-testid": "feature-node-action-button", onClick: (e) => {
+                        e.stopPropagation();
+                        data.onAction?.();
+                    }, className: "nodrag absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-blue-500 text-white opacity-0 shadow-md transition-opacity group-hover:opacity-100 hover:bg-blue-600", children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }) })) : data.showHandles ? (_jsx(Handle, { type: "source", position: Position.Right, isConnectable: false, className: "opacity-0!" })) : null] }));
+}

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

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { FeatureNodeData } from './feature-node-state-config.js';
+declare const meta: Meta<FeatureNodeData>;
+export default meta;
+type Story = StoryObj<FeatureNodeData>;
+export declare const Default: Story;
+export declare const AllStates: Story;
+export declare const AllLifecycles: Story;
+export declare const WithAction: Story;
+export declare const LongContent: Story;
+export declare const DoneWithRuntime: Story;
+export declare const BlockedByFeature: Story;
+export declare const ErrorWithMessage: Story;
+export declare const AllAgentTypes: Story;
+export declare const Interactive: Story;
+//# sourceMappingURL=feature-node.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,6BAA6B,CAAC;AAkCrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAe/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAiDF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAoB3B,CAAC;AAuEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}

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

@@ -0,0 +1,228 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { expect, waitFor } from '@storybook/test';
+import { ReactFlowProvider, ReactFlow, useNodesState } from '@xyflow/react';
+import { FeatureNode } from './feature-node.js';
+const nodeTypes = { featureNode: FeatureNode };
+/** Renders a single FeatureNode as a proper React Flow node (with node wrapper + pointer events). */
+function FeatureNodeCanvas({ data, style = { width: 600, height: 400 }, }) {
+    const nodes = useMemo(() => [{ id: 'node-1', type: 'featureNode', position: { x: 0, y: 0 }, data }], [data]);
+    return (_jsx("div", { style: style, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, nodeTypes: nodeTypes, nodesDraggable: false, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+}
+const meta = {
+    title: 'Composed/FeatureNode',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        name: 'Auth Module',
+        description: 'Implement OAuth2 authentication flow',
+        featureId: '#f1',
+        lifecycle: 'requirements',
+        state: 'running',
+        progress: 45,
+        agentType: 'claude-code',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
+};
+const allStatesData = [
+    {
+        name: 'Auth Module',
+        description: 'Implement OAuth2 authentication flow',
+        featureId: '#f1',
+        lifecycle: 'implementation',
+        state: 'running',
+        progress: 45,
+        agentType: 'claude-code',
+    },
+    {
+        name: 'API Rate Limiting',
+        description: 'Implement sliding window rate limiting for public...',
+        featureId: '#bi1',
+        lifecycle: 'requirements',
+        state: 'action-required',
+        progress: 22,
+    },
+    {
+        name: 'Payment Gateway',
+        description: 'Stripe integration for subscriptions',
+        featureId: '#f3',
+        lifecycle: 'deploy',
+        state: 'done',
+        progress: 100,
+        runtime: '1h 42m',
+    },
+    {
+        name: 'Search Index',
+        description: 'Elasticsearch full-text search setup',
+        featureId: '#f4',
+        lifecycle: 'implementation',
+        state: 'blocked',
+        progress: 20,
+        blockedBy: 'Auth Module',
+    },
+    {
+        name: 'Email Service',
+        description: 'Transactional email with SendGrid',
+        featureId: '#f5',
+        lifecycle: 'review',
+        state: 'error',
+        progress: 30,
+        errorMessage: 'Build failed: type mismatch',
+    },
+];
+export const AllStates = {
+    render: () => (_jsx("div", { className: "flex flex-wrap gap-6", children: allStatesData.map((data) => (_jsx(FeatureNodeCanvas, { style: { width: 500, height: 350 }, data: data }, data.state))) })),
+};
+const allLifecycles = [
+    'requirements',
+    'research',
+    'implementation',
+    'review',
+    'deploy',
+    'maintain',
+];
+export const AllLifecycles = {
+    render: () => (_jsx("div", { className: "flex flex-wrap gap-6", children: allLifecycles.map((lifecycle, i) => (_jsx(FeatureNodeCanvas, { style: { width: 500, height: 350 }, data: {
+                name: 'Feature Name',
+                description: `Currently in ${lifecycle} phase`,
+                featureId: `#f${i + 1}`,
+                lifecycle,
+                state: 'running',
+                progress: [10, 25, 50, 70, 90, 100][i],
+                agentType: 'claude-code',
+            } }, lifecycle))) })),
+};
+export const WithAction = {
+    argTypes: {
+        onAction: { action: 'onAction' },
+        onSettings: { action: 'onSettings' },
+    },
+    render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
+};
+export const LongContent = {
+    args: {
+        name: 'Enterprise Authentication Module With SSO Integration',
+        description: 'Implement a comprehensive OAuth2 authentication flow with support for multiple identity providers including Google, GitHub, and custom SAML-based enterprise SSO',
+    },
+    render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
+};
+export const DoneWithRuntime = {
+    args: {
+        name: 'Payment Gateway',
+        description: 'Stripe integration for subscriptions',
+        featureId: '#f3',
+        lifecycle: 'deploy',
+        state: 'done',
+        progress: 100,
+        runtime: '2h 15m',
+    },
+    render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
+};
+export const BlockedByFeature = {
+    args: {
+        name: 'Search Index',
+        description: 'Elasticsearch full-text search setup',
+        featureId: '#f4',
+        lifecycle: 'implementation',
+        state: 'blocked',
+        progress: 20,
+        blockedBy: 'Auth Module',
+    },
+    render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
+};
+export const ErrorWithMessage = {
+    args: {
+        name: 'Email Service',
+        description: 'Transactional email with SendGrid',
+        featureId: '#f5',
+        lifecycle: 'review',
+        state: 'error',
+        progress: 30,
+        errorMessage: 'Build failed: type mismatch',
+    },
+    render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
+};
+const allAgentTypes = [
+    'claude-code',
+    'cursor',
+    'gemini-cli',
+    'aider',
+    'continue',
+    undefined,
+];
+export const AllAgentTypes = {
+    render: () => (_jsx("div", { className: "flex flex-wrap gap-6", children: allAgentTypes.map((agentType, i) => (_jsx(FeatureNodeCanvas, { style: { width: 500, height: 350 }, data: {
+                name: agentType ?? 'Unknown Agent',
+                description: agentType ? `Running with ${agentType}` : 'Fallback icon',
+                featureId: `#f${i + 1}`,
+                lifecycle: 'implementation',
+                state: 'running',
+                progress: 45,
+                agentType,
+            } }, agentType ?? 'fallback'))) })),
+};
+const interactiveInitialNodes = [
+    {
+        id: 'node-1',
+        type: 'featureNode',
+        position: { x: 0, y: 0 },
+        draggable: true,
+        data: {
+            name: 'Auth Module',
+            description: 'Implement OAuth2 authentication flow',
+            featureId: '#f1',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 45,
+            agentType: 'claude-code',
+        },
+    },
+    {
+        id: 'node-2',
+        type: 'featureNode',
+        position: { x: 0, y: 200 },
+        draggable: true,
+        data: {
+            name: 'Payment Gateway',
+            description: 'Stripe integration for subscriptions',
+            featureId: '#f2',
+            lifecycle: 'deploy',
+            state: 'done',
+            progress: 100,
+            runtime: '1h 42m',
+        },
+    },
+    {
+        id: 'node-3',
+        type: 'featureNode',
+        position: { x: 0, y: 400 },
+        draggable: true,
+        data: {
+            name: 'Email Service',
+            description: 'Transactional email with SendGrid',
+            featureId: '#f3',
+            lifecycle: 'review',
+            state: 'error',
+            progress: 30,
+            errorMessage: 'Build failed: type mismatch',
+        },
+    },
+];
+/** Multi-node canvas with drag enabled — drag nodes to reposition. */
+function InteractiveCanvas() {
+    const [nodes, , onNodesChange] = useNodesState(interactiveInitialNodes);
+    return (_jsx("div", { style: { width: 500, height: 700 }, children: _jsx(ReactFlowProvider, { children: _jsx(ReactFlow, { nodes: nodes, onNodesChange: onNodesChange, nodeTypes: nodeTypes, nodesDraggable: true, nodesConnectable: false, proOptions: { hideAttribution: true }, fitView: true }) }) }));
+}
+export const Interactive = {
+    render: () => _jsx(InteractiveCanvas, {}),
+    play: async ({ canvasElement }) => {
+        // Verify nodes render in the canvas
+        const nodeWrapper = canvasElement.querySelector('.react-flow__node');
+        await waitFor(() => expect(nodeWrapper).toBeTruthy());
+    },
+};

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

@@ -0,0 +1,5 @@
+export { FeatureNode } from './feature-node.js';
+export { featureNodeStateConfig, lifecycleDisplayLabels, lifecycleRunningVerbs, type FeatureNodeState, type FeatureLifecyclePhase, type FeatureNodeData, type FeatureNodeType, type FeatureNodeStateConfig, } from './feature-node-state-config.js';
+export { getAgentTypeIcon, type AgentTypeValue } from './agent-type-icons.js';
+export { deriveNodeState, deriveProgress } from './derive-feature-state.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EACL,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,sBAAsB,GAC5B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,4 @@
+export { FeatureNode } from './feature-node.js';
+export { featureNodeStateConfig, lifecycleDisplayLabels, lifecycleRunningVerbs, } from './feature-node-state-config.js';
+export { getAgentTypeIcon } from './agent-type-icons.js';
+export { deriveNodeState, deriveProgress } from './derive-feature-state.js';

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

@@ -1,4 +1,4 @@
-import { type FeatureStatus } from '../../common/feature-status-config';
+import { type FeatureStatus } from '../../common/feature-status-config.js';
 export interface FeatureStatusBadgesProps {
     /** Count of features per status. */
     counts: Record<FeatureStatus, number>;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip';
-import { cn } from '../../../lib/utils';
-import { featureStatusConfig, featureStatusOrder, } from '../../common/feature-status-config';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
+import { cn } from '../../../lib/utils.js';
+import { featureStatusConfig, featureStatusOrder, } from '../../common/feature-status-config.js';
 export function FeatureStatusBadges({ counts, className }) {
     const visibleStatuses = featureStatusOrder.filter((s) => counts[s] > 0);
     if (visibleStatuses.length === 0)

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { FeatureStatusBadges } from './feature-status-badges';
+import { FeatureStatusBadges } from './feature-status-badges.js';
 declare const meta: Meta<typeof FeatureStatusBadges>;
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SidebarProvider } from '../../ui/sidebar';
-import { FeatureStatusBadges } from './feature-status-badges';
+import { SidebarProvider } from '../../ui/sidebar.js';
+import { FeatureStatusBadges } from './feature-status-badges.js';
 const meta = {
     title: 'Composed/FeatureStatusBadges',
     component: FeatureStatusBadges,

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

@@ -1,3 +1,3 @@
-export { FeatureStatusBadges } from './feature-status-badges';
-export type { FeatureStatusBadgesProps } from './feature-status-badges';
+export { FeatureStatusBadges } from './feature-status-badges.js';
+export type { FeatureStatusBadgesProps } from './feature-status-badges.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-export { FeatureStatusBadges } from './feature-status-badges';
+export { FeatureStatusBadges } from './feature-status-badges.js';

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, } from '../../ui/sidebar';
+import { SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, } from '../../ui/sidebar.js';
 export function FeatureStatusGroup({ label, count, children }) {
     return (_jsxs(SidebarGroup, { "data-testid": "feature-status-group", className: "px-2 py-1", children: [_jsxs(SidebarGroupLabel, { className: "text-muted-foreground h-6 px-2 text-[0.65rem] font-semibold tracking-wider uppercase", children: [label, _jsx("span", { "aria-label": `${count} items`, className: "bg-sidebar-accent text-sidebar-accent-foreground ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.6rem] font-medium tabular-nums", role: "img", children: count })] }), _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { className: "gap-0.5", children: children }) })] }));
 }

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { FeatureStatusGroup } from './feature-status-group';
+import { FeatureStatusGroup } from './feature-status-group.js';
 declare const meta: Meta<typeof FeatureStatusGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;