@datalayer/agent-runtimes 1.3.83 → 1.3.85

package/lib/chat/ChatFloating.d.ts

@@ -23,7 +23,7 @@ import { type AssistantCharacter } from './assistant/characters';
 import type { AssistantCharacterData } from './assistant/formats/types';
 import { type AssistantSaying } from './assistant/state';
 import { type PresenceState } from './presence/presenceStatus';
-import type { AgentInspectorSink } from '../components/inspector/agentInspector';
+import type { OtelLiveTracer } from '@datalayer/core/lib/otel/live';
 import type { AssistantMenuItem } from './assistant/AssistantContextMenu';
 import type { AssistantAbout } from './assistant/AssistantStage';
 import { type AssistantSandbox } from './assistant/assistantDetails';
@@ -177,10 +177,11 @@ export interface ChatFloatingProps extends ChatCommonProps {
      */
     conversation?: FloatingConversation;
     /**
-     * The Agent Inspector's sink: the chat records its agent's turns and tool
-     * calls there, and the assistant's menu offers *Inspect the agent…*.
+     * The Agent Inspector's tracer: the chat records its agent's turns and
+     * tool calls there as spans, and the assistant's menu offers *Inspect the
+     * agent…*.
      */
-    inspector?: AgentInspectorSink | null;
+    inspector?: OtelLiveTracer | null;
     /** The balloon's display, changed from the assistant's menu. */
     onBalloonDisplayChange?: (display: BalloonDisplay) => void;
     /** Opens the host's character picker, from the assistant's menu. */

package/lib/chat/ChatFloating.js

@@ -40,12 +40,13 @@ import { ConversationBalloonHeader, CurrentBalloonBody, } from './assistant/Ball
 import { DEFAULT_BALLOON_DISPLAY, conversationCount, newestToolLine, toolLineText, } from './assistant/toolLine';
 import { SpeechBalloon } from './assistant/SpeechBalloon';
 import { DEFAULT_ASSISTANT_CHARACTER, } from './assistant/characters';
-import { assistantStateOf, latestSaying, newestIsAnswer, keepAway, keptAway, ASSISTANT_WORDS, } from './assistant/state';
+import { assistantStateOf, latestSaying, newestIsAnswer, keepAway, keptAway, } from './assistant/state';
 import { presenceState, presenceToolOf, } from './presence/presenceStatus';
 import { useChatOpen, useChatMessages, useChatStore, } from '../stores/chatStore';
 import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
 import { assistantSandboxOf, } from './assistant/assistantDetails';
 import { useAgentRuntimeCodemodeStatus } from '../stores/agentRuntimeStore';
+import { useChatWords } from './ChatLanguage';
 /**
  * Hook to detect mobile viewport
  */
@@ -73,6 +74,7 @@ const clamp = (value, max) => Math.max(8, Math.min(value, Math.max(8, max)));
  * A floating chat window built on ChatBase
  */
 export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, buttonGlow = true, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, sidebarMountPoint = null, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, showContextRing = false, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching = false, launchingMessage, assistantCharacter = DEFAULT_ASSISTANT_CHARACTER, balloonDisplay: balloonDisplayGiven = DEFAULT_BALLOON_DISPLAY, expandTarget, conversation, decisions, voice, inspector, onBalloonDisplayChange, onChangeCharacter, about, sandbox, contextMenu, }) {
+    const chatText = useChatWords();
     // The chat's own send, once it can: what a suggestion in the balloon sends.
     const chatControls = useRef(null);
     const [suggestionPrompt, setSuggestionPrompt] = useState();
@@ -280,7 +282,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     // The words as written (markdown, drawn by the chat's markdown), or cut
     // to fit with the whole kept for *more*.
     const currentWords = atWork && !answering
-        ? 'Thinking…'
+        ? chatText.thinking
         : (saying?.more ? saying.text : saying?.markdown) || undefined;
     const currentWhole = atWork && !answering
         ? undefined
@@ -293,7 +295,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         : undefined;
     const withHistory = (said) => listedHistory ? { ...said, history: listedHistory } : said;
     const assistantBalloon = assistantState === 'paused'
-        ? { text: ASSISTANT_WORDS.paused }
+        ? { text: chatText.paused }
         : speakerState.sentence
             ? // Heard: the sentence being said is the one in the balloon (VO-26).
                 { text: speakerState.sentence }
@@ -301,14 +303,14 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                 ? { text: speakerState.refused }
                 : balloonApproval
                     ? withHistory({
-                        text: ASSISTANT_WORDS.approval,
+                        text: chatText.waitingForYou,
                         approval: balloonApproval,
                     })
                     : assistantState === 'waiting'
-                        ? { text: ASSISTANT_WORDS.waiting }
+                        ? { text: chatText.waitingOpen }
                         : toolSaid
                             ? withHistory({
-                                text: toolLineText(toolSaid),
+                                text: toolLineText(toolSaid, chatText),
                                 tool: toolSaid,
                                 busy: atWork,
                             })

package/lib/chat/ChatLanguage.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The language the chat speaks in (LOOP P-26): the one its host says — the
+ * `language` of `AppRenderer` and of the embed — else the browser's.
+ *
+ * @module chat/ChatLanguage
+ */
+import { type JSX, type ReactNode } from 'react';
+import { type ChatWords } from './words';
+/** The chat in a language its host says; the browser's when it says none. */
+export declare function ChatLanguage({ language, children, }: {
+    language?: string;
+    children?: ReactNode;
+}): JSX.Element;
+/** The language the chat speaks: the host's, else the browser's, else English. */
+export declare function useChatLanguage(): string;
+/** The chat's own words, in the language it speaks. */
+export declare function useChatWords(): ChatWords;

package/lib/chat/ChatLanguage.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The language the chat speaks in (LOOP P-26): the one its host says — the
+ * `language` of `AppRenderer` and of the embed — else the browser's.
+ *
+ * @module chat/ChatLanguage
+ */
+import { createContext, useContext, useMemo, } from 'react';
+import { preferredLanguages } from '../loop/apps/language';
+import { CHAT_WORDS, chatLanguage } from './words';
+/** The language the host says, as BCP 47 tags it; unsaid, the browser's. */
+const ChatLanguageContext = createContext(undefined);
+/** The chat in a language its host says; the browser's when it says none. */
+export function ChatLanguage({ language, children, }) {
+    return (_jsx(ChatLanguageContext.Provider, { value: language || undefined, children: children }));
+}
+/** The language the chat speaks: the host's, else the browser's, else English. */
+export function useChatLanguage() {
+    const said = useContext(ChatLanguageContext);
+    return useMemo(() => chatLanguage(said ? [said] : preferredLanguages()), [said]);
+}
+/** The chat's own words, in the language it speaks. */
+export function useChatWords() {
+    return CHAT_WORDS[useChatLanguage()];
+}

package/lib/chat/assistant/AssistantStage.d.ts

@@ -30,7 +30,7 @@ import type { JSX, ReactNode, RefObject } from 'react';
 import { type AssistantCharacter } from './characters';
 import { type BalloonSuggestion } from './SpeechBalloon';
 import { type AssistantMenuItem } from './AssistantContextMenu';
-import type { AgentInspectorSink } from '../../components/inspector/agentInspector';
+import type { OtelLiveTracer } from '@datalayer/core/lib/otel/live';
 import type { AssistantSandbox } from './assistantDetails';
 import { type BalloonExpandTarget, type BalloonVisual } from './BalloonVisual';
 import type { AssistantCharacterData } from './formats/types';
@@ -220,9 +220,9 @@ export interface AssistantStageProps {
      */
     suggestions?: readonly BalloonSuggestion[];
     onSuggestion?: (suggestion: BalloonSuggestion) => void;
-    /** The Agent Inspector's sink: its menu offers *Inspect the agent…*. */
-    inspector?: AgentInspectorSink | null;
-    /** The agent whose own record the inspector shows, of a shared sink (a team's member). */
+    /** The Agent Inspector's tracer: its menu offers *Inspect the agent…*. */
+    inspector?: OtelLiveTracer | null;
+    /** The agent whose own spans the inspector shows, of a shared tracer (a team's member). */
     inspectAgent?: string;
     /**
      * What its menu calls the conversation's entry, which does `onToggle`;

package/lib/chat/assistant/AssistantStage.js

@@ -12,6 +12,7 @@ import { BalloonExpandContext, ExpandedVisual, focusExpanded, } from './BalloonV
 import { SpriteCharacter } from './SpriteCharacter';
 import { conversationCount, } from './toolLine';
 import { ASSISTANT_OBSTACLES, POINTER_CALM_MS, mouthOpening, boxesMeet, pointerNear, } from './state';
+import { useChatWords } from '../ChatLanguage';
 /** The motions, by the state the stage is in. */
 const MOTIONS = {
     '@keyframes assistantFloat': {
@@ -362,6 +363,7 @@ export function useMouth(stageRef, mouthLevel, speaking) {
     }, [stageRef, mouthLevel, speaking]);
 }
 export function AssistantStage({ character, state, size = 88, place, stageRef, onDragStart, open, onToggle, onCharacterClick, onCharacterKeyDown, balloon, insist = false, onDismiss, ownRef, decide, mouthLevel, stayPut = false, balloonDisplay = 'history', expandTarget, expandOnArrival = false, suggestions, onSuggestion, inspector, inspectAgent, conversationLabel, onBalloonDisplayChange, onStop, onNewChat, onClear, onChangeCharacter, speech, onResetPosition, about, sandbox, contextMenu, agentName, label, }) {
+    const chatText = useChatWords();
     // A shipped one by id, a drawing contributed by a plugin (T-24), or a
     // character read from a file (T-26).
     const shipped = typeof character === 'string'
@@ -456,7 +458,7 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
     const historyVisual = balloonDisplay !== 'current' && history && history.length > 0
         ? {
             id: 'balloon-history',
-            title: conversationHeaderText(conversationCount(history)),
+            title: conversationHeaderText(conversationCount(history), chatText),
             shrink: true,
             render: () => (_jsx(BalloonHistoryLarge, { history: history, tool: balloon?.tool, attachment: balloon?.attachment })),
         }
@@ -643,7 +645,7 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
                                     bg: 'canvas.default',
                                     borderRadius: '50%',
                                     boxShadow: 'shadow.small',
-                                } }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: AWAY_CHOICES.map(choice => (_jsx(ActionList.Item, { "data-assistant-away": choice.away, onSelect: () => onDismiss(choice.away), children: choice.label }, choice.away))) }) })] }) })), _jsx(AssistantContextMenu, { at: menuAt, items: menuItems, onClose: closeMenu, returnFocusRef: characterRef, label: `${name}\u2019s menu` }), inspecting && (_jsx(Suspense, { fallback: null, children: _jsx(AgentInspectorDialog, { sink: inspector ?? null, agent: inspectAgent, title: `${about?.name ?? name} \u00b7 Agent Inspector`, onClose: () => {
+                                } }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: AWAY_CHOICES.map(choice => (_jsx(ActionList.Item, { "data-assistant-away": choice.away, onSelect: () => onDismiss(choice.away), children: choice.label }, choice.away))) }) })] }) })), _jsx(AssistantContextMenu, { at: menuAt, items: menuItems, onClose: closeMenu, returnFocusRef: characterRef, label: `${name}\u2019s menu` }), inspecting && (_jsx(Suspense, { fallback: null, children: _jsx(AgentInspectorDialog, { tracer: inspector ?? null, agent: inspectAgent, title: `${about?.name ?? name} \u00b7 Agent Inspector`, onClose: () => {
                         setInspecting(false);
                         characterRef.current?.focus();
                     } }) })), detailing === 'agent' && about && (_jsx(Suspense, { fallback: null, children: _jsx(AgentDetailsDialog, { about: about, name: name, onClose: () => {

package/lib/chat/assistant/BalloonParts.d.ts

@@ -10,6 +10,7 @@ import type { JSX, ReactNode } from 'react';
 import { type ChatDensity } from '../messages/ChatMarkdown';
 import type { DisplayItem } from '../../types/chat';
 import { type BalloonToolLine } from './toolLine';
+import { type ChatWords } from '../words';
 /**
  * The conversation's items in the balloon, drawn by the chat's own
  * components (`ChatMessageList`): markdown, code blocks, tool calls and
@@ -46,7 +47,7 @@ export declare function BalloonNow({ busy }: {
     busy?: boolean;
 }): JSX.Element;
 /** How the `history` balloon names itself: "Conversation · 6". */
-export declare function conversationHeaderText(count: number): string;
+export declare function conversationHeaderText(count: number, chatText?: ChatWords): string;
 /**
  * The `history` balloon's header: what it holds — the conversation, and how
  * many messages — over the scrolled history and the composer.

package/lib/chat/assistant/BalloonParts.js

@@ -7,6 +7,8 @@ import { ChatMessageList } from '../messages/ChatMessageList';
 import { ChatMarkdown } from '../messages/ChatMarkdown';
 import { agentRuntimeStore } from '../../stores/agentRuntimeStore';
 import { toolAnnouncement, displayItemOfLine, } from './toolLine';
+import { useChatWords } from '../ChatLanguage';
+import { ENGLISH_CHAT_WORDS } from '../words';
 /** Out of sight, still heard. */
 const VISUALLY_HIDDEN = {
     position: 'absolute',
@@ -64,10 +66,11 @@ export function BalloonToolCall({ line, waiting = false, }) {
  * starts and once when it ends, never while it runs nor while words stream.
  */
 export function ToolLineAnnouncer({ line, }) {
+    const chatText = useChatWords();
     const last = useRef(undefined);
     const [said, setSaid] = useState('');
     useEffect(() => {
-        const words = toolAnnouncement(line, last.current);
+        const words = toolAnnouncement(line, last.current, chatText);
         if (line && words) {
             last.current = { id: line.id, phase: line.phase };
             setSaid(words);
@@ -80,6 +83,7 @@ export function ToolLineAnnouncer({ line, }) {
  * agent is at work — still for a reader who asks for reduced motion.
  */
 export function BalloonNow({ busy = false }) {
+    const chatText = useChatWords();
     return (_jsxs(Box, { as: "span", "data-balloon-now": busy ? 'busy' : '', sx: {
             display: 'inline-flex',
             alignItems: 'center',
@@ -105,17 +109,20 @@ export function BalloonNow({ busy = false }) {
             '@media (prefers-reduced-motion: reduce)': {
                 '& [data-balloon-now-dot]': { animation: 'none' },
             },
-        }, children: [_jsx(Box, { as: "span", "data-balloon-now-dot": "", "aria-hidden": "true" }), "Now"] }));
+        }, children: [_jsx(Box, { as: "span", "data-balloon-now-dot": "", "aria-hidden": "true" }), chatText.now] }));
 }
 /** How the `history` balloon names itself: "Conversation · 6". */
-export function conversationHeaderText(count) {
-    return count > 0 ? `Conversation · ${count}` : 'Conversation';
+export function conversationHeaderText(count, chatText = ENGLISH_CHAT_WORDS) {
+    return count > 0
+        ? `${chatText.conversation} · ${count}`
+        : chatText.conversation;
 }
 /**
  * The `history` balloon's header: what it holds — the conversation, and how
  * many messages — over the scrolled history and the composer.
  */
 export function ConversationBalloonHeader({ count, }) {
+    const chatText = useChatWords();
     return (_jsx(Box, { "data-balloon-header": "", sx: {
             flexShrink: 0,
             display: 'flex',
@@ -130,7 +137,7 @@ export function ConversationBalloonHeader({ count, }) {
             bg: 'canvas.default',
             borderTopLeftRadius: 'var(--theme-radius-bubble, 16px)',
             borderTopRightRadius: 'var(--theme-radius-bubble, 16px)',
-        }, children: _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold', color: 'fg.muted' }, children: conversationHeaderText(count) }) }));
+        }, children: _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold', color: 'fg.muted' }, children: conversationHeaderText(count, chatText) }) }));
 }
 /**
  * What the `current` balloon holds: *Now*, then the one thing being said or

package/lib/chat/assistant/BalloonVisual.js

@@ -4,6 +4,7 @@ import { createPortal } from 'react-dom';
 import { Button, Dialog, IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { ScreenFullIcon, ScreenNormalIcon, XIcon, } from '@primer/octicons-react';
+import { useChatWords } from '../ChatLanguage';
 /**
  * Expands the visual of the balloon it is in: what its compact form (a
  * notebook's preview) calls when it is clicked. None outside such a balloon.
@@ -15,7 +16,8 @@ export function useBalloonExpand() {
 }
 /** The balloon's *Expand* button. */
 export function BalloonExpandButton({ title, onExpand, }) {
-    return (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: ScreenFullIcon, "aria-label": `Expand ${title}`, "data-balloon-expand": "", onClick: onExpand, sx: { alignSelf: 'flex-start', px: 1 }, children: "Expand" }));
+    const chatText = useChatWords();
+    return (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: ScreenFullIcon, "aria-label": chatText.expandWhat(title), "data-balloon-expand": "", onClick: onExpand, sx: { alignSelf: 'flex-start', px: 1 }, children: chatText.expand }));
 }
 /** How large the dialog is when no target is named: most of the window. */
 export const EXPANDED_DIALOG_SIZE = { width: '80vw', height: '80vh' };

package/lib/chat/assistant/ConversationBalloon.d.ts

@@ -12,7 +12,7 @@
  * @module chat/assistant/ConversationBalloon
  */
 import type { JSX } from 'react';
-import { type BalloonApproval } from './state';
+import type { BalloonApproval } from './state';
 /** The open balloon's width, in pixels. */
 export declare const CONVERSATION_BALLOON_WIDTH = 380;
 /** The open balloon's tallest, in pixels, and its share of the window. */

package/lib/chat/assistant/ConversationBalloon.js

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import { Button, IconButton, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon } from '@primer/octicons-react';
-import { ASSISTANT_WORDS } from './state';
+import { useChatWords } from '../ChatLanguage';
 /** The open balloon's width, in pixels. */
 export const CONVERSATION_BALLOON_WIDTH = 380;
 /** The open balloon's tallest, in pixels, and its share of the window. */
@@ -71,6 +71,7 @@ export function ConversationBalloonClose({ name, onClose, }) {
  * wait (T-23). Brought into view when it arrives.
  */
 export function BalloonApprovalMessage({ approval, }) {
+    const chatText = useChatWords();
     const ref = useRef(null);
     useEffect(() => {
         ref.current?.scrollIntoView?.({ block: 'nearest' });
@@ -84,7 +85,7 @@ export function BalloonApprovalMessage({ approval, }) {
                 borderColor: 'attention.muted',
                 borderRadius: 'var(--theme-radius-bubble, 16px)',
                 fontSize: 1,
-            }, children: [_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: ASSISTANT_WORDS.approval }), _jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2, alignItems: 'center' }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: ASSISTANT_WORDS.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: ASSISTANT_WORDS.deny }), approval.others > 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: moreWaiting(approval.others) })) : null] })] }) }));
+            }, children: [_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: chatText.waitingForYou }), _jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2, alignItems: 'center' }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: chatText.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: chatText.deny }), approval.others > 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: chatText.moreWaiting(approval.others) })) : null] })] }) }));
 }
 /** How many more wait, in two words: "2 more". */
 export function moreWaiting(others) {

package/lib/chat/assistant/SpeechBalloon.d.ts

@@ -26,7 +26,7 @@
  * @module chat/assistant/SpeechBalloon
  */
 import type { JSX, ReactNode } from 'react';
-import { type BalloonApproval } from './state';
+import type { BalloonApproval } from './state';
 import type { DisplayItem } from '../../types/chat';
 import type { DecisionAsker } from './decisions';
 import { type BalloonDisplay, type BalloonToolLine } from './toolLine';

package/lib/chat/assistant/SpeechBalloon.js

@@ -3,16 +3,16 @@ import { useEffect, useRef, useState } from 'react';
 import { Button, IconButton, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon } from '@primer/octicons-react';
-import { ASSISTANT_WORDS } from './state';
-import { moreWaiting } from './ConversationBalloon';
 import { DecisionAsk } from './DecisionAsk';
 import { BalloonChatItems, BalloonToolCall, CurrentBalloonBody, ToolLineAnnouncer, conversationHeaderText, } from './BalloonParts';
 import { conversationCount, withToolCall, } from './toolLine';
 import { BalloonExpandButton } from './BalloonVisual';
 import { ScreenFullIcon } from '@primer/octicons-react';
+import { useChatWords } from '../ChatLanguage';
 /** The suggestions, as chips: each sends its prompt. */
 export function BalloonSuggestions({ suggestions, onSuggestion, }) {
-    return (_jsx(Box, { role: "group", "aria-label": "Suggestions", "data-balloon-suggestions": "", sx: { display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2 }, children: suggestions.map(suggestion => (_jsx(Button, { size: "small", "data-balloon-suggestion": suggestion.label, "aria-label": `Ask: ${suggestion.prompt}`, title: suggestion.prompt, onClick: () => onSuggestion(suggestion), sx: { borderRadius: 999 }, children: suggestion.label }, suggestion.label))) }));
+    const chatText = useChatWords();
+    return (_jsx(Box, { role: "group", "aria-label": chatText.suggestions, "data-balloon-suggestions": "", sx: { display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2 }, children: suggestions.map(suggestion => (_jsx(Button, { size: "small", "data-balloon-suggestion": suggestion.label, "aria-label": `Ask: ${suggestion.prompt}`, title: suggestion.prompt, onClick: () => onSuggestion(suggestion), sx: { borderRadius: 999 }, children: suggestion.label }, suggestion.label))) }));
 }
 /** How tall the listed conversation grows before it scrolls, in pixels. */
 export const BALLOON_HISTORY_MAX_HEIGHT = 220;
@@ -29,9 +29,11 @@ export const BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT = 120;
  * scrolled there.
  */
 export function BalloonHistoryLarge({ history, tool, attachment, }) {
-    return (_jsxs(Box, { role: "log", "aria-label": "Conversation", "data-balloon-history-large": "", sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(BalloonChatItems, { items: withToolCall(history, tool), density: "comfortable" }), attachment ? _jsx(Box, { children: attachment }) : null] }));
+    const chatText = useChatWords();
+    return (_jsxs(Box, { role: "log", "aria-label": chatText.conversation, "data-balloon-history-large": "", sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(BalloonChatItems, { items: withToolCall(history, tool), density: "comfortable" }), attachment ? _jsx(Box, { children: attachment }) : null] }));
 }
 function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGHT, onExpand, tool, waiting = false, }) {
+    const chatText = useChatWords();
     const listRef = useRef(null);
     const newest = history[history.length - 1]?.id;
     useEffect(() => {
@@ -67,7 +69,7 @@ function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGH
                     fontWeight: 'semibold',
                     color: 'fg.muted',
                     '&:hover': { textDecoration: 'underline' },
-                }, children: conversationHeaderText(conversationCount(history)) }), onExpand ? (_jsx(IconButton, { icon: ScreenFullIcon, size: "small", variant: "invisible", "aria-label": "Expand the conversation", "data-balloon-history-expand": "", onClick: onExpand, sx: { position: 'absolute', top: '4px', right: '28px' } })) : null, _jsx(Box, { ref: listRef, role: "log", "aria-label": "Conversation", "data-balloon-history-list": "", sx: {
+                }, children: conversationHeaderText(conversationCount(history), chatText) }), onExpand ? (_jsx(IconButton, { icon: ScreenFullIcon, size: "small", variant: "invisible", "aria-label": chatText.expandConversation, "data-balloon-history-expand": "", onClick: onExpand, sx: { position: 'absolute', top: '4px', right: '28px' } })) : null, _jsx(Box, { ref: listRef, role: "log", "aria-label": chatText.conversation, "data-balloon-history-list": "", sx: {
                     maxHeight,
                     overflowY: 'auto',
                     display: 'flex',
@@ -76,6 +78,7 @@ function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGH
                 }, children: _jsx(BalloonChatItems, { items: withToolCall(history, tool), waiting: waiting }) })] }));
 }
 export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, approval, decide, onDecisionActive, wide = false, onDismissPeek, display = 'history', tool, speaking = false, busy = false, attachment, history, onExpand, expandTitle, suggestions, onSuggestion, waiting = false, fullText, onExpandHistory, }) {
+    const chatText = useChatWords();
     // *more*: the words whole, when they were cut or overflow their lines.
     const [whole, setWhole] = useState(false);
     const [overflowing, setOverflowing] = useState(false);
@@ -175,7 +178,7 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                             textAlign: 'left',
                             cursor: 'pointer',
                             '&:hover': { textDecoration: 'underline' },
-                        }, children: _jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text }) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss", "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), current && !approval && !tool && (cut || overflowing || whole) ? (_jsx(Box, { as: "button", type: "button", "aria-expanded": whole, "data-balloon-whole": whole ? 'less' : 'more', onClick: () => setWhole(!whole), sx: {
+                        }, children: _jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text }) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": chatText.dismiss, "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), current && !approval && !tool && (cut || overflowing || whole) ? (_jsx(Box, { as: "button", type: "button", "aria-expanded": whole, "data-balloon-whole": whole ? 'less' : 'more', onClick: () => setWhole(!whole), sx: {
                     m: 0,
                     mt: 1,
                     p: 0,
@@ -186,6 +189,6 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                     fontSize: 0,
                     cursor: 'pointer',
                     '&:hover': { textDecoration: 'underline' },
-                }, children: whole ? 'less' : 'more' })) : null, !current && !listed && waiting ? (_jsx(Box, { "data-balloon-waiting": "", sx: { mt: 1 }, children: _jsx(BalloonChatItems, { items: [], waiting: true }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: ASSISTANT_WORDS.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: ASSISTANT_WORDS.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: moreWaiting(approval.others) })) : null] })), offered && onSuggestion ? (_jsx(BalloonSuggestions, { suggestions: offered, onSuggestion: onSuggestion })) : null, attachment ? (_jsxs(Box, { "data-balloon-attachment": "", sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 1 }, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? 'the visual', onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
+                }, children: whole ? chatText.showLess : chatText.showMore })) : null, !current && !listed && waiting ? (_jsx(Box, { "data-balloon-waiting": "", sx: { mt: 1 }, children: _jsx(BalloonChatItems, { items: [], waiting: true }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: chatText.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: chatText.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: chatText.moreWaiting(approval.others) })) : null] })), offered && onSuggestion ? (_jsx(BalloonSuggestions, { suggestions: offered, onSuggestion: onSuggestion })) : null, attachment ? (_jsxs(Box, { "data-balloon-attachment": "", sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 1 }, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? chatText.theVisual, onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
 }
 export default SpeechBalloon;

package/lib/chat/assistant/toolLine.d.ts

@@ -1,4 +1,5 @@
 import type { DisplayItem, ToolCallMessage } from '../../types/chat';
+import { type ChatWords } from '../words';
 /**
  * How the balloon shows the conversation: `history`, every message,
  * scrolled, the composer last; `current`, only what it says or does now, in
@@ -32,14 +33,17 @@ export interface BalloonToolLine {
  * prefix (`odoo__list_invoices` is `list_invoices`).
  */
 export declare function toolDisplayName(tool: string): string;
-/** The three parts a tool line is said in: before the name, the name, after it. */
-export declare function toolLineParts(line: BalloonToolLine): {
+/**
+ * The three parts a tool line is said in: before the name, the name, after
+ * it — in the chat's language (P-26), English unless said.
+ */
+export declare function toolLineParts(line: BalloonToolLine, chatText?: ChatWords): {
     before: string;
     name: string;
     after: string;
 };
 /** A tool line in plain words: "Using list_invoices…". */
-export declare function toolLineText(line: BalloonToolLine): string;
+export declare function toolLineText(line: BalloonToolLine, chatText?: ChatWords): string;
 /**
  * The tool line of the conversation's newest item, when that item is a tool
  * call: running until it is complete or failed. Once words follow it, the
@@ -62,7 +66,7 @@ export declare function toolLineOfStep(step: ToolStep, name?: string): BalloonTo
 export declare function toolAnnouncement(line: BalloonToolLine | undefined, previous: {
     id: string;
     phase: ToolLinePhase;
-} | undefined): string | undefined;
+} | undefined, chatText?: ChatWords): string | undefined;
 /**
  * How many messages the conversation holds, as the `history` balloon's
  * header counts them: the person's and the agent's, not the tool calls.

package/lib/chat/assistant/toolLine.js

@@ -11,6 +11,7 @@
  * @module chat/assistant/toolLine
  */
 import { BACKEND_TOOL_CATALOG } from '../../specs/backendTools';
+import { ENGLISH_CHAT_WORDS } from '../words';
 /** The two displays, in the Appspec's order (`interface.balloon`). */
 export const BALLOON_DISPLAYS = [
     'history',
@@ -41,23 +42,26 @@ export function toolDisplayName(tool) {
     const at = tool.indexOf('__');
     return at > 0 ? tool.slice(at + 2) : tool;
 }
-/** The three parts a tool line is said in: before the name, the name, after it. */
-export function toolLineParts(line) {
+/**
+ * The three parts a tool line is said in: before the name, the name, after
+ * it — in the chat's language (P-26), English unless said.
+ */
+export function toolLineParts(line, chatText = ENGLISH_CHAT_WORDS) {
     if (line.phase === 'running' && line.words) {
         return { before: '', name: '', after: line.words };
     }
     switch (line.phase) {
         case 'running':
-            return { before: 'Using ', name: line.name, after: '…' };
+            return { ...chatText.toolRunning, name: line.name };
         case 'done':
-            return { before: 'Done: ', name: line.name, after: '' };
+            return { ...chatText.toolDone, name: line.name };
         case 'failed':
-            return { before: '', name: line.name, after: ' failed' };
+            return { ...chatText.toolFailedLine, name: line.name };
     }
 }
 /** A tool line in plain words: "Using list_invoices…". */
-export function toolLineText(line) {
-    const { before, name, after } = toolLineParts(line);
+export function toolLineText(line, chatText = ENGLISH_CHAT_WORDS) {
+    const { before, name, after } = toolLineParts(line, chatText);
     return `${before}${name}${after}`;
 }
 /**
@@ -96,14 +100,14 @@ export function toolLineOfStep(step, name = toolDisplayName(step.name)) {
  * What a screen reader hears of a tool line: once when the call starts and
  * once when it ends — a new id or a new phase — never while it runs.
  */
-export function toolAnnouncement(line, previous) {
+export function toolAnnouncement(line, previous, chatText = ENGLISH_CHAT_WORDS) {
     if (!line) {
         return undefined;
     }
     if (previous && previous.id === line.id && previous.phase === line.phase) {
         return undefined;
     }
-    return toolLineText(line);
+    return toolLineText(line, chatText);
 }
 /**
  * How many messages the conversation holds, as the `history` balloon's

package/lib/chat/base/ChatBase.js

@@ -58,10 +58,13 @@ const EphemeralDocument = React.lazy(() => import('../document/EphemeralDocument
     default: m.EphemeralDocument,
 })));
 import { useNotebookTools } from '../../tools/adapters/agent-runtimes/notebookHooks';
-import { useAgentInspectorSink } from '../../components/inspector/agentInspector';
-import { chatInspectorRecorder, } from '../../components/inspector/chatInspect';
+import { useAgentInspectorTracer } from '../../components/inspector/agentSpans';
+import { chatSpanRecorder, } from '../../components/inspector/chatSpans';
 import { loopMessageChange, speakerOf, withLoopMessage } from './loopMessage';
 import { loopStepOf, withLoopStep } from './loopStep';
+import { applyLoopElement, loopElementChange } from './loopElement';
+import { loopWindowMessage, tellLoopWindow } from './loopWindow';
+import { useChatWords } from '../ChatLanguage';
 // Tracks pending prompts already auto-sent for a given conversation scope.
 // This prevents layout-driven unmount/remount cycles from re-sending prompts.
 const sentPendingPromptKeys = new Set();
@@ -526,6 +529,7 @@ runtimeId, thread, historyEndpoint, historyAuthToken: _historyAuthToken,
 pendingPrompt, contextSnapshot: externalContextSnapshot, mcpStatusData, sandboxStatusData, 
 // Tool approval banner
 showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApproveApproval: onApproveApprovalProp, onRejectApproval: onRejectApprovalProp, }) {
+    const chatText = useChatWords();
     useEffect(() => {
         setupPrimerPortals();
     }, []);
@@ -1606,22 +1610,22 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     onToolCallStartRef.current = onToolCallStart;
     const onToolCallCompleteRef = useRef(onToolCallComplete);
     onToolCallCompleteRef.current = onToolCallComplete;
-    // The Agent Inspector: the turns and tool calls, recorded as they happen.
-    const inspectorFromContext = useAgentInspectorSink();
-    const inspectorSink = inspectorGiven ?? inspectorFromContext;
+    // The Agent Inspector: the turns and tool calls, as spans, as they happen.
+    const inspectorFromContext = useAgentInspectorTracer();
+    const inspectorTracer = inspectorGiven ?? inspectorFromContext;
     const inspectorActorRef = useRef('Agent');
     inspectorActorRef.current =
         (typeof title === 'string' && title) || activeAgentId || 'Agent';
     const recorderRef = useRef(null);
-    if (inspectorSink && recorderRef.current?.sink !== inspectorSink) {
+    if (inspectorTracer && recorderRef.current?.tracer !== inspectorTracer) {
         recorderRef.current = {
-            sink: inspectorSink,
-            recorder: chatInspectorRecorder(inspectorSink, () => inspectorActorRef.current, {
+            tracer: inspectorTracer,
+            recorder: chatSpanRecorder(inspectorTracer, () => inspectorActorRef.current, {
                 frontendTools: () => (frontendToolsRef.current ?? []).map(tool => tool.name),
             }),
         };
     }
-    else if (!inspectorSink) {
+    else if (!inspectorTracer) {
         recorderRef.current = null;
     }
     const inspectAnswerRef = useRef('');
@@ -2724,6 +2728,20 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                         setDisplayItems(prev => withLoopStep(prev, step));
                         break;
                     }
+                    // What its code tells the page it sits in, outside the
+                    // conversation (LOOP P-25): handed to whoever listens.
+                    const windowMessage = loopWindowMessage(event.activity);
+                    if (windowMessage) {
+                        tellLoopWindow(windowMessage.data);
+                        break;
+                    }
+                    // An element its code opened in a side panel or on a page of its
+                    // own, changed or closed (LOOP P-18): kept for whoever draws them.
+                    const element = loopElementChange(event.activity);
+                    if (element) {
+                        applyLoopElement(element);
+                        break;
+                    }
                     // An application's code changed a message it sent: its author
                     // said, or the message taken away (LOOP P-15).
                     const change = loopMessageChange(event.activity);
@@ -3009,7 +3027,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                             }
                         },
                         onError: (error) => {
-                            const errorContent = `Error: ${error.message}`;
+                            const errorContent = chatText.error(error.message);
                             setDisplayItems(prev => prev.map(item => item.id === assistantMessageId
                                 ? { ...item, content: errorContent }
                                 : item));
@@ -3061,7 +3079,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         catch (err) {
             if (err.name !== 'AbortError') {
                 console.error('[ChatBase] Send error:', err);
-                const errorMessage = createAssistantMessage(`Error: ${err.message}`);
+                const errorMessage = createAssistantMessage(chatText.error(err.message));
                 setDisplayItems(prev => [...prev, errorMessage]);
                 setError(err);
             }
@@ -3094,6 +3112,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         getEnabledMcpToolNames,
         getEnabledSkillIds,
         noteThreadStarted,
+        chatText,
     ]);
     // Send pending prompt once history loaded and adapter/handler available
     useEffect(() => {