@datalayer/agent-runtimes 1.3.83 → 1.3.85

package/lib/chat/base/loopElement.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Where an element of an application's code shows (LOOP P-18): in a side
+ * panel beside the conversation, or on a page of its own over it. Inline,
+ * an element is a message, and the chat draws it as one (P-04).
+ *
+ * The session API says it with a `CUSTOM` event named `loop.element` —
+ * `{id, where, title, shows}`, `shows` the A2UI surface an answer's
+ * components are drawn from, or `{id, closed: true}` — which the AG-UI
+ * adapter hands on as an `activity`. The chat does not draw it: it keeps
+ * what is open here, and whoever draws panels and pages (the `app-elements`
+ * plugin) listens. One store per page, as there is one chat per
+ * application on it.
+ */
+/** The `CUSTOM` event's name. */
+export declare const LOOP_ELEMENT = "loop.element";
+/** Where an element opens, besides inline. */
+export type LoopElementWhere = 'panel' | 'page';
+/** An element open in a side panel or on a page. */
+export type LoopElement = {
+    id: string;
+    where: LoopElementWhere;
+    title: string;
+    /** The surface it draws: what `render_a2ui_surface` returns. */
+    shows: unknown;
+};
+/** What an event says: an element opened or changed, or one closed. */
+export type LoopElementChange = LoopElement | {
+    id: string;
+    closed: true;
+};
+/** The change an activity says, or `null` when it says none. */
+export declare function loopElementChange(activity: {
+    type: string;
+    data: unknown;
+} | undefined): LoopElementChange | null;
+/**
+ * The elements open with a change applied: one opened is added last, one
+ * changed is replaced where it is, one closed is taken away.
+ */
+export declare function withLoopElement(open: readonly LoopElement[], change: LoopElementChange): LoopElement[];
+/** The elements open now, in the order they opened. */
+export declare const openLoopElements: () => LoopElement[];
+/** Apply a change, and tell whoever draws them. */
+export declare function applyLoopElement(change: LoopElementChange): void;
+/**
+ * Close an element on this screen: the person closed it. The code is not
+ * told; it may show it again.
+ */
+export declare const closeLoopElement: (id: string) => void;
+/** Close every element: a new conversation starts with none. */
+export declare function clearLoopElements(): void;
+/** Listen for what is open. Returns the unsubscribe. */
+export declare function onLoopElements(listener: (open: LoopElement[]) => void): () => void;

package/lib/chat/base/loopElement.js

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Where an element of an application's code shows (LOOP P-18): in a side
+ * panel beside the conversation, or on a page of its own over it. Inline,
+ * an element is a message, and the chat draws it as one (P-04).
+ *
+ * The session API says it with a `CUSTOM` event named `loop.element` —
+ * `{id, where, title, shows}`, `shows` the A2UI surface an answer's
+ * components are drawn from, or `{id, closed: true}` — which the AG-UI
+ * adapter hands on as an `activity`. The chat does not draw it: it keeps
+ * what is open here, and whoever draws panels and pages (the `app-elements`
+ * plugin) listens. One store per page, as there is one chat per
+ * application on it.
+ */
+/** The `CUSTOM` event's name. */
+export const LOOP_ELEMENT = 'loop.element';
+/** The change an activity says, or `null` when it says none. */
+export function loopElementChange(activity) {
+    if (!activity || activity.type !== LOOP_ELEMENT)
+        return null;
+    const data = activity.data;
+    if (!data || typeof data.id !== 'string' || !data.id)
+        return null;
+    if (data.closed === true)
+        return { id: data.id, closed: true };
+    if (data.where !== 'panel' && data.where !== 'page')
+        return null;
+    return {
+        id: data.id,
+        where: data.where,
+        title: typeof data.title === 'string' ? data.title : '',
+        shows: data.shows ?? null,
+    };
+}
+/**
+ * The elements open with a change applied: one opened is added last, one
+ * changed is replaced where it is, one closed is taken away.
+ */
+export function withLoopElement(open, change) {
+    if ('closed' in change) {
+        return open.filter(element => element.id !== change.id);
+    }
+    const at = open.findIndex(element => element.id === change.id);
+    if (at < 0)
+        return [...open, change];
+    return open.map((element, index) => (index === at ? change : element));
+}
+let opened = [];
+const listeners = new Set();
+/** The elements open now, in the order they opened. */
+export const openLoopElements = () => opened;
+/** Apply a change, and tell whoever draws them. */
+export function applyLoopElement(change) {
+    opened = withLoopElement(opened, change);
+    for (const listener of [...listeners])
+        listener(opened);
+}
+/**
+ * Close an element on this screen: the person closed it. The code is not
+ * told; it may show it again.
+ */
+export const closeLoopElement = (id) => applyLoopElement({ id, closed: true });
+/** Close every element: a new conversation starts with none. */
+export function clearLoopElements() {
+    opened = [];
+    for (const listener of [...listeners])
+        listener(opened);
+}
+/** Listen for what is open. Returns the unsubscribe. */
+export function onLoopElements(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}

