@theoremjs/react 0.0.0-stage → 0.3.1

package/server/turn-input.js

@@ -0,0 +1,29 @@
+/** The page's context as the client's and the host's as the server's; nothing when neither gave any. */
+function turnContext(client, server) {
+    const context = {
+        ...(client === undefined ? {} : { client }),
+        ...(server === undefined ? {} : { server }),
+    };
+    return Object.keys(context).length > 0 ? context : undefined;
+}
+/** A turn input off the wire as the kernel takes it: the page's context is the client's. */
+export function kernelTurnInput(input, server) {
+    const { context: client, ...rest } = input;
+    const context = turnContext(client, server);
+    return context ? { ...rest, context } : rest;
+}
+/**
+ * What a live call's first message asks of the session, as `runSession` takes
+ * it: the page's context is the client's, and `server` is the host's own.
+ */
+export function liveSessionOpen(open, server) {
+    const context = turnContext(open.context, server);
+    return {
+        ...(open.history ? { history: open.history } : {}),
+        ...(open.slots ? { slots: open.slots } : {}),
+        ...(context ? { context } : {}),
+        ...(open.resume
+            ? { providerState: open.resume.providerState, awayMs: open.resume.awayMs }
+            : {}),
+    };
+}

package/styles/ink-controls.css

@@ -0,0 +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-state {
+  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;
+}
+
+.ink-wave {
+  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;
+}
+
+.ink-wave__bar {
+  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);
+}
+
+.ink-controls {
+  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;
+}
+
+.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);
+}
+
+.ink-control:not(:disabled):hover {
+  opacity: 1;
+}
+
+.ink-control:disabled {
+  opacity: 0.22;
+  cursor: default;
+}
+
+.ink-control--active {
+  opacity: 0.9;
+}
+
+.ink-tooltip {
+  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%);
+}
+
+.ink-tooltip__label--top {
+  bottom: calc(100% + 0.45rem);
+}
+
+.ink-tooltip__label--bottom {
+  top: calc(100% + 0.45rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .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

@@ -0,0 +1,62 @@
+import { type ChatComposerInputHandle } from '@astryxdesign/core/Chat';
+import { type AttachmentValidationIssue, type ComposerMenuAction, type ComposerPendingMessage, type ComposerProfileInterface, type ComposerRunPhase, type LiveProfileInterface } from '@theoremjs/agents/interface';
+import type { ClientFailure } from '../client/failure.ts';
+/** 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 labels. */
+    issues: readonly AttachmentValidationIssue[];
+    phase: ComposerRunPhase;
+    failure: ClientFailure | null;
+    selectedModel?: string;
+    selectedEffort?: string;
+    placeholder?: string;
+    /** Imperative handle for the editor (focus, insert). */
+    inputRef?: React.Ref<ChatComposerInputHandle>;
+    onDraftTextChange: (text: string) => void;
+    onFilesSelected: (files: File[]) => void;
+    onAttachmentRemove: (index: number) => void;
+    onVoiceStaged: (file: File) => void;
+    onVoiceClear: () => void;
+    onSubmit: () => void;
+    onStop: () => void;
+    onMenuAction: (action: ComposerMenuAction) => void;
+    onGenerationChange: (next: {
+        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;
+};
+/** 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

@@ -0,0 +1,306 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '@astryxdesign/core/Badge';
+import { Button } from '@astryxdesign/core/Button';
+import { ChatComposer, ChatComposerDrawer, ChatComposerInput, ChatSendButton, } from '@astryxdesign/core/Chat';
+import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
+import { HStack } from '@astryxdesign/core/HStack';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { Kbd } from '@astryxdesign/core/Kbd';
+import { Selector } from '@astryxdesign/core/Selector';
+import { StackItem } from '@astryxdesign/core/Stack';
+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 { 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 { 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";
+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. */
+function useObjectUrls(files, keep) {
+    const urls = useMemo(() => files.map((file) => (keep(file) ? URL.createObjectURL(file) : undefined)), [files, keep]);
+    useEffect(() => () => {
+        for (const url of urls)
+            if (url)
+                URL.revokeObjectURL(url);
+    }, [urls]);
+    return urls;
+}
+function PendingRow(props) {
+    const { message } = props;
+    const t = useLabels();
+    const icon = (Glyph) => _jsx(Glyph, { size: 14 });
+    const edit = t('@theorem.composer.pending.edit');
+    const queue = t('@theorem.composer.pending.queue_action');
+    const sendNow = t('@theorem.composer.pending.send_now');
+    const moveUp = t('@theorem.composer.pending.move_up');
+    const moveDown = t('@theorem.composer.pending.move_down');
+    const remove = t('@theorem.composer.pending.remove');
+    return (_jsxs(HStack, { gap: 1, align: "center", width: "100%", children: [_jsx(Badge, { variant: message.kind === 'steer' ? 'info' : 'neutral', label: t(`@theorem.composer.pending.${message.kind}`) }), _jsx(StackItem, { size: "fill", children: _jsx(Text, { size: "sm", maxLines: 1, hasTruncateTooltip: true, children: composerPendingPreview(message) }) }), _jsxs(HStack, { gap: 0.5, children: [_jsx(IconButton, { label: edit, tooltip: edit, size: "sm", variant: "ghost", icon: icon(IconPencil), onClick: () => props.onRestore(message.id) }), message.kind === 'stash' ? (_jsx(IconButton, { label: queue, tooltip: queue, size: "sm", variant: "ghost", icon: icon(IconCornerDownLeft), onClick: () => props.onQueue(message.id) })) : null, _jsx(IconButton, { label: sendNow, tooltip: sendNow, size: "sm", variant: "ghost", icon: icon(IconSend), onClick: () => props.onSendNow(message.id) }), _jsx(IconButton, { label: moveUp, tooltip: moveUp, size: "sm", variant: "ghost", icon: icon(IconArrowUp), onClick: () => props.onMove(message.id, 'up') }), _jsx(IconButton, { label: moveDown, tooltip: moveDown, size: "sm", variant: "ghost", icon: icon(IconArrowDown), onClick: () => props.onMove(message.id, 'down') }), _jsx(IconButton, { label: remove, tooltip: remove, size: "sm", variant: "ghost", icon: icon(IconX), onClick: () => props.onRemove(message.id) })] })] }));
+}
+/** 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)
+        : [];
+    return { models, efforts };
+}
+function ModelSelector(props) {
+    if (props.models.length === 0)
+        return null;
+    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) {
+    if (props.efforts.length === 0)
+        return null;
+    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);
+    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, { 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.labels)),
+        args.voiceFailure?.error,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return warning ? { type: 'warning', message: warning } : undefined;
+}
+/** Pending messages, then two uniform rows: 64px tiles (images, voice notes), then file tokens. */
+function PendingDrawer(props) {
+    const t = useLabels();
+    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, }) {
+    const t = useLabels();
+    const label = t('@theorem.composer.attach');
+    const fileInputRef = useRef(null);
+    function handleChange(event) {
+        const input = event.currentTarget;
+        const incoming = input.files ? [...input.files] : [];
+        input.value = '';
+        if (incoming.length > 0)
+            onFiles(incoming);
+    }
+    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, }) {
+    const t = useLabels();
+    if (actions.length === 0)
+        return null;
+    return (_jsx(DropdownMenu, { button: {
+            label: t('@theorem.composer.send_options'),
+            isIconOnly: true,
+            icon: _jsx(IconStack2, { size: 16 }),
+            variant: 'ghost',
+        }, hasChevron: false, placement: "above", items: actions.map((action) => ({
+            id: action,
+            label: t(`@theorem.composer.menu.${action}`),
+            description: t(`@theorem.composer.menu.${action}.description`),
+            ...(action === 'stash' ? { endContent: _jsx(Kbd, { keys: STASH_SHORTCUT }) } : {}),
+            onClick: () => onAction(action),
+        })) }));
+}
+function RecordButton({ recording, onToggle }) {
+    const t = useLabels();
+    const label = t(recording ? '@theorem.composer.stop_recording' : '@theorem.composer.record');
+    return (_jsx(IconButton, { label: label, tooltip: label, size: "md", variant: recording ? 'destructive' : 'ghost', icon: recording ? _jsx(IconPlayerRecordFilled, { size: 16 }) : _jsx(IconMicrophone, { size: 16 }), onClick: onToggle }));
+}
+/** Astryx's slot for contextual info (header, right side). */
+function ComposerHint({ hint, onAction }) {
+    const t = useLabels();
+    return (_jsxs(HStack, { gap: 2, vAlign: "center", children: [_jsx(Text, { size: "sm", color: "secondary", children: t(`@theorem.composer.hint.${hint.id}.message`) }), _jsx(Button, { label: t(`@theorem.composer.hint.${hint.id}.action`), size: "sm", variant: "ghost", onClick: onAction }), _jsx(Kbd, { keys: hint.shortcut })] }));
+}
+/** Staged files split into image tiles and file tokens, with object URLs for previews and voice notes. */
+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],
+    }));
+    return {
+        imageFiles: staged.filter((entry) => entry.preview !== undefined),
+        otherFiles: staged.filter((entry) => entry.preview === undefined),
+        voiceUrls,
+    };
+}
+/** Stages picked files beside the ones already waiting, and keeps what could not be staged. */
+function useFileStaging(pendingFiles, maxFiles, props) {
+    const [stagingIssues, setStagingIssues] = useState([]);
+    function stageFiles(incoming) {
+        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);
+        setStagingIssues(staged.issues);
+    }
+    return { stageFiles, stagingIssues };
+}
+/** The record button, when the profile takes voice. */
+function ComposerRecordButton({ hasVoice, voice, }) {
+    if (!hasVoice)
+        return null;
+    return _jsx(RecordButton, { recording: voice.recording, onToggle: () => void voice.toggleRecording() });
+}
+/** The drawer of messages and files waiting to send; absent while nothing waits. */
+function composerDrawer(props, stagedFiles, onVoiceRemove) {
+    const summary = composerDrawerSummary({
+        pendingMessages: props.pendingMessages,
+        attachmentCount: props.pendingFiles.length + props.pendingVoice.length,
+    });
+    if (!summary)
+        return undefined;
+    return (_jsx(PendingDrawer, { summary: summary, messages: props.pendingMessages, ...stagedFiles, voiceFiles: props.pendingVoice, pendingActions: {
+            onMove: props.onPendingMove,
+            onRemove: props.onPendingRemove,
+            onQueue: props.onPendingQueue,
+            onRestore: props.onPendingRestore,
+            onSendNow: props.onPendingSendNow,
+        }, onAttachmentRemove: props.onAttachmentRemove, onVoiceRemove: onVoiceRemove }));
+}
+/** The text field, with Seance's stash shortcut while it has focus; `onStash` is absent when there is nothing to stash. */
+function ComposerTextInput({ editorRef, handleRef, onStash, }) {
+    return (_jsx(ChatComposerInput, { ref: editorRef, handleRef: handleRef, onKeyDown: (event) => {
+            if (!isStashShortcut(event))
+                return;
+            event.preventDefault();
+            onStash?.();
+        } }));
+}
+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: 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;
+    const t = useLabels();
+    const inputs = iface.inputs;
+    const pendingFiles = useMemo(() => [...props.pendingFiles], [props.pendingFiles]);
+    const voice = useComposerVoice({
+        inputs,
+        labels: iface.labels,
+        pendingFiles,
+        onVoiceStaged: props.onVoiceStaged,
+        onVoiceClear: props.onVoiceClear,
+    });
+    const stagedFiles = useStagedFiles(props.pendingFiles, props.pendingVoice);
+    useEffect(() => () => voice.disposeRecorder(), [voice.disposeRecorder]);
+    const { primary, menuActions, primaryDisabled } = composerActionState({
+        iface,
+        phase,
+        draftText: props.draftText,
+        pendingFiles: props.pendingFiles,
+        pendingVoice: props.pendingVoice,
+        recording: voice.recording,
+    });
+    const canStash = menuActions.includes('stash');
+    const editorRef = useRef(null);
+    const hint = resolveComposerHint({
+        draftText: props.draftText,
+        selectedText: useEditorSelection(editorRef),
+        canStash,
+    });
+    function runPrimary() {
+        if (primaryDisabled)
+            return;
+        if (primary === 'stop')
+            props.onStop();
+        else
+            props.onSubmit();
+    }
+    const { stageFiles, stagingIssues } = useFileStaging(pendingFiles, inputs.maxFiles, props);
+    return (_jsx(ChatComposer
+    // 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.
+    , { 
+        // 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 })), 
+        // 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,
+            labels: iface.labels,
+        }) }));
+}

package/ui/ChatTranscript.d.ts

@@ -0,0 +1,43 @@
+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 { AnsweringGate } from '../client/tool-resume.ts';
+import { type ToolDecision } from './ToolGateCard.tsx';
+export type ChatTranscriptProps = {
+    blocks: readonly TranscriptBlock[];
+    /** Assistant display name (profile handle). */
+    handle: string;
+    streaming?: boolean;
+    /** How far the latest message has got; shown on it unless its turn failed. */
+    delivery?: Exclude<ChatMessageStatus, 'error'> | null;
+    onToolDecision?: (index: number, action: ToolDecision) => void;
+    /** The answer on its way to a gate (`useTheoremChat().answering`). */
+    answering?: AnsweringGate | null;
+    /** 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 = {
+    ratio?: number;
+};
+/** Theorem transcript blocks rendered as Astryx chat messages. */
+export declare function ChatTranscript(props: ChatTranscriptProps): import("react").JSX.Element;