@agent-native/core 0.7.4 → 0.7.7

package/dist/client/AssistantChat.js

@@ -26,15 +26,22 @@ 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: var(--color-muted, hsl(0 0% 15%)); }
-.agent-markdown pre { margin: 0.5em 0; padding: 0.75em 1em; border-radius: 0.375em; background: var(--color-muted, hsl(0 0% 15%)); overflow-x: auto; }
-.agent-markdown pre code { padding: 0; background: transparent; font-size: 0.8125em; }
-.agent-markdown hr { border: none; border-top: 1px solid var(--color-border, hsl(0 0% 20%)); margin: 0.75em 0; }
+.agent-markdown 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-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; }
+.agent-markdown-shiki pre span { color: var(--shiki-light); background: var(--shiki-light-bg); }
+.dark .agent-markdown-shiki pre { background: var(--shiki-dark-bg); color: var(--shiki-dark); }
+.dark .agent-markdown-shiki pre span { color: var(--shiki-dark); background: var(--shiki-dark-bg); }
+@media (prefers-color-scheme: dark) { :root:not(.light) .agent-markdown-shiki pre { background: var(--shiki-dark-bg); color: var(--shiki-dark); } :root:not(.light) .agent-markdown-shiki pre span { color: var(--shiki-dark); background: var(--shiki-dark-bg); } }
+.agent-markdown hr { border: none; border-top: 1px solid hsl(var(--border, 0 0% 20%)); margin: 0.75em 0; }
 .agent-markdown a { text-decoration: underline; text-underline-offset: 2px; }
-.agent-markdown blockquote { border-left: 2px solid var(--color-border, hsl(0 0% 20%)); padding-left: 0.75em; margin: 0.5em 0; opacity: 0.8; }
+.agent-markdown blockquote { border-left: 2px solid hsl(var(--border, 0 0% 20%)); padding-left: 0.75em; margin: 0.5em 0; opacity: 0.8; }
 .agent-markdown table { border-collapse: collapse; margin: 0.5em 0; font-size: 0.875em; }
