@theoremjs/react 0.3.4-next.620.g9fe1aff → 0.3.4-next.622.g75b9875

package/package.json

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