@shepai/cli 1.151.2-pr470.ec33cce → 1.152.0-pr476.5b101f5

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

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { MessageSquare, ChevronDown, ChevronRight, Activity } from 'lucide-react';
+import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { ChatMessageBubble } from './ChatMessageBubble.js';
+/**
+ * Scrollable message list rendering all persisted messages plus an optional
+ * in-progress streaming bubble at the bottom. Auto-scrolls to the newest
+ * message whenever messages or streamingContent changes.
+ */
+export function ChatMessageList({ messages, streamingContent, isAgentThinking = false, activityLog = [], isLoading = false, emptyStateMessage = 'No messages yet.', }) {
+    const bottomRef = useRef(null);
+    // Auto-scroll to bottom when messages or streaming content changes
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }, [messages.length, streamingContent, isAgentThinking, activityLog.length]);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto p-4", children: [1, 2, 3].map((i) => (_jsx("div", { className: `flex ${i % 2 === 0 ? 'justify-end' : 'justify-start'}`, children: _jsx("div", { className: "bg-muted h-10 animate-pulse rounded-2xl", style: { width: `${40 + i * 15}%` } }) }, i))) }));
+    }
+    if (messages.length === 0 && streamingContent === null && !isAgentThinking) {
+        return (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center", children: [_jsx(MessageSquare, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: emptyStateMessage })] }));
+    }
+    return (_jsx("div", { className: "flex flex-1 flex-col overflow-y-auto p-4", role: "log", "aria-label": "Chat messages", "aria-live": "polite", children: _jsxs("div", { className: "flex flex-col gap-3", children: [messages.map((message) => (_jsx(ChatMessageBubble, { role: message.role, content: message.content, timestamp: message.createdAt, streaming: false }, message.id))), isAgentThinking && streamingContent === null ? (_jsx(ThinkingIndicator, { activityLog: activityLog })) : null, streamingContent !== null && (_jsxs(_Fragment, { children: [activityLog.length > 0 && _jsx(ActivityLogCollapsible, { entries: activityLog }), _jsx(ChatMessageBubble, { role: InteractiveMessageRole.assistant, content: streamingContent, streaming: true })] })), _jsx("div", { ref: bottomRef })] }) }));
+}
+/** Animated thinking indicator with expandable activity log. */
+function ThinkingIndicator({ activityLog }) {
+    const [expanded, setExpanded] = useState(false);
+    const latestEntry = activityLog.length > 0 ? activityLog[activityLog.length - 1] : null;
+    return (_jsx("div", { className: "flex w-full flex-col items-start", "aria-label": "Agent is thinking", children: _jsxs("div", { className: "bg-muted text-foreground rounded-2xl rounded-bl-sm px-4 py-2.5 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:0ms]" }), _jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]" }), _jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]" })] }), latestEntry ? (_jsx("span", { className: "text-muted-foreground text-xs", children: latestEntry })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "Thinking..." }))] }), activityLog.length > 1 && (_jsxs("button", { onClick: () => setExpanded(!expanded), className: "text-muted-foreground hover:text-foreground mt-1.5 flex items-center gap-1 text-[11px] transition-colors", children: [expanded ? _jsx(ChevronDown, { className: "size-3" }) : _jsx(ChevronRight, { className: "size-3" }), activityLog.length, " steps"] })), expanded && activityLog.length > 1 ? (_jsx("div", { className: "border-muted-foreground/20 mt-2 border-t pt-2", children: activityLog.map((entry, i) => (_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 py-0.5 text-[11px]", children: [_jsx(Activity, { className: "size-2.5 shrink-0 opacity-50" }), _jsx("span", { children: entry })] }, `${entry.slice(0, 20)}-${i}`))) })) : null] }) }));
+}
+/** Collapsible activity log shown above streaming content. */
+function ActivityLogCollapsible({ entries }) {
+    const [expanded, setExpanded] = useState(false);
+    return (_jsxs("div", { className: "flex w-full justify-start", children: [_jsxs("button", { onClick: () => setExpanded(!expanded), className: "text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors", children: [_jsx(Activity, { className: "size-3 opacity-50" }), expanded ? _jsx(ChevronDown, { className: "size-3" }) : _jsx(ChevronRight, { className: "size-3" }), entries.length, " agent actions"] }), expanded ? (_jsx("div", { className: "bg-muted/50 ml-2 rounded-md px-3 py-2", children: entries.map((entry, i) => (_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 py-0.5 text-[11px]", children: [_jsx(Activity, { className: "size-2.5 shrink-0 opacity-50" }), _jsx("span", { children: entry })] }, `${entry.slice(0, 20)}-${i}`))) })) : null] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function GlobalChatPopup(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatSheet.d.ts.map

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

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

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

@@ -0,0 +1,259 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { MessageSquare, X, Bot, GripVertical, Maximize2, Minimize2 } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { Button } from '../../ui/button.js';
+import { ChatTab } from './ChatTab.js';
+import { ChatDotIndicator } from './ChatDotIndicator.js';
+import { useTurnStatus } from '../../../hooks/turn-statuses-provider.js';
+// ── Persistent global chat popup (draggable + resizable) ──────────────────
+const DEFAULT_W = 520;
+const DEFAULT_H_VH = 70; // percentage of viewport height
+const MIN_W = 360;
+const MIN_H = 300;
+const STORAGE_KEY = 'shep-global-chat';
+function loadPersistedState() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return { pos: null, size: null };
+        const parsed = JSON.parse(raw);
+        let size = parsed.size ?? null;
+        // Clamp persisted size to minimums — prevents invisible panel from bad state
+        if (size && (size.w < MIN_W || size.h < MIN_H)) {
+            size = { w: Math.max(MIN_W, size.w), h: Math.max(MIN_H, size.h) };
+        }
+        return {
+            pos: parsed.pos ?? null,
+            size,
+        };
+    }
+    catch {
+        return { pos: null, size: null };
+    }
+}
+function persistState(pos, size) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify({ pos, size }));
+    }
+    catch {
+        // Storage full or unavailable — ignore
+    }
+}
+export function GlobalChatPopup() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasOpened, setHasOpened] = useState(false);
+    const [isMaximized, setIsMaximized] = useState(false);
+    const globalChatTurnStatus = useTurnStatus('global');
+    // Position/size — initialized from localStorage
+    // eslint-disable-next-line react/hook-use-state -- wrapped setters below
+    const [pos, setPosRaw] = useState(() => loadPersistedState().pos);
+    // eslint-disable-next-line react/hook-use-state -- wrapped setters below
+    const [size, setSizeRaw] = useState(() => loadPersistedState().size);
+    // Wrapped setters that also persist
+    const setPos = useCallback((v) => {
+        setPosRaw((prev) => {
+            const next = typeof v === 'function' ? v(prev) : v;
+            // Defer persist to avoid doing it on every mousemove frame
+            return next;
+        });
+    }, []);
+    const setSize = useCallback((v) => {
+        setSizeRaw((prev) => {
+            const next = typeof v === 'function' ? v(prev) : v;
+            return next;
+        });
+    }, []);
+    const panelRef = useRef(null);
+    const dragRef = useRef(null);
+    const resizeRef = useRef(null);
+    const toggle = useCallback(() => {
+        setIsOpen((prev) => {
+            if (!prev)
+                setHasOpened(true);
+            return !prev;
+        });
+    }, []);
+    // Store pre-maximize pos/size so we can restore
+    const preMaxRef = useRef({ pos: null, size: null });
+    const toggleMaximize = useCallback(() => {
+        if (!isOpen) {
+            setIsOpen(true);
+            setHasOpened(true);
+        }
+        setIsMaximized((prev) => {
+            if (!prev) {
+                // Entering maximize — save current state
+                preMaxRef.current = { pos, size };
+            }
+            else {
+                // Leaving maximize — restore previous state
+                setPos(preMaxRef.current.pos);
+                setSize(preMaxRef.current.size);
+            }
+            return !prev;
+        });
+    }, [isOpen, pos, size, setPos, setSize]);
+    // Keyboard shortcuts: Cmd/Ctrl+Shift+K = toggle, Cmd/Ctrl+Shift+M = maximize
+    useEffect(() => {
+        const handler = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'k' || e.key === 'K')) {
+                e.preventDefault();
+                if (isMaximized)
+                    setIsMaximized(false);
+                toggle();
+                // Focus the composer input after panel opens
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        const input = panelRef.current?.querySelector('textarea');
+                        input?.focus();
+                    }, 100);
+                });
+            }
+            if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'm' || e.key === 'M')) {
+                e.preventDefault();
+                toggleMaximize();
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [toggle, toggleMaximize, isMaximized]);
+    // Persist position/size to localStorage (debounced)
+    useEffect(() => {
+        const timer = setTimeout(() => persistState(pos, size), 300);
+        return () => clearTimeout(timer);
+    }, [pos, size]);
+    /** Clamp position so the header (top 48px) stays within viewport. */
+    const clampPos = useCallback((x, y, w) => {
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const HEADER_H = 48;
+        return {
+            // Keep at least 100px of width visible horizontally
+            x: Math.max(-w + 100, Math.min(x, vw - 100)),
+            // Keep header on screen: top >= 0, top <= viewport - header height
+            y: Math.max(0, Math.min(y, vh - HEADER_H)),
+        };
+    }, []);
+    // ── Drag handling ──────────────────────────────────────────────────────
+    const onDragStart = useCallback((e) => {
+        e.preventDefault();
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const rect = panel.getBoundingClientRect();
+        const currentX = pos?.x ?? rect.left;
+        const currentY = pos?.y ?? rect.top;
+        dragRef.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startPosX: currentX,
+            startPosY: currentY,
+        };
+        const panelW = size?.w ?? rect.width;
+        const onMove = (ev) => {
+            if (!dragRef.current)
+                return;
+            const dx = ev.clientX - dragRef.current.startX;
+            const dy = ev.clientY - dragRef.current.startY;
+            setPos(clampPos(dragRef.current.startPosX + dx, dragRef.current.startPosY + dy, panelW));
+        };
+        const onUp = () => {
+            dragRef.current = null;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }, [pos, size, setPos, clampPos]);
+    // ── Resize handling (from top-right corner) ────────────────────────────
+    const onResizeStart = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const rect = panel.getBoundingClientRect();
+        const startW = size?.w ?? rect.width;
+        const startH = size?.h ?? rect.height;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startPosY = pos?.y ?? rect.top;
+        resizeRef.current = { startX, startY, startW, startH };
+        // Capture position if not set yet
+        if (!pos) {
+            setPos({ x: rect.left, y: rect.top });
+        }
+        const onMove = (ev) => {
+            if (!resizeRef.current)
+                return;
+            const dx = ev.clientX - startX;
+            const dy = ev.clientY - startY;
+            const newW = Math.max(MIN_W, startW + dx);
+            const newH = Math.max(MIN_H, startH - dy);
+            // Top edge moves with height change, clamped to viewport
+            const newY = Math.max(0, startPosY + dy);
+            setSize({ w: newW, h: newH });
+            setPos((prev) => clampPos(prev?.x ?? rect.left, newY, newW));
+        };
+        const onUp = () => {
+            resizeRef.current = null;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }, [size, pos, setPos, setSize, clampPos]);
+    // Reset position/size on close for clean reopen
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+        setIsMaximized(false);
+    }, []);
+    // Compute panel style — maximized overrides everything
+    const panelStyle = isMaximized
+        ? {}
+        : pos
+            ? {
+                position: 'fixed',
+                left: pos.x,
+                top: pos.y,
+                width: size?.w ?? DEFAULT_W,
+                height: size?.h ?? `${DEFAULT_H_VH}vh`,
+            }
+            : {
+                width: size?.w ?? DEFAULT_W,
+                height: size?.h ?? `${DEFAULT_H_VH}vh`,
+            };
+    return (_jsxs(_Fragment, { children: [hasOpened ? (_jsxs("div", { ref: panelRef, className: cn(isMaximized
+                    ? 'bg-background fixed inset-0 z-[60] flex flex-col overflow-hidden dark:bg-neutral-900'
+                    : cn(!pos && 'fixed right-8 bottom-24', 'z-[60] flex flex-col overflow-hidden rounded-lg', 'border-border/60 border dark:border-white/10', 'bg-background dark:bg-neutral-900', 'shadow-[0_8px_40px_-8px_rgba(0,0,0,0.2)] dark:shadow-[0_8px_40px_-8px_rgba(0,0,0,0.6)]'), 'transition-opacity duration-300 ease-out', isOpen ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'), style: panelStyle, children: [!isMaximized ? (_jsx("div", { className: "h-[2px] shrink-0 bg-gradient-to-r from-transparent via-violet-500/50 to-transparent" })) : null, !isMaximized ? (_jsx("div", { onMouseDown: onResizeStart, className: "absolute top-0 right-0 z-10 h-4 w-4 cursor-ne-resize" })) : null, _jsxs("div", { onMouseDown: isMaximized ? undefined : onDragStart, className: cn('relative flex h-11 shrink-0 items-center gap-2.5 border-b border-black/[0.06] px-3.5 dark:border-white/[0.06]', !isMaximized && 'cursor-grab active:cursor-grabbing'), children: [_jsx("div", { className: "from-foreground/[0.02] to-foreground/[0.02] pointer-events-none absolute inset-0 bg-gradient-to-r via-transparent" }), !isMaximized ? (_jsx(GripVertical, { className: "text-foreground/15 relative h-3.5 w-3.5 shrink-0" })) : null, _jsx("div", { className: "relative flex h-5 w-5 items-center justify-center", children: _jsx(Bot, { className: "text-foreground/50 h-4 w-4" }) }), _jsxs("div", { className: "relative flex items-baseline gap-2", children: [_jsx("span", { className: "text-foreground/90 text-base font-bold tracking-tight", children: "Shep" }), _jsx("span", { className: "text-foreground/30 text-xs font-medium tracking-widest uppercase", children: "global" })] }), _jsxs("div", { className: "relative ml-auto flex items-center gap-0.5", children: [_jsx("button", { type: "button", onClick: toggleMaximize, className: "text-foreground/30 hover:text-foreground/60 rounded-md p-1 transition-colors", title: isMaximized ? 'Restore (⌘⇧M)' : 'Maximize (⌘⇧M)', children: isMaximized ? (_jsx(Minimize2, { className: "h-3.5 w-3.5" })) : (_jsx(Maximize2, { className: "h-3.5 w-3.5" })) }), _jsx("button", { type: "button", onClick: handleClose, className: "text-foreground/30 hover:text-foreground/60 rounded-md p-1 transition-colors", title: "Close (\u2318\u21E7K)", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx(ChatTab, { featureId: "global" }) }), !isMaximized ? (_jsx("div", { onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const panel = panelRef.current;
+                            if (!panel)
+                                return;
+                            const rect = panel.getBoundingClientRect();
+                            const startX = e.clientX;
+                            const startY = e.clientY;
+                            const startW = size?.w ?? rect.width;
+                            const startH = size?.h ?? rect.height;
+                            if (!pos)
+                                setPos({ x: rect.left, y: rect.top });
+                            const onMove = (ev) => {
+                                const maxH = window.innerHeight - (pos?.y ?? rect.top);
+                                setSize({
+                                    w: Math.max(MIN_W, startW + (ev.clientX - startX)),
+                                    h: Math.max(MIN_H, Math.min(startH + (ev.clientY - startY), maxH)),
+                                });
+                            };
+                            const onUp = () => {
+                                document.removeEventListener('mousemove', onMove);
+                                document.removeEventListener('mouseup', onUp);
+                            };
+                            document.addEventListener('mousemove', onMove);
+                            document.addEventListener('mouseup', onUp);
+                        }, className: "absolute right-0 bottom-0 z-10 h-4 w-4 cursor-se-resize" })) : null] })) : null, _jsxs("div", { className: cn('group/fab fixed right-8 bottom-6 z-30', isMaximized && 'hidden'), 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: "top-0 right-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: "Shep Chat" }), _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" })] })] }) })] })] }));
+}

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

