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

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"}

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

@@ -0,0 +1,237 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { AssistantRuntimeProvider, useExternalStoreRuntime } from '@assistant-ui/react';
+import { Thread } from '../../assistant-ui/thread.js';
+// ── Mock runtime wrapper for Storybook ──────────────────────────────────────
+function MockChatProvider({ initialMessages = [], simulateDelay = 1500, simulateStreaming = true, children, }) {
+    const [messages, setMessages] = useState(initialMessages);
+    const [isRunning, setIsRunning] = useState(false);
+    const onNew = useCallback(async (message) => {
+        const textPart = message.content.find((c) => c.type === 'text');
+        if (textPart?.type !== 'text')
+            return;
+        // Add user message
+        const userMsg = {
+            id: `user-${Date.now()}`,
+            role: 'user',
+            content: [{ type: 'text', text: textPart.text }],
+            createdAt: new Date(),
+        };
+        setMessages((prev) => [...prev, userMsg]);
+        setIsRunning(true);
+        if (simulateStreaming) {
+            // Simulate streaming response
+            const fullResponse = generateMockResponse(textPart.text);
+            const assistantId = `assistant-${Date.now()}`;
+            const assistantMsg = {
+                id: assistantId,
+                role: 'assistant',
+                content: [{ type: 'text', text: '' }],
+                createdAt: new Date(),
+            };
+            setMessages((prev) => [...prev, assistantMsg]);
+            // Stream tokens
+            const words = fullResponse.split(' ');
+            let accumulated = '';
+            for (let i = 0; i < words.length; i++) {
+                await new Promise((r) => setTimeout(r, 30 + Math.random() * 50));
+                accumulated += (i > 0 ? ' ' : '') + words[i];
+                const text = accumulated;
+                setMessages((prev) => prev.map((m) => m.id === assistantId ? { ...m, content: [{ type: 'text', text }] } : m));
+            }
+        }
+        else {
+            await new Promise((r) => setTimeout(r, simulateDelay));
+            const assistantMsg = {
+                id: `assistant-${Date.now()}`,
+                role: 'assistant',
+                content: [{ type: 'text', text: generateMockResponse(textPart.text) }],
+                createdAt: new Date(),
+            };
+            setMessages((prev) => [...prev, assistantMsg]);
+        }
+        setIsRunning(false);
+    }, [simulateDelay, simulateStreaming]);
+    const runtime = useExternalStoreRuntime({
+        messages,
+        convertMessage: useCallback((msg) => msg, []),
+        isRunning,
+        onNew,
+    });
+    return _jsx(AssistantRuntimeProvider, { runtime: runtime, children: children });
+}
+function generateMockResponse(userMessage) {
+    const lower = userMessage.toLowerCase();
+    if (lower.includes('test')) {
+        return `## Test Results\n\nI ran the test suite and here are the results:\n\n- **42 tests passed**\n- **0 tests failed**\n- **Coverage: 87%**\n\nThe main gaps are in:\n1. OAuth callback handler (3 uncovered branches)\n2. Token refresh logic (missing edge case)\n\n\`\`\`typescript\ndescribe("auth", () => {\n  it("should refresh token", async () => {\n    const token = await refreshToken("expired");\n    expect(token).toBeDefined();\n  });\n});\n\`\`\`\n\nWant me to write the missing tests?`;
+    }
+    if (lower.includes('fix') || lower.includes('bug')) {
+        return `I found the issue. The problem is in the \`handleRequest\` function where the error boundary doesn't catch async rejections.\n\n**Root cause:** The \`try/catch\` block wraps synchronous code, but the database query is awaited outside of it.\n\n**Fix:**\n\`\`\`typescript\nasync function handleRequest(req: Request) {\n  try {\n    const result = await db.query(req.params.id);\n    return Response.json(result);\n  } catch (error) {\n    logger.error("Request failed", { error });\n    return Response.json({ error: "Internal error" }, { status: 500 });\n  }\n}\n\`\`\`\n\nI've applied this fix. Let me know if you want me to add error handling elsewhere.`;
+    }
+    if (lower.includes('help') || lower.includes('what')) {
+        return `I can help you with this feature! Here's what I can do:\n\n1. **Run tests** and analyze coverage\n2. **Fix bugs** by tracing through the code\n3. **Implement features** following the project's patterns\n4. **Review code** for quality and security issues\n\n> Just describe what you need and I'll get started.\n\nFor example, try saying:\n- "Run the auth module tests"\n- "Fix the database connection timeout"\n- "Add input validation to the API endpoint"`;
+    }
+    return `I understand your request. Let me analyze the codebase and work on this.\n\nLooking at the relevant files:\n- \`src/handlers/main.ts\` — entry point\n- \`src/services/core.ts\` — business logic\n- \`src/utils/helpers.ts\` — shared utilities\n\nI'll make the necessary changes and let you know when it's ready. This should take just a moment.`;
+}
+// ── Storybook meta ──────────────────────────────────────────────────────────
+/**
+ * Wrapper component for stories — accepts props that configure the mock.
+ */
+function ChatStory({ initialMessages = [], simulateStreaming = true, }) {
+    return (_jsx(MockChatProvider, { initialMessages: initialMessages, simulateStreaming: simulateStreaming, children: _jsx(Thread, {}) }));
+}
+const meta = {
+    title: 'Features/Chat/ChatTab',
+    component: ChatStory,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                height: '600px',
+                maxWidth: '640px',
+                margin: '0 auto',
+                border: '1px solid #e5e7eb',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/** Empty state — no messages, prompt always visible. Type a message to chat. */
+export const Empty = {
+    args: {
+        initialMessages: [],
+        simulateStreaming: true,
+    },
+};
+/** Pre-populated conversation with code blocks, markdown, and multiple turns. */
+export const WithHistory = {
+    args: {
+        initialMessages: [
+            {
+                id: 'msg-1',
+                role: 'user',
+                content: [
+                    { type: 'text', text: 'Can you check the test coverage for the auth module?' },
+                ],
+                createdAt: new Date(Date.now() - 300000),
+            },
+            {
+                id: 'msg-2',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: '## Test Results\n\nI ran the test suite and here are the results:\n\n- **42 tests passed**\n- **0 tests failed**\n- **Coverage: 87%**\n\nThe main gaps are in:\n1. OAuth callback handler (3 uncovered branches)\n2. Token refresh logic (missing edge case)\n\n```typescript\ndescribe("auth", () => {\n  it("should refresh token", async () => {\n    const token = await refreshToken("expired");\n    expect(token).toBeDefined();\n  });\n});\n```\n\nWant me to write the missing tests?',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 240000),
+            },
+            {
+                id: 'msg-3',
+                role: 'user',
+                content: [{ type: 'text', text: 'Yes, please write the missing tests' }],
+                createdAt: new Date(Date.now() - 180000),
+            },
+            {
+                id: 'msg-4',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'I\'ve added the missing tests:\n\n```typescript\ndescribe("OAuth callback", () => {\n  it("should handle expired state parameter", async () => {\n    const result = await handleCallback({ state: "expired" });\n    expect(result.error).toBe("invalid_state");\n  });\n\n  it("should handle missing code parameter", async () => {\n    const result = await handleCallback({ state: "valid" });\n    expect(result.error).toBe("missing_code");\n  });\n\n  it("should handle provider timeout", async () => {\n    jest.spyOn(provider, "exchange").mockRejectedValue(new Error("timeout"));\n    const result = await handleCallback({ state: "valid", code: "abc" });\n    expect(result.error).toBe("provider_error");\n  });\n});\n```\n\nCoverage is now at **94%**. The remaining 6% is defensive error handling that\'s hard to trigger in tests.',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 120000),
+            },
+        ],
+        simulateStreaming: true,
+    },
+};
+/** Agent auto-boot message — shown when agent starts on first message. */
+export const AutoBoot = {
+    args: {
+        initialMessages: [
+            {
+                id: 'status-boot',
+                role: 'assistant',
+                content: [{ type: 'text', text: 'Agent is waking up...' }],
+                createdAt: new Date(),
+            },
+        ],
+        simulateStreaming: true,
+    },
+};
+/** Rich markdown — headers, bold, lists, blockquotes, links, inline code. */
+export const RichMarkdown = {
+    args: {
+        initialMessages: [
+            {
+                id: 'msg-1',
+                role: 'user',
+                content: [{ type: 'text', text: 'What can you help me with?' }],
+                createdAt: new Date(Date.now() - 60000),
+            },
+            {
+                id: 'msg-2',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'I can help you with this feature! Here\'s what I can do:\n\n1. **Run tests** and analyze coverage\n2. **Fix bugs** by tracing through the code\n3. **Implement features** following the project\'s patterns\n4. **Review code** for quality and security issues\n\n> Just describe what you need and I\'ll get started.\n\nFor example, try saying:\n- "Run the auth module tests"\n- "Fix the database connection timeout"\n- "Add input validation to the API endpoint"',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 55000),
+            },
+            {
+                id: 'msg-3',
+                role: 'user',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Fix the database connection timeout bug. The CI logs show it fails after 30 seconds but only on the CI runner, not locally.',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 50000),
+            },
+            {
+                id: 'msg-4',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'I found the issue. The problem is in the `handleRequest` function where the error boundary doesn\'t catch async rejections.\n\n**Root cause:** The `try/catch` block wraps synchronous code, but the database query is awaited outside of it.\n\n**Fix:**\n```typescript\nasync function handleRequest(req: Request) {\n  try {\n    const result = await db.query(req.params.id);\n    return Response.json(result);\n  } catch (error) {\n    logger.error("Request failed", { error });\n    return Response.json({ error: "Internal error" }, { status: 500 });\n  }\n}\n```\n\nI\'ve applied this fix. Let me know if you want me to add error handling elsewhere.',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 40000),
+            },
+        ],
+        simulateStreaming: true,
+    },
+};
+/** Long conversation — many messages to test scrolling behavior. */
+export const LongConversation = {
+    args: {
+        initialMessages: Array.from({ length: 12 }, (_, i) => ({
+            id: `msg-${i}`,
+            role: (i % 2 === 0 ? 'user' : 'assistant'),
+            content: [
+                {
+                    type: 'text',
+                    text: i % 2 === 0
+                        ? `This is user message #${Math.floor(i / 2) + 1}. I'm asking about various aspects of the codebase.`
+                        : `Here's my response to your question #${Math.floor(i / 2) + 1}. I've analyzed the code and found some interesting patterns.\n\nThe key insight is that the **architecture follows clean separation** of concerns, which makes it easy to test and maintain.\n\n\`\`\`typescript\nconst result = await service.process(input);\nconsole.log(result.status);\n\`\`\``,
+                },
+            ],
+            createdAt: new Date(Date.now() - (12 - i) * 30000),
+        })),
+        simulateStreaming: true,
+    },
+};
+/** Non-streaming mode — response appears all at once after delay. */
+export const NonStreaming = {
+    args: {
+        initialMessages: [],
+        simulateStreaming: false,
+    },
+};

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

