@agent-native/core 0.7.1 → 0.7.2

package/dist/client/AssistantChat.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-export declare function BuilderCtaCard({ reason, usageCents, limitCents, }: {
+export declare function BuilderCtaCard({ reason, usageCents, limitCents, apiUrl, }: {
     reason: "usage_limit" | "code_changes" | "cli_tab";
     usageCents?: number;
     limitCents?: number;
+    apiUrl?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export interface AssistantChatHandle {
     /** Programmatically send a message into this chat */

package/dist/client/AssistantChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantChat.d.ts","sourceRoot":"","sources":["../../src/client/AssistantChat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAwzBf,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,UAAU,GACX,EAAE;IACD,MAAM,EAAE,aAAa,GAAG,cAAc,GAAG,SAAS,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CA+DA;AAID,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,6DAA6D;IAC7D,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,4CAA4C;IAC5C,SAAS,IAAI,OAAO,CAAC;IACrB,+BAA+B;IAC/B,aAAa,IAAI,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wGAAwG;IACxG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;KACtB,KACE,IAAI,CAAC;IACV,+DAA+D;IAC/D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,8DAA8D;IAC9D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,+FAA+F;IAC/F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,mBAAmB,gBAAgB,CAAC;AAEjD,8DAA8D;AAC9D,wBAAgB,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,QAI9C;AAoBD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,CAAC;AA60B7B,eAAO,MAAM,aAAa,gGAoCxB,CAAC"}
+{"version":3,"file":"AssistantChat.d.ts","sourceRoot":"","sources":["../../src/client/AssistantChat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAy5Bf,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,UAAU,EACV,UAAU,EACV,MAAoC,GACrC,EAAE;IACD,MAAM,EAAE,aAAa,GAAG,cAAc,GAAG,SAAS,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,2CAyJA;AAID,MAAM,WAAW,mBAAmB;IAClC,qDAAqD;IACrD,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,6DAA6D;IAC7D,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,4CAA4C;IAC5C,SAAS,IAAI,OAAO,CAAC;IACrB,+BAA+B;IAC/B,aAAa,IAAI,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wGAAwG;IACxG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CACb,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE;QACJ,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,YAAY,EAAE,MAAM,CAAC;KACtB,KACE,IAAI,CAAC;IACV,+DAA+D;IAC/D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,8DAA8D;IAC9D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,+FAA+F;IAC/F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,eAAO,MAAM,mBAAmB,gBAAgB,CAAC;AAEjD,8DAA8D;AAC9D,wBAAgB,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,QAI9C;AAoBD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAo5B7B,eAAO,MAAM,aAAa,gGAoCxB,CAAC"}

package/dist/client/AssistantChat.js

@@ -1,5 +1,5 @@
 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 React, { useState, useRef, useEffect, useCallback, useMemo, forwardRef, useImperativeHandle, } from "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";
@@ -9,8 +9,10 @@ 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 { ConnectBuilderCard } from "./ConnectBuilderCard.js";
+import { IframeEmbed, parseEmbedBody } from "./IframeEmbed.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";
+import { IconMessage, 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; }
@@ -43,11 +45,37 @@ function injectMarkdownStyles() {
     style.textContent = markdownStyles;
     document.head.appendChild(style);
 }
+function extractCodeText(child) {
+    if (typeof child === "string")
+        return child;
+    if (Array.isArray(child))
+        return child.map(extractCodeText).join("");
+    if (React.isValidElement(child)) {
+        const props = child.props;
+        return extractCodeText(props.children);
+    }
+    return "";
+}
+const markdownComponents = {
+    pre(props) {
+        const { children, ...rest } = props;
+        if (React.isValidElement(children)) {
+            const childProps = children.props;
+            const className = childProps.className || "";
+            if (/\blanguage-embed\b/.test(className)) {
+                const body = extractCodeText(childProps.children);
+                const parsed = parseEmbedBody(body);
+                return (_jsx(IframeEmbed, { ...parsed }));
+            }
+        }
+        return _jsx("pre", { ...rest, children: children });
+    },
+};
 function MarkdownText() {
     useEffect(() => {
         injectMarkdownStyles();
     }, []);
-    return (_jsx(MarkdownTextPrimitive, { smooth: true, className: "agent-markdown break-words", remarkPlugins: [remarkGfm] }));
+    return (_jsx(MarkdownTextPrimitive, { smooth: true, className: "agent-markdown break-words", remarkPlugins: [remarkGfm], components: markdownComponents }));
 }
 // ─── Composer Attachment Preview ─────────────────────────────────────────────
 function getImageAttachmentSrc(attachment) {
@@ -106,6 +134,18 @@ function ToolCallDisplay({ toolName, argsText, args, result, isRunning, }) {
             streamRef.current.scrollTop = streamRef.current.scrollHeight;
         }
     }, [agentStreamText, isAgentCall, isRunning]);
+    // Render connect-builder as ConnectBuilderCard once the result is available
+    if (toolName === "connect-builder" && result) {
+        try {
+            const parsed = JSON.parse(result);
+            if (parsed?.kind === "connect-builder-card") {
+                return (_jsx(ConnectBuilderCard, { configured: !!parsed.configured, builderEnabled: !!parsed.builderEnabled, connectUrl: parsed.connectUrl || "", orgName: parsed.orgName ?? null, prompt: typeof parsed.prompt === "string" ? parsed.prompt : "" }));
+            }
+        }
+        catch {
+            // fall through to default pill rendering
+        }
+    }
     // Render spawn-task as AgentTaskCard once the result is available
     if (toolName === "spawn-task" && result) {
         try {
@@ -146,7 +186,7 @@ function ToolCallDisplay({ toolName, argsText, args, result, isRunning, }) {
     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"
+                    : "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], components: markdownComponents, 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) }))] }));
 }
@@ -169,7 +209,7 @@ function ReconnectStreamMessage({ content }) {
     }, [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}`));
+                        return (_jsx("div", { className: "agent-markdown break-words", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, 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}`));
@@ -254,13 +294,22 @@ function UserMessageText({ text }) {
 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)
+    // assistant-ui stores user attachments on msg.attachments (separate from content).
+    // Each attachment has: { id, type, name, contentType?, content: MessagePart[] }.
+    // Image adapters put a {type:"image", image:"data:..."} part in content; text
+    // adapters put a {type:"text", text:"<attachment>..."} part. Fall back to a
+    // file chip when there's no inline image.
+    const attachments = msg
+        .attachments;
+    if (!attachments || attachments.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}`)))] }));
+    return (_jsx("div", { className: "flex flex-wrap justify-end gap-1.5 mb-1.5", children: attachments.map((att) => {
+            const imagePart = att.content?.find((p) => p.type === "image" && "image" in p && !!p.image);
+            if (imagePart) {
+                return (_jsx("div", { className: "h-16 w-16 overflow-hidden rounded-lg border border-border/70 bg-muted/50", title: att.name, children: _jsx("img", { src: imagePart.image, alt: att.name, className: "h-full w-full object-cover" }) }, att.id));
+            }
+            return (_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", title: att.name, children: [_jsx(IconFile, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate max-w-[120px]", children: att.name || "file" })] }, att.id));
+        }) }));
 }
 function UserMessage() {
     const [expanded, setExpanded] = useState(false);
@@ -367,7 +416,7 @@ 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(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(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) => {
+    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(IconMessage, { 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: "Connect Builder or add an Anthropic API key to enable the agent" })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "rounded-md border border-border px-3 py-2.5", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Connect Builder" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: "Use Builder's managed Anthropic proxy \u2014 no API key needed" })] }), _jsx("span", { className: "shrink-0 rounded border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Coming soon" })] }) }), _jsxs("div", { className: "relative flex items-center", children: [_jsx("div", { className: "flex-grow border-t border-border" }), _jsx("span", { className: "mx-2 text-[10px] uppercase tracking-wider text-muted-foreground/60", children: "or" }), _jsx("div", { className: "flex-grow border-t border-border" })] }), _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) => {
@@ -376,22 +425,60 @@ function ApiKeySetupCard({ apiUrl }) {
                         }, 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, }) {
+export function BuilderCtaCard({ reason, usageCents, limitCents, apiUrl = "/_agent-native/agent-chat", }) {
     const appName = typeof window !== "undefined"
         ? window.location.hostname.split(".")[0]
         : "app";
     const cloneCommand = `npx agent-native create ${appName}`;
+    const [apiKey, setApiKey] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [error, setError] = useState(null);
+    const handleSave = async () => {
+        if (!apiKey.trim())
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const res = await fetch(`${apiUrl}/save-key`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ key: apiKey.trim() }),
+            });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                throw new Error(data.error || "Failed to save");
+            }
+            setSaved(true);
+            setTimeout(() => window.location.reload(), 1000);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to save");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
     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.`
+        ? null
         : 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 })] })] })] }));