package/lib/chat/base/loopWindow.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Window messages (LOOP P-25): what an application's code tells the page it
+ * sits in, outside the conversation — ``session.send_window_message(data)``.
+ *
+ * The session API says it with a `CUSTOM` event named `loop.window` —
+ * `{data}` — which the AG-UI adapter hands on as an `activity`. The chat
+ * does not draw it: it hands it to whoever listens here — the embed's host
+ * bridge, which raises it on the element as its `window-message` event.
+ */
+/** The `CUSTOM` event's name. */
+export declare const LOOP_WINDOW = "loop.window";
+/** What an activity says to the page, or `null` when it is not a window message. */
+export declare function loopWindowMessage(activity: {
+    type: string;
+    data: unknown;
+} | undefined): {
+    data: unknown;
+} | null;
+/** Hand a window message to whoever listens. */
+export declare function tellLoopWindow(data: unknown): void;
+/** Listen for window messages. Returns the unsubscribe. */
+export declare function onLoopWindowMessage(listener: (data: unknown) => void): () => void;
+/**
+ * What a turn's stream says to the page — the `loop.window` events of the
+ * turn a window message posted by the page ran — and the sentence its
+ * `RUN_ERROR` said, if it failed.
+ */
+export declare function windowTurnOf(stream: string): {
+    said: unknown[];
+    error: string | null;
+};

