@agent-native/core 0.155.0 → 0.157.1

package/dist/client/chat/message-components.js

@@ -14,6 +14,8 @@ import { writeClipboardText } from "../clipboard.js";
 import { Dialog, DialogClose, DialogContent, DialogTitle, } from "../components/ui/dialog.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../components/ui/dropdown-menu.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../components/ui/tooltip.js";
+import { localizeKnownChatErrorText } from "../error-format.js";
+import { DEFAULT_LOCALE, useFormatters, useOptionalLocale, useT, } from "../i18n.js";
 import { ThumbsFeedback } from "../observability/ThumbsFeedback.js";
 import { McpConnectionSuggestion } from "../resources/McpConnectionSuggestion.js";
 import { isCallAgentToolCallShadowed, isToolCallActive, shadowedCallAgentToolCallIds, } from "../tool-display.js";
@@ -21,7 +23,7 @@ import { cn } from "../utils.js";
 import { MarkdownText, renderMarkdownToClipboardHtml, SmoothMarkdownText, } from "./markdown-renderer.js";
 import { getAssistantRunDurationMs } from "./repo-helpers.js";
 import { getRunErrorMetadata, runErrorHeadline, runErrorKey, } from "./run-recovery.js";
-import { ToolCallFallback, ToolActivityPresentation, ToolCallStackMotion, FilesChangedSummary, ASSISTANT_VISIBLE_TOOL_CALL_LIMIT, ChatRunningContext, ChatRunningRunIdContext, ChatRunningTurnIdContext, ChatRunDurationContext, formatWorkedDuration, ReasoningCell, WorkedForSummary, toolCallHasPendingApproval, } from "./tool-call-display.js";
+import { ToolCallFallback, ToolActivityPresentation, ToolCallStackMotion, FilesChangedSummary, ASSISTANT_VISIBLE_TOOL_CALL_LIMIT, ChatRunningContext, ChatRunningRunIdContext, ChatRunningTurnIdContext, ChatRunDurationContext, ReasoningCell, useLocalizedWorkedDuration, WorkedForSummary, toolCallHasPendingApproval, } from "./tool-call-display.js";
 export { toolCallHasPendingApproval };
 // ─── Pending selection context key ───────────────────────────────────────────
 // Mirrored from AssistantChat to avoid a cross-import on a private constant.
@@ -29,7 +31,7 @@ const PENDING_SELECTION_KEY = "pending-selection-context";
 // ─── displayableUserMessageText ───────────────────────────────────────────────
 export function displayableUserMessageText(text) {
     return text
-        .replace(/<context\b[^>]*>[\s\S]*?<\/context>\n?/gi, "")
+        .replace(/<context\b[^>]*>[\s\S]*?<\/context>\n?/gi, "") // i18n-ignore -- parsing regex, not UI copy.
         .replace(/<context\b[^>]*>[\s\S]*$/gi, "")
         .replace(/<\/context>/gi, "")
         .trim();
@@ -56,14 +58,14 @@ function isSameCalendarDay(a, b) {
         a.getMonth() === b.getMonth() &&
         a.getDate() === b.getDate());
 }
