@agent-native/core 0.7.14 → 0.7.16

package/dist/client/AssistantChat.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 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";
@@ -13,8 +14,9 @@ import { ConnectBuilderCard } from "./ConnectBuilderCard.js";
 import { useBuilderConnectFlow } from "./settings/useBuilderStatus.js";
 import { IframeEmbed, parseEmbedBody } from "./IframeEmbed.js";
 import { useDevMode } from "./use-dev-mode.js";
+import { agentNativePath } from "./api-path.js";
 import { TiptapComposer, } from "./composer/TiptapComposer.js";
-import { IconMessage, IconX, IconPlayerStop, IconCheck, IconChevronDown, IconCopy, IconTerminal, IconLoader2, IconCircleX, IconSquareFilled, IconClock, IconFile, IconFolder, IconFileText, IconCheckbox, IconMail, IconUser, IconPresentation, IconStack2, IconMessageChatbot, IconLock, IconArrowBackUp, IconExternalLink, IconDots, IconGitFork, IconId, } 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, IconArrowBackUp, IconExternalLink, IconDots, IconGitFork, IconId, IconQuote, } from "@tabler/icons-react";
 const ThumbsFeedbackLazy = React.lazy(() => import("./observability/ThumbsFeedback.js").then((m) => ({
     default: m.ThumbsFeedback,
 })));