-.agent-markdown th, .agent-markdown td { border: 1px solid var(--color-border, hsl(0 0% 20%)); padding: 0.35em 0.65em; text-align: left; }
-.agent-markdown th { font-weight: 600; background: var(--color-muted, hsl(0 0% 15%)); }
+.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%)); }
 `;
 let stylesInjected = false;
 function injectMarkdownStyles() {
@@ -56,6 +63,92 @@ function extractCodeText(child) {
     }
     return "";
 }
+let highlighterLoader = null;
+function loadHighlighter() {
+    if (!highlighterLoader) {
+        highlighterLoader = (async () => {
+            const [{ createHighlighterCore }, { createOnigurumaEngine }] = await Promise.all([
+                import("shiki/core"),
+                import("shiki/engine/oniguruma"),
+            ]);
+            return createHighlighterCore({
+                themes: [
+                    import("shiki/themes/github-light-default.mjs"),
+                    import("shiki/themes/github-dark-default.mjs"),
+                ],
+                langs: [
+                    import("shiki/langs/javascript.mjs"),
+                    import("shiki/langs/typescript.mjs"),
+                    import("shiki/langs/jsx.mjs"),
+                    import("shiki/langs/tsx.mjs"),
+                    import("shiki/langs/json.mjs"),
+                    import("shiki/langs/css.mjs"),
+                    import("shiki/langs/html.mjs"),
+                    import("shiki/langs/markdown.mjs"),
+                    import("shiki/langs/bash.mjs"),
+                    import("shiki/langs/shellscript.mjs"),
+                    import("shiki/langs/python.mjs"),
+                    import("shiki/langs/yaml.mjs"),
+                ],
+                engine: createOnigurumaEngine(import("shiki/wasm")),
+            });
+        })().catch((error) => {
+            // Reset on failure so a future code block can retry instead of
+            // silently failing forever on a stale chunk / network blip.
+            highlighterLoader = null;
+            throw error;
+        });
+    }
+    return highlighterLoader;
+}
+// Map a few common aliases to languages we bundled above.
+const LANG_ALIASES = {
+    js: "javascript",
+    ts: "typescript",
+    sh: "bash",
+    shell: "bash",
+    zsh: "bash",
+    py: "python",
+    yml: "yaml",
+    md: "markdown",
+};
+function HighlightedCodeBlock({ code, lang }) {
+    const [html, setHtml] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        loadHighlighter()
+            .then((highlighter) => {
+            const requested = (lang || "text").toLowerCase();
+            const resolved = LANG_ALIASES[requested] ?? requested;
+            const loaded = highlighter.getLoadedLanguages();
+            const finalLang = loaded.includes(resolved) ? resolved : "text";
+            return highlighter.codeToHtml(code, {
+                lang: finalLang,
+                themes: {
+                    light: "github-light-default",
+                    dark: "github-dark-default",
+                },
+                defaultColor: false,
+            });
+        })
+            .then((out) => {
+            if (!cancelled)
+                setHtml(out);
+        })
+            .catch(() => {
+            // Unknown language or other shiki failure — fall back to plain pre.
+            if (!cancelled)
+                setHtml(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [code, lang]);
+    if (html) {
+        return (_jsx("div", { className: "agent-markdown-shiki", dangerouslySetInnerHTML: { __html: html } }));
+    }
+    return (_jsx("pre", { children: _jsx("code", { className: lang ? `language-${lang}` : undefined, children: code }) }));
+}
 const markdownComponents = {
     pre(props) {
         const { children, ...rest } = props;
@@ -67,6 +160,11 @@ const markdownComponents = {
                 const parsed = parseEmbedBody(body);
                 return (_jsx(IframeEmbed, { ...parsed }));
             }
+            const langMatch = className.match(/\blanguage-([\w+-]+)\b/);
+            if (langMatch) {
+                const code = extractCodeText(childProps.children).replace(/\n$/, "");
+                return _jsx(HighlightedCodeBlock, { code: code, lang: langMatch[1] });
+            }
         }
         return _jsx("pre", { ...rest, children: children });
     },
@@ -115,6 +213,10 @@ function ComposerAttachmentPreviewStrip() {
         return null;
     return (_jsx("div", { className: "flex flex-wrap gap-2 px-2 pt-2", children: attachments.map((attachment) => (_jsx(ComposerAttachmentPreviewCard, { attachment: attachment, onRemove: handleRemove }, attachment.id))) }));
 }
+// Provides the parent's combined running state to tool-call renderers so they
+// can stop spinning when the user clicks stop. `thread.isRunning` alone misses
+// the force-stopped case; `part.result === undefined` alone ignores stop.
+const ChatRunningContext = React.createContext(false);
 // ─── Tool Call Display ──────────────────────────────────────────────────────
 // Shared presentational component for rendering a tool call pill + result.
 // Used by both the normal message path (ToolCallFallback) and the reconnect
@@ -191,8 +293,8 @@ function ToolCallDisplay({ toolName, argsText, args, result, isRunning, }) {
                     : JSON.stringify(result, null, 2) }))] }));
 }
 function ToolCallFallback({ toolName, args, argsText, result, }) {
-    const thread = useThread();
-    const isRunning = result === undefined && thread.isRunning;
+    const chatRunning = React.useContext(ChatRunningContext);
+    const isRunning = result === undefined && chatRunning;
     return (_jsx(ToolCallDisplay, { toolName: toolName, args: args, argsText: argsText, result: typeof result === "string"
             ? result
             : result !== undefined
@@ -204,6 +306,7 @@ function ToolCallFallback({ toolName, args, argsText, result, }) {
 // assistant-ui's runtime). Uses the same visual styling as normal messages.
 function ReconnectStreamMessage({ content }) {
     const endRef = useRef(null);
+    const chatRunning = React.useContext(ChatRunningContext);
     useEffect(() => {
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
     }, [content]);
@@ -212,7 +315,7 @@ function ReconnectStreamMessage({ content }) {
                         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}`));
