@usetheo/ui 0.28.2 → 0.30.0

package/dist/components/composites/trend-chart/trend-chart.d.ts

@@ -39,6 +39,13 @@ export interface TrendChartProps extends HTMLAttributes<HTMLElement> {
     height?: number;
     /** Formats y-axis labels and table cells (tremor vocabulary). */
     valueFormatter?: (v: number) => string;
+    /**
+     * Pin the top of the y-axis. Pass a fixed bound (e.g. `1` for a 0–1 score) so the
+     * scale is stable and comparable across renders instead of auto-fitting to the data
+     * max via {@link niceMax} (which makes 0.68 look near the top of a [0, 0.7] axis).
+     * Ignored when ≤ 0. Default: auto (`niceMax`).
+     */
+    yMax?: number;
 }
 declare const TrendChart: import("react").ForwardRefExoticComponent<TrendChartProps & import("react").RefAttributes<HTMLElement>>;
 export { TrendChart };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { cn } from "./lib/cn.js";
-export { aggregateCost, asChat, contentText, isRedactedThinking, buildLayeredGraph, computeBarLayout, computeTraceBounds, deriveSpanKind, durationMs, flattenAll, flattenVisible, GRAPH_NODE_CAP, isSpanError, KIND_LABEL, niceAxisTicks, packRows, prettyValue, spanCostUsd, toNs, alignSpanTrees, groupByNamespace, traceMetrics, toTranscriptRows, VIRTUALIZE_THRESHOLD, } from "./lib/trace/index.js";
+export { aggregateCost, asChat, contentText, isRedactedThinking, buildLayeredGraph, computeBarLayout, computeTraceBounds, deriveSpanKind, durationMs, flattenAll, flattenVisible, GRAPH_NODE_CAP, isSpanError, KIND_LABEL, niceAxisTicks, packRows, prettyValue, spanCostUsd, spanOwnCostUsd, toNs, alignSpanTrees, groupByNamespace, traceMetrics, toTranscriptRows, VIRTUALIZE_THRESHOLD, } from "./lib/trace/index.js";
 export type { AlignDelta, AlignRow, AttributeGroup, AxisTick, BarLayout, ChatMessage, FlatSpan, GraphEdge, GraphNode, LayeredGraph, SpanKind, SpanStatus, ToolCall, TraceSpan, TranscriptRow, TranscriptRowStats, } from "./lib/trace/index.js";
 export { Button, buttonVariants, type ButtonProps } from "./components/primitives/button/index.js";
 export { Badge, badgeVariants, type BadgeProps } from "./components/primitives/badge/index.js";

package/dist/index.js

@@ -153,6 +153,19 @@ function spanCostUsd(span) {
   }
   return 0;
 }
