@shepai/cli 1.22.1 → 1.23.1

package/dist/packages/core/src/infrastructure/services/file-dialog.service.d.ts

@@ -0,0 +1,28 @@
+export interface FileAttachment {
+    path: string;
+    name: string;
+    size: number;
+}
+export interface FileDialogDeps {
+    platform: NodeJS.Platform;
+    exec: (cmd: string, opts?: {
+        encoding: BufferEncoding;
+        timeout?: number;
+    }) => string;
+    stat: (filePath: string) => {
+        size: number;
+    };
+}
+export declare class FileDialogService {
+    private deps;
+    constructor(deps?: Partial<FileDialogDeps>);
+    /** Returns the OS-specific command string, or null if the platform is unsupported. */
+    getCommand(): string | null;
+    /**
+     * Opens a native file picker dialog and returns metadata for each selected file.
+     * Returns `null` if the user cancels the dialog.
+     * Throws if the platform is unsupported or the command fails unexpectedly.
+     */
+    pickFiles(): FileAttachment[] | null;
+}
+//# sourceMappingURL=file-dialog.service.d.ts.map

package/dist/packages/core/src/infrastructure/services/file-dialog.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-dialog.service.d.ts","sourceRoot":"","sources":["../../../../../../packages/core/src/infrastructure/services/file-dialog.service.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC;IAC1B,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,QAAQ,EAAE,cAAc,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC;IACrF,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAkBD,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,IAAI,CAAiB;gBAEjB,IAAI,GAAE,OAAO,CAAC,cAAc,CAAM;IAI9C,sFAAsF;IACtF,UAAU,IAAI,MAAM,GAAG,IAAI;IAI3B;;;;OAIG;IACH,SAAS,IAAI,cAAc,EAAE,GAAG,IAAI;CA8BrC"}

package/dist/packages/core/src/infrastructure/services/file-dialog.service.js

@@ -0,0 +1,63 @@
+import { execSync } from 'node:child_process';
+import { statSync } from 'node:fs';
+const defaultDeps = {
+    platform: process.platform,
+    exec: (cmd, opts) => execSync(cmd, opts),
+    stat: (filePath) => statSync(filePath),
+};
+/**
+ * Platform-specific commands that open a native OS file picker dialog.
+ * Each returns newline-separated absolute file paths on stdout, or exits non-zero on cancel.
+ */
+const PLATFORM_COMMANDS = {
+    darwin: `osascript -e 'set f to (choose file with prompt "Select files" with multiple selections allowed)' -e 'set paths to {}' -e 'repeat with i in f' -e 'copy POSIX path of i to end of paths' -e 'end repeat' -e 'set text item delimiters to "\n"' -e 'paths as text'`,
+    linux: `zenity --file-selection --multiple --separator="\\n" --title="Select files" 2>/dev/null`,
+    win32: `powershell -NoProfile -Command "Add-Type -AssemblyName System.Windows.Forms; $d = New-Object System.Windows.Forms.OpenFileDialog; $d.Multiselect = $true; $d.Title = 'Select files'; if ($d.ShowDialog() -eq 'OK') { $d.FileNames -join [char]10 } else { exit 1 }"`,
+};
+export class FileDialogService {
+    deps;
+    constructor(deps = {}) {
+        this.deps = { ...defaultDeps, ...deps };
+    }
+    /** Returns the OS-specific command string, or null if the platform is unsupported. */
+    getCommand() {
+        return PLATFORM_COMMANDS[this.deps.platform] ?? null;
+    }
+    /**
+     * Opens a native file picker dialog and returns metadata for each selected file.
+     * Returns `null` if the user cancels the dialog.
+     * Throws if the platform is unsupported or the command fails unexpectedly.
+     */
+    pickFiles() {
+        const command = this.getCommand();
+        if (!command) {
+            throw new Error(`Unsupported platform: ${this.deps.platform}`);
+        }
+        try {
+            const result = this.deps.exec(command, { encoding: 'utf-8', timeout: 60_000 });
+            const paths = result
+                .split('\n')
+                .map((line) => line.trim())
+                .filter((line) => line.length > 0);
+            if (paths.length === 0)
+                return null;
+            return paths.map((filePath) => {
+                const stats = this.deps.stat(filePath);
+                return {
+                    path: filePath,
+                    name: filePath.split(/[/\\]/).pop(),
+                    size: stats.size,
+                };
+            });
+        }
+        catch (error) {
+            if (isExecError(error) && error.status === 1) {
+                return null;
+            }
+            throw error;
+        }
+    }
+}
+function isExecError(error) {
+    return typeof error === 'object' && error !== null && 'status' in error;
+}

