@agent-native/core 0.4.5 → 0.5.0-dev.b51eaae

package/dist/client/AssistantChat.js

@@ -1,55 +1,298 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle, } from "react";
-import { AssistantRuntimeProvider, useLocalRuntime, useThreadRuntime, useThread, useMessageRuntime, ThreadPrimitive, ComposerPrimitive, MessagePrimitive, } from "@assistant-ui/react";
+import { AssistantRuntimeProvider, useLocalRuntime, useThreadRuntime, useThread, useAui, useComposer, useMessageRuntime, ThreadPrimitive, ComposerPrimitive, MessagePrimitive, } from "@assistant-ui/react";
+import { SimpleImageAttachmentAdapter, SimpleTextAttachmentAdapter, CompositeAttachmentAdapter, } from "@assistant-ui/react";
+import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
+import ReactMarkdown from "react-markdown";
 import { createAgentChatAdapter } from "./agent-chat-adapter.js";
+import { readSSEStreamRaw } from "./sse-event-processor.js";
 import { cn } from "./utils.js";
-// ─── Icons ──────────────────────────────────────────────────────────────────
-function SparklesIcon({ className }) {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z" }) }));
+import { TiptapComposer, } from "./composer/TiptapComposer.js";
+import { IconSparkles, IconX, IconPlayerStop, IconCheck, IconChevronDown, IconCopy, IconTerminal, IconLoader2, IconCircleX, IconSquareFilled, IconClock, IconFile, IconFolder, IconFileText, IconCheckbox, IconMail, IconUser, IconPresentation, IconStack2, IconMessageChatbot, } from "@tabler/icons-react";
+// ─── Markdown Text ──────────────────────────────────────────────────────────
+const markdownStyles = `
+.agent-markdown > :first-child { margin-top: 0; }
+.agent-markdown > :last-child { margin-bottom: 0; }
+.agent-markdown p { margin: 0.5em 0; }
+.agent-markdown ul, .agent-markdown ol { margin: 0.5em 0; padding-left: 1.5em; }
+.agent-markdown li { margin: 0.2em 0; }
+.agent-markdown li > p { margin: 0; }
+.agent-markdown h1 { font-size: 1.25em; font-weight: 600; margin: 0.75em 0 0.25em; }
+.agent-markdown h2 { font-size: 1.125em; font-weight: 600; margin: 0.75em 0 0.25em; }
+.agent-markdown h3 { font-size: 1em; font-weight: 600; margin: 0.75em 0 0.25em; }
+.agent-markdown strong { font-weight: 600; }
+.agent-markdown em { font-style: italic; }
+.agent-markdown code { font-size: 0.875em; padding: 0.15em 0.35em; border-radius: 0.25em; background: var(--color-muted, hsl(0 0% 15%)); }
+.agent-markdown pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 0.375em; background: var(--color-muted, hsl(0 0% 15%)); overflow-x: auto; }
+.agent-markdown pre code { padding: 0; background: transparent; font-size: 0.8125em; }
+.agent-markdown hr { border: none; border-top: 1px solid var(--color-border, hsl(0 0% 20%)); margin: 0.75em 0; }
+.agent-markdown a { text-decoration: underline; text-underline-offset: 2px; }
+.agent-markdown blockquote { border-left: 2px solid var(--color-border, hsl(0 0% 20%)); padding-left: 0.75em; margin: 0.5em 0; opacity: 0.8; }
+.agent-markdown table { border-collapse: collapse; margin: 0.5em 0; font-size: 0.875em; }
+.agent-markdown th, .agent-markdown td { border: 1px solid var(--color-border, hsl(0 0% 20%)); padding: 0.35em 0.65em; text-align: left; }
+.agent-markdown th { font-weight: 600; background: var(--color-muted, hsl(0 0% 15%)); }
+`;
+let stylesInjected = false;
+function injectMarkdownStyles() {
+    if (stylesInjected || typeof document === "undefined")
+        return;
+    stylesInjected = true;
+    const style = document.createElement("style");
+    style.textContent = markdownStyles;
+    document.head.appendChild(style);
 }
-function SendIcon({ className }) {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) }));
-}
-function StopIcon({ className }) {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: className, children: _jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) }));
-}
-function CheckIcon({ className }) {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "M20 6L9 17l-5-5" }) }));
+function MarkdownText() {
+    useEffect(() => {
+        injectMarkdownStyles();
+    }, []);
+    return (_jsx(MarkdownTextPrimitive, { smooth: true, className: "agent-markdown break-words" }));
 }
-function ChevronDownIcon({ className }) {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
+// ─── Composer Attachment Preview ─────────────────────────────────────────────
+function getImageAttachmentSrc(attachment) {
+    if (attachment.type !== "image")
+        return null;
+    if ("file" in attachment && attachment.file) {
+        return URL.createObjectURL(attachment.file);
+    }
+    const imagePart = attachment.content?.find((part) => part.type === "image");
+    return imagePart && "image" in imagePart ? imagePart.image : null;
 }
-function ArrowDownIcon({ className }) {
-    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: _jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" }) }));
+function ComposerAttachmentPreviewCard({ attachment, onRemove, }) {
+    const [imageSrc, setImageSrc] = useState(null);
+    useEffect(() => {
+        const nextSrc = getImageAttachmentSrc(attachment);
+        setImageSrc(nextSrc);
+        return () => {
+            if (nextSrc?.startsWith("blob:")) {
+                URL.revokeObjectURL(nextSrc);
+            }
+        };
+    }, [attachment]);
+    const isImage = !!imageSrc;
+    return (_jsxs("div", { className: cn("group relative overflow-hidden border border-border/70 bg-muted/50 text-foreground", isImage
+            ? "h-20 w-20 rounded-xl shadow-[0_12px_30px_-18px_rgba(0,0,0,0.7)]"
+            : "inline-flex max-w-[220px] items-center gap-2 rounded-lg px-2.5 py-2 text-xs"), children: [isImage ? (_jsxs(_Fragment, { children: [_jsx("img", { src: imageSrc, alt: attachment.name, className: "h-full w-full object-cover" }), _jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent px-2 py-1.5", children: _jsx("div", { className: "truncate text-[10px] font-medium text-white/95", children: attachment.name }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-background text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: attachment.name.split(".").pop() || "file" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium", children: attachment.name }), _jsx("div", { className: "text-[11px] text-muted-foreground", children: attachment.contentType || attachment.type })] })] })), _jsx("button", { type: "button", onClick: () => onRemove(attachment.id), className: cn("absolute flex h-6 w-6 items-center justify-center rounded-full border border-border/60 bg-background/95 text-muted-foreground shadow-sm transition hover:text-foreground", isImage
+                    ? "right-1.5 top-1.5 opacity-100 md:opacity-0 md:group-hover:opacity-100"
+                    : "right-1.5 top-1.5"), "aria-label": `Remove ${attachment.name}`, children: _jsx(IconX, { className: "h-3 w-3" }) })] }));
 }
