@datalayer/agent-runtimes 1.3.71 → 1.3.72

package/lib/chat/ChatFloating.d.ts

@@ -17,6 +17,7 @@
  */
 import React from 'react';
 import type { ChatVoice } from '../voice';
+import { type BalloonDisplay, type BalloonToolLine } from './assistant/toolLine';
 import { type AssistantCharacter } from './assistant/characters';
 import type { AssistantCharacterData } from './assistant/formats/types';
 import { type AssistantSaying } from './assistant/state';
@@ -38,6 +39,8 @@ export type FloatingConversation = {
     saying?: AssistantSaying;
     /** Whether its newest item is the answer being written. */
     answering: boolean;
+    /** The tool it is calling now, or just called: said in the balloon. */
+    tool?: BalloonToolLine;
 };
 /**
  * ChatFloating props — extends ChatCommonProps with floating/popup-specific configuration.
@@ -111,6 +114,18 @@ export interface ChatFloatingProps extends ChatCommonProps {
      * @default 'paperclip'
      */
     assistantCharacter?: string | AssistantCharacter | AssistantCharacterData;
+    /**
+     * How the floating assistant's balloon shows the conversation (LOOP
+     * T-23; an Appspec's `interface.balloon`):
+     * - 'history': every message, scrolled, under a header that counts them,
+     *   the composer last; closed, a peek of the newest words.
+     * - 'current': only what it says or does now — the answer being written,
+     *   or the tool it calls — in one compact balloon, *Now* on it; open, that
+     *   line and the composer, nothing to scroll.
+     * Either way a tool call is said in plain words: "Using list_invoices…".
+     * @default 'history'
+     */
+    balloonDisplay?: BalloonDisplay;
     /**
      * The runtime the floating assistant asks typed decisions at — its
      * `/api/v1/configure/inference/decisions`, as the `decide` tool asks — and
@@ -162,5 +177,5 @@ export interface ChatFloatingProps extends ChatCommonProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, buttonGlow, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, sidebarMountPoint, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, showContextRing, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, assistantCharacter, conversation, decisions, voice, }: ChatFloatingProps): React.JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, buttonGlow, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, sidebarMountPoint, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, showContextRing, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, assistantCharacter, balloonDisplay, conversation, decisions, voice, }: ChatFloatingProps): React.JSX.Element;
 export default ChatFloating;

package/lib/chat/ChatFloating.js

@@ -35,7 +35,9 @@ import { decisionsAskerAt } from './assistant/decisions';
 import { DecisionAsk } from './assistant/DecisionAsk';
 import { ServerSpeaker } from '../voice/speaker';
 import { useSpokenAnswers } from '../voice/useSpokenAnswers';
-import { BalloonApprovalMessage, CONVERSATION_BALLOON_WIDTH, ConversationBalloonClose, balloonTailAt, conversationBalloonHeight, conversationBalloonSx, peekLine, } from './assistant/ConversationBalloon';
+import { BalloonApprovalMessage, CONVERSATION_BALLOON_WIDTH, ConversationBalloonClose, balloonTailAt, conversationBalloonHeight, conversationBalloonSx, CURRENT_BALLOON_HEIGHT, peekLine, } from './assistant/ConversationBalloon';
+import { ConversationBalloonHeader, CurrentBalloonBody, } from './assistant/BalloonParts';
+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';
@@ -68,7 +70,7 @@ const clamp = (value, max) => Math.max(8, Math.min(value, Math.max(8, max)));
  * ChatFloating component
  * 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, conversation, decisions, voice, }) {
+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 = DEFAULT_BALLOON_DISPLAY, conversation, decisions, voice, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -131,6 +133,9 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         pendingApproval: false,
     });
     const [ownAnswering, setAnswering] = useState(false);
+    // The tool it calls now, and how many messages the history holds (T-23).
+    const [ownTool, setOwnTool] = useState();
+    const [messageCount, setMessageCount] = useState(0);
     /*
      * Its voice (VOICE.md V1): the answers said by the speech service, as
      * they are written (VO-20), the state following the sound (VO-22).
@@ -187,6 +192,8 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const [ownSaying, setSaying] = useState();
     const saying = conversation ? conversation.saying : ownSaying;
     const answering = conversation ? conversation.answering : ownAnswering;
+    const toolLine = conversation ? conversation.tool : ownTool;
+    const showsCurrent = balloonDisplay === 'current';
     const [heardId, setHeardId] = useState();
     const [freshSaying, setFreshSaying] = useState(false);
     useEffect(() => {
@@ -244,6 +251,14 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const assistantDecide = useMemo(() => decisions?.serverUrl
         ? decisionsAskerAt(decisions.serverUrl, decisions.token)
         : undefined, [decisions?.serverUrl, decisions?.token]);
+    // At work: a turn runs, or the host's conversation says it does.
+    const atWork = assistantState === 'thinking' ||
+        assistantState === 'working' ||
+        assistantState === 'speaking';
+    // The tool line, while its call runs or its turn goes on (T-23).
+    const toolSaid = toolLine && (toolLine.phase === 'running' || atWork) ? toolLine : undefined;
+    // Current: what is said now — thinking until the answer's words arrive.
+    const currentWords = atWork && !answering ? 'Thinking…' : saying?.text || undefined;
     const assistantBalloon = assistantState === 'paused'
         ? { text: ASSISTANT_WORDS.paused }
         : speakerState.sentence
@@ -255,20 +270,38 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     ? { text: ASSISTANT_WORDS.approval, approval: balloonApproval }
                     : assistantState === 'waiting'
                         ? { text: ASSISTANT_WORDS.waiting }
-                        : unheard && saying
-                            ? {
-                                // A peek: the first words; the rest is in the conversation.
-                                ...peekLine(saying.text),
-                                onDismiss: () => {
-                                    setHeardId(saying.id);
-                                    setFreshSaying(false);
-                                },
-                            }
-                            : { text: description };
+                        : toolSaid
+                            ? { text: toolLineText(toolSaid), tool: toolSaid, busy: atWork }
+                            : showsCurrent && (unheard || atWork)
+                                ? // Current: the words as they are written, whole.
+                                    {
+                                        text: currentWords ?? description,
+                                        more: saying?.more,
+                                        speaking: answering && atWork,
+                                        busy: atWork,
+                                        onDismiss: saying
+                                            ? () => {
+                                                setHeardId(saying.id);
+                                                setFreshSaying(false);
+                                            }
+                                            : undefined,
+                                    }
+                                : unheard && saying
+                                    ? {
+                                        // A peek: the first words; the rest is in the conversation.
+                                        ...peekLine(saying.text),
+                                        onDismiss: () => {
+                                            setHeardId(saying.id);
+                                            setFreshSaying(false);
+                                        },
+                                    }
+                                    : { text: description };
     const balloonInsists = !!speakerState.sentence ||
         assistantState === 'greeting' ||
         assistantState === 'waiting' ||
         !!balloonApproval ||
+        !!toolSaid ||
+        (showsCurrent && atWork) ||
         (unheard && (assistantState === 'speaking' || freshSaying));
     const panelOnLoadingChange = panelProps?.onLoadingChange;
     const panelOnDisplayItemsChange = panelProps?.onDisplayItemsChange;
@@ -283,6 +316,11 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             ? previous
             : tool);
         setAnswering(newestIsAnswer(items));
+        const line = newestToolLine(items);
+        setOwnTool(previous => previous?.id === line?.id && previous?.phase === line?.phase
+            ? previous
+            : line);
+        setMessageCount(conversationCount(items));
         setVoiceItems(items);
         const said = latestSaying(items);
         setSaying(previous => previous?.id === said?.id && previous?.text === said?.text
@@ -499,9 +537,14 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const viewportWidth = typeof window === 'undefined' ? 1280 : window.innerWidth;
     const viewportHeight = typeof window === 'undefined' ? 800 : window.innerHeight;
     const conversationHeight = conversationBalloonHeight(viewportHeight);
+    // Open, `current` is the line and the composer; `history`, 60% of the window.
+    const currentOpen = showsCurrent && !conversation;
+    const openBalloonHeight = currentOpen
+        ? CURRENT_BALLOON_HEIGHT
+        : conversationHeight;
     const balloonGeometry = () => {
         const widthPx = CONVERSATION_BALLOON_WIDTH;
-        const heightPx = conversationHeight;
+        const heightPx = openBalloonHeight;
         if (stageDrag.position) {
             // Toward the page's inside: above the character, below it, or beside
             // it when the window is too short for either.
@@ -713,7 +756,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const popupHeight = isMobile
         ? '100%'
         : conversationBalloon
-            ? conversationHeight
+            ? openBalloonHeight
             : height;
     // Mobile full-screen styles
     const mobileStyles = isMobile
@@ -902,7 +945,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     ? 'canvas.subtle'
                     : 'canvas.default')
                 : {}),
-        }, "data-conversation-balloon": conversationBalloon ? '' : undefined, children: [conversationBalloon ? (_jsx(ConversationBalloonClose, { onClose: handleToggle })) : null, viewMode === 'floating-draggable' && !isMobile && (_jsx(Box, { onPointerDown: drag.onHandlePointerDown, "aria-label": "Move the chat", sx: {
+        }, "data-conversation-balloon": conversationBalloon ? '' : undefined, "data-balloon-display": conversationBalloon ? balloonDisplay : undefined, children: [conversationBalloon ? (_jsx(ConversationBalloonClose, { onClose: handleToggle })) : null, conversationBalloon && !currentOpen ? (_jsx(ConversationBalloonHeader, { count: messageCount })) : null, viewMode === 'floating-draggable' && !isMobile && (_jsx(Box, { onPointerDown: drag.onHandlePointerDown, "aria-label": "Move the chat", sx: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -957,7 +1000,9 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     ...poweredByProps,
                 }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
                     showAvatars: true,
-                }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: frontendTools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, showContextRing: showContextRing, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: onInformationClick, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, voice: voice, voiceSpeaking: speakerState.speaking, onStopSpeaking: speaker ? stopSpeaking : undefined, ...panelProps, ...assistantChat, onLoadingChange: handleLoadingChange, onDisplayItemsChange: handleDisplayItemsChange, children: children }))] }));
+                }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: frontendTools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, showContextRing: showContextRing, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: onInformationClick, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, voice: voice, voiceSpeaking: speakerState.speaking, onStopSpeaking: speaker ? stopSpeaking : undefined, ...panelProps, ...assistantChat, onLoadingChange: handleLoadingChange, onDisplayItemsChange: handleDisplayItemsChange, children: conversationBalloon && currentOpen ? (
+                // Current: the one thing said or done now, over the composer.
+                _jsx(Box, { sx: { px: 3, pt: 3, pb: 2, overflow: 'hidden' }, children: _jsx(CurrentBalloonBody, { text: toolSaid ? undefined : (currentWords ?? description), tool: toolSaid, busy: atWork, speaking: answering && atWork }) })) : (children) }))] }));
     /*
      * The floating popup's button. Words not yet heard make it blink for the
      * person's attention, until the chat is opened; hovered, they show in a
@@ -1005,7 +1050,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         left: px(stageDrag.position.left),
                         top: px(stageDrag.position.top),
                     }
-                    : getPositionStyles(), stageRef: stageRef, onDragStart: stageDrag.onHandlePointerDown, open: isOpen, onToggle: handleToggle, balloon: assistantBalloon, insist: balloonInsists, onDismiss: dismissAssistant, ownRef: popupRef, mouthLevel: mouthLevel })), showButton && !isOpen && !assistantShown && (_jsx(Box, { sx: {
+                    : getPositionStyles(), stageRef: stageRef, onDragStart: stageDrag.onHandlePointerDown, open: isOpen, onToggle: handleToggle, balloon: assistantBalloon, balloonDisplay: balloonDisplay, insist: balloonInsists, onDismiss: dismissAssistant, ownRef: popupRef, mouthLevel: mouthLevel })), showButton && !isOpen && !assistantShown && (_jsx(Box, { sx: {
                     ...getPositionStyles(),
                 }, children: _jsxs(Box, { sx: {
                         position: 'relative',

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

@@ -14,10 +14,11 @@
  *
  * @module chat/assistant/AssistantStage
  */
