@theoremjs/react 0.3.4-next.849.g2dfd688 → 0.3.4-next.853.gebc3c60

package/README.md

@@ -479,6 +479,8 @@ function MyChat() {
 
 To show the transcript and the composer, use `ChatTranscript` and `ChatComposerBar` from `/ui`. You can also draw your own from `chat.blocks`.
 
+The composer bar has a selector for the model, its effort, and each option. When their values do not fit the bar, each selector shows only its icon, and a tooltip gives its name and value. When the icons do not fit either, the row scrolls inside the composer. A control you pass as `generationSelect` keeps its own look and scrolls with the row.
+
 `ChatTranscript` places `citation` blocks after the answer text by default (the Sources strip under the prose). Pass `bodyKindPlacement={{}}` when citations must stay in stream order between text segments (inline citations).
 
 The hooks and the client write no English text. They return kinds, codes, and states. You write the words.

package/client/live/apply-live-turn-tool-event.d.ts

@@ -1,4 +1,11 @@
 import type { TurnEvent } from '@theoremjs/agents';
+/** The tool a live call is running: its name, and its activity label once the call runs. */
+export type LiveActiveTool = {
+    name: string;
+    activity?: string;
+};
+/** The tool to show after `next`: only the running phase carries the activity, so a later phase of that tool keeps it. */
+export declare function nextActiveTool(prev: LiveActiveTool | null, next: LiveActiveTool): LiveActiveTool;
 type LiveToolEventArgs = {
     /** The call whose gate the user is looking at, if one is open. */
     gateCallId: string | undefined;
@@ -7,7 +14,7 @@ type LiveToolEventArgs = {
     clearInterim: () => void;
     clearActiveTool: () => void;
     reportFailure: (err: unknown) => void;
-    setActiveTool: (name: string) => void;
+    setActiveTool: (tool: LiveActiveTool) => void;
 };
 export type { LiveToolEventArgs };
 /** Apply a live turn event to active-tool / caption / error state. */

package/client/live/apply-live-turn-tool-event.js

@@ -1,4 +1,8 @@
 import { TheoremStreamError } from '@theoremjs/web/client';
+/** The tool to show after `next`: only the running phase carries the activity, so a later phase of that tool keeps it. */
+export function nextActiveTool(prev, next) {
+    return next.activity === undefined && prev?.name === next.name ? prev : next;
+}
 /**
  * A failed tool step as the host reported it: the user reads its wording (else
  * the labels' for its kind); the model's `message` stays builder detail.
@@ -25,7 +29,9 @@ function applyToolPhase(tool, args) {
         clearToolUnlessGated(args);
         return;
     }
-    args.setActiveTool(tool.name);
+    args.setActiveTool(tool.phase === 'running' && tool.activity
+        ? { name: tool.name, activity: tool.activity }
+        : { name: tool.name });
 }
 /** Apply a live turn event to active-tool / caption / error state. */
 export function applyLiveTurnToolEvent(event, args) {

package/components/live/use-live-call.d.ts

@@ -35,7 +35,7 @@ export declare function useLiveCall({ iface, connection, ...options }: LiveCallI
     isVideoOn: boolean;
     sessionActive: boolean;
     liveState: import("@theoremjs/web/client").LiveState;
-    activeTool: string | null;
+    activeTool: import("../../client/live/apply-live-turn-tool-event.ts").LiveActiveTool | null;
     status: import("@theoremjs/web/client").LiveSessionStatus;
     textAvailable: boolean;
     textDraft: string;

package/components/live/use-live-call.js

@@ -77,7 +77,7 @@ export function useLiveCall({ iface, connection, ...options }) {
     const state = useMemo(() => liveState({
         status: ui.status,
         connectPhase: ui.connectPhase,
-        toolName: ui.activeTool,
+        toolName: ui.activeTool?.name ?? null,
         isMuted: ui.isMuted,
         voiceEnabled: voiceAvailable,
     }), [ui.activeTool, ui.connectPhase, ui.isMuted, ui.status, voiceAvailable]);
@@ -108,7 +108,6 @@ export function useLiveCall({ iface, connection, ...options }) {
         setCaptions: ui.setCaptions,
         setInputLevel: ui.setInputLevel,
         setOutputLevel: ui.setOutputLevel,
-        setActiveTool: ui.setActiveTool,
         setSessionPermissions: ui.setSessionPermissions,
         setVideoPreview: ui.setVideoPreview,
         setVideoFacingMode: ui.setVideoFacingMode,

package/components/live/use-live-runner-ui.d.ts

@@ -2,7 +2,7 @@ import { type LabelOverrides, type SessionEventOf } from '@theoremjs/agents';
 import type { LiveConnectPhase, LiveGateAnswer, LiveSessionStatus, LiveToolGatePrompt, ToolGateResolution } from '@theoremjs/web/client';
 import { type ClientFailure } from '@theoremjs/web/client';
 import { type Dispatch, type SetStateAction } from 'react';
-import { applyLiveTurnToolEvent } from '../../client/live/apply-live-turn-tool-event.ts';
+import { applyLiveTurnToolEvent, type LiveActiveTool } from '../../client/live/apply-live-turn-tool-event.ts';
 import { type LiveCaptionState } from '../../client/live/live-captions.ts';
 import type { LiveFacingMode, LiveVideoCapture } from '../../client/live/live-video.ts';
 /** UI + media state bag for the live runner. `labels` is the interface's: the profile's wording. */
@@ -21,8 +21,8 @@ export declare function useLiveRunnerUiState(labels: LabelOverrides): {
     setIsMuted: Dispatch<SetStateAction<boolean>>;
     isVideoOn: boolean;
     setIsVideoOn: Dispatch<SetStateAction<boolean>>;
-    activeTool: string | null;
-    setActiveTool: Dispatch<SetStateAction<string | null>>;
+    activeTool: LiveActiveTool | null;
+    setActiveTool: Dispatch<SetStateAction<LiveActiveTool | null>>;
     captions: LiveCaptionState;
     setCaptions: Dispatch<SetStateAction<LiveCaptionState>>;
     failure: ClientFailure | null;
@@ -53,7 +53,7 @@ export declare function useLiveRunnerUiState(labels: LabelOverrides): {
 /** Gate prompt + live turn-tool event wiring. */
 export declare function useLiveRunnerGate(args: {
     setCaptions: Dispatch<SetStateAction<LiveCaptionState>>;
-    setActiveTool: Dispatch<SetStateAction<string | null>>;
+    setActiveTool: Dispatch<SetStateAction<LiveActiveTool | null>>;
     reportFailure: (err: unknown) => void;
 }): {
     gatePrompt: LiveToolGatePrompt | null;

package/components/live/use-live-runner-ui.js

@@ -1,7 +1,7 @@
 import { TheoremError } from '@theoremjs/agents';
 import { clientFailure } from '@theoremjs/web/client';
 import { useCallback, useEffect, useRef, useState, } from 'react';
-import { applyLiveTurnToolEvent } from "../../client/live/apply-live-turn-tool-event.js";
+import { applyLiveTurnToolEvent, nextActiveTool, } from "../../client/live/apply-live-turn-tool-event.js";
 import { applyLiveTurnEvent, clearLiveCaptionInterim, emptyLiveCaptionState, } from "../../client/live/live-captions.js";
 /** UI + media state bag for the live runner. `labels` is the interface's: the profile's wording. */
 export function useLiveRunnerUiState(labels) {
@@ -136,7 +136,9 @@ export function useLiveRunnerGate(args) {
                 args.setActiveTool(null);
             },
             reportFailure: args.reportFailure,
-            setActiveTool: args.setActiveTool,
+            setActiveTool: (tool) => {
+                args.setActiveTool((prev) => nextActiveTool(prev, tool));
+            },
         });
     }, [args, answerGate]);
     const waitForGateDecision = useCallback((prompt) => {

package/components/live/use-live-session-client.d.ts

@@ -24,7 +24,6 @@ export type LiveClientBindings = LiveCallOptions & {
     setCaptions: Dispatch<SetStateAction<LiveCaptionState>>;
     setInputLevel: Dispatch<SetStateAction<number>>;
     setOutputLevel: Dispatch<SetStateAction<number>>;
-    setActiveTool: Dispatch<SetStateAction<string | null>>;
     setSessionPermissions: Dispatch<SetStateAction<string[]>>;
     setVideoPreview: Dispatch<SetStateAction<HTMLVideoElement | null>>;
     setVideoFacingMode: Dispatch<SetStateAction<LiveFacingMode>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.849.g2dfd688",
+  "version": "0.3.4-next.853.gebc3c60",
   "description": "React bindings for Theorem: headless hooks + transport, an Astryx chat UI, and a Web-standard server handler.",
   "license": "MIT",
   "type": "module",
@@ -60,8 +60,8 @@
     "@stylexjs/stylex": "0.19.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@theoremjs/agents": "^0.3.4-next.849.g2dfd688",
-    "@theoremjs/web": "^0.3.4-next.849.g2dfd688"
+    "@theoremjs/agents": "^0.3.4-next.853.gebc3c60",
+    "@theoremjs/web": "^0.3.4-next.853.gebc3c60"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ChatComposerBar.js

@@ -5,7 +5,6 @@ import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
 import { HStack } from '@astryxdesign/core/HStack';
 import { IconButton } from '@astryxdesign/core/IconButton';
 import { Kbd } from '@astryxdesign/core/Kbd';
-import { Selector } from '@astryxdesign/core/Selector';
 import { StackItem } from '@astryxdesign/core/Stack';
 import { Text } from '@astryxdesign/core/Text';
 import { Thumbnail } from '@astryxdesign/core/Thumbnail';
@@ -20,6 +19,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { stageComposerFiles } from "../client/composer-attachments.js";
 import { useComposerVoice } from "../components/use-composer-voice.js";
 import { useEditorSelection } from "../components/use-editor-selection.js";
+import { ComposerControls, ComposerSelector } from "./ComposerControls.js";
 import { composerDrawerLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 import { VoiceNote } from "./VoiceNote.js";
@@ -78,7 +78,7 @@ export function generationOptions(iface, selectedModel) {
 function ModelSelector(props) {
     if (props.models.length === 0)
         return null;
-    return (_jsx(Selector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconInputAi, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.models.map((m) => ({
+    return (_jsx(ComposerSelector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconInputAi, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.models.map((m) => ({
             value: m.id,
             label: m.id,
             description: m.label !== m.id ? m.label : undefined,
@@ -87,7 +87,7 @@ function ModelSelector(props) {
 function EffortSelector(props) {
     if (props.efforts.length === 0)
         return null;
-    return (_jsx(Selector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(EFFORT_ICON, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.efforts.map((e) => ({ value: e.alias, label: e.alias, description: e.level })), onChange: props.onChange }));
+    return (_jsx(ComposerSelector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(EFFORT_ICON, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.efforts.map((e) => ({ value: e.alias, label: e.alias, description: e.level })), onChange: props.onChange }));
 }
 function OptionSelectors(props) {
     if (!props.choices)
@@ -103,17 +103,25 @@ function OptionSelectors(props) {
             label: choice.value,
             description: choice.description,
         }));
-        return (_jsx(Selector, { label: title, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconAdjustmentsHorizontal, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: values[name] ?? '', options: [{ type: 'section', title, options: choices }], onChange: (value) => onChange(name, value) }, name));
+        return (_jsx(ComposerSelector, { label: title, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconAdjustmentsHorizontal, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: values[name] ?? '', options: [{ type: 'section', title, options: choices }], onChange: (value) => onChange(name, value) }, name));
     });
 }
 function GenerationSelect(props) {
     const { models, efforts } = generationOptions(props.iface, props.selectedModel);
     const optionCount = Object.keys(props.optionChoices?.declared ?? {}).length;
+    // invariant: What the controls show; when it changes they unfold and measure again.
+    const fit = JSON.stringify([
+        props.control
+            ? null
+            : [models.length, efforts.length, props.selectedModel, props.selectedEffort],
+        props.optionChoices?.values,
+        optionCount,
+    ]);
     if (props.control)
-        return (_jsxs(HStack, { gap: 1, children: [props.control, _jsx(OptionSelectors, { choices: props.optionChoices, isDisabled: props.isDisabled })] }));
+        return (_jsxs(ComposerControls, { fit: fit, children: [props.control, _jsx(OptionSelectors, { choices: props.optionChoices, isDisabled: props.isDisabled })] }));
     if (models.length + efforts.length + optionCount === 0)
         return null;
-    return (_jsxs(HStack, { gap: 1, children: [_jsx(ModelSelector, { label: labelText('composer.model', {}, props.iface.labels), models: models, value: props.selectedModel, isDisabled: props.isDisabled, onChange: (modelId) => props.onChange?.({ modelId }) }), _jsx(EffortSelector, { label: labelText('composer.effort', {}, props.iface.labels), efforts: efforts, value: props.selectedEffort, isDisabled: props.isDisabled, onChange: (effort) => {
+    return (_jsxs(ComposerControls, { fit: fit, children: [_jsx(ModelSelector, { label: labelText('composer.model', {}, props.iface.labels), models: models, value: props.selectedModel, isDisabled: props.isDisabled, onChange: (modelId) => props.onChange?.({ modelId }) }), _jsx(EffortSelector, { label: labelText('composer.effort', {}, props.iface.labels), efforts: efforts, value: props.selectedEffort, isDisabled: props.isDisabled, onChange: (effort) => {
                     if (props.selectedModel)
                         props.onChange?.({ modelId: props.selectedModel, effort });
                 } }), _jsx(OptionSelectors, { choices: props.optionChoices, isDisabled: props.isDisabled })] }));

package/ui/ComposerControls.d.ts

@@ -0,0 +1,16 @@
+import { type SelectorProps } from '@astryxdesign/core/Selector';
+import { type ReactNode } from 'react';
+/**
+ * The composer's footer controls. Their labels fold to icons, each with its name and value in a
+ * tooltip, when the labels do not fit the row; if the icons do not fit either, the row scrolls.
+ * `fit` names what the controls show: when it changes they unfold and measure again.
+ */
+export declare function ComposerControls(props: {
+    fit: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A footer selector. Folded, it shows only its icon, and a tooltip gives its name and value; the
+ * name stays its accessible label either way.
+ */
+export declare function ComposerSelector(selector: SelectorProps): import("react").JSX.Element;

package/ui/ComposerControls.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HStack } from '@astryxdesign/core/HStack';
+import { Selector } from '@astryxdesign/core/Selector';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
+import { createContext, useContext, useLayoutEffect, useReducer, useRef, useState, } from 'react';
+const CompactContext = createContext(false);
+/** The footer's controls scroll inside their room when even their icons do not fit. */
+const ROW_SCROLL = { minWidth: 0, overflowX: 'auto', scrollbarWidth: 'thin' };
+/**
+ * The room the composer's footer row leaves its controls: the row's content box, less the send
+ * cluster beside them and the gap between.
+ * why: Astryx wraps `footerActions` in a box that cannot shrink below its content, so the
+ * controls take a measured `max-width`, which also caps what they ask of that box.
+ */
+function footerRoom(controls) {
+    const row = controls.parentElement?.parentElement;
+    const send = row?.lastElementChild;
+    if (!row || !(send instanceof HTMLElement) || send === controls.parentElement)
+        return null;
+    const style = getComputedStyle(row);
+    const inner = row.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
+    return Math.max(0, inner - send.offsetWidth - (Number.parseFloat(style.columnGap) || 0));
+}
+/**
+ * The composer's footer controls. Their labels fold to icons, each with its name and value in a
+ * tooltip, when the labels do not fit the row; if the icons do not fit either, the row scrolls.
+ * `fit` names what the controls show: when it changes they unfold and measure again.
+ */
+export function ComposerControls(props) {
+    const ref = useRef(null);
+    const [room, setRoom] = useState(null);
+    // invariant: The width the labels need, measured when they last overflowed; null while they fit.
+    const [needed, setNeeded] = useState(null);
+    const [, remeasure] = useReducer((n) => n + 1, 0);
+    const compact = needed !== null && needed.fit === props.fit && (room ?? 0) < needed.width;
+    useLayoutEffect(() => {
+        const el = ref.current;
+        const row = el?.parentElement?.parentElement;
+        if (!el || !row)
+            return;
+        const observer = new ResizeObserver(remeasure);
+        observer.observe(row);
+        return () => observer.disconnect();
+    }, []);
+    useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const next = footerRoom(el);
+        if (next !== room) {
+            setRoom(next);
+            return;
+        }
+        if (!compact && el.scrollWidth > el.clientWidth) {
+            setNeeded({ fit: props.fit, width: el.scrollWidth });
+        }
+    });
+    return (_jsx(CompactContext.Provider, { value: compact, children: _jsx(HStack, { ref: ref, gap: 1, style: room === null ? ROW_SCROLL : { ...ROW_SCROLL, maxWidth: room }, children: props.children }) }));
+}
+const NO_VALUE = () => null;
+/**
+ * A footer selector. Folded, it shows only its icon, and a tooltip gives its name and value; the
+ * name stays its accessible label either way.
+ */
+export function ComposerSelector(selector) {
+    const compact = useContext(CompactContext);
+    const value = selector.value;
+    return (_jsx(StackItem, { size: "static", children: _jsx(Tooltip, { isEnabled: compact, content: value ? `${selector.label}: ${value}` : selector.label, hasHoverIndication: false, children: _jsx(Selector, { ...selector, renderValue: compact ? NO_VALUE : selector.renderValue }) }) }));
+}

package/ui/LiveToolGateDialog.js

@@ -2,11 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Dialog } from '@astryxdesign/core/Dialog';
 import { useLabels } from "./labels-provider.js";
 import { ApprovalCard, AuthChallengeCard, GATE_CARD_WIDTH } from "./ToolGateCard.js";
-/** Room around the gate card for its shadow. */
-const GATE_DIALOG_PADDING = 4;
-const GATE_DIALOG_WIDTH = GATE_CARD_WIDTH + 2 * GATE_DIALOG_PADDING * 4;
-/** The dialog draws no surface of its own: the card is the one chat shows, alone. */
-const GATE_DIALOG_BARE = { background: 'transparent', boxShadow: 'none' };
+/** The dialog takes the card's corner (the bubble's --radius-chat), so none of its surface shows past the card. */
+const GATE_DIALOG_CORNER = {
+    borderRadius: 'var(--radius-chat, var(--radius-container))',
+};
 /**
  * Tool approvals and credential prompts, as a dialog that must be answered. It shows the card
  * chat shows inline and nothing else, and closes on the answer. `LiveRunner` and
@@ -17,7 +16,10 @@ export function LiveToolGateDialog({ call }) {
     const prompt = call.gatePrompt;
     const onResolve = call.resolveGateDecision;
     const agent = t('@theorem.agent.handle', { handle: call.handle });
-    return (_jsx(Dialog, { isOpen: prompt !== null, purpose: "required", width: GATE_DIALOG_WIDTH, padding: GATE_DIALOG_PADDING, style: GATE_DIALOG_BARE, 
+    return (_jsx(Dialog, { isOpen: prompt !== null, purpose: "required", 
+        // why: The card is the one chat shows, a tint made for a page. The dialog's own surface,
+        // the card's size and radius, is that page; over the bare backdrop the tint goes grey.
+        width: GATE_CARD_WIDTH, padding: 0, style: GATE_DIALOG_CORNER, 
         // why: "required" disables dismissal; should one slip through, it denies.
         onOpenChange: (open) => {
             if (!open)

package/ui/ToolGateCard.js

@@ -17,6 +17,8 @@ import { approvalHeading } from "./approval-heading.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 /** The widest a gate card gets, in pixels. */
 export const GATE_CARD_WIDTH = 400;
+/** why: A focused title shows no ring; the focus is for screen readers, as on Astryx's DialogHeader. */
+const TITLE_FOCUS = { outline: 'none' };
 function formatInput(value) {
     if (typeof value === 'string')
         return value;
@@ -26,7 +28,7 @@ function formatInput(value) {
 }
 /** The one frame of every gate card: what is asked, a tag beside it, and what answers it. */
 function GateCard(props) {
-    return (_jsx(Card, { variant: "bubble", elevation: "med", maxWidth: GATE_CARD_WIDTH, children: _jsxs(VStack, { gap: 3, children: [_jsxs(HStack, { justify: "between", align: "start", gap: 3, children: [_jsx(Text, { type: "large", weight: "semibold", children: props.heading }), props.tag] }), props.children] }) }));
+    return (_jsx(Card, { variant: "bubble", elevation: "med", maxWidth: GATE_CARD_WIDTH, children: _jsxs(VStack, { gap: 3, children: [_jsxs(HStack, { justify: "between", align: "start", gap: 3, children: [_jsx(Text, { type: "large", weight: "semibold", tabIndex: -1, "data-autofocus": true, style: TITLE_FOCUS, children: props.heading }), props.tag] }), props.children] }) }));
 }
 const ACCESS_ICON = {
     'read-only': IconEye,

package/ui/labels.d.ts

@@ -7,7 +7,8 @@
  *
  * @module
  */
-import type { ComposerDrawerSummary, LiveState } from '@theoremjs/web/client';
+import { type ComposerDrawerSummary, type LiveState } from '@theoremjs/web/client';
+import type { LiveActiveTool } from '../client/live/apply-live-turn-tool-event.ts';
 import type { TurnUsage, WorkStatus } from '../client/transcript-groups.ts';
 export declare const THEOREM_UI_CATALOG: {
     readonly '@theorem.agent.handle': {
@@ -1469,8 +1470,11 @@ export declare function resultMeta(t: LabelText, usd: Intl.NumberFormat, result:
 export declare function liveDuration(t: LabelText, durationMs: number): string;
 /** "Working for 12s" while streaming (when the start is known), "Worked for 3.2s" after. */
 export declare function workStatusLabel(t: LabelText, status: WorkStatus | null): string;
-/** A live call's status line; `calling_tool` names the tool. */
-export declare function liveStateLabel(t: LabelText, state: LiveState, toolName: string | null): string;
+/**
+ * A live call's status line. While a tool runs it is the tool's activity label, as chat shows
+ * it, else `calling_tool` with the tool's name in words, as its gate names it.
+ */
+export declare function liveStateLabel(t: LabelText, state: LiveState, tool: LiveActiveTool | null): string;
 /** A voice note's name from its audio format; the unnamed line when the format is unknown. */
 export declare function voiceNoteName(t: LabelText, format: string | undefined): string;
 /**

package/ui/labels.js

@@ -7,6 +7,7 @@
  *
  * @module
  */
+import { humanize } from '@theoremjs/web/client';
 import { IntlMessageFormat } from 'intl-messageformat';
 export const THEOREM_UI_CATALOG = {
     '@theorem.agent.handle': {
@@ -1411,10 +1412,15 @@ export function workStatusLabel(t, status) {
         ? t('@theorem.transcript.worked')
         : t('@theorem.transcript.worked_for', { duration: workDuration(t, status.elapsedMs) });
 }
-/** A live call's status line; `calling_tool` names the tool. */
-export function liveStateLabel(t, state, toolName) {
-    if (state === 'calling_tool')
-        return t('@theorem.live.state.calling_tool', { tool: toolName ?? '' });
+/**
+ * A live call's status line. While a tool runs it is the tool's activity label, as chat shows
+ * it, else `calling_tool` with the tool's name in words, as its gate names it.
+ */
+export function liveStateLabel(t, state, tool) {
+    if (state === 'calling_tool') {
+        return (tool?.activity ??
+            t('@theorem.live.state.calling_tool', { tool: humanize(tool?.name ?? '').toLowerCase() }));
+    }
     return t(`@theorem.live.state.${state}`);
 }
 /** A voice note's name from its audio format; the unnamed line when the format is unknown. */