@@ -0,0 +1,6 @@
+export interface ChatTabProps {
+    featureId: string;
+    worktreePath?: string;
+}
+export declare function ChatTab({ featureId, worktreePath }: ChatTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatTab.d.ts.map

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

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

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

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { AssistantRuntimeProvider } from '@assistant-ui/react';
+import { Trash2, Square, Cpu } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { Thread } from '../../assistant-ui/thread.js';
+import { useAttachments } from '../../../hooks/use-attachments.js';
+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';
+export function ChatTab({ featureId, worktreePath }) {
+    const [overrideAgent, setOverrideAgent] = useState(undefined);
+    const [overrideModel, setOverrideModel] = useState(undefined);
+    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, stopAgent, sessionInfo, isChatLoading } = useChatRuntime(featureId, worktreePath, { contentTransform, onMessageSent: att.clearAttachments });
+    const handlePickFiles = useCallback(async () => {
+        try {
+            const res = await fetch('/api/dialog/pick-files');
+            if (!res.ok)
+                return;
+            const data = (await res.json());
+            if (!data.paths?.length)
+                return;
+            for (const filePath of data.paths) {
+                const uploadRes = await fetch('/api/attachments/upload-from-path', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ path: filePath, sessionId: `chat-${featureId}` }),
+                });
+                if (!uploadRes.ok)
+                    continue;
+                const uploaded = (await uploadRes.json());
+                att.addAttachment(uploaded);
+            }
+        }
+        catch {
+            // Native picker not available — ignore
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- att.addAttachment is a stable callback from useAttachments
+    }, [featureId, att.addAttachment]);
+    const composer = (_jsx(ChatComposer, { attachments: att.attachments, isDragOver: att.isDragOver, uploadError: att.uploadError, onDragEnter: att.handleDragEnter, onDragLeave: att.handleDragLeave, onDragOver: att.handleDragOver, onDrop: att.handleDrop, onPaste: att.handlePaste, onRemoveAttachment: att.removeAttachment, onNotesChange: att.updateNotes, onPickFiles: handlePickFiles, agentPicker: _jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? 'claude-code', initialModel: overrideModel ?? 'claude-sonnet-4-6', mode: "override", onAgentModelChange: (agent, model) => {
+                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, onStop: stopAgent }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer }) })) })] }));
+}
+// ── Loading skeleton ────────────────────────────────────────────────────────
+function ChatSkeleton() {
+    return (_jsxs("div", { className: "flex flex-1 flex-col gap-3 p-4 pt-6", children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "bg-muted h-4 w-48 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-72 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-36 animate-pulse rounded-lg" })] })] }), _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsx("div", { className: "bg-muted h-4 w-32 animate-pulse rounded-lg" })] }), _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "bg-muted h-4 w-56 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-64 animate-pulse rounded-lg" })] })] })] }));
+}
+// ── Chat header — compact session info + actions ─────────────────────────────
+function ChatHeader({ sessionInfo, isAgentActive, onClear, onStop, }) {
+    return (_jsxs("div", { className: "flex h-8 shrink-0 items-center border-b px-3", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: sessionInfo ? (_jsxs(_Fragment, { children: [isAgentActive ? (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-emerald-500" })) : (_jsx(Cpu, { className: "text-muted-foreground/40 h-3 w-3 shrink-0" })), _jsxs("span", { className: "text-muted-foreground font-mono text-[10px]", children: [sessionInfo.model ?? 'agent', sessionInfo.sessionId ? ` · ${sessionInfo.sessionId.slice(0, 8)}` : ''] })] })) : (_jsx("span", { className: "text-muted-foreground/40 text-[11px]", children: "No session" })) }), _jsxs("div", { className: "flex items-center gap-1 pl-2", children: [sessionInfo ? (_jsxs(_Fragment, { children: [_jsxs(ToolbarButton, { onClick: () => {
+                                    void onStop();
+                                }, title: "Force stop agent process", variant: "danger", children: [_jsx(Square, { className: "h-2.5 w-2.5 fill-current" }), _jsx("span", { children: "Stop" })] }), _jsx("span", { className: "text-border mx-0.5", children: "|" })] })) : null, _jsxs(ToolbarButton, { onClick: () => {
+                            void onClear();
+                        }, title: "Clear chat history", children: [_jsx(Trash2, { className: "h-2.5 w-2.5" }), _jsx("span", { children: "Clear" })] })] })] }));
+}
+// ── Toolbar button ──────────────────────────────────────────────────────────
+function ToolbarButton({ children, onClick, title, variant, }) {
+    return (_jsx("button", { type: "button", onClick: onClick, title: title, className: cn('inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors', variant === 'danger'
+            ? 'text-destructive hover:bg-destructive/10'
+            : 'text-muted-foreground hover:text-foreground hover:bg-muted'), children: children }));
+}

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ThreadMessageLike } from '@assistant-ui/react';
+/**
+ * Wrapper component for stories — accepts props that configure the mock.
+ */
+declare function ChatStory({ initialMessages, simulateStreaming, }: {
+    initialMessages?: ThreadMessageLike[];
+    simulateStreaming?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof ChatStory>;
+export default meta;
+type Story = StoryObj<typeof ChatStory>;
+/** Empty state — no messages, prompt always visible. Type a message to chat. */
+export declare const Empty: Story;
+/** Pre-populated conversation with code blocks, markdown, and multiple turns. */
+export declare const WithHistory: Story;
+/** Agent auto-boot message — shown when agent starts on first message. */
+export declare const AutoBoot: Story;
+/** Rich markdown — headers, bold, lists, blockquotes, links, inline code. */
+export declare const RichMarkdown: Story;
+/** Long conversation — many messages to test scrolling behavior. */
+export declare const LongConversation: Story;
+/** Non-streaming mode — response appears all at once after delay. */
+export declare const NonStreaming: Story;
+//# sourceMappingURL=ChatTab.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,qBAAqB,CAAC;AA2G5E;;GAEG;AACH,iBAAS,SAAS,CAAC,EACjB,eAAoB,EACpB,iBAAwB,GACzB,EAAE;IACD,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,2CAMA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAqBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,gFAAgF;AAChF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,WAAW,EAAE,KA0CzB,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,YAAY,EAAE,KA6C1B,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,gBAAgB,EAAE,KAkB9B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC"}