@agent-native/core 0.7.19 → 0.7.21

package/dist/client/AssistantChat.js

@@ -16,8 +16,9 @@ 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 { BUILDER_SPACE_SETTINGS_URL } from "./error-format.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, IconQuote, } 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, IconGauge, IconArrowRight, IconSettings, IconAlertTriangle, IconRefresh, IconPlayerPlay, } from "@tabler/icons-react";
 const ThumbsFeedbackLazy = React.lazy(() => import("./observability/ThumbsFeedback.js").then((m) => ({
     default: m.ThumbsFeedback,
 })));
@@ -46,6 +47,7 @@ const markdownStyles = `
 @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 a.agent-markdown-cta { text-decoration: none; }
 .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 hsl(var(--border, 0 0% 20%)); padding: 0.35em 0.65em; text-align: left; }
@@ -219,6 +221,14 @@ function HighlightedCodeBlock({ code, lang }) {
     return (_jsx("pre", { children: _jsx("code", { className: lang ? `language-${lang}` : undefined, children: code }) }));
 }
 const markdownComponents = {
+    a(props) {
+        const { href, children, className, rel: _rel, target: _target, ...rest } = props;
+        const isBuilderCta = isBuilderErrorCtaHref(href);
+        if (!isBuilderCta) {
+            return (_jsx("a", { href: href, className: className, ...rest, children: children }));
+        }
+        return (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", className: cn("agent-markdown-cta mt-1 inline-flex items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background no-underline shadow-sm transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", className), ...rest, children: [_jsx("span", { children: children }), _jsx(IconExternalLink, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] }));
+    },
     pre(props) {
         const { children, ...rest } = props;
         if (React.isValidElement(children)) {
@@ -238,6 +248,22 @@ const markdownComponents = {
         return _jsx("pre", { ...rest, children: children });
     },
 };
+function isBuilderErrorCtaHref(href) {
+    if (!href)
+        return false;
+    try {
+        const url = new URL(href);
+        if (url.protocol !== "https:" || url.hostname !== "builder.io") {
+            return false;
+        }
+        return (url.href === BUILDER_SPACE_SETTINGS_URL ||
+            url.pathname === "/account/billing" ||
+            /^\/app\/organizations\/[^/]+\/billing$/.test(url.pathname));
+    }
+    catch {
+        return false;
+    }
+}
 function MarkdownText() {
     useEffect(() => {
         injectMarkdownStyles();
@@ -585,10 +611,11 @@ function AssistantMessage() {
     const [restoreState, setRestoreState] = useState("idle");
     const messageRuntime = useMessageRuntime();
     const thread = useThread();
+    const chatRunning = React.useContext(ChatRunningContext);
     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 isComplete = !isLast || !chatRunning;
     const cpCtx = React.useContext(CheckpointContext);
     const handleRestore = useCallback(async () => {
         if (restoreState === "idle") {
@@ -641,14 +668,13 @@ function AssistantMessage() {
                         tools: {
                             Fallback: ToolCallFallback,
                         },
-                    } }) }), _jsxs("div", { className: "mt-1 flex items-center justify-between", children: [_jsx(MessageActionsMenu, { showRevert: showRestore && restoreState === "idle", onRevert: handleRestore }), isComplete &&
-                        (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: (() => {
-                                    const meta = messageRuntime.getState().metadata;
-                                    return ((typeof meta?.custom?.runId === "string" &&
-                                        meta.custom.runId) ||
-                                        (typeof meta?.runId === "string" && meta.runId) ||
-                                        "");
-                                })(), messageSeq: thread.messages.findIndex((m) => m.id === msg.id) }) })))] })] }));
+                    } }) }), 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: (() => {
+                                const meta = messageRuntime.getState().metadata;
+                                return ((typeof meta?.custom?.runId === "string" &&
+                                    meta.custom.runId) ||
+                                    (typeof meta?.runId === "string" && meta.runId) ||
+                                    "");
+                            })(), messageSeq: thread.messages.findIndex((m) => m.id === msg.id) }) }))] }))] }));
 }
 // ─── Thinking Indicator ─────────────────────────────────────────────────────
 function ThinkingIndicator({ label = "Thinking" } = {}) {
@@ -730,6 +756,163 @@ 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" }) })] })] }));
 }
+function getLoopLimitMetadata(message) {
+    const meta = message?.metadata;
+    const loopLimit = meta?.custom?.loopLimit ?? meta?.loopLimit;
+    if (!loopLimit || typeof loopLimit !== "object")
+        return null;
+    return {
+        ...(typeof loopLimit.maxIterations === "number"
+            ? { maxIterations: loopLimit.maxIterations }
+            : {}),
+    };
+}
+function getRunErrorMetadata(message) {
+    const meta = message?.metadata;
+    const runError = meta?.custom?.runError ?? meta?.runError;
+    if (!runError || typeof runError !== "object")
+        return null;
+    const messageText = typeof runError.message === "string" ? runError.message : "";
+    if (!messageText)
+        return null;
+    const runId = typeof runError.runId === "string"
+        ? runError.runId
+        : typeof meta?.custom?.runId === "string"
+            ? meta.custom.runId
+            : typeof meta?.runId === "string"
+                ? meta.runId
+                : undefined;
+    return {
+        message: messageText,
+        ...(typeof runError.details === "string"
+            ? { details: runError.details }
+            : {}),
+        ...(typeof runError.errorCode === "string"
+            ? { errorCode: runError.errorCode }
+            : {}),
+        ...(runId ? { runId } : {}),
+        ...(runError.recoverable ? { recoverable: true } : {}),
+    };
+}
+function getMessageText(message) {
+    const msg = message?.message ?? message;
+    const content = msg?.content;
+    if (Array.isArray(content)) {
+        return content
+            .filter((p) => p?.type === "text" && typeof p.text === "string")
+            .map((p) => p.text)
+            .join("\n")
+            .trim();
+    }
+    return typeof content === "string" ? content.trim() : "";
+}
+function RunErrorRecoveryCard({ info, onContinue, onRetry, onFork, onDismiss, }) {
+    const [detailsOpen, setDetailsOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const copyDetails = useCallback(() => {
+        const text = [
+            info.message,
+            info.errorCode ? `Code: ${info.errorCode}` : "",
+            info.runId ? `Run: ${info.runId}` : "",
+            info.details ? `Details:\n${info.details}` : "",
+        ]
+            .filter(Boolean)
+            .join("\n\n");
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1200);
+    }, [info]);
+    return (_jsxs("div", { className: "rounded-lg border border-amber-500/25 bg-amber-500/[0.06] p-3 text-sm", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-500/10 text-amber-700 dark:text-amber-300", children: _jsx(IconAlertTriangle, { size: 14 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium text-foreground", children: "The agent stopped before finishing" }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: info.message }), (info.runId || info.errorCode || info.details) && (_jsxs("button", { type: "button", onClick: () => setDetailsOpen((v) => !v), className: "mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: [_jsx(IconChevronDown, { size: 12, className: cn("transition-transform", detailsOpen && "rotate-180") }), "Details"] })), detailsOpen && (_jsxs("div", { className: "mt-2 rounded-md border border-border/60 bg-background/70 p-2 font-mono text-[11px] leading-relaxed text-muted-foreground", children: [info.runId && _jsxs("div", { children: ["run: ", info.runId] }), info.errorCode && _jsxs("div", { children: ["code: ", info.errorCode] }), info.details && (_jsx("pre", { className: "mt-2 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono", children: info.details }))] }))] }), _jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss", className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-background/80 hover:text-foreground", children: _jsx(IconX, { size: 14 }) })] }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onContinue, className: "inline-flex h-8 items-center gap-1.5 rounded-md bg-foreground px-3 text-xs font-medium text-background hover:opacity-90", children: [_jsx(IconPlayerPlay, { size: 13 }), "Continue"] }), _jsxs("button", { type: "button", onClick: onRetry, className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground hover:bg-accent", children: [_jsx(IconRefresh, { size: 13 }), "Retry"] }), onFork && (_jsxs("button", { type: "button", onClick: onFork, className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground hover:bg-accent", children: [_jsx(IconGitFork, { size: 13 }), "Fork"] })), _jsxs("button", { type: "button", onClick: copyDetails, className: "ml-auto inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium text-muted-foreground hover:bg-background/80 hover:text-foreground", children: [copied ? _jsx(IconCheck, { size: 13 }) : _jsx(IconCopy, { size: 13 }), copied ? "Copied" : "Copy"] })] })] }));
+}
+function LoopLimitContinueCard({ info, onContinue, }) {
+    const [settings, setSettings] = useState(null);
+    const [value, setValue] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [error, setError] = useState(null);
+    const load = useCallback(() => {
+        let cancelled = false;
+        fetch(agentNativePath("/_agent-native/agent-loop-settings"))
+            .then((r) => (r.ok ? r.json() : null))
+            .then((data) => {
+            if (cancelled || !data)
+                return;
+            setSettings(data);
+            setValue(String(data.maxIterations));
+        })
+            .catch(() => {
+            if (!cancelled)
+                setValue(String(info.maxIterations ?? ""));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [info.maxIterations]);
+    useEffect(() => load(), [load]);
+    const currentLimit = settings?.maxIterations ?? info.maxIterations;
+    const numericValue = Number(value);
+    const hasPendingChange = !!settings &&
+        settings.canUpdate &&
+        Number.isInteger(numericValue) &&
+        numericValue !== settings.maxIterations;
+    const scopeLabel = settings?.scope === "org"
+        ? settings.orgName
+            ? `${settings.orgName} org`
+            : "org"
+        : "your account";
+    const saveLimit = useCallback(async () => {
+        if (!settings?.canUpdate)
+            return false;
+        setSaving(true);
+        setSaved(false);
+        setError(null);
+        try {
+            const res = await fetch(agentNativePath("/_agent-native/agent-loop-settings"), {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ maxIterations: numericValue }),
+            });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(body?.error ?? `Save failed (${res.status})`);
+            }
+            setSettings(body);
+            setValue(String(body.maxIterations));
+            setSaved(true);
+            window.dispatchEvent(new CustomEvent("agent-loop-settings:changed", { detail: body }));
+            setTimeout(() => setSaved(false), 2000);
+            return true;
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Save failed");
+            return false;
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [numericValue, settings?.canUpdate]);
+    const handleContinue = useCallback(async () => {
+        if (hasPendingChange) {
+            const ok = await saveLimit();
+            if (!ok)
+                return;
+        }
+        onContinue();
+    }, [hasPendingChange, onContinue, saveLimit]);
+    const openSettings = useCallback(() => {
+        try {
+            window.location.hash = "agent-limits";
+        }
+        catch { }
+        window.dispatchEvent(new CustomEvent("agent-panel:open-settings"));
+    }, []);
+    return (_jsxs("div", { className: "rounded-lg border border-amber-500/25 bg-amber-500/[0.06] px-3 py-3 shadow-sm", children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("span", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-amber-500/10 text-amber-600 dark:text-amber-400", children: _jsx(IconGauge, { size: 14 }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Step limit reached" }), _jsxs("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: ["The agent used", " ", currentLimit
+                                        ? `${currentLimit.toLocaleString()} steps`
+                                        : "all available steps", ". Keep going in a fresh turn, or raise the ", scopeLabel, " limit first."] })] })] }), _jsxs("div", { className: "mt-3 flex flex-wrap items-end gap-2", children: [_jsxs("label", { className: "min-w-[116px] flex-1 space-y-1", children: [_jsx("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Max steps" }), _jsx("input", { type: "number", min: settings?.minMaxIterations ?? 1, max: settings?.maxMaxIterations ?? 1000, value: value, disabled: !settings?.canUpdate || saving, onChange: (e) => {
+                                    setValue(e.target.value);
+                                    setError(null);
+                                }, className: "h-8 w-full rounded-md border border-border bg-background px-2 text-xs text-foreground outline-none focus:ring-1 focus:ring-ring disabled:opacity-60" })] }), _jsx("button", { type: "button", onClick: saveLimit, disabled: !hasPendingChange || saving, className: "inline-flex h-8 items-center gap-1 rounded-md border border-border px-2.5 text-xs font-medium text-foreground hover:bg-accent disabled:opacity-50", children: saving ? (_jsx(IconLoader2, { size: 12, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 12 })) : ("Save") }), _jsxs("button", { type: "button", onClick: openSettings, className: "inline-flex h-8 items-center gap-1 rounded-md border border-border px-2.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground", children: [_jsx(IconSettings, { size: 12 }), "Settings"] }), _jsxs("button", { type: "button", onClick: handleContinue, disabled: saving, className: "ml-auto inline-flex h-8 items-center gap-1 rounded-md bg-foreground px-3 text-xs font-medium text-background hover:opacity-90 disabled:opacity-60", children: [hasPendingChange ? "Save and keep going" : "Keep going", _jsx(IconArrowRight, { size: 12 })] })] }), settings && !settings.canUpdate && (_jsx("p", { className: "mt-2 text-[11px] text-muted-foreground", children: "Only organization owners and admins can change this limit." })), error && _jsx("p", { className: "mt-2 text-[11px] text-destructive", children: error })] }));
+}
 export const CHAT_STORAGE_PREFIX = "agent-chat:";
 /** Remove persisted chat for a given tabId (or "default"). */
 export function clearChatStorage(tabId) {
@@ -778,6 +961,9 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     // on mount, or queue state that hasn't actually changed).
     const lastPersistedQueueRef = useRef("[]");
     const [showContinue, setShowContinue] = useState(false);
+    const [loopLimitInfo, setLoopLimitInfo] = useState(null);
+    const [runErrorInfo, setRunErrorInfo] = useState(null);
+    const [dismissedRunErrorKey, setDismissedRunErrorKey] = useState(null);
     const [isReconnecting, setIsReconnecting] = useState(false);
     const [reconnectContent, setReconnectContent] = useState([]);
     // When stop is clicked during reconnect, keep content visible (don't wipe it)
@@ -1212,12 +1398,36 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         const handler = (e) => {
             const detail = e.detail;
             if (!tabId || detail?.tabId === tabId) {
+                setLoopLimitInfo({
+                    ...(typeof detail?.maxIterations === "number"
+                        ? { maxIterations: detail.maxIterations }
+                        : {}),
+                });
                 setShowContinue(true);
             }
         };
         window.addEventListener("agent-chat:loop-limit", handler);
         return () => window.removeEventListener("agent-chat:loop-limit", handler);
     }, [tabId]);
+    useEffect(() => {
+        const handler = (e) => {
+            const detail = e.detail;
+            if (tabId && detail?.tabId && detail.tabId !== tabId)
+                return;
+            if (!detail?.message)
+                return;
+            setRunErrorInfo({
+                message: detail.message,
+                ...(detail.details ? { details: detail.details } : {}),
+                ...(detail.errorCode ? { errorCode: detail.errorCode } : {}),
+                ...(detail.runId ? { runId: detail.runId } : {}),
+                ...(detail.recoverable ? { recoverable: detail.recoverable } : {}),
+            });
+            setDismissedRunErrorKey(null);
+        };
+        window.addEventListener("agent-chat:run-error", handler);
+        return () => window.removeEventListener("agent-chat:run-error", handler);
+    }, [tabId]);
     // Auto-dequeue: when agent finishes running, send the next queued message
     useEffect(() => {
         if (wasRunningRef.current && !isRunning && queuedMessages.length > 0) {
@@ -1273,6 +1483,9 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     }, [isReconnecting, forceStopped]);
     const addToQueue = useCallback((text, images, references) => {
         setShowContinue(false);
+        setLoopLimitInfo(null);
+        setRunErrorInfo(null);
+        setDismissedRunErrorKey(null);
         // 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();
@@ -1374,6 +1587,35 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
     const { isDevMode: cpDevMode } = useDevMode(apiUrl);
     const checkpointCtx = useMemo(() => ({ apiUrl, devMode: cpDevMode, threadId }), [apiUrl, cpDevMode, threadId]);
     const messageActionsCtx = useMemo(() => ({ onForkChat }), [onForkChat]);
+    const lastMessageLoopLimit = useMemo(() => {
+        const last = messages[messages.length - 1];
+        if (!last || last.role !== "assistant")
+            return null;
+        return getLoopLimitMetadata(last);
+    }, [messages]);
+    const lastMessageRunError = useMemo(() => {
+        const last = messages[messages.length - 1];
+        if (!last || last.role !== "assistant")
+            return null;
+        return getRunErrorMetadata(last);
+    }, [messages]);
+    const lastUserText = useMemo(() => {
+        for (let i = messages.length - 1; i >= 0; i--) {
+            if (messages[i]?.role === "user")
+                return getMessageText(messages[i]);
+        }
+        return "";
+    }, [messages]);
+    const visibleLoopLimit = showContinue
+        ? (loopLimitInfo ?? lastMessageLoopLimit ?? {})
+        : lastMessageLoopLimit;
+    const visibleRunError = runErrorInfo ?? lastMessageRunError;
+    const visibleRunErrorKey = visibleRunError
+        ? `${visibleRunError.runId ?? ""}:${visibleRunError.errorCode ?? ""}:${visibleRunError.message}`
+        : null;
+    const shouldShowRunError = !!visibleRunError &&
+        !showRunningInUI &&
+        visibleRunErrorKey !== dismissedRunErrorKey;
     return (_jsx(CheckpointContext.Provider, { value: checkpointCtx, children: _jsx(MessageActionsContext.Provider, { value: messageActionsCtx, 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 () => {
@@ -1395,16 +1637,31 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                             }, className: "w-full rounded-lg border border-border px-3 py-2 text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground", children: suggestion }, suggestion))) }))] })) : (_jsxs("div", { className: "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) &&
+                                        } }), visibleLoopLimit && !showRunningInUI && (_jsx(LoopLimitContinueCard, { info: visibleLoopLimit, onContinue: () => {
+                                            setShowContinue(false);
+                                            setLoopLimitInfo(null);
+                                            addToQueue("Continue from where you left off.");
+                                        } })), shouldShowRunError && visibleRunError && (_jsx(RunErrorRecoveryCard, { info: visibleRunError, onContinue: () => {
+                                            setRunErrorInfo(null);
+                                            addToQueue("Continue from where you stopped. Use the partial work above, verify what succeeded, and finish the original request. Prefer dedicated app actions over raw database edits when they exist.");
+                                        }, onRetry: () => {
+                                            setRunErrorInfo(null);
+                                            addToQueue(lastUserText
+                                                ? `Retry the previous request from a clean approach. Original request:\n\n${lastUserText}`
+                                                : "Retry the previous request from a clean approach.");
+                                        }, onFork: onForkChat, onDismiss: () => {
+                                            if (visibleRunErrorKey) {
+                                                setDismissedRunErrorKey(visibleRunErrorKey);
+                                            }
+                                            setRunErrorInfo(null);
+                                        } })), (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(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
+                                    })] })) }), 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: cn("flex flex-col rounded-lg border border-input bg-background focus-within:ring-1 focus-within:ring-ring", execMode === "plan" &&
+                                    "border-amber-500/50 bg-amber-500/[0.03] focus-within:ring-amber-500/30"), children: [_jsx(ComposerAttachmentPreviewStrip, {}), _jsx(TiptapComposer, { focusRef: tiptapRef, disabled: missingApiKey, placeholder: missingApiKey
                                             ? "Connect an AI engine above to start chatting…"
                                             : isRunning
                                                 ? queuedMessages.length > 0
@@ -1417,10 +1674,12 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
                                                 // immediately. This unblocks submission even if the
                                                 // runtime or reconnect state is stuck.
                                                 setForceStopped(true);
+                                                const activeRun = getActiveRun();
+                                                const runIdToAbort = reconnectRunIdRef.current ?? activeRun?.runId;
+                                                if (runIdToAbort) {
+                                                    fetch(`${apiUrl}/runs/${encodeURIComponent(runIdToAbort)}/abort`, { method: "POST" }).catch(() => { });
+                                                }
                                                 if (isReconnecting) {
-                                                    if (reconnectRunIdRef.current) {
-                                                        fetch(`${apiUrl}/runs/${encodeURIComponent(reconnectRunIdRef.current)}/abort`, { method: "POST" });
-                                                    }
                                                     reconnectAbortRef.current?.abort();
                                                     reconnectAbortRef.current = null;
                                                     reconnectRunIdRef.current = null;