@theoremjs/react 0.3.4-next.827.gdc3858d → 0.3.4-next.837.g097599a

package/README.md

@@ -147,7 +147,7 @@ The profile, the keys, and the system prompt stay on the server. The browser rec
 | --- | --- |
 | `@theoremjs/react` | Hooks, transports, and client logic |
 | `@theoremjs/react/ui` | `TheoremChat`, `TheoremHost`, `TheoremDecision`, `TheoremEmbedding`, and their parts |
-| `@theoremjs/react/live` | `LiveRunner`, the voice and video call UI |
+| `@theoremjs/react/live` | `useLiveCall`, `LiveRunner` and `LiveCallTile`, the voice and video call and its UI |
 | `@theoremjs/react/server` | `@theoremjs/web/server`: the handlers and the stores they use |
 | `@theoremjs/react/ui/theme` | `theoremTheme`, the base for your own Astryx theme |
 | `@theoremjs/react/ui/icons` | The icon set of the theme |
@@ -344,51 +344,69 @@ For your own UI, use `useTheoremEmbedding` for one request, and `embed(inputs, {
 
 A `live` profile runs a voice or video call. The call goes through a WebSocket relay that you host with `runSession` from `@theoremjs/agents`.
 
-`LiveRunner` needs two props:
+`useLiveCall` holds the call, and `LiveRunner` draws it. `useLiveCall` needs two values:
 
 - `iface`: the interface of the profile. `interfaceFromProfile` (from `@theoremjs/agents/interface`) builds it.
-- `connection`: a function that tells the runner what to connect to.
+- `connection`: a function that tells the call what to connect to.
 
 ```tsx
-import { LiveRunner } from '@theoremjs/react/live';
+import { LiveRunner, useLiveCall } from '@theoremjs/react/live';
 
-<LiveRunner iface={iface} connection={() => ({ profile: 'support.voice' })} />
+const call = useLiveCall({ iface, connection: () => ({ profile: 'support.voice' }) });
+
+<LiveRunner call={call} />
 ```
 
 This code opens `wss://<your host>/api/live/relay?profile=<id>`. To send your own message to the relay, add `openMessage`. To use your own socket, add `createSocket`.
 
 `LiveRunner` also accepts `theme`, `mode`, `labels`, and `trace`. Tool gates in a call appear in a dialog over the call.
 
+### A call across pages
+
+The call lasts as long as the component that calls `useLiveCall`. Call it above your routes, and the call goes on while the person moves to another page. `LiveRunner` can unmount and mount again on the same call. The call ends when the component that holds it unmounts.
+
+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`.
+
+```tsx
+import { LiveCallTile } from '@theoremjs/react/live';
+
+<LiveCallTile call={call} onExpand={() => navigate('/call')} />
+```
+
+Show `LiveRunner` or `LiveCallTile` for a call, not both: the camera preview is one element, and it shows in the one that mounted last.
+
 ### The page's part in a call
 
-Three more props give the call values from the page. The profile declares each one; the page only supplies the value.
+Three more values for `useLiveCall` come from the page. The profile declares each one; the page only supplies the value.
 
-| Prop | The profile declares | What the page gives |
+| Value | The profile declares | What the page gives |
 | --- | --- | --- |
 | `options` | `inputs.options` | The value chosen for each option. It is read when the call starts. A value that changes during a call takes the call up again with it when the profile has resumption on; otherwise the next call has it. |
 | `context` | `inputs.context` with `from: ['client']` | Any JSON the agent should know, such as the page the person is on. |
 | `pageTools` | A function tool with `answeredBy: 'page'` | A function for each page tool, by name. It returns `{ output }`. |
 
-`stated` is a fourth prop, for a page you trust as yourself. It says the `path` and the `options` from `identity.options` that choose the call's prompt lines, and the server reads it only with `pageStatesTurn` set. A change during a call takes the call up again, as an option does. `TheoremChat` takes the same prop, on each turn.
+`stated` is a fourth value, for a page you trust as yourself. It says the `path` and the `options` from `identity.options` that choose the call's prompt lines, and the server reads it only with `pageStatesTurn` set. A change during a call takes the call up again, as an option does. `TheoremChat` takes the same prop, on each turn.
 
 `model` and `effort` pick the call's model when the profile sets `allowModelSelect`. They are read when the call starts.
 
 ```tsx