+                        return (_jsx(ToolCallDisplay, { toolName: part.toolName, argsText: part.argsText, args: part.args, result: part.result, isRunning: part.result === undefined && chatRunning }, `reconnect-tool-${i}`));
                     }
                     return null;
                 }), _jsx("div", { ref: endRef })] }) }));
@@ -372,7 +475,7 @@ function AssistantMessage() {
                     } }) }), isComplete && (_jsx("div", { className: "mt-1 flex items-center gap-0.5 opacity-0 group-hover:opacity-100", children: _jsx("button", { onClick: handleCopy, className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground", children: copied ? (_jsx(IconCheck, { className: "h-3 w-3" })) : (_jsx(IconCopy, { className: "h-3 w-3" })) }) }))] }));
 }
 // ─── Thinking Indicator ─────────────────────────────────────────────────────
-function ThinkingIndicator() {
+function ThinkingIndicator({ label = "Thinking" } = {}) {
     const [dots, setDots] = useState(0);
     useEffect(() => {
         const interval = setInterval(() => {
@@ -380,7 +483,7 @@ function ThinkingIndicator() {
         }, 400);
         return () => clearInterval(interval);
     }, []);
-    return (_jsx("div", { className: "flex items-center text-muted-foreground", children: _jsxs("span", { className: "text-xs", children: ["Thinking", ".".repeat(dots)] }) }));
+    return (_jsx("div", { className: "flex items-center text-muted-foreground", children: _jsxs("span", { className: "text-xs", children: [label, ".".repeat(dots)] }) }));
 }
 // ─── API Key Setup Card ─────────────────────────────────────────────────────
 function ApiKeySetupCard({ apiUrl }) {
@@ -518,6 +621,10 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     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
+    // on mount, or queue state that hasn't actually changed).
+    const lastPersistedQueueRef = useRef("[]");
     const [showContinue, setShowContinue] = useState(false);
     const [isReconnecting, setIsReconnecting] = useState(false);
     const [reconnectContent, setReconnectContent] = useState([]);
@@ -567,6 +674,13 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                             titleGeneratedRef.current = true; // Don't re-generate for restored threads
                             threadRuntime.import(ensureMessageMetadata(repo));
                         }
+                        // Restore user-queued messages that were persisted before reload.
+                        if (Array.isArray(repo?.queuedMessages)) {
+                            setQueuedMessages(repo.queuedMessages);
+                            // Mark as restored so the debounced save effect doesn't write
+                            // the same data back to the server on mount.
+                            lastPersistedQueueRef.current = JSON.stringify(repo.queuedMessages);
+                        }
                     }
                     // Also skip title generation if thread already has a title
                     if (data.title) {
@@ -577,9 +691,19 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                         const runRes = await fetch(`${apiUrl}/runs/active?threadId=${encodeURIComponent(threadId)}`);
                         if (runRes.ok) {
                             const runInfo = await runRes.json();
-                            // If the run already completed, just re-fetch thread data
-                            // (don't enter "Thinking." reconnection mode)
-                            if (runInfo.status !== "running") {
+                            // Defense in depth: if the server says status="running" but the
+                            // heartbeat is stale (producer died before the server-side reap
+                            // sweep noticed), treat it as dead. 5s tolerates normal jitter
+                            // around the 1.5s heartbeat without false positives.
+                            const heartbeatAt = typeof runInfo.heartbeatAt === "number"
+                                ? runInfo.heartbeatAt
+                                : null;
+                            const looksStale = runInfo.status === "running" &&
+                                heartbeatAt != null &&
+                                Date.now() - heartbeatAt > 5000;
+                            // If the run already completed or looks stale, just re-fetch
+                            // thread data (don't enter "Thinking." reconnection mode).
+                            if (runInfo.status !== "running" || looksStale) {
                                 try {
                                     const refreshRes = await fetch(`${apiUrl}/threads/${encodeURIComponent(threadId)}`);
                                     if (refreshRes.ok) {
@@ -591,6 +715,10 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                             if (repo?.messages?.length > 0) {
                                                 threadRuntime.import(ensureMessageMetadata(repo));
                                             }
+                                            if (Array.isArray(repo?.queuedMessages)) {
+                                                setQueuedMessages(repo.queuedMessages);
+                                                lastPersistedQueueRef.current = JSON.stringify(repo.queuedMessages);
+                                            }
                                         }
                                     }
                                 }
@@ -610,12 +738,11 @@ 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.
+                                // Watchdog: poll /runs/active every 1s to detect when the run
+                                // is no longer running server-side, or the heartbeat has gone
+                                // stale (producer died). Aborts the SSE 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)}`);
@@ -625,7 +752,13 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                             return;
                                         }
                                         const info = await res.json();
-                                        if (info.status !== "running") {
+                                        const hb = typeof info.heartbeatAt === "number"
+                                            ? info.heartbeatAt
+                                            : null;
+                                        const stale = info.status === "running" &&
+                                            hb != null &&
+                                            Date.now() - hb > 5000;
+                                        if (info.status !== "running" || stale) {
                                             abortCtrl.abort();
                                             clearInterval(watchdog);
                                         }
@@ -633,15 +766,16 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                     catch {
                                         // Network blip — keep polling
                                     }
-                                }, 3000);
+                                }, 1000);
                                 // 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.
+                                // more than 20s. With the 1s watchdog + stale-heartbeat
+                                // detection + startup reap, this only triggers in truly
+                                // pathological cases. Keeps "Reconnecting…" from feeling
+                                // infinite.
                                 const maxReconnectTimer = setTimeout(() => {
                                     abortCtrl.abort();
                                     clearInterval(watchdog);
-                                }, 2 * 60 * 1000);
+                                }, 20_000);
                                 const streamReconnect = async () => {
                                     try {
                                         const sseRes = await fetch(`${apiUrl}/runs/${encodeURIComponent(runInfo.runId)}/events?after=0`, { signal: abortCtrl.signal });
@@ -839,6 +973,36 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     useEffect(() => {
         onMessageCountChange?.(messages.length);
     }, [messages.length, onMessageCountChange]);
+    // Persist queued messages to the server so they survive reloads. Debounced
+    // to 300ms so typing-and-queuing-rapidly doesn't hammer the endpoint.
+    // Stores them in thread_data.queuedMessages via POST /threads/:id/queued.
+    useEffect(() => {
+        if (!threadId)
+            return;
+        if (!hasRestoredRef.current)
+            return;
+        const serialized = JSON.stringify(queuedMessages);
+        if (serialized === lastPersistedQueueRef.current)
+            return;
+        const timer = setTimeout(() => {
+            (async () => {
+                try {
+                    const res = await fetch(`${apiUrl}/threads/${encodeURIComponent(threadId)}/queued`, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ queuedMessages }),
+                    });
+                    if (res.ok) {
+                        lastPersistedQueueRef.current = serialized;
+                    }
+                }
+                catch {
+                    // Best-effort — next queue change will retry.
+                }
+            })();
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [queuedMessages, threadId, apiUrl]);
     // Listen for missing API key events from the adapter
     useEffect(() => {
         const handler = () => setMissingApiKey(true);
@@ -1027,65 +1191,65 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         }, 100);
         return () => clearInterval(interval);
     }, [isRunning]);
-    return (_jsxs("div", { className: cn("flex flex-1 flex-col h-full min-h-0 text-foreground", className), children: [showHeader && (_jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between border-b border-border px-4", children: [_jsx("span", { className: "text-[13px] font-medium text-muted-foreground", children: "Agent" }), _jsx("div", { className: "flex items-center gap-1", children: onSwitchToCli && (_jsxs("button", { onClick: onSwitchToCli, className: "flex items-center gap-1 text-[12px] text-muted-foreground hover:text-foreground px-2 py-1 rounded-md hover:bg-accent", title: "Switch to CLI", children: [_jsx(IconTerminal, { className: "h-3.5 w-3.5" }), "CLI"] })) })] })), _jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto overflow-x-hidden min-h-0", children: 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, {}), 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" });
+    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" });
+                                            }
+                                            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]);