@theoremjs/react 0.3.4-next.849.g2dfd688 → 0.3.4-next.851.g9ebce61

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

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