@shepai/cli 1.84.0-pr246.f230189 → 1.84.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 { PaperclipIcon, ChevronsUpDown, CheckIcon, Zap } from 'lucide-react';
+import { PlusIcon, FileIcon, FileTextIcon, ImageIcon, CodeIcon, Trash2Icon, 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,71 +15,8 @@ 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.' },
@@ -104,11 +41,6 @@ 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) {
@@ -133,121 +65,11 @@ 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())
@@ -255,7 +77,7 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         createSound.play();
         onSubmit({
             description: description.trim(),
-            attachments: attachments.filter((a) => !a.loading),
+            attachments,
             repositoryPath,
             approvalGates: {
                 allowPrd: approvalGates.allowPrd ?? false,
@@ -268,7 +90,6 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
             ...(overrideAgent ? { agentType: overrideAgent } : {}),
             ...(overrideModel ? { model: overrideModel } : {}),
             ...(parentId ? { parentId } : {}),
-            sessionId: sessionIdRef.current,
         });
         resetForm();
     }, [
@@ -290,27 +111,15 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         try {
             const files = await pickFiles();
             if (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;
-                });
+                setAttachments((prev) => [...prev, ...files]);
             }
         }
         catch {
             // Native dialog failed — silently ignore (user can retry)
         }
     }, []);
-    const handleRemoveFile = useCallback((id) => {
-        setAttachments((prev) => prev.filter((f) => f.id !== id));
+    const handleRemoveFile = useCallback((path) => {
+        setAttachments((prev) => prev.filter((f) => f.path !== path));
     }, []);
     const formRef = useRef(null);
     const handleKeyDown = useCallback((e) => {
@@ -320,10 +129,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", { 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) => {
+    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) => {
                                                         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." })] }), _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 ||
+                                                    }, 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 ||
                                                                         (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: () => {
@@ -336,7 +145,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." })] })] })] })] })] }) }) }) }));
+                                                                        }, 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))) }))] })] }) }) }) }));
 }
 function ParentFeatureCombobox({ features, value, onChange, disabled, }) {
     const [open, setOpen] = useState(false);
@@ -364,3 +173,55 @@ 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,11 +113,5 @@ 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;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,KAY3B,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,eAAO,MAAM,WAAW,EAAE,KAwCzB,CAAC"}

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

@@ -360,24 +360,6 @@ 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 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" })] })] })] })));
+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" })] })] })] })));
 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,UAsCjB,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,UA+BjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

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