@shepai/cli 1.22.0 → 1.23.0

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

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { within, userEvent, fn } from '@storybook/test';
+import { FeatureCreateDrawer } from './feature-create-drawer.js';
+import { Button } from '../../ui/button.js';
+/* ---------------------------------------------------------------------------
+ * Meta — component-level docs + interactive controls
+ * ------------------------------------------------------------------------- */
+/**
+ * **FeatureCreateDrawer** is a right-side sliding drawer containing a form to
+ * create a new feature in the Control Center.
+ *
+ * ### Form sections
+ * - **Feature Name** (required) — text input, submit is disabled when empty
+ * - **Description** (optional) — multi-line textarea
+ * - **Attachments** (optional) — native OS file picker with extension-based icon system:
+ *   image → blue, PDF → red, code/text → emerald, generic → gray.
+ *   Each attachment card shows the **full absolute file path**.
+ *
+ * ### Props
+ * | Prop | Type | Description |
+ * |------|------|-------------|
+ * | `open` | `boolean` | Controls drawer visibility |
+ * | `onClose` | `() => void` | Called on dismiss (close button, cancel, or backdrop) |
+ * | `onSubmit` | `(data: CreateFeatureFormData) => void` | Called with `{ name, description, attachments }` |
+ * | `isSubmitting` | `boolean` | Disables all fields and shows "Creating..." on submit button |
+ *
+ * ### Behavior
+ * - Form resets (name, description, attachments cleared) when the drawer closes
+ * - Submit button is disabled when name is empty OR `isSubmitting` is true
+ * - Non-modal (`modal={false}`) — canvas stays interactive behind the drawer
+ * - Fixed width: 384px (`w-96`)
+ * - Attachments use native OS file picker via `pickFiles()` — returns `FileAttachment[]`
+ *   with full absolute paths, filenames, and sizes
+ */
+const meta = {
+    title: 'Composed/FeatureCreateDrawer',
+    component: FeatureCreateDrawer,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Whether the drawer is visible.',
+        },
+        onClose: {
+            description: 'Callback fired when the drawer is dismissed (close button, cancel, or backdrop click).',
+        },
+        onSubmit: {
+            description: 'Callback fired with `CreateFeatureFormData` when the form is submitted. Receives `{ name, description, attachments }`.',
+        },
+        isSubmitting: {
+            control: 'boolean',
+            description: 'When true, all form fields and buttons are disabled, and the submit button shows "Creating...".',
+        },
+    },
+};
+export default meta;
+/* ---------------------------------------------------------------------------
+ * Shared action loggers
+ * ------------------------------------------------------------------------- */
+const logSubmit = fn().mockName('onSubmit');
+const logClose = fn().mockName('onClose');
+/* ---------------------------------------------------------------------------
+ * Trigger wrapper — every story uses this so nothing auto-opens on Docs page
+ * ------------------------------------------------------------------------- */
+/** Starts closed — click button to open. Actions are logged. */
+function CreateDrawerTrigger({ isSubmitting = false, label = 'Open Create Feature', }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: "flex h-screen items-start p-4", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(true), children: label }), _jsx(FeatureCreateDrawer, { open: open, onClose: () => {
+                    setOpen(false);
+                    logClose();
+                }, onSubmit: (data) => {
+                    logSubmit(data);
+                    setOpen(false);
+                }, isSubmitting: isSubmitting })] }));
+}
+/* ---------------------------------------------------------------------------
+ * Per-state stories
+ * ------------------------------------------------------------------------- */
+/** Default empty form — click the trigger button to open the create feature drawer. */
+export const Default = {
+    render: () => _jsx(CreateDrawerTrigger, {}),
+};
+/**
+ * Pre-filled form — click to open, then name and description are typed in.
+ * Demonstrates the form in a "ready to submit" state.
+ */
+export const PreFilled = {
+    render: () => _jsx(CreateDrawerTrigger, { label: "Open Pre-Filled" }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: 'Open Pre-Filled' }));
+        // Drawer renders in a portal — query from document body
+        const body = within(canvasElement.ownerDocument.body);
+        const nameInput = await body.findByPlaceholderText('e.g. GitHub OAuth Login');
+        const descInput = body.getByPlaceholderText('Describe what this feature does...');
+        await userEvent.type(nameInput, 'GitHub OAuth Login');
+        await userEvent.type(descInput, 'Implement OAuth2 authentication with GitHub as the identity provider. Includes login, callback handling, and token refresh.');
+    },
+};
+/**
+ * Submitting/loading state — all form fields are disabled, submit button shows "Creating...".
+ * Click the trigger to open and observe the disabled form.
+ */
+export const Submitting = {
+    render: () => _jsx(CreateDrawerTrigger, { isSubmitting: true, label: "Open (Submitting)" }),
+};
+/**
+ * Validation state — open the drawer with an empty name field.
+ * The "+ Create Feature" button is disabled because name validation fails.
+ */
+export const ValidationDisabled = {
+    render: () => _jsx(CreateDrawerTrigger, { label: "Open Validation Demo" }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: 'Open Validation Demo' }));
+    },
+};
+/** Click to open the drawer for quick visual inspection. */
+export const PreOpened = {
+    render: () => _jsx(CreateDrawerTrigger, { label: "Open Drawer" }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: 'Open Drawer' }));
+    },
+};
+/* ---------------------------------------------------------------------------
+ * Interactive story — full paths shown in submitted data panel
+ * ------------------------------------------------------------------------- */
+/**
+ * Fully interactive story — open the drawer, fill the form, and click
+ * "Add Files" to attach files via the native OS file picker.
+ *
+ * **Submitted data** is displayed in a styled panel showing `FileAttachment[]`
+ * with **full absolute file paths**, filenames, and sizes.
+ *
+ * In Storybook, the native picker won't work (no backend), but submitted data
+ * would show the paths if files were attached programmatically.
+ */
+export const Interactive = {
+    render: function InteractiveRender() {
+        const [open, setOpen] = useState(false);
+        const [submitted, setSubmitted] = useState(null);
+        return (_jsxs("div", { className: "flex h-screen items-start gap-4 p-4", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(true), children: "Open Create Feature" }), submitted ? (_jsxs("div", { className: "bg-muted/50 max-w-sm rounded-md border p-3", children: [_jsx("span", { className: "text-muted-foreground mb-1 text-xs font-semibold tracking-wider uppercase", children: "Last submitted" }), _jsx("pre", { className: "mt-1 text-xs whitespace-pre-wrap", children: JSON.stringify({
+                                        name: submitted.name,
+                                        description: submitted.description,
+                                        attachments: submitted.attachments.map((f) => ({
+                                            path: f.path,
+                                            name: f.name,
+                                            size: f.size,
+                                        })),
+                                    }, null, 2) })] })) : null] }), _jsx(FeatureCreateDrawer, { open: open, onClose: () => {
+                        setOpen(false);
+                        logClose();
+                    }, onSubmit: (data) => {
+                        logSubmit(data);
+                        setSubmitted(data);
+                        setOpen(false);
+                    } })] }));
+    },
+};

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