-import type { JSX, RefObject } from 'react';
+import type { JSX, ReactNode, RefObject } from 'react';
 import { type AssistantCharacter } from './characters';
 import type { AssistantCharacterData } from './formats/types';
 import type { DecisionAsker } from './decisions';
+import type { BalloonDisplay, BalloonToolLine } from './toolLine';
 import { type AssistantAway, type AssistantState, type BalloonApproval } from './state';
 /**
  * Where the balloon goes so that it stays inside the window (T-23): toward
@@ -79,7 +80,21 @@ export interface AssistantStageProps {
         approval?: BalloonApproval;
         /** Puts the peek away (a × beside its line); never an approval's. */
         onDismiss?: () => void;
+        /** The tool being called: "Using list_invoices…" in place of the words. */
+        tool?: BalloonToolLine;
+        /** Words are being written (`current`): read out once all have arrived. */
+        speaking?: boolean;
+        /** The agent is at work (`current`): *Now* breathes. */
+        busy?: boolean;
+        /** What goes with the words (`current`): a notebook given, read-only. */
+        attachment?: ReactNode;
     };
+    /**
+     * How the balloon shows the conversation (LOOP T-23): a peek of it
+     * (`history`, the default — open, the conversation is the whole history),
+     * or the one thing being said or done now (`current`).
+     */
+    balloonDisplay?: BalloonDisplay;
     /** Show the balloon without being hovered: something new to say. */
     insist?: boolean;
     /** Send it away (T-27): for the page, for the session, or for good. */
