@datalayer/agent-runtimes 1.3.84 → 1.3.85

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

package/lib/chat/tools/ToolCallDisplay.js

@@ -14,30 +14,31 @@ import { Button, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ChevronDownIcon, ChevronRightIcon, ToolsIcon, CheckCircleIcon, XCircleIcon, ClockIcon, AlertIcon, } from '@primer/octicons-react';
 import { SpecMark, hasMark } from '../marks';
+import { useChatWords } from '../ChatLanguage';
 /**
  * Get status icon and color based on tool call status
  */
-function getStatusDisplay(status, errorType) {
+function getStatusDisplay(status, errorType, chatText) {
     switch (status) {
         case 'inProgress':
             return {
                 icon: _jsx(ClockIcon, { size: 14 }),
                 color: 'attention.fg',
-                label: 'Preparing...',
+                label: chatText.toolPreparing,
                 bgColor: 'attention.subtle',
             };
         case 'executing':
             return {
                 icon: _jsx(ClockIcon, { size: 14 }),
                 color: 'attention.fg',
-                label: 'Executing...',
+                label: chatText.toolExecuting,
                 bgColor: 'attention.subtle',
             };
         case 'complete':
             return {
                 icon: _jsx(CheckCircleIcon, { size: 14 }),
                 color: 'success.fg',
-                label: 'Complete',
+                label: chatText.toolComplete,
                 bgColor: 'success.subtle',
             };
         case 'error':
@@ -46,7 +47,7 @@ function getStatusDisplay(status, errorType) {
                 return {
                     icon: _jsx(AlertIcon, { size: 14 }),
                     color: 'danger.fg',
-                    label: 'Execution Failed',
+                    label: chatText.toolExecutionFailed,
                     bgColor: 'danger.subtle',
                 };
             }
@@ -54,7 +55,7 @@ function getStatusDisplay(status, errorType) {
                 return {
                     icon: _jsx(XCircleIcon, { size: 14 }),
                     color: 'severe.fg',
-                    label: 'Code Error',
+                    label: chatText.toolCodeError,
                     bgColor: 'severe.subtle',
                 };
             }
@@ -62,14 +63,14 @@ function getStatusDisplay(status, errorType) {
                 return {
                     icon: _jsx(AlertIcon, { size: 14 }),
                     color: 'attention.fg',
-                    label: 'Exited',
+                    label: chatText.toolExited,
                     bgColor: 'attention.subtle',
                 };
             }
             return {
                 icon: _jsx(XCircleIcon, { size: 14 }),
                 color: 'danger.fg',
-                label: 'Failed',
+                label: chatText.toolFailed,
                 bgColor: 'danger.subtle',
             };
         default:
@@ -95,10 +96,10 @@ function formatToolName(name) {
 /**
  * Get a brief summary of the tool arguments
  */
-function getArgsSummary(args) {
+function getArgsSummary(args, chatText) {
     const entries = Object.entries(args);
     if (entries.length === 0)
-        return 'No parameters';
+        return chatText.noParameters;
     const summary = entries
         .slice(0, 2)
         .map(([key, value]) => {
@@ -111,7 +112,7 @@ function getArgsSummary(args) {
     })
         .join(', ');
     if (entries.length > 2) {
-        return `${summary} (+${entries.length - 2} more)`;
+        return `${summary} ${chatText.moreArguments(entries.length - 2)}`;
     }
     return summary;
 }
@@ -126,6 +127,7 @@ function getArgsSummary(args) {
  * - Rich error display distinguishing execution errors from code errors
  */
 export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired = false, approvalState, approvalDecisionSource, onApprove, onDeny, approvalLoading = false, marks, summary, density = 'comfortable', }) {
+    const chatText = useChatWords();
     const compact = density === 'compact';
     const [isExpanded, setIsExpanded] = useState(false);
     // Determine effective exit code from props or execution result
@@ -142,9 +144,9 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                     ? 'exit'
                     : 'unknown'
         : undefined;
-    const statusDisplay = getStatusDisplay(status, errorType);
+    const statusDisplay = getStatusDisplay(status, errorType, chatText);
     const displayName = formatToolName(toolName);
-    const argsSummary = summary || getArgsSummary(args);
+    const argsSummary = summary || getArgsSummary(args, chatText);
     const resultObject = result && typeof result === 'object'
         ? result
         : undefined;
@@ -209,7 +211,9 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     fontSize: 0,
                                     fontWeight: 'medium',
                                     color: statusDisplay.color,
-                                }, children: isPendingApproval ? 'Awaiting Approval' : statusDisplay.label })] }), !isExpanded && (_jsx(Text, { sx: {
+                                }, children: isPendingApproval
+                                    ? chatText.awaitingApproval
+                                    : statusDisplay.label })] }), !isExpanded && (_jsx(Text, { sx: {
                             fontSize: 0,
                             color: 'fg.muted',
                             overflow: 'hidden',
@@ -225,7 +229,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: "Parameters" }), _jsx(Box, { sx: {
+                                }, children: chatText.parameters }), _jsx(Box, { sx: {
                                     backgroundColor: 'canvas.inset',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -242,7 +246,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                         wordBreak: 'break-word',
                                     }, children: Object.keys(args).length > 0
                                         ? JSON.stringify(args, null, 2)
-                                        : '(no parameters)' }) })] }), status === 'complete' && result !== undefined && (_jsxs(Box, { children: [_jsx(Text, { sx: {
+                                        : `(${chatText.noParameters})` }) })] }), status === 'complete' && result !== undefined && (_jsxs(Box, { children: [_jsx(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -250,7 +254,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: "Result" }), _jsx(Box, { sx: {
+                                }, children: chatText.result }), _jsx(Box, { sx: {
                                     backgroundColor: 'success.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -267,7 +271,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                         wordBreak: 'break-word',
                                     }, children: typeof result === 'string'
                                         ? result
-                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { sx: { mt: status === 'complete' && result !== undefined ? 3 : 0 }, children: approvalState === 'approved' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'success.fg', fontSize: 1, display: 'block' }, children: "Approved. Executing tool." }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Approved from sidebar." }))] })) : approvalState === 'denied' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, display: 'block' }, children: "Denied. Tool will not run." }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Decision came from sidebar." }))] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: "This tool requires your approval to run." }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: "Deny" })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { sx: { mt: status === 'complete' && result !== undefined ? 3 : 0 }, children: approvalState === 'approved' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'success.fg', fontSize: 1, display: 'block' }, children: chatText.approvedRunning }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: chatText.approvedElsewhere }))] })) : approvalState === 'denied' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, display: 'block' }, children: chatText.deniedWontRun }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: chatText.decidedElsewhere }))] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: chatText.approvalNeeded }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: chatText.approve }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: chatText.deny })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -275,7 +279,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: [_jsx(AlertIcon, { size: 12 }), " Execution Error"] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(AlertIcon, { size: 12 }), " ", chatText.executionError] }), _jsxs(Box, { sx: {
                                     backgroundColor: 'danger.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -286,7 +290,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                             fontSize: 0,
                                             color: 'fg.muted',
                                             mt: 1,
-                                        }, children: "The sandbox or execution environment failed to run the code." })] })] })), status === 'error' && effectiveCodeError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        }, children: chatText.executionErrorWhy })] })] })), status === 'error' && effectiveCodeError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -294,7 +298,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: ["Code Error: ", effectiveCodeError.name] }), _jsxs(Box, { sx: {
+                                }, children: [chatText.toolCodeError, ": ", effectiveCodeError.name] }), _jsxs(Box, { sx: {
                                     backgroundColor: 'severe.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -326,7 +330,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: "Error" }), _jsx(Box, { sx: {
+                                }, children: chatText.errorHeading }), _jsx(Box, { sx: {
                                     backgroundColor: 'danger.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
@@ -342,18 +346,18 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: [_jsx(AlertIcon, { size: 12 }), " Process Exited"] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(AlertIcon, { size: 12 }), " ", chatText.processExited] }), _jsxs(Box, { sx: {
                                     backgroundColor: 'attention.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'attention.muted',
                                     p: 2,
-                                }, children: [_jsxs(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: ["Process exited with code ", effectiveExitCode] }), _jsx(Text, { sx: {
+                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: chatText.exitedWithCode(String(effectiveExitCode)) }), _jsx(Text, { sx: {
                                             display: 'block',
                                             fontSize: 0,
                                             color: 'fg.muted',
                                             mt: 1,
-                                        }, children: "The code called sys.exit() with a non-zero exit code." })] }), effectiveExitOutput && (_jsx(Box, { sx: {
+                                        }, children: chatText.nonZeroExit })] }), effectiveExitOutput && (_jsx(Box, { sx: {
                                     mt: 2,
                                     backgroundColor: 'canvas.inset',
                                     borderRadius: 2,

package/lib/chat/words.d.ts

@@ -0,0 +1,102 @@
+/** A tool line's words around the tool's name: "Using " list_invoices "…". */
+export type AroundName = {
+    before: string;
+    after: string;
+};
+/** What the chat says itself, in one language. */
+export type ChatWords = {
+    /** The prompt's placeholder in a LOOP workspace. */
+    placeholder: string;
+    /** The prompt's placeholder when nothing else says one. */
+    typeMessage: string;
+    /** The prompt's name for a screen reader. */
+    messageInput: string;
+    send: string;
+    stop: string;
+    pauseKernelBusy: string;
+    /** The starters under the prompt, for a screen reader. */
+    suggestedPrompts: string;
+    /** A demo's shared key has run out. */
+    demoKeyExpired: string;
+    /** The person's key has run out. */
+    keyExpired: string;
+    /** The empty chat's title. */
+    startConversation: string;
+    /** The empty chat's line when it has no starters. */
+    sendToBegin: string;
+    copyTurn: string;
+    removeTurn: string;
+    /** What the agent says when its answer failed. */
+    error: (message: string) => string;
+    /** While the agent thinks, in the balloon. */
+    thinking: string;
+    toolPreparing: string;
+    toolExecuting: string;
+    toolComplete: string;
+    toolExecutionFailed: string;
+    toolCodeError: string;
+    toolExited: string;
+    toolFailed: string;
+    awaitingApproval: string;
+    noParameters: string;
+    /** More arguments than the summary shows: "(+2 more)". */
+    moreArguments: (count: number) => string;
+    parameters: string;
+    result: string;
+    executionError: string;
+    executionErrorWhy: string;
+    errorHeading: string;
+    processExited: string;
+    exitedWithCode: (code: number | string) => string;
+    nonZeroExit: string;
+    toolRunning: AroundName;
+    toolDone: AroundName;
+    toolFailedLine: AroundName;
+    approve: string;
+    deny: string;
+    approveAll: string;
+    approvalNeeded: string;
+    approvedRunning: string;
+    approvedElsewhere: string;
+    deniedWontRun: string;
+    decidedElsewhere: string;
+    approvalsPending: (count: number) => string;
+    toolApprovalsPending: string;
+    collapse: string;
+    review: string;
+    dismiss: string;
+    approvalTitle: string;
+    arguments: string;
+    approvalWarning: string;
+    rememberChoice: string;
+    /** An approval waits and cannot be answered in the balloon itself. */
+    waitingOpen: string;
+    /** It waits on the person's yes. */
+    waitingForYou: string;
+    /** Its deployment is paused. */
+    paused: string;
+    /** How many more approvals wait: "2 more". */
+    moreWaiting: (count: number) => string;
+    showMore: string;
+    showLess: string;
+    now: string;
+    conversation: string;
+    suggestions: string;
+    expandConversation: string;
+    expand: string;
+    expandWhat: (what: string) => string;
+    theVisual: string;
+    /** The floating button's tooltip. */
+    talkTo: (name: string) => string;
+};
+/** The chat's words, by language. Another language reads English. */
+export declare const CHAT_WORDS: Record<string, ChatWords>;
+/** The English words: what the chat says when nothing says a language. */
+export declare const ENGLISH_CHAT_WORDS: ChatWords;
+/**
+ * The language the chat speaks to a person who prefers these, as BCP 47
+ * tags them: the first it is said in (`fr-CA` reads `fr`), else English.
+ */
+export declare function chatLanguage(preferred: readonly string[]): string;
+/** The chat's words in a language: its own, else its language's, else English. */
+export declare function chatWords(language: string | undefined): ChatWords;