@theoremjs/react 0.3.4-next.542.g59bcbcf → 0.3.4-next.548.gbb156b2

package/README.md

@@ -435,6 +435,8 @@ function MyChat() {
 
 To show the transcript and the composer, use `ChatTranscript` and `ChatComposerBar` from `/ui`. You can also draw your own from `chat.blocks`.
 
+`ChatTranscript` places `citation` blocks after the answer text by default (the Sources strip under the prose). Pass `bodyKindPlacement={{}}` when citations must stay in stream order between text segments (inline citations).
+
 The hooks and the client write no English text. They return kinds, codes, and states. You write the words.
 
 - A failure is a `ClientFailure`: `{ error, errorKind, errorInternal? }`. Show `error` to the user. It is the wording of the profile. `errorKind` and `errorInternal` are for your code.

package/client/transcript-groups.d.ts

@@ -58,6 +58,16 @@ export type ComposedAssistantTurn = {
     /** True when the disclosure control should appear. */
     hasTrace: boolean;
 };
+/** Pin a body kind before or after kinds with no placement (stream order among peers). */
+export type BodyKindPlacement = 'first' | 'last';
+export type ComposeAssistantTurnOptions = {
+    /**
+     * Where body kinds sit relative to each other. Omit a kind (or pass `null`)
+     * to keep stream order among peers. Pass `{}` for pure stream order.
+     * When the option is omitted entirely, {@link DEFAULT_BODY_KIND_PLACEMENT} applies.
+     */
+    bodyKindPlacement?: Partial<Record<TranscriptBlock['kind'], BodyKindPlacement | null | undefined>>;
+};
 /**
  * Blocks as turns: neighbours from the same side share one, unless a block is
  * in `breaks`, which always starts its own. A message whose turn stopped short
@@ -86,8 +96,10 @@ export declare function workStatus(args: {
  * - `text` before/between tools → narration; text and answer kinds after the
  *   latest tool → body (while streaming too, so the answer streams formatted)
  * - No tools: thoughts still go to trace; remaining kinds → body
+ * - Body kinds then follow {@link ComposeAssistantTurnOptions.bodyKindPlacement}
+ *   (default: citations last)
  */
-export declare function composeAssistantTurn(blocks: readonly TranscriptBlock[]): ComposedAssistantTurn;
+export declare function composeAssistantTurn(blocks: readonly TranscriptBlock[], options?: ComposeAssistantTurnOptions): ComposedAssistantTurn;
 /** The trailing user group while its reply has not started streaming back. */
 export declare function pendingPromptOf(groups: readonly TranscriptTurnGroup[]): TranscriptTurnGroup | undefined;
 export type AssistantTurnTiming = {

package/client/transcript-groups.js

@@ -16,6 +16,31 @@ function addUsage(used, more) {
     const partial = !used.cost || !more.cost || used.cost.partial || more.cost.partial;
     return { total, cost: { usd, ...(partial ? { partial: true } : {}) } };
 }
+/**
+ * Theorem's Sources strip: citations under the answer. For inline citations that
+ * must stay between text segments, pass `{ bodyKindPlacement: {} }`.
+ */
+const DEFAULT_BODY_KIND_PLACEMENT = {
+    citation: 'last',
+};
+/** Stable-partition body blocks by {@link BodyKindPlacement}; peers keep stream order. */
+function placeBodyBlocks(body, placement) {
+    if (!placement)
+        return [...body];
+    const first = [];
+    const middle = [];
+    const last = [];
+    for (const block of body) {
+        const place = placement[block.kind];
+        if (place === 'first')
+            first.push(block);
+        else if (place === 'last')
+            last.push(block);
+        else
+            middle.push(block);
+    }
+    return [...first, ...middle, ...last];
+}
 const WORDED = new Set(WORDED_STOP_KINDS);
 const USER_KINDS = new Set(['user-text', 'user-attachment', 'user-voice']);
 function isUserTranscriptBlock(block) {
@@ -139,8 +164,10 @@ function classifyNonGateBlock(block, args, trace, body) {
  * - `text` before/between tools → narration; text and answer kinds after the
  *   latest tool → body (while streaming too, so the answer streams formatted)
  * - No tools: thoughts still go to trace; remaining kinds → body
+ * - Body kinds then follow {@link ComposeAssistantTurnOptions.bodyKindPlacement}
+ *   (default: citations last)
  */
-export function composeAssistantTurn(blocks) {
+export function composeAssistantTurn(blocks, options) {
     const visible = blocks.filter((block) => !isHiddenTranscriptBlock(block));
     // why: One card at a time: the gate answered next. The step's later gates wait in the trace.
     const nextGate = visible.find(isGatedTool);
@@ -153,10 +180,11 @@ export function composeAssistantTurn(blocks) {
     for (const [index, block] of nonGate.entries()) {
         classifyNonGateBlock(block, { hasTools, index, lastToolIndex }, trace, body);
     }
+    const placement = options?.bodyKindPlacement ?? DEFAULT_BODY_KIND_PLACEMENT;
     return {
         trace,
         gatedTools,
-        body,
+        body: placeBodyBlocks(body, placement),
         hasTrace: trace.length > 0,
     };
 }

package/hooks/use-theorem-chat.d.ts

@@ -10,7 +10,7 @@ export type UseTheoremChatOptions = ChatOptions;
 export declare function useTheoremChat(options: UseTheoremChatOptions): {
     slotChoices: {
         onChange: (name: string, value: string) => void;
-        declared: Record<string, string[]>;
+        declared: Record<string, import("@theoremjs/web/client").ChatSlotDecl>;
         values: Record<string, string>;
     } | undefined;
     setDraftText: (value: import("@theoremjs/web/client").ChatUpdate<string>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.542.g59bcbcf",
+  "version": "0.3.4-next.548.gbb156b2",
   "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.542.g59bcbcf",
-    "@theoremjs/web": "^0.3.4-next.542.g59bcbcf"
+    "@theoremjs/agents": "^0.3.4-next.548.gbb156b2",
+    "@theoremjs/web": "^0.3.4-next.548.gbb156b2"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ChatComposerBar.d.ts

@@ -4,8 +4,16 @@ import type { ClientFailure } from '@theoremjs/web/client';
 /** 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 SlotChoiceOption = {
+    value: string;
+    description?: string;
+};
+export type SlotDeclView = {
+    label?: string;
+    choices: readonly SlotChoiceOption[];
+};
 export type SlotChoices = {
-    declared: Readonly<Record<string, readonly string[]>>;
+    declared: Readonly<Record<string, SlotDeclView>>;
     values: Readonly<Record<string, string>>;
     onChange: (name: string, value: string) => void;
 };

package/ui/ChatComposerBar.js

@@ -93,7 +93,18 @@ 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)));
+    return Object.entries(declared).map(([name, decl]) => {
+        // why: Group title belongs in the open menu (section heading), not beside the
+        // closed trigger — same chrome as Model/Effort. Descriptions stay Astryx
+        // secondary + one-line ellipsis; wrap would blow the composer dropdown open.
+        const title = decl.label?.trim() || name;
+        const choices = decl.choices.map((choice) => ({
+            value: choice.value,
+            label: choice.value,
+            description: choice.description,
+        }));
+        return (_jsx(Selector, { label: title, isLabelHidden: true, size: "sm", variant: "ghost", startIcon: _jsx(IconAdjustmentsHorizontal, { size: 14 }), placement: "above", isDisabled: props.isDisabled, value: values[name] ?? '', options: [{ type: 'section', title, options: choices }], onChange: (value) => onChange(name, value) }, name));
+    });
 }
 function GenerationSelect(props) {
     const { models, efforts } = generationOptions(props.iface, props.selectedModel);

package/ui/ChatTranscript.d.ts

@@ -3,6 +3,7 @@ import type { LabelOverrides } from '@theoremjs/agents';
 import { type TranscriptBlock } from '@theoremjs/agents/interface';
 import type { AnsweringGate } from '@theoremjs/web/client';
 import { type ReactNode } from 'react';
+import { type ComposeAssistantTurnOptions } from '../client/transcript-groups.ts';
 import { type ToolDecision } from './ToolGateCard.tsx';
 export type ChatTranscriptProps = {
     blocks: readonly TranscriptBlock[];
@@ -32,6 +33,11 @@ export type ChatTranscriptProps = {
      * on an agent tool's call row what the agent it ran used. Off by default.
      */
     usage?: boolean;
+    /**
+     * Where body kinds sit in a reply. Default puts `citation` last (Sources under
+     * the prose). Pass `{}` to keep stream order for inline citations.
+     */
+    bodyKindPlacement?: ComposeAssistantTurnOptions['bodyKindPlacement'];
     /** The profile's labels (`iface.labels`): a stopped turn says why in its words. */
     labels?: LabelOverrides;
 };

package/ui/ChatTranscript.js

@@ -4,12 +4,14 @@ import { ChatMessage, ChatMessageBubble, ChatMessageList, ChatMessageMetadata, C
 import { Citation } from '@astryxdesign/core/Citation';
 import { ClickableCard } from '@astryxdesign/core/ClickableCard';
 import { Collapsible } from '@astryxdesign/core/Collapsible';
+import { DropdownMenu } from '@astryxdesign/core/DropdownMenu';
 import { HStack } from '@astryxdesign/core/HStack';
 import { Icon } from '@astryxdesign/core/Icon';
 import { IconButton } from '@astryxdesign/core/IconButton';
 import { useLocale } from '@astryxdesign/core/i18n';
 import { useLightbox } from '@astryxdesign/core/Lightbox';
 import { Markdown } from '@astryxdesign/core/Markdown';
+import { OverflowList } from '@astryxdesign/core/OverflowList';
 import { Skeleton } from '@astryxdesign/core/Skeleton';
 import { Text } from '@astryxdesign/core/Text';
 import { Thumbnail } from '@astryxdesign/core/Thumbnail';
@@ -292,27 +294,96 @@ function MediaBlock({ block }) {
     }
     return _jsx(Text, { color: "secondary", children: block.mimeType });
 }
-/** Runs of images/videos become one gallery row; everything else is a row of its own. */
+/**
+ * Runs of images/videos become one gallery row; consecutive citation blocks
+ * become one sources row; everything else is a row of its own.
+ */
 function bodyRows(t, body) {
     const rows = [];
     for (const block of body) {
         const item = galleryItemOf(t, block);
-        const last = rows.at(-1);
-        if (item && last?.kind === 'gallery')
-            last.items.push(item);
-        else if (item)
-            rows.push({ kind: 'gallery', items: [item] });
+        if (item)
+            addToGallery(rows, item);
+        else if (block.kind === 'citation')
+            addToSources(rows, citationsFromBlock(block));
         else
             rows.push({ kind: 'block', block });
     }
     return rows;
 }
-function Sources({ block }) {
+function addToGallery(rows, item) {
+    const last = rows.at(-1);
+    if (last?.kind === 'gallery')
+        last.items.push(item);
+    else
+        rows.push({ kind: 'gallery', items: [item] });
+}
+function addToSources(rows, citations) {
+    if (citations.length === 0)
+        return;
+    const last = rows.at(-1);
+    if (last?.kind === 'sources')
+        last.citations.push(...citations);
+    else
+        rows.push({ kind: 'sources', citations: [...citations] });
+}
+/** Keeps the overflow chip looking like a Citation, not a default button. */
+const SOURCES_MORE_TRIGGER = {
+    appearance: 'none',
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    font: 'inherit',
+    color: 'inherit',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    verticalAlign: 'baseline',
+};
+/** Favicon size matches Citation’s icon slot. */
+const SOURCE_FAVICON = {
+    width: 16,
+    height: 16,
+    borderRadius: 9999,
+    display: 'block',
+};
+/**
+ * As wide as the row, and no wider — same as studio’s Add agent menu
+ * (`studio/ui/studio-screen.tsx` `ROW_WIDE` / `oneLine`).
+ */
+const SOURCE_TITLE_WIDE = { inlineSize: 0, minInlineSize: '100%' };
+/** One-line source title; what does not fit shows on hover. */
+function sourceTitle(title) {
+    return (_jsx(Text, { maxLines: 1, hasTruncateTooltip: "end", style: SOURCE_TITLE_WIDE, children: title }));
+}
+/** One chip; the rest open in a scrollable DropdownMenu with favicons. */
+function Sources({ citations }) {
     const t = useLabels();
-    const citations = citationsFromBlock(block);
     if (citations.length === 0)
         return null;
-    return (_jsx(HStack, { gap: 1, wrap: "wrap", "aria-label": t('@theorem.transcript.sources'), children: citations.map((citation, i) => (_jsx(Citation, { source: { title: citation.title, url: citation.href, src: citation.icon }, number: i + 1 }, citation.key))) }));
+    return (_jsx(OverflowList, { gap: 1, maxVisibleItems: 1, "aria-label": t('@theorem.transcript.sources'), overflowRenderer: (hidden) => {
+            const more = hidden.flatMap(({ index }) => {
+                const citation = citations[index];
+                return citation ? [citation] : [];
+            });
+            if (more.length === 0)
+                return null;
+            const favicon = more.find((citation) => citation.icon)?.icon;
+            const moreLabel = t('@theorem.transcript.sources_more', { count: more.length });
+            return (_jsx(DropdownMenu, { hasChevron: false, 
+                // why: menuWidth is a floor; a fixed width is what makes titles ellipsize.
+                style: { width: 280 }, placement: "below", alignment: "start", renderTrigger: (props) => (_jsx("button", { type: "button", ...props, style: SOURCES_MORE_TRIGGER, "aria-label": moreLabel, children: _jsx(Citation, { source: {
+                            title: moreLabel,
+                            ...(favicon ? { src: favicon } : {}),
+                        }, number: citations.length - more.length + 1 }) })), items: more.map((citation) => ({
+                    id: citation.key,
+                    label: sourceTitle(citation.title),
+                    ...(citation.icon
+                        ? { icon: _jsx("img", { src: citation.icon, alt: "", style: SOURCE_FAVICON }) }
+                        : {}),
+                    ...(citation.href ? { href: citation.href, target: '_blank' } : {}),
+                })) }));
+        }, children: citations.map((citation, i) => (_jsx(Citation, { source: { title: citation.title, url: citation.href, src: citation.icon }, number: i + 1 }, citation.key))) }));
 }
 /**
  * Streamed text (the reply, or the latest thought). Astryx reveals it while
@@ -330,13 +401,12 @@ function BodyBlock({ block, streaming }) {
         return _jsx(ToolCall, { tool: block.tool });
     return _jsx(ResultBlock, { block: block });
 }
-/** Non-streaming answer rows: errors, sources, structured output, and media. */
+/** Non-streaming answer rows: errors, structured output, and media. Citations coalesce in bodyRows. */
 function ResultBlock({ block }) {
     switch (block.kind) {
         case 'error':
-            return null;
         case 'citation':
-            return _jsx(Sources, { block: block });
+            return null;
         case 'structured':
             return _jsx(ShapedData, { value: block.value });
         case 'media':
@@ -345,21 +415,16 @@ function ResultBlock({ block }) {
             return null;
     }
 }
-// why: Astryx sets a call's name in the code font; labels are sentences, so the row takes the body
-// font and the detail restores the code font kept on the wrapper.
-const CODE_FONT_KEPT = {
-    display: 'contents',
-    '--theorem-font-code': 'var(--font-family-code)',
-};
+// why: Astryx draws call names in the code font; labels are sentences, so the
+// whole tool call (row and expanded detail) uses the body font instead.
 const CODE_FONT_AS_BODY = { '--font-family-code': 'var(--font-family-body)' };
-const CODE_FONT_RESTORED = { '--font-family-code': 'var(--theorem-font-code)' };
 function ToolCalls({ calls }) {
-    return (_jsx("div", { style: CODE_FONT_KEPT, children: _jsx(ChatToolCalls, { calls: calls, style: CODE_FONT_AS_BODY }) }));
+    return _jsx(ChatToolCalls, { calls: calls, style: CODE_FONT_AS_BODY });
 }
 /** A call's detail: what it ran with, then what came back. */
 function toolDetail(t, tool, result) {
     const input = tool.edited ? (_jsx(ShapedData, { value: tool.edited.to, title: t('@theorem.transcript.tool_input_edited') })) : (_jsx(ShapedData, { value: tool.arguments, title: t('@theorem.transcript.tool_input') }));
-    return (_jsxs(VStack, { gap: 2, style: CODE_FONT_RESTORED, children: [_jsx(Text, { type: "code", size: "sm", color: "secondary", children: tool.name }), input, result] }));
+    return (_jsxs(VStack, { gap: 2, children: [_jsx(Text, { size: "sm", color: "secondary", children: tool.name }), input, result] }));
 }
 /** How long a finished call ran, when both ends were seen. */
 function toolDuration(t, tool) {
@@ -493,6 +558,8 @@ function TurnStatus(props) {
 function BodyRowView({ row, streaming, imageOutput, }) {
     if (row.kind === 'block')
         return _jsx(BodyBlock, { block: row.block, streaming: streaming });
+    if (row.kind === 'sources')
+        return _jsx(Sources, { citations: row.citations });
     if (imageOutput)
         return _jsx(GeneratedGallery, { items: row.items, ratio: imageOutput.ratio });
     return _jsx(MediaGallery, { items: row.items });
@@ -508,11 +575,13 @@ function AssistantTurn(props) {
     const chrome = useChromeReveal(props.isNewest === true);
     const showUsage = useContext(ShowUsage);
     const elapsedMs = useTurnElapsed(props.streaming, props.startedAt, props.workedMs);
-    const { trace, gatedTools, body, hasTrace } = composeAssistantTurn(props.blocks);
+    const { trace, gatedTools, body, hasTrace } = composeAssistantTurn(props.blocks, props.bodyKindPlacement !== undefined
+        ? { bodyKindPlacement: props.bodyKindPlacement }
+        : undefined);
     const rows = bodyRows(t, body);
     const status = workStatusLabel(t, workStatus({ streaming: props.streaming, hasTrace, elapsedMs }));
     const copyText = assistantTurnCopyText(body.length > 0 ? body : props.blocks);
-    return (_jsx(ChatMessage, { sender: "assistant", name: props.handle, ...chrome.handlers, metadata: props.streaming ? undefined : (_jsx(MessageChrome, { sender: "assistant", at: props.at, copyText: copyText, error: props.error, stopped: props.stopped, usage: showUsage ? props.usage : undefined, revealed: chrome.revealed })), children: _jsxs(VStack, { gap: 3, width: "100%", children: [_jsx(TurnStatus, { status: status, trace: trace, hasTrace: hasTrace, streaming: props.streaming }), gatedTools.map((block) => (_jsx(GateCard, { block: block, handle: props.handle, handlers: props.handlers }, block.id))), keyedByContent(rows, (row) => (row.kind === 'gallery' ? 'gallery' : row.block.kind)).map(({ item: row, index: i, key }) => (_jsx(BodyRowView
+    return (_jsx(ChatMessage, { sender: "assistant", name: props.handle, ...chrome.handlers, metadata: props.streaming ? undefined : (_jsx(MessageChrome, { sender: "assistant", at: props.at, copyText: copyText, error: props.error, stopped: props.stopped, usage: showUsage ? props.usage : undefined, revealed: chrome.revealed })), children: _jsxs(VStack, { gap: 3, width: "100%", children: [_jsx(TurnStatus, { status: status, trace: trace, hasTrace: hasTrace, streaming: props.streaming }), gatedTools.map((block) => (_jsx(GateCard, { block: block, handle: props.handle, handlers: props.handlers }, block.id))), keyedByContent(rows, (row) => row.kind === 'gallery' || row.kind === 'sources' ? row.kind : row.block.kind).map(({ item: row, index: i, key }) => (_jsx(BodyRowView
                 // why: Not the block id: the committed turn re-mints ids, and a
                 // remount would cut the text reveal short.
                 , { row: row, streaming: props.streaming && i === rows.length - 1, imageOutput: props.imageOutput }, key))), _jsx(PendingImage, { imageOutput: props.imageOutput, streaming: props.streaming, rows: rows })] }) }));
@@ -543,7 +612,7 @@ function isBareFailure(group) {
 export function ChatTranscript(props) {
     return (_jsx(TheoremLabelsProvider, { children: _jsx(ShowUsage.Provider, { value: props.usage === true, children: _jsx(ChatTranscriptBody, { ...props }) }) }));
 }
-function ChatTranscriptBody({ blocks, handle, streaming = false, delivery, onToolDecision, answering = null, onAuthenticated, emptyState, dividers, imageOutput, labels, }) {
+function ChatTranscriptBody({ blocks, handle, streaming = false, delivery, onToolDecision, answering = null, onAuthenticated, emptyState, dividers, imageOutput, bodyKindPlacement, labels, }) {
     const groups = useMemo(() => groupTranscriptBlocks(blocks, dividers && new Set(Object.keys(dividers))), [blocks, dividers]);
     const timeOf = useFirstSeen(groups.map((group, index) => (group.kind === 'user' ? group.key : replyKey(groups, index))));
     const spans = useTurnSpans(streaming, groups.findLast((group) => group.kind === 'user')?.key);
@@ -556,7 +625,7 @@ function ChatTranscriptBody({ blocks, handle, streaming = false, delivery, onToo
         onToolDecision,
         onAuthenticated,
     };
-    const turn = { handle, handlers, imageOutput };
+    const turn = { handle, handlers, imageOutput, bodyKindPlacement };
     const lastUser = groups.findLastIndex((group) => group.kind === 'user');
     const userTurn = (group, index) => {
         const next = groups[index + 1];

package/ui/ConsoleFrame.d.ts

@@ -53,8 +53,8 @@ export type ConsoleFrameProps = {
     children: ReactNode;
 };
 /**
- * A console's page, for decisions and hosts alike: the trace's toggle in the
- * header, and one raised panel, flush with the host's, scrolling inside.
+ * A console's page, for decisions and hosts alike: the trace toggle floats over
+ * the content (same as chat), and one raised panel scrolls inside.
  */
 export declare function ConsoleFrame({ inspector, maxWidth, flush, columns, requestLabel, className, style, children, }: ConsoleFrameProps): import("react").JSX.Element;
 /** One card of a response with several: its request and result sit in it without cards of their own. */

package/ui/ConsoleFrame.js

@@ -41,12 +41,13 @@ function ConsoleSingle({ flush, wide, maxWidth, children, }) {
     return (_jsx(VStack, { height: "100%", paddingInlineStart: PANEL_EDGE, style: { ...(flush ? FLUSH_CARD : undefined), paddingInlineEnd: paneEdge(PANEL_EDGE) }, children: _jsx(Card, { variant: "transparent", height: "100%", padding: 0, style: flush ? { overflowY: 'auto' } : { ...RAISED, overflowY: 'auto' }, children: _jsx(Center, { axis: "horizontal", width: "100%", minHeight: "100%", children: _jsx(VStack, { width: "100%", maxWidth: wide ? undefined : maxWidth, gap: 3, padding: 4, children: children }) }) }) }));
 }
 /**
- * A console's page, for decisions and hosts alike: the trace's toggle in the
- * header, and one raised panel, flush with the host's, scrolling inside.
+ * A console's page, for decisions and hosts alike: the trace toggle floats over
+ * the content (same as chat), and one raised panel scrolls inside.
  */
 export function ConsoleFrame({ inspector, maxWidth, flush = false, columns = false, requestLabel, className, style, children, }) {
     const layoutRef = useRef(null);
-    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", className: className, style: style, header: inspector.toggle ? _jsx(SidePanelHeader, { children: inspector.toggle }) : undefined, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(VStack, { height: "100%", paddingBlockStart: PANEL_EDGE, children: _jsx(ConsoleBody, { layoutRef: layoutRef, flush: flush, columns: columns, maxWidth: maxWidth, requestLabel: requestLabel, children: children }) }) }) }) }));
+    const header = inspector.toggle ? (_jsx(SidePanelHeader, { floating: true, children: inspector.toggle })) : undefined;
+    return (_jsx(WithTrace, { inspector: inspector, children: _jsx(Layout, { ref: layoutRef, height: "fill", className: className, style: { position: 'relative', ...style }, header: header, content: _jsx(LayoutContent, { padding: 0, isScrollable: false, children: _jsx(ConsoleBody, { layoutRef: layoutRef, flush: flush, columns: columns, maxWidth: maxWidth, requestLabel: requestLabel, children: children }) }) }) }));
 }
 /** The console's panels: a request and response side by side when there is room, else one column. */
 function ConsoleBody({ layoutRef, flush, columns, maxWidth, requestLabel, children, }) {

package/ui/labels.d.ts

@@ -220,6 +220,11 @@ export declare const THEOREM_UI_CATALOG: {
         readonly defaultMessage: "Sources";
         readonly description: "The row of source chips (screen readers).";
     };
+    readonly '@theorem.transcript.sources_more': {
+        readonly defaultMessage: "{count, plural, one {+# other} other {+# others}}";
+        readonly description: "Overflow chip that opens the menu of remaining source citations.";
+        readonly params: readonly ["count"];
+    };
     readonly '@theorem.transcript.tool_input': {
         readonly defaultMessage: "Input";
         readonly description: "A tool call's arguments, in its detail.";

package/ui/labels.js

@@ -204,6 +204,11 @@ export const THEOREM_UI_CATALOG = {
         defaultMessage: 'Sources',
         description: 'The row of source chips (screen readers).',
     },
+    '@theorem.transcript.sources_more': {
+        defaultMessage: '{count, plural, one {+# other} other {+# others}}',
+        description: 'Overflow chip that opens the menu of remaining source citations.',
+        params: ['count'],
+    },
     '@theorem.transcript.tool_input': {
         defaultMessage: 'Input',
         description: "A tool call's arguments, in its detail.",