@theoremjs/react 0.3.4-next.847.g6513d7e → 0.3.4-next.851.g9ebce61

package/README.md

@@ -367,7 +367,7 @@ The call lasts as long as the component that calls `useLiveCall`. Call it above
 
 Give `LiveRunner` an `onMinimize` to show a minimize control in the call. Theorem calls it and does not navigate: your code decides where to go, and the call goes on.
 
-`LiveCallTile` draws the same call small: the camera preview, or the ink waveform when the camera is off, then the call time, mute, end, and expand. It fills the box you give it, so your code places it and sizes it. A press on the tile or its expand control calls `onExpand`.
+`LiveCallTile` draws the same call small: the camera preview, or the ink waveform when the camera is off, then the call time, mute, end, and expand. While a tool runs, its name shows in place of the time, and a tool gate opens the same dialog `LiveRunner` shows, so the person can answer it on any page. It fills the box you give it, so your code places it and sizes it. A press on the tile or its expand control calls `onExpand`.
 
 ```tsx
 import { LiveCallTile } from '@theoremjs/react/live';

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.847.g6513d7e",
+  "version": "0.3.4-next.851.g9ebce61",
   "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.847.g6513d7e",
-    "@theoremjs/web": "^0.3.4-next.847.g6513d7e"
+    "@theoremjs/agents": "^0.3.4-next.851.g9ebce61",
+    "@theoremjs/web": "^0.3.4-next.851.g9ebce61"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/LiveCallTile.d.ts

@@ -18,7 +18,9 @@ export type LiveCallTileProps = {
 };
 /**
  * A small view of a running call: the camera preview, or the ink waveform
- * when the camera is off, then the call time, mute, end, and expand. It fills
- * the box the host gives it; the host places it.
+ * when the camera is off, then the call time, mute, end, and expand. While a
+ * tool runs, its name takes the time's place, and a tool gate opens the same
+ * dialog `LiveRunner` shows. It fills the box the host gives it; the host
+ * places it.
  */
 export declare function LiveCallTile({ theme, mode, labels, ...props }: LiveCallTileProps): import("react").JSX.Element;

package/ui/LiveCallTile.js

@@ -11,33 +11,40 @@ import { VStack } from '@astryxdesign/core/VStack';
 import { IconArrowsDiagonal, IconMicrophone, IconMicrophoneOff, IconPhoneOff, } from '@tabler/icons-react';
 import { InkWaveform } from "../components/InkWaveform.js";
 import { useSecondTicker } from "../hooks/use-second-ticker.js";
+import { LiveToolGateDialog } from "./LiveToolGateDialog.js";
 import { LiveVideoPreview } from "./LiveVideoPreview.js";
 import { liveDuration, liveStateLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 import { TheoremThemeProvider } from "./theme.js";
 /**
  * A small view of a running call: the camera preview, or the ink waveform
- * when the camera is off, then the call time, mute, end, and expand. It fills
- * the box the host gives it; the host places it.
+ * when the camera is off, then the call time, mute, end, and expand. While a
+ * tool runs, its name takes the time's place, and a tool gate opens the same
+ * dialog `LiveRunner` shows. It fills the box the host gives it; the host
+ * places it.
  */
 export function LiveCallTile({ theme, mode, labels, ...props }) {
     return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(LiveCallTileBody, { ...props }) }) }));
 }
+/** why: The tile floats on its shadow; Astryx's default card has no borderless variant with its surface. */
+const TILE_BORDERLESS = { borderWidth: 0 };
+/** The bars in the icon colour, as on `LiveRunner`'s stage. */
+const WAVE_COLOR = { color: 'var(--color-icon-primary)' };
 function LiveCallTileBody({ call, onExpand, }) {
     const t = useLabels();
-    return (_jsx(ClickableCard, { label: t('@theorem.live.expand'), onClick: onExpand, padding: 0, elevation: "high", width: "100%", children: _jsxs(VStack, { children: [_jsx(TileMedia, { call: call }), _jsxs(HStack, { gap: 1, vAlign: "center", padding: 2, children: [_jsx(StackItem, { size: "fill", children: _jsx(TileTime, { call: call }) }), _jsx(TileControls, { call: call, onExpand: onExpand })] })] }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(ClickableCard, { label: t('@theorem.live.expand'), onClick: onExpand, padding: 0, elevation: "high", width: "100%", style: TILE_BORDERLESS, children: _jsxs(VStack, { children: [_jsx(TileMedia, { call: call }), _jsxs(HStack, { gap: 1, vAlign: "center", padding: 2, children: [_jsx(StackItem, { size: "fill", children: _jsx(TileTime, { call: call }) }), _jsx(TileControls, { call: call, onExpand: onExpand })] })] }) }), _jsx(LiveToolGateDialog, { call: call })] }));
 }
 /** The camera preview while the camera is on; otherwise the ink waveform. */
 function TileMedia({ call }) {
     if (call.isVideoOn && call.videoPreview) {
         return _jsx(LiveVideoPreview, { video: call.videoPreview, facingMode: call.videoFacingMode });
     }
-    return (_jsx(AspectRatio, { ratio: 4 / 3, children: _jsx(VStack, { height: "100%", vAlign: "center", padding: 4, "aria-hidden": "true", children: _jsx(InkWaveform, { status: call.status, levelsRef: call.levelsRef, toolActive: call.toolActive, variant: "pill" }) }) }));
+    return (_jsx(AspectRatio, { ratio: 4 / 3, children: _jsx(VStack, { height: "100%", vAlign: "center", paddingBlock: 4, style: WAVE_COLOR, "aria-hidden": "true", children: _jsx(InkWaveform, { status: call.status, levelsRef: call.levelsRef, toolActive: call.toolActive, variant: "pill" }) }) }));
 }
-/** How long the call has run, or its state before it connects and after it ends. */
+/** How long the call has run, or its state: before it connects, after it ends, and while a tool runs. */
 function TileTime({ call }) {
     const t = useLabels();
-    const since = call.sessionActive ? call.connectedAt : null;
+    const since = call.sessionActive && call.liveState !== 'calling_tool' ? call.connectedAt : null;
     const now = useSecondTicker(since !== null);
     return (_jsx(Text, { type: "supporting", hasTabularNumbers: true, maxLines: 1, children: since === null
             ? liveStateLabel(t, call.liveState, call.activeTool)

package/ui/LiveRunner.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Banner } from '@astryxdesign/core/Banner';
 import { Button } from '@astryxdesign/core/Button';
 import { Center } from '@astryxdesign/core/Center';
-import { Dialog } from '@astryxdesign/core/Dialog';
 import { HStack } from '@astryxdesign/core/HStack';
 import { Icon } from '@astryxdesign/core/Icon';
 import { IconButton } from '@astryxdesign/core/IconButton';
@@ -16,12 +15,12 @@ import { IconArrowsDiagonalMinimize2, IconCameraRotate, IconMessage, IconMicroph
 import { Fragment, useLayoutEffect, useRef } from 'react';
 import { InkWaveform } from "../components/InkWaveform.js";
 import { LiveCaptionsPanel } from "./LiveCaptionsPanel.js";
+import { LiveToolGateDialog } from "./LiveToolGateDialog.js";
 import { LiveVideoPreview } from "./LiveVideoPreview.js";
 import { liveStateLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 import { PANEL_EDGE, SidePanel, SidePanelHeader, SidePanelToggle, useSidePanel, } from "./SidePanel.js";
 import { DEFAULT_CHAT_MAX_WIDTH } from "./TheoremChat.js";
-import { ApprovalCard, AuthChallengeCard, GATE_CARD_WIDTH } from "./ToolGateCard.js";
 import { useTraceInspector, WithTrace } from "./TraceInspectorPanel.js";
 import { TheoremThemeProvider } from "./theme.js";
 /** The waveform's box: it rests on the stage floor rather than filling the stage. */
@@ -53,7 +52,7 @@ function LiveRunnerBody({ call, trace, onMinimize, }) {
     if (!call.callStarted) {
         return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", header: _jsx(SidePanelHeader, { children: inspector.toggle }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(LiveLanding, { call: call }) }) }) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", header: _jsx(SidePanelHeader, { children: inspector.toggle }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(Layout, { height: "fill", end: _jsx(SidePanel, { id: captions.id, labels: captionLabels, resizable: captions.resizable, open: captions.open, children: _jsx(LiveCaptions, { call: call }) }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(VStack, { height: "100%", padding: PANEL_EDGE, children: _jsx(LiveStage, { call: call, captionsToggle: captionsToggle, onMinimize: onMinimize }) }) }) }) }) }) }), _jsx(LiveToolGateDialog, { prompt: call.gatePrompt, agent: t('@theorem.agent.handle', { handle: call.handle }), onResolve: call.resolveGateDecision })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", header: _jsx(SidePanelHeader, { children: inspector.toggle }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(Layout, { height: "fill", end: _jsx(SidePanel, { id: captions.id, labels: captionLabels, resizable: captions.resizable, open: captions.open, children: _jsx(LiveCaptions, { call: call }) }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(VStack, { height: "100%", padding: PANEL_EDGE, children: _jsx(LiveStage, { call: call, captionsToggle: captionsToggle, onMinimize: onMinimize }) }) }) }) }) }) }), _jsx(LiveToolGateDialog, { call: call })] }));
 }
 /**
  * Before a call: the chat landing's greeting, with call buttons where the
@@ -134,24 +133,3 @@ function LiveCallButton({ call }) {
 function LiveCaptions({ call }) {
     return (_jsx(LiveCaptionsPanel, { handle: call.handle, captions: call.captions, pastCalls: call.pastCalls, draftText: call.textDraft, onDraftTextChange: call.setTextDraft, onSubmit: call.handleSendText, isDisabled: !call.sessionActive, showComposer: call.textAvailable, leading: call.videoPreview ? (_jsx(LiveVideoPreview, { video: call.videoPreview, facingMode: call.videoFacingMode })) : null }));
 }
-/** 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' };
-/**
- * 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.
- */
-function LiveToolGateDialog({ prompt, agent, onResolve, }) {
-    return (_jsx(Dialog, { isOpen: prompt !== null, purpose: "required", width: GATE_DIALOG_WIDTH, padding: GATE_DIALOG_PADDING, style: GATE_DIALOG_BARE, 
-        // why: "required" disables dismissal; should one slip through, it denies.
-        onOpenChange: (open) => {
-            if (!open)
-                onResolve({ action: 'deny' });
-        }, children: prompt ? (prompt.gate.kind === 'auth' ? (_jsx(AuthChallengeCard, { gate: prompt.gate, toolName: prompt.gate.tool, onAuthenticated: (secret) => {
-                onResolve({ action: 'auth', secret });
-            } })) : (_jsx(ApprovalCard, { gate: prompt.gate, toolName: prompt.gate.tool, agent: agent, input: prompt.input, onDecision: (action) => {
-                onResolve({ action });
-            } }))) : null }));
-}

package/ui/LiveToolGateDialog.d.ts

@@ -0,0 +1,9 @@
+import type { LiveCall } from '../components/live/use-live-call.ts';
+/**
+ * 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
+ * `LiveCallTile` both show it, so a gate is answered wherever the call is drawn.
+ */
+export declare function LiveToolGateDialog({ call }: {
+    call: LiveCall;
+}): import("react").JSX.Element;

package/ui/LiveToolGateDialog.js

@@ -0,0 +1,32 @@
+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";
+/** 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
+ * `LiveCallTile` both show it, so a gate is answered wherever the call is drawn.
+ */
+export function LiveToolGateDialog({ call }) {
+    const t = useLabels();
+    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", 
+        // 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)
+                onResolve({ action: 'deny' });
+        }, children: prompt ? (prompt.gate.kind === 'auth' ? (_jsx(AuthChallengeCard, { gate: prompt.gate, toolName: prompt.gate.tool, onAuthenticated: (secret) => {
+                onResolve({ action: 'auth', secret });
+            } })) : (_jsx(ApprovalCard, { gate: prompt.gate, toolName: prompt.gate.tool, agent: agent, input: prompt.input, onDecision: (action) => {
+                onResolve({ action });
+            } }))) : null }));
+}

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. */