package/lib/chat/base/loopWindow.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Window messages (LOOP P-25): what an application's code tells the page it
+ * sits in, outside the conversation — ``session.send_window_message(data)``.
+ *
+ * The session API says it with a `CUSTOM` event named `loop.window` —
+ * `{data}` — which the AG-UI adapter hands on as an `activity`. The chat
+ * does not draw it: it hands it to whoever listens here — the embed's host
+ * bridge, which raises it on the element as its `window-message` event.
+ */
+/** The `CUSTOM` event's name. */
+export const LOOP_WINDOW = 'loop.window';
+/** What an activity says to the page, or `null` when it is not a window message. */
+export function loopWindowMessage(activity) {
+    if (!activity || activity.type !== LOOP_WINDOW)
+        return null;
+    const said = activity.data;
+    if (!said || typeof said !== 'object' || !('data' in said))
+        return null;
+    return { data: said.data };
+}
+const listeners = new Set();
+/** Hand a window message to whoever listens. */
+export function tellLoopWindow(data) {
+    for (const listener of [...listeners])
+        listener(data);
+}
+/** Listen for window messages. Returns the unsubscribe. */
+export function onLoopWindowMessage(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/**
+ * What a turn's stream says to the page — the `loop.window` events of the
+ * turn a window message posted by the page ran — and the sentence its
+ * `RUN_ERROR` said, if it failed.
+ */
+export function windowTurnOf(stream) {
+    const said = [];
+    let error = null;
+    for (const block of stream.split('\n\n')) {
+        const data = block
+            .split('\n')
+            .filter(line => line.startsWith('data:'))
+            .map(line => line.slice('data:'.length).trim())
+            .join('');
+        if (!data)
+            continue;
+        let event;
+        try {
+            event = JSON.parse(data);
+        }
+        catch {
+            continue;
+        }
+        if (event.type === 'RUN_ERROR') {
+            error = String(event.message ?? 'The turn failed.');
+        }
+        else if (event.type === 'CUSTOM') {
+            const message = loopWindowMessage({
+                type: String(event.name),
+                data: event.value,
+            });
+            if (message)
+                said.push(message.data);
+        }
+    }
+    return { said, error };
+}

package/lib/chat/display/EmptyState.js

@@ -3,6 +3,7 @@ import { Text, LabelGroup, Label, Truncate, ThemeProvider, } from '@primer/react
 import { Box } from '@datalayer/primer-addons';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { groupSuggestions } from './groupSuggestions';
+import { useChatWords } from '../ChatLanguage';
 export { groupSuggestions } from './groupSuggestions';
 /**
  * How wide a suggestion chip stands, in pixels — fixed, not a cap.
@@ -21,6 +22,7 @@ export const SUGGESTION_CHIP_WIDTH = 140;
 // Component
 // ---------------------------------------------------------------------------
 export function ChatEmptyState({ emptyState, brandIcon, description, suggestions, onSuggestionSubmit, onSuggestionFill, submitOnSuggestionClick = true, }) {
+    const chatText = useChatWords();
     // Custom render takes precedence
     if (emptyState?.render) {
         return _jsx(_Fragment, { children: emptyState.render() });
@@ -107,7 +109,7 @@ export function ChatEmptyState({ emptyState, brandIcon, description, suggestions
                             }, children: section.title }), section.subtitle ? (_jsx(Text, { sx: { fontSize: level === 0 ? 1 : 0 }, children: section.subtitle })) : null, (() => {
                             const own = (suggestions ?? []).filter(suggestion => suggestion.group === section.group);
                             return own.length > 0 ? chips(own) : null;
-                        })()] }, section.group)))) : (_jsxs(_Fragment, { children: [emptyState?.icon || brandIcon || _jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { fontSize: 2 }, children: emptyState?.title || 'Start a conversation' }), (emptyState?.subtitle || description) && (_jsx(Text, { sx: { fontSize: 1 }, children: emptyState?.subtitle || description }))] })), blocks.map(block => (_jsxs(Box, { sx: {
+                        })()] }, section.group)))) : (_jsxs(_Fragment, { children: [emptyState?.icon || brandIcon || _jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { fontSize: 2 }, children: emptyState?.title || chatText.startConversation }), (emptyState?.subtitle || description) && (_jsx(Text, { sx: { fontSize: 1 }, children: emptyState?.subtitle || description }))] })), blocks.map(block => (_jsxs(Box, { sx: {
                         display: 'flex',
                         flexDirection: 'column',
                         alignItems: 'center',

package/lib/chat/index.d.ts

@@ -70,3 +70,5 @@ export { ChatFloating, type ChatFloatingProps } from './ChatFloating';
 export { ChatInline, type ChatInlineProps, type ChatInlineProtocolConfig, } from './ChatInline';
 export { AgentRuntimeChat, type AgentRuntimeChatProps, } from '../agents/AgentRuntimeChat';
 export * from './EphemeralSurfaceControl';
+export { ChatLanguage, useChatLanguage, useChatWords } from './ChatLanguage';
+export { CHAT_WORDS, ENGLISH_CHAT_WORDS, chatLanguage, chatWords, type AroundName, type ChatWords, } from './words';

package/lib/chat/index.js

@@ -85,3 +85,6 @@ export { ChatInline, } from './ChatInline';
 // Generic full-page chat surface for a live agent runtime (with launching state)
 export { AgentRuntimeChat, } from '../agents/AgentRuntimeChat';
 export * from './EphemeralSurfaceControl';
+// The chat's own words in the person's language (LOOP P-26)
+export { ChatLanguage, useChatLanguage, useChatWords } from './ChatLanguage';
+export { CHAT_WORDS, ENGLISH_CHAT_WORDS, chatLanguage, chatWords, } from './words';

package/lib/chat/messages/ChatMessages.js

@@ -15,10 +15,12 @@ import { Box, useThemeStore, getColorPalette } from '@datalayer/primer-addons';
 import { PersonIcon, ToolsIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { useChatMessages, useChatUIPluginRegistry, } from '../../stores/chatStore';
+import { useChatWords } from '../ChatLanguage';
 /**
  * Chat Messages component
  */
 export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps = true, showAvatars = true, autoScroll = true, className, uiPluginRegistry: uiPluginRegistryProp, }) {
+    const chatText = useChatWords();
     const messages = useChatMessages();
     const storeUIPluginRegistry = useChatUIPluginRegistry();
     const uiPluginRegistry = uiPluginRegistryProp ?? storeUIPluginRegistry;
@@ -97,7 +99,7 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
                 height: '100%',
                 p: 4,
                 color: 'fg.muted',
-            }, children: [_jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { mt: 3, fontSize: 2 }, children: "Start a conversation" }), _jsx(Text, { sx: { mt: 1, fontSize: 1 }, children: "Send a message to begin chatting" })] }));
+            }, children: [_jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { mt: 3, fontSize: 2 }, children: chatText.startConversation }), _jsx(Text, { sx: { mt: 1, fontSize: 1 }, children: chatText.sendToBegin })] }));
     }
     return (_jsx(Box, { ref: containerRef, className: className, sx: {
             flex: 1,

package/lib/chat/messages/TurnFooter.js

@@ -4,7 +4,9 @@ import { IconButton, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { CheckIcon, CopyIcon, TrashIcon } from '@primer/octicons-react';
 import { formatTokenCount } from '../../utils';
+import { useChatWords } from '../ChatLanguage';
 export function TurnFooter({ usage, live, latest, padding, onCopy, onRemove, }) {
+    const chatText = useChatWords();
     const [copied, setCopied] = useState(false);
     const copiedTimer = useRef(null);
     useEffect(() => () => {
@@ -70,6 +72,6 @@ export function TurnFooter({ usage, live, latest, padding, onCopy, onRemove, })
             '&:hover [data-turn-actions], &:focus-within [data-turn-actions]': {
                 opacity: 1,
             },
-        }, children: [record && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(record.contextTokens) }), ' / ', formatTokenCount(record.contextWindow), ' ctx · turn ', formatTokenCount(record.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(record.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), !live && (_jsxs(Box, { "data-turn-actions": "", sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(IconButton, { "data-turn-copy": "", icon: copied ? CheckIcon : CopyIcon, "aria-label": "Copy this turn", size: "small", variant: "invisible", onClick: () => void handleCopy() }), _jsx(IconButton, { "data-turn-remove": "", icon: TrashIcon, "aria-label": "Remove this turn", size: "small", variant: "invisible", onClick: onRemove })] }))] }));
+        }, children: [record && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(record.contextTokens) }), ' / ', formatTokenCount(record.contextWindow), ' ctx · turn ', formatTokenCount(record.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(record.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), !live && (_jsxs(Box, { "data-turn-actions": "", sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(IconButton, { "data-turn-copy": "", icon: copied ? CheckIcon : CopyIcon, "aria-label": chatText.copyTurn, size: "small", variant: "invisible", onClick: () => void handleCopy() }), _jsx(IconButton, { "data-turn-remove": "", icon: TrashIcon, "aria-label": chatText.removeTurn, size: "small", variant: "invisible", onClick: onRemove })] }))] }));
 }
 export default TurnFooter;

