@agent-native/core 0.155.0 → 0.157.0

package/dist/client/chat/run-recovery.js

@@ -7,8 +7,8 @@ import { IconLoader2, IconCheck, IconCopy, IconX, IconChevronDown, IconGitFork,
 import { useState, useEffect, useCallback, useRef } from "react";
 import { agentNativePath } from "../api-path.js";
 import { writeClipboardText } from "../clipboard.js";
-import { isProviderAuthenticationError } from "../error-format.js";
-import { useT } from "../i18n.js";
+import { isProviderAuthenticationError, localizeKnownChatErrorText, } from "../error-format.js";
+import { useFormatters, useT } from "../i18n.js";
 import { AgentProviderSetupForm } from "../settings/ProviderSetupForm.js";
 import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
 import { cn } from "../utils.js";
@@ -66,10 +66,11 @@ export function getRunErrorMetadata(message) {
 export function runErrorKey(info) {
     return `${info.runId ?? ""}:${info.errorCode ?? ""}:${info.message}`;
 }
-export function runErrorHeadline(info) {
-    return info.recoverable === true
-        ? "The agent stopped before finishing"
-        : "The agent hit an error";
+export function runErrorHeadline(info, labels = {
+    recoverable: "The agent stopped before finishing",
+    terminal: "The agent hit an error",
+}) {
+    return info.recoverable === true ? labels.recoverable : labels.terminal;
 }
 export function getRequestModeMetadata(message) {
     const meta = message?.metadata;
@@ -123,21 +124,28 @@ function isConnectionRecoveryRunError(info) {
 // which opens the flow in an Electron BrowserWindow that shares the webview's
 // session. See packages/desktop-app/src/main/index.ts.
 export function BuilderConnectCta({ variant = "primary", onConnected, }) {
+    const t = useT();
     const { configured, orgName, connecting, error, start } = useBuilderConnectFlow({
         trackingSource: "assistant_chat_builder_cta",
         onConnected,
     });
     if (variant === "compact") {
         if (configured) {
-            return (_jsxs("span", { className: "agent-builder-setup-card__builder-button inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-md border border-border bg-background px-2.5 text-[11px] font-medium text-foreground", children: [_jsx(IconCheck, { size: 11, className: "text-emerald-500" }), orgName ? `Connected to ${orgName}` : "Connected"] }));
+            return (_jsxs("span", { className: "agent-builder-setup-card__builder-button inline-flex h-8 items-center gap-1.5 whitespace-nowrap rounded-md border border-border bg-background px-2.5 text-[11px] font-medium text-foreground", children: [_jsx(IconCheck, { size: 11, className: "text-emerald-500" }), orgName
+                        ? t("agentChat.setup.connectedTo", { organization: orgName })
+                        : t("agentChat.setup.connected")] }));
         }
-        return (_jsxs("div", { className: "agent-builder-setup-card__builder-cta flex min-w-0 flex-col items-start gap-1 sm:items-end", children: [_jsx("button", { type: "button", onClick: () => start(), disabled: connecting, className: "agent-builder-setup-card__builder-button inline-flex h-8 shrink-0 items-center gap-1 whitespace-nowrap rounded-md bg-foreground px-3 text-[11px] font-medium text-background hover:opacity-90 disabled:cursor-wait disabled:opacity-60", "aria-busy": connecting, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Waiting\u2026"] })) : ("Connect Builder.io") }), error && (_jsx("p", { className: "max-w-[13rem] text-[10px] leading-snug text-destructive sm:text-right", children: error }))] }));
+        return (_jsxs("div", { className: "agent-builder-setup-card__builder-cta flex min-w-0 flex-col items-start gap-1 sm:items-end", children: [_jsx("button", { type: "button", onClick: () => start(), disabled: connecting, className: "agent-builder-setup-card__builder-button inline-flex h-8 shrink-0 items-center gap-1 whitespace-nowrap rounded-md bg-foreground px-3 text-[11px] font-medium text-background hover:opacity-90 disabled:cursor-wait disabled:opacity-60", "aria-busy": connecting, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), t("agentChat.common.waiting")] })) : (t("agentChat.setup.connectBuilder")) }), error && (_jsx("p", { className: "max-w-[13rem] text-[10px] leading-snug text-destructive sm:text-end", children: error }))] }));
     }
     const containerClass = "flex items-center gap-3 rounded-md border border-border px-3 py-3";
     if (configured) {
-        return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Builder.io" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: orgName ? `Connected — ${orgName}` : "Connected" })] }), _jsxs("span", { className: "ml-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-500", children: [_jsx(IconCheck, { size: 10 }), "Connected"] })] }));
+        return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Builder.io" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: orgName
+                                ? t("agentChat.setup.connectedOrganization", {
+                                    organization: orgName,
+                                })
+                                : t("agentChat.setup.connected") })] }), _jsxs("span", { className: "ms-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium text-emerald-500", children: [_jsx(IconCheck, { size: 10 }), t("agentChat.setup.connected")] })] }));
     }
