@shepai/cli 1.167.0 → 1.168.0-pr509.b1dd877

package/dist/src/presentation/web/components/common/react-file-manager-dialog/react-file-manager-dialog.js

@@ -1,29 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import dynamic from 'next/dynamic';
-import { Loader2 } from 'lucide-react';
+import { ChevronRight, Folder, FolderOpen, Loader2, Pencil } from 'lucide-react';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../../ui/dialog.js';
 import { Button } from '../../ui/button.js';
-const FileManager = dynamic(() => import('@cubone/react-file-manager').then((mod) => mod.FileManager), { ssr: false, loading: () => _jsx(FileManagerSkeleton, {}) });
-function FileManagerSkeleton() {
-    return (_jsx("div", { className: "flex h-full w-full items-center justify-center", children: _jsx(Loader2, { className: "text-muted-foreground h-8 w-8 animate-spin" }) }));
-}
-function toFileManagerFiles(entries) {
-    // The @cubone/react-file-manager component filters visible files by matching
-    // file.path === currentPath + "/" + file.name. Since we dynamically fetch
-    // directory contents on each navigation, we present all entries at the
-    // FileManager's root level by using path = "/" + name. The real absolute
-    // path is preserved in a custom `absolutePath` field for selection/navigation.
-    return entries.map((entry) => ({
-        name: entry.name,
-        isDirectory: true,
-        path: `/${entry.name}`,
-        absolutePath: entry.path,
-        updatedAt: entry.updatedAt,
-    }));
-}
+import { ScrollArea } from '../../ui/scroll-area.js';
 async function fetchDirectory(dirPath) {
     const params = new URLSearchParams();
     if (dirPath) {
@@ -36,19 +18,76 @@ async function fetchDirectory(dirPath) {
     }
     return res.json();
 }
+function parseBreadcrumbs(currentPath) {
+    if (!currentPath)
+        return [];
+    const isWindows = /^[a-zA-Z]:/.test(currentPath);
+    const separator = isWindows ? '\\' : '/';
+    const parts = currentPath.split(/[\\/]/).filter(Boolean);
+    const crumbs = [];
+    for (let i = 0; i < parts.length; i++) {
+        const path = isWindows
+            ? parts.slice(0, i + 1).join(separator)
+            : separator + parts.slice(0, i + 1).join(separator);
+        crumbs.push({ label: parts[i], path });
+    }
+    return crumbs;
+}
+const MAX_VISIBLE_CRUMBS = 3;
+function AddressBar({ currentPath, isEditing, onToggleEdit, onNavigate, }) {
+    const inputRef = useRef(null);
+    const [inputValue, setInputValue] = useState(currentPath);
+    useEffect(() => {
+        setInputValue(currentPath);
+    }, [currentPath]);
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditing]);
+    function handleSubmit() {
+        const trimmed = inputValue.trim();
+        if (trimmed) {
+            onNavigate(trimmed);
+        }
+    }
+    function closeEdit() {
+        setInputValue(currentPath);
+        onToggleEdit();
+    }
+    const breadcrumbs = parseBreadcrumbs(currentPath);
+    const needsCollapse = breadcrumbs.length > MAX_VISIBLE_CRUMBS;
+    const visibleCrumbs = needsCollapse ? breadcrumbs.slice(-MAX_VISIBLE_CRUMBS) : breadcrumbs;
+    return (_jsxs("div", { className: "border-b px-4 py-3", children: [_jsx("h2", { className: "text-foreground mb-2.5 text-sm font-semibold tracking-[-0.01em]", children: "Select Folder" }), isEditing ? (_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        handleSubmit();
+                    }
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        closeEdit();
+                    }
+                }, onBlur: closeEdit, className: "bg-muted/60 border-border focus:ring-ring/20 focus:border-ring w-full rounded-lg border px-3 py-2 font-mono text-xs transition-all outline-none focus:ring-2", placeholder: "Type a path and press Enter...", spellCheck: false, autoComplete: "off" })) : (_jsxs("div", { className: "bg-muted/40 flex items-center gap-1 rounded-lg px-2.5 py-2", children: [_jsx("button", { type: "button", onClick: () => onNavigate('/'), className: "text-muted-foreground hover:text-foreground hover:bg-background shrink-0 rounded px-1.5 py-0.5 font-mono text-xs transition-colors", children: "/" }), needsCollapse ? (_jsxs(_Fragment, { children: [_jsx(ChevronRight, { className: "text-muted-foreground/30 h-3 w-3 shrink-0" }), _jsx("span", { className: "text-muted-foreground/40 font-mono text-xs", children: "..." })] })) : null, visibleCrumbs.map((crumb, i) => {
+                        const isLast = i === visibleCrumbs.length - 1;
+                        return (_jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [_jsx(ChevronRight, { className: "text-muted-foreground/30 h-3 w-3" }), isLast ? (_jsx("span", { className: "bg-primary/10 text-primary rounded px-2 py-0.5 font-mono text-xs font-medium", children: crumb.label })) : (_jsx("button", { type: "button", onClick: () => onNavigate(crumb.path), className: "text-muted-foreground hover:text-foreground hover:bg-background rounded px-1.5 py-0.5 font-mono text-xs transition-colors", children: crumb.label }))] }, crumb.path));
+                    }), _jsx("div", { className: "flex-1" }), _jsx("button", { type: "button", onClick: onToggleEdit, className: "text-muted-foreground/40 hover:text-foreground hover:bg-background shrink-0 rounded p-1 transition-colors", "aria-label": "Edit path", children: _jsx(Pencil, { className: "h-3 w-3" }) })] }))] }));
+}
 export function ReactFileManagerDialog({ open, onOpenChange, onSelect, initialPath, }) {
     const [entries, setEntries] = useState([]);
     const [currentPath, setCurrentPath] = useState('');
     const [isLoading, setIsLoading] = useState(false);
-    const [selectedPath, setSelectedPath] = useState(null);
+    const [isEditingPath, setIsEditingPath] = useState(false);
     const hasLoadedRef = useRef(false);
+    const [renderKey, setRenderKey] = useState(0);
     const loadDirectory = useCallback(async (dirPath) => {
         setIsLoading(true);
-        setSelectedPath(null);
+        setIsEditingPath(false);
         try {
             const data = await fetchDirectory(dirPath);
             setEntries(data.entries);
             setCurrentPath(data.currentPath);
+            setRenderKey((k) => k + 1);
         }
         catch (error) {
             const message = error instanceof Error ? error.message : 'Failed to load directory';
@@ -65,32 +104,13 @@ export function ReactFileManagerDialog({ open, onOpenChange, onSelect, initialPa
         }
         if (!open) {
             hasLoadedRef.current = false;
+            setIsEditingPath(false);
         }
     }, [open, initialPath, loadDirectory]);
-    const handleFileOpen = useCallback((file) => {
-        // Use absolutePath (real filesystem path) for navigation, not the
-        // virtual path used by the FileManager tree.
-        const realPath = file.absolutePath;
-        if (file.isDirectory && realPath) {
-            loadDirectory(realPath);
-        }
-    }, [loadDirectory]);
-    const handleSelectionChange = useCallback((files) => {
-        if (files.length === 1 && files[0].isDirectory) {
-            const realPath = files[0].absolutePath;
-            setSelectedPath(realPath ?? null);
-        }
-        else {
-            setSelectedPath(null);
-        }
-    }, []);
-    function handleSelect() {
-        if (selectedPath) {
-            onSelect(selectedPath);
-            onOpenChange(false);
-        }
+    function handleNavigate(path) {
+        loadDirectory(path);
     }
-    function handleSelectCurrentPath() {
+    function handleSelect() {
         if (currentPath) {
             onSelect(currentPath);
             onOpenChange(false);
@@ -104,13 +124,5 @@ export function ReactFileManagerDialog({ open, onOpenChange, onSelect, initialPa
             if (!isOpen) {
                 handleCancel();
             }
-        }, children: _jsxs(DialogContent, { className: "flex h-[95dvh] max-w-[95vw] flex-col", onCloseAutoFocus: (e) => e.preventDefault(), children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Select Folder" }), _jsx(DialogDescription, { className: "truncate font-mono text-xs", children: currentPath || 'Loading...' })] }), _jsx("div", { className: "shep-file-manager min-h-0 flex-1 overflow-hidden rounded-md border", children: _jsx(FileManager, { files: toFileManagerFiles(entries), isLoading: isLoading, height: "100%", width: "100%", layout: "list", enableFilePreview: false, permissions: {
-                            upload: false,
-                            delete: false,
-                            create: false,
-                            download: false,
-                            copy: false,
-                            move: false,
-                            rename: false,
-                        }, onFileOpen: handleFileOpen, onSelectionChange: handleSelectionChange, onRefresh: () => loadDirectory(currentPath) }, currentPath) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "secondary", onClick: handleSelectCurrentPath, disabled: !currentPath, children: "Select Current Folder" }), _jsx(Button, { onClick: handleSelect, disabled: !selectedPath, children: "Select Folder" })] })] }) }));
+        }, children: _jsxs(DialogContent, { className: "flex h-[min(520px,85dvh)] w-full max-w-[460px] flex-col gap-0 overflow-hidden p-0", onCloseAutoFocus: (e) => e.preventDefault(), children: [_jsx(DialogTitle, { className: "sr-only", children: "Select Folder" }), _jsx(DialogDescription, { className: "sr-only", children: "Navigate to a folder and select it" }), _jsx(AddressBar, { currentPath: currentPath, isEditing: isEditingPath, onToggleEdit: () => setIsEditingPath((v) => !v), onNavigate: handleNavigate }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: isLoading && entries.length === 0 ? (_jsx("div", { className: "space-y-0.5 p-2", children: Array.from({ length: 8 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg px-3 py-2.5", style: { opacity: 1 - i * 0.1 }, children: [_jsx("div", { className: "bg-muted h-4 w-4 animate-pulse rounded" }), _jsx("div", { className: "bg-muted h-3.5 animate-pulse rounded", style: { width: `${40 + Math.random() * 35}%` } })] }, `skeleton-${i}`))) })) : entries.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-20", children: [_jsx(FolderOpen, { className: "text-muted-foreground/25 mb-3 h-10 w-10" }), _jsx("p", { className: "text-muted-foreground/60 text-sm", children: "Empty folder" })] })) : (_jsx("div", { className: "p-2", children: entries.map((entry, i) => (_jsxs("button", { type: "button", onClick: () => handleNavigate(entry.path), className: "folder-row group flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-all hover:bg-[var(--color-primary)]/[0.06] active:scale-[0.997]", style: { animationDelay: `${i * 20}ms` }, children: [_jsx(Folder, { className: "text-muted-foreground/50 group-hover:text-primary h-[18px] w-[18px] shrink-0 transition-colors" }), _jsx("span", { className: "text-foreground min-w-0 flex-1 truncate text-[13px] font-medium", children: entry.name }), _jsx(ChevronRight, { className: "text-muted-foreground/0 group-hover:text-muted-foreground/40 h-3.5 w-3.5 shrink-0 transition-all" })] }, entry.path))) }, renderKey)) }), _jsxs("div", { className: "flex items-center gap-2 border-t px-4 py-3", children: [_jsx("p", { className: "text-muted-foreground min-w-0 flex-1 truncate font-mono text-[11px] leading-none", children: currentPath || '\u00A0' }), _jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancel, className: "text-muted-foreground h-8 shrink-0 px-3 text-xs", children: "Cancel" }), _jsxs(Button, { size: "sm", onClick: handleSelect, disabled: !currentPath || isLoading, className: "h-8 shrink-0 px-5 text-xs font-medium", children: [isLoading ? _jsx(Loader2, { className: "mr-1.5 h-3 w-3 animate-spin" }) : null, "Select"] })] })] }) }));
 }

