@theoremjs/react 0.3.4-next.618.g0612421 → 0.3.4-next.622.g75b9875

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.618.g0612421",
+  "version": "0.3.4-next.622.g75b9875",
   "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.618.g0612421",
-    "@theoremjs/web": "^0.3.4-next.618.g0612421"
+    "@theoremjs/agents": "^0.3.4-next.622.g75b9875",
+    "@theoremjs/web": "^0.3.4-next.622.g75b9875"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/SidePanel.d.ts

@@ -22,12 +22,13 @@ export type SidePanelLabels = {
     resize: string;
 };
 /** Shows or hides one side panel (`panelId` from useSidePanel). */
-export declare function SidePanelToggle({ labels, icon, panelId, open, onToggle, }: {
+export declare function SidePanelToggle({ labels, icon, panelId, open, onToggle, size, }: {
     labels: SidePanelLabels;
     icon: ReactNode;
     panelId: string;
     open: boolean;
     onToggle: () => void;
+    size?: 'sm';
 }): import("react").JSX.Element;
 export type SidePanelProps = {
     id?: string;

package/ui/SidePanel.js

@@ -45,9 +45,9 @@ export function SidePanelHeader({ children, floating = false, }) {
     return (_jsx(LayoutHeader, { hasDivider: false, children: _jsx(HStack, { hAlign: "end", gap: 1, children: children }) }));
 }
 /** Shows or hides one side panel (`panelId` from useSidePanel). */
-export function SidePanelToggle({ labels, icon, panelId, open, onToggle, }) {
+export function SidePanelToggle({ labels, icon, panelId, open, onToggle, size, }) {
     const action = open ? labels.hide : labels.show;
-    return (_jsx(IconButton, { label: action, tooltip: action, variant: open ? 'secondary' : 'ghost', "aria-expanded": open, "aria-controls": panelId, icon: icon, onClick: onToggle }));
+    return (_jsx(IconButton, { label: action, size: size, tooltip: action, variant: open ? 'secondary' : 'ghost', "aria-expanded": open, "aria-controls": panelId, icon: icon, onClick: onToggle }));
 }
 /** Page corners like the host's raised panels, no border or shadow; the card fill, so surface-filled cards read on it. */
 export const RAISED = {

package/ui/TraceInspector.d.ts

@@ -2,9 +2,11 @@ import type { TraceRecord } from '@theoremjs/agents';
 import type { TraceFeed } from '@theoremjs/web/client';
 import { type ReactNode } from 'react';
 /** The inspector over the records a feed has delivered; the panel loads this module when it first opens. */
-export declare function TraceFeedBody({ traces, isWide, }: {
+export declare function TraceFeedBody({ traces, isWide, end, }: {
     traces: TraceFeed | undefined;
     isWide: boolean;
+    /** Drawn after the turn arrows: the panel's toggle. */
+    end?: ReactNode;
 }): import("react").JSX.Element;
 /**
  * Only what the records say of guardrails: how long the checks took, how many

package/ui/TraceInspector.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Badge } from '@astryxdesign/core/Badge';
 import { EmptyState } from '@astryxdesign/core/EmptyState';
 import { HStack } from '@astryxdesign/core/HStack';
@@ -143,9 +143,9 @@ function TurnOverview({ turns, index, onPick, onBack, selectedId, onSelect, end,
     const tools = traceSpans([root]).filter((node) => node.meta.type === 'tool').length;
     return (_jsxs(VStack, { gap: 5, padding: 4, children: [_jsx(TurnPicker, { turns: turns, index: index, onChange: onPick, onBack: onBack, end: end }), _jsxs(VStack, { gap: 3, children: [_jsx(TurnStats, { totals: turn.totals, tools: tools, latency: latency }), _jsx(TraceCharts, { root: root, split: turn.split, onSelect: onSelect })] }), _jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.timeline') }), _jsx(PowerSearch, { config: config, filters: filters, onChange: setFilters, label: t('@theorem.panel.trace.search'), isLabelHidden: true, placeholder: t('@theorem.panel.trace.search.placeholder'), resultCount: matches?.size, size: "sm" }), _jsx(TraceWaterfall, { root: root, selectedId: selectedId, matches: matches, onSelect: onSelect }, root.id)] }), story.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.story') }), _jsx(TraceStory, { steps: story, selectedId: selectedId, matches: matches, onSelect: onSelect })] })) : null, guardrails.length > 0 ? (_jsxs(VStack, { gap: 2, children: [_jsx(SectionTitle, { title: t('@theorem.panel.trace.guardrails') }), _jsx(TraceGuardrails, { checks: guardrails, onSelect: onSelect })] })) : null] }));
 }
-function EmptyTrace() {
+function EmptyTrace({ end }) {
     const { t } = useTraceFormat();
-    return (_jsx(VStack, { height: "100%", vAlign: "center", padding: 4, children: _jsx(EmptyState, { icon: _jsx(Icon, { icon: IconActivity, size: "lg", color: "secondary" }), title: t('@theorem.panel.trace.empty.title'), description: t('@theorem.panel.trace.empty.description'), isCompact: true }) }));
+    return (_jsxs(VStack, { height: "100%", vAlign: "center", padding: 4, children: [end ? _jsx(HStack, { justify: "end", children: end }) : null, _jsx(EmptyState, { icon: _jsx(Icon, { icon: IconActivity, size: "lg", color: "secondary" }), title: t('@theorem.panel.trace.empty.title'), description: t('@theorem.panel.trace.empty.description'), isCompact: true })] }));
 }
 /** The open span of the open turn; opening another turn closes it. */
 function useOpenSpan(turns) {
@@ -207,19 +207,19 @@ function TraceDownload({ records }) {
  * The panel's content. Narrow, the turn fills it and a span opens in its
  * place; wide, an open span sits beside the turn.
  */
-function TraceInspectorBody({ records, isWide, }) {
+function TraceInspectorBody({ records, isWide, end, }) {
     const tree = useMemo(() => traceTree(records), [records]);
     const turns = useMemo(() => traceTurns(tree), [tree]);
     const { t } = useTraceFormat();
     const { index, root, open, select, close, pick } = useOpenSpan(turns);
     if (turns.length === 0)
-        return _jsx(EmptyTrace, {});
-    const overview = (_jsx(Overview, { turns: turns, index: index, pick: pick, selectedId: open?.id, select: select, end: _jsx(TraceDownload, { records: records }) }));
+        return _jsx(EmptyTrace, { end: end });
+    const overview = (_jsx(Overview, { turns: turns, index: index, pick: pick, selectedId: open?.id, select: select, end: _jsxs(_Fragment, { children: [_jsx(TraceDownload, { records: records }), end] }) }));
     return (_jsx(PaneLayout, { isWide: isWide, label: t('@theorem.panel.trace.name'), detailLabel: open?.meta.label ?? '', lead: _jsx(TracePatterns, {}), overview: overview, detail: open && (_jsx(SpanPane, { open: open, turnStartMs: root?.startMs ?? 0, isWide: isWide, onBack: close, onOpen: select })) }));
 }
 /** The inspector over the records a feed has delivered; the panel loads this module when it first opens. */
-export function TraceFeedBody({ traces, isWide, }) {
-    return _jsx(TraceInspectorBody, { records: useTraceRecords(traces), isWide: isWide });
+export function TraceFeedBody({ traces, isWide, end, }) {
+    return _jsx(TraceInspectorBody, { records: useTraceRecords(traces), isWide: isWide, end: end });
 }
 /**
  * Only what the records say of guardrails: how long the checks took, how many

package/ui/TraceInspectorPanel.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '@astryxdesign/core/Icon';
 import { IconActivity } from '@tabler/icons-react';
 import { cloneElement, createContext, isValidElement, lazy, Suspense, use, useCallback, useId, useRef, useState, } from 'react';
@@ -13,8 +13,8 @@ const TracePlacementContext = createContext('replace');
 export function TracePlacement({ value, children, }) {
     return _jsx(TracePlacementContext, { value: value, children: children });
 }
-function TraceView({ id, header, traces, }) {
-    return (_jsx(RaisedPane, { id: id, header: header, children: (isWide) => (_jsx(Suspense, { fallback: null, children: _jsx(TraceFeedBody, { traces: traces, isWide: isWide }) })) }));
+function TraceView({ id, toggle, traces, }) {
+    return (_jsx(RaisedPane, { id: id, children: (isWide) => (_jsx(Suspense, { fallback: _jsx(SidePanelHeader, { floating: true, children: toggle }), children: _jsx(TraceFeedBody, { traces: traces, isWide: isWide, end: toggle }) })) }));
 }
 /**
  * The trace inspector, offered when the profile records traces. By default the
@@ -39,21 +39,21 @@ export function useTraceInspector(iface, traces, open) {
     if (iface.observability?.record !== true)
         return { toggle: null, view: null, labels, offered: false };
     const isOpen = open ?? own;
-    const toggle = open === undefined ? (_jsx(SidePanelToggle, { labels: labels, icon: _jsx(Icon, { icon: IconActivity }), panelId: id, open: isOpen, onToggle: () => setOwn((value) => !value) })) : null;
-    const view = isOpen ? openTrace(placement === 'panel', id, traces, toggle) : null;
+    const toggleOf = (size) => open === undefined ? (_jsx(SidePanelToggle, { labels: labels, icon: _jsx(Icon, { icon: IconActivity }), panelId: id, open: isOpen, size: size, onToggle: () => setOwn((value) => !value) })) : null;
+    const toggle = toggleOf();
+    const view = isOpen ? openTrace(placement === 'panel', id, traces, toggleOf('sm')) : null;
     return { toggle, view, labels, offered: true };
 }
-/** The open trace: filling the host's docked panel, or as its own panel; the toggle on top. */
+/** The open trace: filling the host's docked panel, or as its own panel; the toggle sits in its top row. */
 function openTrace(docked, id, traces, toggle) {
-    const header = toggle ? _jsx(SidePanelHeader, { floating: true, children: toggle }) : null;
     if (docked)
-        return _jsx(TraceFill, { id: id, header: header, traces: traces });
-    return _jsx(TraceView, { id: id, header: header, traces: traces });
+        return _jsx(TraceFill, { id: id, toggle: toggle, traces: traces });
+    return _jsx(TraceView, { id: id, toggle: toggle, traces: traces });
 }
 /** The trace body, filling the docked panel. The panel supplies the raised card. */
-function TraceFill({ id, header, traces, }) {
+function TraceFill({ id, toggle, traces, }) {
     const { ref, width } = useWidth();
-    return (_jsxs("div", { id: id, ref: ref, style: { height: '100%', position: 'relative' }, children: [header, _jsx(Suspense, { fallback: null, children: _jsx(TraceFeedBody, { traces: traces, isWide: isSidePanelWide(width) }) })] }));
+    return (_jsx("div", { id: id, ref: ref, style: { height: '100%', position: 'relative' }, children: _jsx(Suspense, { fallback: _jsx(SidePanelHeader, { floating: true, children: toggle }), children: _jsx(TraceFeedBody, { traces: traces, isWide: isSidePanelWide(width), end: toggle }) }) }));
 }
 /** The surface, with the trace docked at its inline end. A host-driven trace stays in place. */
 function TraceDock({ inspector, children }) {

package/ui/TraceSpanDetail.js

@@ -137,13 +137,49 @@ function ProsePanel({ attribute, text }) {
         return null;
     return (_jsx(PanePanel, { ...label(attribute), children: _jsx(Prose, { text: text }) }));
 }
+/** Content folded under a title, with its count when it is a list. */
+function Folded({ title, count, children, }) {
+    return (_jsx(Collapsible, { defaultIsOpen: false, trigger: _jsx(Text, { weight: "medium", children: count === undefined ? title : `${title} · ${String(count)}` }), children: _jsx(Card, { padding: 3, variant: "muted", style: { background: 'var(--color-background-surface)' }, children: children }) }));
+}
+/** The system prompt a model call was sent, part by part. */
+function SystemInstructions({ node }) {
+    const parts = inlineContent(node.record, node.span.attributes['gen_ai.system_instructions']);
+    const texts = (Array.isArray(parts) ? parts.filter(isObject) : []).flatMap((part) => typeof part.content === 'string' && part.content ? [part.content] : []);
+    if (texts.length === 0)
+        return null;
+    return (_jsx(Folded, { title: label('gen_ai.system_instructions').title, children: _jsx(VStack, { gap: 3, children: keyedByContent(texts, (text) => text).map(({ item: text, key }) => (_jsx(Prose, { text: text }, key))) }) }));
+}
+/** The tools a model call was offered: each one's name, what it does, and what it takes. */
+function ToolDefinitions({ node }) {
+    const value = storedValue(node, 'gen_ai.tool.definitions');
+    const tools = Array.isArray(value) ? value.filter(isObject) : [];
+    if (tools.length === 0)
+        return null;
+    return (_jsx(Folded, { title: label('gen_ai.tool.definitions').title, count: tools.length, children: _jsx(VStack, { gap: 3, children: keyedByContent(tools, (tool) => String(tool.name)).map(({ item: tool, key }) => (_jsxs(VStack, { gap: 1, children: [_jsx(Text, { weight: "medium", children: String(tool.name ?? '') }), typeof tool.description === 'string' ? (_jsx(Text, { color: "secondary", children: tool.description })) : null, tool.parameters === undefined ? null : _jsx(ShapedData, { value: tool.parameters })] }, key))) }) }));
+}
+/** What a model call was given besides its messages: the system prompt and the tools. */
+function CallContext({ node }) {
+    return (_jsxs(_Fragment, { children: [_jsx(SystemInstructions, { node: node }), _jsx(ToolDefinitions, { node: node })] }));
+}
+/** A turn's first model call: the one whose system prompt and tools the turn opened with. */
+function firstCall(node) {
+    for (const child of node.children) {
+        if ('gen_ai.system_instructions' in child.span.attributes)
+            return child;
+        const found = firstCall(child);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
 function TurnIO({ node }) {
-    return (_jsxs(_Fragment, { children: [_jsx(ProsePanel, { attribute: "gen_ai.input.messages", text: messageText(node, 'gen_ai.input.messages', 'user') }), _jsx(ProsePanel, { attribute: "gen_ai.output.messages", text: messageText(node, 'gen_ai.output.messages', 'assistant') })] }));
+    const call = firstCall(node);
+    return (_jsxs(_Fragment, { children: [call ? _jsx(CallContext, { node: call }) : null, _jsx(ProsePanel, { attribute: "gen_ai.input.messages", text: messageText(node, 'gen_ai.input.messages', 'user') }), _jsx(ProsePanel, { attribute: "gen_ai.output.messages", text: messageText(node, 'gen_ai.output.messages', 'assistant') })] }));
 }
 function CallIO({ node }) {
     const input = messagesOf(node, 'gen_ai.input.messages');
     const output = messagesOf(node, 'gen_ai.output.messages');
-    return (_jsxs(_Fragment, { children: [output.length > 0 ? (_jsx(PanePanel, { ...label('gen_ai.output.messages'), children: _jsx(MessageList, { messages: output }) })) : null, input.length > 0 ? (_jsx(Collapsible, { defaultIsOpen: false, trigger: _jsx(Text, { weight: "medium", children: `${label('gen_ai.input.messages').title} · ${input.length}` }), children: _jsx(Card, { padding: 3, variant: "muted", style: { background: 'var(--color-background-surface)' }, children: _jsx(MessageList, { messages: input }) }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [output.length > 0 ? (_jsx(PanePanel, { ...label('gen_ai.output.messages'), children: _jsx(MessageList, { messages: output }) })) : null, _jsx(CallContext, { node: node }), input.length > 0 ? (_jsx(Folded, { title: label('gen_ai.input.messages').title, count: input.length, children: _jsx(MessageList, { messages: input }) })) : null] }));
 }
 function ToolIO({ node }) {
     const { attributes } = node.span;