-function CopyIcon({ className }) {
-    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] }));
+function ComposerAttachmentPreviewStrip() {
+    const attachments = useComposer((state) => state.attachments);
+    const aui = useAui();
+    const handleRemove = useCallback((id) => {
+        void aui.composer().attachment({ id }).remove();
+    }, [aui]);
+    if (attachments.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex flex-wrap gap-2 px-2 pt-2", children: attachments.map((attachment) => (_jsx(ComposerAttachmentPreviewCard, { attachment: attachment, onRemove: handleRemove }, attachment.id))) }));
 }
 // ─── Tool Call Fallback ─────────────────────────────────────────────────────
-function ToolCallFallback({ toolName, args, result, }) {
-    const [expanded, setExpanded] = useState(false);
+function ToolCallFallback({ toolName, args, argsText, result, }) {
+    const streamRef = useRef(null);
+    const thread = useThread();
+    const isRunning = result === undefined && thread.isRunning;
+    const isAgentCall = toolName.startsWith("agent:");
+    // Agent calls default to expanded; regular tools default to collapsed
+    const [expanded, setExpanded] = useState(isAgentCall);
+    const agentName = isAgentCall ? toolName.slice(6) : null;
+    const isAgentError = isAgentCall && result === "Error calling agent";
+    // For agent calls, argsText holds the streaming response text
+    const agentStreamText = isAgentCall ? (argsText ?? "") : "";
+    const hasStreamText = agentStreamText.length > 0;
+    const argsStr = isAgentCall
+        ? ""
+        : Object.entries(args)
+            .map(([k, v]) => `${k}=${typeof v === "string" ? v : JSON.stringify(v)}`)
+            .join(", ");
+    const displayName = isAgentCall
+        ? isRunning
+            ? `Asking ${agentName}...`
+            : isAgentError
+                ? `Error asking ${agentName}`
+                : `Asked ${agentName}`
+        : toolName;
+    // Agent calls expand only when there's text to show, toggleable when done
+    const canExpand = isAgentCall ? hasStreamText : result !== undefined;
+    const isExpanded = isAgentCall ? hasStreamText && expanded : expanded;
+    // Auto-scroll streaming text to bottom as new content arrives
+    useEffect(() => {
+        if (isAgentCall && isRunning && streamRef.current) {
+            streamRef.current.scrollTop = streamRef.current.scrollHeight;
+        }
+    }, [agentStreamText, isAgentCall, isRunning]);
+    return (_jsxs("div", { className: "my-1 overflow-hidden", children: [_jsxs("button", { onClick: () => canExpand && setExpanded(!isExpanded), className: cn("flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-mono w-full text-left overflow-hidden", isRunning
+                    ? "bg-muted text-muted-foreground"
+                    : "bg-muted text-muted-foreground hover:bg-accent"), children: [_jsx("span", { className: "shrink-0", children: isRunning ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : isAgentError ? (_jsx(IconCircleX, { className: "h-3 w-3 text-destructive" })) : result !== undefined ? (_jsx(IconCheck, { className: "h-3 w-3 text-emerald-500" })) : (_jsx(IconSquareFilled, { className: "h-3 w-3 text-muted-foreground" })) }), _jsxs("span", { className: "truncate min-w-0", children: [_jsx("span", { className: "font-medium", children: displayName }), argsStr && _jsxs("span", { className: "opacity-60 ml-1", children: ["(", argsStr, ")"] })] }), canExpand && !isRunning && (_jsx(IconChevronDown, { className: cn("ml-auto h-3 w-3 shrink-0 opacity-40", isExpanded && "rotate-180") }))] }), isExpanded && isAgentCall && hasStreamText && (_jsx("div", { ref: streamRef, className: "mt-1 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground break-words max-h-48 overflow-y-auto agent-markdown prose prose-sm prose-invert max-w-none", children: _jsx(ReactMarkdown, { children: agentStreamText }) })), isExpanded && !isAgentCall && result !== undefined && (_jsx("div", { className: "mt-1 rounded-md bg-muted/50 px-3 py-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap break-all max-h-48 overflow-y-auto", children: typeof result === "string"
+                    ? result
+                    : JSON.stringify(result, null, 2) }))] }));
+}
+// ─── Reconnect Stream Message ───────────────────────────────────────────────
+// Renders the agent's in-progress response during reconnection (outside
+// assistant-ui's runtime). Uses the same visual styling as normal messages.
+function ReconnectStreamToolCall({ toolName, argsText, args, result, }) {
+    const streamRef = useRef(null);
     const isRunning = result === undefined;
-    const argsStr = Object.entries(args)
-        .map(([k, v]) => `${k}=${typeof v === "string" ? v : JSON.stringify(v)}`)
-        .join(", ");
-    return (_jsxs("div", { className: "my-1", children: [_jsxs("button", { onClick: () => setExpanded(!expanded), className: cn("flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-mono w-full text-left", isRunning
-                    ? "bg-amber-500/10 text-amber-400"
-                    : "bg-muted text-muted-foreground hover:bg-accent"), children: [_jsx("span", { className: "shrink-0", children: isRunning ? (_jsx("svg", { className: "h-3 w-3 animate-spin", viewBox: "0 0 24 24", fill: "none", children: _jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", strokeDasharray: "31 62" }) })) : (_jsx(CheckIcon, { className: "h-3 w-3 text-emerald-500" })) }), _jsxs("span", { className: "truncate", children: [_jsx("span", { className: "font-medium", children: toolName }), argsStr && _jsxs("span", { className: "opacity-60 ml-1", children: ["(", argsStr, ")"] })] }), !isRunning && (_jsx(ChevronDownIcon, { className: cn("ml-auto h-3 w-3 shrink-0 opacity-40", expanded && "rotate-180") }))] }), expanded && result !== undefined && (_jsx("div", { className: "mt-1 rounded-md bg-muted/50 px-3 py-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap break-all max-h-48 overflow-y-auto", children: typeof result === "string"
+    const isAgentCall = toolName.startsWith("agent:");
+    const [expanded, setExpanded] = useState(isAgentCall);
+    const agentName = isAgentCall ? toolName.slice(6) : null;
+    const isAgentError = isAgentCall && result === "Error calling agent";
+    const agentStreamText = isAgentCall ? (argsText ?? "") : "";
+    const hasStreamText = agentStreamText.length > 0;
+    const argsStr = isAgentCall
+        ? ""
+        : Object.entries(args)
+            .map(([k, v]) => `${k}=${typeof v === "string" ? v : JSON.stringify(v)}`)
+            .join(", ");
+    const displayName = isAgentCall
+        ? isRunning
+            ? `Asking ${agentName}...`
+            : isAgentError
+                ? `Error asking ${agentName}`
+                : `Asked ${agentName}`
+        : toolName;
+    const canExpand = isAgentCall ? hasStreamText : result !== undefined;
+    const isExpanded = isAgentCall ? hasStreamText && expanded : expanded;
+    useEffect(() => {
+        if (isAgentCall && isRunning && streamRef.current) {
+            streamRef.current.scrollTop = streamRef.current.scrollHeight;
+        }
+    }, [agentStreamText, isAgentCall, isRunning]);
+    return (_jsxs("div", { className: "my-1 overflow-hidden", children: [_jsxs("button", { onClick: () => canExpand && setExpanded(!isExpanded), className: cn("flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs font-mono w-full text-left overflow-hidden", isRunning
+                    ? "bg-muted text-muted-foreground"
+                    : "bg-muted text-muted-foreground hover:bg-accent"), children: [_jsx("span", { className: "shrink-0", children: isRunning ? (_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" })) : isAgentError ? (_jsx(IconCircleX, { className: "h-3 w-3 text-destructive" })) : (_jsx(IconCheck, { className: "h-3 w-3 text-emerald-500" })) }), _jsxs("span", { className: "truncate min-w-0", children: [_jsx("span", { className: "font-medium", children: displayName }), argsStr && _jsxs("span", { className: "opacity-60 ml-1", children: ["(", argsStr, ")"] })] }), canExpand && !isRunning && (_jsx(IconChevronDown, { className: cn("ml-auto h-3 w-3 shrink-0 opacity-40", isExpanded && "rotate-180") }))] }), isExpanded && isAgentCall && hasStreamText && (_jsx("div", { ref: streamRef, className: "mt-1 rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground break-words max-h-48 overflow-y-auto agent-markdown prose prose-sm prose-invert max-w-none", children: _jsx(ReactMarkdown, { children: agentStreamText }) })), isExpanded && !isAgentCall && result !== undefined && (_jsx("div", { className: "mt-1 rounded-md bg-muted/50 px-3 py-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap break-all max-h-48 overflow-y-auto", children: typeof result === "string"
                     ? result
                     : JSON.stringify(result, null, 2) }))] }));
 }
+function ReconnectStreamMessage({ content }) {
+    const endRef = useRef(null);
+    useEffect(() => {
+        endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    }, [content]);
+    return (_jsx("div", { className: "flex justify-start px-4 py-2", children: _jsxs("div", { className: "max-w-[85%] space-y-1", children: [_jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [_jsx(IconSparkles, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx("span", { className: "text-[10px] text-muted-foreground font-medium uppercase tracking-wide", children: "Agent" })] }), content.map((part, i) => {
+                    if (part.type === "text") {
+                        return (_jsx("div", { className: "text-sm leading-relaxed whitespace-pre-wrap break-words", children: part.text }, `reconnect-text-${i}`));
+                    }
+                    if (part.type === "tool-call") {
+                        return (_jsx(ReconnectStreamToolCall, { toolName: part.toolName, argsText: part.argsText, args: part.args, result: part.result }, `reconnect-tool-${i}`));
+                    }
+                    return null;
+                }), _jsx("div", { ref: endRef })] }) }));
+}
 // ─── Message Components ─────────────────────────────────────────────────────
+const mentionIconProps = {
+    size: 14,
+    className: "shrink-0 text-muted-foreground",
+};
+function MentionChipIcon({ icon }) {
+    switch (icon) {
+        case "folder":
+            return _jsx(IconFolder, { ...mentionIconProps });
+        case "document":
+            return _jsx(IconFileText, { ...mentionIconProps });
+        case "form":
+            return _jsx(IconCheckbox, { ...mentionIconProps });
+        case "email":
+            return _jsx(IconMail, { ...mentionIconProps });
+        case "user":
+            return _jsx(IconUser, { ...mentionIconProps });
+        case "deck":
+            return _jsx(IconPresentation, { ...mentionIconProps });
+        case "agent":
+            return _jsx(IconMessageChatbot, { ...mentionIconProps });
+        case "file":
+            return _jsx(IconFile, { ...mentionIconProps });
+        default:
+            return _jsx(IconStack2, { ...mentionIconProps });
+    }
+}
+// Matches rich mention format: @[label|icon] or plain @word
+const richMentionPattern = /@\[([^\]|]+)\|([^\]]+)\]/g;
+const plainMentionPattern = /((?:^|(?<=\s))@(\w+))/g;
+function UserMessageText({ text }) {
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+    let hasRichMentions = false;
+    // First try rich mentions (@[label|icon])
+    richMentionPattern.lastIndex = 0;
+    while ((match = richMentionPattern.exec(text)) !== null) {
+        hasRichMentions = true;
+        const matchStart = match.index;
+        if (matchStart > lastIndex) {
+            parts.push(text.slice(lastIndex, matchStart));
+        }
+        const label = match[1];
+        const icon = match[2];
+        parts.push(_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-input bg-muted/50 px-1.5 py-0.5 text-xs font-medium text-foreground align-middle mx-0.5 max-w-[200px] select-all", "data-mention-label": label, children: [_jsx(MentionChipIcon, { icon: icon }), _jsx("span", { className: "truncate", children: label })] }, matchStart));
+        lastIndex = matchStart + match[0].length;
+    }
+    if (hasRichMentions) {
+        if (lastIndex < text.length) {
+            parts.push(text.slice(lastIndex));
+        }
+        return _jsx(_Fragment, { children: parts });
+    }
+    // Fallback: plain @word mentions (for older messages)
+    plainMentionPattern.lastIndex = 0;
+    while ((match = plainMentionPattern.exec(text)) !== null) {
+        const matchStart = match.index;
+        if (matchStart > lastIndex) {
+            parts.push(text.slice(lastIndex, matchStart));
+        }
+        const mentionName = match[2];
+        parts.push(_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-input bg-muted/50 px-1.5 py-0.5 text-xs font-medium text-foreground align-middle mx-0.5 select-all", "data-mention-label": mentionName, children: ["@", mentionName] }, matchStart));
+        lastIndex = matchStart + match[0].length;
+    }
+    if (lastIndex < text.length) {
+        parts.push(text.slice(lastIndex));
+    }
+    return _jsx(_Fragment, { children: parts.length > 0 ? parts : text });
+}
 function UserMessage() {
-    return (_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "max-w-[85%] rounded-lg bg-accent text-foreground px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap break-words", children: _jsx(MessagePrimitive.Parts, { components: {
-                    Text: ({ text }) => _jsx(_Fragment, { children: text }),
-                } }) }) }));
+    const [expanded, setExpanded] = useState(false);
+    const [isExpandable, setIsExpandable] = useState(false);
+    const contentRef = useRef(null);
+    useEffect(() => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        const measure = () => {
+            setIsExpandable(el.scrollHeight > 200);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx("div", { className: "flex justify-end", style: { contentVisibility: "auto" }, children: _jsxs("div", { className: "max-w-[85%]", children: [_jsxs("div", { className: "relative rounded-lg bg-accent px-3 py-2 text-sm leading-relaxed text-foreground", onCopy: (e) => {
+                        const selection = window.getSelection();
+                        if (!selection || selection.rangeCount === 0)
+                            return;
+                        const fragment = selection.getRangeAt(0).cloneContents();
+                        const mentions = fragment.querySelectorAll("[data-mention-label]");
+                        if (mentions.length === 0)
+                            return;
+                        e.preventDefault();
+                        mentions.forEach((el) => {
+                            el.textContent = `@${el.getAttribute("data-mention-label")}`;
+                        });
+                        const div = document.createElement("div");
+                        div.appendChild(fragment);
+                        e.clipboardData.setData("text/plain", div.textContent || "");
+                    }, children: [_jsx("div", { ref: contentRef, className: cn("whitespace-pre-wrap break-words", !expanded && isExpandable && "max-h-[200px] overflow-hidden"), children: _jsx(MessagePrimitive.Parts, { components: {
+                                    Text: UserMessageText,
+                                } }) }), !expanded && isExpandable && (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-14 rounded-b-lg bg-gradient-to-t from-accent via-accent/90 to-transparent" }))] }), isExpandable && (_jsxs("button", { type: "button", onClick: () => setExpanded((prev) => !prev), className: "mt-1 inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: [_jsx(IconChevronDown, { className: cn("h-3.5 w-3.5 transition-transform", expanded && "rotate-180") }), expanded ? "Collapse" : "Expand"] }))] }) }));
 }
 function AssistantMessage() {
     const [copied, setCopied] = useState(false);
     const messageRuntime = useMessageRuntime();
+    const thread = useThread();
+    const msg = messageRuntime.getState();
+    const isLast = thread.messages.length > 0 &&
+        thread.messages[thread.messages.length - 1].id === msg.id;
+    const isComplete = !isLast || !thread.isRunning;
     const handleCopy = useCallback(() => {
-        const msg = messageRuntime.getState();
-        const text = msg.content
+        const m = messageRuntime.getState();
+        const text = m.content
             .filter((p) => p.type === "text")
             .map((p) => p.text)
             .join("\n");
@@ -57,16 +300,23 @@ function AssistantMessage() {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     }, [messageRuntime]);
-    return (_jsxs("div", { className: "group relative", children: [_jsx("div", { className: "max-w-[95%] text-sm leading-relaxed text-foreground", children: _jsx(MessagePrimitive.Parts, { components: {
-                        Text: ({ text }) => (_jsx("div", { className: "whitespace-pre-wrap break-words", children: text })),
+    return (_jsxs("div", { className: "group relative", style: { contentVisibility: isComplete ? "auto" : "visible" }, children: [_jsx("div", { className: "max-w-[95%] text-sm leading-relaxed text-foreground", children: _jsx(MessagePrimitive.Parts, { components: {
+                        Text: MarkdownText,
                         tools: {
                             Fallback: ToolCallFallback,
                         },
-                    } }) }), _jsx("div", { className: "mt-1 flex items-center gap-0.5 opacity-0 group-hover:opacity-100", children: _jsx("button", { onClick: handleCopy, className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: copied ? (_jsx(CheckIcon, { className: "h-3.5 w-3.5" })) : (_jsx(CopyIcon, { className: "h-3.5 w-3.5" })) }) })] }));
+                    } }) }), isComplete && (_jsx("div", { className: "mt-1 flex items-center gap-0.5 opacity-0 group-hover:opacity-100", children: _jsx("button", { onClick: handleCopy, className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: copied ? (_jsx(IconCheck, { className: "h-3 w-3" })) : (_jsx(IconCopy, { className: "h-3 w-3" })) }) }))] }));
 }
 // ─── Thinking Indicator ─────────────────────────────────────────────────────
 function ThinkingIndicator() {
-    return (_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground py-2", children: [_jsx("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => (_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current opacity-40 animate-bounce", style: { animationDelay: `${i * 0.15}s` } }, i))) }), _jsx("span", { className: "text-xs", children: "Thinking..." })] }));
+    const [dots, setDots] = useState(1);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setDots((d) => (d % 3) + 1);
+        }, 400);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsx("div", { className: "flex items-center text-muted-foreground", children: _jsxs("span", { className: "text-xs", children: ["Thinking", ".".repeat(dots)] }) }));
 }
 // ─── API Key Setup Card ─────────────────────────────────────────────────────
 function ApiKeySetupCard({ apiUrl }) {
@@ -100,9 +350,9 @@ function ApiKeySetupCard({ apiUrl }) {
         }
     };
     if (saved) {
-        return (_jsx("div", { className: "mx-4 my-6 rounded-lg border border-emerald-500/30 bg-emerald-500/5 p-4", children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-emerald-400", children: [_jsx(CheckIcon, { className: "h-4 w-4" }), "API key saved. Reloading..."] }) }));
+        return (_jsx("div", { className: "mx-4 my-6 rounded-lg border border-emerald-500/30 bg-emerald-500/5 p-4", children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-emerald-400", children: [_jsx(IconCheck, { className: "h-4 w-4" }), "API key saved. Reloading..."] }) }));
     }
-    return (_jsxs("div", { className: "mx-4 my-6 rounded-lg border border-border bg-card p-5", children: [_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted", children: _jsx(SparklesIcon, { className: "h-4.5 w-4.5 text-muted-foreground" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: "Connect your AI" }), _jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Add an Anthropic API key to enable the agent" })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "rounded-md bg-muted/50 px-3 py-2.5 text-xs text-muted-foreground leading-relaxed", children: [_jsxs("p", { children: ["1. Go to", " ", _jsx("a", { href: "https://console.anthropic.com/settings/keys", target: "_blank", rel: "noopener noreferrer", className: "underline text-foreground/80 hover:text-foreground", children: "console.anthropic.com/settings/keys" })] }), _jsx("p", { className: "mt-1", children: "2. Create a new API key and paste it below" })] }), _jsx("input", { type: "password", value: apiKey, onChange: (e) => {
+    return (_jsxs("div", { className: "mx-4 my-6 rounded-lg border border-border bg-card p-5", children: [_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted", children: _jsx(IconSparkles, { className: "h-4.5 w-4.5 text-muted-foreground" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: "Connect your AI" }), _jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Add an Anthropic API key to enable the agent" })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "rounded-md bg-muted/50 px-3 py-2.5 text-xs text-muted-foreground leading-relaxed", children: [_jsxs("p", { children: ["1. Go to", " ", _jsx("a", { href: "https://console.anthropic.com/settings/keys", target: "_blank", rel: "noopener noreferrer", className: "underline text-foreground/80 hover:text-foreground", children: "console.anthropic.com/settings/keys" })] }), _jsx("p", { className: "mt-1", children: "2. Create a new API key and paste it below" })] }), _jsx("input", { type: "password", value: apiKey, onChange: (e) => {
                             setApiKey(e.target.value);
                             setError(null);
                         }, onKeyDown: (e) => {
@@ -110,35 +360,18 @@ function ApiKeySetupCard({ apiUrl }) {
                                 handleSave();
                         }, placeholder: "sk-ant-...", className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-1 focus:ring-ring", autoComplete: "off" }), error && _jsx("p", { className: "text-xs text-destructive", children: error }), _jsx("button", { onClick: handleSave, disabled: saving || !apiKey.trim(), className: "w-full rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed", children: saving ? "Saving..." : "Save API key" })] })] }));
 }
-// ─── Main Component ─────────────────────────────────────────────────────────
-// ─── Terminal Icon ──────────────────────────────────────────────────────────
-function TerminalIcon({ className }) {
-    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [_jsx("polyline", { points: "4 17 10 11 4 5" }), _jsx("line", { x1: "12", y1: "19", x2: "20", y2: "19" })] }));
-}
-// ─── Queue Composer ──────────────────────────────────────────────────────────
-// Custom composer shown while the agent is running. Uses a plain textarea
-// (not ComposerPrimitive) so we can submit without interrupting the active run.
-function QueueComposer({ composerRef, addToQueue, queuedCount, }) {
-    const [value, setValue] = useState("");
-    const handleSubmit = useCallback(() => {
-        const text = value.trim();
-        if (!text)
-            return;
-        addToQueue(text);
-        setValue("");
-        // Re-focus after submit
-        setTimeout(() => composerRef.current?.focus(), 0);
-    }, [value, addToQueue, composerRef]);
-    return (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-input bg-background px-3 py-2 focus-within:ring-1 focus-within:ring-ring", children: [_jsx("textarea", { ref: composerRef, value: value, onChange: (e) => setValue(e.target.value), onKeyDown: (e) => {
-                    if (e.key === "Enter" && !e.shiftKey) {
-                        e.preventDefault();
-                        handleSubmit();
-                    }
-                }, placeholder: queuedCount > 0
-                    ? `${queuedCount} queued — type another...`
-                    : "Queue a message...", className: "flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none leading-relaxed min-h-[24px] max-h-[120px]", rows: 1 }), _jsx("button", { onClick: handleSubmit, disabled: !value.trim(), className: "shrink-0 flex h-8 w-8 items-center justify-center rounded-md bg-primary/70 text-primary-foreground hover:bg-primary disabled:opacity-30 disabled:cursor-not-allowed", title: "Queue message", children: _jsx(SendIcon, { className: "h-3.5 w-3.5" }) })] }));
+export const CHAT_STORAGE_PREFIX = "agent-chat:";
+/** Remove persisted chat for a given tabId (or "default"). */
+export function clearChatStorage(tabId) {
+    try {
+        sessionStorage.removeItem(`${CHAT_STORAGE_PREFIX}${tabId || "default"}`);
+    }
+    catch { }
 }
-const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, showHeader = true, showDevHint = true, onSwitchToCli, className, apiUrl = "/api/agent-chat", }, ref) {
+// Re-export for backwards compatibility
+import { extractThreadMeta } from "../agent/thread-data-builder.js";
+export { extractThreadMeta };
+const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, showHeader = true, onSwitchToCli, className, apiUrl, tabId, threadId, onMessageCountChange, onSaveThread, onGenerateTitle, composerSlot, isNewThread, }, ref) {
     const scrollRef = useRef(null);
     const thread = useThread();
     const threadRuntime = useThreadRuntime();
@@ -146,14 +379,230 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     const messages = thread.messages;
     const [missingApiKey, setMissingApiKey] = useState(false);
     const [queuedMessages, setQueuedMessages] = useState([]);
+    const [showContinue, setShowContinue] = useState(false);
+    const [isReconnecting, setIsReconnecting] = useState(false);
+    const [reconnectContent, setReconnectContent] = useState([]);
     const wasRunningRef = useRef(false);
-    const composerRef = useRef(null);
+    const tiptapRef = useRef(null);
+    // ─── Chat persistence ──────────────────────────────────────────────
+    const hasRestoredRef = useRef(false);
+    const [isRestoring, setIsRestoring] = useState(!!threadId && !isNewThread);
+    const onSaveThreadRef = useRef(onSaveThread);
+    onSaveThreadRef.current = onSaveThread;
+    const onGenerateTitleRef = useRef(onGenerateTitle);
+    onGenerateTitleRef.current = onGenerateTitle;
+    const titleGeneratedRef = useRef(false);
+    // Restore messages from server on mount (when threadId is set)
+    useEffect(() => {
+        if (hasRestoredRef.current)
+            return;
+        hasRestoredRef.current = true;
+        if (threadId) {
+            // Load from server
+            (async () => {
+                try {
+                    const res = await fetch(`${apiUrl}/threads/${encodeURIComponent(threadId)}`);
+                    if (!res.ok)
+                        return;
+                    const data = await res.json();
+                    if (data.threadData) {
+                        const repo = typeof data.threadData === "string"
+                            ? JSON.parse(data.threadData)
+                            : data.threadData;
+                        if (repo?.messages?.length > 0) {
+                            titleGeneratedRef.current = true; // Don't re-generate for restored threads
+                            threadRuntime.import(repo);
+                        }
+                    }
+                    // Also skip title generation if thread already has a title
+                    if (data.title) {
+                        titleGeneratedRef.current = true;
+                    }
+                    // Check if there's an active run for this thread (e.g. after hot reload)
+                    try {
+                        const runRes = await fetch(`${apiUrl}/runs/active?threadId=${encodeURIComponent(threadId)}`);
+                        if (runRes.ok) {
+                            const runInfo = await runRes.json();
+                            // Agent is still running — subscribe to live SSE stream
+                            setIsReconnecting(true);
+                            setReconnectContent([]);
+                            const streamReconnect = async () => {
+                                try {
+                                    const sseRes = await fetch(`${apiUrl}/runs/${encodeURIComponent(runInfo.runId)}/events?after=0`);
+                                    if (sseRes.ok && sseRes.body) {
+                                        const content = [];
+                                        const toolCallCounter = { value: 0 };
+                                        // Throttle React state updates via requestAnimationFrame
+                                        let rafPending = false;
+                                        let latestSnapshot = [];
+                                        const scheduleUpdate = (snapshot) => {
+                                            latestSnapshot = snapshot;
+                                            if (!rafPending) {
+                                                rafPending = true;
+                                                requestAnimationFrame(() => {
+                                                    rafPending = false;
+                                                    setReconnectContent(latestSnapshot);
+                                                });
+                                            }
+                                        };
+                                        await readSSEStreamRaw(sseRes.body, content, toolCallCounter, tabId, scheduleUpdate);
+                                        // Final update with complete content
+                                        setReconnectContent([...content]);
+                                    }
+                                }
+                                catch {
+                                    // Stream error — fall through to re-fetch
+                                }
+                                // Run finished — re-fetch thread data from server
+                                // (server now persists assistant response on completion)
+                                try {
+                                    const refreshRes = await fetch(`${apiUrl}/threads/${encodeURIComponent(threadId)}`);
+                                    if (refreshRes.ok) {
+                                        const refreshData = await refreshRes.json();
+                                        if (refreshData.threadData) {
+                                            const repo = typeof refreshData.threadData === "string"
+                                                ? JSON.parse(refreshData.threadData)
+                                                : refreshData.threadData;
+                                            if (repo?.messages?.length > 0) {
+                                                threadRuntime.import(repo);
+                                            }
+                                        }
+                                    }
+                                }
+                                catch { }
+                                setReconnectContent([]);
+                                setIsReconnecting(false);
+                            };
+                            streamReconnect();
+                        }
+                    }
+                    catch {
+                        // No active run — nothing to reconnect to
+                    }
+                }
+                catch {
+                    // Start fresh
+                }
+                finally {
+                    setIsRestoring(false);
+                }
+            })();
+        }
+        else {
+            // Legacy: restore from sessionStorage
+            const storageKey = `${CHAT_STORAGE_PREFIX}${tabId || "default"}`;
+            try {
+                const saved = sessionStorage.getItem(storageKey);
+                if (saved) {
+                    const repo = JSON.parse(saved);
+                    if (repo?.messages?.length > 0) {
+                        threadRuntime.import(repo);
+                    }
+                }
+            }
+            catch { }
+            setIsRestoring(false);
+        }
+    }, [threadId, tabId, apiUrl, threadRuntime]);
+    // Generate a title when the first user message is sent
+    useEffect(() => {
+        if (!hasRestoredRef.current)
+            return;
+        if (titleGeneratedRef.current)
+            return;
+        if (messages.length === 0)
+            return;
+        const firstUserMsg = messages.find((m) => m.role === "user");
+        if (!firstUserMsg)
+            return;
+        // Extract text from the first user message
+        const text = "content" in firstUserMsg
+            ? Array.isArray(firstUserMsg.content)
+                ? firstUserMsg.content
+                    .filter((p) => p.type === "text")
+                    .map((p) => p.text)
+                    .join(" ")
+                : typeof firstUserMsg.content === "string"
+                    ? firstUserMsg.content
+                    : ""
+            : "";
+        if (!text.trim())
+            return;
+        titleGeneratedRef.current = true;
+        onGenerateTitleRef.current?.(text.trim());
+    }, [messages]);
+    // Save title/preview eagerly when messages change (even while agent is running)
+    // so that the history popover shows meaningful labels immediately.
+    const savedTitleRef = useRef("");
+    useEffect(() => {
+        if (!hasRestoredRef.current)
+            return;
+        if (messages.length === 0)
+            return;
+        if (!threadId || !onSaveThreadRef.current)
+            return;
+        const repo = threadRuntime.export();
+        const { title, preview } = extractThreadMeta(repo);
+        // Save full thread data while running so hot reloads don't lose messages
+        if (isRunning && title && title !== savedTitleRef.current) {
+            savedTitleRef.current = title;
+            onSaveThreadRef.current({
+                threadData: JSON.stringify(repo),
+                title,
+                preview,
+                messageCount: messages.length,
+            });
+        }
+    }, [messages, isRunning, threadId, threadRuntime]);
+    // Persist full thread data after each completed response
+    useEffect(() => {
+        if (!hasRestoredRef.current)
+            return;
+        if (isRunning)
+            return;
+        if (messages.length === 0)
+            return;
+        const repo = threadRuntime.export();
+        if (threadId && onSaveThreadRef.current) {
+            // Save to server via the hook callback
+            const { title, preview } = extractThreadMeta(repo);
+            savedTitleRef.current = title;
+            onSaveThreadRef.current({
+                threadData: JSON.stringify(repo),
+                title,
+                preview,
+                messageCount: messages.length,
+            });
+        }
+        else {
+            // Legacy: save to sessionStorage
+            const storageKey = `${CHAT_STORAGE_PREFIX}${tabId || "default"}`;
+            try {
+                sessionStorage.setItem(storageKey, JSON.stringify(repo));
+            }
+            catch { }
+        }
+    }, [messages, isRunning, threadId, tabId, threadRuntime]);
+    useEffect(() => {
+        onMessageCountChange?.(messages.length);
+    }, [messages.length, onMessageCountChange]);
     // Listen for missing API key events from the adapter
     useEffect(() => {
         const handler = () => setMissingApiKey(true);
         window.addEventListener("agent-chat:missing-api-key", handler);
         return () => window.removeEventListener("agent-chat:missing-api-key", handler);
     }, []);
+    // Listen for loop-limit events from the adapter
+    useEffect(() => {
+        const handler = (e) => {
+            const detail = e.detail;
+            if (!tabId || detail?.tabId === tabId) {
+                setShowContinue(true);
+            }
+        };
+        window.addEventListener("agent-chat:loop-limit", handler);
+        return () => window.removeEventListener("agent-chat:loop-limit", handler);
+    }, [tabId]);
     // Auto-dequeue: when agent finishes running, send the next queued message
     useEffect(() => {
         if (wasRunningRef.current && !isRunning && queuedMessages.length > 0) {
@@ -161,23 +610,36 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
             setQueuedMessages(rest);
             // Small delay to let the runtime settle after completion
             setTimeout(() => {
+                const content = [{ type: "text", text: next.text }];
+                if (next.images) {
+                    for (const img of next.images) {
+                        content.push({ type: "image", image: img });
+                    }
+                }
                 threadRuntime.append({
                     role: "user",
-                    content: [{ type: "text", text: next }],
+                    content,
+                    ...(next.references && next.references.length > 0
+                        ? { runConfig: { custom: { references: next.references } } }
+                        : {}),
                 });
             }, 100);
         }
         wasRunningRef.current = isRunning;
     }, [isRunning, queuedMessages, threadRuntime]);
-    const addToQueue = useCallback((text) => {
+    const addToQueue = useCallback((text, images, references) => {
+        setShowContinue(false);
         if (isRunning) {
-            setQueuedMessages((prev) => [...prev, text]);
+            setQueuedMessages((prev) => [...prev, { text, images, references }]);
         }
         else {
-            threadRuntime.append({
-                role: "user",
-                content: [{ type: "text", text }],
-            });
+            const content = [{ type: "text", text }];
+            if (images) {
+                for (const img of images) {
+                    content.push({ type: "image", image: img });
+                }
+            }
+            threadRuntime.append({ role: "user", content });
         }
     }, [isRunning, threadRuntime]);
     // Expose imperative handle
@@ -191,27 +653,95 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         isRunning() {
             return thread.isRunning;
         },
+        focusComposer() {
+            tiptapRef.current?.focus();
+        },
     }), [addToQueue, thread.isRunning]);
-    // Auto-scroll on new messages or queued messages
+    // Track whether user has scrolled away from bottom
+    const isNearBottomRef = useRef(true);
+    const [showScrollToBottom, setShowScrollToBottom] = useState(false);
     useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        function onScroll() {
+            if (!el)
+                return;
+            const threshold = 40;
+            const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
+            isNearBottomRef.current = nearBottom;
+            setShowScrollToBottom(!nearBottom && messages.length > 0);
+        }
+        el.addEventListener("scroll", onScroll, { passive: true });
+        return () => el.removeEventListener("scroll", onScroll);
+    }, [messages.length]);
+    const scrollToBottom = useCallback(() => {
         const el = scrollRef.current;
         if (el) {
             el.scrollTop = el.scrollHeight;
+            isNearBottomRef.current = true;
+            setShowScrollToBottom(false);
+        }
+    }, []);
+    // Scroll to bottom when a restored thread finishes loading
+    const wasRestoringRef = useRef(isRestoring);
+    useEffect(() => {
+        if (wasRestoringRef.current && !isRestoring) {
+            requestAnimationFrame(() => {
+                scrollToBottom();
+            });
+        }
+        wasRestoringRef.current = isRestoring;
+    }, [isRestoring, scrollToBottom]);
+    // Auto-scroll on new messages or queued messages (only if near bottom)
+    useEffect(() => {
+        const el = scrollRef.current;
+        if (el && isNearBottomRef.current) {
+            el.scrollTop = el.scrollHeight;
         }
-    }, [messages, isRunning, queuedMessages]);
-    return (_jsxs("div", { className: cn("flex flex-1 flex-col h-full min-h-0 text-foreground", className), children: [showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsxs("div", { className: "flex items-center gap-1", children: [onSwitchToCli && (_jsxs("button", { onClick: onSwitchToCli, className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", title: "Switch to CLI", children: [_jsx(TerminalIcon, { className: "h-3.5 w-3.5" }), "CLI"] })), messages.length > 0 && (_jsx("button", { onClick: () => window.location.reload(), className: "text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", children: "Clear" }))] })] })), _jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto min-h-0", children: missingApiKey ? (_jsx("div", { className: "flex flex-col items-center justify-center h-full px-2", children: _jsx(ApiKeySetupCard, { apiUrl: apiUrl }) })) : messages.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-16 px-4 h-full", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: _jsx(SparklesIcon, { className: "h-5 w-5 text-muted-foreground" }) }), _jsx("p", { className: "text-sm text-muted-foreground text-center max-w-[240px]", children: emptyStateText ?? "How can I help you?" }), suggestions && suggestions.length > 0 && (_jsx("div", { className: "flex flex-col gap-1.5 w-full max-w-[280px]", children: suggestions.map((suggestion) => (_jsx("button", { onClick: () => {
+    }, [messages, queuedMessages]);
+    // Continuous auto-scroll while streaming (only if near bottom)
+    useEffect(() => {
+        if (!isRunning)
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const interval = setInterval(() => {
+            if (isNearBottomRef.current) {
+                el.scrollTop = el.scrollHeight;
+            }
+        }, 100);
+        return () => clearInterval(interval);
+    }, [isRunning]);
+    return (_jsxs("div", { className: cn("flex flex-1 flex-col h-full min-h-0 text-foreground", className), children: [showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsx("div", { className: "flex items-center gap-1", children: onSwitchToCli && (_jsxs("button", { onClick: onSwitchToCli, className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", title: "Switch to CLI", children: [_jsx(IconTerminal, { className: "h-3.5 w-3.5" }), "CLI"] })) })] })), _jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto overflow-x-hidden min-h-0", children: missingApiKey ? (_jsx("div", { className: "flex flex-col items-center justify-center h-full px-2", children: _jsx(ApiKeySetupCard, { apiUrl: apiUrl }) })) : isRestoring ? (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "h-8 w-32 rounded-lg bg-muted animate-pulse" }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "h-4 w-48 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-64 rounded bg-muted animate-pulse" }), _jsx("div", { className: "h-4 w-40 rounded bg-muted animate-pulse" })] })] })) : messages.length === 0 && !isReconnecting ? (_jsxs("div", { className: "flex flex-col items-center justify-center gap-4 py-16 px-4 h-full", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted", children: _jsx(IconSparkles, { className: "h-5 w-5 text-muted-foreground" }) }), _jsx("p", { className: "text-sm text-muted-foreground text-center max-w-[240px]", children: emptyStateText ?? "How can I help you?" }), suggestions && suggestions.length > 0 && (_jsx("div", { className: "flex flex-col gap-1.5 w-full max-w-[280px]", children: suggestions.map((suggestion) => (_jsx("button", { onClick: () => {
                                     threadRuntime.append({
                                         role: "user",
                                         content: [{ type: "text", text: suggestion }],
                                     });
-                                }, className: "w-full rounded-lg border border-border px-3 py-2 text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground", children: suggestion }, suggestion))) })), showDevHint && onSwitchToCli && (_jsxs("p", { className: "text-xs text-muted-foreground/60 text-center max-w-[260px] mt-2", children: ["In dev mode you can also use the", " ", _jsx("button", { onClick: onSwitchToCli, className: "underline hover:text-muted-foreground", children: "CLI terminal" }), " ", "for full Claude Code capabilities."] }))] })) : (_jsxs("div", { className: "flex flex-col gap-4 px-4 py-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
+                                }, className: "w-full rounded-lg border border-border px-3 py-2 text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground", children: suggestion }, suggestion))) }))] })) : (_jsxs("div", { className: "flex flex-col gap-4 px-4 py-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                 UserMessage,
                                 AssistantMessage,
-                            } }), isRunning && _jsx(ThinkingIndicator, {}), queuedMessages.map((msg, i) => (_jsx("div", { className: "flex justify-end", children: _jsxs("div", { className: "max-w-[85%] rounded-lg bg-accent/50 text-foreground/60 px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap break-words", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground mb-1 font-medium uppercase tracking-wide", children: [_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className: "h-3 w-3", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("polyline", { points: "12 6 12 12 16 14" })] }), "Queued"] }), msg] }) }, `queued-${i}`)))] })) }), _jsx("div", { className: "shrink-0 border-t border-border px-3 py-3", children: isRunning ? (_jsx(QueueComposer, { composerRef: composerRef, addToQueue: addToQueue, queuedCount: queuedMessages.length })) : (_jsxs(ComposerPrimitive.Root, { className: "flex items-center gap-2 rounded-lg border border-input bg-background px-3 py-2 focus-within:ring-1 focus-within:ring-ring", children: [_jsx(ComposerPrimitive.Input, { placeholder: "Message agent...", submitMode: "enter", cancelOnEscape: true, className: "flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none leading-relaxed min-h-[24px] max-h-[120px]", rows: 1 }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx("button", { className: "shrink-0 flex h-8 w-8 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(SendIcon, { className: "h-3.5 w-3.5" }) }) })] })) })] }));
+                            } }), showContinue && !isRunning && (_jsx("div", { className: "flex justify-center py-2", children: _jsx("button", { type: "button", onClick: () => {
+                                    setShowContinue(false);
+                                    addToQueue("Continue from where you left off.");
+                                }, className: "rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground hover:bg-accent", children: "Continue" }) })), isRunning && _jsx(ThinkingIndicator, {}), isReconnecting && !isRunning && reconnectContent.length > 0 && (_jsx(ReconnectStreamMessage, { content: reconnectContent })), isReconnecting && !isRunning && reconnectContent.length === 0 && (_jsx(ThinkingIndicator, {})), queuedMessages.map((msg, i) => (_jsx("div", { className: "flex justify-end", children: _jsxs("div", { className: "max-w-[85%] rounded-lg bg-accent/50 text-foreground/60 px-3 py-2 text-sm leading-relaxed whitespace-pre-wrap break-words", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground mb-1 font-medium uppercase tracking-wide", children: [_jsx(IconClock, { className: "h-3 w-3" }), "Queued"] }), msg.text, msg.images && msg.images.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 mt-1.5", children: msg.images.map((img, j) => (_jsx("img", { src: img, alt: "", className: "h-12 w-12 rounded object-cover border border-border/50" }, j))) }))] }) }, `queued-${i}`)))] })) }), showScrollToBottom && (_jsx("div", { className: "shrink-0 flex justify-center -mb-1", children: _jsx("button", { type: "button", onClick: scrollToBottom, className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent", "aria-label": "Scroll to bottom", children: _jsx(IconChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) }) })), composerSlot, _jsx("div", { className: "shrink-0 px-3 py-2", children: _jsxs(ComposerPrimitive.Root, { className: "flex flex-col rounded-lg border border-input bg-background focus-within:ring-1 focus-within:ring-ring", children: [_jsx(ComposerAttachmentPreviewStrip, {}), _jsx(TiptapComposer, { focusRef: tiptapRef, placeholder: isRunning
+                                ? queuedMessages.length > 0
+                                    ? `${queuedMessages.length} queued — type another...`
+                                    : "Queue a message..."
+                                : undefined, onSubmit: isRunning
+                                ? (text, references) => addToQueue(text, undefined, references.length > 0 ? references : undefined)
+                                : undefined, actionButton: isRunning ? (_jsx("button", { onClick: () => threadRuntime.cancelRun(), className: "shrink-0 flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90", title: "Stop generating", children: _jsx(IconPlayerStop, { className: "h-3.5 w-3.5" }) })) : undefined })] }) })] }));
 });