-    return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { className: "min-w-0 flex-1", 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-[220px]", children: "Free credits for LLM, hosting, and more \u2014 no API key needed" }), error && _jsx("p", { className: "mt-1 text-[10px] text-destructive", children: error })] }), _jsx("button", { type: "button", onClick: () => start(), disabled: connecting, className: "ml-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-foreground px-3 py-1.5 text-[11px] font-medium no-underline text-background hover:opacity-90 disabled:opacity-60 disabled:cursor-wait", "aria-busy": connecting, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Waiting\u2026"] })) : ("Connect") })] }));
+    return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: t("agentChat.setup.connectBuilder") }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 max-w-[220px]", children: t("agentChat.setup.freeCredits") }), error && _jsx("p", { className: "mt-1 text-[10px] text-destructive", children: error })] }), _jsx("button", { type: "button", onClick: () => start(), disabled: connecting, className: "ms-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-foreground px-3 py-1.5 text-[11px] font-medium no-underline text-background hover:opacity-90 disabled:opacity-60 disabled:cursor-wait", "aria-busy": connecting, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), t("agentChat.common.waiting")] })) : (t("agentChat.common.connect")) })] }));
 }
 // ─── ApiKeyConnect ────────────────────────────────────────────────────────────
 export function ApiKeyConnect({ onConnected }) {
@@ -181,6 +189,7 @@ export function BuilderSetupCard({ onConnected, bouncePulse, fullWidth, layout =
 }
 // ─── RunErrorRecoveryCard ─────────────────────────────────────────────────────
 export function RunErrorRecoveryCard({ info, onContinue, onRetry, onFork, onDismiss, onProviderConnected, }) {
+    const t = useT();
     const [detailsOpen, setDetailsOpen] = useState(false);
     const [copyState, setCopyState] = useState("idle");
     const [forking, setForking] = useState(false);
@@ -201,7 +210,9 @@ export function RunErrorRecoveryCard({ info, onContinue, onRetry, onFork, onDism
         builderReconnect.configured;
     const isQueryError = isProviderQueryRunError(info);
     const isConnectionRecoveryError = isConnectionRecoveryRunError(info);
-    const copyLabel = info.runId || info.errorCode || info.details ? "Copy debug" : "Copy";
+    const copyLabel = info.runId || info.errorCode || info.details
+        ? t("agentChat.recovery.copyDebug")
+        : t("agentChat.common.copy");
     const copyDetails = useCallback(() => {
         const text = [
             info.message,
@@ -237,31 +248,40 @@ export function RunErrorRecoveryCard({ info, onContinue, onRetry, onFork, onDism
         try {
             const result = await onFork();
             if (result === false) {
-                setForkError("Could not fork this chat. Try starting a new chat.");
+                setForkError(t("agentChat.recovery.forkFailed"));
             }
         }
         catch {
-            setForkError("Could not fork this chat. Try starting a new chat.");
+            setForkError(t("agentChat.recovery.forkFailed"));
         }
         finally {
             setForking(false);
         }
-    }, [forking, onFork]);
+    }, [forking, onFork, t]);
     useEffect(() => {
         if (builderReconnectResolved) {
             onDismiss();
         }
     }, [builderReconnectResolved, onDismiss]);
-    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: runErrorHeadline(info) }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: info.message }), isProviderAuthError && (_jsx("div", { className: "mt-3 rounded-md border border-border/70 bg-background/60 p-2.5", children: _jsx(BuilderSetupContent, { layout: "sidebar", onConnected: handleProviderConnected }) })), shouldShowBuilderReconnect && !builderReconnectResolved && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: "The current Builder.io or model-provider credential was rejected. Reconnect Builder.io (free tier available), then retry this message." })), isConnectionRecoveryError && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: "If retry lands on the same error, start a new chat session and continue from what already changed." })), (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: [shouldShowBuilderReconnect && !builderReconnectResolved && (_jsxs("button", { type: "button", onClick: () => builderReconnect.start(), disabled: builderReconnect.connecting, 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 disabled:cursor-wait disabled:opacity-70", children: [builderReconnect.connecting ? (_jsx(IconLoader2, { size: 13, className: "animate-spin" })) : null, builderReconnect.connecting
-                                ? "Connecting Builder.io"
-                                : "Reconnect Builder.io"] })), canRecover && (_jsx(_Fragment, { 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"] }) })), canRetry && (_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 }), isQueryError ? "Diagnose and retry" : "Retry"] })), canRecover && isConnectionRecoveryError && (_jsxs("button", { type: "button", onClick: startNewChat, 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(IconPlus, { size: 13 }), "New chat"] })), canRecover && onFork && !isConnectionRecoveryError && (_jsxs("button", { type: "button", onClick: handleFork, disabled: forking, title: "Fork this conversation into a separate chat thread.", "aria-label": "Fork this conversation into a separate chat thread", 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 disabled:cursor-wait disabled:opacity-70", children: [forking ? (_jsx(IconLoader2, { size: 13, className: "animate-spin" })) : (_jsx(IconGitFork, { size: 13 })), forking ? "Forking..." : "Fork chat"] })), _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: [copyState === "copied" ? (_jsx(IconCheck, { size: 13 })) : copyState === "failed" ? (_jsx(IconX, { size: 13 })) : (_jsx(IconCopy, { size: 13 })), _jsx("span", { "aria-live": "polite", children: copyState === "copied"
-                                    ? "Copied"
+    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: runErrorHeadline(info, {
+                                    recoverable: t("agentChat.error.stopped"),
+                                    terminal: t("agentChat.error.failed"),
+                                }) }), _jsx("p", { className: "mt-1 text-xs leading-relaxed text-muted-foreground", children: localizeKnownChatErrorText(info.message, t) }), isProviderAuthError && (_jsx("div", { className: "mt-3 rounded-md border border-border/70 bg-background/60 p-2.5", children: _jsx(BuilderSetupContent, { layout: "sidebar", onConnected: handleProviderConnected }) })), shouldShowBuilderReconnect && !builderReconnectResolved && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: t("agentChat.recovery.credentialRejected") })), isConnectionRecoveryError && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-muted-foreground", children: t("agentChat.recovery.newChatHint") })), (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") }), t("agentChat.common.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": t("agentChat.common.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: [shouldShowBuilderReconnect && !builderReconnectResolved && (_jsxs("button", { type: "button", onClick: () => builderReconnect.start(), disabled: builderReconnect.connecting, 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 disabled:cursor-wait disabled:opacity-70", children: [builderReconnect.connecting ? (_jsx(IconLoader2, { size: 13, className: "animate-spin" })) : null, builderReconnect.connecting
+                                ? t("agentChat.recovery.connectingBuilder")
+                                : t("agentChat.recovery.reconnectBuilder")] })), canRecover && (_jsx(_Fragment, { 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 }), t("agentChat.common.continue")] }) })), canRetry && (_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 }), isQueryError
+                                ? t("agentChat.recovery.diagnoseRetry")
+                                : t("agentChat.common.retry")] })), canRecover && isConnectionRecoveryError && (_jsxs("button", { type: "button", onClick: startNewChat, 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(IconPlus, { size: 13 }), t("agentChat.tabs.newChat")] })), canRecover && onFork && !isConnectionRecoveryError && (_jsxs("button", { type: "button", onClick: handleFork, disabled: forking, title: t("agentChat.recovery.forkDescription"), "aria-label": t("agentChat.recovery.forkDescription"), 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 disabled:cursor-wait disabled:opacity-70", children: [forking ? (_jsx(IconLoader2, { size: 13, className: "animate-spin" })) : (_jsx(IconGitFork, { size: 13 })), forking
+                                ? t("agentChat.recovery.forking")
+                                : t("agentChat.message.forkChat")] })), _jsxs("button", { type: "button", onClick: copyDetails, className: "ms-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: [copyState === "copied" ? (_jsx(IconCheck, { size: 13 })) : copyState === "failed" ? (_jsx(IconX, { size: 13 })) : (_jsx(IconCopy, { size: 13 })), _jsx("span", { "aria-live": "polite", children: copyState === "copied"
+                                    ? t("agentChat.common.copied")
                                     : copyState === "failed"
-                                        ? "Copy failed"
+                                        ? t("agentChat.recovery.copyFailed")
                                         : copyLabel })] })] }), shouldShowBuilderReconnect && builderReconnect.error && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-red-500", children: builderReconnect.error })), forkError && (_jsx("p", { className: "mt-2 text-xs leading-relaxed text-red-500", children: forkError }))] }));
 }
 // ─── LoopLimitContinueCard ────────────────────────────────────────────────────
 export function LoopLimitContinueCard({ info, onContinue, }) {
+    const t = useT();
+    const { formatNumber } = useFormatters();
     const [settings, setSettings] = useState(null);
     const [value, setValue] = useState("");
     const [saving, setSaving] = useState(false);
@@ -294,9 +314,11 @@ export function LoopLimitContinueCard({ info, onContinue, }) {
         numericValue !== settings.maxIterations;
     const scopeLabel = settings?.scope === "org"
         ? settings.orgName
-            ? `${settings.orgName} org`
-            : "org"
-        : "your account";
+            ? t("agentChat.limit.namedOrganization", {
+                organization: settings.orgName,
+            })
+            : t("agentChat.limit.organization")
+        : t("agentChat.limit.account");
     const saveLimit = useCallback(async () => {
         if (!settings?.canUpdate)
             return false;
@@ -311,7 +333,8 @@ export function LoopLimitContinueCard({ info, onContinue, }) {
             });
             const body = await res.json().catch(() => ({}));
             if (!res.ok) {
-                throw new Error(body?.error ?? `Save failed (${res.status})`);
+                throw new Error(body?.error ??
+                    t("agentChat.common.saveFailedStatus", { status: res.status }));
             }
             setSettings(body);
             setValue(String(body.maxIterations));
@@ -321,13 +344,13 @@ export function LoopLimitContinueCard({ info, onContinue, }) {
             return true;
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Save failed");
+            setError(err instanceof Error ? err.message : t("agentChat.common.saveFailed"));
             return false;
         }
         finally {
             setSaving(false);
         }
-    }, [numericValue, settings?.canUpdate]);
+    }, [numericValue, settings?.canUpdate, t]);
     const handleContinue = useCallback(async () => {
         if (hasPendingChange) {
             const ok = await saveLimit();
@@ -343,12 +366,18 @@ export function LoopLimitContinueCard({ info, onContinue, }) {
         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) => {
+    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: t("agentChat.limit.reached") }), _jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: currentLimit
+                                    ? t("agentChat.limit.descriptionWithCount", {
+                                        count: currentLimit,
+                                        formattedCount: formatNumber(currentLimit),
+                                        scope: scopeLabel,
+                                    })
+                                    : t("agentChat.limit.descriptionAll", { scope: scopeLabel }) })] })] }), _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: t("agentChat.limit.maxSteps") }), _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 })] }));
+                                }, 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 })) : (t("agentChat.common.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 }), t("agentChat.common.settings")] }), _jsxs("button", { type: "button", onClick: handleContinue, disabled: saving, className: "ms-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
+                                ? t("agentChat.limit.saveAndContinue")
+                                : t("agentChat.limit.keepGoing"), _jsx(IconArrowRight, { size: 12 })] })] }), settings && !settings.canUpdate && (_jsx("p", { className: "mt-2 text-[11px] text-muted-foreground", children: t("agentChat.limit.ownerOnly") })), error && _jsx("p", { className: "mt-2 text-[11px] text-destructive", children: error })] }));
 }
 // ─── PlanModeCallout ──────────────────────────────────────────────────────────
 //