package/lib/chat/prompt/InputPrompt.js

@@ -22,6 +22,7 @@ import { SkillsStatusIndicator } from '../indicators/SkillsStatusIndicator';
 const ContextPie = lazy(() => import('../usage/ContextPie').then(module => ({
     default: module.ContextPie,
 })));
+import { useChatWords } from '../ChatLanguage';
 /* Shared, so a defaulted prop is the same object on every render: a fresh
    `new Map()` per render is a new dependency for anything memoising on it. */
 const EMPTY_TOOL_MAP = new Map();
@@ -30,6 +31,7 @@ const EMPTY_ID_SET = new Set();
 // Component
 // ---------------------------------------------------------------------------
 export function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor = 'bottom', draggable = false, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt = false, promptVariant, mentionableAgents, promptCommands, promptHistory, headerContent, showAgentsMenu = false, showInlineAgentsMenu = true, agents = [], selectedAgentId, onSelectAgent, showTokenUsage, showContextRing = false, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu = true, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading = false, models = [], decisions, selectedModel = '', onModelSelect = () => { }, availableTools = [], availableFrontendTools = [], mcpServers = [], enabledMcpTools = EMPTY_TOOL_MAP, enabledMcpToolCount = 0, onToggleMcpTool = () => { }, onToggleAllMcpServerTools = () => { }, approvedMcpTools = EMPTY_TOOL_MAP, onToggleMcpToolApproval = () => { }, skills = [], skillsLoading = false, enabledSkills = EMPTY_ID_SET, onToggleSkill = () => { }, onToggleAllSkills = () => { }, approvedSkills = EMPTY_ID_SET, onToggleSkillApproval = () => { }, apiBase, authToken, mcpStatusData, }) {
+    const chatText = useChatWords();
     const isKernelBusy = kernelStatus === 'busy';
     /*
      * Each menu is offered when it is switched on *and* has something behind it.
@@ -111,7 +113,7 @@ export function InputPrompt({ input, setInput, isLoading, kernelStatus, connecti
                   it. Both, rather than either: a host contributing its own controls
                   should not lose the one control that says who is being addressed.
                 */
-                headerContent: inlineAgents || headerContent ? (_jsxs(_Fragment, { children: [inlineAgents ? (_jsx(InlineAgentsMenu, { agents: agents, selectedAgentId: selectedAgentId, onSelectAgent: onSelectAgent })) : null, headerContent] })) : undefined, placeholder: placeholder || 'Type a message...', typingSuggestions: typingSuggestions, isLoading: isLoading, isKernelBusy: isKernelBusy, disabled: disableInputPrompt, readOnly: !connectionConfirmed, onSend: onSend, onStop: onStop, autoFocus: autoFocus, focusTrigger: (focusTrigger ?? 0) + pickedFocus, padding: padding, value: input, onChange: setInput, footerRightContent: _jsxs(_Fragment, { children: [_jsx(McpStatusIndicator, { apiBase: apiBase, authToken: authToken, data: mcpStatusData }), _jsx(SkillsStatusIndicator, { skillsCount: skills.length, enabledCount: enabledSkills.size, loading: skillsLoading })] }) }), _jsx(BelowPromptHeader, { disabled: disableInputPrompt, stacks: showTokenUsage
+                headerContent: inlineAgents || headerContent ? (_jsxs(_Fragment, { children: [inlineAgents ? (_jsx(InlineAgentsMenu, { agents: agents, selectedAgentId: selectedAgentId, onSelectAgent: onSelectAgent })) : null, headerContent] })) : undefined, placeholder: placeholder || chatText.typeMessage, typingSuggestions: typingSuggestions, isLoading: isLoading, isKernelBusy: isKernelBusy, disabled: disableInputPrompt, readOnly: !connectionConfirmed, onSend: onSend, onStop: onStop, autoFocus: autoFocus, focusTrigger: (focusTrigger ?? 0) + pickedFocus, padding: padding, value: input, onChange: setInput, footerRightContent: _jsxs(_Fragment, { children: [_jsx(McpStatusIndicator, { apiBase: apiBase, authToken: authToken, data: mcpStatusData }), _jsx(SkillsStatusIndicator, { skillsCount: skills.length, enabledCount: enabledSkills.size, loading: skillsLoading })] }) }), _jsx(BelowPromptHeader, { disabled: disableInputPrompt, stacks: showTokenUsage
                     ? [
                         {
                             id: 'context-usage',

package/lib/chat/prompt/InputPromptLexical.js

@@ -29,6 +29,7 @@ import { MentionNode } from './plugins/MentionNode';
 import { Box } from '@datalayer/primer-addons';
 import { AgentMentionPlugin, } from './plugins/AgentMentionPlugin';
 import { CommandPlugin, PROMPT_COMMANDS, } from './plugins/CommandPlugin';
+import { useChatWords } from '../ChatLanguage';
 // ---- Lexical extension (plain-text only) ---------------------------------
 // Module scope on purpose: the composer rebuilds the editor whenever this
 // reference changes.
@@ -266,6 +267,7 @@ function ReadOnlyPlugin({ readOnly }) {
     return null;
 }
 export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, onHistory, autoFocus = false, focusSignal, mentionableAgents, promptCommands, }) {
+    const chatText = useChatWords();
     return (_jsx(Box, { sx: {
             /*
               The placeholder is positioned against this box.
@@ -313,7 +315,7 @@ export function InputPromptLexical({ value, onChange, placeholder = 'Ask anythin
                             fontSize: 1,
                             pointerEvents: 'none',
                             userSelect: 'none',
-                        }, children: placeholder }), "aria-placeholder": placeholder, className: "input-prompt-lexical-content", "aria-label": "Message input", style: {
+                        }, children: placeholder }), "aria-placeholder": placeholder, className: "input-prompt-lexical-content", "aria-label": chatText.messageInput, style: {
                         outline: 'none',
                         minHeight: 32,
                         maxHeight: 120,

package/lib/chat/prompt/footer/InPromptFooter.js

@@ -3,7 +3,9 @@ import { IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { PaperAirplaneIcon, SquareCircleIcon, PauseIcon, } from '@primer/octicons-react';
 import { PromptStacks } from '../stack';
+import { useChatWords } from '../../ChatLanguage';
 export function InPromptFooter({ stacks, children, rightContent, isLoading = false, sendDisabled = false, isKernelBusy = false, onSend, onStop, }) {
+    const chatText = useChatWords();
     return (_jsxs(_Fragment, { children: [stacks && stacks.length > 0 ? _jsx(PromptStacks, { stacks: stacks }) : null, _jsxs(Box, { "data-prompt-stack": "controls", sx: {
                     display: 'flex',
                     alignItems: 'center',
@@ -11,6 +13,6 @@ export function InPromptFooter({ stacks, children, rightContent, isLoading = fal
                     px: 2,
                     pt: 1,
                     pb: 2,
-                }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", "data-prompt-action": "stop", onClick: onStop, size: "small", variant: "invisible" })) : isKernelBusy ? (_jsx(IconButton, { icon: PauseIcon, "aria-label": "Pause (kernel busy)", onClick: onStop, size: "small", variant: "invisible", disabled: !onStop })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: onSend, disabled: sendDisabled, size: "small", variant: "invisible" }))] })] })] }));
+                }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": chatText.stop, "data-prompt-action": "stop", onClick: onStop, size: "small", variant: "invisible" })) : isKernelBusy ? (_jsx(IconButton, { icon: PauseIcon, "aria-label": chatText.pauseKernelBusy, onClick: onStop, size: "small", variant: "invisible", disabled: !onStop })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": chatText.send, onClick: onSend, disabled: sendDisabled, size: "small", variant: "invisible" }))] })] })] }));
 }
 export default InPromptFooter;

package/lib/chat/tools/ToolApprovalBanner.js

@@ -15,10 +15,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Button, Text, CounterLabel } from '@primer/react';
 import { ShieldCheckIcon, AlertIcon, CheckIcon, XIcon, } from '@primer/octicons-react';
+import { useChatWords } from '../ChatLanguage';
 /**
  * Persistent banner for tool approval notifications.
  */
 export function ToolApprovalBanner({ pendingApprovals, onReview, onApproveAll, onDismiss, collapsible = true, }) {
+    const chatText = useChatWords();
     const [collapsed, setCollapsed] = useState(false);
     if (pendingApprovals.length === 0) {
         return null;
@@ -34,7 +36,7 @@ export function ToolApprovalBanner({ pendingApprovals, onReview, onApproveAll, o
                 borderBottom: '1px solid',
                 borderColor: 'attention.muted',
                 cursor: 'pointer',
-            }, onClick: () => setCollapsed(false), children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Tool approvals pending" }), _jsx(CounterLabel, { children: pendingApprovals.length })] }));
+            }, onClick: () => setCollapsed(false), children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: chatText.toolApprovalsPending }), _jsx(CounterLabel, { children: pendingApprovals.length })] }));
     }
     return (_jsxs(Box, { sx: {
             borderBottom: '1px solid',
@@ -46,7 +48,7 @@ export function ToolApprovalBanner({ pendingApprovals, onReview, onApproveAll, o
                     justifyContent: 'space-between',
                     px: 3,
                     py: 2,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: [pendingApprovals.length, " tool", ' ', pendingApprovals.length === 1 ? 'approval' : 'approvals', " pending"] })] }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [onApproveAll && pendingApprovals.length >= 1 && (_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: onApproveAll, children: "Approve all" })), collapsible && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setCollapsed(true), children: "Collapse" })), onDismiss && (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: XIcon, onClick: onDismiss, "aria-label": "Dismiss" }))] })] }), _jsx(Box, { sx: { px: 3, pb: 2 }, children: pendingApprovals.map(approval => (_jsxs(Box, { sx: {
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: chatText.approvalsPending(pendingApprovals.length) })] }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [onApproveAll && pendingApprovals.length >= 1 && (_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: onApproveAll, children: chatText.approveAll })), collapsible && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setCollapsed(true), children: chatText.collapse })), onDismiss && (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: XIcon, onClick: onDismiss, "aria-label": chatText.dismiss }))] })] }), _jsx(Box, { sx: { px: 3, pb: 2 }, children: pendingApprovals.map(approval => (_jsxs(Box, { sx: {
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
@@ -57,6 +59,6 @@ export function ToolApprovalBanner({ pendingApprovals, onReview, onApproveAll, o
                         borderRadius: 2,
                         border: '1px solid',
                         borderColor: 'border.default',
-                    }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: approval.toolName }), approval.toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, ml: 2 }, children: approval.toolDescription }))] }), _jsx(Button, { size: "small", variant: "default", onClick: () => onReview(approval), children: "Review" })] }, approval.id))) })] }));
+                    }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: approval.toolName }), approval.toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, ml: 2 }, children: approval.toolDescription }))] }), _jsx(Button, { size: "small", variant: "default", onClick: () => onReview(approval), children: chatText.review })] }, approval.id))) })] }));
 }
 export default ToolApprovalBanner;

