@theoremjs/react 0.3.4-next.735.g8d504c6 → 0.3.4-next.753.g176c472

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theoremjs/react",
-  "version": "0.3.4-next.735.g8d504c6",
+  "version": "0.3.4-next.753.g176c472",
   "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.735.g8d504c6",
-    "@theoremjs/web": "^0.3.4-next.735.g8d504c6"
+    "@theoremjs/agents": "^0.3.4-next.753.g176c472",
+    "@theoremjs/web": "^0.3.4-next.753.g176c472"
   },
   "peerDependenciesMeta": {
     "@astryxdesign/core": {

package/ui/ConsoleFrame.js

@@ -3,14 +3,16 @@ import { Button } from '@astryxdesign/core/Button';
 import { Card } from '@astryxdesign/core/Card';
 import { Center } from '@astryxdesign/core/Center';
 import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
 import { useLocale } from '@astryxdesign/core/i18n';
 import { Layout, LayoutContent } from '@astryxdesign/core/Layout';
 import { useResizable } from '@astryxdesign/core/Resizable';
 import { percent, pixel } from '@astryxdesign/core/Resizable/utils';
-import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
 import { Text } from '@astryxdesign/core/Text';
 import { TextArea } from '@astryxdesign/core/TextArea';
+import { ToggleButton } from '@astryxdesign/core/ToggleButton';
 import { VStack } from '@astryxdesign/core/VStack';
+import { IconCode, IconEye } from '@tabler/icons-react';
 import { Children, createContext, use, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
 import { useLabels } from "./labels-provider.js";
 import { PANEL_EDGE, PanelBody, PanelScroll, paneEdge, SidePanel, SidePanelHeader, } from "./SidePanel.js";
@@ -122,9 +124,9 @@ function runShortcut(run) {
 export function RequestCard({ title, onRun, children, ...heading }) {
     const t = useLabels();
     const framed = use(ConsoleChrome);
-    const body = (_jsxs(VStack, { gap: 3, padding: framed ? undefined : 4, onKeyDown: runShortcut(onRun), children: [_jsxs(HStack, { gap: 2, hAlign: "between", vAlign: "center", children: [_jsx(Text, { type: "supporting", color: "secondary", as: "h3", children: title }), heading.onView ? (_jsxs(SegmentedControl, { label: t('@theorem.decision.view'), size: "sm", value: heading.view, onChange: (next) => {
-                            heading.onView(next === 'json' ? 'json' : 'fields');
-                        }, children: [_jsx(SegmentedControlItem, { value: "fields", label: t('@theorem.decision.fields'), isDisabled: !heading.hasFields }), _jsx(SegmentedControlItem, { value: "json", label: t('@theorem.data.json') })] })) : (heading.actions)] }), children] }));
+    const body = (_jsxs(VStack, { gap: 3, padding: framed ? undefined : 4, onKeyDown: runShortcut(onRun), children: [_jsxs(HStack, { gap: 2, hAlign: "between", vAlign: "center", children: [_jsx(Text, { type: "supporting", color: "secondary", as: "h3", children: title }), heading.onView ? (_jsx(ToggleButton, { label: t('@theorem.data.json'), tooltip: t(heading.view === 'json' ? '@theorem.decision.fields' : '@theorem.data.json'), size: "sm", isIconOnly: true, isDisabled: !heading.hasFields, icon: _jsx(Icon, { icon: IconEye, size: "sm" }), pressedIcon: _jsx(Icon, { icon: IconCode, size: "sm" }), isPressed: heading.view === 'json', onPressedChange: (isJson) => {
+                            heading.onView(isJson ? 'json' : 'fields');
+                        } })) : (heading.actions)] }), children] }));
     if (!framed)
         return body;
     return (_jsx(Card, { variant: "muted", padding: 4, className: "theorem-console-card", style: CONSOLE_CARD, children: body }));

package/ui/LiveRunner.js

@@ -38,9 +38,9 @@ const WAVE_HEIGHT = 320;
 export function LiveRunner({ theme, mode, labels, ...props }) {
     return (_jsx(TheoremThemeProvider, { theme: theme, mode: mode, children: _jsx(TheoremLabelsProvider, { labels: labels, children: _jsx(LiveRunnerBody, { ...props }) }) }));
 }
-function LiveRunnerBody({ iface, connection, trace, slots, stated, context, pageTools, }) {
+function LiveRunnerBody({ iface, connection, trace, ...options }) {
     const t = useLabels();
-    const model = useLiveRunnerModel(iface, connection, { slots, stated, context, pageTools });
+    const model = useLiveRunnerModel(iface, connection, options);
     // why: Both panels size against the whole live layout, so a third means the same for each.
     const layoutRef = useRef(null);
     const inspector = useTraceInspector(iface, model.traces, trace);

package/ui/ShapedData.js

@@ -2,18 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CodeBlock } from '@astryxdesign/core/CodeBlock';
 import { Collapsible, CollapsibleGroup } from '@astryxdesign/core/Collapsible';
 import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
 import { useLocale } from '@astryxdesign/core/i18n';
 import { useLightbox } from '@astryxdesign/core/Lightbox';
 import { Link } from '@astryxdesign/core/Link';
 import { List, ListItem } from '@astryxdesign/core/List';
 import { Markdown } from '@astryxdesign/core/Markdown';
 import { MetadataList, MetadataListItem } from '@astryxdesign/core/MetadataList';
-import { SegmentedControl, SegmentedControlItem } from '@astryxdesign/core/SegmentedControl';
 import { Table } from '@astryxdesign/core/Table';
 import { Text } from '@astryxdesign/core/Text';
 import { Thumbnail } from '@astryxdesign/core/Thumbnail';
+import { ToggleButton } from '@astryxdesign/core/ToggleButton';
 import { Token } from '@astryxdesign/core/Token';
 import { VStack } from '@astryxdesign/core/VStack';
+import { IconCode, IconEye } from '@tabler/icons-react';
 import { fieldLabel, fieldReading, isPlain, isProse, isRow, json, layoutChars, MAX_ROWS, plainReading, rowHeading, shapeOf, splitFields, unpacked, withUnit, } from '@theoremjs/web/client';
 import { Component, useMemo, useState } from 'react';
 import { Arrive, useArrive } from "./arrive.js";
@@ -235,7 +237,7 @@ export function ShapedData({ value: raw, title, lead, ledKeys = [] }) {
         }).format(LARGE_JSON_CHARS / 1000);
         return (_jsxs(VStack, { gap: 2, children: [_jsx(Text, { type: "supporting", color: "secondary", children: title }), _jsx(Text, { type: "supporting", color: "secondary", children: t('@theorem.data.large', { size }) }), _jsx(Json, { text: text })] }));
     }
-    return (_jsxs(VStack, { gap: 2, children: [_jsxs(HStack, { gap: 2, vAlign: "center", hAlign: "between", children: [_jsx(Text, { type: "supporting", color: "secondary", children: title }), structured && (_jsxs(SegmentedControl, { label: t('@theorem.data.view'), size: "sm", value: view, onChange: (next) => {
-                            setView(next === 'json' ? 'json' : 'data');
-                        }, children: [_jsx(SegmentedControlItem, { value: "data", label: t('@theorem.data.shaped') }), _jsx(SegmentedControlItem, { value: "json", label: t('@theorem.data.json') })] }))] }), view === 'json' && structured ? (_jsx(Json, { text: text })) : (_jsx(ShapeBoundary, { fallback: _jsx(Json, { text: text }), onFallback: () => setView('json'), children: _jsxs(VStack, { gap: 3, children: [lead, rest === undefined ? null : _jsx(Node, { value: rest, depth: 0 })] }) }))] }));
+    return (_jsxs(VStack, { gap: 2, children: [_jsxs(HStack, { gap: 2, vAlign: "center", hAlign: "between", children: [_jsx(Text, { type: "supporting", color: "secondary", children: title }), structured && (_jsx(ToggleButton, { label: t('@theorem.data.json'), tooltip: t(view === 'json' ? '@theorem.data.shaped' : '@theorem.data.json'), size: "sm", isIconOnly: true, icon: _jsx(Icon, { icon: IconEye, size: "sm" }), pressedIcon: _jsx(Icon, { icon: IconCode, size: "sm" }), isPressed: view === 'json', onPressedChange: (isJson) => {
+                            setView(isJson ? 'json' : 'data');
+                        } }))] }), view === 'json' && structured ? (_jsx(Json, { text: text })) : (_jsx(ShapeBoundary, { fallback: _jsx(Json, { text: text }), onFallback: () => setView('json'), children: _jsxs(VStack, { gap: 3, children: [lead, rest === undefined ? null : _jsx(Node, { value: rest, depth: 0 })] }) }))] }));
 }

package/ui/labels.d.ts

@@ -250,10 +250,6 @@ export declare const THEOREM_UI_CATALOG: {
         readonly description: "Tokens a reply used, under it, or an agent tool's called agent used, on its call row.";
         readonly params: readonly ["count"];
     };
-    readonly '@theorem.data.view': {
-        readonly defaultMessage: "View as";
-        readonly description: "Switch between tool data drawn by its shape and its JSON.";
-    };
     readonly '@theorem.data.shaped': {
         readonly defaultMessage: "Data";
         readonly description: "Tool data drawn as fields, sections, and tables.";
@@ -467,10 +463,6 @@ export declare const THEOREM_UI_CATALOG: {
         readonly description: "The state's size against the profile's limit, under the field.";
         readonly params: readonly ["size", "limit"];
     };
-    readonly '@theorem.decision.view': {
-        readonly defaultMessage: "Edit as";
-        readonly description: "Switch between the state as fields and as JSON.";
-    };
     readonly '@theorem.decision.fields': {
         readonly defaultMessage: "Fields";
         readonly description: "The state edited field by field.";

package/ui/labels.js

@@ -234,10 +234,6 @@ export const THEOREM_UI_CATALOG = {
         description: "Tokens a reply used, under it, or an agent tool's called agent used, on its call row.",
         params: ['count'],
     },
-    '@theorem.data.view': {
-        defaultMessage: 'View as',
-        description: 'Switch between tool data drawn by its shape and its JSON.',
-    },
     '@theorem.data.shaped': {
         defaultMessage: 'Data',
         description: 'Tool data drawn as fields, sections, and tables.',
@@ -430,10 +426,6 @@ export const THEOREM_UI_CATALOG = {
         description: "The state's size against the profile's limit, under the field.",
         params: ['size', 'limit'],
     },
-    '@theorem.decision.view': {
-        defaultMessage: 'Edit as',
-        description: 'Switch between the state as fields and as JSON.',
-    },
     '@theorem.decision.fields': {
         defaultMessage: 'Fields',
         description: 'The state edited field by field.',

package/ui/transcript-copy-text.js

@@ -34,6 +34,7 @@ export function transcriptBlockCopyText(t, block) {
         case 'error':
             return block.message;
         case 'guardrail':
+        case 'late-results':
         case 'turn-done':
             return '';
     }