@@ -358,5 +387,8 @@ export function LoopLimitContinueCard({ info, onContinue, }) {
 // narrow sidebar chats and wide/centered page layouts, instead of floating
 // against the full pane width.
 export function PlanModeCallout({ canImplementPlan, onImplementPlan, onSwitchToAct, }) {
-    return (_jsx("div", { className: "agent-plan-mode-callout shrink-0 px-3", children: _jsxs("div", { className: "ml-auto flex w-fit max-w-full items-center gap-2 rounded-full border border-border/70 bg-background/95 px-2 py-1.5 text-xs text-muted-foreground shadow-sm", children: [_jsx(IconClipboardList, { size: 13, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: canImplementPlan ? "Plan ready" : "Plan mode" }), canImplementPlan ? (_jsxs("button", { type: "button", onClick: onImplementPlan, className: "inline-flex h-6 shrink-0 items-center gap-1 rounded-full bg-foreground px-2.5 text-[11px] font-medium text-background hover:opacity-90", children: [_jsx(IconPlayerPlay, { size: 12 }), "Implement"] })) : (_jsxs("button", { type: "button", onClick: onSwitchToAct, className: "inline-flex h-6 shrink-0 items-center gap-1 rounded-full border border-border bg-background px-2.5 text-[11px] font-medium text-foreground hover:bg-accent", "aria-label": "Switch to Act mode", children: ["Act", _jsx(IconArrowRight, { size: 12 })] }))] }) }));
+    const t = useT();
+    return (_jsx("div", { className: "agent-plan-mode-callout shrink-0 px-3", children: _jsxs("div", { className: "ms-auto flex w-fit max-w-full items-center gap-2 rounded-full border border-border/70 bg-background/95 px-2 py-1.5 text-xs text-muted-foreground shadow-sm", children: [_jsx(IconClipboardList, { size: 13, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: canImplementPlan
+                        ? t("agentChat.plan.ready")
+                        : t("agentChat.plan.mode") }), canImplementPlan ? (_jsxs("button", { type: "button", onClick: onImplementPlan, className: "inline-flex h-6 shrink-0 items-center gap-1 rounded-full bg-foreground px-2.5 text-[11px] font-medium text-background hover:opacity-90", children: [_jsx(IconPlayerPlay, { size: 12 }), t("agentChat.plan.implement")] })) : (_jsxs("button", { type: "button", onClick: onSwitchToAct, className: "inline-flex h-6 shrink-0 items-center gap-1 rounded-full border border-border bg-background px-2.5 text-[11px] font-medium text-foreground hover:bg-accent", "aria-label": t("agentChat.plan.switchToAct"), children: [t("agentChat.plan.act"), _jsx(IconArrowRight, { size: 12 })] }))] }) }));
 }

package/dist/client/chat/tool-call-display.d.ts

@@ -72,8 +72,11 @@ export type ToolDetailPayload = {
     copyText: string;
     lang: string;
 };
-export declare function toolInputPayload(toolName: string, args: Record<string, unknown>): ToolDetailPayload | null;
-export declare function toolResultPayload(result: string | undefined): ToolDetailPayload | null;
+export declare function toolInputPayload(toolName: string, args: Record<string, unknown>, labels?: {
+    input: string;
+    inputWithLabel: (label: string) => string;
+}): ToolDetailPayload | null;
+export declare function toolResultPayload(result: string | undefined, title?: string): ToolDetailPayload | null;
 export declare function AnimatedCollapse({ open, children, }: {
     open: boolean;
     children: React.ReactNode;
@@ -138,7 +141,13 @@ export declare function ReasoningCell({ text, isStreaming, defaultOpen, autoColl
      */
     durationMs?: number | null;
 }): React.JSX.Element | null;
-export declare function formatWorkedDuration(ms: number): string;
+export declare function formatWorkedDuration(ms: number, options?: {
+    locale?: string;
+    hour?: string;
+    minute?: string;
+    second?: string;
+}): string;
+export declare function useLocalizedWorkedDuration(): (ms: number) => string;
 export declare function WorkedForSummary({ durationMs, defaultOpen, autoCollapse, children, }: {
     durationMs?: number | null;
     /** Keep completed work visible when the turn contains interactive UI. */

package/dist/client/chat/tool-call-display.js

@@ -6,7 +6,7 @@ import { writeClipboardText } from "../clipboard.js";
 import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 import { ConnectBuilderCard } from "../ConnectBuilderCard.js";
 import { FileStorageSetupCard } from "../FileStorageSetupCard.js";
-import { useT } from "../i18n.js";
+import { useOptionalLocale, useT } from "../i18n.js";
 import { McpAppRenderer } from "../mcp-apps/McpAppRenderer.js";
 import { findMcpIntegrationForToolName } from "../resources/mcp-integration-catalog.js";
 import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
@@ -41,6 +41,7 @@ export function toolCallHasPendingApproval(part) {
 }
 export const TOOL_LONG_RUNNING_HINT_DELAY_MS = 45_000;
 export function ToolActivityPresentation({ toolName, isRunning, toolCallId, suppressLongRunningHint = false, children, }) {
+    const t = useT();
     const [showLongRunningHint, setShowLongRunningHint] = useState(false);
     useEffect(() => {
         if (!isRunning || suppressLongRunningHint) {
@@ -53,7 +54,7 @@ export function ToolActivityPresentation({ toolName, isRunning, toolCallId, supp
         }, TOOL_LONG_RUNNING_HINT_DELAY_MS);
         return () => window.clearTimeout(timeout);
     }, [isRunning, suppressLongRunningHint, toolName]);
-    return (_jsx("div", { className: "agent-tool-call", "data-agent-tool-call-id": toolCallId, "data-running": isRunning ? "true" : undefined, children: _jsxs("div", { className: "agent-tool-call__content", children: [children, isRunning && showLongRunningHint && (_jsx("div", { className: "mt-0.5 px-2.5 pb-2 text-[11px] leading-snug text-muted-foreground/80", children: "Still working. Large updates can take a minute or two." }))] }) }));
+    return (_jsx("div", { className: "agent-tool-call", "data-agent-tool-call-id": toolCallId, "data-running": isRunning ? "true" : undefined, children: _jsxs("div", { className: "agent-tool-call__content", children: [children, isRunning && showLongRunningHint && (_jsx("div", { className: "mt-0.5 px-2.5 pb-2 text-[11px] leading-snug text-muted-foreground/80", children: t("agentChat.tool.longRunning") }))] }) }));
 }
 function stringifyToolValue(value, pretty = false) {
     if (typeof value === "string")
@@ -109,7 +110,10 @@ function formatToolTextValue(value, key, toolName) {
     }
     return { text: stringifyToolValue(value, true), lang: "json" };
 }
-export function toolInputPayload(toolName, args) {
+export function toolInputPayload(toolName, args, labels = {
+    input: "Input",
+    inputWithLabel: (label) => `Input - ${label}`,
+}) {
     const entries = Object.entries(args);
     if (entries.length === 0)
         return null;
@@ -120,7 +124,7 @@ export function toolInputPayload(toolName, args) {
         const keyLabel = normalizedKey === "sql" || normalizedKey.endsWith("sql") ? "SQL" : key;
         return {
             section: "input",
-            title: `Input - ${keyLabel}`,
+            title: labels.inputWithLabel(keyLabel),
             text: formatted.text,
             copyText: typeof value === "string" ? value : stringifyToolValue(value, true),
             lang: formatted.lang,
@@ -128,19 +132,19 @@ export function toolInputPayload(toolName, args) {
     }
     return {
         section: "input",
-        title: "Input",
+        title: labels.input,
         text: JSON.stringify(args, null, 2),
         copyText: JSON.stringify(args, null, 2),
         lang: "json",
     };
 }
-export function toolResultPayload(result) {
+export function toolResultPayload(result, title = "Result") {
     if (result === undefined)
         return null;
     const formatted = formatToolTextValue(result);
     return {
         section: "result",
-        title: "Result",
+        title,
         text: formatted.text,
         copyText: result,
         lang: formatted.lang,
@@ -195,6 +199,7 @@ function SimpleCodeViewer({ text, lang, className, maxHeightClass = "max-h-56",
     return (_jsxs("div", { className: cn("agent-tool-code overflow-auto rounded-md bg-muted/70 font-mono text-[11px] leading-relaxed text-foreground", maxHeightClass, className), children: [lang !== "text" && (_jsx("div", { className: "sticky top-0 z-[1] flex items-center justify-between border-b border-border/40 bg-muted/90 px-2.5 py-1", children: _jsx("span", { className: "font-mono text-[10px] uppercase tracking-wide text-muted-foreground/80", children: lang }) })), _jsx(HighlightedCodeBlock, { code: text, lang: lang })] }));
 }
 function ToolOutputPopover({ open, onOpenChange, title, payload, children, }) {
+    const t = useT();
     const [copied, setCopied] = useState(false);
     const copyResetRef = useRef(null);
     useEffect(() => {
@@ -216,7 +221,7 @@ function ToolOutputPopover({ open, onOpenChange, title, payload, children, }) {
             // Clipboard failures should not interrupt chat rendering.
         }
     }, [payload.copyText]);
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsxs(PopoverContent, { align: "start", side: "bottom", sideOffset: 6, collisionPadding: 12, className: "flex max-h-[min(calc(100vh-2rem),var(--radix-popover-content-available-height,75vh))] w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,760px),760px)] flex-col gap-0 overflow-hidden p-0", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3", children: [_jsx("div", { className: "truncate text-sm font-medium", children: title }), _jsxs("button", { type: "button", onClick: copyValue, className: "inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", children: [copied ? _jsx(IconCheck, { size: 13 }) : _jsx(IconCopy, { size: 13 }), copied ? "Copied" : "Copy"] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-3", children: _jsx(SimpleCodeViewer, { text: payload.text, lang: payload.lang, maxHeightClass: "max-h-[min(70vh,calc(var(--radix-popover-content-available-height,75vh)-4.5rem))]" }) })] })] }));
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: children }), _jsxs(PopoverContent, { align: "start", side: "bottom", sideOffset: 6, collisionPadding: 12, className: "flex max-h-[min(calc(100vh-2rem),var(--radix-popover-content-available-height,75vh))] w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,760px),760px)] flex-col gap-0 overflow-hidden p-0", children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3", children: [_jsx("div", { className: "truncate text-sm font-medium", children: title }), _jsxs("button", { type: "button", onClick: copyValue, className: "inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground", children: [copied ? _jsx(IconCheck, { size: 13 }) : _jsx(IconCopy, { size: 13 }), copied ? t("agentChat.common.copied") : t("agentChat.common.copy")] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden p-3", children: _jsx(SimpleCodeViewer, { text: payload.text, lang: payload.lang, maxHeightClass: "max-h-[min(70vh,calc(var(--radix-popover-content-available-height,75vh)-4.5rem))]" }) })] })] }));
 }
 // ─── Collapsible height animation ─────────────────────────────────────────────
 export function AnimatedCollapse({ open, children, }) {
@@ -241,6 +246,7 @@ export function AnimatedCollapse({ open, children, }) {
  * the prompt locally (the action stays un-run).
  */
 function ApprovalAffordance({ toolName, toolCallId, approval, }) {
+    const t = useT();
     const ctx = React.useContext(ApprovalContext);
     const [localResolution, setLocalResolution] = useState(null);
     const retainedResolution = ctx?.getApprovalResolution?.(approval.approvalKey, toolCallId) ?? null;
@@ -250,27 +256,27 @@ function ApprovalAffordance({ toolName, toolCallId, approval, }) {
     // Once resolved, collapse to a quiet note so a repository refresh cannot
     // restore the action buttons while the continuation is running.
     if (resolution === "approved") {
-        return (_jsxs("div", { className: "mt-1.5 text-xs text-muted-foreground", children: ["Approved. Re-running ", toolName, "..."] }));
+        return (_jsx("div", { className: "mt-1.5 text-xs text-muted-foreground", children: t("agentChat.approval.approved", { tool: toolName }) }));
     }
     // Deny defaults to local-only (the action simply stays un-run). When the
     // host also provided `onDeny` (e.g. a Code session resolving its own
     // pending approval), it fires alongside the local state.
     if (resolution === "denied") {
-        return (_jsxs("div", { className: "mt-1.5 text-xs text-muted-foreground", children: ["Denied. ", toolName, " did not run."] }));
+        return (_jsx("div", { className: "mt-1.5 text-xs text-muted-foreground", children: t("agentChat.approval.denied", { tool: toolName }) }));
     }
-    return (_jsxs("div", { className: "mt-1.5 flex min-w-0 flex-wrap items-center gap-2 rounded-md border border-border bg-muted/40 px-2.5 py-1.5", children: [_jsx(IconShieldCheck, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1 text-xs text-muted-foreground", children: ["Approve to run ", toolName, "?"] }), ctx && (_jsxs("button", { type: "button", onClick: () => {
+    return (_jsxs("div", { className: "mt-1.5 flex min-w-0 flex-wrap items-center gap-2 rounded-md border border-border bg-muted/40 px-2.5 py-1.5", children: [_jsx(IconShieldCheck, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 text-xs text-muted-foreground", children: t("agentChat.approval.question", { tool: toolName }) }), ctx && (_jsxs("button", { type: "button", onClick: () => {
                     setLocalResolution("approved");
                     ctx.onApprovalResolved?.(approval.approvalKey, "approved", toolCallId);
                     ctx.onApprove(approval.approvalKey);
-                }, className: cn("inline-flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90"), children: [_jsx(IconCheck, { className: "h-3.5 w-3.5" }), "Approve"] })), ctx?.onAlwaysAllow && (_jsxs("button", { type: "button", onClick: () => {
+                }, className: cn("inline-flex shrink-0 items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90"), children: [_jsx(IconCheck, { className: "h-3.5 w-3.5" }), t("agentChat.approval.approve")] })), ctx?.onAlwaysAllow && (_jsxs("button", { type: "button", onClick: () => {
                     setLocalResolution("approved");
                     ctx.onApprovalResolved?.(approval.approvalKey, "approved", toolCallId);
                     ctx.onAlwaysAllow?.(approval.approvalKey);
-                }, title: "Approve and always allow this exact command", className: cn("inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium transition-colors", "text-foreground hover:bg-muted"), children: [_jsx(IconShieldCheck, { className: "h-3.5 w-3.5" }), "Always allow"] })), _jsxs("button", { type: "button", onClick: () => {
+                }, title: t("agentChat.approval.alwaysAllowHint"), className: cn("inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium transition-colors", "text-foreground hover:bg-muted"), children: [_jsx(IconShieldCheck, { className: "h-3.5 w-3.5" }), t("agentChat.approval.alwaysAllow")] })), _jsxs("button", { type: "button", onClick: () => {
                     setLocalResolution("denied");
                     ctx?.onApprovalResolved?.(approval.approvalKey, "denied", toolCallId);
                     ctx?.onDeny?.(approval.approvalKey);
-                }, className: cn("inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium transition-colors", "text-foreground hover:bg-muted"), children: [_jsx(IconX, { className: "h-3.5 w-3.5" }), "Deny"] })] }));
+                }, className: cn("inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium transition-colors", "text-foreground hover:bg-muted"), children: [_jsx(IconX, { className: "h-3.5 w-3.5" }), t("agentChat.approval.deny")] })] }));
 }
 // ─── ToolCallDisplay ──────────────────────────────────────────────────────────
 export function ToolCallDisplay({ toolName, toolCallId, argsText, args, result, mcpApp, chatUI, isRunning, outcome, structuredMeta, activity, approval, repeatCount, isLatestRunning = isRunning, isActiveTail, }) {
@@ -303,6 +309,7 @@ export function ToolCallDisplay({ toolName, toolCallId, argsText, args, result,
     return wrapToolDisplay(_jsx(ToolCallDisplayGeneric, { toolName: toolName, toolCallId: toolCallId, argsText: argsText, args: args, result: result, mcpApp: mcpApp, chatUI: chatUI, isRunning: effectiveIsRunning, outcome: outcome, isActiveTail: showActiveTail, structuredMeta: structuredMeta, approval: approval, repeatCount: repeatCount }));
 }
 function ToolCallDisplayGeneric({ toolName, toolCallId, argsText, args, result, mcpApp, chatUI, isRunning, outcome, isActiveTail, structuredMeta, approval, repeatCount, }) {
+    const t = useT();
     const suppressInlineOpenApp = React.useContext(SuppressInlineOpenAppContext);
     const isRawCallAgent = toolName === "call-agent";
     const isAgentCall = toolName.startsWith("agent:") || isRawCallAgent;
@@ -362,7 +369,7 @@ function ToolCallDisplayGeneric({ toolName, toolCallId, argsText, args, result,
             if (parsed.taskId && parsed.threadId) {
                 return (_jsx(AgentTaskCard, { taskId: parsed.taskId, threadId: parsed.threadId, description: parsed.description ||
                         args?.task ||
-                        "Sub-agent task", onOpen: (tid) => {
+                        t("agentChat.tool.subAgentTask"), onOpen: (tid) => {
                         window.dispatchEvent(new CustomEvent("agent-task-open", {
                             detail: {
                                 threadId: tid,
@@ -398,30 +405,38 @@ function ToolCallDisplayGeneric({ toolName, toolCallId, argsText, args, result,
     if (NativeToolRenderer) {
         return (_jsx(ActionChatUiSurface, { context: nativeToolContext, isBuiltinDataWidget: isBuiltinDataWidgetActionRenderer(nativeToolContext), children: _jsx(NativeToolRenderer, { context: nativeToolContext }) }));
     }
-    const inputPayload = hasArgs ? toolInputPayload(toolName, args) : null;
-    const resultPayload = toolResultPayload(result);
+    const inputPayload = hasArgs
+        ? toolInputPayload(toolName, args, {
+            input: t("agentChat.tool.input"),
+            inputWithLabel: (label) => t("agentChat.tool.inputWithLabel", { label }),
+        })
+        : null;
+    const resultPayload = toolResultPayload(result, t("agentChat.tool.result"));
     const displayName = isAgentCall
         ? isRunning
-            ? `Asking ${agentName}...`
+            ? t("agentChat.tool.askingAgent", { agent: agentName })
             : isAgentError
-                ? `Error asking ${agentName}`
-                : `Asked ${agentName}`
+                ? t("agentChat.tool.askingAgentFailed", { agent: agentName })
+                : t("agentChat.tool.askedAgent", { agent: agentName })
         : humanizeToolName(toolName);
     const canExpand = isAgentCall
         ? hasStreamText
         : hasArgs || result !== undefined;
     const isExpanded = isAgentCall ? hasStreamText && expanded : expanded;
     const ToolIcon = resolveToolIcon(toolName);
-    const outputTitle = `Raw ${toolName} tool call output`;
+    const outputTitle = t("agentChat.tool.rawOutput", { tool: toolName });
     if (isAgentCall) {
-        return (_jsx(AgentCallCell, { agentName: agentName ?? "agent", activity: agentActivity, progress: agentProgress, responseText: agentStreamText, isRunning: isRunning, isError: isAgentError, durationMs: typeof structuredMeta?.agentDurationMs === "number"
+        return (_jsx(AgentCallCell, { agentName: agentName ?? t("agentChat.common.agent"), activity: agentActivity, progress: agentProgress, responseText: agentStreamText, isRunning: isRunning, isError: isAgentError, durationMs: typeof structuredMeta?.agentDurationMs === "number"
                 ? structuredMeta.agentDurationMs
                 : agentActivity?.durationMs }));
     }
-    return (_jsxs("div", { className: "group/tool my-0.5 w-full overflow-hidden", children: [mcpApp && !(suppressInlineOpenApp && toolName === "open_app") && (_jsx(McpAppRenderer, { app: mcpApp, className: "mb-1.5" })), _jsxs("button", { type: "button", onClick: () => canExpand && setExpanded(!isExpanded), "aria-expanded": canExpand ? isExpanded : undefined, className: cn("flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground transition-colors", canExpand && "hover:text-foreground", isRunning && "text-muted-foreground"), children: [_jsx("span", { className: "relative flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : isAgentError ? (_jsx(IconCircleX, { className: "size-3.5 text-destructive" })) : isUnknownOutcome ? (_jsx(IconAlertTriangle, { className: "size-3.5 text-muted-foreground" })) : (_jsxs(_Fragment, { children: [_jsx(ToolIcon, { className: cn("size-3.5 transition-opacity", canExpand && "group-hover/tool:opacity-0") }), canExpand && (_jsx(IconChevronRight, { className: cn("absolute size-3.5 opacity-0 transition-[opacity,transform] group-hover/tool:opacity-100", isExpanded && "rotate-90") }))] })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: displayName }), repeatCount && repeatCount > 1 && (_jsxs("span", { className: "shrink-0 rounded border border-border/60 px-1.5 py-0.5 text-[10px] leading-none text-muted-foreground", title: `Repeated ${repeatCount} times`, children: [repeatCount, "x"] }))] }), _jsx(AnimatedCollapse, { open: isExpanded && !isAgentCall && (hasArgs || result !== undefined), children: _jsxs("div", { className: "mt-1 space-y-2 pl-5", children: [inputPayload && (_jsx(SimpleCodeViewer, { text: inputPayload.text, lang: inputPayload.lang })), resultPayload && (_jsx(ToolOutputPopover, { open: outputOpen, onOpenChange: setOutputOpen, title: outputTitle, payload: resultPayload, children: _jsx("button", { type: "button", "aria-label": `View ${toolName} output`, className: "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground", children: _jsx(IconCode, { className: "size-3.5" }) }) }))] }) }), isUnknownOutcome && (_jsx("p", { role: "status", className: "ps-5 text-xs text-muted-foreground", children: "Interrupted before this finished reporting \u2014 it may or may not have completed. Check before retrying." })), approval && (_jsx(ApprovalAffordance, { toolName: toolName, toolCallId: toolCallId, approval: approval }))] }));
+    return (_jsxs("div", { className: "group/tool my-0.5 w-full overflow-hidden", children: [mcpApp && !(suppressInlineOpenApp && toolName === "open_app") && (_jsx(McpAppRenderer, { app: mcpApp, className: "mb-1.5" })), _jsxs("button", { type: "button", onClick: () => canExpand && setExpanded(!isExpanded), "aria-expanded": canExpand ? isExpanded : undefined, className: cn("flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground transition-colors", canExpand && "hover:text-foreground", isRunning && "text-muted-foreground"), children: [_jsx("span", { className: "relative flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : isAgentError ? (_jsx(IconCircleX, { className: "size-3.5 text-destructive" })) : isUnknownOutcome ? (_jsx(IconAlertTriangle, { className: "size-3.5 text-muted-foreground" })) : (_jsxs(_Fragment, { children: [_jsx(ToolIcon, { className: cn("size-3.5 transition-opacity", canExpand && "group-hover/tool:opacity-0") }), canExpand && (_jsx(IconChevronRight, { className: cn("absolute size-3.5 opacity-0 transition-[opacity,transform] group-hover/tool:opacity-100", isExpanded && "rotate-90") }))] })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: displayName }), repeatCount && repeatCount > 1 && (_jsxs("span", { className: "shrink-0 rounded border border-border/60 px-1.5 py-0.5 text-[10px] leading-none text-muted-foreground", title: t("agentChat.tool.repeated", { count: repeatCount }), children: [repeatCount, "x"] }))] }), _jsx(AnimatedCollapse, { open: isExpanded && !isAgentCall && (hasArgs || result !== undefined), children: _jsxs("div", { className: "mt-1 space-y-2 pl-5", children: [inputPayload && (_jsx(SimpleCodeViewer, { text: inputPayload.text, lang: inputPayload.lang })), resultPayload && (_jsx(ToolOutputPopover, { open: outputOpen, onOpenChange: setOutputOpen, title: outputTitle, payload: resultPayload, children: _jsx("button", { type: "button", "aria-label": t("agentChat.tool.viewOutput", {
+                                    tool: toolName,
+                                }), className: "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground", children: _jsx(IconCode, { className: "size-3.5" }) }) }))] }) }), isUnknownOutcome && (_jsx("p", { role: "status", className: "ps-5 text-xs text-muted-foreground", children: t("agentChat.tool.interrupted") })), approval && (_jsx(ApprovalAffordance, { toolName: toolName, toolCallId: toolCallId, approval: approval }))] }));
 }
 function AgentCallCell({ agentName, activity, progress, responseText, isRunning, isError, durationMs, }) {
     const t = useT();
+    const formatDuration = useLocalizedWorkedDuration();
     const [open, setOpen] = useState(true);
     const toolCount = activity?.toolCalls?.length ?? 0;
     // Response segments are ordered against the tool calls that preceded them, so
@@ -434,10 +449,10 @@ function AgentCallCell({ agentName, activity, progress, responseText, isRunning,
     const work = activity?.reasoning?.length || toolCount || inlineSegments.length;
     const workItemCount = Math.max(activity?.reasoning?.length ?? 0, toolCount, inlineSegments.length);
     const label = isRunning
-        ? t("agentPanel.delegatedAgent.asking", { name: agentName })
+        ? t("agentChat.tool.askingAgent", { agent: agentName })
         : isError
-            ? t("agentPanel.delegatedAgent.error", { name: agentName })
-            : t("agentPanel.delegatedAgent.asked", { name: agentName });
+            ? t("agentChat.tool.askingAgentFailed", { agent: agentName })
+            : t("agentChat.tool.askedAgent", { agent: agentName });
     const workContent = work ? (_jsx("div", { className: "space-y-1 ps-5", children: Array.from({ length: workItemCount }, (_, index) => {
             const reasoningText = activity?.reasoning?.[index];
             const segment = inlineSegments[index];
@@ -452,8 +467,8 @@ function AgentCallCell({ agentName, activity, progress, responseText, isRunning,
     const progressText = isRunning && !activity && progress && progressState
         ? [
             progressState.charAt(0).toUpperCase() + progressState.slice(1),
-            t("agentPanel.delegatedAgent.elapsed", {
-                duration: formatWorkedDuration(progress.elapsedSeconds * 1000),
+            t("agentChat.tool.elapsed", {
+                duration: formatDuration(progress.elapsedSeconds * 1000),
             }),
             progress.detail,
         ]
@@ -603,6 +618,8 @@ function isReconnectToolSummaryPart(content, index, startIndex) {
  */
 const WorkSummaryContentContext = React.createContext(false);
 export function ReasoningCell({ text, isStreaming = false, defaultOpen, autoCollapse = false, collapseWhenReplaced = false, durationMs, }) {
+    const t = useT();
+    const formatDuration = useLocalizedWorkedDuration();
     const embeddedInWorkSummary = React.useContext(WorkSummaryContentContext);
     const [open, setOpen] = useState(defaultOpen ?? true);
     const wasStreamingRef = useRef(isStreaming);
@@ -630,35 +647,54 @@ export function ReasoningCell({ text, isStreaming = false, defaultOpen, autoColl
         return (_jsx("div", { className: "pb-1 pl-5 text-[13px] leading-relaxed text-muted-foreground whitespace-pre-wrap", children: visibleText || (isStreaming ? "…" : "") }));
     }
     const label = isStreaming
-        ? "Thinking"
+        ? t("agentChat.status.thinking")
         : durationMs != null
-            ? `Thought for ${formatWorkedDuration(durationMs)}`
-            : "Thought";
+            ? t("agentChat.tool.thoughtFor", {
+                duration: formatDuration(durationMs),
+            })
+            : t("agentChat.tool.thought");
     // Only clamp to a scroll-free "tail" view while actively streaming and
     // expanded — once the run finishes the full text is shown, unclamped.
     const showTail = isStreaming && open;
     return (_jsxs("div", { className: "my-0.5 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") }), isStreaming ? (_jsx("span", { className: "agent-thinking-indicator__text", children: label })) : (_jsx("span", { children: label }))] }), _jsx(AnimatedCollapse, { open: open, children: _jsx("div", { className: cn("pl-5 pb-1", showTail && "reasoning-cell-tail"), children: _jsx("div", { className: "text-[13px] leading-relaxed text-muted-foreground whitespace-pre-wrap", children: visibleText || (isStreaming ? "…" : "") }) }) })] }));
 }
 // ─── Worked-for duration helpers ──────────────────────────────────────────────
-export function formatWorkedDuration(ms) {
+export function formatWorkedDuration(ms, options = {}) {
+    const number = new Intl.NumberFormat(options.locale ?? "en-US");
+    const hour = options.hour ?? "h";
+    const minute = options.minute ?? "m";
+    const second = options.second ?? "s";
+    const part = (value, unit) => `${number.format(value)}${unit}`;
     const totalSeconds = Math.max(0, Math.round(ms / 1000));
     if (totalSeconds < 60) {
-        return totalSeconds <= 1 ? "1s" : `${totalSeconds}s`;
+        return part(Math.max(1, totalSeconds), second);
     }
     const minutes = Math.floor(totalSeconds / 60);
     const seconds = totalSeconds % 60;
     if (minutes < 60) {
         if (seconds === 0)
-            return `${minutes}m`;
-        return `${minutes}m ${seconds}s`;
+            return part(minutes, minute);
+        return `${part(minutes, minute)} ${part(seconds, second)}`;
     }
     const hours = Math.floor(minutes / 60);
     const remMinutes = minutes % 60;
     if (remMinutes === 0)
-        return `${hours}h`;
-    return `${hours}h ${remMinutes}m`;
+        return part(hours, hour);
+    return `${part(hours, hour)} ${part(remMinutes, minute)}`;
+}
+export function useLocalizedWorkedDuration() {
+    const t = useT();
+    const locale = useOptionalLocale()?.locale ?? "en-US";
+    return useCallback((ms) => formatWorkedDuration(ms, {
+        locale,
+        hour: t("agentChat.duration.hourShort"),
+        minute: t("agentChat.duration.minuteShort"),
+        second: t("agentChat.duration.secondShort"),
+    }), [locale, t]);
 }
 export function WorkedForSummary({ durationMs, defaultOpen = false, autoCollapse = false, children, }) {
+    const t = useT();
+    const formatDuration = useLocalizedWorkedDuration();
     // Ordinary completed work starts closed so a remount never flashes details
     // while auto-collapse settles. Interactive UI opts into an open summary.
     const [open, setOpen] = useState(defaultOpen);
@@ -671,13 +707,16 @@ export function WorkedForSummary({ durationMs, defaultOpen = false, autoCollapse
         }
     }, [autoCollapse, defaultOpen]);
     const label = durationMs != null && durationMs >= 1000
-        ? `Worked for ${formatWorkedDuration(durationMs)}`
-        : "Worked";
+        ? t("agentChat.tool.workedFor", {
+            duration: formatDuration(durationMs),
+        })
+        : t("agentChat.tool.worked");
     return (_jsxs("div", { className: "my-1 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx("span", { children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), _jsx(AnimatedCollapse, { open: open, children: _jsx(WorkSummaryContentContext.Provider, { value: true, children: _jsx("div", { className: "pt-1", children: children }) }) })] }));
 }
 export function RanToolsSummary({ toolCount, motionKey = "summary", children, }) {
+    const t = useT();
     const [open, setOpen] = useState(false);
-    const label = `Ran ${toolCount} ${toolCount === 1 ? "tool" : "tools"}`;
+    const label = t("agentChat.tool.ranTools", { count: toolCount });
     return (_jsxs("div", { className: "agent-tool-summary my-1 w-full", "data-agent-tool-summary": motionKey, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx("span", { className: "agent-tool-summary__label", children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), _jsx(AnimatedCollapse, { open: open, children: _jsx("div", { className: "pt-1", children: children }) })] }));
 }
 // ─── Re-export for AssistantMessage ───────────────────────────────────────────