+            ? "This app is running in hosted mode. To make code changes, add your own Anthropic API key or clone and run locally."
+            : "This hosted app has limited AI features. Add your own Anthropic API key for the full experience, or clone and run locally.";
+    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(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-4", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted", children: _jsx(IconMessage, { className: "h-4.5 w-4.5 text-muted-foreground" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium text-foreground", children: title }), description && (_jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description }))] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "rounded-md bg-muted/50 px-3 py-2.5 text-xs text-muted-foreground leading-relaxed", children: _jsxs("p", { children: ["Paste an Anthropic API key (", _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" }), ") to skip the free-tier limit."] }) }), _jsx("input", { type: "password", value: apiKey, onChange: (e) => {
+                            setApiKey(e.target.value);
+                            setError(null);
+                        }, onKeyDown: (e) => {
+                            if (e.key === "Enter")
+                                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" }), _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 })] }), _jsx("div", { className: "rounded-md border border-border px-3 py-2.5", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Connect Builder.io" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: "Builder's managed Anthropic proxy \u2014 no API key needed" })] }), _jsx("span", { className: "shrink-0 rounded border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Coming soon" })] }) })] })] }));
 }
 export const CHAT_STORAGE_PREFIX = "agent-chat:";
 /** Remove persisted chat for a given tabId (or "default"). */