package/dist/src/presentation/web/app/api/dialog/pick-files/route.d.ts

@@ -0,0 +1,11 @@
+import { NextResponse } from 'next/server';
+export declare function POST(): Promise<NextResponse<{
+    files: null;
+    cancelled: boolean;
+}> | NextResponse<{
+    files: import("../../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js").FileAttachment[];
+    cancelled: boolean;
+}> | NextResponse<{
+    error: string;
+}>>;
+//# sourceMappingURL=route.d.ts.map

package/dist/src/presentation/web/app/api/dialog/pick-files/route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route.d.ts","sourceRoot":"","sources":["../../../../../../../../src/presentation/web/app/api/dialog/pick-files/route.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,wBAAsB,IAAI;;;;;;;;IAezB"}

package/dist/src/presentation/web/app/api/dialog/pick-files/route.js

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import { FileDialogService } from '../../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js';
+export async function POST() {
+    const service = new FileDialogService();
+    try {
+        const files = service.pickFiles();
+        if (files === null) {
+            return NextResponse.json({ files: null, cancelled: true });
+        }
+        return NextResponse.json({ files, cancelled: false });
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Failed to open file dialog';
+        return NextResponse.json({ error: message }, { status: 500 });
+    }
+}

package/dist/src/presentation/web/app/derive-state.d.ts

@@ -0,0 +1,12 @@
+import type { FeatureNodeState } from '../components/common/feature-node/index.js';
+/**
+ * Derives the UI feature node state from lifecycle phase and agent run status.
+ * - 'maintain' lifecycle always returns done (completed feature)
+ * - Agent status maps: completed->done, failed->error, waiting_approval->action-required
+ * - Default: running with 0 progress
+ */
+export declare function deriveState(lifecycle: string, agentStatus: string | undefined): {
+    state: FeatureNodeState;
+    progress: number;
+};
+//# sourceMappingURL=derive-state.d.ts.map

package/dist/src/presentation/web/app/derive-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive-state.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/app/derive-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEzE;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,MAAM,GAAG,SAAS,GAC9B;IAAE,KAAK,EAAE,gBAAgB,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAe/C"}

package/dist/src/presentation/web/app/derive-state.js

@@ -0,0 +1,21 @@
+/**
+ * Derives the UI feature node state from lifecycle phase and agent run status.
+ * - 'maintain' lifecycle always returns done (completed feature)
+ * - Agent status maps: completed->done, failed->error, waiting_approval->action-required
+ * - Default: running with 0 progress
+ */
+export function deriveState(lifecycle, agentStatus) {
+    if (lifecycle === 'maintain') {
+        return { state: 'done', progress: 100 };
+    }
+    switch (agentStatus) {
+        case 'completed':
+            return { state: 'done', progress: 100 };
+        case 'failed':
+            return { state: 'error', progress: 0 };
+        case 'waiting_approval':
+            return { state: 'action-required', progress: 0 };
+        default:
+            return { state: 'running', progress: 0 };
+    }
+}

package/dist/src/presentation/web/app/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/app/page.tsx"],"names":[],"mappings":"AAqBA,wBAA8B,QAAQ,qDA2ErC"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/app/page.tsx"],"names":[],"mappings":"AA2BA,wBAA8B,QAAQ,qDA2ErC"}

package/dist/src/presentation/web/app/page.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ControlCenter } from '../components/features/control-center/index.js';
-import { getFeatures, getAgentRun } from '../lib/use-cases.js';
+import { getFeatures } from '../lib/features.js';
+import { deriveState } from './derive-state.js';
 import { layoutWithDagre } from '../lib/layout-with-dagre.js';
