@agent-native/core 0.4.5 → 0.6.1

package/dist/client/AssistantChat.js

@@ -1,55 +1,313 @@
-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 remarkGfm from "remark-gfm";
 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 { AgentTaskCard } from "./AgentTaskCard.js";
+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, IconLock, } 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", remarkPlugins: [remarkGfm] }));
 }
-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);
-    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"
+// ─── Tool Call Display ──────────────────────────────────────────────────────
+// Shared presentational component for rendering a tool call pill + result.
+// Used by both the normal message path (ToolCallFallback) and the reconnect
+// stream path (ReconnectStreamMessage). All state is passed as props — no
+// assistant-ui hooks here.
+function ToolCallDisplay({ toolName, argsText, args, result, isRunning, }) {
+    const streamRef = useRef(null);
+    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;
+    // NOTE: All hooks must be above any conditional returns
+    useEffect(() => {
+        if (isAgentCall && isRunning && streamRef.current) {
+            streamRef.current.scrollTop = streamRef.current.scrollHeight;
+        }
+    }, [agentStreamText, isAgentCall, isRunning]);
+    // Render spawn-task as AgentTaskCard once the result is available
+    if (toolName === "spawn-task" && result) {
+        try {
+            const parsed = JSON.parse(result);
+            if (parsed.taskId && parsed.threadId) {
+                return (_jsx(AgentTaskCard, { taskId: parsed.taskId, threadId: parsed.threadId, description: parsed.description ||
+                        args?.task ||
+                        "Sub-agent task", onOpen: (tid) => {
+                        window.dispatchEvent(new CustomEvent("agent-task-open", {
+                            detail: {
+                                threadId: tid,
+                                description: parsed.description ||
+                                    args?.task ||
+                                    "",
+                                name: parsed.name || "",
+                            },
+                        }));
+                    } }));
+            }
+        }
+        catch {
+            // Fall through to default pill rendering
+        }
+    }
+    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;
+    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, { remarkPlugins: [remarkGfm], 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 ToolCallFallback({ toolName, args, argsText, result, }) {
+    const thread = useThread();
+    const isRunning = result === undefined && thread.isRunning;
+    return (_jsx(ToolCallDisplay, { toolName: toolName, args: args, argsText: argsText, result: typeof result === "string"
+            ? result
+            : result !== undefined
+                ? JSON.stringify(result)
+                : undefined, isRunning: isRunning }));
+}
+// ─── 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 ReconnectStreamMessage({ content }) {
+    const endRef = useRef(null);
+    useEffect(() => {
+        endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+    }, [content]);
+    return (_jsx("div", { className: "flex justify-start", children: _jsxs("div", { className: "max-w-[95%] text-sm leading-relaxed text-foreground space-y-1", children: [content.map((part, i) => {
+                    if (part.type === "text") {
+                        return (_jsx("div", { className: "agent-markdown break-words", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], children: part.text }) }, `reconnect-text-${i}`));
+                    }
+                    if (part.type === "tool-call") {
+                        return (_jsx(ToolCallDisplay, { toolName: part.toolName, argsText: part.argsText, args: part.args, result: part.result, isRunning: part.result === undefined }, `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 }) {
+    // Strip injected <context>...</context> blocks before display
+    const displayText = text
+        .replace(/<context>[\s\S]*?<\/context>\n?/g, "")
+        .trim();
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+    let hasRichMentions = false;
+    // First try rich mentions (@[label|icon])
+    richMentionPattern.lastIndex = 0;
+    while ((match = richMentionPattern.exec(displayText)) !== null) {
+        hasRichMentions = true;
+        const matchStart = match.index;
+        if (matchStart > lastIndex) {
+            parts.push(displayText.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 < displayText.length) {
+            parts.push(displayText.slice(lastIndex));
+        }
+        return _jsx(_Fragment, { children: parts });
+    }
+    // Fallback: plain @word mentions (for older messages)
+    plainMentionPattern.lastIndex = 0;
+    while ((match = plainMentionPattern.exec(displayText)) !== null) {
+        const matchStart = match.index;
+        if (matchStart > lastIndex) {
+            parts.push(displayText.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 < displayText.length) {
+        parts.push(displayText.slice(lastIndex));
+    }
+    return _jsx(_Fragment, { children: parts.length > 0 ? parts : displayText });
+}
+function UserMessageAttachments() {
+    const messageRuntime = useMessageRuntime();
+    const msg = messageRuntime.getState();
+    // Content parts may include image/file types from attachments
+    const parts = msg.content;
+    const images = parts.filter((p) => p.type === "image" && p.image);
+    const files = parts.filter((p) => p.type === "file");
+    if (images.length === 0 && files.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-wrap justify-end gap-1.5 mb-1.5", children: [images.map((img, i) => (_jsx("div", { className: "h-16 w-16 overflow-hidden rounded-lg border border-border/70 bg-muted/50", children: _jsx("img", { src: img.image, alt: "attachment", className: "h-full w-full object-cover" }) }, i))), files.map((file, i) => (_jsxs("div", { className: "flex items-center gap-1.5 rounded-lg border border-border/70 bg-muted/50 px-2 py-1.5 text-xs text-muted-foreground", children: [_jsx(IconFile, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate max-w-[120px]", children: file.name || "file" })] }, `f-${i}`)))] }));
+}
 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: [_jsx(UserMessageAttachments, {}), _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 +315,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(0);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setDots((d) => (d + 1) % 4);
+        }, 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 +365,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,50 +375,386 @@ 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" }) })] }));
+// ─── Builder.io CTA Card (usage limit / code changes / CLI) ─────────────────
+export function BuilderCtaCard({ reason, usageCents, limitCents, }) {
+    const appName = typeof window !== "undefined"
+        ? window.location.hostname.split(".")[0]
+        : "app";
+    const cloneCommand = `npx agent-native create ${appName}`;
+    const title = reason === "usage_limit"
+        ? "Free usage limit reached"
+        : reason === "code_changes"
+            ? "Code changes require a local setup"
+            : "Get full access";
+    const description = reason === "usage_limit"
+        ? `You've used $${((usageCents ?? 0) / 100).toFixed(2)} of your $${((limitCents ?? 100) / 100).toFixed(2)} free tier. Connect to Builder.io for unlimited usage, or clone this app to run it locally with your own API key.`
+        : reason === "code_changes"
+            ? "This app is running in hosted mode. To make code changes, connect to Builder.io or clone and run locally."
+            : "This hosted app has limited AI features. Connect to Builder.io for the full experience, or clone and run locally with your own API key.";
+    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: title }), _jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description })] })] }), _jsxs("div", { className: "space-y-2.5", children: [_jsx("a", { href: "https://www.builder.io/m/agent-native", target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90", children: "Connect to Builder.io" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("span", { className: "w-full border-t border-border" }) }), _jsx("div", { className: "relative flex justify-center text-xs", children: _jsx("span", { className: "bg-card px-2 text-muted-foreground", children: "or" }) })] }), _jsxs("div", { className: "rounded-md bg-muted/50 px-3 py-2.5", children: [_jsx("p", { className: "text-xs text-muted-foreground mb-1.5", children: "Clone and run locally:" }), _jsx("code", { className: "block text-xs text-foreground/80 font-mono break-all select-all", children: cloneCommand })] })] })] }));
 }
-const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, showHeader = true, showDevHint = true, onSwitchToCli, className, apiUrl = "/api/agent-chat", }, ref) {
+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 { }
+}
+/**
+ * Ensure all messages in a thread repository have `metadata: {}`.
+ * assistant-ui's _getMessageRuntime accesses `message.metadata.submittedFeedback`
+ * without null-checking, so server-constructed messages without metadata crash.
+ */
+function ensureMessageMetadata(repo) {
+    if (!repo?.messages || !Array.isArray(repo.messages))
+        return repo;
+    for (const entry of repo.messages) {
+        // Handle both wrapped ({ message: { ... } }) and flat ({ role, ... }) formats
+        const msg = entry?.message ?? entry;
+        if (msg && !msg.metadata) {
+            msg.metadata = {};
+        }
+    }
+    return repo;
+}
+// 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, onSlashCommand, execMode, onExecModeChange, }, ref) {
     const scrollRef = useRef(null);
     const thread = useThread();
     const threadRuntime = useThreadRuntime();
-    const isRunning = thread.isRunning;
+    const isRuntimeRunning = thread.isRunning;
     const messages = thread.messages;
     const [missingApiKey, setMissingApiKey] = useState(false);
+    const [authError, setAuthError] = useState(null);
+    const [usageLimitReached, setUsageLimitReached] = useState(null);
     const [queuedMessages, setQueuedMessages] = useState([]);
+    const [showContinue, setShowContinue] = useState(false);
+    const [isReconnecting, setIsReconnecting] = useState(false);
+    const [reconnectContent, setReconnectContent] = useState([]);
+    // When stop is clicked during reconnect, keep content visible (don't wipe it)
+    const [reconnectFrozen, setReconnectFrozen] = useState(false);
+    const reconnectRunIdRef = useRef(null);
+    const reconnectAbortRef = useRef(null);
+    // Nuclear stop: user clicked stop but runtime hasn't cleared yet.
+    // This ONLY affects UI display (button + thinking indicator). Submission
+    // and queue gating still use the real `isRunning` so we never overlap a
+    // new run on top of one that's still cancelling on the server.
+    const [forceStopped, setForceStopped] = useState(false);
+    // Real running state — drives submission/queue gating. Treat reconnecting
+    // to an active run the same as running.
+    const isRunning = isRuntimeRunning || isReconnecting;
+    // UI-only running state — drives the stop button and thinking indicator.
+    // forceStopped lets us flip the indicator off immediately even if the
+    // underlying runtime or reconnect state hasn't caught up yet.
+    const showRunningInUI = !forceStopped && isRunning;
     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(ensureMessageMetadata(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();
+                            // If the run already completed, just re-fetch thread data
+                            // (don't enter "Thinking." reconnection mode)
+                            if (runInfo.status !== "running") {
+                                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(ensureMessageMetadata(repo));
+                                            }
+                                        }
+                                    }
+                                }
+                                catch { }
+                                // Skip reconnection entirely
+                            }
+                            else {
+                                // Agent is still running — subscribe to live SSE stream
+                                reconnectRunIdRef.current = runInfo.runId;
+                                setIsReconnecting(true);
+                                setReconnectContent([]);
+                                // Signal tab running indicator
+                                window.dispatchEvent(new CustomEvent("builder.chatRunning", {
+                                    detail: { isRunning: true, tabId: tabId || threadId },
+                                }));
+                                // Create AbortController before the async call so stop button
+                                // can abort it even if clicked before the function body runs.
+                                const abortCtrl = new AbortController();
+                                reconnectAbortRef.current = abortCtrl;
+                                const streamReconnect = async () => {
+                                    try {
+                                        const sseRes = await fetch(`${apiUrl}/runs/${encodeURIComponent(runInfo.runId)}/events?after=0`, { signal: abortCtrl.signal });
+                                        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 or abort — fall through to re-fetch
+                                    }
+                                    // Poll for thread data — server's updateThreadData may not have
+                                    // committed yet when the SSE `done` event fires, so retry until
+                                    // an assistant message appears (up to ~5 s) before clearing.
+                                    setReconnectFrozen(true);
+                                    let loaded = false;
+                                    for (let attempt = 0; attempt < 10; attempt++) {
+                                        await new Promise((r) => setTimeout(r, 500));
+                                        // If the stop button fired mid-poll, bail out
+                                        if (!reconnectRunIdRef.current)
+                                            break;
+                                        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;
+                                                    const hasAssistant = repo?.messages?.some((m) => (m.message?.role ?? m.role) === "assistant");
+                                                    if (hasAssistant) {
+                                                        threadRuntime.import(ensureMessageMetadata(repo));
+                                                        setReconnectContent([]);
+                                                        setReconnectFrozen(false);
+                                                        loaded = true;
+                                                        break;
+                                                    }
+                                                }
+                                            }
+                                        }
+                                        catch { }
+                                    }
+                                    // Only clean up if the stop button hasn't already done it
+                                    if (reconnectRunIdRef.current) {
+                                        reconnectAbortRef.current = null;
+                                        // If loaded=true, reconnectContent already cleared above.
+                                        // If loaded=false (timeout), keep content frozen so user sees what happened.
+                                        setIsReconnecting(false);
+                                        reconnectRunIdRef.current = null;
+                                        window.dispatchEvent(new CustomEvent("builder.chatRunning", {
+                                            detail: { isRunning: false, tabId: tabId || threadId },
+                                        }));
+                                    }
+                                };
+                                streamReconnect();
+                            } // end else (running)
+                        }
+                    }
+                    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(ensureMessageMetadata(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;
+        if (threadId) {
+            onGenerateTitleRef.current?.(threadId, text.trim());
+        }
+    }, [messages, threadId]);
+    // Periodically save thread data while the agent is running so refreshes
+    // don't lose messages. Saves every 5 seconds while running.
+    const savedTitleRef = useRef("");
+    const lastSaveTimeRef = useRef(0);
+    useEffect(() => {
+        if (!hasRestoredRef.current)
+            return;
+        if (!isRunning)
+            return;
+        if (messages.length === 0)
+            return;
+        if (!threadId || !onSaveThreadRef.current)
+            return;
+        const now = Date.now();
+        const timeSinceLastSave = now - lastSaveTimeRef.current;
+        if (timeSinceLastSave < 5000)
+            return;
+        const repo = threadRuntime.export();
+        const { title, preview } = extractThreadMeta(repo);
+        if (!title)
+            return;
+        lastSaveTimeRef.current = now;
+        savedTitleRef.current = title;
+        onSaveThreadRef.current(threadId, {
+            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(threadId, {
+                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 auth error events from the adapter
+    useEffect(() => {
+        const handler = (e) => {
+            const detail = e.detail;
+            setAuthError({ sessionExpired: detail?.reason === "session-expired" });
+        };
+        window.addEventListener("agent-chat:auth-error", handler);
+        return () => window.removeEventListener("agent-chat:auth-error", handler);
+    }, []);
+    // Listen for usage limit reached events from the adapter
+    useEffect(() => {
+        const handler = (e) => {
+            const detail = e.detail;
+            setUsageLimitReached({
+                usageCents: detail?.usageCents ?? 0,
+                limitCents: detail?.limitCents ?? 100,
+            });
+        };
+        window.addEventListener("agent-chat:usage-limit-reached", handler);
+        return () => window.removeEventListener("agent-chat:usage-limit-reached", 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 +762,65 @@ 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) => {
+    // Clear frozen reconnect content + forceStopped only on the false→true
+    // transition of isRuntimeRunning (i.e. a NEW run is actually starting).
+    // Reacting to "isRuntimeRunning is currently true" would clear the
+    // nuclear-stop flag immediately after the user clicks stop, since
+    // cancellation is async and isRuntimeRunning is still true at that moment.
+    const prevIsRuntimeRunningRef = useRef(isRuntimeRunning);
+    useEffect(() => {
+        const wasRunning = prevIsRuntimeRunningRef.current;
+        prevIsRuntimeRunningRef.current = isRuntimeRunning;
+        if (isRuntimeRunning && !wasRunning) {
+            if (reconnectFrozen) {
+                setReconnectFrozen(false);
+                setReconnectContent([]);
+            }
+            if (forceStopped) {
+                setForceStopped(false);
+            }
+        }
+    }, [isRuntimeRunning, reconnectFrozen, forceStopped]);
+    // Same transition guard for isReconnecting: only clear forceStopped on
+    // the false→true edge (a new reconnect starting on page load).
+    const prevIsReconnectingRef = useRef(isReconnecting);
+    useEffect(() => {
+        const wasReconnecting = prevIsReconnectingRef.current;
+        prevIsReconnectingRef.current = isReconnecting;
+        if (isReconnecting && !wasReconnecting && forceStopped) {
+            setForceStopped(false);
+        }
+    }, [isReconnecting, forceStopped]);
+    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 +834,136 @@ 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: authError ? (_jsxs("div", { className: "flex flex-col items-center justify-center h-full px-4 gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10", children: _jsx(IconLock, { className: "h-5 w-5 text-destructive" }) }), _jsxs("div", { className: "text-center max-w-[280px]", children: [_jsx("p", { className: "text-sm font-medium text-foreground mb-1", children: authError.sessionExpired
+                                        ? "Session expired"
+                                        : "Authentication required" }), _jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: authError.sessionExpired ? ("Your session may have expired. Log out and log back in to reconnect.") : (_jsxs(_Fragment, { children: ["You need to log in to use the agent. If you're running locally, add", " ", _jsx("code", { className: "bg-muted px-1 py-0.5 rounded text-[10px]", children: "AUTH_MODE=local" }), " ", "to your", " ", _jsx("code", { className: "bg-muted px-1 py-0.5 rounded text-[10px]", children: ".env" }), " ", "file and restart the dev server."] })) })] }), _jsxs("div", { className: "flex gap-2", children: [authError.sessionExpired && (_jsx("button", { onClick: async () => {
+                                        try {
+                                            await fetch("/_agent-native/auth/logout", {
+                                                method: "POST",
+                                            });
+                                        }
+                                        catch { }
+                                        window.location.reload();
+                                    }, className: "text-xs text-destructive hover:text-destructive/80 px-3 py-1.5 rounded-md border border-destructive/30 hover:bg-destructive/10", children: "Log out" })), _jsx("button", { onClick: () => {
+                                        setAuthError(null);
+                                        window.location.reload();
+                                    }, className: "text-xs text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-accent", children: "Retry" })] })] })) : missingApiKey ? (_jsx("div", { className: "flex flex-col items-center justify-center h-full px-2", children: _jsx(ApiKeySetupCard, { apiUrl: apiUrl }) })) : usageLimitReached ? (_jsx("div", { className: "flex flex-col items-center justify-center h-full px-2", children: _jsx(BuilderCtaCard, { reason: "usage_limit", usageCents: usageLimitReached.usageCents, limitCents: usageLimitReached.limitCents }) })) : 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 && !showRunningInUI && (_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" }) })), (isReconnecting || reconnectFrozen) &&
+                            reconnectContent.length > 0 && (_jsx(ReconnectStreamMessage, { content: reconnectContent })), showRunningInUI && _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, onSlashCommand: onSlashCommand, execMode: execMode, onExecModeChange: onExecModeChange, actionButton: showRunningInUI ? (_jsx("button", { onClick: () => {
+                                    // Immediately force the indicator off — belt-and-suspenders
+                                    // so the UI is never stuck even if the runtime or reconnect
+                                    // state takes time (or fails) to clear on its own.
+                                    setForceStopped(true);
+                                    if (isReconnecting) {
+                                        // Abort the server-side run (fire-and-forget)
+                                        if (reconnectRunIdRef.current) {
+                                            fetch(`${apiUrl}/runs/${encodeURIComponent(reconnectRunIdRef.current)}/abort`, { method: "POST" });
+                                        }
+                                        // Abort the client-side SSE stream
+                                        reconnectAbortRef.current?.abort();
+                                        reconnectAbortRef.current = null;
+                                        reconnectRunIdRef.current = null;
+                                        setIsReconnecting(false);
+                                        // Keep reconnectContent visible (frozen) — don't wipe it
+                                        setReconnectFrozen(reconnectContent.length > 0);
+                                    }
+                                    // Always try to cancel the runtime run too (handles the
+                                    // normal non-reconnect path and is a no-op if not running)
+                                    threadRuntime.cancelRun();
+                                    window.dispatchEvent(new CustomEvent("builder.chatRunning", {
+                                        detail: {
+                                            isRunning: false,
+                                            tabId: tabId || threadId,
+                                        },
+                                    }));
+                                }, 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