-export function formatMessageTimestamp(value) {
+export function formatMessageTimestamp(value, locale, yesterdayLabel = "Yesterday") {
     const date = coerceMessageDate(value);
     if (!date)
         return null;
     const now = new Date();
     const yesterday = new Date(now);
     yesterday.setDate(now.getDate() - 1);
-    const time = new Intl.DateTimeFormat(undefined, {
+    const time = new Intl.DateTimeFormat(locale, {
         hour: "numeric",
         minute: "2-digit",
     }).format(date);
@@ -72,16 +74,16 @@ export function formatMessageTimestamp(value) {
         short = time;
     }
     else if (isSameCalendarDay(date, yesterday)) {
-        short = `Yesterday ${time}`;
+        short = `${yesterdayLabel} ${time}`;
     }
     else if (date.getFullYear() === now.getFullYear()) {
-        short = `${new Intl.DateTimeFormat(undefined, {
+        short = `${new Intl.DateTimeFormat(locale, {
             month: "short",
             day: "numeric",
         }).format(date)}, ${time}`;
     }
     else {
-        short = `${new Intl.DateTimeFormat(undefined, {
+        short = `${new Intl.DateTimeFormat(locale, {
             month: "short",
             day: "numeric",
             year: "numeric",
@@ -89,7 +91,7 @@ export function formatMessageTimestamp(value) {
     }
     return {
         short,
-        full: new Intl.DateTimeFormat(undefined, {
+        full: new Intl.DateTimeFormat(locale, {
             weekday: "short",
             month: "short",
             day: "numeric",
@@ -104,6 +106,8 @@ export function MessageTimestamp({ timestamp, className, }) {
 }
 // ─── SelectionAttachedPill ────────────────────────────────────────────────────
 export function SelectionAttachedPill() {
+    const t = useT();
+    const { formatNumber } = useFormatters();
     const [length, setLength] = useState(null);
     useEffect(() => {
         let cancelled = false;
@@ -140,7 +144,10 @@ export function SelectionAttachedPill() {
     }, []);
     if (length === null || length === 0)
         return null;
-    return (_jsx("div", { className: "agent-selection-attached-pill shrink-0 px-3 pt-1.5 -mb-1", children: _jsxs("div", { className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-muted/50 px-2 py-0.5 text-[11px] text-muted-foreground", children: [_jsx(IconQuote, { size: 11 }), _jsxs("span", { children: [length.toLocaleString(), " chars of selection attached"] }), _jsx("button", { type: "button", "aria-label": "Clear selection context", onClick: () => {
+    return (_jsx("div", { className: "agent-selection-attached-pill shrink-0 px-3 pt-1.5 -mb-1", children: _jsxs("div", { className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-muted/50 px-2 py-0.5 text-[11px] text-muted-foreground", children: [_jsx(IconQuote, { size: 11 }), _jsx("span", { children: t("agentChat.selection.attached", {
+                        count: length,
+                        formattedCount: formatNumber(length),
+                    }) }), _jsx("button", { type: "button", "aria-label": t("agentChat.selection.clear"), onClick: () => {
                         setLength(null);
                         // Dispatch clear event; AssistantChat owns the DELETE call.
                         window.dispatchEvent(new CustomEvent("agent-panel:selection-clear-requested"));
@@ -193,7 +200,8 @@ export function resolveAssistantRequestId(message, activeRun, threadId) {
 }
 // ─── MessageBranchPicker ──────────────────────────────────────────────────────
 export function MessageBranchPicker() {
-    return (_jsxs(BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: "flex items-center gap-0.5 text-[11px] text-muted-foreground", children: [_jsx(BranchPickerPrimitive.Previous, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Previous branch", className: "flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40", children: _jsx(IconChevronLeft, { className: "h-3.5 w-3.5" }) }) }), _jsxs("span", { className: "tabular-nums select-none", children: [_jsx(BranchPickerPrimitive.Number, {}), "/", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Next branch", className: "flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40", children: _jsx(IconChevronRight, { className: "h-3.5 w-3.5" }) }) })] }));
+    const t = useT();
+    return (_jsxs(BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: "flex items-center gap-0.5 text-[11px] text-muted-foreground", children: [_jsx(BranchPickerPrimitive.Previous, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("agentChat.message.previousBranch"), className: "flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40", children: _jsx(IconChevronLeft, { className: "h-3.5 w-3.5" }) }) }), _jsxs("span", { className: "tabular-nums select-none", children: [_jsx(BranchPickerPrimitive.Number, {}), "/", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("agentChat.message.nextBranch"), className: "flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40", children: _jsx(IconChevronRight, { className: "h-3.5 w-3.5" }) }) })] }));
 }
 // ─── Mention rendering ────────────────────────────────────────────────────────
 const mentionIconProps = {
@@ -299,23 +307,27 @@ function UserMessageAttachments() {
         }) }));
 }
 export function ChatImageAttachmentPreview({ src, alt, }) {
+    const t = useT();
     const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": `Preview ${alt}`, title: alt, onClick: () => setOpen(true), className: "h-16 w-16 cursor-zoom-in overflow-hidden rounded-lg border border-border/70 bg-muted/50 p-0 transition-[border-color,box-shadow] hover:border-foreground/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx("img", { src: src, alt: alt, className: "h-full w-full object-cover" }) }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { hideClose: true, "aria-describedby": undefined, className: "fixed inset-0 left-0 top-0 flex h-screen max-h-none w-screen max-w-none translate-x-0 translate-y-0 items-center justify-center gap-0 overflow-hidden rounded-none border-0 bg-foreground/90 p-0 text-background shadow-none backdrop-blur-sm dark:bg-background/95 dark:text-foreground", onOpenAutoFocus: (event) => event.preventDefault(), children: [_jsx(DialogTitle, { className: "sr-only", children: alt || "Image preview" }), _jsx("div", { className: "flex h-full w-full items-center justify-center overflow-auto p-6", onClick: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": t("agentChat.composer.previewAttachment", { name: alt }), title: alt, onClick: () => setOpen(true), className: "h-16 w-16 cursor-zoom-in overflow-hidden rounded-lg border border-border/70 bg-muted/50 p-0 transition-[border-color,box-shadow] hover:border-foreground/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx("img", { src: src, alt: alt, className: "h-full w-full object-cover" }) }), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { hideClose: true, "aria-describedby": undefined, className: "fixed inset-0 left-0 top-0 flex h-screen max-h-none w-screen max-w-none translate-x-0 translate-y-0 items-center justify-center gap-0 overflow-hidden rounded-none border-0 bg-foreground/90 p-0 text-background shadow-none backdrop-blur-sm dark:bg-background/95 dark:text-foreground", onOpenAutoFocus: (event) => event.preventDefault(), children: [_jsx(DialogTitle, { className: "sr-only", children: alt || t("agentChat.composer.imagePreview") }), _jsx("div", { className: "flex h-full w-full items-center justify-center overflow-auto p-6", onClick: (event) => {
                                 if (event.target === event.currentTarget)
                                     setOpen(false);
-                            }, children: _jsx("img", { src: src, alt: alt, draggable: false, className: "max-h-[90vh] max-w-[92vw] rounded-lg object-contain shadow-2xl" }) }), _jsx(DialogClose, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Close image preview", className: "absolute end-4 top-4 inline-flex size-9 items-center justify-center rounded-full border border-background/25 bg-background/10 text-background transition-colors hover:bg-background/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:border-foreground/25 dark:bg-foreground/10 dark:text-foreground dark:hover:bg-foreground/20", children: _jsx(IconX, { className: "size-4" }) }) })] }) })] }));
+                            }, children: _jsx("img", { src: src, alt: alt, draggable: false, className: "max-h-[90vh] max-w-[92vw] rounded-lg object-contain shadow-2xl" }) }), _jsx(DialogClose, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("agentChat.composer.closePreview"), className: "absolute end-4 top-4 inline-flex size-9 items-center justify-center rounded-full border border-background/25 bg-background/10 text-background transition-colors hover:bg-background/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring dark:border-foreground/25 dark:bg-foreground/10 dark:text-foreground dark:hover:bg-foreground/20", children: _jsx(IconX, { className: "size-4" }) }) })] }) })] }));
 }
 // ─── UserMessageEditComposer ──────────────────────────────────────────────────
 function UserMessageEditComposer() {
-    return (_jsxs(ComposerPrimitive.Root, { className: "flex flex-col gap-2 rounded-lg border border-border bg-background px-3 py-2 shadow-sm", children: [_jsx(ComposerPrimitive.Input, { className: "w-full resize-none bg-transparent text-sm leading-relaxed text-foreground placeholder:text-muted-foreground focus:outline-none", rows: 1, submitMode: "enter" }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx("button", { type: "button", className: "cursor-pointer rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground", children: "Cancel" }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx("button", { type: "submit", className: "cursor-pointer rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background hover:opacity-90 disabled:opacity-50", children: "Save" }) })] })] }));
+    const t = useT();
+    return (_jsxs(ComposerPrimitive.Root, { className: "flex flex-col gap-2 rounded-lg border border-border bg-background px-3 py-2 shadow-sm", children: [_jsx(ComposerPrimitive.Input, { className: "w-full resize-none bg-transparent text-sm leading-relaxed text-foreground placeholder:text-muted-foreground focus:outline-none", rows: 1, submitMode: "enter" }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx("button", { type: "button", className: "cursor-pointer rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground", children: t("agentChat.common.cancel") }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx("button", { type: "submit", className: "cursor-pointer rounded-md bg-foreground px-2 py-1 text-xs font-medium text-background hover:opacity-90 disabled:opacity-50", children: t("agentChat.common.save") }) })] })] }));
 }
 // ─── MessageActionsMenu ────────────────────────────────────────────────────────
 export function MessageActionsMenu({ showRevert, onRevert, threadId = "", } = {}) {
+    const t = useT();
+    const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
     const [open, setOpen] = useState(false);
     const [copied, setCopied] = useState(null);
     const messageRuntime = useMessageRuntime();
     const actionsCtx = React.useContext(MessageActionsContext);
-    const timestamp = formatMessageTimestamp(messageRuntime.getState().createdAt);
+    const timestamp = formatMessageTimestamp(messageRuntime.getState().createdAt, locale, t("agentChat.history.yesterday"));
     const handleCopyMessage = useCallback(() => {
         const m = messageRuntime.getState();
         const text = m.content
@@ -362,28 +374,32 @@ export function MessageActionsMenu({ showRevert, onRevert, threadId = "", } = {}
         setOpen(false);
         onRevert?.();
     }, [onRevert]);
-    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { "aria-label": "Message actions", className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground", open && "bg-accent text-foreground"), children: _jsx(IconDots, { className: "h-3.5 w-3.5" }) }) }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 6, className: "w-48 rounded-lg border-border p-1.5 shadow-xl", children: [actionsCtx?.onForkChat && (_jsxs(DropdownMenuItem, { onSelect: handleForkChat, children: [_jsx(IconGitFork, { className: "h-3.5 w-3.5" }), "Fork Chat"] })), _jsxs(DropdownMenuItem, { onSelect: (e) => {
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { "aria-label": t("agentChat.message.actions"), className: cn("flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors duration-150 hover:bg-accent hover:text-foreground", open && "bg-accent text-foreground"), children: _jsx(IconDots, { className: "h-3.5 w-3.5" }) }) }), _jsxs(DropdownMenuContent, { align: "start", sideOffset: 6, className: "w-48 rounded-lg border-border p-1.5 shadow-xl", children: [actionsCtx?.onForkChat && (_jsxs(DropdownMenuItem, { onSelect: handleForkChat, children: [_jsx(IconGitFork, { className: "h-3.5 w-3.5" }), t("agentChat.message.forkChat")] })), _jsxs(DropdownMenuItem, { onSelect: (e) => {
                             e.preventDefault();
                             handleCopyMessage();
-                        }, children: [copied === "message" ? (_jsx(IconCheck, { className: "h-3.5 w-3.5" })) : (_jsx(IconCopy, { className: "h-3.5 w-3.5" })), copied === "message" ? "Copied!" : "Copy Message"] }), _jsxs(DropdownMenuItem, { onSelect: (e) => {
+                        }, children: [copied === "message" ? (_jsx(IconCheck, { className: "h-3.5 w-3.5" })) : (_jsx(IconCopy, { className: "h-3.5 w-3.5" })), copied === "message"
+                                ? t("agentChat.common.copied")
+                                : t("agentChat.message.copyMessage")] }), _jsxs(DropdownMenuItem, { onSelect: (e) => {
                             e.preventDefault();
                             handleCopyRequestId();
                         }, children: [copied === "id" ? (_jsx(IconCheck, { className: "h-3.5 w-3.5" })) : (_jsx(IconId, { className: "h-3.5 w-3.5" })), copied === "id"
-                                ? "Copied!"
+                                ? t("agentChat.common.copied")
                                 : copied === "id-unavailable"
-                                    ? "Request ID unavailable"
+                                    ? t("agentChat.message.requestIdUnavailable")
                                     : copied === "id-failed"
-                                        ? "Copy failed"
-                                        : "Copy Request ID"] }), showRevert && (_jsxs(DropdownMenuItem, { onSelect: handleRevert, children: [_jsx(IconArrowBackUp, { className: "h-3.5 w-3.5" }), "Revert to here"] })), timestamp && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuLabel, { className: "px-2 py-1 text-[11px] font-normal text-muted-foreground", children: ["Sent ", timestamp.short] })] }))] })] }));
+                                        ? t("agentChat.recovery.copyFailed")
+                                        : t("agentChat.message.copyRequestId")] }), showRevert && (_jsxs(DropdownMenuItem, { onSelect: handleRevert, children: [_jsx(IconArrowBackUp, { className: "h-3.5 w-3.5" }), t("agentChat.message.revertHere")] })), timestamp && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "px-2 py-1 text-[11px] font-normal text-muted-foreground", children: t("agentChat.message.sentAt", { time: timestamp.short }) })] }))] })] }));
 }
 // ─── UserMessage ──────────────────────────────────────────────────────────────
 export function UserMessage() {
+    const t = useT();
+    const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
     const [expanded, setExpanded] = useState(false);
     const [isExpandable, setIsExpandable] = useState(false);
     const contentRef = useRef(null);
     const messageRuntime = useMessageRuntime();
     const message = messageRuntime.getState();
-    const timestamp = formatMessageTimestamp(message.createdAt);
+    const timestamp = formatMessageTimestamp(message.createdAt, locale, t("agentChat.history.yesterday"));
     const isEditing = useComposer((state) => state.isEditing);
     const chatRunning = React.useContext(ChatRunningContext);
     const hidden = isHiddenUserMessage(message);
@@ -429,7 +445,9 @@ export function UserMessage() {
                         e.clipboardData.setData("text/plain", div.textContent || "");
                     }, children: [_jsx("div", { ref: contentRef, className: cn("whitespace-pre-wrap break-words", !expanded && isExpandable && "max-h-[200px] overflow-hidden"), children: _jsx(MessagePrimitive.Parts, { components: {
                                     Text: UserMessageText,
-                                } }) }), !expanded && isExpandable && (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-14 rounded-b-lg bg-gradient-to-t from-accent via-accent/90 to-transparent" })), !chatRunning && hasDisplayableText && (_jsx(TooltipProvider, { delayDuration: 400, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(ActionBarPrimitive.Edit, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Edit message", className: "absolute -left-8 top-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/0 transition-colors duration-150 group-hover:text-muted-foreground/70 group-hover:hover:bg-accent group-hover:hover:text-foreground", children: _jsx(IconPencil, { className: "h-3.5 w-3.5" }) }) }) }), _jsx(TooltipContent, { side: "left", className: "text-xs", children: "Edit message" })] }) }))] })), hasDisplayableText && isExpandable && (_jsxs("button", { type: "button", onClick: () => setExpanded((prev) => !prev), className: "mt-1 inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: [_jsx(IconChevronDown, { className: cn("h-3.5 w-3.5 transition-transform", expanded && "rotate-180") }), expanded ? "Collapse" : "Expand"] })), _jsxs("div", { className: "mt-1 flex items-center justify-end gap-1", children: [_jsx(MessageBranchPicker, {}), timestamp && (_jsx(MessageTimestamp, { timestamp: timestamp, className: messageFooterFadeClassName }))] })] }) }));
+                                } }) }), !expanded && isExpandable && (_jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-14 rounded-b-lg bg-gradient-to-t from-accent via-accent/90 to-transparent" })), !chatRunning && hasDisplayableText && (_jsx(TooltipProvider, { delayDuration: 400, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(ActionBarPrimitive.Edit, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("agentChat.message.edit"), className: "absolute -left-8 top-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/0 transition-colors duration-150 group-hover:text-muted-foreground/70 group-hover:hover:bg-accent group-hover:hover:text-foreground", children: _jsx(IconPencil, { className: "h-3.5 w-3.5" }) }) }) }), _jsx(TooltipContent, { side: "left", className: "text-xs", children: t("agentChat.message.edit") })] }) }))] })), hasDisplayableText && isExpandable && (_jsxs("button", { type: "button", onClick: () => setExpanded((prev) => !prev), className: "mt-1 inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] font-medium text-muted-foreground hover:text-foreground", children: [_jsx(IconChevronDown, { className: cn("h-3.5 w-3.5 transition-transform", expanded && "rotate-180") }), expanded
+                            ? t("agentChat.common.collapse")
+                            : t("agentChat.common.expand")] })), _jsxs("div", { className: "mt-1 flex items-center justify-end gap-1", children: [_jsx(MessageBranchPicker, {}), timestamp && (_jsx(MessageTimestamp, { timestamp: timestamp, className: messageFooterFadeClassName }))] })] }) }));
 }
 // ─── AssistantMessage ─────────────────────────────────────────────────────────
 function assistantMessageHasRenderableContent(message) {
@@ -790,17 +808,27 @@ export function shouldShowInlineRunError({ runError, bannerRunErrorKey, }) {
     return runErrorKey(runError) !== bannerRunErrorKey;
 }
 export function InlineRunErrorNotice({ info, durationMs, onRetry, }) {
+    const t = useT();
+    const formatDuration = useLocalizedWorkedDuration();
     const [open, setOpen] = useState(false);
-    const headline = runErrorHeadline(info);
+    const headline = runErrorHeadline(info, {
+        recoverable: t("agentChat.error.stopped"),
+        terminal: t("agentChat.error.failed"),
+    });
     const label = durationMs != null && durationMs >= 1000
-        ? `${headline} after ${formatWorkedDuration(durationMs)}`
+        ? t("agentChat.error.afterDuration", {
+            headline,
+            duration: formatDuration(durationMs),
+        })
         : headline;
-    return (_jsxs("div", { className: "my-1 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex cursor-pointer items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(IconAlertTriangle, { className: "size-3.5 shrink-0 text-amber-500" }), _jsx("span", { className: "truncate", children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), open && (_jsxs("div", { className: "mt-1 rounded-md border border-border/60 bg-background/70 p-2 text-[11px] leading-relaxed text-muted-foreground", children: [_jsx("p", { className: "whitespace-pre-wrap break-words", children: info.message }), info.errorCode && (_jsxs("div", { className: "mt-1 font-mono", children: ["code: ", info.errorCode] })), info.runId && _jsxs("div", { className: "font-mono", children: ["run: ", info.runId] }), info.details && (_jsx("pre", { className: "mt-1 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono", children: info.details })), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: "mt-2 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-[11px] font-medium text-foreground hover:bg-accent", children: [_jsx(IconRefresh, { className: "size-3" }), "Retry"] }))] }))] }));
+    return (_jsxs("div", { className: "my-1 w-full", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), "aria-expanded": open, className: "flex cursor-pointer items-center gap-1.5 py-0.5 text-[13px] text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(IconAlertTriangle, { className: "size-3.5 shrink-0 text-amber-500" }), _jsx("span", { className: "truncate", children: label }), _jsx(IconChevronRight, { className: cn("size-3.5 shrink-0 transition-transform", open && "rotate-90") })] }), open && (_jsxs("div", { className: "mt-1 rounded-md border border-border/60 bg-background/70 p-2 text-[11px] leading-relaxed text-muted-foreground", children: [_jsx("p", { className: "whitespace-pre-wrap break-words", children: localizeKnownChatErrorText(info.message, t) }), info.errorCode && (_jsxs("div", { className: "mt-1 font-mono", children: ["code: ", info.errorCode] })), info.runId && _jsxs("div", { className: "font-mono", children: ["run: ", info.runId] }), info.details && (_jsx("pre", { className: "mt-1 max-h-28 overflow-auto whitespace-pre-wrap break-words font-mono", children: info.details })), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: "mt-2 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-[11px] font-medium text-foreground hover:bg-accent", children: [_jsx(IconRefresh, { className: "size-3" }), t("agentChat.common.retry")] }))] }))] }));
 }
 function MissingFinalResponseNotice({ messageId, text, animate, onRevealComplete, }) {
     return (_jsx("div", { className: "my-1 w-full text-muted-foreground", role: "status", "aria-live": "polite", "data-testid": "missing-final-response", children: _jsx(SmoothMarkdownText, { text: text, streaming: animate, resetKey: `missing-final-response:${messageId}`, statusType: animate ? "running" : "complete", onRevealComplete: animate ? onRevealComplete : undefined }) }));
 }
 export function AssistantMessage() {
+    const t = useT();
+    const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
     const [restoreState, setRestoreState] = useState("idle");
     const [restoreError, setRestoreError] = useState(null);
     const messageRuntime = useMessageRuntime();
@@ -811,7 +839,7 @@ export function AssistantMessage() {
     const lastRunDurationMs = React.useContext(ChatRunDurationContext);
     const msg = messageRuntime.getState();
     const persistedDurationMs = getAssistantRunDurationMs(msg);
-    const timestamp = formatMessageTimestamp(msg.createdAt);
+    const timestamp = formatMessageTimestamp(msg.createdAt, locale, t("agentChat.history.yesterday"));
     const isLast = msg.isLast;
     const wasLiveRef = useRef(false);
     const messageRunId = assistantMessageRunId(msg);
@@ -848,12 +876,12 @@ export function AssistantMessage() {
     const showMissingFinalResponse = useSettledFlag(missingFinalResponseCandidate, isLast ? MISSING_FINAL_RESPONSE_SETTLE_MS : 0);
     const shouldShowUserStoppedNotice = isUserStoppedRun && isLast && responseConnectionText.trim().length === 0;
     const missingFinalResponseNoticeText = shouldShowUserStoppedNotice
-        ? "Stopped"
+        ? t("agentChat.error.stopped")
         : isUserStoppedRun
             ? null
             : (missingWarningText ??
                 (showMissingFinalResponse
-                    ? "The agent stopped without sending a final message. Ask the agent to continue or retry."
+                    ? t("agentChat.message.missingFinal")
                     : null));
     const animateMissingFinalResponse = Boolean(isLast && missingFinalResponseNoticeText && wasLiveRef.current);
     const missingFinalResponseAnimationKey = animateMissingFinalResponse
@@ -950,7 +978,7 @@ export function AssistantMessage() {
         if (restoreState !== "confirming" || !cpCtx)
             return;
         if (!messageRunId) {
-            setRestoreError("This message has no run to restore to.");
+            setRestoreError(t("agentChat.message.noRestoreRun"));
             setRestoreState("error");
             return;
         }
@@ -968,14 +996,18 @@ export function AssistantMessage() {
             const payload = (await restoreRes.json().catch(() => null));
             setRestoreError(typeof payload?.error === "string"
                 ? payload.error
-                : `Restore failed (${restoreRes.status}).`);
+                : t("agentChat.message.restoreFailed", {
+                    status: restoreRes.status,
+                }));
             setRestoreState("error");
         }
         catch (err) {
-            setRestoreError(err instanceof Error ? err.message : "Restore request failed.");
+            setRestoreError(err instanceof Error
+                ? err.message
+                : t("agentChat.message.restoreRequestFailed"));
             setRestoreState("error");
         }
-    }, [restoreState, cpCtx, messageRunId]);
+    }, [restoreState, cpCtx, messageRunId, t]);
     const cancelRestore = useCallback(() => {
         setRestoreError(null);
         setRestoreState("idle");
@@ -1050,12 +1082,14 @@ export function AssistantMessage() {
                             ? messageActions?.onRetryRunError
                             : undefined })), missingWarningText == null &&
                         missingFinalResponseNoticeText != null &&
-                        !showInlineRunError && (_jsx(MissingFinalResponseNotice, { messageId: msg.id, text: missingFinalResponseNoticeText, animate: animateMissingFinalResponse, onRevealComplete: handleMissingFinalResponseReveal })), isComplete && hasCodeAgentTools && msgContent && (_jsx(FilesChangedSummary, { parts: msgContent }))] }), isComplete && (_jsxs("div", { className: "mt-1 flex items-center justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(MessageActionsMenu, { showRevert: showRestore && restoreState === "idle", onRevert: handleRestore, threadId: cpCtx?.threadId ?? "" }), isLast && (_jsx(TooltipProvider, { delayDuration: 400, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Regenerate response", className: `flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground ${messageFooterFadeClassName} disabled:cursor-not-allowed disabled:opacity-40`, children: _jsx(IconRefresh, { className: "h-3.5 w-3.5" }) }) }) }), _jsx(TooltipContent, { side: "top", className: "text-xs", children: "Regenerate response" })] }) })), _jsx(MessageBranchPicker, {}), timestamp && (_jsx(MessageTimestamp, { timestamp: timestamp, className: messageFooterFadeClassName }))] }), 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..."] })) : restoreState === "error" ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-destructive", children: [_jsx(IconAlertTriangle, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", children: restoreError }), _jsx("button", { onClick: cancelRestore, className: "cursor-pointer rounded-md px-1.5 py-0.5 text-muted-foreground hover:bg-accent", children: "Dismiss" })] })) : (_jsx(ThumbsFeedback, { threadId: cpCtx?.threadId ?? "", runId: messageRunId ?? "", messageSeq: msg.index }))] }))] }));
+                        !showInlineRunError && (_jsx(MissingFinalResponseNotice, { messageId: msg.id, text: missingFinalResponseNoticeText, animate: animateMissingFinalResponse, onRevealComplete: handleMissingFinalResponseReveal })), isComplete && hasCodeAgentTools && msgContent && (_jsx(FilesChangedSummary, { parts: msgContent }))] }), isComplete && (_jsxs("div", { className: "mt-1 flex items-center justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(MessageActionsMenu, { showRevert: showRestore && restoreState === "idle", onRevert: handleRestore, threadId: cpCtx?.threadId ?? "" }), isLast && (_jsx(TooltipProvider, { delayDuration: 400, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("agentChat.message.regenerate"), className: `flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-foreground ${messageFooterFadeClassName} disabled:cursor-not-allowed disabled:opacity-40`, children: _jsx(IconRefresh, { className: "h-3.5 w-3.5" }) }) }) }), _jsx(TooltipContent, { side: "top", className: "text-xs", children: t("agentChat.message.regenerate") })] }) })), _jsx(MessageBranchPicker, {}), timestamp && (_jsx(MessageTimestamp, { timestamp: timestamp, className: messageFooterFadeClassName }))] }), 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: t("agentChat.message.restoreQuestion") }), _jsx("button", { onClick: cancelRestore, className: "rounded-md px-1.5 py-0.5 text-muted-foreground hover:bg-accent", children: t("agentChat.common.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" }), t("agentChat.message.restoring")] })) : restoreState === "error" ? (_jsxs("span", { className: "flex items-center gap-1 text-xs text-destructive", children: [_jsx(IconAlertTriangle, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", children: restoreError }), _jsx("button", { onClick: cancelRestore, className: "cursor-pointer rounded-md px-1.5 py-0.5 text-muted-foreground hover:bg-accent", children: t("agentChat.common.dismiss") })] })) : (_jsx(ThumbsFeedback, { threadId: cpCtx?.threadId ?? "", runId: messageRunId ?? "", messageSeq: msg.index }))] }))] }));
 }
 // ─── RunningActivityStatus / ThinkingIndicator ────────────────────────────────
 export function RunningActivityStatus({ label }) {
     return (_jsx("div", { className: "agent-running-activity", children: _jsx(ThinkingIndicator, { label: label }) }));
 }
-export function ThinkingIndicator({ label = "Thinking", } = {}) {
-    return (_jsx("div", { className: "agent-thinking-indicator", role: "status", "aria-live": "polite", "aria-label": label, children: _jsx("span", { className: "agent-thinking-indicator__text", children: label }) }));
+export function ThinkingIndicator({ label } = {}) {
+    const t = useT();
+    const resolvedLabel = label ?? t("agentChat.status.thinking");
+    return (_jsx("div", { className: "agent-thinking-indicator", role: "status", "aria-live": "polite", "aria-label": resolvedLabel, children: _jsx("span", { className: "agent-thinking-indicator__text", children: resolvedLabel }) }));
 }

package/dist/client/chat/run-recovery.d.ts

@@ -16,7 +16,10 @@ export declare function getRunErrorMetadata(message: unknown): RunErrorInfo | nu
  * the same run is never announced twice.
  */
 export declare function runErrorKey(info: RunErrorInfo): string;
-export declare function runErrorHeadline(info: RunErrorInfo): string;
+export declare function runErrorHeadline(info: RunErrorInfo, labels?: {
+    recoverable: string;
+    terminal: string;
+}): string;
 export declare function getRequestModeMetadata(message: unknown): "act" | "plan" | null;
 export declare function BuilderConnectCta({ variant, onConnected, }: {
     variant?: "primary" | "compact";

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 })] }))] }) }));
 }