@@ -114,5 +129,5 @@ export declare function mouthOpening(level: number): 0 | 1 | 2 | 3;
  * `data-assistant-mouth`, each frame, without drawing the character again.
  */
 export declare function useMouth(stageRef: RefObject<HTMLElement | null>, mouthLevel: (() => number) | undefined, speaking: boolean): void;
-export declare function AssistantStage({ character, state, size, place, stageRef, onDragStart, open, onToggle, balloon, insist, onDismiss, ownRef, decide, mouthLevel, stayPut, }: AssistantStageProps): JSX.Element;
+export declare function AssistantStage({ character, state, size, place, stageRef, onDragStart, open, onToggle, balloon, insist, onDismiss, ownRef, decide, mouthLevel, stayPut, balloonDisplay, }: AssistantStageProps): JSX.Element;
 export default AssistantStage;

package/lib/chat/assistant/AssistantStage.js

@@ -209,7 +209,7 @@ export function useMouth(stageRef, mouthLevel, speaking) {
         };
     }, [stageRef, mouthLevel, speaking]);
 }
-export function AssistantStage({ character, state, size = 88, place, stageRef, onDragStart, open, onToggle, balloon, insist = false, onDismiss, ownRef, decide, mouthLevel, stayPut = false, }) {
+export function AssistantStage({ character, state, size = 88, place, stageRef, onDragStart, open, onToggle, balloon, insist = false, onDismiss, ownRef, decide, mouthLevel, stayPut = false, balloonDisplay = 'history', }) {
     // 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'
@@ -232,7 +232,7 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
     // A decision being asked, or its answer, keeps the balloon up.
     const [deciding, setDeciding] = useState(false);
     const showBalloon = !aside && !open && !!balloon && (hovered || insist || deciding);
-    return (_jsxs(Box, { ref: stageRef, "data-assistant-state": state, "data-assistant-aside": aside, sx: {
+    return (_jsxs(Box, { ref: stageRef, "data-assistant-state": state, "data-assistant-aside": aside, "data-assistant-balloon": balloonDisplay, sx: {
             position: 'fixed',
             zIndex: 1002,
             ...place,
@@ -331,7 +331,7 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
             '@media (prefers-reduced-motion: reduce)': {
                 '& *': { animation: 'none !important' },
             },
-        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [showBalloon && balloon && (_jsx(SpeechBalloon, { text: balloon.text, more: balloon.more, approval: balloon.approval, onDismissPeek: balloon.onDismiss, decide: decide, onDecisionActive: setDeciding, wide: deciding, onOpen: onToggle, above: size + 8, side: balloonSide(place).side, align: balloonSide(place).align, tailAt: size / 2 })), _jsx(Box, { as: "button", type: "button", "aria-label": open ? `Close the conversation with ${name}` : `Talk to ${name}`, "aria-expanded": open, onPointerDown: (event) => {
+        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [showBalloon && balloon && (_jsx(SpeechBalloon, { text: balloon.text, more: balloon.more, approval: balloon.approval, onDismissPeek: balloon.onDismiss, display: balloonDisplay, tool: balloon.tool, speaking: balloon.speaking, busy: balloon.busy, attachment: balloon.attachment, decide: decide, onDecisionActive: setDeciding, wide: deciding, onOpen: onToggle, above: size + 8, side: balloonSide(place).side, align: balloonSide(place).align, tailAt: size / 2 })), _jsx(Box, { as: "button", type: "button", "aria-label": open ? `Close the conversation with ${name}` : `Talk to ${name}`, "aria-expanded": open, onPointerDown: (event) => {
                     pressedAt.current = { x: event.clientX, y: event.clientY };
                     onDragStart(event);
                 }, onClick: (event) => {

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

@@ -0,0 +1,55 @@
+/**
+ * The parts the two balloon displays are drawn with (LOOP T-23): the tool
+ * line ("Using **list_invoices**…"), what a screen reader hears of it, the
+ * `current` balloon's *Now*, and the `history` balloon's header
+ * ("Conversation · 6").
+ *
+ * @module chat/assistant/BalloonParts
+ */
+import type { JSX, ReactNode } from 'react';
+import { type BalloonToolLine } from './toolLine';
+/**
+ * A tool call in the balloon, in plain words: its mark when the catalogue
+ * gives one (an MCP server's, a skill's, a tool set's), else a tool; "Using
+ * **list_invoices**…", "Done: **list_invoices**", "**list_invoices** failed".
+ * Seen, not read out: {@link ToolLineAnnouncer} says it once per change.
+ */
+export declare function BalloonToolLineView({ line, }: {
+    line: BalloonToolLine;
+}): JSX.Element;
+/**
+ * What a screen reader hears of the tool lines, politely: once when a call
+ * starts and once when it ends, never while it runs nor while words stream.
+ */
+export declare function ToolLineAnnouncer({ line, }: {
+    line?: BalloonToolLine;
+}): JSX.Element;
+/**
+ * The `current` balloon's mark: *Now*, with a dot that breathes while the
+ * agent is at work — still for a reader who asks for reduced motion.
+ */
+export declare function BalloonNow({ busy }: {
+    busy?: boolean;
+}): JSX.Element;
+/** How the `history` balloon names itself: "Conversation · 6". */
+export declare function conversationHeaderText(count: number): string;
+/**
+ * The `history` balloon's header: what it holds — the conversation, and how
+ * many messages — over the scrolled history and the composer.
+ */
+export declare function ConversationBalloonHeader({ count, }: {
+    count: number;
+}): JSX.Element;
+/**
+ * What the `current` balloon holds: *Now*, then the one thing being said or
+ * done — the tool line while a tool runs, else the words — cut to a few
+ * lines, never scrolled; and what goes with them (`attachment`).
+ */
+export declare function CurrentBalloonBody({ text, tool, busy, speaking, attachment, }: {
+    text?: string;
+    tool?: BalloonToolLine;
+    busy?: boolean;
+    /** Words are arriving: read out once they have. */
+    speaking?: boolean;
+    attachment?: ReactNode;
+}): JSX.Element;

package/lib/chat/assistant/BalloonParts.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { CheckIcon, ToolsIcon, XIcon } from '@primer/octicons-react';
+import { SpecMark, hasMark, marksOfToolCall } from '../marks';
+import { toolAnnouncement, toolLineParts, } from './toolLine';
+/** Out of sight, still heard. */
+const VISUALLY_HIDDEN = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    whiteSpace: 'nowrap',
+};
+const PHASE_COLOR = {
+    running: 'fg.muted',
+    done: 'success.fg',
+    failed: 'danger.fg',
+};
+/**
+ * A tool call in the balloon, in plain words: its mark when the catalogue
+ * gives one (an MCP server's, a skill's, a tool set's), else a tool; "Using
+ * **list_invoices**…", "Done: **list_invoices**", "**list_invoices** failed".
+ * Seen, not read out: {@link ToolLineAnnouncer} says it once per change.
+ */
+export function BalloonToolLineView({ line, }) {
+    const { before, name, after } = toolLineParts(line);
+    const marks = line.tool ? marksOfToolCall(line.tool, undefined) : null;
+    const Icon = line.phase === 'done'
+        ? CheckIcon
+        : line.phase === 'failed'
+            ? XIcon
+            : ToolsIcon;
+    return (_jsxs(Box, { as: "span", "aria-hidden": "true", "data-balloon-tool": line.phase, "data-balloon-tool-name": line.tool || undefined, sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 1,
+            minWidth: 0,
+            maxWidth: '100%',
+            color: line.phase === 'failed' ? 'danger.fg' : 'fg.default',
+        }, children: [_jsx(Box, { as: "span", sx: {
+                    display: 'inline-flex',
+                    flexShrink: 0,
+                    color: PHASE_COLOR[line.phase],
+                }, children: line.phase === 'running' && hasMark(marks) ? (_jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 14 })) : (_jsx(Icon, { size: 14 })) }), _jsxs(Box, { as: "span", sx: {
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, children: [before, name ? (_jsx(Box, { as: "strong", sx: { fontWeight: 'semibold' }, children: name })) : null, after] })] }));
+}
+/**
+ * What a screen reader hears of the tool lines, politely: once when a call
+ * starts and once when it ends, never while it runs nor while words stream.
+ */
+export function ToolLineAnnouncer({ line, }) {
+    const last = useRef(undefined);
+    const [said, setSaid] = useState('');
+    useEffect(() => {
+        const words = toolAnnouncement(line, last.current);
+        if (line && words) {
+            last.current = { id: line.id, phase: line.phase };
+            setSaid(words);
+        }
+    }, [line?.id, line?.phase]);
+    return (_jsx(Box, { as: "span", role: "status", "aria-live": "polite", "data-balloon-announce": "", sx: VISUALLY_HIDDEN, children: said }));
+}
+/**
+ * The `current` balloon's mark: *Now*, with a dot that breathes while the
+ * agent is at work — still for a reader who asks for reduced motion.
+ */
+export function BalloonNow({ busy = false }) {
+    return (_jsxs(Box, { as: "span", "data-balloon-now": busy ? 'busy' : '', sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '6px',
+            fontSize: 0,
+            fontWeight: 'semibold',
+            color: 'accent.fg',
+            textTransform: 'uppercase',
+            letterSpacing: '0.04em',
+            '@keyframes balloonNowBreathe': {
+                '0%, 100%': { opacity: 1, transform: 'scale(1)' },
+                '50%': { opacity: 0.35, transform: 'scale(0.7)' },
+            },
+            '& [data-balloon-now-dot]': {
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                bg: 'accent.emphasis',
+                animation: busy
+                    ? 'balloonNowBreathe 1.2s ease-in-out infinite'
+                    : 'none',
+            },
+            '@media (prefers-reduced-motion: reduce)': {
+                '& [data-balloon-now-dot]': { animation: 'none' },
+            },
+        }, children: [_jsx(Box, { as: "span", "data-balloon-now-dot": "", "aria-hidden": "true" }), "Now"] }));
+}
+/** How the `history` balloon names itself: "Conversation · 6". */
+export function conversationHeaderText(count) {
+    return count > 0 ? `Conversation · ${count}` : '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, }) {
+    return (_jsx(Box, { "data-balloon-header": "", sx: {
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            // Room for the close control over the corner.
+            pl: 3,
+            pr: 6,
+            py: 2,
+            borderBottom: '1px solid',
+            borderColor: 'border.muted',
+            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) }) }));
+}
+/**
+ * What the `current` balloon holds: *Now*, then the one thing being said or
+ * done — the tool line while a tool runs, else the words — cut to a few
+ * lines, never scrolled; and what goes with them (`attachment`).
+ */
+export function CurrentBalloonBody({ text, tool, busy = false, speaking = false, attachment, }) {
+    return (_jsxs(Box, { "data-balloon-current": "", sx: { display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 }, children: [_jsx(BalloonNow, { busy: busy }), tool ? (_jsx(BalloonToolLineView, { line: tool })) : text ? (_jsx(Box, { "aria-live": "polite", "aria-busy": speaking, "data-balloon-current-text": "", sx: {
+                    display: '-webkit-box',
+                    WebkitLineClamp: 4,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                    overflowWrap: 'anywhere',
+                }, children: text })) : null, attachment, _jsx(ToolLineAnnouncer, { line: tool })] }));
+}

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

@@ -18,6 +18,11 @@ export declare const CONVERSATION_BALLOON_WIDTH = 380;
 /** The open balloon's tallest, in pixels, and its share of the window. */
 export declare const CONVERSATION_BALLOON_MAX_HEIGHT = 560;
 export declare const CONVERSATION_BALLOON_VIEWPORT_SHARE = 0.6;
+/**
+ * The open balloon's height when it shows only what is said now
+ * (`current`): the line and the composer, nothing to scroll.
+ */
+export declare const CURRENT_BALLOON_HEIGHT = 230;
 /** The open balloon's height for a window this tall: 60% of it, 560px at most. */
 export declare function conversationBalloonHeight(viewportHeight: number): number;
 /**

package/lib/chat/assistant/ConversationBalloon.js

@@ -9,6 +9,11 @@ export const CONVERSATION_BALLOON_WIDTH = 380;
 /** The open balloon's tallest, in pixels, and its share of the window. */
 export const CONVERSATION_BALLOON_MAX_HEIGHT = 560;
 export const CONVERSATION_BALLOON_VIEWPORT_SHARE = 0.6;
+/**
+ * The open balloon's height when it shows only what is said now
+ * (`current`): the line and the composer, nothing to scroll.
+ */
+export const CURRENT_BALLOON_HEIGHT = 230;
 /** The open balloon's height for a window this tall: 60% of it, 560px at most. */
 export function conversationBalloonHeight(viewportHeight) {
     return Math.max(240, Math.min(CONVERSATION_BALLOON_MAX_HEIGHT, Math.round(viewportHeight * CONVERSATION_BALLOON_VIEWPORT_SHARE)));

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

@@ -9,11 +9,19 @@
  * the conversation is elsewhere (the LOOP workspace), *Ask a decision*: a
  * typed decision asked of Jev, its answer said back in the balloon.
  *
+ * Shown `current` (LOOP T-23), it is the one thing being said or done now:
+ * *Now*, then the words as they are written, or the tool being called
+ * ("Using **list_invoices**…"), cut to a few lines, and what goes with them
+ * (a notebook given, read-only). Either way a tool line stands in for the
+ * peek while a tool runs, and a screen reader hears it once as it starts and
+ * once as it ends.
+ *
  * @module chat/assistant/SpeechBalloon
  */
-import type { JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 import { type BalloonApproval } from './state';
 import type { DecisionAsker } from './decisions';
+import type { BalloonDisplay, BalloonToolLine } from './toolLine';
 export interface SpeechBalloonProps {
     text: string;
     /** There is more than the balloon holds. */
@@ -38,6 +46,19 @@ export interface SpeechBalloonProps {
     wide?: boolean;
     /** Puts the peek away: a × beside its line. Never for an approval. */
     onDismissPeek?: () => void;
+    /**
+     * How it is shown: a peek of the conversation (`history`, the default),
+     * or the one thing being said or done now (`current`).
+     */
+    display?: BalloonDisplay;
+    /** The tool being called: said in place of the words while it runs. */
+    tool?: BalloonToolLine;
+    /** Words are being written: read out once they have all arrived. */
+    speaking?: boolean;
+    /** The agent is at work: *Now* breathes. */
+    busy?: boolean;
+    /** What goes with the words, under them: a notebook given, read-only. */
+    attachment?: ReactNode;
 }
-export declare function SpeechBalloon({ text, more, onOpen, above, side, align, tailAt, approval, decide, onDecisionActive, wide, onDismissPeek, }: SpeechBalloonProps): JSX.Element;
+export declare function SpeechBalloon({ text, more, onOpen, above, side, align, tailAt, approval, decide, onDecisionActive, wide, onDismissPeek, display, tool, speaking, busy, attachment, }: SpeechBalloonProps): JSX.Element;
 export default SpeechBalloon;

package/lib/chat/assistant/SpeechBalloon.js

@@ -5,8 +5,10 @@ import { XIcon } from '@primer/octicons-react';
 import { ASSISTANT_WORDS } from './state';
 import { moreWaiting } from './ConversationBalloon';
 import { DecisionAsk } from './DecisionAsk';
-export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, approval, decide, onDecisionActive, wide = false, onDismissPeek, }) {
-    return (_jsxs(Box, { role: "status", "aria-live": "polite", "data-speech-balloon": "", sx: {
+import { BalloonToolLineView, CurrentBalloonBody, ToolLineAnnouncer, } from './BalloonParts';
+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, }) {
+    const current = display === 'current';
+    return (_jsxs(Box, { "data-speech-balloon": "", "data-balloon-display": display, sx: {
             position: 'absolute',
             // Pixels, as strings: a number here is read as the theme's space
             // scale (`-7` would be `-space[7]`, 48px).
@@ -14,14 +16,15 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                 ? { bottom: `${above}px` }
                 : { top: `${above}px` }),
             [align]: 0,
-            maxWidth: wide ? 300 : 280,
-            width: wide ? 300 : 'max-content',
+            maxWidth: wide || (current && attachment) ? 300 : current ? 260 : 280,
+            width: wide || (current && attachment) ? 300 : 'max-content',
             px: 3,
             py: 2,
             bg: 'canvas.default',
             color: 'fg.default',
             border: '1px solid',
-            borderColor: 'border.default',
+            // The current balloon is the agent's voice now: its accent's edge.
+            borderColor: current ? 'accent.muted' : 'border.default',
             borderRadius: 'var(--theme-radius-bubble, 16px)',
             boxShadow: 'shadow.medium',
             fontSize: 1,
@@ -37,10 +40,21 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                 bg: 'canvas.default',
                 borderRight: '1px solid',
                 borderBottom: '1px solid',
-                borderColor: 'border.default',
+                borderColor: current ? 'accent.muted' : 'border.default',
                 transform: side === 'above' ? 'rotate(45deg)' : 'rotate(225deg)',
             },
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: 1 }, children: [_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: 1 }, children: [current && !approval ? (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", onClick: onOpen, sx: {
+                            flex: 1,
+                            minWidth: 0,
+                            m: 0,
+                            p: 0,
+                            border: 0,
+                            bg: 'transparent',
+                            color: 'inherit',
+                            font: 'inherit',
+                            textAlign: 'left',
+                            cursor: 'pointer',
+                        }, children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking }) })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
                             flex: 1,
                             minWidth: 0,
                             m: 0,
@@ -52,6 +66,6 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                             textAlign: 'left',
                             cursor: 'pointer',
                             '&:hover': { textDecoration: 'underline' },
-                        }, 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] }), 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] })), decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
+                        }, children: tool ? (_jsx(BalloonToolLineView, { line: tool })) : (_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] }), 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] })), current && attachment ? (_jsx(Box, { "data-balloon-attachment": "", sx: { mt: 2 }, children: attachment })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
 }
 export default SpeechBalloon;