package/dist/src/presentation/web/components/features/chat/ChatDotIndicator.d.ts

@@ -8,6 +8,7 @@ interface ChatDotIndicatorProps {
  * - idle: no dot (hidden)
  * - processing: pulsing blue dot
  * - unread: static green dot
+ * - awaiting_input: pulsing amber dot (agent needs user response)
  */
 export declare function ChatDotIndicator({ status, className }: ChatDotIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/src/presentation/web/components/features/chat/ChatDotIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatDotIndicator.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatDotIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,qBAAqB;IAC7B,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,SAAc,EAAE,EAAE,qBAAqB,kDAUjF"}
+{"version":3,"file":"ChatDotIndicator.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatDotIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,qBAAqB;IAC7B,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,SAAc,EAAE,EAAE,qBAAqB,kDAajF"}

package/dist/src/presentation/web/components/features/chat/ChatDotIndicator.js

@@ -5,9 +5,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - idle: no dot (hidden)
  * - processing: pulsing blue dot
  * - unread: static green dot
+ * - awaiting_input: pulsing amber dot (agent needs user response)
  */
 export function ChatDotIndicator({ status, className = '' }) {
     if (status === 'idle')
         return null;
-    return (_jsx("span", { className: `absolute -top-0.5 -right-0.5 block rounded-full ${status === 'processing' ? 'h-2.5 w-2.5 animate-pulse bg-blue-500' : 'h-2 w-2 bg-green-500'} ${className}` }));
+    const dotClass = status === 'awaiting_input'
+        ? 'h-2.5 w-2.5 animate-pulse bg-amber-500'
+        : status === 'processing'
+            ? 'h-2.5 w-2.5 animate-pulse bg-blue-500'
+            : 'h-2 w-2 bg-green-500';
+    return (_jsx("span", { className: `absolute -top-0.5 -right-0.5 block rounded-full ${dotClass} ${className}` }));
 }

package/dist/src/presentation/web/components/features/chat/ChatDotIndicator.stories.d.ts

@@ -6,4 +6,5 @@ type Story = StoryObj<typeof ChatDotIndicator>;
 export declare const Idle: Story;
 export declare const Processing: Story;
 export declare const Unread: Story;
+export declare const AwaitingInput: Story;
 //# sourceMappingURL=ChatDotIndicator.stories.d.ts.map

package/dist/src/presentation/web/components/features/chat/ChatDotIndicator.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatDotIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatDotIndicator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAWvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC"}
+{"version":3,"file":"ChatDotIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatDotIndicator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAWvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC"}

package/dist/src/presentation/web/components/features/chat/ChatDotIndicator.stories.js

@@ -17,3 +17,6 @@ export const Processing = {
 export const Unread = {
     args: { status: 'unread' },
 };
+export const AwaitingInput = {
+    args: { status: 'awaiting_input' },
+};

package/dist/src/presentation/web/components/features/chat/ChatSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSheet.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatSheet.tsx"],"names":[],"mappings":"AA2DA,wBAAgB,eAAe,4CAwY9B"}
+{"version":3,"file":"ChatSheet.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatSheet.tsx"],"names":[],"mappings":"AA2DA,wBAAgB,eAAe,4CA4Y9B"}

package/dist/src/presentation/web/components/features/chat/ChatSheet.js

@@ -261,7 +261,9 @@ export function GlobalChatPopup() {
                             document.addEventListener('mouseup', onUp);
                         }, className: "absolute end-0 bottom-0 z-10 h-4 w-4 cursor-se-resize" })) : null] })) : null, _jsxs(ChatFabWrapper, { swapPosition: swapPosition, sidebarState: sidebarState, isMaximized: isMaximized, children: [_jsxs(Button, { size: "icon", onClick: toggle, className: cn('relative h-14 w-14 rounded-full shadow-lg', 'transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95', isOpen
                             ? 'bg-violet-600 text-white hover:bg-violet-500'
-                            : 'bg-violet-500 text-white hover:bg-violet-400 dark:bg-violet-500 dark:hover:bg-violet-400'), children: [_jsx(MessageSquare, { className: cn('absolute h-7 w-7 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100') }), _jsx(X, { className: cn('absolute h-6 w-6 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0') }), !isOpen && _jsx(ChatDotIndicator, { status: globalChatTurnStatus, className: "end-0 top-0" })] }), _jsx("div", { className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 opacity-0 transition-all duration-200 group-hover/fab:translate-y-0 group-hover/fab:opacity-100", children: _jsxs("div", { className: "bg-foreground rounded-lg px-3 py-1.5 text-center shadow-lg", children: [_jsx("p", { className: "text-background text-xs font-medium whitespace-nowrap", children: t('chat.shepChat') }), _jsxs("p", { className: "text-background/50 mt-0.5 flex items-center justify-center gap-1 text-[10px]", children: [_jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u2318" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u21E7" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "K" })] })] }) })] })] }));
+                            : 'bg-violet-500 text-white hover:bg-violet-400 dark:bg-violet-500 dark:hover:bg-violet-400', 
+                        // Animated states when chat is closed
+                        !isOpen && globalChatTurnStatus === 'processing' && 'chat-fab-spinning', !isOpen && globalChatTurnStatus === 'unread' && 'chat-fab-glow-unread', !isOpen && globalChatTurnStatus === 'awaiting_input' && 'chat-fab-glow-awaiting'), children: [_jsx(MessageSquare, { className: cn('absolute h-7 w-7 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100') }), _jsx(X, { className: cn('absolute h-6 w-6 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0') }), !isOpen && _jsx(ChatDotIndicator, { status: globalChatTurnStatus, className: "end-0 top-0" })] }), _jsx("div", { className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 opacity-0 transition-all duration-200 group-hover/fab:translate-y-0 group-hover/fab:opacity-100", children: _jsxs("div", { className: "bg-foreground rounded-lg px-3 py-1.5 text-center shadow-lg", children: [_jsx("p", { className: "text-background text-xs font-medium whitespace-nowrap", children: t('chat.shepChat') }), _jsxs("p", { className: "text-background/50 mt-0.5 flex items-center justify-center gap-1 text-[10px]", children: [_jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u2318" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u21E7" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "K" })] })] }) })] })] }));
 }
 /** Wrapper for the Chat FAB that handles position swapping. */
 function ChatFabWrapper({ swapPosition, sidebarState, isMaximized, children, }) {

package/dist/src/presentation/web/components/features/chat/ChatTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,YAAY,2CAwGhE"}
+{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAID,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,YAAY,2CAsHhE"}

package/dist/src/presentation/web/components/features/chat/ChatTab.js

@@ -11,6 +11,7 @@ import { composeUserInput } from '../../../app/actions/compose-user-input.js';
 import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
 import { useChatRuntime } from './useChatRuntime.js';
 import { ChatComposer } from './ChatComposer.js';
+import { InteractionBubble } from './InteractionBubble.js';
 const IS_DEV = process.env.NODE_ENV === 'development';
 export function ChatTab({ featureId, worktreePath }) {
     const [overrideAgent, setOverrideAgent] = useState(undefined);
@@ -18,7 +19,7 @@ export function ChatTab({ featureId, worktreePath }) {
     const [debugMode, setDebugMode] = useState(false);
     const att = useAttachments();
     const contentTransform = useCallback((content) => composeUserInput(content, att.completedAttachments.map((a) => ({ path: a.path, name: a.name, notes: a.notes }))), [att.completedAttachments]);
-    const { runtime, status, clearChat, sessionInfo, isChatLoading } = useChatRuntime(featureId, worktreePath, {
+    const { runtime, status, clearChat, sessionInfo, isChatLoading, pendingInteraction, respondToInteraction, } = useChatRuntime(featureId, worktreePath, {
         contentTransform,
         onMessageSent: att.clearAttachments,
         model: overrideModel,
@@ -54,7 +55,7 @@ export function ChatTab({ featureId, worktreePath }) {
                 setOverrideAgent(agent);
                 setOverrideModel(model);
             }, className: "w-55" }) }));
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, debugMode: debugMode, onDebugToggle: IS_DEV ? setDebugMode : undefined }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer }) })) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, debugMode: debugMode, onDebugToggle: IS_DEV ? setDebugMode : undefined }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer, afterMessages: pendingInteraction ? (_jsx(InteractionBubble, { interaction: pendingInteraction, onSubmit: respondToInteraction })) : undefined }) })) })] }));
 }
 // ── Loading skeleton ────────────────────────────────────────────────────────
 function ChatSkeleton() {

package/dist/src/presentation/web/components/features/chat/InteractionBubble.d.ts

@@ -0,0 +1,33 @@
+/** Shape matching UserQuestion from the agent executor interface. */
+interface QuestionOption {
+    label: string;
+    description: string;
+    preview?: string;
+}
+interface Question {
+    question: string;
+    header: string;
+    options: QuestionOption[];
+    multiSelect: boolean;
+}
+export interface InteractionData {
+    toolCallId: string;
+    questions: Question[];
+}
+export interface InteractionBubbleProps {
+    interaction: InteractionData;
+    onSubmit: (answers: Record<string, string>) => void;
+    className?: string;
+}
+/**
+ * Renders an agent's AskUserQuestion interaction inline in the chat thread.
+ *
+ * - Single question: renders options directly
+ * - Multiple questions: tabbed interface with header chips as tabs
+ *
+ * After submission, the bubble disappears and a green summary message
+ * is persisted in the conversation history (rendered by InteractionResponseMessage in thread.tsx).
+ */
+export declare function InteractionBubble({ interaction, onSubmit, className }: InteractionBubbleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InteractionBubble.d.ts.map

package/dist/src/presentation/web/components/features/chat/InteractionBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionBubble.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/InteractionBubble.tsx"],"names":[],"mappings":"AAMA,qEAAqE;AACrE,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,eAAe,CAAC;IAC7B,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CAsB7F"}

package/dist/src/presentation/web/components/features/chat/InteractionBubble.js

@@ -0,0 +1,155 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Check, MessageCircleQuestion } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+/**
+ * Renders an agent's AskUserQuestion interaction inline in the chat thread.
+ *
+ * - Single question: renders options directly
+ * - Multiple questions: tabbed interface with header chips as tabs
+ *
+ * After submission, the bubble disappears and a green summary message
+ * is persisted in the conversation history (rendered by InteractionResponseMessage in thread.tsx).
+ */
+export function InteractionBubble({ interaction, onSubmit, className }) {
+    const isMultiQuestion = interaction.questions.length > 1;
+    return (_jsxs("div", { className: cn('group flex w-full items-start gap-2.5 px-4 py-0.5', className), children: [_jsx("div", { className: "bg-muted flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx(MessageCircleQuestion, { className: "h-3.5 w-3.5 text-violet-600 dark:text-violet-400" }) }), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: _jsx("div", { className: "text-foreground mt-px overflow-hidden rounded-2xl rounded-tl-sm border border-violet-200 bg-violet-50/50 text-sm leading-relaxed shadow-sm dark:border-violet-500/20 dark:bg-violet-950/20", children: isMultiQuestion ? (_jsx(TabbedQuestions, { questions: interaction.questions, onSubmit: onSubmit })) : (_jsx("div", { className: "px-4 py-3", children: _jsx(SingleQuestion, { question: interaction.questions[0], onSubmit: onSubmit }) })) }) })] }));
+}
+function TabbedQuestions({ questions, onSubmit, }) {
+    const [activeTab, setActiveTab] = useState(0);
+    // All per-question state lives here — indexed by question text
+    const [selections, setSelections] = useState(() => {
+        const init = {};
+        for (const q of questions) {
+            init[q.question] = { selectedOptions: new Set(), otherText: '', isOtherSelected: false };
+        }
+        return init;
+    });
+    const updateSelection = useCallback((questionText, updater) => {
+        setSelections((prev) => ({
+            ...prev,
+            [questionText]: updater(prev[questionText]),
+        }));
+    }, []);
+    // Derive answers from selections
+    const answers = {};
+    for (const q of questions) {
+        const s = selections[q.question];
+        if (!s)
+            continue;
+        const parts = [...s.selectedOptions];
+        if (s.isOtherSelected && s.otherText.trim())
+            parts.push(s.otherText.trim());
+        if (parts.length > 0)
+            answers[q.question] = parts.join(', ');
+    }
+    const allAnswered = questions.every((q) => answers[q.question]);
+    const handleSubmit = useCallback(() => {
+        if (!allAnswered)
+            return;
+        onSubmit(answers);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- answers is derived, stable enough
+    }, [allAnswered, onSubmit, selections]);
+    return (_jsxs("div", { children: [_jsx("div", { className: "flex border-b border-violet-200 dark:border-violet-500/20", children: questions.map((q, i) => {
+                    const isActive = i === activeTab;
+                    const hasAnswer = !!answers[q.question];
+                    return (_jsxs("button", { type: "button", onClick: () => setActiveTab(i), className: cn('relative flex items-center gap-1.5 px-4 py-2 text-xs font-medium transition-colors', isActive
+                            ? 'text-violet-700 dark:text-violet-300'
+                            : 'text-muted-foreground hover:text-foreground'), children: [hasAnswer ? (_jsx(Check, { className: "h-3 w-3 text-emerald-600 dark:text-emerald-400" })) : (_jsxs("span", { className: "text-muted-foreground/50 text-[10px]", children: [i + 1, "."] })), q.header, isActive ? (_jsx("span", { className: "absolute inset-x-0 -bottom-px h-0.5 rounded-full bg-violet-600 dark:bg-violet-400" })) : null] }, q.question));
+                }) }), questions.map((q, i) => (_jsx("div", { className: "px-4 py-3", style: { display: i === activeTab ? undefined : 'none' }, children: _jsx(QuestionPanel, { question: q, selection: selections[q.question], onSelectionChange: (updater) => updateSelection(q.question, updater) }) }, q.question))), _jsxs("div", { className: "flex items-center gap-3 border-t border-violet-200 px-4 py-2.5 dark:border-violet-500/20", children: [_jsxs("button", { type: "button", onClick: handleSubmit, disabled: !allAnswered, className: cn('inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-all', allAnswered
+                            ? 'bg-violet-600 text-white shadow-sm hover:bg-violet-700 active:scale-[0.98] dark:bg-violet-600 dark:hover:bg-violet-500'
+                            : 'bg-muted text-muted-foreground cursor-not-allowed opacity-50'), children: [_jsx(Check, { className: "h-3 w-3" }), "Submit all"] }), _jsxs("span", { className: "text-muted-foreground text-[10px]", children: [Object.keys(answers).length, "/", questions.length, " answered"] })] })] }));
+}
+// ── Question panel (used inside tabs) ───────────────────────────────────
+function QuestionPanel({ question, selection, onSelectionChange, }) {
+    const handleOptionToggle = useCallback((label) => {
+        onSelectionChange((prev) => {
+            const next = new Set(prev.selectedOptions);
+            if (question.multiSelect) {
+                if (next.has(label))
+                    next.delete(label);
+                else
+                    next.add(label);
+            }
+            else {
+                next.clear();
+                next.add(label);
+                return { ...prev, selectedOptions: next, isOtherSelected: false };
+            }
+            return { ...prev, selectedOptions: next };
+        });
+    }, [question.multiSelect, onSelectionChange]);
+    const handleOtherToggle = useCallback(() => {
+        onSelectionChange((prev) => {
+            if (question.multiSelect) {
+                return { ...prev, isOtherSelected: !prev.isOtherSelected };
+            }
+            return { selectedOptions: new Set(), otherText: prev.otherText, isOtherSelected: true };
+        });
+    }, [question.multiSelect, onSelectionChange]);
+    const handleOtherTextChange = useCallback((text) => {
+        onSelectionChange((prev) => ({ ...prev, otherText: text }));
+    }, [onSelectionChange]);
+    return (_jsxs("div", { children: [_jsxs("p", { className: "text-foreground mb-2 text-xs font-medium", children: [question.question, question.multiSelect ? (_jsx("span", { className: "text-muted-foreground ml-1 font-normal", children: "(select multiple)" })) : null] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [question.options.map((opt) => (_jsx(OptionRow, { option: opt, isSelected: selection.selectedOptions.has(opt.label), isMulti: question.multiSelect, onToggle: () => handleOptionToggle(opt.label) }, opt.label))), _jsx(OtherRow, { isSelected: selection.isOtherSelected, isMulti: question.multiSelect, text: selection.otherText, onToggle: handleOtherToggle, onTextChange: handleOtherTextChange })] })] }));
+}
+// ── Single question (no tabs) ───────────────────────────────────────────
+function SingleQuestion({ question, onSubmit, }) {
+    const [selectedOptions, setSelectedOptions] = useState(new Set());
+    const [otherText, setOtherText] = useState('');
+    const [isOtherSelected, setIsOtherSelected] = useState(false);
+    const handleOptionToggle = useCallback((label) => {
+        setSelectedOptions((prev) => {
+            const next = new Set(prev);
+            if (question.multiSelect) {
+                if (next.has(label))
+                    next.delete(label);
+                else
+                    next.add(label);
+            }
+            else {
+                next.clear();
+                next.add(label);
+                setIsOtherSelected(false);
+            }
+            return next;
+        });
+        if (!question.multiSelect)
+            setIsOtherSelected(false);
+    }, [question.multiSelect]);
+    const handleOtherToggle = useCallback(() => {
+        if (question.multiSelect) {
+            setIsOtherSelected((prev) => !prev);
+        }
+        else {
+            setSelectedOptions(new Set());
+            setIsOtherSelected(true);
+        }
+    }, [question.multiSelect]);
+    const handleSubmit = useCallback(() => {
+        const parts = [...selectedOptions];
+        if (isOtherSelected && otherText.trim())
+            parts.push(otherText.trim());
+        if (parts.length === 0)
+            return;
+        onSubmit({ [question.question]: parts.join(', ') });
+    }, [selectedOptions, isOtherSelected, otherText, onSubmit, question.question]);
+    const hasSelection = selectedOptions.size > 0 || (isOtherSelected && otherText.trim());
+    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-start gap-2", children: [_jsx("span", { className: "inline-flex shrink-0 items-center rounded-full bg-violet-100 px-2 py-0.5 text-[10px] font-semibold tracking-wider text-violet-700 uppercase dark:bg-violet-900/50 dark:text-violet-300", children: question.header }), _jsx("span", { className: "font-medium", children: question.question })] }), _jsxs("div", { className: "ml-0.5 flex flex-col gap-1.5", children: [question.options.map((opt) => (_jsx(OptionRow, { option: opt, isSelected: selectedOptions.has(opt.label), isMulti: question.multiSelect, onToggle: () => handleOptionToggle(opt.label) }, opt.label))), _jsx(OtherRow, { isSelected: isOtherSelected, isMulti: question.multiSelect, text: otherText, onToggle: handleOtherToggle, onTextChange: setOtherText })] }), _jsxs("div", { className: "mt-3 flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: handleSubmit, disabled: !hasSelection, className: cn('inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium transition-all', hasSelection
+                            ? 'bg-violet-600 text-white shadow-sm hover:bg-violet-700 active:scale-[0.98] dark:bg-violet-600 dark:hover:bg-violet-500'
+                            : 'bg-muted text-muted-foreground cursor-not-allowed opacity-50'), children: [_jsx(Check, { className: "h-3 w-3" }), "Submit"] }), question.multiSelect ? (_jsx("span", { className: "text-muted-foreground text-[10px]", children: "Select one or more" })) : null] })] }));
+}
+function OptionRow({ option, isSelected, isMulti, onToggle }) {
+    return (_jsxs("button", { type: "button", onClick: onToggle, className: cn('flex items-start gap-2.5 rounded-lg border px-3 py-2 text-left text-xs transition-all', isSelected
+            ? 'border-violet-300 bg-violet-100/60 shadow-sm dark:border-violet-500/40 dark:bg-violet-900/30'
+            : 'border-border/50 hover:border-violet-300 hover:bg-violet-50 dark:hover:border-violet-500/30 dark:hover:bg-violet-900/10'), children: [_jsx("span", { className: cn('mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center border transition-colors', isMulti ? 'rounded' : 'rounded-full', isSelected
+                    ? 'border-violet-600 bg-violet-600 dark:border-violet-500 dark:bg-violet-500'
+                    : 'border-muted-foreground/30'), children: isSelected ? _jsx(Check, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) : null }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: cn('font-medium', isSelected && 'text-violet-700 dark:text-violet-300'), children: option.label }), _jsx("span", { className: "text-muted-foreground text-[11px] leading-snug", children: option.description })] })] }));
+}
+function OtherRow({ isSelected, isMulti, text, onToggle, onTextChange }) {
+    return (_jsxs("div", { className: cn('flex items-start gap-2.5 rounded-lg border px-3 py-2 text-xs transition-all', isSelected
+            ? 'border-violet-300 bg-violet-100/60 shadow-sm dark:border-violet-500/40 dark:bg-violet-900/30'
+            : 'border-border/50 hover:border-violet-300 dark:hover:border-violet-500/30'), children: [_jsx("button", { type: "button", onClick: onToggle, className: "mt-0.5 shrink-0", children: _jsx("span", { className: cn('flex h-4 w-4 items-center justify-center border transition-colors', isMulti ? 'rounded' : 'rounded-full', isSelected
+                        ? 'border-violet-600 bg-violet-600 dark:border-violet-500 dark:bg-violet-500'
+                        : 'border-muted-foreground/30'), children: isSelected ? _jsx(Check, { className: "h-2.5 w-2.5 text-white", strokeWidth: 3 }) : null }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("span", { className: cn('font-medium', isSelected && 'text-violet-700 dark:text-violet-300'), children: "Other" }), isSelected ? (_jsx("input", { type: "text", value: text, onChange: (e) => onTextChange(e.target.value), placeholder: "Type your answer...", className: "w-full rounded-md border border-violet-200 bg-white/80 px-2 py-1 text-xs outline-none focus:border-violet-400 focus:ring-1 focus:ring-violet-300/30 dark:border-violet-500/30 dark:bg-violet-950/30 dark:focus:border-violet-500/50 dark:focus:ring-violet-500/20", autoFocus: true })) : null] })] }));
+}

