@theoremjs/react 0.3.4-next.827.gdc3858d → 0.3.4-next.831.g934609e

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` and `LiveRunner`, 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,59 @@ 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.
+
 ### 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 +425,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,13 +1,24 @@
 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;

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

@@ -50,12 +50,11 @@ function useLiveCallLifecycle(controls, captionsRef, sessionActive, videoAvailab
     return { callStarted, 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 +73,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,
@@ -158,6 +157,7 @@ export function useLiveRunnerModel(iface, connection, options = {}) {
     }, [clientRef, statedJson]);
     usePageToolWarnings(iface.tools.page, options.pageTools);
     return {
+        iface,
         handle: iface.identity.handle,
         traces,
         callStarted,

package/live.d.ts

@@ -4,5 +4,6 @@
  * @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 type { LiveRunnerProps } from './ui/LiveRunner.tsx';
 export { LiveRunner } from './ui/LiveRunner.tsx';

package/live.js

@@ -7,4 +7,5 @@
 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 { 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.831.g934609e",
   "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.831.g934609e",
+    "@theoremjs/web": "^0.3.4-next.831.g934609e"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

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

@@ -13,10 +13,9 @@ 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 { IconArrowsDiagonalMinimize2, IconCameraRotate, IconMessage, IconMicrophone, IconMicrophoneOff, IconPhone, IconPhoneOff, IconVideo, IconVideoOff, } from '@tabler/icons-react';
 import { Fragment, useEffect, 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 { liveStateLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.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,34 +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 }));
+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 }));
 }
 /**
  * The camera preview, at the top of the captions panel. The capture element comes

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,10 @@ export declare const THEOREM_UI_CATALOG: {
         readonly defaultMessage: "End call";
         readonly description: "Hangs up.";
     };
+    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,10 @@ export const THEOREM_UI_CATALOG = {
         description: 'Switches front and back camera.',
     },
     '@theorem.live.end_call': { defaultMessage: 'End call', description: 'Hangs up.' },
+    '@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.',