@theoremjs/react 0.3.4-next.845.g08954d1 → 0.3.4-next.849.g2dfd688

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.845.g08954d1",
+  "version": "0.3.4-next.849.g2dfd688",
   "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.845.g08954d1",
-    "@theoremjs/web": "^0.3.4-next.845.g08954d1"
+    "@theoremjs/agents": "^0.3.4-next.849.g2dfd688",
+    "@theoremjs/web": "^0.3.4-next.849.g2dfd688"
   },
   "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,30 @@
+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' };
+/**
+ * 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", 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 }));
+}