@theoremjs/react 0.0.0-stage → 0.3.0

package/ui/TraceWaterfall.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@astryxdesign/core/Button';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { Text } from '@astryxdesign/core/Text';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconZoomOut } from '@tabler/icons-react';
+import { useMemo, useRef, useState } from 'react';
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, ReferenceArea, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { traceActivity, traceActor, traceBars, traceOutcome } from "../client/trace-story.js";
+import { ChartFrame, ChartTip, FIRST_WIDTH_PX } from "./TraceOverview.js";
+import { TRACE_HUE } from "./trace-palette.js";
+import { ACTOR_FILL, TRACE_RADIUS, traceFill } from "./trace-patterns.js";
+import { useTraceFormat } from "./TraceValues.js";
+/** Slices in the activity strip. */
+const BUCKETS = 120;
+/** Height of one span's row, in pixels. */
+const ROW_PX = 22;
+/** Height of the time axis under the rows. */
+const AXIS_PX = 24;
+/** Height of the activity strip. */
+const STRIP_PX = 36;
+/** Room right of the plot, so the last tick's label fits. */
+const PLOT_RIGHT_PX = 4;
+/** Width of the name column, in pixels. */
+const NAME_PX = 132;
+/** Indent per level of nesting in the name column. */
+const INDENT_PX = 8;
+function barHatch(node) {
+    return ACTOR_FILL[traceActor(node)];
+}
+function BarTip({ active, payload }) {
+    const format = useTraceFormat();
+    const row = payload?.[0]?.payload;
+    if (!active || !row)
+        return null;
+    const { node, from } = row.bar;
+    const outcome = traceOutcome(node);
+    const cost = node.span.attributes['theorem.usage.cost_usd'];
+    return (_jsx(ChartTip, { children: _jsxs(VStack, { gap: 0, children: [_jsx(Text, { weight: "medium", children: row.name }), _jsx(Text, { type: "supporting", color: "secondary", children: node.meta.label }), _jsx(Text, { type: "supporting", hasTabularNumbers: true, children: [
+                        format.duration(node.durationMs),
+                        format.t('@theorem.panel.trace.offset', { duration: format.duration(from) }),
+                        ...(typeof cost === 'number' ? [format.usd(cost)] : []),
+                    ].join(format.t('@theorem.panel.trace.separator')) }), outcome ? (_jsx(Text, { type: "supporting", children: _jsx("span", { style: { color: outcome.tone === 'error' ? TRACE_HUE.oxblood : 'var(--color-text-secondary)' }, children: outcome.label }) })) : null] }) }));
+}
+/** A row's name, from the chart's left edge, set in by its depth and cut to the column. */
+function NameTick({ y: rawY, payload, rows, }) {
+    const row = typeof payload?.value === 'string' ? rows.get(payload.value) : undefined;
+    const y = Number(rawY);
+    if (!row || Number.isNaN(y))
+        return null;
+    const indent = Math.min(row.bar.depth, 4) * INDENT_PX;
+    const room = Math.floor((NAME_PX - indent - 10) / 6.2);
+    const name = row.name.length > room ? `${row.name.slice(0, Math.max(1, room - 1))}…` : row.name;
+    return (_jsxs("text", { x: indent, y: y, dy: "0.35em", fontSize: 11, fill: row.bar.node.span.status.code === 'ERROR' ? TRACE_HUE.oxblood : 'var(--color-text-secondary)', children: [_jsx("title", { children: row.name }), name] }));
+}
+/** How busy the model and tools were over the turn; a drag across it picks the window to zoom into. */
+function ActivityStrip({ root, zoom, onZoom }) {
+    const activity = useMemo(() => traceActivity(root, BUCKETS), [root]);
+    const total = Math.max(root.durationMs, 1);
+    const [drag, setDrag] = useState(null);
+    // Pointer events can outrun a render; the ref always holds the drag so far.
+    const dragRef = useRef(null);
+    const moveDrag = (next) => {
+        dragRef.current = next;
+        setDrag(next);
+    };
+    /** The time under a pointer on the strip, in ms from the turn's start. */
+    const timeAt = (event) => {
+        const box = event.currentTarget.getBoundingClientRect();
+        const share = (event.clientX - box.left - NAME_PX) / Math.max(box.width - NAME_PX - PLOT_RIGHT_PX, 1);
+        return Math.min(Math.max(share, 0), 1) * total;
+    };
+    const endDrag = () => {
+        const done = dragRef.current;
+        if (done) {
+            const from = Math.min(done.from, done.to);
+            const to = Math.max(done.from, done.to);
+            // A click, not a drag: leave the zoom as it was.
+            if (to - from >= total / BUCKETS)
+                onZoom({ root: root.id, from, to });
+        }
+        moveDrag(null);
+    };
+    const shown = drag ?? zoom;
+    return (_jsx("div", { style: { cursor: 'col-resize', userSelect: 'none', touchAction: 'none' }, onPointerDown: (event) => {
+            event.currentTarget.setPointerCapture(event.pointerId);
+            const value = timeAt(event);
+            moveDrag({ from: value, to: value });
+        }, onPointerMove: (event) => {
+            const current = dragRef.current;
+            if (current)
+                moveDrag({ from: current.from, to: timeAt(event) });
+        }, onPointerUp: endDrag, onPointerCancel: () => moveDrag(null), onMouseDown: (event) => event.preventDefault(), children: _jsx(ResponsiveContainer, { width: "100%", height: STRIP_PX, initialDimension: { width: FIRST_WIDTH_PX, height: STRIP_PX }, children: _jsxs(AreaChart, { data: activity, margin: { top: 2, right: PLOT_RIGHT_PX, bottom: 0, left: NAME_PX }, accessibilityLayer: false, children: [_jsx(XAxis, { dataKey: "at", type: "number", domain: [0, total], hide: true }), _jsx(YAxis, { hide: true, domain: [0, 2] }), _jsx(Area, { type: "monotone", dataKey: "model", stackId: "busy", activeDot: false, stroke: "none", fill: traceFill('clear'), fillOpacity: 1, isAnimationActive: false }), _jsx(Area, { type: "monotone", dataKey: "tools", stackId: "busy", activeDot: false, stroke: "none", fill: traceFill('hatch'), fillOpacity: 1, isAnimationActive: false }), shown ? (_jsx(ReferenceArea, { x1: shown.from, x2: shown.to, fill: "var(--color-text-primary)", fillOpacity: drag ? 0.12 : 0.08, stroke: "var(--color-border-emphasized)" })) : null] }) }) }));
+}
+/** A bar's opacity: faded when the search passed it over, the turn itself half-strength, and the rest dimmed around a selection. */
+function barOpacity(row, selectedId, matches) {
+    if (matches && !matches.has(row.id))
+        return 0.25;
+    if (row.bar.depth === 0)
+        return 0.45;
+    return !selectedId || row.id === selectedId ? 1 : 0.5;
+}
+/** One bar per span over the time window, named on the left. */
+function SpanBars({ root, domain, selectedId, matches, onSelect, }) {
+    const format = useTraceFormat();
+    const rows = useMemo(() => traceBars(root).map((bar) => ({
+        id: bar.node.id,
+        bar,
+        range: [bar.from, bar.to],
+        name: bar.node.meta.subject ?? bar.node.meta.label,
+    })), [root]);
+    const byId = useMemo(() => new Map(rows.map((row) => [row.id, row])), [rows]);
+    const height = rows.length * ROW_PX + AXIS_PX;
+    return (_jsx(ChartFrame, { children: _jsx(ResponsiveContainer, { width: "100%", height: height, initialDimension: { width: FIRST_WIDTH_PX, height }, children: _jsxs(BarChart, { data: rows, layout: "vertical", accessibilityLayer: false, margin: { top: 0, right: PLOT_RIGHT_PX, bottom: 0, left: 0 }, barCategoryGap: 4, onClick: (state) => {
+                    const row = rows[Number(state?.activeIndex)];
+                    if (row)
+                        onSelect(row.bar.node);
+                }, style: { cursor: 'pointer' }, children: [_jsx(CartesianGrid, { horizontal: false, stroke: "var(--color-border)", strokeDasharray: "2 4" }), _jsx(XAxis, { type: "number", domain: domain, allowDataOverflow: true, tickFormatter: (value) => format.duration(value), tick: { fill: 'var(--color-text-secondary)', fontSize: 11 }, axisLine: { stroke: 'var(--color-border)' }, tickLine: false, height: AXIS_PX, tickCount: 5 }), _jsx(YAxis, { type: "category", dataKey: "id", width: NAME_PX, axisLine: false, tickLine: false, interval: 0, tick: (props) => _jsx(NameTick, { ...props, rows: byId }) }), _jsx(Tooltip, { content: (props) => _jsx(BarTip, { ...props }), cursor: { fill: 'var(--color-overlay-hover)' }, isAnimationActive: false }), _jsx(Bar, { dataKey: "range", minPointSize: 2, radius: TRACE_RADIUS, isAnimationActive: false, style: { cursor: 'pointer' }, children: rows.map((row) => (_jsx(Cell, { fill: traceFill(barHatch(row.bar.node)), opacity: barOpacity(row, selectedId, matches) }, row.id))) })] }) }) }));
+}
+/**
+ * Every span of the turn on one time axis, nested by depth and coloured by
+ * who acted. Above it, how busy the model and tools were over the turn; drag
+ * across that strip to zoom the rows into the window, as in a performance
+ * profile. A bar opens its span.
+ */
+export function TraceWaterfall({ root, selectedId, matches, onSelect, }) {
+    const { t } = useTraceFormat();
+    const [picked, setPicked] = useState(null);
+    const zoom = picked?.root === root.id ? picked : null;
+    return (_jsxs(VStack, { gap: 2, children: [_jsxs(HStack, { gap: 2, align: "center", justify: "between", children: [_jsx(Text, { type: "supporting", color: "secondary", children: t('@theorem.panel.trace.timeline.zoom') }), zoom ? (_jsx(Button, { label: t('@theorem.panel.trace.timeline.reset'), variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconZoomOut }), onClick: () => setPicked(null) })) : null] }), _jsx(ActivityStrip, { root: root, zoom: zoom, onZoom: setPicked }), _jsx(SpanBars, { root: root, domain: zoom ? [zoom.from, zoom.to] : [0, Math.max(root.durationMs, 1)], selectedId: selectedId, matches: matches, onSelect: onSelect })] }));
+}

