@agent-native/core 0.154.5 → 0.157.0

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 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: "mr-auto 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 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 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 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 ───────────────────────────────────────────

package/dist/client/chat/widgets/DataChartRenderer.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useT } from "../../i18n.js";
 const DEFAULT_COLORS = [
     "hsl(var(--primary))",
     "hsl(199 89% 48%)",
@@ -105,5 +106,6 @@ function ChartBody({ chart }) {
     return (_jsxs(_Fragment, { children: [axes, paths.map(({ series, color, areaPath }) => chart.type === "area" && areaPath ? (_jsx("path", { d: areaPath, fill: color, opacity: "0.18", stroke: "none" }, series.key)) : null), paths.map(({ series, color, linePath, points }) => (_jsxs("g", { children: [_jsx("path", { d: linePath, fill: "none", stroke: color, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }), points.map((point, index) => (_jsx("circle", { cx: point.x, cy: point.y, r: "3", fill: "hsl(var(--background))", stroke: color, strokeWidth: "2" }, index)))] }, series.key)))] }));
 }
 export function DataChartRenderer({ chart }) {
-    return (_jsx("div", { className: "h-60 w-full min-w-0 overflow-hidden", children: _jsx("svg", { className: "agent-data-chart-renderer h-full w-full", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, role: "img", "aria-label": chart.title ?? "Data chart", preserveAspectRatio: "none", children: _jsx(ChartBody, { chart: chart }) }) }));
+    const t = useT();
+    return (_jsx("div", { className: "h-60 w-full min-w-0 overflow-hidden", children: _jsx("svg", { className: "agent-data-chart-renderer h-full w-full", viewBox: `0 0 ${WIDTH} ${HEIGHT}`, role: "img", "aria-label": chart.title ?? t("agentChat.widget.dataChart"), preserveAspectRatio: "none", children: _jsx(ChartBody, { chart: chart }) }) }));
 }

package/dist/client/chat/widgets/DataChartWidget.js

@@ -1,14 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconChartBar } from "@tabler/icons-react";
 import { lazy, Suspense, useEffect, useState } from "react";
+import { DEFAULT_LOCALE, useOptionalLocale, useT } from "../../i18n.js";
 const LazyDataChartRenderer = lazy(() => import("./DataChartRenderer.js").then((module) => ({
     default: module.DataChartRenderer,
 })));
 export function DataChartWidget({ chart }) {
+    const t = useT();
+    const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
     const [mounted, setMounted] = useState(false);
     useEffect(() => {
         setMounted(true);
     }, []);
-    const fallback = (_jsx("div", { className: "flex h-60 items-center justify-center rounded-md bg-muted/30 text-xs text-muted-foreground", children: "Chart" }));
-    return (_jsxs("div", { className: "my-1.5 overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [_jsx(IconChartBar, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: chart.title ?? "Data chart" }), _jsxs("div", { className: "text-[11px] text-muted-foreground", children: [chart.data.length.toLocaleString(), " point", chart.data.length === 1 ? "" : "s", chart.sampled ? " sampled" : ""] })] })] }), _jsx("div", { className: "p-3", children: !mounted ? (fallback) : (_jsx(Suspense, { fallback: fallback, children: _jsx(LazyDataChartRenderer, { chart: chart }) })) })] }));
+    const fallback = (_jsx("div", { className: "flex h-60 items-center justify-center rounded-md bg-muted/30 text-xs text-muted-foreground", children: t("agentChat.widget.chart") }));
+    return (_jsxs("div", { className: "my-1.5 overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [_jsx(IconChartBar, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: chart.title ?? t("agentChat.widget.dataChart") }), _jsxs("div", { className: "text-[11px] text-muted-foreground", children: [t("agentChat.widget.points", {
+                                        count: chart.data.length,
+                                        formattedCount: chart.data.length.toLocaleString(locale),
+                                    }), chart.sampled ? ` ${t("agentChat.widget.sampled")}` : ""] })] })] }), _jsx("div", { className: "p-3", children: !mounted ? (fallback) : (_jsx(Suspense, { fallback: fallback, children: _jsx(LazyDataChartRenderer, { chart: chart }) })) })] }));
 }