@@ -0,0 +1,34 @@
+interface SessionInfo {
+    pid: number | null;
+    sessionId: string | null;
+    model: string | null;
+    startedAt: string;
+    idleTimeoutMinutes: number;
+    lastActivityAt: string;
+}
+export interface ChatStatus {
+    /** Whether the agent is actively working (booting, thinking, streaming). */
+    isRunning: boolean;
+    /** Human-readable status text (e.g. "Agent is waking up...", "Using tool: Read"). */
+    statusText: string | null;
+}
+export interface ChatRuntimeOptions {
+    /** Transform message content before sending (e.g. append attachment refs). */
+    contentTransform?: (content: string) => string;
+    /** Called after a message is successfully sent (e.g. clear attachments). */
+    onMessageSent?: () => void;
+}
+/**
+ * `featureId` is a polymorphic scope key: a feature UUID, "repo-<id>", or "global".
+ * All API calls and SSE subscriptions are scoped to this key.
+ */
+export declare function useChatRuntime(featureId: string, worktreePath?: string, options?: ChatRuntimeOptions): {
+    runtime: import("@assistant-ui/react").AssistantRuntime;
+    status: ChatStatus;
+    clearChat: () => Promise<void>;
+    stopAgent: () => Promise<void>;
+    sessionInfo: SessionInfo | null;
+    isChatLoading: boolean;
+};
+export {};
+//# sourceMappingURL=useChatRuntime.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/useChatRuntime.ts"],"names":[],"mappings":"AAkBA,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;CACxB;AAgDD,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,SAAS,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAID,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,kBAAkB;;;;;;;EAiQ7B"}