@@ -0,0 +1,2 @@
+export { FeatureCreateDrawer, type FeatureCreateDrawerProps, type CreateFeatureFormData, type FileAttachment, } from './feature-create-drawer.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,cAAc,GACpB,MAAM,yBAAyB,CAAC"}

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

@@ -0,0 +1 @@
+export { FeatureCreateDrawer, } from './feature-create-drawer.js';

package/dist/src/presentation/web/components/common/feature-create-drawer/pick-files.d.ts

@@ -0,0 +1,7 @@
+import type { FileAttachment } from '../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js';
+/**
+ * Calls the backend API to open a native OS file picker dialog.
+ * Returns the selected files with metadata, or null if the user cancelled.
+ */
+export declare function pickFiles(): Promise<FileAttachment[] | null>;
+//# sourceMappingURL=pick-files.d.ts.map

package/dist/src/presentation/web/components/common/feature-create-drawer/pick-files.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pick-files.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/pick-files.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F;;;GAGG;AACH,wBAAsB,SAAS,IAAI,OAAO,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,CAUlE"}

package/dist/src/presentation/web/components/common/feature-create-drawer/pick-files.js

@@ -0,0 +1,13 @@
+/**
+ * Calls the backend API to open a native OS file picker dialog.
+ * Returns the selected files with metadata, or null if the user cancelled.
+ */
+export async function pickFiles() {
+    const response = await fetch('/api/dialog/pick-files', { method: 'POST' });
+    if (!response.ok) {
+        const body = await response.json().catch(() => null);
+        throw new Error(body?.error ?? 'Failed to open file dialog');
+    }
+    const body = await response.json();
+    return body.files;
+}

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