package/lib/chat/tools/ToolApprovalDialog.js

@@ -13,10 +13,12 @@ import { useCallback, useState } from 'react';
 import { Box, Button, Text, Heading, FormControl, Checkbox, } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
 import { AlertIcon, ToolsIcon, CheckIcon, XIcon } from '@primer/octicons-react';
+import { useChatWords } from '../ChatLanguage';
 /**
  * Tool Approval Dialog component
  */
 export function ToolApprovalDialog({ isOpen, toolName, toolDescription, args, onApprove, onDeny, onClose, showRememberChoice = true, }) {
+    const chatText = useChatWords();
     const [rememberChoice, setRememberChoice] = useState(false);
     const handleApprove = useCallback(() => {
         onApprove(rememberChoice);
@@ -27,12 +29,12 @@ export function ToolApprovalDialog({ isOpen, toolName, toolDescription, args, on
     if (!isOpen) {
         return null;
     }
-    return (_jsxs(Dialog, { onClose: onClose, "aria-labelledby": "tool-approval-title", children: [_jsx(Dialog.Header, { children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), "Tool Approval Required"] }) }), _jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(ToolsIcon, { size: 20 }), _jsx(Heading, { as: "h4", sx: { fontSize: 2 }, children: toolName })] }), toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: toolDescription }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { sx: {
+    return (_jsxs(Dialog, { onClose: onClose, "aria-labelledby": "tool-approval-title", children: [_jsx(Dialog.Header, { children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), chatText.approvalTitle] }) }), _jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(ToolsIcon, { size: 20 }), _jsx(Heading, { as: "h4", sx: { fontSize: 2 }, children: toolName })] }), toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: toolDescription }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { sx: {
                                     fontWeight: 'semibold',
                                     fontSize: 1,
                                     mb: 2,
                                     display: 'block',
-                                }, children: "Arguments:" }), _jsx(Box, { as: "pre", sx: {
+                                }, children: chatText.arguments }), _jsx(Box, { as: "pre", sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',
                                     borderRadius: 2,
@@ -48,7 +50,7 @@ export function ToolApprovalDialog({ isOpen, toolName, toolDescription, args, on
                             border: '1px solid',
                             borderColor: 'attention.muted',
                             mb: 3,
-                        }, children: _jsx(Text, { sx: { fontSize: 1 }, children: "This tool will perform an action on your behalf. Please review the arguments before approving." }) }), showRememberChoice && (_jsxs(FormControl, { sx: { mb: 3 }, children: [_jsx(Checkbox, { checked: rememberChoice, onChange: e => setRememberChoice(e.target.checked) }), _jsx(FormControl.Label, { children: "Remember my choice for this tool" })] })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [_jsx(Button, { variant: "danger", onClick: handleDeny, leadingVisual: XIcon, children: "Deny" }), _jsx(Button, { variant: "primary", onClick: handleApprove, leadingVisual: CheckIcon, children: "Approve" })] })] })] }));
+                        }, children: _jsx(Text, { sx: { fontSize: 1 }, children: chatText.approvalWarning }) }), showRememberChoice && (_jsxs(FormControl, { sx: { mb: 3 }, children: [_jsx(Checkbox, { checked: rememberChoice, onChange: e => setRememberChoice(e.target.checked) }), _jsx(FormControl.Label, { children: chatText.rememberChoice })] })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [_jsx(Button, { variant: "danger", onClick: handleDeny, leadingVisual: XIcon, children: chatText.deny }), _jsx(Button, { variant: "primary", onClick: handleApprove, leadingVisual: CheckIcon, children: chatText.approve })] })] })] }));
 }
 /**
  * Hook to manage tool approval dialog state