package/dist/client/chat/widgets/DataInsightsWidget.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconDatabase } from "@tabler/icons-react";
+import { useT } from "../../i18n.js";
 import { DataChartWidget } from "./DataChartWidget.js";
 import { DataTableWidget } from "./DataTableWidget.js";
 function SummaryPill({ label, value }) {
@@ -8,7 +9,8 @@ function SummaryPill({ label, value }) {
     return (_jsxs("div", { className: "rounded-md border border-border bg-muted/30 px-2 py-1", children: [_jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "text-xs font-medium text-foreground", children: typeof value === "number" ? value.toLocaleString() : String(value) })] }));
 }
 export function DataInsightsWidget({ result }) {
-    const title = result.display?.title ?? result.title ?? "Data insights";
+    const t = useT();
+    const title = result.display?.title ?? result.title ?? t("agentChat.widget.dataInsights");
     const summary = result.summary ?? {};
     return (_jsxs("div", { className: "my-1.5 space-y-2", children: [_jsxs("div", { className: "rounded-lg border border-border bg-background p-3 text-foreground shadow-sm", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(IconDatabase, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: title }), result.display?.description ? (_jsx("div", { className: "text-xs text-muted-foreground", children: result.display.description })) : null] })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: Object.entries(summary)
                             .filter(([, value]) => typeof value !== "object")

package/dist/client/chat/widgets/DataTableWidget.js

@@ -4,23 +4,26 @@ import { requestAgentSidebarOpen } from "../../agent-sidebar-state.js";
 import { appPath } from "../../api-path.js";
 import { startAgentChatViewTransition } from "../../chat-view-transition.js";
 import { downloadFile, toCSVTable } from "../../db-admin/export-utils.js";
+import { DEFAULT_LOCALE, useOptionalLocale, useT } from "../../i18n.js";
 import { cn } from "../../utils.js";
 const SAFE_ACTION_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
-function formatCell(value) {
+function formatCell(value, locale, booleanLabels = { yes: "Yes", no: "No" }) {
     if (value === undefined || value === null || value === "")
         return "—";
     if (typeof value === "boolean")
-        return value ? "Yes" : "No";
+        return value ? booleanLabels.yes : booleanLabels.no;
     if (typeof value === "number")
-        return value.toLocaleString();
+        return value.toLocaleString(locale);
     if (Array.isArray(value))
-        return value.map(formatCell).join(", ");
+        return value
+            .map((item) => formatCell(item, locale, booleanLabels))
+            .join(", ");
     if (typeof value === "object")
         return JSON.stringify(value);
     const text = String(value);
     const timestamp = Date.parse(text);
     if (Number.isFinite(timestamp) && /^\d{4}-\d{2}-\d{2}T/.test(text)) {
-        return new Intl.DateTimeFormat(undefined, {
+        return new Intl.DateTimeFormat(locale, {
             month: "short",
             day: "numeric",
             hour: "numeric",
@@ -83,6 +86,8 @@ function slugifyFilenamePart(value) {
     return slug || "data-table";
 }
 export function DataTableWidget({ table, action, }) {
+    const t = useT();
+    const locale = useOptionalLocale()?.locale ?? DEFAULT_LOCALE;
     const rows = table.rows ?? [];
     const actionHref = action ? normalizeActionHref(action.href) : null;
     const canExportCsv = table.columns.length > 0;
@@ -92,9 +97,15 @@ export function DataTableWidget({ table, action, }) {
         const stamp = new Date().toISOString().slice(0, 10);
         downloadFile(`${slugifyFilenamePart(table.title)}-${stamp}.csv`, "text/csv;charset=utf-8", toCSVTable(table.columns.map((column) => column.label), rows.map((row) => table.columns.map((column) => row[column.key]))));
     };
-    return (_jsxs("div", { className: "my-1.5 overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [_jsx(IconTable, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: table.title ?? "Data table" }), _jsxs("div", { className: "text-[11px] text-muted-foreground", children: [typeof table.totalRows === "number"
-                                        ? `${table.totalRows.toLocaleString()} row${table.totalRows === 1 ? "" : "s"}`
-                                        : `${rows.length.toLocaleString()} row${rows.length === 1 ? "" : "s"}`, table.truncated ? " sampled" : ""] })] }), action && actionHref ? (_jsxs("a", { href: actionHref, onClick: (event) => {
+    return (_jsxs("div", { className: "my-1.5 overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [_jsx(IconTable, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-medium", children: table.title ?? t("agentChat.widget.dataTable") }), _jsxs("div", { className: "text-[11px] text-muted-foreground", children: [typeof table.totalRows === "number"
+                                        ? t("agentChat.widget.rows", {
+                                            count: table.totalRows,
+                                            formattedCount: table.totalRows.toLocaleString(locale),
+                                        })
+                                        : t("agentChat.widget.rows", {
+                                            count: rows.length,
+                                            formattedCount: rows.length.toLocaleString(locale),
+                                        }), table.truncated ? ` ${t("agentChat.widget.sampled")}` : ""] })] }), action && actionHref ? (_jsxs("a", { href: actionHref, onClick: (event) => {
                             if (event.defaultPrevented ||
                                 event.button !== 0 ||
                                 event.metaKey ||
@@ -106,5 +117,8 @@ export function DataTableWidget({ table, action, }) {
                             }
                             event.preventDefault();
                             navigateSameAppHref(actionHref);
-                        }, className: "inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] font-medium text-foreground no-underline hover:bg-muted hover:no-underline", children: [action.label, _jsx(IconExternalLink, { className: "h-3 w-3" })] })) : null, _jsxs("button", { type: "button", onClick: exportCsv, disabled: !canExportCsv, className: "inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50", children: [_jsx(IconDownload, { className: "h-3 w-3" }), "Download CSV"] })] }), _jsx("div", { className: "max-h-[360px] overflow-auto", children: _jsxs("table", { className: "w-full min-w-[420px] border-collapse text-xs", children: [_jsx("thead", { className: "sticky top-0 z-10 bg-muted/70 backdrop-blur", children: _jsx("tr", { children: table.columns.map((column) => (_jsx("th", { className: cn("border-b border-border px-3 py-2 font-medium text-muted-foreground", column.align === "right" ? "text-right" : "text-left"), children: column.label }, column.key))) }) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, table.columns.length), className: "px-3 py-8 text-center text-muted-foreground", children: "No rows" }) })) : (rows.map((row, rowIndex) => (_jsx("tr", { className: "border-b border-border/70 last:border-0", children: table.columns.map((column) => (_jsx("td", { className: cn("max-w-[260px] px-3 py-2 align-top text-foreground", column.align === "right" ? "text-right" : "text-left"), children: _jsx("span", { className: "line-clamp-3 break-words", children: formatCell(row[column.key]) }) }, `${rowIndex}-${column.key}`))) }, String(row.id ?? rowIndex))))) })] }) })] }));
+                        }, className: "inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-2 py-1 text-[11px] font-medium text-foreground no-underline hover:bg-muted hover:no-underline", children: [action.label, _jsx(IconExternalLink, { className: "h-3 w-3" })] })) : null, _jsxs("button", { type: "button", onClick: exportCsv, disabled: !canExportCsv, className: "inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2 py-1 text-[11px] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50", children: [_jsx(IconDownload, { className: "h-3 w-3" }), t("agentChat.widget.downloadCsv")] })] }), _jsx("div", { className: "max-h-[360px] overflow-auto", children: _jsxs("table", { className: "w-full min-w-[420px] border-collapse text-xs", children: [_jsx("thead", { className: "sticky top-0 z-10 bg-muted/70 backdrop-blur", children: _jsx("tr", { children: table.columns.map((column) => (_jsx("th", { className: cn("border-b border-border px-3 py-2 font-medium text-muted-foreground", column.align === "right" ? "text-right" : "text-left"), children: column.label }, column.key))) }) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(1, table.columns.length), className: "px-3 py-8 text-center text-muted-foreground", children: t("agentChat.widget.noRows") }) })) : (rows.map((row, rowIndex) => (_jsx("tr", { className: "border-b border-border/70 last:border-0", children: table.columns.map((column) => (_jsx("td", { className: cn("max-w-[260px] px-3 py-2 align-top text-foreground", column.align === "right" ? "text-right" : "text-left"), children: _jsx("span", { className: "line-clamp-3 break-words", children: formatCell(row[column.key], locale, {
+                                            yes: t("agentChat.common.yes"),
+                                            no: t("agentChat.common.no"),
+                                        }) }) }, `${rowIndex}-${column.key}`))) }, String(row.id ?? rowIndex))))) })] }) })] }));
 }