@@ -0,0 +1,7 @@
+import type { FeatureNodeData } from '../../common/feature-node/index.js';
+export interface FeatureDrawerProps {
+    selectedNode: FeatureNodeData | null;
+    onClose: () => void;
+}
+export declare function FeatureDrawer({ selectedNode, onClose }: FeatureDrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=feature-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/feature-drawer.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAExE,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,eAAe,GAAG,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAmE1E"}

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

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { XIcon } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, } from '../../ui/drawer.js';
+import { Separator } from '../../ui/separator.js';
+import { CometSpinner } from '../../ui/comet-spinner.js';
+import { featureNodeStateConfig, lifecycleDisplayLabels } from '../../common/feature-node/index.js';
+export function FeatureDrawer({ selectedNode, onClose }) {
+    return (_jsx(Drawer, { direction: "right", modal: false, open: selectedNode !== null, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, children: _jsx(DrawerContent, { direction: "right", className: "w-96", showCloseButton: false, children: selectedNode ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden", children: _jsx(XIcon, { className: "size-4" }) }), _jsxs(DrawerHeader, { "data-testid": "feature-drawer-header", children: [_jsx(DrawerTitle, { children: selectedNode.name }), _jsx(DrawerDescription, { children: selectedNode.featureId })] }), _jsx(Separator, {}), _jsxs("div", { "data-testid": "feature-drawer-status", className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: lifecycleDisplayLabels[selectedNode.lifecycle] }), _jsx(StateBadge, { data: selectedNode }), selectedNode.progress > 0 ? (_jsxs("div", { "data-testid": "feature-drawer-progress", className: "flex flex-col gap-1", children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-xs", children: [_jsx("span", { children: "Progress" }), _jsxs("span", { children: [selectedNode.progress, "%"] })] }), _jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', featureNodeStateConfig[selectedNode.state].progressClass), style: { width: `${selectedNode.progress}%` } }) })] })) : null] }), _jsx(Separator, {}), _jsx(DetailsSection, { data: selectedNode })] })) : null }) }));
+}
+function StateBadge({ data }) {
+    const config = featureNodeStateConfig[data.state];
+    const Icon = config.icon;
+    return (_jsxs("div", { className: cn('flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium', config.badgeBgClass, config.badgeClass), children: [data.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : (_jsx(Icon, { className: "h-4 w-4 shrink-0" })), _jsx("span", { children: config.label })] }));
+}
+function DetailsSection({ data }) {
+    const hasAnyDetail = data.description ?? data.agentName ?? data.runtime ?? data.blockedBy ?? data.errorMessage;
+    if (!hasAnyDetail)
+        return null;
+    return (_jsxs("div", { "data-testid": "feature-drawer-details", className: "flex flex-col gap-3 p-4", children: [data.description ? _jsx(DetailRow, { label: "Description", value: data.description }) : null, data.agentName ? _jsx(DetailRow, { label: "Agent", value: data.agentName }) : null, data.runtime ? _jsx(DetailRow, { label: "Runtime", value: data.runtime }) : null, data.blockedBy ? _jsx(DetailRow, { label: "Blocked by", value: data.blockedBy }) : null, data.errorMessage ? _jsx(DetailRow, { label: "Error", value: data.errorMessage }) : null] }));
+}
+function DetailRow({ label, value }) {
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }), _jsx("span", { className: "text-sm", children: value })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureDrawer } from './feature-drawer.js';
+declare const meta: Meta<typeof FeatureDrawer>;
+export default meta;
+type Story = StoryObj<typeof FeatureDrawer>;
+export declare const Running: Story;
+export declare const ActionRequired: Story;
+export declare const Done: Story;
+export declare const Blocked: Story;
+export declare const Error: Story;
+/** Minimal data — only required fields, no optional details section. */
+export declare const MinimalData: Story;
+/** All optional fields populated — description, agent, runtime, blockedBy, error. */
+export declare const AllFields: Story;
+/** Cycle through all 5 states at a glance via buttons. */
+export declare const AllStates: Story;
+/** Cycle through all 6 lifecycle phases via buttons. */
+export declare const AllLifecycles: Story;
+//# sourceMappingURL=feature-drawer.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/feature-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAOpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAoF5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,SAAS,EAAE,KAmBvB,CAAC;AAuDF,0DAA0D;AAC1D,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AA2CF,wDAAwD;AACxD,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

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

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { FeatureDrawer } from './feature-drawer.js';
+import { Button } from '../../ui/button.js';
+const meta = {
+    title: 'Composed/FeatureDrawer',
+    component: FeatureDrawer,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+/* ---------------------------------------------------------------------------
+ * Data fixtures
+ * ------------------------------------------------------------------------- */
+const baseData = {
+    name: 'Auth Module',
+    featureId: '#f1',
+    lifecycle: 'implementation',
+    state: 'running',
+    progress: 45,
+};
+const runningData = {
+    name: 'Auth Module',
+    description: 'Implement OAuth2 authentication flow',
+    featureId: '#f1',
+    lifecycle: 'implementation',
+    state: 'running',
+    progress: 45,
+    agentName: 'Planner',
+};
+const actionRequiredData = {
+    name: 'API Rate Limiting',
+    description: 'Implement sliding window rate limiting for public endpoints',
+    featureId: '#bi1',
+    lifecycle: 'requirements',
+    state: 'action-required',
+    progress: 22,
+};
+const doneData = {
+    name: 'Payment Gateway',
+    description: 'Stripe integration for subscriptions',
+    featureId: '#f3',
+    lifecycle: 'deploy',
+    state: 'done',
+    progress: 100,
+    runtime: '1h 42m',
+};
+const blockedData = {
+    name: 'Search Index',
+    description: 'Elasticsearch full-text search setup',
+    featureId: '#f4',
+    lifecycle: 'implementation',
+    state: 'blocked',
+    progress: 20,
+    blockedBy: 'Auth Module',
+};
+const errorData = {
+    name: 'Email Service',
+    description: 'Transactional email with SendGrid',
+    featureId: '#f5',
+    lifecycle: 'review',
+    state: 'error',
+    progress: 30,
+    errorMessage: 'Build failed: type mismatch',
+};
+/* ---------------------------------------------------------------------------
+ * Trigger wrapper — starts closed, click to open
+ * ------------------------------------------------------------------------- */
+function DrawerTrigger({ data, label }) {
+    const [selected, setSelected] = useState(null);
+    return (_jsxs("div", { className: "flex h-screen items-start p-4", children: [_jsx(Button, { variant: "outline", onClick: () => setSelected(data), children: label }), _jsx(FeatureDrawer, { selectedNode: selected, onClose: () => setSelected(null) })] }));
+}
+/* ---------------------------------------------------------------------------
+ * Per-state stories
+ * ------------------------------------------------------------------------- */
+export const Running = {
+    render: () => _jsx(DrawerTrigger, { data: runningData, label: "Open Running" }),
+};
+export const ActionRequired = {
+    render: () => _jsx(DrawerTrigger, { data: actionRequiredData, label: "Open Action Required" }),
+};
+export const Done = {
+    render: () => _jsx(DrawerTrigger, { data: doneData, label: "Open Done" }),
+};
+export const Blocked = {
+    render: () => _jsx(DrawerTrigger, { data: blockedData, label: "Open Blocked" }),
+};
+export const Error = {
+    render: () => _jsx(DrawerTrigger, { data: errorData, label: "Open Error" }),
+};
+/* ---------------------------------------------------------------------------
+ * Edge-case stories
+ * ------------------------------------------------------------------------- */
+/** Minimal data — only required fields, no optional details section. */
+export const MinimalData = {
+    render: () => _jsx(DrawerTrigger, { data: { ...baseData, progress: 0 }, label: "Open Minimal" }),
+};
+/** All optional fields populated — description, agent, runtime, blockedBy, error. */
+export const AllFields = {
+    render: () => (_jsx(DrawerTrigger, { data: {
+            name: 'Enterprise Authentication Module',
+            description: 'Implement a comprehensive OAuth2 authentication flow with support for multiple identity providers including Google, GitHub, and custom SAML-based enterprise SSO.',
+            featureId: '#f99',
+            lifecycle: 'implementation',
+            state: 'running',
+            progress: 68,
+            agentName: 'Implementer',
+            runtime: '3h 15m',
+            blockedBy: 'Database Migration',
+            errorMessage: 'Token refresh failed: invalid_grant',
+        }, label: "Open All Fields" })),
+};
+/* ---------------------------------------------------------------------------
+ * Matrix stories — interactive state/lifecycle switcher
+ * ------------------------------------------------------------------------- */
+const stateFixtures = {
+    running: runningData,
+    'action-required': actionRequiredData,
+    done: doneData,
+    blocked: blockedData,
+    error: errorData,
+};
+const allLifecycles = [
+    'requirements',
+    'research',
+    'implementation',
+    'review',
+    'deploy',
+    'maintain',
+];
+function AllStatesRender() {
+    const [state, setState] = useState('running');
+    const [selected, setSelected] = useState(null);
+    const _data = stateFixtures[state];
+    return (_jsxs("div", { className: "flex h-screen", children: [_jsxs("div", { className: "flex flex-col gap-2 p-4", children: [_jsx("span", { className: "text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase", children: "Select state" }), Object.keys(stateFixtures).map((s) => (_jsx("button", { type: "button", onClick: () => {
+                            setState(s);
+                            setSelected(stateFixtures[s]);
+                        }, className: `rounded-md px-3 py-1.5 text-left text-sm ${s === state ? 'bg-primary text-primary-foreground' : 'bg-muted hover:bg-muted/80'}`, children: s }, s)))] }), _jsx(FeatureDrawer, { selectedNode: selected, onClose: () => setSelected(null) })] }));
+}
+/** Cycle through all 5 states at a glance via buttons. */
+export const AllStates = {
+    render: () => _jsx(AllStatesRender, {}),
+};
+function AllLifecyclesRender() {
+    const [lifecycle, setLifecycle] = useState('requirements');
+    const [selected, setSelected] = useState(null);
+    return (_jsxs("div", { className: "flex h-screen", children: [_jsxs("div", { className: "flex flex-col gap-2 p-4", children: [_jsx("span", { className: "text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase", children: "Select phase" }), allLifecycles.map((phase) => (_jsx("button", { type: "button", onClick: () => {
+                            setLifecycle(phase);
+                            setSelected({
+                                name: 'Feature Name',
+                                description: `Currently in ${phase} phase`,
+                                featureId: '#f1',
+                                lifecycle: phase,
+                                state: 'running',
+                                progress: 50,
+                                agentName: 'Agent',
+                            });
+                        }, className: `rounded-md px-3 py-1.5 text-left text-sm ${phase === lifecycle
+                            ? 'bg-primary text-primary-foreground'
+                            : 'bg-muted hover:bg-muted/80'}`, children: phase }, phase)))] }), _jsx(FeatureDrawer, { selectedNode: selected, onClose: () => setSelected(null) })] }));
+}
+/** Cycle through all 6 lifecycle phases via buttons. */
+export const AllLifecycles = {
+    render: () => _jsx(AllLifecyclesRender, {}),
+};

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

@@ -0,0 +1,2 @@
+export { FeatureDrawer, type FeatureDrawerProps } from './feature-drawer.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

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

@@ -0,0 +1 @@
+export { FeatureDrawer } from './feature-drawer.js';

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

@@ -1,12 +1,9 @@
 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;
@@ -21,8 +18,8 @@ export interface FeatureNodeData {
     blockedBy?: string;
     /** Short error message for error state */
     errorMessage?: string;
-    /** Agent executor type (e.g. "claude-code", "cursor"). */
-    agentType?: AgentTypeValue;
+    /** Agent name shown in the running badge (e.g. "Planner") */
+    agentName?: string;
     onAction?: () => void;
     onSettings?: () => void;
     showHandles?: boolean;

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

@@ -1 +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"}
+{"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,EAAmD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE1C,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,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,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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

@@ -1,4 +1,4 @@
-import { Loader2, AlertTriangle, CircleCheck, Ban, CircleX } from 'lucide-react';
+import { Loader2, CircleAlert, CircleCheck, Ban, CircleX } from 'lucide-react';
 /** Human-readable display labels for lifecycle phases. */
 export const lifecycleDisplayLabels = {
     requirements: 'REQUIREMENTS',
@@ -8,15 +8,6 @@ export const lifecycleDisplayLabels = {
     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,
@@ -29,12 +20,12 @@ export const featureNodeStateConfig = {
         showProgressBar: false,
     },
     'action-required': {
-        icon: AlertTriangle,
+        icon: CircleAlert,
         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',
+        badgeClass: 'text-amber-700',
+        badgeBgClass: 'bg-amber-50',
         label: 'User action required',
         showProgressBar: false,
     },

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

@@ -1 +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"}
+{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAoBnE,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,2CA0IA"}

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

@@ -3,17 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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 });
-}
+import { CometSpinner } from '../../ui/comet-spinner.js';
+import { featureNodeStateConfig, lifecycleDisplayLabels } from './feature-node-state-config.js';
 function getBadgeText(data) {
     const config = featureNodeStateConfig[data.state];
     switch (data.state) {
-        case 'running':
-            return lifecycleRunningVerbs[data.lifecycle];
+        case 'running': {
+            const agent = data.agentName ?? 'Agent';
+            return `${agent} ${data.featureId} running`;
+        }
         case 'done':
             return data.runtime ? `Completed in ${data.runtime}` : 'Completed';
         case 'blocked':
@@ -30,7 +28,7 @@ export function FeatureNode({ data, selected, }) {
     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) => {
+                                }, 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: config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between text-[10px]", children: [_jsx("span", { children: data.featureId }), _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(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-[10px]", children: _jsx("span", { children: data.featureId }) }), _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: [data.state === 'running' ? (_jsx(CometSpinner, { size: "sm", className: "shrink-0" })) : (_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

@@ -11,6 +11,5 @@ 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

@@ -1 +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"}
+{"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;AAiCrC,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;AAuEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}