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

package/dist/client/AssistantChat.js

@@ -4,11 +4,13 @@ import { AssistantRuntimeProvider, useLocalRuntime, useThreadRuntime, useThread,
 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";
+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, } from "@tabler/icons-react";
+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; }
@@ -45,7 +47,7 @@ function MarkdownText() {
     useEffect(() => {
         injectMarkdownStyles();
     }, []);
-    return (_jsx(MarkdownTextPrimitive, { smooth: true, className: "agent-markdown break-words" }));
+    return (_jsx(MarkdownTextPrimitive, { smooth: true, className: "agent-markdown break-words", remarkPlugins: [remarkGfm] }));
 }
 // ─── Composer Attachment Preview ─────────────────────────────────────────────
 function getImageAttachmentSrc(attachment) {
@@ -85,58 +87,49 @@ function ComposerAttachmentPreviewStrip() {
         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, argsText, result, }) {
+// ─── 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 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
+    // NOTE: All hooks must be above any conditional returns
     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 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;
+    // 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)
@@ -151,28 +144,35 @@ function ReconnectStreamToolCall({ toolName, argsText, args, result, }) {
         : 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"
+                    : "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 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) => {
+    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: "text-sm leading-relaxed whitespace-pre-wrap break-words", children: part.text }, `reconnect-text-${i}`));
+                        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(ReconnectStreamToolCall, { toolName: part.toolName, argsText: part.argsText, args: part.args, result: part.result }, `reconnect-tool-${i}`));
+                        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 })] }) }));
@@ -208,17 +208,21 @@ function MentionChipIcon({ icon }) {
 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(text)) !== null) {
+    while ((match = richMentionPattern.exec(displayText)) !== null) {
         hasRichMentions = true;
         const matchStart = match.index;
         if (matchStart > lastIndex) {
-            parts.push(text.slice(lastIndex, matchStart));
+            parts.push(displayText.slice(lastIndex, matchStart));
         }
         const label = match[1];
         const icon = match[2];
@@ -226,26 +230,37 @@ function UserMessageText({ text }) {
         lastIndex = matchStart + match[0].length;
     }
     if (hasRichMentions) {
-        if (lastIndex < text.length) {
-            parts.push(text.slice(lastIndex));
+        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(text)) !== null) {
+    while ((match = plainMentionPattern.exec(displayText)) !== null) {
         const matchStart = match.index;
         if (matchStart > lastIndex) {
-            parts.push(text.slice(lastIndex, matchStart));
+            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 < text.length) {
-        parts.push(text.slice(lastIndex));
+    if (lastIndex < displayText.length) {
+        parts.push(displayText.slice(lastIndex));
     }
-    return _jsx(_Fragment, { children: parts.length > 0 ? parts : text });
+    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() {
     const [expanded, setExpanded] = useState(false);
@@ -263,7 +278,7 @@ function UserMessage() {
         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) => {
+    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;
@@ -309,10 +324,10 @@ function AssistantMessage() {
 }
 // ─── Thinking Indicator ─────────────────────────────────────────────────────
 function ThinkingIndicator() {
-    const [dots, setDots] = useState(1);
+    const [dots, setDots] = useState(0);
     useEffect(() => {
         const interval = setInterval(() => {
-            setDots((d) => (d % 3) + 1);
+            setDots((d) => (d + 1) % 4);
         }, 400);
         return () => clearInterval(interval);
     }, []);
@@ -360,6 +375,24 @@ 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" })] })] }));
 }
+// ─── 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 })] })] })] }));
+}
 export const CHAT_STORAGE_PREFIX = "agent-chat:";
 /** Remove persisted chat for a given tabId (or "default"). */
 export function clearChatStorage(tabId) {
@@ -368,20 +401,55 @@ export function clearChatStorage(tabId) {
     }
     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, }, ref) {
+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 tiptapRef = useRef(null);
     // ─── Chat persistence ──────────────────────────────────────────────
@@ -411,7 +479,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                             : data.threadData;
                         if (repo?.messages?.length > 0) {
                             titleGeneratedRef.current = true; // Don't re-generate for restored threads
-                            threadRuntime.import(repo);
+                            threadRuntime.import(ensureMessageMetadata(repo));
                         }
                     }
                     // Also skip title generation if thread already has a title
@@ -423,38 +491,9 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                         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)
+                            // 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) {
@@ -464,16 +503,99 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                 ? JSON.parse(refreshData.threadData)
                                                 : refreshData.threadData;
                                             if (repo?.messages?.length > 0) {
-                                                threadRuntime.import(repo);
+                                                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([]);
-                                setIsReconnecting(false);
-                            };
-                            streamReconnect();
+                                // 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 {
@@ -496,7 +618,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                 if (saved) {
                     const repo = JSON.parse(saved);
                     if (repo?.messages?.length > 0) {
-                        threadRuntime.import(repo);
+                        threadRuntime.import(ensureMessageMetadata(repo));
                     }
                 }
             }
@@ -529,30 +651,39 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         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.
+        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);
-        // 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,
-            });
-        }
+        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(() => {
@@ -567,7 +698,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
             // Save to server via the hook callback
             const { title, preview } = extractThreadMeta(repo);
             savedTitleRef.current = title;
-            onSaveThreadRef.current({
+            onSaveThreadRef.current(threadId, {
                 threadData: JSON.stringify(repo),
                 title,
                 preview,
@@ -592,6 +723,27 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         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) => {
@@ -627,6 +779,35 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         }
         wasRunningRef.current = isRunning;
     }, [isRunning, queuedMessages, threadRuntime]);
+    // 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) {
@@ -714,7 +895,20 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         }, 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: () => {
+    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 }],
@@ -722,16 +916,44 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                 }, 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,
-                            } }), showContinue && !isRunning && (_jsx("div", { className: "flex justify-center py-2", children: _jsx("button", { type: "button", onClick: () => {
+                            } }), 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" }) })), 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
+                                }, 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, 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 })] }) })] }));
+                                : 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 = "/_agent-native/agent-chat", tabId, threadId, ...props }, ref) {
     const adapter = useMemo(() => createAgentChatAdapter({ apiUrl, tabId, threadId }), [apiUrl, tabId, threadId]);