@theoremjs/react 0.3.0 → 0.3.1

package/styles/ink-controls.css

@@ -1,134 +1,134 @@
 /* Shared ink waveform + borderless controls (live shell and turn voice composer). */
 
 :root {
-	--ink-ease: cubic-bezier(0.22, 1, 0.36, 1);
-	--ink-duration: 0.3s;
+  --ink-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --ink-duration: 0.3s;
 }
 
 .ink-state {
-	margin: 0;
-	font-size: 0.75rem;
-	font-weight: 700;
-	letter-spacing: 0.06em;
-	text-transform: lowercase;
-	color: var(--color-ink);
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--color-ink);
 }
 
 .ink-wave-slot {
-	flex: 1 1 auto;
-	display: flex;
-	align-items: flex-end;
-	justify-content: center;
-	min-height: min(52vh, 22rem);
-	margin-bottom: 1.5rem;
-	padding: 0 0.5rem;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  min-height: min(52vh, 22rem);
+  margin-bottom: 1.5rem;
+  padding: 0 0.5rem;
 }
 
 .ink-wave {
-	display: block;
-	width: min(100%, 36rem);
-	height: min(52vh, 22rem);
-	color: var(--color-ink);
+  display: block;
+  width: min(100%, 36rem);
+  height: min(52vh, 22rem);
+  color: var(--color-ink);
 }
 
 .ink-wave--hero {
-	width: min(100%, 56rem);
-	height: 100%;
-	min-height: 40dvh;
-	max-height: 80dvh;
+  width: min(100%, 56rem);
+  height: 100%;
+  min-height: 40dvh;
+  max-height: 80dvh;
 }
 
 .ink-wave__bar {
-	stroke: currentcolor;
-	stroke-linecap: square;
+  stroke: currentcolor;
+  stroke-linecap: square;
 }
 
 .ink-divider {
-	flex-shrink: 0;
-	width: 100%;
-	height: 0;
-	margin: 0 0 1.5rem;
-	border: none;
-	border-top: 1px solid rgba(0, 0, 0, 0.14);
+  flex-shrink: 0;
+  width: 100%;
+  height: 0;
+  margin: 0 0 1.5rem;
+  border: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.14);
 }
 
 .ink-controls {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 1rem;
-	flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-shrink: 0;
 }
 
 .ink-controls__left,
 .ink-controls__right {
-	display: flex;
-	align-items: center;
-	gap: 0.65rem;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
 }
 
 .ink-control {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 2.5rem;
-	height: 2.5rem;
-	padding: 0;
-	color: var(--color-ink);
-	background: transparent;
-	border: none;
-	cursor: pointer;
-	opacity: 0.55;
-	transition: opacity var(--ink-duration) var(--ink-ease);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  color: var(--color-ink);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  opacity: 0.55;
+  transition: opacity var(--ink-duration) var(--ink-ease);
 }
 
 .ink-control:not(:disabled):hover {
-	opacity: 1;
+  opacity: 1;
 }
 
 .ink-control:disabled {
-	opacity: 0.22;
-	cursor: default;
+  opacity: 0.22;
+  cursor: default;
 }
 
 .ink-control--active {
-	opacity: 0.9;
+  opacity: 0.9;
 }
 
 .ink-tooltip {
-	position: relative;
-	display: inline-flex;
+  position: relative;
+  display: inline-flex;
 }
 
 .ink-tooltip__label {
-	position: absolute;
-	left: 50%;
-	z-index: 6;
-	padding: 0.28rem 0.45rem;
-	font-family: var(--font-mono, ui-monospace, monospace);
-	font-size: 0.62rem;
-	font-weight: 700;
-	letter-spacing: 0.08em;
-	line-height: 1.2;
-	text-transform: lowercase;
-	white-space: nowrap;
-	color: var(--color-paper, #f4f1ea);
-	background: var(--color-ink, #111);
-	border-radius: 0;
-	pointer-events: none;
-	transform: translateX(-50%);
+  position: absolute;
+  left: 50%;
+  z-index: 6;
+  padding: 0.28rem 0.45rem;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  line-height: 1.2;
+  text-transform: lowercase;
+  white-space: nowrap;
+  color: var(--color-paper, #f4f1ea);
+  background: var(--color-ink, #111);
+  border-radius: 0;
+  pointer-events: none;
+  transform: translateX(-50%);
 }
 
 .ink-tooltip__label--top {
-	bottom: calc(100% + 0.45rem);
+  bottom: calc(100% + 0.45rem);
 }
 
 .ink-tooltip__label--bottom {
-	top: calc(100% + 0.45rem);
+  top: calc(100% + 0.45rem);
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.ink-control {
-		transition: none;
-	}
+  .ink-control {
+    transition: none;
+  }
 }

package/ui/CardWall.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+/**
+ * Cards in as many columns as fit, each as tall as its content. Each card,
+ * in order, goes under the shortest column so far, so short cards never
+ * leave a hole beside a tall one.
+ */
+export declare function CardWall({ minWidth, children }: {
+    minWidth: number;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/ui/CardWall.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HStack } from '@astryxdesign/core/HStack';
+import { StackItem } from '@astryxdesign/core/Stack';
+import { VStack } from '@astryxdesign/core/VStack';
+import { Children, useLayoutEffect, useRef, useState } from 'react';
+import { columnCount, wallColumns } from "./wall-columns.js";
+/** The wall's width and gap, and each card's height by its place in `children`. */
+function measureWall(wall, stacks, placed, cards) {
+    const heights = Array.from({ length: cards });
+    placed.forEach((column, at) => {
+        const shown = stacks[at]?.children;
+        column.forEach((card, row) => {
+            const element = shown?.[row];
+            if (element instanceof HTMLElement)
+                heights[card] = element.offsetHeight;
+        });
+    });
+    const gap = Number.parseFloat(getComputedStyle(wall).columnGap) || 0;
+    return { width: wall.clientWidth, gap, heights };
+}
+function sameWall(a, b) {
+    return (a.width === b.width &&
+        a.gap === b.gap &&
+        a.heights.length === b.heights.length &&
+        a.heights.every((height, at) => height === b.heights[at]));
+}
+/**
+ * Cards in as many columns as fit, each as tall as its content. Each card,
+ * in order, goes under the shortest column so far, so short cards never
+ * leave a hole beside a tall one.
+ */
+export function CardWall({ minWidth, children }) {
+    const cards = Children.toArray(children);
+    const wallRef = useRef(null);
+    const stacks = useRef([]);
+    const [wall, setWall] = useState({ width: 0, gap: 0, heights: [] });
+    const placed = wallColumns(cards.map((_, at) => wall.heights[at]), columnCount(wall.width, minWidth, wall.gap), wall.gap);
+    const placedRef = useRef(placed);
+    placedRef.current = placed;
+    const layout = placed.map((column) => column.join(' ')).join('|');
+    useLayoutEffect(() => {
+        const node = wallRef.current;
+        if (!node || !layout)
+            return;
+        const measure = () => {
+            const next = measureWall(node, stacks.current, placedRef.current, cards.length);
+            setWall((shown) => (sameWall(shown, next) ? shown : next));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        for (const stack of stacks.current) {
+            for (const card of stack?.children ?? [])
+                observer.observe(card);
+        }
+        return () => observer.disconnect();
+    }, [layout, cards.length]);
+    return (_jsx(HStack, { ref: wallRef, gap: 3, vAlign: "start", children: placed.map((column, at) => (_jsx(StackItem, { size: "fill", children: _jsx(VStack, { ref: (node) => {
+                    stacks.current[at] = node;
+                }, gap: 3, children: column.map((card) => cards[card]) }) }, String(at)))) }));
+}

package/ui/ChatComposerBar.d.ts

@@ -1,14 +1,21 @@
 import { type ChatComposerInputHandle } from '@astryxdesign/core/Chat';
-import { type AttachmentValidationIssue, type ComposerMenuAction, type ComposerPendingMessage, type ComposerProfileInterface, type ComposerRunPhase } from '@theoremjs/agents/interface';
+import { type AttachmentValidationIssue, type ComposerMenuAction, type ComposerPendingMessage, type ComposerProfileInterface, type ComposerRunPhase, type LiveProfileInterface } from '@theoremjs/agents/interface';
 import type { ClientFailure } from '../client/failure.ts';
-export declare const NO_FOCUS_RING: React.CSSProperties;
+/** A slot the profile declares: its allowed values, the one chosen, and how to choose another. */
+/** The effort selector's icon. The studio's Agents list shows the same one. */
+export declare const EFFORT_ICON: import("react").ForwardRefExoticComponent<import("@tabler/icons-react").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export type SlotChoices = {
+    declared: Readonly<Record<string, readonly string[]>>;
+    values: Readonly<Record<string, string>>;
+    onChange: (name: string, value: string) => void;
+};
 export type ChatComposerBarProps = {
     iface: ComposerProfileInterface;
     draftText: string;
     pendingFiles: readonly File[];
     pendingVoice: readonly File[];
     pendingMessages: readonly ComposerPendingMessage[];
-    /** Files the last send refused, one per reason; worded with the profile's lexicon. */
+    /** Files the last send refused, one per reason; worded with the profile's labels. */
     issues: readonly AttachmentValidationIssue[];
     phase: ComposerRunPhase;
     failure: ClientFailure | null;
@@ -29,11 +36,27 @@ export type ChatComposerBarProps = {
         modelId: string;
         effort?: string;
     }) => void;
+    /** The profile's `inputs.slots` with the value chosen for each; one selector per slot, beside the model's. */
+    slotChoices?: SlotChoices;
     onPendingMove: (id: string, direction: 'up' | 'down') => void;
     onPendingRemove: (id: string) => void;
     onPendingQueue: (id: string) => void;
     onPendingRestore: (id: string) => void;
     onPendingSendNow: (id: string) => void;
 };
-/** Astryx composer wired to Theorem's send / stop / queue / steer / stash matrix. */
-export declare function ChatComposerBar(props: ChatComposerBarProps): import("react").JSX.Element;
+/** A Live call's text line: it is sent as typed, so there is nothing to attach, queue, or stop. */
+export type LiveComposerBarProps = Omit<Pick<ChatComposerBarProps, 'draftText' | 'placeholder' | 'inputRef' | 'onDraftTextChange' | 'onSubmit'>, 'onSubmit'> & {
+    /** The typed line. The button reads the field, so this is the text, not the click. */
+    onSubmit: (text: string) => void;
+    /** The live profile, when the host has one. The placeholder uses its handle. */
+    iface?: LiveProfileInterface;
+    /** Profile handle, when the host has no interface object. Wins over `iface`. */
+    handle?: string;
+    /** Off while no call is connected. */
+    isDisabled: boolean;
+};
+/**
+ * Astryx composer wired to Theorem's send / stop / queue / steer / stash matrix.
+ * For a Live profile it is the text field and send button alone.
+ */
+export declare function ChatComposerBar(props: ChatComposerBarProps | LiveComposerBarProps): import("react").JSX.Element;

package/ui/ChatComposerBar.js

@@ -12,20 +12,23 @@ import { Text } from '@astryxdesign/core/Text';
 import { Thumbnail } from '@astryxdesign/core/Thumbnail';
 import { Token } from '@astryxdesign/core/Token';
 import { VStack } from '@astryxdesign/core/VStack';
-import { IconArrowDown, IconArrowUp, IconBrain, IconCornerDownLeft, IconInputAi, IconMicrophone, IconPaperclip, IconPencil, IconPlayerRecordFilled, IconSend, IconStack2, IconX, } from '@tabler/icons-react';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { attachmentIssueText } from '@theoremjs/agents';
+import { IconAdjustmentsHorizontal, IconArrowDown, IconArrowUp, IconBrain, IconCornerDownLeft, IconInputAi, IconMicrophone, IconPaperclip, IconPencil, IconPlayerRecordFilled, IconSend, IconStack2, IconX, } from '@tabler/icons-react';
+import { attachmentIssueText, labelText } from '@theoremjs/agents';
 import { composerPendingPreview, effortSelectEnabled, interfaceEffortOptions, interfaceModelOptions, modelSelectEnabled, } from '@theoremjs/agents/interface';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { stageComposerFiles } from "../client/composer-attachments.js";
-import { composerActionState } from "../client/composer-primary.js";
 import { composerDrawerSummary } from "../client/composer-drawer.js";
 import { isStashShortcut, resolveComposerHint, STASH_SHORTCUT, } from "../client/composer-hints.js";
+import { composerActionState } from "../client/composer-primary.js";
 import { useComposerVoice } from "../components/use-composer-voice.js";
+import { useEditorSelection } from "../components/use-editor-selection.js";
 import { composerDrawerLabel } from "./labels.js";
 import { TheoremLabelsProvider, useLabels } from "./labels-provider.js";
 import { VoiceNote } from "./VoiceNote.js";
-import { useEditorSelection } from "../components/use-editor-selection.js";
-export const NO_FOCUS_RING = { '--focus-outline-width': '0px' };
+const NO_FOCUS_RING = { '--focus-outline-width': '0px' };
+/** A slot the profile declares: its allowed values, the one chosen, and how to choose another. */
+/** The effort selector's icon. The studio's Agents list shows the same one. */
+export const EFFORT_ICON = IconBrain;
 const isImage = (file) => file.type.startsWith('image/');
 const anyFile = () => true;
 /** Object URLs for the files `keep` (a module-level predicate) accepts, revoked when the files change. */
@@ -53,35 +56,46 @@ function PendingRow(props) {
 /** The model and effort choices this profile offers; efforts only for a chosen model. */
 function generationOptions(iface, selectedModel) {
     const models = modelSelectEnabled(iface) ? interfaceModelOptions(iface) : [];
-    const efforts = selectedModel && effortSelectEnabled(iface, selectedModel) ? interfaceEffortOptions(iface, selectedModel) : [];
+    const efforts = selectedModel && effortSelectEnabled(iface, selectedModel)
+        ? interfaceEffortOptions(iface, selectedModel)
+        : [];
     return { models, efforts };
 }
 function ModelSelector(props) {
-    const t = useLabels();
     if (props.models.length === 0)
         return null;
-    return (_jsx(Selector, { label: t('@theorem.composer.model'), isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconInputAi, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.models.map((m) => ({ value: m.id, label: m.id, description: m.label !== m.id ? m.label : undefined })), onChange: props.onChange }));
+    return (_jsx(Selector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconInputAi, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.models.map((m) => ({
+            value: m.id,
+            label: m.id,
+            description: m.label !== m.id ? m.label : undefined,
+        })), onChange: props.onChange }));
 }
 function EffortSelector(props) {
-    const t = useLabels();
     if (props.efforts.length === 0)
         return null;
-    return (_jsx(Selector, { label: t('@theorem.composer.effort'), isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconBrain, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.efforts.map((e) => ({ value: e.alias, label: e.alias, description: e.level })), onChange: props.onChange }));
+    return (_jsx(Selector, { label: props.label, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(EFFORT_ICON, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: props.value ?? '', options: props.efforts.map((e) => ({ value: e.alias, label: e.alias, description: e.level })), onChange: props.onChange }));
+}
+function SlotSelectors(props) {
+    if (!props.choices)
+        return null;
+    const { declared, values, onChange } = props.choices;
+    return Object.entries(declared).map(([name, allowed]) => (_jsx(Selector, { label: name, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconAdjustmentsHorizontal, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: values[name] ?? '', options: allowed.map((value) => ({ value, label: value })), onChange: (value) => onChange(name, value) }, name)));
 }
 function GenerationSelect(props) {
     const { models, efforts } = generationOptions(props.iface, props.selectedModel);
-    if (models.length + efforts.length === 0)
+    const slotCount = Object.keys(props.slotChoices?.declared ?? {}).length;
+    if (models.length + efforts.length + slotCount === 0)
         return null;
-    return (_jsxs(HStack, { gap: 1, children: [_jsx(ModelSelector, { models: models, value: props.selectedModel, isDisabled: props.isDisabled, onChange: (modelId) => props.onChange({ modelId }) }), _jsx(EffortSelector, { efforts: efforts, value: props.selectedEffort, isDisabled: props.isDisabled, onChange: (effort) => {
+    return (_jsxs(HStack, { gap: 1, children: [_jsx(ModelSelector, { label: labelText('composer.model', {}, props.iface.labels), models: models, value: props.selectedModel, isDisabled: props.isDisabled, onChange: (modelId) => props.onChange({ modelId }) }), _jsx(EffortSelector, { label: labelText('composer.effort', {}, props.iface.labels), efforts: efforts, value: props.selectedEffort, isDisabled: props.isDisabled, onChange: (effort) => {
                     if (props.selectedModel)
                         props.onChange({ modelId: props.selectedModel, effort });
-                } })] }));
+                } }), _jsx(SlotSelectors, { choices: props.slotChoices, isDisabled: props.isDisabled })] }));
 }
 function composerStatus(args) {
     if (args.failure)
         return { type: 'error', message: args.failure.error };
     const warning = [
-        ...args.issues.map((issue) => attachmentIssueText(issue, args.lexicon)),
+        ...args.issues.map((issue) => attachmentIssueText(issue, args.labels)),
         args.voiceFailure?.error,
     ]
         .filter(Boolean)
@@ -94,7 +108,7 @@ function PendingDrawer(props) {
     return (_jsx(ChatComposerDrawer, { count: props.summary.count, label: composerDrawerLabel(t, props.summary), children: _jsxs(VStack, { gap: 2, width: "100%", children: [props.messages.map((message) => (_jsx(PendingRow, { message: message, ...props.pendingActions }, message.id))), props.imageFiles.length + props.voiceFiles.length > 0 ? (_jsxs(HStack, { gap: 2, wrap: "wrap", vAlign: "center", children: [props.imageFiles.map(({ file, index, preview }) => (_jsx(Thumbnail, { src: preview, alt: file.name, label: file.name, onRemove: () => props.onAttachmentRemove(index) }, `${file.name}:${String(index)}`))), props.voiceFiles.map((file, index) => (_jsx(VoiceNote, { src: props.voiceUrls[index] ?? '', mimeType: file.type || undefined, onRemove: props.onVoiceRemove }, `voice:${file.name}`)))] })) : null, props.otherFiles.length > 0 ? (_jsx(HStack, { gap: 2, wrap: "wrap", children: props.otherFiles.map(({ file, index }) => (_jsx(Token, { label: file.name, onRemove: () => props.onAttachmentRemove(index) }, `${file.name}:${String(index)}`))) })) : null] }) }));
 }
 /** A hidden file input behind the paperclip button. */
-function AttachFilesButton({ accept, onFiles }) {
+function AttachFilesButton({ accept, onFiles, }) {
     const t = useLabels();
     const label = t('@theorem.composer.attach');
     const fileInputRef = useRef(null);
@@ -107,7 +121,7 @@ function AttachFilesButton({ accept, onFiles }) {
     }
     return (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, hidden: true, accept: accept, onChange: handleChange }), _jsx(IconButton, { label: label, tooltip: label, size: "sm", variant: "ghost", icon: _jsx(IconPaperclip, { size: 16 }), onClick: () => fileInputRef.current?.click() })] }));
 }
-function SendMenu({ actions, onAction }) {
+function SendMenu({ actions, onAction, }) {
     const t = useLabels();
     if (actions.length === 0)
         return null;
@@ -138,7 +152,11 @@ function ComposerHint({ hint, onAction }) {
 function useStagedFiles(pendingFiles, pendingVoice) {
     const previews = useObjectUrls(pendingFiles, isImage);
     const voiceUrls = useObjectUrls(pendingVoice, anyFile);
-    const staged = pendingFiles.map((file, index) => ({ file, index, preview: previews[index] }));
+    const staged = pendingFiles.map((file, index) => ({
+        file,
+        index,
+        preview: previews[index],
+    }));
     return {
         imageFiles: staged.filter((entry) => entry.preview !== undefined),
         otherFiles: staged.filter((entry) => entry.preview === undefined),
@@ -149,7 +167,12 @@ function useStagedFiles(pendingFiles, pendingVoice) {
 function useFileStaging(pendingFiles, maxFiles, props) {
     const [stagingIssues, setStagingIssues] = useState([]);
     function stageFiles(incoming) {
-        const staged = stageComposerFiles({ existing: pendingFiles, incoming, maxFiles, voiceCount: props.pendingVoice.length });
+        const staged = stageComposerFiles({
+            existing: pendingFiles,
+            incoming,
+            maxFiles,
+            voiceCount: props.pendingVoice.length,
+        });
         const added = staged.files.slice(pendingFiles.length);
         if (added.length > 0)
             props.onFilesSelected(added);
@@ -158,7 +181,7 @@ function useFileStaging(pendingFiles, maxFiles, props) {
     return { stageFiles, stagingIssues };
 }
 /** The record button, when the profile takes voice. */
-function ComposerRecordButton({ hasVoice, voice }) {
+function ComposerRecordButton({ hasVoice, voice, }) {
     if (!hasVoice)
         return null;
     return _jsx(RecordButton, { recording: voice.recording, onToggle: () => void voice.toggleRecording() });
@@ -188,9 +211,40 @@ function ComposerTextInput({ editorRef, handleRef, onStash, }) {
             onStash?.();
         } }));
 }
-/** Astryx composer wired to Theorem's send / stop / queue / steer / stash matrix. */
+function isLiveComposer(props) {
+    return 'isDisabled' in props;
+}
+/**
+ * Astryx composer wired to Theorem's send / stop / queue / steer / stash matrix.
+ * For a Live profile it is the text field and send button alone.
+ */
 export function ChatComposerBar(props) {
-    return (_jsx(TheoremLabelsProvider, { children: _jsx(ChatComposerBarBody, { ...props }) }));
+    return (_jsx(TheoremLabelsProvider, { children: isLiveComposer(props) ? (_jsx(LiveComposerBarBody, { ...props })) : (_jsx(ChatComposerBarBody, { ...props })) }));
+}
+function LiveComposerBarBody(props) {
+    const t = useLabels();
+    const editorRef = useRef(null);
+    const setEditor = useCallback((node) => {
+        editorRef.current = node;
+        const outer = props.inputRef;
+        if (typeof outer === 'function')
+            outer(node);
+        else if (outer)
+            outer.current = node;
+    }, [props.inputRef]);
+    // why: The button used to send only the React draft. Typing lives in the field first, so an
+    // empty draft left the button dead. Read the field.
+    const submitTyped = () => {
+        const text = (editorRef.current?.getValue() ?? props.draftText).trim();
+        if (!text || props.isDisabled)
+            return;
+        props.onSubmit(text);
+        props.onDraftTextChange('');
+    };
+    return (_jsx(ChatComposer, { style: NO_FOCUS_RING, value: props.draftText, onChange: props.onDraftTextChange, onSubmit: props.onSubmit, isDisabled: props.isDisabled, placeholder: props.placeholder ??
+            t('@theorem.composer.placeholder', {
+                handle: props.handle ?? props.iface?.identity.handle ?? '',
+            }), input: _jsx(ChatComposerInput, { handleRef: setEditor }), sendButton: _jsx(ChatSendButton, { isDisabled: props.isDisabled, onSend: submitTyped }) }));
 }
 function ChatComposerBarBody(props) {
     const { iface, phase } = props;
@@ -199,7 +253,7 @@ function ChatComposerBarBody(props) {
     const pendingFiles = useMemo(() => [...props.pendingFiles], [props.pendingFiles]);
     const voice = useComposerVoice({
         inputs,
-        lexicon: iface.lexicon,
+        labels: iface.labels,
         pendingFiles,
         onVoiceStaged: props.onVoiceStaged,
         onVoiceClear: props.onVoiceClear,
@@ -231,21 +285,22 @@ function ChatComposerBarBody(props) {
     }
     const { stageFiles, stagingIssues } = useFileStaging(pendingFiles, inputs.maxFiles, props);
     return (_jsx(ChatComposer
-    // No keyboard focus ring on the composer (product choice): zero Astryx's
+    // why: No keyboard focus ring on the composer (product choice): zero Astryx's
     // focus-outline token for this subtree. The editor still shows its caret.
     , { 
-        // No keyboard focus ring on the composer (product choice): zero Astryx's
+        // why: No keyboard focus ring on the composer (product choice): zero Astryx's
         // focus-outline token for this subtree. The editor still shows its caret.
         style: NO_FOCUS_RING, value: props.draftText, onChange: props.onDraftTextChange, onSubmit: runPrimary, onStop: props.onStop, isStopShown: primary === 'stop', placeholder: voice.recording
             ? t('@theorem.composer.listening')
-            : (props.placeholder ?? t('@theorem.composer.placeholder', { handle: iface.identity.handle })), 
-        // A profile that takes no text has no text field (false, not null: null gets Astryx's default one).
-        input: inputs.text && (_jsx(ComposerTextInput, { editorRef: editorRef, handleRef: props.inputRef, onStash: canStash ? () => props.onMenuAction('stash') : undefined })), drawer: composerDrawer(props, stagedFiles, () => voice.discardRecordingOrVoice()), headerActions: inputs.attachments ? _jsx(AttachFilesButton, { accept: inputs.attachments.acceptAttr, onFiles: stageFiles }) : undefined, headerContext: hint ? _jsx(ComposerHint, { hint: hint, onAction: () => props.onMenuAction('stash') }) : undefined, footerActions: _jsx(GenerationSelect, { iface: iface, selectedModel: props.selectedModel, selectedEffort: props.selectedEffort, isDisabled: phase === 'streaming', onChange: props.onGenerationChange }), 
-        // Astryx: sendActions render to the left of the send button, at size="md".
+            : (props.placeholder ??
+                t('@theorem.composer.placeholder', { handle: iface.identity.handle })), 
+        // why: A profile that takes no text has no text field (false, not null: null gets Astryx's default one).
+        input: inputs.text && (_jsx(ComposerTextInput, { editorRef: editorRef, handleRef: props.inputRef, onStash: canStash ? () => props.onMenuAction('stash') : undefined })), drawer: composerDrawer(props, stagedFiles, () => voice.discardRecordingOrVoice()), headerActions: inputs.attachments ? (_jsx(AttachFilesButton, { accept: inputs.attachments.acceptAttr, onFiles: stageFiles })) : undefined, headerContext: hint ? _jsx(ComposerHint, { hint: hint, onAction: () => props.onMenuAction('stash') }) : undefined, footerActions: _jsx(GenerationSelect, { iface: iface, slotChoices: props.slotChoices, selectedModel: props.selectedModel, selectedEffort: props.selectedEffort, isDisabled: phase === 'streaming', onChange: props.onGenerationChange }), 
+        // why: Astryx: sendActions render to the left of the send button, at size="md".
         sendActions: _jsxs(_Fragment, { children: [_jsx(SendMenu, { actions: menuActions, onAction: props.onMenuAction }), _jsx(ComposerRecordButton, { hasVoice: Boolean(inputs.voice), voice: voice })] }), sendButton: _jsx(ChatSendButton, { isStopShown: primary === 'stop', isDisabled: primaryDisabled, onSend: runPrimary, onStop: props.onStop }), status: composerStatus({
             failure: props.failure,
             issues: [...props.issues, ...stagingIssues],
             voiceFailure: voice.failure,
-            lexicon: iface.lexicon,
+            labels: iface.labels,
         }) }));
 }

package/ui/ChatTranscript.d.ts

@@ -1,6 +1,7 @@
 import { type ChatMessageStatus } from '@astryxdesign/core/Chat';
+import type { LabelOverrides } from '@theoremjs/agents';
+import { type TranscriptBlock } from '@theoremjs/agents/interface';
 import { type ReactNode } from 'react';
-import type { TranscriptBlock } from '@theoremjs/agents/interface';
 import type { AnsweringGate } from '../client/tool-resume.ts';
 import { type ToolDecision } from './ToolGateCard.tsx';
 export type ChatTranscriptProps = {
@@ -16,11 +17,23 @@ export type ChatTranscriptProps = {
     /** Signed in at a gate: `secret` is a key the user typed; after an OAuth callback there is none. */
     onAuthenticated?: (index: number, secret?: string) => void;
     emptyState?: ReactNode;
+    /**
+     * Labelled dividers, keyed by block id: each is drawn above the turn that
+     * starts at its block, and that block always starts a turn of its own.
+     */
+    dividers?: Readonly<Record<string, string>>;
     /**
      * Set for image profiles: generated images show large, framed to their own
      * aspect ratio, with a matching skeleton while one generates.
      */
     imageOutput?: ImageOutput;
+    /**
+     * Show what was used, as tokens and cost: each reply's total under it, and
+     * on an agent tool's call row what the agent it ran used. Off by default.
+     */
+    usage?: boolean;
+    /** The profile's labels (`iface.labels`): a stopped turn says why in its words. */
+    labels?: LabelOverrides;
 };
 /** Image-profile display: `ratio` is the profile's pinned aspect ratio, if any. */
 export type ImageOutput = {