+function spanOwnCostUsd(span) {
+  if (typeof span.costUsd === "number" && Number.isFinite(span.costUsd)) {
+    return span.costUsd > 0 ? span.costUsd : void 0;
+  }
+  const attrs = span.attributes ?? {};
+  for (const key of COST_ATTRIBUTE_KEYS) {
+    if (!(key in attrs)) continue;
+    const raw = attrs[key];
+    const n = typeof raw === "number" ? raw : typeof raw === "string" ? Number(raw) : Number.NaN;
+    if (Number.isFinite(n)) return n > 0 ? n : void 0;
+  }
+  return void 0;
+}
 function aggregateCost(span) {
   const seen = /* @__PURE__ */ new Set();
   const walk = (s) => {
@@ -209,7 +222,7 @@ function toTranscriptRows(root) {
       stats: {
         inputTokens: span.inputTokens ?? 0,
         outputTokens: span.outputTokens ?? 0,
-        costUsd: spanCostUsd(span),
+        costUsd: spanOwnCostUsd(span),
         durationMs: durationMs(span)
       }
     });
@@ -5074,7 +5087,7 @@ function niceMax(values) {
   const m = Math.max(0, ...values.filter((v) => Number.isFinite(v)));
   if (m <= 0) return 0;
   const pow = 10 ** Math.floor(Math.log10(m));
-  return Math.ceil(m / pow) * pow;
+  return Number((Math.ceil(m / pow) * pow).toPrecision(12));
 }
 function seriesPath(points, xScale, yScale) {
   const finite = points.filter((p) => Number.isFinite(p.y));
@@ -5085,7 +5098,29 @@ var VIEW_W = 600;
 var PAD = { top: 8, right: 8, bottom: 4, left: 40 };
 var SPARSE_MARKER_MAX = 5;
 var TrendChart = forwardRef(
-  ({ title, series, height = 180, valueFormatter = (v) => String(v), className, ...props }, ref) => {
+  ({
+    title,
+    series,
+    height = 180,
+    valueFormatter = (v) => String(v),
+    yMax: yMaxProp,
+    className,
+    ...props
+  }, ref) => {
+    const [viewW, setViewW] = useState(VIEW_W);
+    const roRef = useRef(null);
+    const setSvgNode = useCallback((node) => {
+      roRef.current?.disconnect();
+      roRef.current = null;
+      if (!node || typeof ResizeObserver === "undefined") return;
+      const measure = () => {
+        const w = node.clientWidth;
+        if (w > 0) setViewW(w);
+      };
+      measure();
+      roRef.current = new ResizeObserver(measure);
+      roRef.current.observe(node);
+    }, []);
     const allPoints = series.flatMap((s) => s.points);
     const hasData = allPoints.some((p) => Number.isFinite(p.y));
     if (!hasData) {
@@ -5115,17 +5150,18 @@ var TrendChart = forwardRef(
     const xs = allPoints.map((p) => p.x);
     const xMin = Math.min(...xs);
     const xMax = Math.max(...xs);
-    const yMax = niceMax(allPoints.map((p) => p.y)) || 1;
+    const yMax = yMaxProp != null && yMaxProp > 0 ? yMaxProp : niceMax(allPoints.map((p) => p.y)) || 1;
     const axisXs = Array.from(new Set(allPoints.map((p) => p.x))).sort((a, b) => a - b);
     const yByX = series.map((s) => new Map(s.points.map((p) => [p.x, p.y])));
-    const xScale = linScale([xMin, xMax], [PAD.left, VIEW_W - PAD.right]);
+    const xScale = linScale([xMin, xMax], [PAD.left, viewW - PAD.right]);
     const yScale = linScale([0, yMax], [height - PAD.bottom, PAD.top]);
     return /* @__PURE__ */ jsxs("figure", { "data-slot": "trend-chart", ref, className: cn("space-y-1", className), ...props, children: [
       /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
       /* @__PURE__ */ jsxs(
         "svg",
         {
-          viewBox: `0 0 ${VIEW_W} ${height}`,
+          ref: setSvgNode,
+          viewBox: `0 0 ${viewW} ${height}`,
           preserveAspectRatio: "none",
           role: "img",
           "aria-label": `${title} trend`,
@@ -5137,7 +5173,7 @@ var TrendChart = forwardRef(
               {
                 x1: PAD.left,
                 y1: height - PAD.bottom,
-                x2: VIEW_W - PAD.right,
+                x2: viewW - PAD.right,
                 y2: height - PAD.bottom,
                 className: "stroke-border",
                 strokeWidth: 1
@@ -5148,7 +5184,7 @@ var TrendChart = forwardRef(
               {
                 x1: PAD.left,
                 y1: PAD.top,
-                x2: VIEW_W - PAD.right,
+                x2: viewW - PAD.right,
                 y2: PAD.top,
                 className: "stroke-border/50",
                 strokeWidth: 1,
@@ -7227,8 +7263,9 @@ function Row3({ row, ...ctx }) {
             stats.inputTokens,
             "\u2192",
             stats.outputTokens,
-            " \xB7 ",
-            ctx.formatCostUsd(stats.costUsd),
+            " \xB7",
+            " ",
+            stats.costUsd === void 0 ? "\u2014" : ctx.formatCostUsd(stats.costUsd),
             " \xB7",
             " ",
             formatDurationMs(stats.durationMs)
@@ -9067,4 +9104,4 @@ var PromptTemplateEditor = forwardRef(
 );
 PromptTemplateEditor.displayName = "PromptTemplateEditor";
 
-export { AccountMenu, ActionBar, Alert, AnnotationInput, AnnotationSummaryGroup, AttributesTable, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, ChatMessageCard, Checkbox, CodeBlock, Combobox, CommandPalette, CommentThread, ConfirmDialog, CopyButton, DangerZone, DataTable, DatasetItemDiff, DeploymentRow, DescriptionList, Dialog, DiffView, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, EvaluatorForm, FileDropzone, FormField, GRAPH_NODE_CAP, Histogram, IOCards, Input, JsonViewer, KIND_LABEL, Label, LoginSplit, MessageBranchSelector, MessageCard, MessageItem, MetricCard, MetricsPanel, PageShell, Pagination, PercentileChart, PinInput, PlanBadge, PreviewEnvCard, PriceBreakdown, Progress, ProjectCard, PromptTemplateEditor, PromptVersionDiff, RadioGroup, RollbackUI, ScrollArea, Select, SessionSummary, SessionTimeline, SeverityBadge, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, SpanGraph, SpanTree, SpanTreeRow, SpanWaterfall, StatTile, StatusDot, StatusIndicator, Stepper, Switch, Table, Tabs, TagInput, TaskHeader, Textarea, Timestamp, Toast, Toaster, TokenCostBreakdown, TooltipWithStatics as Tooltip, TopNav, TraceCompare, TraceTranscript, TrendChart, UpdateBanner, VIRTUALIZE_THRESHOLD, aggregateCost, aggregateSession, alignSpanTrees, asChat, avatarVariants, badgeVariants, buildLayeredGraph, buttonVariants, cn, computeBarLayout, computeHistogram, computePageRange, computeTraceBounds, configToText, contentText, defaultEvaluatorConfig, deriveSpanKind, deriveSteps, diffLines, durationMs, extractVars, fieldPresent, fieldToText, flattenAll, flattenVisible, groupByNamespace, isCategoricalConfig, isContinuousConfig, isFreeformConfig, isNearBottom, isRedactedThinking, isRegexEvaluator, isSpanError, isTargetEvaluator, isThresholdEvaluator, linScale, matchesAccept, niceAxisTicks, niceMax, packRows, prettyValue, seriesPath, sessionBounds, sheetVariants, spanCostUsd, templateToText, toNs, toTranscriptRows, traceMetrics, useStickToBottom, useToast, validateFiles };
+export { AccountMenu, ActionBar, Alert, AnnotationInput, AnnotationSummaryGroup, AttributesTable, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, ChatMessageCard, Checkbox, CodeBlock, Combobox, CommandPalette, CommentThread, ConfirmDialog, CopyButton, DangerZone, DataTable, DatasetItemDiff, DeploymentRow, DescriptionList, Dialog, DiffView, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, EvaluatorForm, FileDropzone, FormField, GRAPH_NODE_CAP, Histogram, IOCards, Input, JsonViewer, KIND_LABEL, Label, LoginSplit, MessageBranchSelector, MessageCard, MessageItem, MetricCard, MetricsPanel, PageShell, Pagination, PercentileChart, PinInput, PlanBadge, PreviewEnvCard, PriceBreakdown, Progress, ProjectCard, PromptTemplateEditor, PromptVersionDiff, RadioGroup, RollbackUI, ScrollArea, Select, SessionSummary, SessionTimeline, SeverityBadge, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, SpanGraph, SpanTree, SpanTreeRow, SpanWaterfall, StatTile, StatusDot, StatusIndicator, Stepper, Switch, Table, Tabs, TagInput, TaskHeader, Textarea, Timestamp, Toast, Toaster, TokenCostBreakdown, TooltipWithStatics as Tooltip, TopNav, TraceCompare, TraceTranscript, TrendChart, UpdateBanner, VIRTUALIZE_THRESHOLD, aggregateCost, aggregateSession, alignSpanTrees, asChat, avatarVariants, badgeVariants, buildLayeredGraph, buttonVariants, cn, computeBarLayout, computeHistogram, computePageRange, computeTraceBounds, configToText, contentText, defaultEvaluatorConfig, deriveSpanKind, deriveSteps, diffLines, durationMs, extractVars, fieldPresent, fieldToText, flattenAll, flattenVisible, groupByNamespace, isCategoricalConfig, isContinuousConfig, isFreeformConfig, isNearBottom, isRedactedThinking, isRegexEvaluator, isSpanError, isTargetEvaluator, isThresholdEvaluator, linScale, matchesAccept, niceAxisTicks, niceMax, packRows, prettyValue, seriesPath, sessionBounds, sheetVariants, spanCostUsd, spanOwnCostUsd, templateToText, toNs, toTranscriptRows, traceMetrics, useStickToBottom, useToast, validateFiles };

package/dist/lib/trace/cost.d.ts

@@ -9,6 +9,14 @@ import type { TraceSpan } from "./types.js";
  * negative costs floor to 0.
  */
 export declare function spanCostUsd(span: TraceSpan): number;
+/**
+ * A single span's own USD cost for PER-SPAN DISPLAY: the promoted `costUsd` field, else the first
+ * parseable cost attribute — but returns `undefined` when the span has no individually-computed
+ * cost (absent / non-numeric / ≤ 0). Distinct from `spanCostUsd` (which collapses to 0 for honest
+ * `∑` badges): a per-span cost is "exists or doesn't", not a sum, so the absent case renders `—`
+ * (em-dash) downstream instead of a fabricated `$0.0000` (M52 / theo-lens#71 Finding 3).
+ */
+export declare function spanOwnCostUsd(span: TraceSpan): number | undefined;
 /**
  * Sum a span's own cost + all descendants' (`∑`). Total: missing cost counts as 0, never NaN.
  * Cycle-safe: a repeated/self-referential child is counted at most once (no stack overflow).

package/dist/lib/trace/types.d.ts

@@ -66,7 +66,12 @@ export interface FlatSpan {
 export interface TranscriptRowStats {
     inputTokens: number;
     outputTokens: number;
-    costUsd: number;
+    /**
+     * Per-span own cost. `undefined` when the span has no individually-computed cost — the feed
+     * renders `—` then, never a fabricated `$0.0000` (M52 / theo-lens#71 Finding 3). A real computed
+     * cost is a positive number.
+     */
+    costUsd: number | undefined;
     durationMs: number | null;
 }
 /** One row in the reader-mode transcript feed. */

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.28.2",
+  "version": "0.30.0",
   "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",
   "sideEffects": false,
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",