@shepai/cli 1.84.0 → 1.85.0

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from 'react';
-import { PlusIcon, FileIcon, FileTextIcon, ImageIcon, CodeIcon, Trash2Icon, ChevronsUpDown, CheckIcon, Zap, } from 'lucide-react';
+import { PaperclipIcon, ChevronsUpDown, CheckIcon, Zap } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { useSoundAction } from '../../../hooks/use-sound-action.js';
 import { BaseDrawer } from '../../common/base-drawer/index.js';
@@ -15,8 +15,71 @@ import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover.js';
 import { Switch } from '../../ui/switch.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
 import { useGuardedDrawerClose } from '../../../hooks/drawer-close-guard.js';
+import { AttachmentChip } from '../../common/attachment-chip/index.js';
 import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
 import { pickFiles } from './pick-files.js';
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10 MB
+const ALLOWED_EXTENSIONS = new Set([
+    '.png',
+    '.jpg',
+    '.jpeg',
+    '.gif',
+    '.webp',
+    '.svg',
+    '.bmp',
+    '.ico',
+    '.pdf',
+    '.doc',
+    '.docx',
+    '.xls',
+    '.xlsx',
+    '.ppt',
+    '.pptx',
+    '.txt',
+    '.md',
+    '.csv',
+    '.json',
+    '.yaml',
+    '.yml',
+    '.xml',
+    '.ts',
+    '.tsx',
+    '.js',
+    '.jsx',
+    '.py',
+    '.rb',
+    '.go',
+    '.rs',
+    '.java',
+    '.c',
+    '.cpp',
+    '.h',
+    '.hpp',
+    '.cs',
+    '.swift',
+    '.kt',
+    '.html',
+    '.css',
+    '.scss',
+    '.less',
+    '.sh',
+    '.bash',
+    '.zsh',
+    '.fish',
+    '.toml',
+    '.ini',
+    '.cfg',
+    '.conf',
+    '.env',
+    '.zip',
+    '.tar',
+    '.gz',
+    '.log',
+]);
+function getExtension(filename) {
+    const dot = filename.lastIndexOf('.');
+    return dot >= 0 ? filename.slice(dot).toLowerCase() : '';
+}
 const AUTO_APPROVE_OPTIONS = [
     { id: 'allowPrd', label: 'PRD', description: 'Auto-approve requirements move to planning.' },
     { id: 'allowPlan', label: 'Plan', description: 'Auto-approve planning move to implementation.' },
@@ -41,6 +104,11 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
     const [fast, setFast] = useState(false);
     const [overrideAgent, setOverrideAgent] = useState(undefined);
     const [overrideModel, setOverrideModel] = useState(undefined);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [uploadError, setUploadError] = useState(null);
+    // Stable sessionId per mount — used for upload dedup grouping
+    const sessionIdRef = useRef(crypto.randomUUID());
+    const dragCounterRef = useRef(0);
     // Sync state when workflowDefaults load asynchronously
     useEffect(() => {
         if (workflowDefaults) {
@@ -65,11 +133,121 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         setFast(false);
         setOverrideAgent(undefined);
         setOverrideModel(undefined);
+        setUploadError(null);
+        dragCounterRef.current = 0;
+        setIsDragOver(false);
     }, [defaultGates, defaultPush, defaultOpenPr]);
     // Track whether the form has unsaved data
     const isDirty = description.trim() !== '' || attachments.length > 0;
     // Shared close guard — shows confirmation when dirty, prevents navigation
     const { attemptClose } = useGuardedDrawerClose({ open, isDirty, onClose, onReset: resetForm });
+    /** Validate and upload files from drop or paste. */
+    const handleFiles = useCallback(async (fileList) => {
+        setUploadError(null);
+        for (const file of fileList) {
+            // Client-side size validation
+            if (file.size > MAX_FILE_SIZE) {
+                setUploadError(`"${file.name}" exceeds 10 MB limit`);
+                return;
+            }
+            // Client-side extension validation
+            const ext = getExtension(file.name);
+            if (ext && !ALLOWED_EXTENSIONS.has(ext)) {
+                setUploadError(`File type "${ext}" is not allowed`);
+                return;
+            }
+        }
+        for (const file of fileList) {
+            const tempId = crypto.randomUUID();
+            // Optimistic loading placeholder
+            setAttachments((prev) => [
+                ...prev,
+                {
+                    id: tempId,
+                    name: file.name,
+                    size: file.size,
+                    mimeType: file.type || 'application/octet-stream',
+                    path: '',
+                    loading: true,
+                },
+            ]);
+            try {
+                const formData = new FormData();
+                formData.append('file', file);
+                formData.append('sessionId', sessionIdRef.current);
+                const res = await fetch('/api/attachments/upload', {
+                    method: 'POST',
+                    body: formData,
+                });
+                if (!res.ok) {
+                    const body = await res.json().catch(() => ({ error: 'Upload failed' }));
+                    // Remove loading placeholder on error
+                    setAttachments((prev) => prev.filter((a) => a.id !== tempId));
+                    setUploadError(body.error ?? 'Upload failed');
+                    return;
+                }
+                const uploaded = await res.json();
+                // Server dedup may return the same path for identical content — drop the duplicate.
+                setAttachments((prev) => {
+                    const isDupe = prev.some((a) => a.id !== tempId && a.path === uploaded.path);
+                    if (isDupe)
+                        return prev.filter((a) => a.id !== tempId);
+                    return prev.map((a) => a.id === tempId ? { ...uploaded, id: tempId, loading: false } : a);
+                });
+            }
+            catch {
+                setAttachments((prev) => prev.filter((a) => a.id !== tempId));
+                setUploadError('Upload failed');
+            }
+        }
+    }, []);
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current += 1;
+        if (dragCounterRef.current === 1) {
+            setIsDragOver(true);
+        }
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current -= 1;
+        if (dragCounterRef.current === 0) {
+            setIsDragOver(false);
+        }
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        setIsDragOver(false);
+        const files = Array.from(e.dataTransfer.files);
+        if (files.length > 0) {
+            handleFiles(files);
+        }
+    }, [handleFiles]);
+    const handlePaste = useCallback((e) => {
+        const items = e.clipboardData?.items;
+        if (!items)
+            return;
+        const files = [];
+        for (const item of Array.from(items)) {
+            if (item.kind === 'file') {
+                const file = item.getAsFile();
+                if (file)
+                    files.push(file);
+            }
+        }
+        if (files.length > 0) {
+            e.preventDefault();
+            handleFiles(files);
+        }
+    }, [handleFiles]);
     const handleSubmit = useCallback((e) => {
         e.preventDefault();
         if (!description.trim())
@@ -77,7 +255,7 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         createSound.play();
         onSubmit({
             description: description.trim(),
-            attachments,
+            attachments: attachments.filter((a) => !a.loading),
             repositoryPath,
             approvalGates: {
                 allowPrd: approvalGates.allowPrd ?? false,
@@ -90,6 +268,7 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
             ...(overrideAgent ? { agentType: overrideAgent } : {}),
             ...(overrideModel ? { model: overrideModel } : {}),
             ...(parentId ? { parentId } : {}),
+            sessionId: sessionIdRef.current,
         });
         resetForm();
     }, [
@@ -111,15 +290,27 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         try {
             const files = await pickFiles();
             if (files) {
-                setAttachments((prev) => [...prev, ...files]);
+                setAttachments((prev) => {
+                    const existingPaths = new Set(prev.map((f) => f.path));
+                    const unique = files
+                        .filter((f) => !existingPaths.has(f.path))
+                        .map((f) => ({
+                        id: crypto.randomUUID(),
+                        name: f.name,
+                        size: f.size,
+                        mimeType: 'application/octet-stream',
+                        path: f.path,
+                    }));
+                    return unique.length > 0 ? [...prev, ...unique] : prev;
+                });
             }
         }
         catch {
             // Native dialog failed — silently ignore (user can retry)
         }
     }, []);
-    const handleRemoveFile = useCallback((path) => {
-        setAttachments((prev) => prev.filter((f) => f.path !== path));
+    const handleRemoveFile = useCallback((id) => {
+        setAttachments((prev) => prev.filter((f) => f.id !== id));
     }, []);
     const formRef = useRef(null);
     const handleKeyDown = useCallback((e) => {
@@ -129,10 +320,10 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         }
     }, []);
     const hasFeatures = features && features.length > 0;
-    return (_jsx(BaseDrawer, { open: open, onClose: attemptClose, size: "md", modal: false, dismissOnOutsideClick: true, "data-testid": "feature-create-drawer", header: _jsxs(_Fragment, { 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" })] }), isSubmitting ? (_jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })) : null] }), footer: _jsxs("div", { className: "flex flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: attemptClose, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !description.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] }), children: _jsx("div", { className: "overflow-y-auto p-4", children: _jsx(TooltipProvider, { delayDuration: 400, children: _jsxs("form", { ref: formRef, 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-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIBE YOUR FEATURE" }), _jsxs("div", { className: "border-input focus-within:ring-ring/50 focus-within:border-ring overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]", children: [_jsx(Textarea, { id: "feature-description", placeholder: "e.g. Add GitHub OAuth login with callback handling and token refresh...", value: description, onChange: (e) => setDescription(e.target.value), onKeyDown: handleKeyDown, rows: 7, required: true, disabled: isSubmitting, className: "field-sizing-fixed min-h-42! resize-none rounded-none border-0 shadow-none focus-visible:ring-0" }), _jsxs("div", { className: "border-input flex items-center gap-3 border-t px-3 py-1.5", children: [_jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? currentAgentType ?? 'claude-code', initialModel: overrideModel ?? currentModel ?? 'claude-sonnet-4-6', mode: "override", onAgentModelChange: (agent, model) => {
+    return (_jsx(BaseDrawer, { open: open, onClose: attemptClose, size: "md", modal: false, dismissOnOutsideClick: true, "data-testid": "feature-create-drawer", header: _jsxs(_Fragment, { 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" })] }), isSubmitting ? (_jsx(DrawerDescription, { asChild: true, children: _jsx("div", { children: _jsx(Badge, { variant: "secondary", children: "Creating..." }) }) })) : null] }), footer: _jsxs("div", { className: "flex flex-row justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: attemptClose, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", form: "create-feature-form", disabled: !description.trim() || isSubmitting, children: isSubmitting ? 'Creating...' : '+ Create Feature' })] }), children: _jsx("div", { className: "overflow-y-auto p-4", children: _jsx(TooltipProvider, { delayDuration: 400, children: _jsxs("form", { ref: formRef, id: "create-feature-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { role: "region", "aria-label": "File drop zone", "data-drag-over": isDragOver ? 'true' : 'false', onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: cn('flex flex-col gap-1.5 rounded-md border-2 border-transparent p-1 transition-colors', isDragOver && 'border-primary/50 bg-primary/5'), children: [_jsx(Label, { htmlFor: "feature-description", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "DESCRIBE YOUR FEATURE" }), _jsxs("div", { className: "border-input focus-within:ring-ring/50 focus-within:border-ring flex h-56 flex-col overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]", children: [_jsx(Textarea, { id: "feature-description", placeholder: "e.g. Add GitHub OAuth login with callback handling and token refresh...", value: description, onChange: (e) => setDescription(e.target.value), onKeyDown: handleKeyDown, onPaste: handlePaste, required: true, disabled: isSubmitting, className: "min-h-0 flex-1 resize-none rounded-none border-0 shadow-none focus-visible:ring-0" }), attachments.length > 0 && (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-3 py-2", children: attachments.map((file) => (_jsx(AttachmentChip, { name: file.name, size: file.size, mimeType: file.mimeType, path: file.path, onRemove: () => handleRemoveFile(file.id), disabled: isSubmitting, loading: file.loading }, file.id))) })), uploadError ? (_jsx("p", { className: "text-destructive px-3 pb-2 text-xs", children: uploadError })) : null, _jsxs("div", { className: "border-input flex items-center gap-3 border-t px-3 py-1.5", children: [_jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? currentAgentType ?? 'claude-code', initialModel: overrideModel ?? currentModel ?? 'claude-sonnet-4-6', mode: "override", onAgentModelChange: (agent, model) => {
                                                         setOverrideAgent(agent);
                                                         setOverrideModel(model);
-                                                    }, disabled: isSubmitting, className: "w-55" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "ml-auto flex cursor-pointer items-center gap-2", children: [_jsx(Switch, { id: "fast-mode", checked: fast, onCheckedChange: setFast, disabled: isSubmitting }), _jsxs(Label, { htmlFor: "fast-mode", className: "flex cursor-pointer items-center gap-1 text-sm font-medium", children: [_jsx(Zap, { className: "h-3.5 w-3.5" }), "Fast Mode"] })] }) }), _jsx(TooltipContent, { side: "bottom", children: "Skip SDLC phases and implement directly from your prompt." })] })] })] })] }), hasFeatures && initialParentId !== undefined ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "parent-feature", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "PARENT FEATURE" }), _jsx(ParentFeatureCombobox, { features: features, value: parentId, onChange: setParentId, disabled: isSubmitting })] })) : null, _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "border-input flex items-center gap-4 rounded-md border px-3 py-2.5", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "text-muted-foreground w-16 shrink-0 cursor-default text-xs font-semibold tracking-wider", children: "APPROVE" }) }), _jsx(TooltipContent, { side: "bottom", children: "Auto-approve phase transitions without manual review." })] }), _jsx("div", { className: "flex flex-1 items-center gap-4", children: AUTO_APPROVE_OPTIONS.map((opt) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1.5", children: [_jsx(Switch, { id: `approve-${opt.id}`, size: "sm", checked: approvalGates[opt.id] ?? false, onCheckedChange: (v) => setApprovalGates((prev) => ({ ...prev, [opt.id]: v })), disabled: isSubmitting ||
+                                                    }, disabled: isSubmitting, className: "w-55" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "ml-auto flex cursor-pointer items-center gap-2", children: [_jsx(Switch, { id: "fast-mode", checked: fast, onCheckedChange: setFast, disabled: isSubmitting }), _jsxs(Label, { htmlFor: "fast-mode", className: "flex cursor-pointer items-center gap-1 text-sm font-medium", children: [_jsx(Zap, { className: "h-3.5 w-3.5" }), "Fast Mode"] })] }) }), _jsx(TooltipContent, { side: "bottom", children: "Skip SDLC phases and implement directly from your prompt." })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: handleAddFiles, disabled: isSubmitting, "aria-label": "Attach files", className: "text-muted-foreground hover:text-foreground cursor-pointer rounded p-1 transition-colors", children: _jsx(PaperclipIcon, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "bottom", children: "Attach files" })] })] })] })] }), hasFeatures && initialParentId !== undefined ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "parent-feature", className: "text-muted-foreground text-xs font-semibold tracking-wider", children: "PARENT FEATURE" }), _jsx(ParentFeatureCombobox, { features: features, value: parentId, onChange: setParentId, disabled: isSubmitting })] })) : null, _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "border-input flex items-center gap-4 rounded-md border px-3 py-2.5", children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: "text-muted-foreground w-16 shrink-0 cursor-default text-xs font-semibold tracking-wider", children: "APPROVE" }) }), _jsx(TooltipContent, { side: "bottom", children: "Auto-approve phase transitions without manual review." })] }), _jsx("div", { className: "flex flex-1 items-center gap-4", children: AUTO_APPROVE_OPTIONS.map((opt) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1.5", children: [_jsx(Switch, { id: `approve-${opt.id}`, size: "sm", checked: approvalGates[opt.id] ?? false, onCheckedChange: (v) => setApprovalGates((prev) => ({ ...prev, [opt.id]: v })), disabled: isSubmitting ||
                                                                         (fast && (opt.id === 'allowPrd' || opt.id === 'allowPlan')) }), _jsx(Label, { htmlFor: `approve-${opt.id}`, className: "cursor-pointer text-xs font-medium", children: opt.label })] }) }), _jsx(TooltipContent, { side: "bottom", children: fast && (opt.id === 'allowPrd' || opt.id === 'allowPlan')
                                                             ? 'Skipped in Fast Mode'
                                                             : opt.description })] }, opt.id))) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => {
@@ -145,7 +336,7 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
                                                                             setPush(v);
                                                                             if (!v && openPr)
                                                                                 setOpenPr(false);
-                                                                        }, disabled: isSubmitting }), _jsx(Label, { htmlFor: "push", className: "cursor-pointer text-xs font-medium", children: "Push" })] }) }), _jsx(TooltipContent, { side: "bottom", children: "Push branch to remote after implementation." })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1.5", children: [_jsx(Switch, { id: "open-pr", size: "sm", checked: openPr, onCheckedChange: setOpenPr, disabled: isSubmitting }), _jsx(Label, { htmlFor: "open-pr", className: "cursor-pointer text-xs font-medium", children: "PR" })] }) }), _jsx(TooltipContent, { side: "bottom", children: "Open a pull request after pushing." })] })] })] })] }), _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))) }))] })] }) }) }) }));
+                                                                        }, disabled: isSubmitting }), _jsx(Label, { htmlFor: "push", className: "cursor-pointer text-xs font-medium", children: "Push" })] }) }), _jsx(TooltipContent, { side: "bottom", children: "Push branch to remote after implementation." })] }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1.5", children: [_jsx(Switch, { id: "open-pr", size: "sm", checked: openPr, onCheckedChange: setOpenPr, disabled: isSubmitting }), _jsx(Label, { htmlFor: "open-pr", className: "cursor-pointer text-xs font-medium", children: "PR" })] }) }), _jsx(TooltipContent, { side: "bottom", children: "Open a pull request after pushing." })] })] })] })] })] }) }) }) }));
 }
 function ParentFeatureCombobox({ features, value, onChange, disabled, }) {
     const [open, setOpen] = useState(false);
@@ -173,55 +364,3 @@ function ParentFeatureCombobox({ features, value, onChange, disabled, }) {
                                 ? `${selectedFeature.name} (${selectedFeature.id.slice(0, 8)})`
                                 : 'Select parent feature...' }), _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-80 p-0", align: "start", "data-testid": "parent-feature-combobox-content", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { ref: inputRef, placeholder: "Search features...", value: query, onChange: (e) => setQuery(e.target.value), className: "h-8 border-0 p-0 text-sm shadow-none focus-visible:ring-0", "data-testid": "parent-feature-search" }) }), _jsxs("div", { className: "max-h-48 overflow-y-auto py-1", role: "listbox", "aria-label": "Features", children: [_jsxs("button", { type: "button", role: "option", "aria-selected": value === undefined, onClick: () => handleSelect(undefined), className: cn('hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 px-3 py-2 text-sm', value === undefined && 'bg-accent/50'), "data-testid": "parent-feature-option-none", children: [_jsx(CheckIcon, { className: cn('h-4 w-4 shrink-0', value !== undefined && 'invisible') }), _jsx("span", { className: "text-muted-foreground italic", children: "No parent" })] }), filtered.length === 0 && query ? (_jsx("p", { className: "text-muted-foreground px-3 py-2 text-sm", children: "No features found." })) : (filtered.map((f) => (_jsxs("button", { type: "button", role: "option", "aria-selected": value === f.id, onClick: () => handleSelect(f.id), className: cn('hover:bg-accent hover:text-accent-foreground flex w-full items-center gap-2 px-3 py-2 text-sm', value === f.id && 'bg-accent/50'), "data-testid": `parent-feature-option-${f.id}`, children: [_jsx(CheckIcon, { className: cn('h-4 w-4 shrink-0', value !== f.id && 'invisible') }), _jsxs("span", { className: "truncate", children: [f.name, ' ', _jsxs("span", { className: "text-muted-foreground font-mono text-xs", children: ["(", f.id.slice(0, 8), ")"] })] })] }, f.id))))] })] }) })] }));
 }
