@theoremjs/react 0.3.4-next.618.g0612421 → 0.3.4-next.620.g9fe1aff

package/package.json

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

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;