package/dist/src/presentation/web/components/features/chat/InteractionBubble.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react';
+import { InteractionBubble } from './InteractionBubble.js';
+import type { InteractionData } from './InteractionBubble.js';
+declare const meta: {
+    title: string;
+    component: typeof InteractionBubble;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        interaction: InteractionData;
+        onSubmit: (answers: Record<string, string>) => void;
+        className?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SingleSelect: Story;
+export declare const MultiSelect: Story;
+export declare const TabbedMultiQuestion: Story;
+export declare const Submitted: Story;
+//# sourceMappingURL=InteractionBubble.stories.d.ts.map

package/dist/src/presentation/web/components/features/chat/InteractionBubble.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionBubble.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/InteractionBubble.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,QAAA,MAAM,IAAI;;;;;;;;;;;CAWgC,CAAC;AAE3C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAsFnC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAGjC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC"}

package/dist/src/presentation/web/components/features/chat/InteractionBubble.stories.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { InteractionBubble } from './InteractionBubble.js';
+const meta = {
+    title: 'Features/Chat/InteractionBubble',
+    component: InteractionBubble,
+    parameters: { layout: 'padded' },
+    decorators: [
+        (Story) => (_jsx("div", { className: "bg-background mx-auto max-w-xl rounded-lg border p-4", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const colorInteraction = {
+    toolCallId: 'toolu_color_1',
+    questions: [
+        {
+            question: 'What is your favorite color?',
+            header: 'Color',
+            multiSelect: false,
+            options: [
+                { label: 'Red', description: 'The color red' },
+                { label: 'Blue', description: 'The color blue' },
+                { label: 'Green', description: 'The color green' },
+                { label: 'Yellow', description: 'The color yellow' },
+            ],
+        },
+    ],
+};
+const multiSelectInteraction = {
+    toolCallId: 'toolu_features_1',
+    questions: [
+        {
+            question: 'Which features do you want to enable?',
+            header: 'Features',
+            multiSelect: true,
+            options: [
+                { label: 'Dark mode', description: 'Enable dark theme support' },
+                { label: 'Notifications', description: 'Push notifications for updates' },
+                { label: 'Analytics', description: 'Usage analytics and reporting' },
+            ],
+        },
+    ],
+};
+const multiQuestionInteraction = {
+    toolCallId: 'toolu_setup_1',
+    questions: [
+        {
+            question: "What's your preferred coding environment?",
+            header: 'IDE',
+            multiSelect: false,
+            options: [
+                {
+                    label: 'VS Code',
+                    description: "Microsoft's popular editor with rich extension ecosystem.",
+                },
+                { label: 'Neovim', description: 'Terminal-based, highly customizable.' },
+                { label: 'JetBrains', description: 'Full-featured IDEs with deep language intelligence.' },
+                { label: 'Cursor', description: 'AI-first fork of VS Code.' },
+            ],
+        },
+        {
+            question: 'Which of these technologies do you actively use? (pick all that apply)',
+            header: 'Tech Stack',
+            multiSelect: true,
+            options: [
+                { label: 'TypeScript', description: 'Statically typed JavaScript.' },
+                { label: 'Python', description: 'Scripting, data science, ML, or backend.' },
+                { label: 'Go', description: 'Fast, compiled, cloud-native tooling.' },
+                { label: 'Rust', description: 'Systems programming with memory safety.' },
+            ],
+        },
+        {
+            question: 'How would you describe your experience level?',
+            header: 'Level',
+            multiSelect: false,
+            options: [
+                { label: 'Junior', description: 'Less than 2 years of experience.' },
+                { label: 'Mid-level', description: '2-5 years of experience.' },
+                { label: 'Senior', description: '5+ years of experience.' },
+            ],
+        },
+    ],
+};
+// ── Interactive wrapper ─────────────────────────────────────────────────
+function InteractiveBubble({ interaction }) {
+    const [submitted, setSubmitted] = useState(false);
+    if (submitted)
+        return _jsx("p", { className: "text-muted-foreground px-4 text-xs", children: "Submitted!" });
+    return _jsx(InteractionBubble, { interaction: interaction, onSubmit: () => setSubmitted(true) });
+}
+const noop = () => undefined;
+export const SingleSelect = {
+    args: { interaction: colorInteraction, onSubmit: noop },
+    render: () => _jsx(InteractiveBubble, { interaction: colorInteraction }),
+};
+export const MultiSelect = {
+    args: { interaction: multiSelectInteraction, onSubmit: noop },
+    render: () => _jsx(InteractiveBubble, { interaction: multiSelectInteraction }),
+};
+export const TabbedMultiQuestion = {
+    args: { interaction: multiQuestionInteraction, onSubmit: noop },
+    render: () => _jsx(InteractiveBubble, { interaction: multiQuestionInteraction }),
+};
+export const Submitted = {
+    args: { interaction: colorInteraction, onSubmit: noop },
+    render: () => _jsx(InteractiveBubble, { interaction: colorInteraction }),
+};