-/* ---------------------------------------------------------------------------
- * 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

@@ -113,5 +113,11 @@ export declare const WithParentFeature: Story;
  * "Discard unsaved changes?" dialog. Demonstrates the dirty-form guard.
  */
 export declare const DiscardConfirmation: Story;
+/**
+ * Drawer ready for drag-and-drop — open the drawer and drag a file over
+ * the "DESCRIBE YOUR FEATURE" area to see the drag-over highlight.
+ * In Storybook, the upload API isn't available, but the visual states render.
+ */
+export declare const DragDropReady: Story;
 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

@@ -1 +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;AAU9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAgC1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAmDlD,uFAAuF;AACvF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAMF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAC;AAYF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAkDF,+EAA+E;AAC/E,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAwCF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,KAwCzB,CAAC"}
+{"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;AAU9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAgC1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAmDlD,uFAAuF;AACvF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAMF;;;;GAIG;AACH,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAC;AAYF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAkDF,+EAA+E;AAC/E,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAwCF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAgBjC,CAAC;AAMF;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAY3B,CAAC;AAMF,eAAO,MAAM,WAAW,EAAE,KAwCzB,CAAC"}

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

@@ -360,6 +360,24 @@ export const DiscardConfirmation = {
         await userEvent.click(cancelButton);
     },
 };