package/ui/VoiceNote.d.ts

@@ -0,0 +1,12 @@
+export type VoiceNoteProps = {
+    src: string;
+    mimeType?: string;
+    label?: string;
+    /** Composer only: removes the staged note. */
+    onRemove?: () => void;
+};
+/**
+ * Voice note as an Astryx ClickableCard holding the ink waveform (the one live
+ * uses): click to play or pause; the bars move while it plays.
+ */
+export declare function VoiceNote({ src, mimeType, label, onRemove }: VoiceNoteProps): import("react").JSX.Element;

package/ui/VoiceNote.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClickableCard } from '@astryxdesign/core/ClickableCard';
+import { HStack } from '@astryxdesign/core/HStack';
+import { Icon } from '@astryxdesign/core/Icon';
+import { IconButton } from '@astryxdesign/core/IconButton';
+import { VStack } from '@astryxdesign/core/VStack';
+import { IconX } from '@tabler/icons-react';
+import { voiceFormatFromMime } from "../client/voice-label.js";
+import { voiceNoteName } from "./labels.js";
+import { useLabels } from "./labels-provider.js";
+import { InkWaveform } from "../components/InkWaveform.js";
+import { useVoicePlayback } from "../components/use-voice-playback.js";
+/** Astryx Thumbnail's height, so voice notes sit level with image attachments. */
+const VOICE_NOTE_HEIGHT = 64;
+const VOICE_NOTE_WIDTH = 160;
+/**
+ * Voice note as an Astryx ClickableCard holding the ink waveform (the one live
+ * uses): click to play or pause; the bars move while it plays.
+ */
+export function VoiceNote({ src, mimeType = 'audio/webm', label, onRemove }) {
+    const t = useLabels();
+    const { playing, outputLevel, toggle, audioProps } = useVoicePlayback();
+    const name = label ?? voiceNoteName(t, voiceFormatFromMime(mimeType));
+    const remove = t('@theorem.voice_note.remove', { name });
+    return (_jsxs(HStack, { gap: 1, vAlign: "center", children: [_jsx(ClickableCard, { label: t(playing ? '@theorem.voice_note.pause' : '@theorem.voice_note.play', { name }), onClick: () => {
+                    void toggle();
+                }, padding: 0, width: VOICE_NOTE_WIDTH, height: VOICE_NOTE_HEIGHT, children: _jsx(VStack, { width: "100%", height: "100%", paddingInline: 2, paddingBlockStart: 2, style: { color: 'var(--color-icon-primary)' }, "aria-hidden": "true", children: _jsx(InkWaveform, { frozen: !playing, outputLevel: outputLevel, status: playing ? 'speaking' : 'ready', variant: "pill" }) }) }), onRemove ? (_jsx(IconButton, { label: remove, tooltip: remove, variant: "ghost", size: "sm", icon: _jsx(Icon, { icon: IconX }), onClick: onRemove })) : null, _jsx("audio", { ...audioProps, src: src, hidden: true })] }));
+}