package/dist/client/chat/widgets/builtin-tool-renderers.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy, Suspense } from "react";
 import { ACTION_CHAT_UI_DATA_CHART_RENDERER, ACTION_CHAT_UI_DATA_INSIGHTS_RENDERER, ACTION_CHAT_UI_DATA_TABLE_RENDERER, ACTION_CHAT_UI_DATA_WIDGET_RENDERER, ACTION_CHAT_UI_INLINE_EXTENSION_RENDERER, ACTION_CHAT_UI_WORKSPACE_FILE_RENDERER, } from "../../../action-ui.js";
+import { useT } from "../../i18n.js";
 import { registerReservedActionChatRenderer, registerReservedFallbackToolRenderer, } from "../tool-render-registry.js";
 import { DATA_CHART_WIDGET, DATA_INSIGHTS_WIDGET, DATA_TABLE_WIDGET, normalizeDataWidgetKind, normalizeDataWidgetResult, } from "./data-widget-types.js";
 import { normalizeInlineExtensionToolResult } from "./inline-extension-result.js";
@@ -80,7 +81,8 @@ function renderDataWidget(context) {
     return null;
 }
 function BuiltinToolRendererSkeleton({ framed = true }) {
-    return (_jsx("div", { "aria-label": "Loading tool result", className: framed
+    const t = useT();
+    return (_jsx("div", { "aria-label": t("agentChat.widget.loadingToolResult"), className: framed
             ? "my-1.5 h-24 animate-pulse rounded-lg border border-border bg-muted/30"
             : "h-24 animate-pulse bg-muted/30" }));
 }

package/dist/client/chat-first/apps-rail.js

@@ -5,6 +5,11 @@ import { memo, useMemo, useState } from "react";
 import { orderChatFirstAppIds, readChatFirstAppLayout, writeChatFirstAppLayout, } from "../chat-first.js";
 import { cn } from "../utils.js";
 import { defaultChatFirstCopy } from "./copy.js";
+function ChatFirstRailAppIcon({ app, activeAppId, renderIcon, }) {
+    const isActive = activeAppId !== undefined && activeAppId === app.id;
+    const isInactive = activeAppId !== undefined && !isActive;
+    return (_jsx("span", { "data-chat-first-app-icon": true, className: cn("transition-[filter]", isInactive && "grayscale"), children: renderIcon(app, { isActive, isInactive }) }));
+}
 function AppRows({ apps, activeAppId, layout, onDragStart, onDrop, onDragEnd, onOpenApp, onRemoveApp, onTogglePinned, onMove, renderIcon, copy, }) {
     const orderedIds = orderChatFirstAppIds(apps.map((app) => app.id), layout);
     const appsById = new Map(apps.map((app) => [app.id, app]));
@@ -16,7 +21,7 @@ function AppRows({ apps, activeAppId, layout, onDragStart, onDrop, onDragEnd, on
             const pinned = layout.pinnedIds.includes(app.id);
             const index = orderedApps.indexOf(app);
             return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs("li", { draggable: true, "data-chat-first-app": true, "data-app-id": app.id, className: cn("group flex h-8 w-full min-w-0 items-center gap-1 rounded-md px-0 text-sm", active
-                                ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+                                ? "font-medium text-sidebar-foreground"
                                 : "text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onDragStart: (event) => {
                                 event.dataTransfer.effectAllowed = "move";
                                 onDragStart(app.id);
@@ -31,7 +36,7 @@ function AppRows({ apps, activeAppId, layout, onDragStart, onDrop, onDragEnd, on
                                             event.preventDefault();
                                             onMove(app.id, 1);
                                         }
-                                    }, "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown", "aria-label": copy("openApp", { name: app.name }), children: [renderIcon(app), _jsx("span", { className: "truncate", children: app.name })] }), _jsx("button", { type: "button", className: cn("flex size-6 shrink-0 items-center justify-center rounded text-sidebar-foreground/45 opacity-0 hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100 focus-visible:opacity-100", pinned && "text-sidebar-foreground/70 opacity-100"), "aria-label": copy(pinned ? "unpinApp" : "pinApp", {
+                                    }, "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown", "aria-label": copy("openApp", { name: app.name }), children: [_jsx(ChatFirstRailAppIcon, { app: app, activeAppId: activeAppId, renderIcon: renderIcon }), _jsx("span", { className: "truncate", children: app.name })] }), _jsx("button", { type: "button", className: cn("flex size-6 shrink-0 items-center justify-center rounded text-sidebar-foreground/45 opacity-0 hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100 focus-visible:opacity-100", pinned && "text-sidebar-foreground/70 opacity-100"), "aria-label": copy(pinned ? "unpinApp" : "pinApp", {
                                         name: app.name,
                                     }), "aria-pressed": pinned, onClick: () => onTogglePinned(app.id), children: _jsx(IconPin, { size: 13, strokeWidth: pinned ? 2.2 : 1.6, "aria-hidden": "true" }) }), _jsx("span", { className: "sr-only", children: `${index + 1} of ${orderedApps.length}` })] }) }), _jsxs(ContextMenuContent, { children: [_jsxs(ContextMenuItem, { onSelect: () => onTogglePinned(app.id), children: [_jsx(IconPin, { size: 14, "aria-hidden": "true" }), pinned ? copy("removePinned") : copy("pinTop")] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { disabled: index === 0, onSelect: () => onMove(app.id, -1), children: [_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" }), copy("moveUp")] }), _jsxs(ContextMenuItem, { disabled: index === orderedApps.length - 1, onSelect: () => onMove(app.id, 1), children: [_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }), copy("moveDown")] }), onRemoveApp ? (_jsxs(_Fragment, { children: [_jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { onSelect: () => onRemoveApp(app), className: "text-destructive focus:text-destructive", children: [_jsx(IconTrash, { size: 14, "aria-hidden": "true" }), copy("removeApp")] })] })) : null] })] }, app.id));
         }) }));
@@ -96,8 +101,8 @@ export const ChatFirstAppsRail = memo(function ChatFirstAppsRail({ apps, activeA
         return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "flex flex-col items-center gap-1 px-1.5 pt-2", "aria-label": copy("workspaceApps"), children: [createTrigger, loading && apps.length === 0
                     ? [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "size-9 rounded-md" }, index)))
                     : visibleApps.map((app) => (_jsx("button", { type: "button", "data-chat-first-app": true, "data-app-id": app.id, className: cn("flex size-9 items-center justify-center rounded-md", activeAppId === app.id
-                            ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                            : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onClick: () => onOpenApp(app), "aria-label": copy("openApp", { name: app.name }), title: app.name, children: renderIcon(app) }, app.id))), onOpenAllApps ? (_jsx("button", { type: "button", "data-chat-first-all-apps": true, className: "flex size-9 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", onClick: onOpenAllApps, "aria-label": copy("allApps"), title: copy("allApps"), children: _jsx(IconApps, { size: 16, "aria-hidden": "true" }) })) : null, error ? (_jsx("span", { className: "size-1.5 rounded-full bg-destructive", title: error, "aria-label": error })) : null] }));
+                            ? "text-sidebar-foreground"
+                            : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onClick: () => onOpenApp(app), "aria-label": copy("openApp", { name: app.name }), title: app.name, children: _jsx(ChatFirstRailAppIcon, { app: app, activeAppId: activeAppId, renderIcon: renderIcon }) }, app.id))), onOpenAllApps ? (_jsx("button", { type: "button", "data-chat-first-all-apps": true, className: "flex size-9 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", onClick: onOpenAllApps, "aria-label": copy("allApps"), title: copy("allApps"), children: _jsx(IconApps, { size: 16, "aria-hidden": "true" }) })) : null, error ? (_jsx("span", { className: "size-1.5 rounded-full bg-destructive", title: error, "aria-label": error })) : null] }));
     }
     return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "mt-3 px-2 pb-2 pt-2", "aria-label": copy("workspaceApps"), children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 px-2 text-[11px] font-medium text-sidebar-foreground/50", children: [_jsx("span", { children: copy("workspaceApps") }), _jsx("span", { className: "ml-auto", children: createTrigger })] }), loading && apps.length === 0 ? (_jsx("div", { className: "space-y-0.5 px-2", children: [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "h-8 w-full rounded-md" }, index))) })) : apps.length === 0 ? (_jsxs("div", { className: "px-2", children: [_jsx("p", { className: "text-xs text-sidebar-foreground/55", children: copy("noWorkspaceApps") }), createAppTrigger ? (createTrigger) : onCreateApp ? (_jsxs("button", { type: "button", className: "mt-1 inline-flex h-6 items-center gap-1.5 rounded-md border border-sidebar-border px-2 text-xs text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onCreateApp, children: [_jsx(IconPlus, { size: 13, "aria-hidden": "true" }), copy("createApp")] })) : (createTrigger)] })) : (_jsx(AppRows, { apps: visibleApps, activeAppId: activeAppId, layout: layout, onDragStart: setDraggedAppId, onDrop: reorderApps, onDragEnd: () => setDraggedAppId(null), onOpenApp: onOpenApp, onRemoveApp: onRemoveApp, onTogglePinned: togglePinned, onMove: moveApp, renderIcon: renderIcon, copy: copy })), hasMoreApps || showAllApps ? (_jsxs("button", { type: "button", className: "mt-0.5 flex h-8 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: () => setShowAllApps((value) => !value), children: [showAllApps ? (_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" })) : (_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" })), showAllApps ? copy("showLess") : copy("showMore")] })) : null, onOpenAllApps ? (_jsx("div", { className: "mt-1 border-t border-sidebar-border/60 pt-1", children: _jsxs("button", { type: "button", "data-chat-first-all-apps": true, className: "flex h-8 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onOpenAllApps, children: [_jsx(IconApps, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: copy("allApps") })] }) })) : null, error ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "mt-1 flex items-center gap-1 px-2 text-[10px] text-destructive/80", onClick: onRetry, "aria-label": error, children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), onRetry ? copy("retry") : copy("appsLoadError")] }) }), _jsx(TooltipContent, { side: "right", children: error })] })) : null] }));
 });

package/dist/client/chat-first/primary-nav.d.ts

@@ -1,11 +1,12 @@
 import type { ChatFirstCopy } from "./types.js";
 export type ChatFirstPrimaryTab = "new-chat" | "integrations" | "scheduled";
-export declare function ChatFirstPrimaryNavigation({ onNewChat, onOpenIntegrations, onOpenScheduled, onSearch, activeTab, stickyNewChat, copy, }: {
+export declare function ChatFirstPrimaryNavigation({ onNewChat, onOpenIntegrations, onOpenScheduled, onSearch, activeTab, collapsed, stickyNewChat, copy, }: {
     onNewChat?: () => void;
     onOpenIntegrations: () => void;
     onOpenScheduled: () => void;
     onSearch?: () => void;
     activeTab?: ChatFirstPrimaryTab;
+    collapsed?: boolean;
     stickyNewChat?: boolean;
     copy?: ChatFirstCopy;
 }): import("react").JSX.Element;