+/* ---------------------------------------------------------------------------
+ * Attachment stories
+ * ------------------------------------------------------------------------- */
+/**
+ * Drawer ready for drag-and-drop — open the drawer and drag a file over
+ * the "DESCRIBE YOUR FEATURE" area to see the drag-over highlight.
+ * In Storybook, the upload API isn't available, but the visual states render.
+ */
+export const DragDropReady = {
+    render: () => _jsx(CreateDrawerTrigger, { label: "Open (Drag & Drop)" }),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.click(canvas.getByRole('button', { name: 'Open (Drag & Drop)' }));
+        const body = within(canvasElement.ownerDocument.body);
+        const descInput = await body.findByPlaceholderText('e.g. Add GitHub OAuth login with callback handling and token refresh...');
+        await userEvent.type(descInput, 'Add attachment support with drag and drop');
+    },
+};
 /* ---------------------------------------------------------------------------
  * Interactive story — full paths shown in submitted data panel
  * ------------------------------------------------------------------------- */

package/dist/src/presentation/web/components/ui/dialog.js

@@ -15,7 +15,7 @@ const DialogOverlay = React.forwardRef(({ className, onClick, ...props }, ref) =
         onClick?.(e);
     }, ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));
 DialogHeader.displayName = 'DialogHeader';

package/dist/src/presentation/web/next.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.config.d.ts","sourceRoot":"","sources":["../../../../src/presentation/web/next.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAgCvC,QAAA,MAAM,UAAU,EAAE,UA+BjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"next.config.d.ts","sourceRoot":"","sources":["../../../../src/presentation/web/next.config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAgCvC,QAAA,MAAM,UAAU,EAAE,UAsCjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/presentation/web/next.config.js

@@ -53,5 +53,11 @@ const nextConfig = {
     // Use standalone output mode for server-side rendering on demand
     // This prevents issues with statically prerendering pages that depend on client context
     output: 'standalone',
+    // Allow attachment uploads up to 11 MB (10 MB limit + multipart overhead)
+    experimental: {
+        serverActions: {
+            bodySizeLimit: '11mb',
+        },
+    },
 };
 export default nextConfig;