-import { deriveNodeState, deriveProgress, } from '../components/common/feature-node/derive-feature-state.js';
 /** Map domain SdlcLifecycle enum values to UI FeatureLifecyclePhase (1:1). */
 const lifecycleMap = {
     Requirements: 'requirements',
@@ -12,18 +12,24 @@ const lifecycleMap = {
     'Deploy & QA': 'deploy',
     Maintain: 'maintain',
 };
+/** Map agent graph node names (from agent_run.result) to UI lifecycle phases. */
+const nodeToLifecyclePhase = {
+    analyze: 'requirements',
+    requirements: 'requirements',
+    research: 'research',
+    plan: 'implementation',
+    implement: 'implementation',
+};
 export default async function HomePage() {
     const features = await getFeatures();
-    // Load agent runs for all features in parallel (mirrors CLI feat ls)
-    const agentRuns = await Promise.all(features.map((f) => (f.agentRunId ? getAgentRun(f.agentRunId) : Promise.resolve(null))));
     // Group features by repository path
     const featuresByRepo = {};
-    features.forEach((f, i) => {
+    features.forEach((f) => {
         const repoKey = f.repositoryPath;
         if (!featuresByRepo[repoKey]) {
             featuresByRepo[repoKey] = [];
         }
-        featuresByRepo[repoKey].push({ index: i, feature: f });
+        featuresByRepo[repoKey].push(f);
     });
     const nodes = [];
     const edges = [];
@@ -36,17 +42,22 @@ export default async function HomePage() {
             position: { x: 0, y: 0 },
             data: { name: repoName },
         });
-        repoFeatures.forEach(({ index, feature }) => {
-            const run = agentRuns[index];
-            const lifecycle = lifecycleMap[feature.lifecycle] ?? 'requirements';
+        repoFeatures.forEach((feature) => {
+            const agentNode = feature.agentResult?.startsWith('node:')
+                ? feature.agentResult.slice(5)
+                : undefined;
+            const lifecycle = feature.agentStatus === 'completed'
+                ? 'maintain'
+                : ((agentNode ? nodeToLifecyclePhase[agentNode] : undefined) ??
+                    lifecycleMap[feature.lifecycle] ??
+                    'requirements');
             const nodeData = {
                 name: feature.name,
                 description: feature.description ?? feature.slug,
                 featureId: feature.id,
                 lifecycle,
-                state: deriveNodeState(feature, run),
-                progress: deriveProgress(feature),
-                ...(run?.agentType && { agentType: run.agentType }),
+                ...deriveState(lifecycle, feature.agentStatus),
+                ...(feature.agentError && { errorMessage: feature.agentError }),
             };
             const featureNodeId = `feat-${feature.id}`;
             nodes.push({

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

@@ -0,0 +1,15 @@
+import type { FileAttachment } from '../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js';
+export type { FileAttachment } from '../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js';
+export interface CreateFeatureFormData {
+    name: string;
+    description: string;
+    attachments: FileAttachment[];
+}
+export interface FeatureCreateDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    onSubmit: (data: CreateFeatureFormData) => void;
+    isSubmitting?: boolean;
+}
+export declare function FeatureCreateDrawer({ open, onClose, onSubmit, isSubmitting, }: FeatureCreateDrawerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=feature-create-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAG/F,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,YAAoB,GACrB,EAAE,wBAAwB,2CAkK1B"}

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

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { XIcon, PlusIcon, FileIcon, FileTextIcon, ImageIcon, CodeIcon, Trash2Icon, } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, } from '../../ui/drawer.js';
+import { Button } from '../../ui/button.js';
+import { Input } from '../../ui/input.js';
+import { Textarea } from '../../ui/textarea.js';
+import { Label } from '../../ui/label.js';
+import { Separator } from '../../ui/separator.js';
+import { Badge } from '../../ui/badge.js';
+import { pickFiles } from './pick-files.js';
+export function FeatureCreateDrawer({ open, onClose, onSubmit, isSubmitting = false, }) {
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [attachments, setAttachments] = useState([]);
+    const resetForm = useCallback(() => {
+        setName('');
+        setDescription('');
+        setAttachments([]);
+    }, []);
+    const handleOpenChange = useCallback((nextOpen) => {
+        if (!nextOpen) {
+            resetForm();
+            onClose();
+        }
+    }, [onClose, resetForm]);
+    const handleSubmit = useCallback((e) => {
+        e.preventDefault();
+        if (!name.trim())
+            return;
+        onSubmit({ name: name.trim(), description: description.trim(), attachments });
+    }, [name, description, attachments, onSubmit]);
+    const handleAddFiles = useCallback(async () => {
+        try {
+            const files = await pickFiles();
+            if (files) {
+                setAttachments((prev) => [...prev, ...files]);
+            }
+        }
+        catch {
+            // Native dialog failed — silently ignore (user can retry)
+        }
+    }, []);
+    const handleRemoveFile = useCallback((path) => {
+        setAttachments((prev) => prev.filter((f) => f.path !== path));
+    }, []);
+    return (_jsx(Drawer, { direction: "right", modal: false, open: open, onOpenChange: handleOpenChange, children: _jsxs(DrawerContent, { direction: "right", className: "w-96", showCloseButton: false, 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, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-2.5 w-2.5 shrink-0 rounded-full bg-blue-500" }), _jsx(DrawerTitle, { children: "NEW FEATURE" })] }), _jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })] }), _jsx(Separator, {}), _jsx("div", { className: "flex-1 overflow-y-auto p-4", children: _jsxs("form", { id: "create-feature-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-name", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "FEATURE NAME" }), _jsx(Input, { id: "feature-name", placeholder: "e.g. GitHub OAuth Login", value: name, onChange: (e) => setName(e.target.value), required: true, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "feature-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIPTION" }), _jsx(Textarea, { id: "feature-description", placeholder: "Describe what this feature does...", value: description, onChange: (e) => setDescription(e.target.value), rows: 4, disabled: isSubmitting })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "text-muted-foreground text-xs font-semibold tracking-wider", children: ["ATTACHMENTS", attachments.length > 0 && (_jsxs("span", { className: "text-muted-foreground/60 ml-1.5", children: ["(", attachments.length, ")"] }))] }), _jsxs(Button, { type: "button", variant: "outline", size: "xs", onClick: handleAddFiles, disabled: isSubmitting, children: [_jsx(PlusIcon, { className: "size-3" }), "Add Files"] })] }), attachments.length > 0 && (_jsx("div", { className: "flex flex-col gap-2", children: attachments.map((file) => (_jsx(AttachmentCard, { file: file, onRemove: () => handleRemoveFile(file.path), disabled: isSubmitting }, file.path))) }))] })] }) }), _jsx(Separator, {}), _jsxs(DrawerFooter, { className: "flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !name.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] })] }) }));
+}
+/* ---------------------------------------------------------------------------
+ * Private sub-components & utilities
+ * ------------------------------------------------------------------------- */
+function AttachmentCard({ file, onRemove, disabled, }) {
+    const ext = getExtension(file.name);
+    const Icon = getFileIcon(ext);
+    const iconColorClass = getFileIconColor(ext);
+    return (_jsxs("div", { className: "flex items-center gap-3 rounded-md border p-2", children: [_jsx("div", { className: cn('flex h-8 w-8 shrink-0 items-center justify-center rounded', iconColorClass), children: _jsx(Icon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium", children: file.name }), _jsx("span", { className: "text-muted-foreground truncate text-xs", children: file.path }), _jsx("span", { className: "text-muted-foreground text-xs", children: formatFileSize(file.size) })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", onClick: onRemove, disabled: disabled, "aria-label": `Remove ${file.name}`, children: _jsx(Trash2Icon, { className: "h-3 w-3" }) })] }));
+}
+function getExtension(filename) {
+    const dot = filename.lastIndexOf('.');
+    return dot >= 0 ? filename.slice(dot).toLowerCase() : '';
+}
+const IMAGE_EXTS = new Set(['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico', '.bmp']);
+const CODE_EXTS = new Set([
+    '.ts',
+    '.tsx',
+    '.js',
+    '.jsx',
+    '.json',
+    '.yaml',
+    '.yml',
+    '.xml',
+    '.html',
+    '.css',
+    '.md',
+]);
+function getFileIcon(ext) {
+    if (IMAGE_EXTS.has(ext))
+        return ImageIcon;
+    if (ext === '.pdf')
+        return FileTextIcon;
+    if (CODE_EXTS.has(ext))
+        return CodeIcon;
+    return FileIcon;
+}
+function getFileIconColor(ext) {
+    if (ext === '.pdf')
+        return 'bg-red-50 text-red-600';
+    if (IMAGE_EXTS.has(ext))
+        return 'bg-blue-50 text-blue-600';
+    if (CODE_EXTS.has(ext))
+        return 'bg-emerald-50 text-emerald-600';
+    return 'bg-gray-50 text-gray-600';
+}
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureCreateDrawer } from './feature-create-drawer.js';
+/**
+ * **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
+ */
+declare const meta: Meta<typeof FeatureCreateDrawer>;
+export default meta;
+type Story = StoryObj<typeof FeatureCreateDrawer>;
+/** Default empty form — click the trigger button to open the create feature drawer. */
+export declare const Default: Story;
+/**
+ * Pre-filled form — click to open, then name and description are typed in.
+ * Demonstrates the form in a "ready to submit" state.
+ */
+export declare const PreFilled: Story;
+/**
+ * Submitting/loading state — all form fields are disabled, submit button shows "Creating...".
+ * Click the trigger to open and observe the disabled form.
+ */
+export declare const Submitting: Story;
+/**
+ * Validation state — open the drawer with an empty name field.
+ * The "+ Create Feature" button is disabled because name validation fails.
+ */
+export declare const ValidationDisabled: Story;
+/** Click to open the drawer for quick visual inspection. */
+export declare const PreOpened: Story;
+/**
+ * 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 declare const Interactive: Story;
+//# sourceMappingURL=feature-create-drawer.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature-create-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CA0B1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAgDlD,uFAAuF;AACvF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAiDzB,CAAC"}

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;
+}