@@ -438,18 +525,17 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     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.
+    // Nuclear stop: user clicked stop. Clears the stop button/indicator AND
+    // lets new submissions go through immediately — prevents the "stuck
+    // queueing forever" state where isReconnecting or isRuntimeRunning gets
+    // wedged (e.g. after a tab refresh + stop during reconnect).
     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;
+    // to an active run the same as running, UNLESS the user has explicitly
+    // clicked stop (forceStopped).
+    const isRunning = !forceStopped && (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 showRunningInUI = isRunning;
     const wasRunningRef = useRef(false);
     const tiptapRef = useRef(null);
     // ─── Chat persistence ──────────────────────────────────────────────
@@ -524,6 +610,38 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                 // can abort it even if clicked before the function body runs.
                                 const abortCtrl = new AbortController();
                                 reconnectAbortRef.current = abortCtrl;
+                                // Watchdog: poll /runs/active to detect when the run is no
+                                // longer running server-side. If the SSE stream hangs (e.g.
+                                // because the agent process died but its SQL run row is still
+                                // marked "running", or the stream just never emits `done`),
+                                // this aborts the fetch so we fall through to thread refresh
+                                // instead of showing "Thinking..." forever.
+                                const watchdog = setInterval(async () => {
+                                    try {
+                                        const res = await fetch(`${apiUrl}/runs/active?threadId=${encodeURIComponent(threadId)}`);
+                                        if (!res.ok) {
+                                            abortCtrl.abort();
+                                            clearInterval(watchdog);
+                                            return;
+                                        }
+                                        const info = await res.json();
+                                        if (info.status !== "running") {
+                                            abortCtrl.abort();
+                                            clearInterval(watchdog);
+                                        }
+                                    }
+                                    catch {
+                                        // Network blip — keep polling
+                                    }
+                                }, 3000);
+                                // Hard cap: no single reconnect should wedge the UI for
+                                // more than 2 minutes. Even if the watchdog is fooled and
+                                // the SSE stream never closes, this guarantees "Thinking..."
+                                // eventually clears.
+                                const maxReconnectTimer = setTimeout(() => {
+                                    abortCtrl.abort();
+                                    clearInterval(watchdog);
+                                }, 2 * 60 * 1000);
                                 const streamReconnect = async () => {
                                     try {
                                         const sseRes = await fetch(`${apiUrl}/runs/${encodeURIComponent(runInfo.runId)}/events?after=0`, { signal: abortCtrl.signal });
@@ -551,6 +669,10 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                     catch {
                                         // Stream error or abort — fall through to re-fetch
                                     }
+                                    finally {
+                                        clearInterval(watchdog);
+                                        clearTimeout(maxReconnectTimer);
+                                    }
                                     // 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.
@@ -811,7 +933,17 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     const addToQueue = useCallback((text, images, references) => {
         setShowContinue(false);
         if (isRunning) {
-            setQueuedMessages((prev) => [...prev, { text, images, references }]);
+            setQueuedMessages((prev) => [
+                ...prev,
+                {
+                    id: typeof crypto !== "undefined" && crypto.randomUUID
+                        ? crypto.randomUUID()
+                        : `q-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+                    text,
+                    images,
+                    references,
+                },
+            ]);
         }
         else {
             const content = [{ type: "text", text }];
@@ -908,44 +1040,44 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                     }, 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: () => {
+                                    }, 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, 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(IconMessage, { 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))) }))] })) : (_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: "agent-thread-content flex flex-col gap-4 px-4 py-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                 UserMessage,
                                 AssistantMessage,
                             } }), 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
+                            reconnectContent.length > 0 && (_jsx(ReconnectStreamMessage, { content: reconnectContent })), showRunningInUI && _jsx(ThinkingIndicator, {}), queuedMessages.map((msg) => {
+                            const displayText = msg.text
+                                .replace(/<context>[\s\S]*?<\/context>\n?/g, "")
+                                .trim();
+                            return (_jsx("div", { className: "flex justify-end group", children: _jsxs("div", { className: "relative 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"] }), displayText, 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))) })), _jsx("button", { type: "button", onClick: () => setQueuedMessages((prev) => prev.filter((m) => m.id !== msg.id)), "aria-label": "Remove from queue", className: "absolute -top-2 -right-2 flex h-5 w-5 items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:text-foreground hover:bg-accent shadow-sm", children: _jsx(IconX, { className: "h-3 w-3" }) })] }) }, msg.id));
+                        })] })) }), 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: "agent-composer-area 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.
+                                : undefined, onSlashCommand: onSlashCommand, execMode: execMode, onExecModeChange: onExecModeChange, extraActionButton: showRunningInUI ? (_jsx("button", { type: "button", onClick: () => {
+                                    // Nuclear stop: flip forceStopped so isRunning is false
+                                    // immediately. This unblocks submission even if the
+                                    // runtime or reconnect state is stuck.
                                     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: {
@@ -953,7 +1085,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                             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 })] }) })] }));
+                                }, className: "shrink-0 flex h-7 w-7 items-center justify-center rounded-md bg-muted text-foreground hover:bg-muted/80", 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]);