@@ -31,9 +33,9 @@ const markdownStyles = `
 .agent-markdown h3 { font-size: 1em; font-weight: 600; margin: 0.75em 0 0.25em; }
 .agent-markdown strong { font-weight: 600; }
 .agent-markdown em { font-style: italic; }
-.agent-markdown code { font-size: 0.875em; padding: 0.15em 0.35em; border-radius: 0.25em; background: hsl(var(--muted, 0 0% 15%)); color: hsl(var(--foreground, 0 0% 90%)); }
-.agent-markdown pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 0.375em; background: hsl(var(--muted, 0 0% 15%)); color: hsl(var(--foreground, 0 0% 90%)); overflow-x: auto; }
-.agent-markdown pre code { padding: 0; background: transparent; font-size: 0.8125em; color: inherit; }
+.agent-markdown code { font-size: 0.875em; padding: 0.15em 0.35em; border-radius: 0.25em; background: hsl(var(--muted, 0 0% 15%)); color: hsl(var(--foreground, 0 0% 90%)); border: 1px solid hsl(var(--border, 0 0% 80%)); }
+.agent-markdown pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 0.375em; background: hsl(var(--muted, 0 0% 15%)); color: hsl(var(--foreground, 0 0% 90%)); overflow-x: auto; border: 1px solid hsl(var(--border, 0 0% 80%)); }
+.agent-markdown pre code { padding: 0; background: transparent; font-size: 0.8125em; color: inherit; border: none; }
 .agent-markdown-shiki { margin: 0.5em 0; border-radius: 0.375em; overflow: hidden; font-size: 0.8125em; }
 .agent-markdown-shiki pre { margin: 0; padding: 0.75em 1em; overflow-x: auto; background: var(--shiki-light-bg); color: var(--shiki-light); }
 .agent-markdown-shiki pre code { background: transparent; padding: 0; font-size: inherit; color: inherit; }
@@ -48,6 +50,65 @@ const markdownStyles = `
 .agent-markdown th, .agent-markdown td { border: 1px solid hsl(var(--border, 0 0% 20%)); padding: 0.35em 0.65em; text-align: left; }
 .agent-markdown th { font-weight: 600; background: hsl(var(--muted, 0 0% 15%)); color: hsl(var(--foreground, 0 0% 90%)); }
 `;
+/**
+ * Pending selection context — written to application_state when the user
+ * presses Cmd+I with text selected on the page. The agent's next turn picks
+ * it up via the `selectionContextPromise` in production-agent. The pill
+ * below tells the user the context is attached and lets them clear it.
+ */
+const PENDING_SELECTION_KEY = "pending-selection-context";
+function clearPendingSelection() {
+    fetch(agentNativePath(`/_agent-native/application-state/${PENDING_SELECTION_KEY}`), {
+        method: "DELETE",
+        keepalive: true,
+        headers: { "X-Agent-Native-CSRF": "1" },
+    }).catch(() => { });
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent("agent-panel:selection-cleared"));
+    }
+}
+function SelectionAttachedPill() {
+    const [length, setLength] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        fetch(agentNativePath(`/_agent-native/application-state/${PENDING_SELECTION_KEY}`))
+            .then((r) => (r.ok && r.status !== 204 ? r.json() : null))
+            .then((data) => {
+            if (cancelled)
+                return;
+            const text = data?.value?.text ??
+                data?.text;
+            if (text)
+                setLength(text.length);
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => {
+        function onAttached(e) {
+            const detail = e.detail;
+            if (typeof detail?.length === "number")
+                setLength(detail.length);
+        }
+        function onCleared() {
+            setLength(null);
+        }
+        window.addEventListener("agent-panel:selection-attached", onAttached);
+        window.addEventListener("agent-panel:selection-cleared", onCleared);
+        return () => {
+            window.removeEventListener("agent-panel:selection-attached", onAttached);
+            window.removeEventListener("agent-panel:selection-cleared", onCleared);
+        };
+    }, []);
+    if (length === null || length === 0)
+        return null;
+    return (_jsx("div", { className: "shrink-0 px-3 pt-1.5 -mb-1", children: _jsxs("div", { className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-muted/50 px-2 py-0.5 text-[11px] text-muted-foreground", children: [_jsx(IconQuote, { size: 11 }), _jsxs("span", { children: [length.toLocaleString(), " chars of selection attached"] }), _jsx("button", { type: "button", "aria-label": "Clear selection context", onClick: () => {
+                        setLength(null);
+                        clearPendingSelection();
+                    }, className: "flex h-4 w-4 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/60", children: _jsx(IconX, { size: 11 }) })] }) }));
+}
 let stylesInjected = false;
 function injectMarkdownStyles() {
     if (stylesInjected || typeof document === "undefined")
@@ -460,23 +521,13 @@ function UserMessage() {
 }
 const CheckpointContext = React.createContext(null);
 const MessageActionsContext = React.createContext(null);
-function MessageActionsMenu() {
+function MessageActionsMenu({ showRevert, onRevert, } = {}) {
     const [open, setOpen] = useState(false);
+    const [menuPos, setMenuPos] = useState(null);
     const [copied, setCopied] = useState(null);
     const messageRuntime = useMessageRuntime();
     const actionsCtx = React.useContext(MessageActionsContext);
-    const menuRef = useRef(null);
-    useEffect(() => {
-        if (!open)
-            return;
-        const handler = (e) => {
-            if (menuRef.current && !menuRef.current.contains(e.target)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handler);
-        return () => document.removeEventListener("mousedown", handler);
-    }, [open]);
+    const buttonRef = useRef(null);
     const handleCopyMessage = useCallback(() => {
         const m = messageRuntime.getState();
         const text = m.content
@@ -504,7 +555,20 @@ function MessageActionsMenu() {
         setOpen(false);
         actionsCtx?.onForkChat?.();
     }, [actionsCtx]);
-    return (_jsxs("div", { className: "relative", ref: menuRef, children: [_jsx("button", { onClick: () => setOpen((v) => !v), className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground", open && "bg-accent text-foreground"), children: _jsx(IconDots, { className: "h-3.5 w-3.5" }) }), open && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }), _jsxs("div", { className: "absolute left-0 top-full z-50 mt-1 w-44 rounded-md border border-border bg-popover py-1 shadow-lg", children: [actionsCtx?.onForkChat && (_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: handleForkChat, children: [_jsx(IconGitFork, { className: "h-3.5 w-3.5" }), "Fork Chat"] })), _jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: handleCopyMessage, children: [copied === "message" ? (_jsx(IconCheck, { className: "h-3.5 w-3.5" })) : (_jsx(IconCopy, { className: "h-3.5 w-3.5" })), copied === "message" ? "Copied!" : "Copy Message"] }), _jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: handleCopyRequestId, children: [copied === "id" ? (_jsx(IconCheck, { className: "h-3.5 w-3.5" })) : (_jsx(IconId, { className: "h-3.5 w-3.5" })), copied === "id" ? "Copied!" : "Copy Request ID"] })] })] }))] }));
+    const handleRevert = useCallback(() => {
+        setOpen(false);
+        onRevert?.();
+    }, [onRevert]);
+    const handleToggle = useCallback(() => {
+        if (!open && buttonRef.current) {
+            const rect = buttonRef.current.getBoundingClientRect();
+            setMenuPos({ top: rect.bottom + 4, left: rect.left });
+        }
+        setOpen((v) => !v);
+    }, [open]);
+    return (_jsxs("div", { className: "relative", children: [_jsx("button", { ref: buttonRef, onClick: handleToggle, className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground", open && "bg-accent text-foreground"), children: _jsx(IconDots, { className: "h-3.5 w-3.5" }) }), open &&
+                menuPos &&
+                createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0", style: { zIndex: 9998 }, onClick: () => setOpen(false) }), _jsxs("div", { className: "fixed w-44 rounded-md border border-border bg-popover py-1 shadow-lg", style: { top: menuPos.top, left: menuPos.left, zIndex: 9999 }, children: [actionsCtx?.onForkChat && (_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: handleForkChat, children: [_jsx(IconGitFork, { className: "h-3.5 w-3.5" }), "Fork Chat"] })), _jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: handleCopyMessage, children: [copied === "message" ? (_jsx(IconCheck, { className: "h-3.5 w-3.5" })) : (_jsx(IconCopy, { className: "h-3.5 w-3.5" })), copied === "message" ? "Copied!" : "Copy Message"] }), _jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: handleCopyRequestId, children: [copied === "id" ? (_jsx(IconCheck, { className: "h-3.5 w-3.5" })) : (_jsx(IconId, { className: "h-3.5 w-3.5" })), copied === "id" ? "Copied!" : "Copy Request ID"] }), showRevert && (_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: handleRevert, children: [_jsx(IconArrowBackUp, { className: "h-3.5 w-3.5" }), "Revert to here"] }))] })] }), document.body)] }));
 }
 function AssistantMessage() {
     const [restoreState, setRestoreState] = useState("idle");
@@ -563,7 +627,7 @@ function AssistantMessage() {
                         tools: {
                             Fallback: ToolCallFallback,
                         },
-                    } }) }), isComplete && (_jsxs("div", { className: "mt-1 flex items-center justify-between", children: [_jsx(MessageActionsMenu, {}), _jsx(React.Suspense, { fallback: null, children: _jsx(ThumbsFeedbackLazy, { threadId: cpCtx?.threadId ?? "", runId: messageRuntime.getState().metadata?.runId ?? "", messageSeq: thread.messages.findIndex((m) => m.id === msg.id) }) }), showRestore && restoreState === "idle" && (_jsx("button", { onClick: handleRestore, title: "Restore project files to this point", className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(IconArrowBackUp, { className: "h-3 w-3" }) })), showRestore && restoreState === "confirming" && (_jsxs("div", { className: "flex items-center gap-1 text-xs", children: [_jsx("button", { onClick: handleRestore, className: "rounded-md bg-destructive px-1.5 py-0.5 text-destructive-foreground hover:bg-destructive/90", children: "Restore to here?" }), _jsx("button", { onClick: cancelRestore, className: "rounded-md px-1.5 py-0.5 text-muted-foreground hover:bg-accent", children: "Cancel" })] })), showRestore && restoreState === "restoring" && (_jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" }), "Restoring..."] }))] }))] }));
+                    } }) }), isComplete && (_jsxs("div", { className: "mt-1 flex items-center justify-between", children: [_jsx(MessageActionsMenu, { showRevert: showRestore && restoreState === "idle", onRevert: handleRestore }), showRestore && restoreState === "confirming" ? (_jsxs("div", { className: "flex items-center gap-1 text-xs", children: [_jsx("button", { onClick: handleRestore, className: "rounded-md bg-destructive px-1.5 py-0.5 text-destructive-foreground hover:bg-destructive/90", children: "Restore to here?" }), _jsx("button", { onClick: cancelRestore, className: "rounded-md px-1.5 py-0.5 text-muted-foreground hover:bg-accent", children: "Cancel" })] })) : showRestore && restoreState === "restoring" ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(IconLoader2, { className: "h-3 w-3 animate-spin" }), "Restoring..."] })) : (_jsx(React.Suspense, { fallback: null, children: _jsx(ThumbsFeedbackLazy, { threadId: cpCtx?.threadId ?? "", runId: messageRuntime.getState().metadata?.runId ?? "", messageSeq: thread.messages.findIndex((m) => m.id === msg.id) }) }))] }))] }));
 }
 // ─── Thinking Indicator ─────────────────────────────────────────────────────
 function ThinkingIndicator({ label = "Thinking" } = {}) {
@@ -645,62 +709,6 @@ 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 }), apiKey.trim() && (_jsx("button", { onClick: handleSave, disabled: saving, 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" })), _jsx("p", { className: "text-[10px] text-muted-foreground/60 text-center", children: _jsx("a", { href: "https://console.anthropic.com/settings/keys", target: "_blank", rel: "noopener noreferrer", className: "underline hover:text-foreground/80", children: "Get an Anthropic key" }) })] })] }));
 }
-// ─── Builder.io CTA Card (usage limit / code changes / CLI) ─────────────────
-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(), provider: "anthropic" }),
-            });
-            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"
-        ? null
-        : reason === "code_changes"
-            ? "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(BuilderConnectCta, { variant: "compact" })] })] }));
-}
 export const CHAT_STORAGE_PREFIX = "agent-chat:";
 /** Remove persisted chat for a given tabId (or "default"). */
 export function clearChatStorage(tabId) {
@@ -743,7 +751,6 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     const messages = thread.messages;
     const [missingApiKey, setMissingApiKey] = useState(false);
     const [authError, setAuthError] = useState(null);
-    const [usageLimitReached, setUsageLimitReached] = useState(null);
     const [queuedMessages, setQueuedMessages] = useState([]);
     // Tracks the JSON of the last queue we successfully persisted so the
     // debounced save effect can skip no-op writes (e.g. restore-from-server
@@ -855,7 +862,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                 setIsReconnecting(true);
                                 setReconnectContent([]);
                                 // Signal tab running indicator
-                                window.dispatchEvent(new CustomEvent("builder.chatRunning", {
+                                window.dispatchEvent(new CustomEvent("agentNative.chatRunning", {
                                     detail: { isRunning: true, tabId: tabId || threadId },
                                 }));
                                 // Create AbortController before the async call so stop button
@@ -969,7 +976,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                         // If loaded=false (timeout), keep content frozen so user sees what happened.
                                         setIsReconnecting(false);
                                         reconnectRunIdRef.current = null;
-                                        window.dispatchEvent(new CustomEvent("builder.chatRunning", {
+                                        window.dispatchEvent(new CustomEvent("agentNative.chatRunning", {
                                             detail: { isRunning: false, tabId: tabId || threadId },
                                         }));
                                     }
@@ -1139,13 +1146,13 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         let cancelled = false;
         const check = async () => {
             const [envKeys, builderStatus, engineStatus] = await Promise.all([
-                fetch("/_agent-native/env-status")
+                fetch(agentNativePath("/_agent-native/env-status"))
                     .then((r) => (r.ok ? r.json() : null))
                     .catch(() => null),
-                fetch("/_agent-native/builder/status")
+                fetch(agentNativePath("/_agent-native/builder/status"))
                     .then((r) => (r.ok ? r.json() : null))
                     .catch(() => null),
-                fetch("/_agent-native/agent-engine/status")
+                fetch(agentNativePath("/_agent-native/agent-engine/status"))
                     .then((r) => (r.ok ? r.json() : null))
                     .catch(() => null),
             ]);
@@ -1179,18 +1186,6 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         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) => {
@@ -1257,6 +1252,9 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     }, [isReconnecting, forceStopped]);
     const addToQueue = useCallback((text, images, references) => {
         setShowContinue(false);
+        // Selection context attached via Cmd+I is one-shot — clear it as soon
+        // as the user actually sends a message so it can't be re-used.
+        clearPendingSelection();
         if (isRunning) {
             setQueuedMessages((prev) => [
                 ...prev,
@@ -1359,7 +1357,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                     ? "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", {
+                                                        await fetch(agentNativePath("/_agent-native/auth/logout"), {
                                                             method: "POST",
                                                         });
                                                     }
@@ -1368,7 +1366,7 @@ 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, 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: () => {
+                                                }, 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 }) })) : 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 }],
@@ -1385,7 +1383,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                             .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, disabled: missingApiKey, placeholder: missingApiKey
+                                    })] })) }), 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(SelectionAttachedPill, {}), _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, disabled: missingApiKey, placeholder: missingApiKey
                                             ? "Connect an AI engine above to start chatting…"
                                             : isRunning
                                                 ? queuedMessages.length > 0
@@ -1393,7 +1391,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                     : "Queue a message..."
                                                 : undefined, onSubmit: isRunning
                                             ? (text, references) => addToQueue(text, undefined, references.length > 0 ? references : undefined)
-                                            : undefined, onSlashCommand: onSlashCommand, execMode: execMode, onExecModeChange: onExecModeChange, selectedModel: selectedModel ?? defaultModel, availableModels: availableModels, onModelChange: onModelChange, extraActionButton: showRunningInUI ? (_jsx("button", { type: "button", onClick: () => {
+                                            : undefined, onSlashCommand: onSlashCommand, execMode: execMode, onExecModeChange: onExecModeChange, selectedModel: selectedModel ?? defaultModel, availableModels: availableModels, onModelChange: onModelChange, draftScope: threadId || tabId, 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.
@@ -1409,7 +1407,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                     setReconnectFrozen(reconnectContent.length > 0);
                                                 }
                                                 threadRuntime.cancelRun();
-                                                window.dispatchEvent(new CustomEvent("builder.chatRunning", {
+                                                window.dispatchEvent(new CustomEvent("agentNative.chatRunning", {
                                                     detail: {
                                                         isRunning: false,
                                                         tabId: tabId || threadId,
@@ -1417,7 +1415,7 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                 }));
                                             }, 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) {
+export const AssistantChat = forwardRef(function AssistantChat({ apiUrl = agentNativePath("/_agent-native/agent-chat"), tabId, threadId, ...props }, ref) {
     const modelRef = useRef(props.selectedModel);
     modelRef.current = props.selectedModel;
     const engineRef = useRef(props.selectedEngine);