-export const AssistantChat = forwardRef(function AssistantChat({ apiUrl, tabId, ...props }, ref) {
-    const adapter = useMemo(() => createAgentChatAdapter({ apiUrl, tabId }), [apiUrl, tabId]);
-    const runtime = useLocalRuntime(adapter);
-    return (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(ThreadPrimitive.Root, { className: "flex flex-1 flex-col h-full min-h-0", children: _jsx(AssistantChatInner, { ref: ref, ...props, apiUrl: apiUrl }) }) }));
+export const AssistantChat = forwardRef(function AssistantChat({ apiUrl = "/_agent-native/agent-chat", tabId, threadId, ...props }, ref) {
+    const adapter = useMemo(() => createAgentChatAdapter({ apiUrl, tabId, threadId }), [apiUrl, tabId, threadId]);
+    const attachmentAdapter = useMemo(() => new CompositeAttachmentAdapter([
+        new SimpleImageAttachmentAdapter(),
+        new SimpleTextAttachmentAdapter(),
+    ]), []);
+    const runtime = useLocalRuntime(adapter, {
+        adapters: { attachments: attachmentAdapter },
+    });
+    return (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(ThreadPrimitive.Root, { className: "flex flex-1 flex-col h-full min-h-0 overflow-x-hidden", children: _jsx(AssistantChatInner, { ref: ref, ...props, apiUrl: apiUrl, tabId: tabId, threadId: threadId }) }) }));
 });
 //# sourceMappingURL=AssistantChat.js.map