@agent-native/core 0.7.7 → 0.7.11

package/dist/client/AssistantChat.js

@@ -11,8 +11,9 @@ import { cn } from "./utils.js";
 import { AgentTaskCard } from "./AgentTaskCard.js";
 import { ConnectBuilderCard } from "./ConnectBuilderCard.js";
 import { IframeEmbed, parseEmbedBody } from "./IframeEmbed.js";
+import { useDevMode } from "./use-dev-mode.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, } 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, } from "@tabler/icons-react";
 // ─── Markdown Text ──────────────────────────────────────────────────────────
 const markdownStyles = `
 .agent-markdown > :first-child { margin-top: 0; }
@@ -449,14 +450,17 @@ function UserMessage() {
                                     Text: UserMessageText,
                                 } }) }), !expanded && isExpandable && (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-14 rounded-b-lg bg-gradient-to-t from-accent via-accent/90 to-transparent" }))] }), isExpandable && (_jsxs("button", { type: "button", onClick: () => setExpanded((prev) => !prev), className: "mt-1 inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: [_jsx(IconChevronDown, { className: cn("h-3.5 w-3.5 transition-transform", expanded && "rotate-180") }), expanded ? "Collapse" : "Expand"] }))] }) }));
 }
+const CheckpointContext = React.createContext(null);
 function AssistantMessage() {
     const [copied, setCopied] = useState(false);
+    const [restoreState, setRestoreState] = useState("idle");
     const messageRuntime = useMessageRuntime();
     const thread = useThread();
     const msg = messageRuntime.getState();
     const isLast = thread.messages.length > 0 &&
         thread.messages[thread.messages.length - 1].id === msg.id;
     const isComplete = !isLast || !thread.isRunning;
+    const cpCtx = React.useContext(CheckpointContext);
     const handleCopy = useCallback(() => {
         const m = messageRuntime.getState();
         const text = m.content
@@ -467,12 +471,56 @@ function AssistantMessage() {
         setCopied(true);
         setTimeout(() => setCopied(false), 2000);
     }, [messageRuntime]);
+    const handleRestore = useCallback(async () => {
+        if (restoreState === "idle") {
+            setRestoreState("confirming");
+            return;
+        }
+        if (restoreState !== "confirming" || !cpCtx)
+            return;
+        setRestoreState("restoring");
+        try {
+            const m = messageRuntime.getState();
+            const runId = m.metadata?.runId;
+            if (!runId) {
+                setRestoreState("idle");
+                return;
+            }
+            // Look up checkpoint by runId
+            const tid = cpCtx.threadId || "";
+            const res = await fetch(`${cpCtx.apiUrl}/checkpoints?threadId=${encodeURIComponent(tid)}`);
+            const checkpoints = res.ok ? await res.json() : [];
+            const checkpoint = checkpoints.find((cp) => cp.runId === runId);
+            if (!checkpoint) {
+                setRestoreState("idle");
+                return;
+            }
+            const restoreRes = await fetch(`${cpCtx.apiUrl}/checkpoints/restore`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ checkpointId: checkpoint.id }),
+            });
+            if (restoreRes.ok) {
+                window.location.reload();
+            }
+            else {
+                setRestoreState("idle");
+            }
+        }
+        catch {
+            setRestoreState("idle");
+        }
+    }, [restoreState, cpCtx, messageRuntime]);
+    const cancelRestore = useCallback(() => {
+        setRestoreState("idle");
+    }, []);
+    const showRestore = cpCtx?.devMode && isComplete && !isLast;
     return (_jsxs("div", { className: "group relative", style: { contentVisibility: isComplete ? "auto" : "visible" }, children: [_jsx("div", { className: "max-w-[95%] text-sm leading-relaxed text-foreground", children: _jsx(MessagePrimitive.Parts, { components: {
                         Text: MarkdownText,
                         tools: {
                             Fallback: ToolCallFallback,
                         },
-                    } }) }), isComplete && (_jsx("div", { className: "mt-1 flex items-center gap-0.5 opacity-0 group-hover:opacity-100", children: _jsx("button", { onClick: handleCopy, className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: copied ? (_jsx(IconCheck, { className: "h-3 w-3" })) : (_jsx(IconCopy, { className: "h-3 w-3" })) }) }))] }));
+                    } }) }), isComplete && (_jsxs("div", { className: "mt-1 flex items-center gap-0.5 opacity-0 group-hover:opacity-100", children: [_jsx("button", { onClick: handleCopy, className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: copied ? (_jsx(IconCheck, { className: "h-3 w-3" })) : (_jsx(IconCopy, { className: "h-3 w-3" })) }), 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..."] }))] }))] }));
 }
 // ─── Thinking Indicator ─────────────────────────────────────────────────────
 function ThinkingIndicator({ label = "Thinking" } = {}) {
@@ -500,7 +548,7 @@ function ApiKeySetupCard({ apiUrl }) {
             const res = await fetch(`${apiUrl}/save-key`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ key: apiKey.trim() }),
+                body: JSON.stringify({ key: apiKey.trim(), provider: "anthropic" }),
             });
             if (!res.ok) {
                 const data = await res.json().catch(() => ({}));
@@ -519,13 +567,13 @@ 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(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) => {
+    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" }) }), _jsx("h3", { className: "text-sm font-medium text-foreground", children: "Connect your AI" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-3 rounded-md border border-border px-3 py-3", 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 max-w-[200px]", children: "Managed LLM, hosting, and more \u2014 no API key needed" })] }), _jsxs("a", { href: "https://forms.agent-native.com/f/builder-waitlist/36GWqf", target: "_blank", rel: "noopener noreferrer", className: "ml-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-muted/60 px-3 py-1.5 text-[11px] font-medium no-underline text-foreground hover:bg-muted", children: ["Join waitlist", _jsx(IconExternalLink, { size: 10 })] })] }), _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" })] }), _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" })] })] }));
+                        }, 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", }) {
@@ -546,7 +594,7 @@ export function BuilderCtaCard({ reason, usageCents, limitCents, apiUrl = "/_age
             const res = await fetch(`${apiUrl}/save-key`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ key: apiKey.trim() }),
+                body: JSON.stringify({ key: apiKey.trim(), provider: "anthropic" }),
             });
             if (!res.ok) {
                 const data = await res.json().catch(() => ({}));
@@ -581,7 +629,7 @@ export function BuilderCtaCard({ reason, usageCents, limitCents, apiUrl = "/_age
                         }, 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" })] }) })] })] }));
+                        }, 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 })] }), _jsxs("div", { className: "rounded-md border border-border px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Builder.io" }), _jsxs("a", { href: "https://forms.agent-native.com/f/builder-waitlist/36GWqf", target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 shrink-0 rounded border border-border px-2 py-0.5 text-[10px] font-medium no-underline text-muted-foreground hover:text-foreground hover:bg-accent/40", children: ["Join waitlist", _jsx(IconExternalLink, { size: 10 })] })] }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: "Managed hosting, LLM, and more" })] })] })] }));
 }
 export const CHAT_STORAGE_PREFIX = "agent-chat:";
 /** Remove persisted chat for a given tabId (or "default"). */
@@ -611,7 +659,7 @@ function ensureMessageMetadata(repo) {
 // Re-export for backwards compatibility
 import { extractThreadMeta } from "../agent/thread-data-builder.js";
 export { extractThreadMeta };
-const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, showHeader = true, onSwitchToCli, className, apiUrl, tabId, threadId, onMessageCountChange, onSaveThread, onGenerateTitle, composerSlot, isNewThread, onSlashCommand, execMode, onExecModeChange, }, ref) {
+const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, showHeader = true, onSwitchToCli, className, apiUrl, tabId, threadId, onMessageCountChange, onSaveThread, onGenerateTitle, composerSlot, isNewThread, onSlashCommand, execMode, onExecModeChange, selectedModel, defaultModel, selectedEngine, availableModels, onModelChange, }, ref) {
     const scrollRef = useRef(null);
     const thread = useThread();
     const threadRuntime = useThreadRuntime();
@@ -1009,6 +1057,30 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         window.addEventListener("agent-chat:missing-api-key", handler);
         return () => window.removeEventListener("agent-chat:missing-api-key", handler);
     }, []);
+    // Proactively check if any LLM API key is configured on mount.
+    // Without this, users see suggestions and only discover the key is missing
+    // after their first message fails.
+    useEffect(() => {
+        if (missingApiKey)
+            return;
+        Promise.all([
+            fetch("/_agent-native/env-status")
+                .then((r) => (r.ok ? r.json() : []))
+                .catch(() => []),
+            fetch("/_agent-native/builder/status")
+                .then((r) => (r.ok ? r.json() : null))
+                .catch(() => null),
+        ]).then(([envKeys, builderStatus]) => {
+            const keys = envKeys;
+            const llmKeys = keys.filter((k) => k.key === "ANTHROPIC_API_KEY" ||
+                k.key === "OPENAI_API_KEY" ||
+                k.key === "GOOGLE_GENERATIVE_AI_API_KEY");
+            const anyConfigured = llmKeys.some((k) => k.configured) || builderStatus?.configured === true;
+            if (!anyConfigured && llmKeys.length > 0) {
+                setMissingApiKey(true);
+            }
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
     // Listen for auth error events from the adapter
     useEffect(() => {
         const handler = (e) => {
@@ -1191,68 +1263,74 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         }, 100);
         return () => clearInterval(interval);
     }, [isRunning]);
-    return (_jsx(ChatRunningContext.Provider, { value: isRunning, children: _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, 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: "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, { label: isReconnecting ? "Reconnecting" : "Thinking" })), 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, 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) {
-                                            if (reconnectRunIdRef.current) {
-                                                fetch(`${apiUrl}/runs/${encodeURIComponent(reconnectRunIdRef.current)}/abort`, { method: "POST" });
+    const { isDevMode: cpDevMode } = useDevMode(apiUrl);
+    const checkpointCtx = useMemo(() => ({ apiUrl, devMode: cpDevMode, threadId }), [apiUrl, cpDevMode, threadId]);
+    return (_jsx(CheckpointContext.Provider, { value: checkpointCtx, children: _jsx(ChatRunningContext.Provider, { value: isRunning, children: _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, 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: "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, { label: isReconnecting ? "Reconnecting" : "Thinking" })), 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, selectedModel: selectedModel ?? defaultModel, availableModels: availableModels, onModelChange: onModelChange, 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) {
+                                                if (reconnectRunIdRef.current) {
+                                                    fetch(`${apiUrl}/runs/${encodeURIComponent(reconnectRunIdRef.current)}/abort`, { method: "POST" });
+                                                }
+                                                reconnectAbortRef.current?.abort();
+                                                reconnectAbortRef.current = null;
+                                                reconnectRunIdRef.current = null;
+                                                setIsReconnecting(false);
+                                                setReconnectFrozen(reconnectContent.length > 0);
                                             }
-                                            reconnectAbortRef.current?.abort();
-                                            reconnectAbortRef.current = null;
-                                            reconnectRunIdRef.current = null;
-                                            setIsReconnecting(false);
-                                            setReconnectFrozen(reconnectContent.length > 0);
-                                        }
-                                        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-muted text-foreground hover:bg-muted/80", title: "Stop generating", children: _jsx(IconPlayerStop, { className: "h-3.5 w-3.5" }) })) : undefined })] }) })] }) }));
+                                            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-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]);
+    const modelRef = useRef(props.selectedModel);
+    modelRef.current = props.selectedModel;
+    const engineRef = useRef(props.selectedEngine);
+    engineRef.current = props.selectedEngine;
+    const adapter = useMemo(() => createAgentChatAdapter({ apiUrl, tabId, threadId, modelRef, engineRef }), [apiUrl, tabId, threadId]);
     const attachmentAdapter = useMemo(() => new CompositeAttachmentAdapter([
         new SimpleImageAttachmentAdapter(),
         new SimpleTextAttachmentAdapter(),