-<LiveRunner
-  iface={iface}
-  connection={() => ({ profile: 'support.voice' })}
-  options={{ language: 'fr' }}
-  context={{ page: '/pricing', cart }}
-  pageTools={{
+const call = useLiveCall({
+  iface,
+  connection: () => ({ profile: 'support.voice' }),
+  options: { language: 'fr' },
+  context: { page: '/pricing', cart },
+  pageTools: {
     highlight: (args) => ({ output: { success: highlight(String(args.target)) } }),
-  }}
-/>
+  },
+});
 ```
 
-- `context` goes with the start of the call. When its value changes, the runner sends it again. The agent reads it as background and does not reply to it.
+- `context` goes with the start of the call. When its value changes, `useLiveCall` sends it again. The agent reads it as background and does not reply to it.
 - A page tool's output schema checks what the page returned. Every other tool runs on the relay, with its gates.
 - `TheoremChat` and `useTheoremChat` take the same `pageTools`. When a chat agent calls a page tool, the reply waits for the page's answer and then goes on. The person is shown no prompt.
-- The runner writes a console warning when the profile has a page tool with no function in `pageTools`, and when `pageTools` has a function for a tool that is not a page tool.
+- `useLiveCall` writes a console warning when the profile has a page tool with no function in `pageTools`, and when `pageTools` has a function for a tool that is not a page tool.
 
 The live client checks a tool call with its relay before it invokes a page callback.
 It waits for permission and sign-in decisions first. A claimed dispatch grant supplies the final checked arguments.
@@ -417,7 +435,7 @@ A failed call does not reconnect. Without `live.sessionResumption`, a provider-e
 
 The relay is server code. To authenticate the conversation and resume a call in your relay, see [Your relay](https://github.com/masudl-hub/theoremai/blob/main/web/README.md#your-relay).
 
-To build your own call view, use `useLiveRunnerModel(iface, connection, { options, context, pageTools })` from `@theoremjs/react/ui`. It returns the state of the call, its captions, and its controls. `LiveCaptionsPanel` draws the captions.
+To build your own call view, draw the call that `useLiveCall` returns. It holds the state of the call, its captions, and its controls. `LiveCaptionsPanel` from `@theoremjs/react/ui` draws the captions.
 
 ### A custom browser transport
 

package/components/live/{use-live-runner-model.d.ts → use-live-call.d.ts}

@@ -1,16 +1,28 @@
 import type { LiveProfileInterface } from '@theoremjs/agents/interface';
 import type { LiveCallOptions, LiveConnection } from '@theoremjs/web/client';
 import { type LiveCaptionState, type LiveCaptionTurn } from '../../client/live/live-captions.ts';
+/** What `useLiveCall` takes: the profile, what the call opens, and the host's part in the call. */
+export type LiveCallInput = {
+    iface: LiveProfileInterface;
+    /**
+     * What the call opens: a host with a fixed profile returns its id; the studio
+     * returns its draft as the relay's open message.
+     */
+    connection: () => LiveConnection | Promise<LiveConnection>;
+} & LiveCallOptions;
+/** One live call: its state, captions, and controls. `LiveRunner` draws it. */
+export type LiveCall = ReturnType<typeof useLiveCall>;
 /**
- * Owns LiveRunner state, session client, and stage callbacks.
- * `connection` resolves what the call opens: a host with a fixed profile returns
- * its id; the studio returns its draft as the relay's open message. `options`
- * are the host's part in the call: its options, its stated turn, the page's context, and its page tools.
+ * Owns a live call: its session client, state, and controls. The call lasts as
+ * long as the component that calls this hook, so a host that calls it above its
+ * routes keeps the call while the person moves between pages.
  */
-export declare function useLiveRunnerModel(iface: LiveProfileInterface, connection: () => LiveConnection | Promise<LiveConnection>, options?: LiveCallOptions): {
+export declare function useLiveCall({ iface, connection, ...options }: LiveCallInput): {
+    iface: LiveProfileInterface;
     handle: string;
     traces: import("@theoremjs/web/client").TraceFeed;
     callStarted: boolean;
+    connectedAt: number | null;
     pastCalls: LiveCaptionTurn[][];
     captions: LiveCaptionState;
     failure: import("@theoremjs/web/client").ClientFailure | null;

package/components/live/{use-live-runner-model.js → use-live-call.js}

@@ -14,6 +14,8 @@ import { useLiveSessionClient } from "./use-live-session-client.js";
 function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailable) {
     const [callStarted, setCallStarted] = useState(false);
     const [ended, setEnded] = useState(false);
+    /** When this call first connected; a reconnect keeps it, a new call clears it. */
+    const [connectedAt, setConnectedAt] = useState(null);
     const videoOnConnectRef = useRef(false);
     const startCall = useCallback((options) => {
         videoOnConnectRef.current = options.video && videoAvailable;
@@ -21,6 +23,10 @@ function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailab
         setEnded(false);
         void controls.startSession();
     }, [controls, videoAvailable]);
+    useEffect(() => {
+        if (sessionActive)
+            setConnectedAt((at) => at ?? Date.now());
+    }, [sessionActive]);
     // why: Camera capture needs a live session, so a video call turns it on once connected.
     useEffect(() => {
         if (!sessionActive || !videoOnConnectRef.current)
@@ -32,12 +38,14 @@ function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailab
         videoOnConnectRef.current = false;
         controls.teardownSession();
         setEnded(true);
+        setConnectedAt(null);
     }, [controls]);
     const [pastCalls, setPastCalls] = useState([]);
     const handleRestart = useCallback(async () => {
         const previous = captionsRef.current.turns;
         setPastCalls((calls) => stashLiveCaptionCall(calls, previous));
         setEnded(false);
+        setConnectedAt(null);
         await controls.handleRestart();
     }, [controls, captionsRef]);
     const teardownSessionRef = useRef(controls.teardownSession);
@@ -47,15 +55,14 @@ function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailab
             teardownSessionRef.current();
         };
     }, []);
-    return { callStarted, ended, pastCalls, startCall, handleEnd, handleRestart };
+    return { callStarted, connectedAt, ended, pastCalls, startCall, handleEnd, handleRestart };
 }
 /**
- * Owns LiveRunner state, session client, and stage callbacks.
- * `connection` resolves what the call opens: a host with a fixed profile returns
- * its id; the studio returns its draft as the relay's open message. `options`
- * are the host's part in the call: its options, its stated turn, the page's context, and its page tools.
+ * Owns a live call: its session client, state, and controls. The call lasts as
+ * long as the component that calls this hook, so a host that calls it above its
+ * routes keeps the call while the person moves between pages.
  */
-export function useLiveRunnerModel(iface, connection, options = {}) {
+export function useLiveCall({ iface, connection, ...options }) {
     const ui = useLiveRunnerUiState(iface.labels);
     const gate = useLiveRunnerGate({
         setCaptions: ui.setCaptions,
@@ -74,7 +81,7 @@ export function useLiveRunnerModel(iface, connection, options = {}) {
         isMuted: ui.isMuted,
         voiceEnabled: voiceAvailable,
     }), [ui.activeTool, ui.connectPhase, ui.isMuted, ui.status, voiceAvailable]);
-    // why: One feed per runner: every session it opens adds its records.
+    // why: One feed per call: every session it opens adds its records.
     const traces = useMemo(createTraceFeed, []);
     const { clientRef, ensureClient, clearClient } = useLiveSessionClient({
         options: options.options,
@@ -140,7 +147,7 @@ export function useLiveRunnerModel(iface, connection, options = {}) {
         setVideoFacingMode: ui.setVideoFacingMode,
         setIsVideoOn: ui.setIsVideoOn,
     });
-    const { callStarted, ended, pastCalls, startCall, handleEnd, handleRestart } = useLiveCallLifecycle(controls, ui.captionsRef, ui.sessionActive, videoAvailable);
+    const { callStarted, connectedAt, ended, pastCalls, startCall, handleEnd, handleRestart } = useLiveCallLifecycle(controls, ui.captionsRef, ui.sessionActive, videoAvailable);
     // why: The page's context is compared by value, so a host may build it inline on each render.
     const contextJson = JSON.stringify(options.context);
     useEffect(() => {
@@ -158,9 +165,11 @@ export function useLiveRunnerModel(iface, connection, options = {}) {
     }, [clientRef, statedJson]);
     usePageToolWarnings(iface.tools.page, options.pageTools);
     return {
+        iface,
         handle: iface.identity.handle,
         traces,
         callStarted,
+        connectedAt,
         pastCalls,
         captions: ui.captions,
         failure: ui.failure,

package/live.d.ts

@@ -4,5 +4,7 @@
  * @module
  */
 export type { LiveCallOptions, LiveConnection, PageTool, PageToolAnswer, PageTools, } from '@theoremjs/web/client';
+export { type LiveCall, type LiveCallInput, useLiveCall, } from './components/live/use-live-call.ts';
+export { LiveCallTile, type LiveCallTileProps } from './ui/LiveCallTile.tsx';
 export type { LiveRunnerProps } from './ui/LiveRunner.tsx';
 export { LiveRunner } from './ui/LiveRunner.tsx';

package/live.js

@@ -7,4 +7,6 @@
 import '@astryxdesign/core/reset.css';
 import '@astryxdesign/core/astryx.css';
 import './ui/built/theme.css';
+export { useLiveCall, } from "./components/live/use-live-call.js";
+export { LiveCallTile } from "./ui/LiveCallTile.js";
 export { LiveRunner } from "./ui/LiveRunner.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.827.gdc3858d",
+  "version": "0.3.4-next.837.g097599a",
   "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.827.gdc3858d",
-    "@theoremjs/web": "^0.3.4-next.827.gdc3858d"
+    "@theoremjs/agents": "^0.3.4-next.837.g097599a",
+    "@theoremjs/web": "^0.3.4-next.837.g097599a"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/LiveCallTile.d.ts

@@ -0,0 +1,24 @@
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+import type { LiveCall } from '../components/live/use-live-call.ts';
+import { type TheoremLabels } from './labels.ts';
+export type LiveCallTileProps = {
+    /** The call to draw, from `useLiveCall`: the same call `LiveRunner` draws. */
+    call: LiveCall;
+    /**
+     * Called when the person asks to open the call full size, from the tile or
+     * its expand control. The host decides what that means, such as going back
+     * to the call's page.
+     */
+    onExpand: () => void;
+    /** Astryx theme, as on `LiveRunner`. */
+    theme?: DefinedTheme;
+    mode?: 'system' | 'light' | 'dark';
+    /** Replacement lines by locale, as on `LiveRunner`. */
+    labels?: TheoremLabels;
+};
+/**
+ * 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.
+ */
+export declare function LiveCallTile({ theme, mode, labels, ...props }: LiveCallTileProps): import("react").JSX.Element;

package/ui/LiveCallTile.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AspectRatio } from '@astryxdesign/core/AspectRatio';
+import { ClickableCard } from '@astryxdesign/core/ClickableCard';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { Text } from '@astryxdesign/core/Text';
+import { ToggleButton } from '@astryxdesign/core/ToggleButton';
+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 { 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.
+ */
+export function LiveCallTile({ theme, mode, labels, ...props }) {
+    return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(LiveCallTileBody, { ...props }) }) }));
+}
+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 })] })] }) }));
+}
+/** 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" }) }) }));
+}
+/** How long the call has run, or its state before it connects and after it ends. */
+function TileTime({ call }) {
+    const t = useLabels();
+    const since = call.sessionActive ? 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)
+            : liveDuration(t, now - since) }));
+}
+function TileControls({ call, onExpand }) {
+    const t = useLabels();
+    return (_jsxs(_Fragment, { children: [call.voiceAvailable ? (_jsx(ToggleButton, { label: t('@theorem.live.microphone'), tooltip: t(call.isMuted ? '@theorem.live.unmute' : '@theorem.live.mute'), isIconOnly: true, size: "sm", isPressed: !call.isMuted, isDisabled: !call.sessionActive, icon: _jsx(Icon, { icon: IconMicrophone }), pressedIcon: _jsx(Icon, { icon: IconMicrophoneOff }), onPressedChange: call.handleToggleMic })) : null, _jsx(IconButton, { label: t('@theorem.live.end_call'), tooltip: t('@theorem.live.end_call'), variant: "destructive", size: "sm", isDisabled: !call.sessionActive, icon: _jsx(Icon, { icon: IconPhoneOff }), onClick: call.handleEnd }), _jsx(IconButton, { label: t('@theorem.live.expand'), tooltip: t('@theorem.live.expand'), variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconArrowsDiagonal }), onClick: onExpand })] }));
+}

package/ui/LiveRunner.d.ts

@@ -1,11 +1,9 @@
 import type { DefinedTheme } from '@astryxdesign/core/theme';
-import type { LiveProfileInterface } from '@theoremjs/agents/interface';
-import type { LiveCallOptions, LiveConnection } from '@theoremjs/web/client';
+import type { LiveCall } from '../components/live/use-live-call.ts';
 import { type TheoremLabels } from './labels.ts';
 export type LiveRunnerProps = {
-    iface: LiveProfileInterface;
-    /** What the call opens: a profile the host registered, or an open message for the relay. */
-    connection: () => LiveConnection | Promise<LiveConnection>;
+    /** The call to draw, from `useLiveCall`. The call outlives the runner: it ends when its owner unmounts. */
+    call: LiveCall;
     /** Astryx theme, as on `TheoremChat`. Omit to inherit the host's `<Theme>` or use `theoremTheme`. */
     theme?: DefinedTheme;
     mode?: 'system' | 'light' | 'dark';
@@ -18,7 +16,13 @@ export type LiveRunnerProps = {
      * Needs a profile that records traces.
      */
     trace?: boolean;
-} & LiveCallOptions;
+    /**
+     * Called when the person asks to minimize the call. The host decides what
+     * that means, such as going to another page; the call goes on. Omit to hide
+     * the control.
+     */
+    onMinimize?: () => void;
+};
 /**
  * Live (voice / video) runner on Astryx. Before a call: a landing like the
  * chat's, offering a voice or video call. In a call: the agent tag and state

package/ui/LiveRunner.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { AspectRatio } from '@astryxdesign/core/AspectRatio';
 import { Banner } from '@astryxdesign/core/Banner';
 import { Button } from '@astryxdesign/core/Button';
 import { Center } from '@astryxdesign/core/Center';
@@ -13,11 +12,11 @@ import { Text } from '@astryxdesign/core/Text';
 import { ToggleButton } from '@astryxdesign/core/ToggleButton';
 import { Toolbar } from '@astryxdesign/core/Toolbar';
 import { VStack } from '@astryxdesign/core/VStack';
-import { IconCameraRotate, IconMessage, IconMicrophone, IconMicrophoneOff, IconPhone, IconPhoneOff, IconVideo, IconVideoOff, } from '@tabler/icons-react';
-import { Fragment, useEffect, useLayoutEffect, useRef, } from 'react';
+import { IconArrowsDiagonalMinimize2, IconCameraRotate, IconMessage, IconMicrophone, IconMicrophoneOff, IconPhone, IconPhoneOff, IconVideo, IconVideoOff, } from '@tabler/icons-react';
+import { Fragment, useLayoutEffect, useRef } from 'react';
 import { InkWaveform } from "../components/InkWaveform.js";
-import { useLiveRunnerModel } from "../components/live/use-live-runner-model.js";
 import { LiveCaptionsPanel } from "./LiveCaptionsPanel.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";
@@ -38,12 +37,11 @@ const WAVE_HEIGHT = 320;
 export function LiveRunner({ theme, mode, labels, ...props }) {
     return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(LiveRunnerBody, { ...props }) }) }));
 }
-function LiveRunnerBody({ iface, connection, trace, ...options }) {
+function LiveRunnerBody({ call, trace, onMinimize, }) {
     const t = useLabels();
-    const model = useLiveRunnerModel(iface, connection, options);
     // why: Both panels size against the whole live layout, so a third means the same for each.
     const layoutRef = useRef(null);
-    const inspector = useTraceInspector(iface, model.traces, trace);
+    const inspector = useTraceInspector(call.iface, call.traces, trace);
     const captions = useSidePanel(layoutRef, true);
     const captionLabels = {
         name: t('@theorem.panel.captions.name'),
@@ -52,29 +50,27 @@ function LiveRunnerBody({ iface, connection, trace, ...options }) {
         resize: t('@theorem.panel.captions.resize'),
     };
     const captionsToggle = (_jsx(SidePanelToggle, { labels: captionLabels, icon: _jsx(Icon, { icon: IconMessage }), panelId: captions.id, open: captions.open, onToggle: captions.toggle }));
-    if (!model.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, { model: model }) }) }) }));
+    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, { model: model }) }), content: _jsx(LayoutContent, { padding: 0, children: _jsx(VStack, { height: "100%", padding: PANEL_EDGE, children: _jsx(LiveStage, { model: model, captionsToggle: captionsToggle }) }) }) }) }) }) }), _jsx(LiveToolGateDialog, { prompt: model.gatePrompt, agent: t('@theorem.agent.handle', { handle: model.handle }), onResolve: model.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, { prompt: call.gatePrompt, agent: t('@theorem.agent.handle', { handle: call.handle }), onResolve: call.resolveGateDecision })] }));
 }
 /**
  * Before a call: the chat landing's greeting, with call buttons where the
  * composer would be. Video starts camera and mic together.
  */
-function LiveLanding({ model }) {
+function LiveLanding({ call }) {
     const t = useLabels();
-    return (_jsx(VStack, { minHeight: "100%", vAlign: "center", gap: 8, paddingInline: 3, children: _jsx(Center, { axis: "horizontal", width: "100%", children: _jsxs(VStack, { width: "100%", maxWidth: DEFAULT_CHAT_MAX_WIDTH, gap: 8, children: [_jsxs(VStack, { gap: 1, children: [_jsx(Text, { type: "large", as: "h2", children: t('@theorem.agent.handle', { handle: model.handle }) }), _jsx(Text, { type: "display-2", as: "h1", children: t('@theorem.live.greeting') })] }), _jsxs(HStack, { gap: 2, wrap: "wrap", children: [_jsx(Button, { label: t(model.voiceAvailable
-                                    ? '@theorem.live.start_voice_call'
-                                    : '@theorem.live.start_call'), variant: "primary", icon: _jsx(Icon, { icon: IconPhone }), onClick: () => model.startCall({ video: false }) }), model.videoAvailable ? (_jsx(Button, { label: t('@theorem.live.start_video_call'), variant: "secondary", icon: _jsx(Icon, { icon: IconVideo }), onClick: () => model.startCall({ video: true }) })) : null] })] }) }) }));
+    return (_jsx(VStack, { minHeight: "100%", vAlign: "center", gap: 8, paddingInline: 3, children: _jsx(Center, { axis: "horizontal", width: "100%", children: _jsxs(VStack, { width: "100%", maxWidth: DEFAULT_CHAT_MAX_WIDTH, gap: 8, children: [_jsxs(VStack, { gap: 1, children: [_jsx(Text, { type: "large", as: "h2", children: t('@theorem.agent.handle', { handle: call.handle }) }), _jsx(Text, { type: "display-2", as: "h1", children: t('@theorem.live.greeting') })] }), _jsxs(HStack, { gap: 2, wrap: "wrap", children: [_jsx(Button, { label: t(call.voiceAvailable ? '@theorem.live.start_voice_call' : '@theorem.live.start_call'), variant: "primary", icon: _jsx(Icon, { icon: IconPhone }), onClick: () => call.startCall({ video: false }) }), call.videoAvailable ? (_jsx(Button, { label: t('@theorem.live.start_video_call'), variant: "secondary", icon: _jsx(Icon, { icon: IconVideo }), onClick: () => call.startCall({ video: true }) })) : null] })] }) }) }));
 }
 /**
  * The agent tag and state over the resting waveform, then the call controls,
  * all in one column the waveform's width.
  */
-function LiveStage({ model, captionsToggle }) {
+function LiveStage({ call, captionsToggle, onMinimize, }) {
     const t = useLabels();
     const ref = useEnterMotion();
-    return (_jsx(VStack, { ref: ref, height: "100%", hAlign: "center", children: _jsxs(VStack, { width: "100%", maxWidth: WAVE_MAX_WIDTH, height: "100%", gap: 3, children: [_jsxs(VStack, { gap: 0.5, children: [_jsx(Text, { type: "label", color: "secondary", children: t('@theorem.agent.handle', { handle: model.handle }) }), _jsx(Text, { size: "sm", color: "secondary", children: liveStateLabel(t, model.liveState, model.activeTool) })] }), model.failure ? _jsx(Banner, { status: "error", role: "alert", title: model.failure.error }) : null, model.sessionEnded ? (_jsx(Banner, { status: "info", role: "status", title: model.sessionEnded })) : null, _jsx(StackItem, { size: "fill", children: _jsx(VStack, { height: "100%", vAlign: "end", children: _jsx(VStack, { width: "100%", height: WAVE_HEIGHT, style: { color: 'var(--color-icon-primary)' }, "aria-hidden": "true", children: _jsx(InkWaveform, { status: model.status, levelsRef: model.levelsRef, toolActive: model.toolActive, variant: "hero" }) }) }) }), _jsx(LiveControls, { model: model, captionsToggle: captionsToggle })] }) }));
+    return (_jsx(VStack, { ref: ref, height: "100%", hAlign: "center", children: _jsxs(VStack, { width: "100%", maxWidth: WAVE_MAX_WIDTH, height: "100%", gap: 3, children: [_jsxs(VStack, { gap: 0.5, children: [_jsx(Text, { type: "label", color: "secondary", children: t('@theorem.agent.handle', { handle: call.handle }) }), _jsx(Text, { size: "sm", color: "secondary", children: liveStateLabel(t, call.liveState, call.activeTool) })] }), call.failure ? _jsx(Banner, { status: "error", role: "alert", title: call.failure.error }) : null, call.sessionEnded ? (_jsx(Banner, { status: "info", role: "status", title: call.sessionEnded })) : null, _jsx(StackItem, { size: "fill", children: _jsx(VStack, { height: "100%", vAlign: "end", children: _jsx(VStack, { width: "100%", height: WAVE_HEIGHT, style: { color: 'var(--color-icon-primary)' }, "aria-hidden": "true", children: _jsx(InkWaveform, { status: call.status, levelsRef: call.levelsRef, toolActive: call.toolActive, variant: "hero" }) }) }) }), _jsx(LiveControls, { call: call, captionsToggle: captionsToggle, onMinimize: onMinimize })] }) }));
 }
 /**
  * Eases the call view in from the landing: Astryx has no enter-transition
@@ -99,63 +95,44 @@ function useEnterMotion() {
  * Mic, camera, captions, and call controls, centred under the stage. Icons show
  * what a click does, as End call does: a slash means "turn this off".
  */
-function LiveControls({ model, captionsToggle }) {
+function LiveControls({ call, captionsToggle, onMinimize, }) {
     const t = useLabels();
-    const inactive = !model.sessionActive;
+    const inactive = !call.sessionActive;
     const controls = [];
-    if (model.voiceAvailable) {
-        controls.push(_jsx(ToggleButton, { label: t('@theorem.live.microphone'), tooltip: t(model.isMuted ? '@theorem.live.unmute' : '@theorem.live.mute'), isIconOnly: true, isPressed: !model.isMuted, isDisabled: inactive, icon: _jsx(Icon, { icon: IconMicrophone }), pressedIcon: _jsx(Icon, { icon: IconMicrophoneOff }), onPressedChange: model.handleToggleMic }, "mic"));
+    if (call.voiceAvailable) {
+        controls.push(_jsx(ToggleButton, { label: t('@theorem.live.microphone'), tooltip: t(call.isMuted ? '@theorem.live.unmute' : '@theorem.live.mute'), isIconOnly: true, isPressed: !call.isMuted, isDisabled: inactive, icon: _jsx(Icon, { icon: IconMicrophone }), pressedIcon: _jsx(Icon, { icon: IconMicrophoneOff }), onPressedChange: call.handleToggleMic }, "mic"));
     }
-    if (model.videoAvailable) {
-        controls.push(_jsx(ToggleButton, { label: t('@theorem.live.camera'), tooltip: t(model.isVideoOn ? '@theorem.live.camera_off' : '@theorem.live.camera_on'), isIconOnly: true, isPressed: model.isVideoOn, isDisabled: inactive, icon: _jsx(Icon, { icon: IconVideo }), pressedIcon: _jsx(Icon, { icon: IconVideoOff }), onPressedChange: () => {
-                void model.handleToggleVideo();
-            } }, "video"));
-        if (model.isVideoOn) {
-            controls.push(_jsx(IconButton, { label: t('@theorem.live.flip_camera'), tooltip: t('@theorem.live.flip_camera'), variant: "ghost", isDisabled: inactive, icon: _jsx(Icon, { icon: IconCameraRotate }), onClick: () => {
-                    void model.handleFlipCamera();
-                } }, "flip"));
-        }
+    if (call.videoAvailable)
+        controls.push(_jsx(LiveVideoControls, { call: call }, "video"));
+    if (onMinimize) {
+        controls.push(_jsx(IconButton, { label: t('@theorem.live.minimize'), tooltip: t('@theorem.live.minimize'), variant: "ghost", icon: _jsx(Icon, { icon: IconArrowsDiagonalMinimize2 }), onClick: onMinimize }, "minimize"));
     }
-    controls.push(_jsx(Fragment, { children: captionsToggle }, "captions"), model.canRestart ? (_jsx(IconButton, { label: t('@theorem.live.start_call'), tooltip: t('@theorem.live.start_call'), variant: "primary", icon: _jsx(Icon, { icon: IconPhone }), onClick: () => {
-            void model.handleRestart();
-        } }, "call")) : (_jsx(IconButton, { label: t('@theorem.live.end_call'), tooltip: t('@theorem.live.end_call'), variant: "destructive", isDisabled: inactive, icon: _jsx(Icon, { icon: IconPhoneOff }), onClick: model.handleEnd }, "call")));
+    controls.push(_jsx(Fragment, { children: captionsToggle }, "captions"), _jsx(LiveCallButton, { call: call }, "call"));
     return (_jsx(Toolbar, { label: t('@theorem.live.controls'), dividers: ['top'], centerContent: _jsx(HStack, { gap: 2, vAlign: "center", children: controls }) }));
 }
+/** The camera toggle, and the flip control while the camera is on. */
+function LiveVideoControls({ call }) {
+    const t = useLabels();
+    const inactive = !call.sessionActive;
+    return (_jsxs(_Fragment, { children: [_jsx(ToggleButton, { label: t('@theorem.live.camera'), tooltip: t(call.isVideoOn ? '@theorem.live.camera_off' : '@theorem.live.camera_on'), isIconOnly: true, isPressed: call.isVideoOn, isDisabled: inactive, icon: _jsx(Icon, { icon: IconVideo }), pressedIcon: _jsx(Icon, { icon: IconVideoOff }), onPressedChange: () => {
+                    void call.handleToggleVideo();
+                } }), call.isVideoOn ? (_jsx(IconButton, { label: t('@theorem.live.flip_camera'), tooltip: t('@theorem.live.flip_camera'), variant: "ghost", isDisabled: inactive, icon: _jsx(Icon, { icon: IconCameraRotate }), onClick: () => {
+                    void call.handleFlipCamera();
+                } })) : null] }));
+}
+/** End call while one runs; Start call once it can start again. */
+function LiveCallButton({ call }) {
+    const t = useLabels();
+    return call.canRestart ? (_jsx(IconButton, { label: t('@theorem.live.start_call'), tooltip: t('@theorem.live.start_call'), variant: "primary", icon: _jsx(Icon, { icon: IconPhone }), onClick: () => {
+            void call.handleRestart();
+        } })) : (_jsx(IconButton, { label: t('@theorem.live.end_call'), tooltip: t('@theorem.live.end_call'), variant: "destructive", isDisabled: !call.sessionActive, icon: _jsx(Icon, { icon: IconPhoneOff }), onClick: call.handleEnd }));
+}
 /**
  * Captions drawn by the chat's own transcript, with the text composer in its
  * dock when the profile takes text.
  */
-function LiveCaptions({ model }) {
-    return (_jsx(LiveCaptionsPanel, { handle: model.handle, captions: model.captions, pastCalls: model.pastCalls, draftText: model.textDraft, onDraftTextChange: model.setTextDraft, onSubmit: model.handleSendText, isDisabled: !model.sessionActive, showComposer: model.textAvailable, leading: model.videoPreview ? (_jsx(LiveVideoPreview, { video: model.videoPreview, facingMode: model.videoFacingMode })) : null }));
-}
-/**
- * The camera preview, at the top of the captions panel. The capture element comes
- * from the session client, so it is mounted imperatively; it sits one level
- * below AspectRatio, so it carries its own fill and mirror styles.
- */
-function LiveVideoPreview({ video, facingMode, }) {
-    const t = useLabels();
-    const hostRef = useRef(null);
-    useEffect(() => {
-        const host = hostRef.current;
-        if (!host)
-            return;
-        Object.assign(video.style, {
-            width: '100%',
-            height: '100%',
-            objectFit: 'cover',
-            display: 'block',
-        });
-        host.replaceChildren(video);
-        return () => {
-            if (video.parentElement === host)
-                host.removeChild(video);
-        };
-    }, [video]);
-    useEffect(() => {
-        video.style.transform = facingMode === 'user' ? 'scaleX(-1)' : '';
-    }, [video, facingMode]);
-    return (_jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("div", { ref: hostRef, "aria-label": t('@theorem.live.camera_preview'), role: "img" }) }));
+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;

package/ui/LiveVideoPreview.d.ts

@@ -0,0 +1,10 @@
+import type { LiveFacingMode } from '../client/live/live-video.ts';
+/**
+ * The camera preview: atop the call's captions, or in its tile. The capture element comes
+ * from the session client, so it is mounted imperatively; it sits one level
+ * below AspectRatio, so it carries its own fill and mirror styles.
+ */
+export declare function LiveVideoPreview({ video, facingMode, }: {
+    video: HTMLVideoElement;
+    facingMode: LiveFacingMode;
+}): import("react").JSX.Element;

package/ui/LiveVideoPreview.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AspectRatio } from '@astryxdesign/core/AspectRatio';
+import { useEffect, useRef } from 'react';
+import { useLabels } from "./labels-provider.js";
+/**
+ * The camera preview: atop the call's captions, or in its tile. The capture element comes
+ * from the session client, so it is mounted imperatively; it sits one level
+ * below AspectRatio, so it carries its own fill and mirror styles.
+ */
+export function LiveVideoPreview({ video, facingMode, }) {
+    const t = useLabels();
+    const hostRef = useRef(null);
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        Object.assign(video.style, {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            display: 'block',
+        });
+        host.replaceChildren(video);
+        return () => {
+            if (video.parentElement === host)
+                host.removeChild(video);
+        };
+    }, [video]);
+    useEffect(() => {
+        video.style.transform = facingMode === 'user' ? 'scaleX(-1)' : '';
+    }, [video, facingMode]);
+    return (_jsx(AspectRatio, { ratio: 4 / 3, fit: "cover", children: _jsx("div", { ref: hostRef, "aria-label": t('@theorem.live.camera_preview'), role: "img" }) }));
+}

package/ui/index.d.ts

@@ -12,7 +12,7 @@ export type { LiveCallOptions, PageTool, PageToolAnswer, PageTools, } from '@the
 export type { InkWaveStatus } from '../client/ink-waveform.ts';
 export { useLiveCaptionLog } from '../client/live/use-live-caption-log.ts';
 export { InkWaveform, type InkWaveformProps, type InkWaveLevels, } from '../components/InkWaveform.tsx';
-export { useLiveRunnerModel } from '../components/live/use-live-runner-model.ts';
+export { type LiveCall, type LiveCallInput, useLiveCall, } from '../components/live/use-live-call.ts';
 export { theoremTheme } from './built/theorem.js';
 export { ChatComposerBar, type ChatComposerBarProps, EFFORT_ICON, generationOptions, type LiveComposerBarProps, } from './ChatComposerBar.tsx';
 export { ChatTranscript, type ChatTranscriptProps } from './ChatTranscript.tsx';

package/ui/index.js

@@ -15,7 +15,7 @@ import '@astryxdesign/core/astryx.css';
 import './built/theme.css';
 export { useLiveCaptionLog } from "../client/live/use-live-caption-log.js";
 export { InkWaveform, } from "../components/InkWaveform.js";
-export { useLiveRunnerModel } from "../components/live/use-live-runner-model.js";
+export { useLiveCall, } from "../components/live/use-live-call.js";
 export { theoremTheme } from './built/theorem.js';
 export { ChatComposerBar, EFFORT_ICON, generationOptions, } from "./ChatComposerBar.js";
 export { ChatTranscript } from "./ChatTranscript.js";

package/ui/labels.d.ts

@@ -1364,6 +1364,14 @@ export declare const THEOREM_UI_CATALOG: {
         readonly defaultMessage: "End call";
         readonly description: "Hangs up.";
     };
+    readonly '@theorem.live.expand': {
+        readonly defaultMessage: "Open call";
+        readonly description: "Asks the host to show a minimized call full size.";
+    };
+    readonly '@theorem.live.minimize': {
+        readonly defaultMessage: "Minimize call";
+        readonly description: "Asks the host to show the call small; the call goes on.";
+    };
     readonly '@theorem.live.new_session': {
         readonly defaultMessage: "New session";
         readonly description: "Captions divider between calls.";

package/ui/labels.js

@@ -1291,6 +1291,14 @@ export const THEOREM_UI_CATALOG = {
         description: 'Switches front and back camera.',
     },
     '@theorem.live.end_call': { defaultMessage: 'End call', description: 'Hangs up.' },
+    '@theorem.live.expand': {
+        defaultMessage: 'Open call',
+        description: 'Asks the host to show a minimized call full size.',
+    },
+    '@theorem.live.minimize': {
+        defaultMessage: 'Minimize call',
+        description: 'Asks the host to show the call small; the call goes on.',
+    },
     '@theorem.live.new_session': {
         defaultMessage: 'New session',
         description: 'Captions divider between calls.',