@usetheo/ui 0.23.0 → 0.27.0

package/dist/index.js

@@ -7535,4 +7535,1536 @@ function DeltaCell({
   ] });
 }
 
-export { AccountMenu, ActionBar, Alert, AttributesTable, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FileDropzone, FormField, GRAPH_NODE_CAP, IOCards, Input, JsonViewer, KIND_LABEL, Label, LoginSplit, MessageCard, MessageItem, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, SpanGraph, SpanTree, SpanTreeRow, SpanWaterfall, StatTile, StatusDot, StatusIndicator, Stepper, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, TraceCompare, TraceTranscript, TrendChart, UpdateBanner, VIRTUALIZE_THRESHOLD, aggregateCost, alignSpanTrees, asChat, avatarVariants, badgeVariants, buildLayeredGraph, buttonVariants, cn, computeBarLayout, computePageRange, computeTraceBounds, contentText, deriveSpanKind, deriveSteps, durationMs, flattenAll, flattenVisible, groupByNamespace, isNearBottom, isRedactedThinking, isSpanError, linScale, matchesAccept, niceAxisTicks, niceMax, packRows, prettyValue, seriesPath, sheetVariants, spanCostUsd, toNs, toTranscriptRows, traceMetrics, useStickToBottom, useToast, validateFiles };
+// src/lib/session/aggregate.ts
+function sessionBounds(items) {
+  let minStart = null;
+  let maxEnd = null;
+  for (const it of items) {
+    const start = toNs(it.startTime);
+    if (start === null) continue;
+    if (minStart === null || start < minStart) minStart = start;
+    const end = toNs(it.endTime ?? null) ?? start;
+    const eff = end >= start ? end : start;
+    if (maxEnd === null || eff > maxEnd) maxEnd = eff;
+  }
+  const s = minStart ?? 0n;
+  return { startNs: s, endNs: maxEnd ?? s };
+}
+function aggregateSession(items) {
+  let totalCostUsd = 0;
+  let totalTokens = 0;
+  let errorCount = 0;
+  const models = /* @__PURE__ */ new Set();
+  for (const it of items) {
+    if (typeof it.costUsd === "number" && Number.isFinite(it.costUsd) && it.costUsd > 0) {
+      totalCostUsd += it.costUsd;
+    }
+    if (typeof it.totalTokens === "number" && Number.isFinite(it.totalTokens) && it.totalTokens > 0) {
+      totalTokens += it.totalTokens;
+    }
+    if (it.status === "ERROR") errorCount++;
+    if (it.model) models.add(it.model);
+  }
+  const { startNs, endNs } = sessionBounds(items);
+  const windowMs = Number((endNs - startNs) / 1000000n);
+  return {
+    traceCount: items.length,
+    windowMs,
+    totalCostUsd,
+    totalTokens,
+    errorCount,
+    models: [...models].sort()
+  };
+}
+var defaultCost4 = (usd) => `$${usd.toFixed(4)}`;
+function SessionSummary({
+  items,
+  metrics,
+  formatCostUsd = defaultCost4,
+  className,
+  "aria-label": ariaLabel = "Session summary"
+}) {
+  const m = useMemo(() => metrics ?? aggregateSession(items ?? []), [metrics, items]);
+  return /* @__PURE__ */ jsxs(
+    "dl",
+    {
+      "data-slot": "session-summary",
+      "aria-label": ariaLabel,
+      className: cn(
+        "grid grid-cols-2 gap-3 rounded-md border border-border bg-muted/20 p-3 text-xs sm:grid-cols-3 lg:grid-cols-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Stat2, { label: "Traces", value: String(m.traceCount) }),
+        /* @__PURE__ */ jsx(
+          Stat2,
+          {
+            label: "Duration",
+            value: m.windowMs > 0 ? formatDurationMs(m.windowMs) : "\u2014",
+            testId: "session-duration"
+          }
+        ),
+        /* @__PURE__ */ jsx(Stat2, { label: "Cost", value: formatCostUsd(m.totalCostUsd), testId: "session-cost" }),
+        /* @__PURE__ */ jsx(Stat2, { label: "Tokens", value: String(m.totalTokens), testId: "session-tokens" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Errors" }),
+          /* @__PURE__ */ jsx(
+            "dd",
+            {
+              "data-slot": "session-error",
+              "data-error": m.errorCount > 0 ? "true" : void 0,
+              className: cn(
+                "font-medium font-mono tabular-nums",
+                m.errorCount > 0 && "text-destructive"
+              ),
+              children: m.errorCount
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: "Models" }),
+          /* @__PURE__ */ jsx("dd", { "data-testid": "session-models", className: "flex flex-wrap gap-1", children: m.models.length > 0 ? m.models.map((model) => /* @__PURE__ */ jsx(BadgeWithDot, { variant: "outline", className: "font-mono", children: model }, model)) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })
+        ] })
+      ]
+    }
+  );
+}
+function Stat2({ label, value, testId }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("dd", { "data-testid": testId, className: "font-medium font-mono tabular-nums", children: value })
+  ] });
+}
+var defaultTimestamp2 = (ns) => new Date(Number(ns / 1000000n)).toISOString();
+var defaultCost5 = (usd) => `$${usd.toFixed(4)}`;
+function SessionTimeline({
+  items,
+  selectedId,
+  onSelect,
+  formatTimestamp = defaultTimestamp2,
+  formatCostUsd = defaultCost5,
+  virtualizeThreshold = 200,
+  className,
+  "aria-label": ariaLabel = "Session timeline"
+}) {
+  const sorted = useMemo(() => {
+    const withNs = items.map((it) => ({ it, ns: toNs(it.startTime) ?? 0n }));
+    withNs.sort((a, b) => a.ns < b.ns ? -1 : a.ns > b.ns ? 1 : a.it.id < b.it.id ? -1 : 1);
+    return withNs.map((w) => w.it);
+  }, [items]);
+  const bounds = useMemo(() => sessionBounds(sorted), [sorted]);
+  if (sorted.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: "No traces", description: "This session has no traces to replay." });
+  }
+  const virtualized = sorted.length >= virtualizeThreshold;
+  const ctx = { bounds, selectedId, onSelect, formatTimestamp, formatCostUsd };
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="list" keeps the virtualized wrapper divs valid (a <div> cannot be an <li>)
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "list",
+        "data-slot": "session-timeline",
+        "aria-label": ariaLabel,
+        className: cn("space-y-1", className),
+        children: virtualized ? /* @__PURE__ */ jsx(VirtualRows, { items: sorted, ...ctx }) : sorted.map((it) => /* @__PURE__ */ jsx(Row4, { item: it, ...ctx }, it.id))
+      }
+    )
+  );
+}
+function Row4({ item, ...ctx }) {
+  const { leftPct, widthPct, unbounded } = computeBarLayout(
+    item.startTime,
+    item.endTime,
+    ctx.bounds.startNs,
+    ctx.bounds.endNs
+  );
+  const error = isSpanError(item.status);
+  const selected = item.id === ctx.selectedId;
+  const startNs = toNs(item.startTime);
+  const dur = durationMs({ startTime: item.startTime, endTime: item.endTime });
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: pairs with the role="list" container (virtualized wrappers forbid <li>)
+    /* @__PURE__ */ jsx("div", { role: "listitem", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "session-timeline-row",
+        "aria-current": selected ? "true" : void 0,
+        onClick: () => ctx.onSelect(item.id),
+        className: cn(
+          "flex w-full items-center gap-3 rounded-md p-2 text-left hover:bg-muted/40",
+          selected && "bg-muted ring-1 ring-primary"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "w-32 shrink-0 font-mono text-[10px] text-muted-foreground", children: startNs !== null ? ctx.formatTimestamp(startNs) : "\u2014" }),
+          /* @__PURE__ */ jsx("span", { "data-testid": "session-trace-name", className: "w-40 shrink-0 truncate font-mono text-xs", children: item.name ?? item.id }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "relative block h-4 flex-1 overflow-hidden rounded-sm bg-muted/30",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "session-timeline-bar",
+                  "data-error": error ? "true" : void 0,
+                  "data-unbounded": unbounded ? "true" : void 0,
+                  style: { left: `${leftPct}%`, width: `${widthPct}%`, minWidth: "2px" },
+                  className: cn(
+                    "absolute top-0.5 bottom-0.5 rounded-sm",
+                    error ? "bg-destructive" : "bg-primary/60",
+                    unbounded && "border border-primary/60 border-dashed bg-transparent"
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground tabular-nums", children: dur !== null ? formatDurationMs(dur) : "\u2014" }),
+          item.costUsd !== void 0 ? /* @__PURE__ */ jsx(BadgeWithDot, { variant: "outline", className: "shrink-0 font-mono text-[10px]", children: ctx.formatCostUsd(item.costUsd) }) : null,
+          error ? /* @__PURE__ */ jsx(BadgeWithDot, { variant: "destructive", className: "shrink-0", children: "error" }) : null
+        ]
+      }
+    ) })
+  );
+}
+function VirtualRows({ items, ...ctx }) {
+  const parentRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 44,
+    overscan: 12,
+    initialRect: { width: 640, height: 640 }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: parentRef,
+      "data-slot": "session-timeline-virtual",
+      className: "max-h-[70vh] overflow-auto",
+      children: /* @__PURE__ */ jsx("div", { style: { height: virtualizer.getTotalSize(), position: "relative", width: "100%" }, children: virtualizer.getVirtualItems().map((vi) => {
+        const item = items[vi.index];
+        if (!item) return null;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-index": vi.index,
+            ref: virtualizer.measureElement,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${vi.start}px)`
+            },
+            children: /* @__PURE__ */ jsx(Row4, { item, ...ctx })
+          },
+          `${vi.index}-${item.id}`
+        );
+      }) })
+    }
+  );
+}
+
+// src/lib/chart/histogram.ts
+function computeHistogram(values, binCount) {
+  if (!Number.isFinite(binCount) || binCount <= 0) return [];
+  const finite = values.filter((v) => Number.isFinite(v));
+  if (finite.length === 0) return [];
+  const n = Math.floor(binCount);
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (const v of finite) {
+    if (v < min) min = v;
+    if (v > max) max = v;
+  }
+  const span = max - min;
+  const width = span / n;
+  const bins = Array.from({ length: n }, (_, i) => ({
+    lo: span === 0 ? min : min + i * width,
+    hi: span === 0 ? min : min + (i + 1) * width,
+    count: 0
+  }));
+  for (const v of finite) {
+    const idx = span === 0 ? 0 : Math.min(n - 1, Math.floor((v - min) / width));
+    const bin = bins[idx];
+    if (bin) bin.count += 1;
+  }
+  return bins;
+}
+
+// src/lib/diff/diff-lines.ts
+function toLines(text) {
+  return text === "" ? [] : text.split("\n");
+}
+function diffLines(oldText, newText) {
+  const a = toLines(oldText);
+  const b = toLines(newText);
+  const n = a.length;
+  const m = b.length;
+  const lcs = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
+  for (let i2 = n - 1; i2 >= 0; i2--) {
+    const row = lcs[i2];
+    const next = lcs[i2 + 1];
+    for (let j2 = m - 1; j2 >= 0; j2--) {
+      row[j2] = a[i2] === b[j2] ? next[j2 + 1] + 1 : Math.max(next[j2], row[j2 + 1]);
+    }
+  }
+  const rows = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    const ai = a[i];
+    const bj = b[j];
+    if (ai === bj) {
+      rows.push({ kind: "eq", text: ai, leftNo: i + 1, rightNo: j + 1 });
+      i++;
+      j++;
+      continue;
+    }
+    const skipA = lcs[i + 1][j];
+    const skipB = lcs[i][j + 1];
+    if (skipA >= skipB) {
+      rows.push({ kind: "del", text: ai, leftNo: i + 1 });
+      i++;
+    } else {
+      rows.push({ kind: "add", text: bj, rightNo: j + 1 });
+      j++;
+    }
+  }
+  while (i < n) {
+    rows.push({ kind: "del", text: a[i], leftNo: i + 1 });
+    i++;
+  }
+  while (j < m) {
+    rows.push({ kind: "add", text: b[j], rightNo: j + 1 });
+    j++;
+  }
+  return rows;
+}
+var MARKER = { add: "+", del: "-", eq: " " };
+var ROW_CLASS = {
+  add: "bg-success/10 text-success",
+  del: "bg-destructive/10 text-destructive",
+  eq: "text-muted-foreground"
+};
+var NO_COL = "select-none pr-2 text-right align-top text-muted-foreground/60 tabular-nums";
+var MARKER_COL = "select-none pr-1 text-center align-top";
+var TEXT_COL = "align-top whitespace-pre-wrap break-words";
+var HEAD_ROW = "text-left text-label-caps text-muted-foreground uppercase";
+var NumHead = () => /* @__PURE__ */ jsx("th", { className: "pr-2", scope: "col", children: "#" });
+var SideHead = ({ children }) => /* @__PURE__ */ jsx("th", { "data-slot": "diff-view-side", scope: "col", children });
+function DiffCell({ no, marker, text }) {
+  const empty = text === null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("td", { className: NO_COL, children: no ?? "" }),
+    /* @__PURE__ */ jsx("td", { className: cn(TEXT_COL, empty && "bg-muted/30"), children: !empty && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: MARKER_COL, "aria-hidden": "true", children: marker }),
+      text
+    ] }) })
+  ] });
+}
+function columnsFor(mode, oldLabel, newLabel) {
+  if (mode === "unified") {
+    const header = oldLabel && newLabel ? `${oldLabel} \u2192 ${newLabel}` : oldLabel ?? newLabel ?? "Changes";
+    return [
+      {
+        header,
+        // Unified keeps both line numbers; the number cells are rendered
+        // separately, so here we only carry the new-side number for the row.
+        cell: (row) => ({
+          no: row.rightNo ?? row.leftNo,
+          marker: MARKER[row.kind],
+          text: row.text
+        })
+      }
+    ];
+  }
+  return [
+    {
+      header: oldLabel ?? "Old",
+      cell: (row) => ({
+        no: row.leftNo,
+        marker: row.kind === "del" ? "-" : " ",
+        text: row.kind === "add" ? null : row.text
+      })
+    },
+    {
+      header: newLabel ?? "New",
+      cell: (row) => ({
+        no: row.rightNo,
+        marker: row.kind === "add" ? "+" : " ",
+        text: row.kind === "del" ? null : row.text
+      })
+    }
+  ];
+}
+function DiffBody({ diff, mode, oldLabel, newLabel }) {
+  const columns = columnsFor(mode, oldLabel, newLabel);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: HEAD_ROW, children: columns.map((col) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(NumHead, {}),
+      /* @__PURE__ */ jsx(SideHead, { children: col.header })
+    ] }, col.header)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: diff.map((row, i) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        "data-diff": row.kind,
+        className: ROW_CLASS[row.kind],
+        children: columns.map((col) => /* @__PURE__ */ jsx(DiffCell, { ...col.cell(row) }, col.header))
+      },
+      i
+    )) })
+  ] });
+}
+var DiffView = forwardRef((props, ref) => {
+  const { oldText, newText, mode = "split", oldLabel, newLabel, className, ...rest } = props;
+  const diff = diffLines(oldText, newText);
+  const hasChanges = diff.some((r) => r.kind !== "eq");
+  const caption = `Diff${oldLabel ? ` of ${oldLabel}` : ""}${newLabel ? ` vs ${newLabel}` : ""}`;
+  let body;
+  if (!hasChanges) {
+    body = /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { "data-slot": "diff-view-empty", className: "p-3 text-muted-foreground italic", children: "No changes." }) }) });
+  } else {
+    body = /* @__PURE__ */ jsx(DiffBody, { diff, mode, oldLabel, newLabel });
+  }
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      "data-slot": "diff-view",
+      "data-mode": mode,
+      ref,
+      className: cn("w-full border-collapse font-mono text-xs", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("caption", { className: "sr-only", children: hasChanges ? caption : `${caption} \u2014 no changes` }),
+        body
+      ]
+    }
+  );
+});
+DiffView.displayName = "DiffView";
+function DiffSection({ title, oldText, newText, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("h4", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+    /* @__PURE__ */ jsx(DiffView, { oldText, newText, ...rest })
+  ] });
+}
+
+// src/components/composites/prompt-version-diff/to-diff-text.ts
+function templateToText(template) {
+  if (typeof template === "string") return template;
+  return template.map((m) => `${m.role}: ${m.content}`).join("\n\n");
+}
+function configToText(config) {
+  if (!config || Object.keys(config).length === 0) return "";
+  return JSON.stringify(config, null, 2);
+}
+function PromptVersionDiff(props) {
+  const { oldPrompt, newPrompt, mode, oldLabel, newLabel, className, ...rest } = props;
+  const shared = { mode, oldLabel, newLabel };
+  const oldConfig = configToText(oldPrompt.config);
+  const newConfig = configToText(newPrompt.config);
+  const hasConfig = oldConfig !== "" || newConfig !== "";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "prompt-version-diff", className: cn("space-y-4", className), ...rest, children: [
+    /* @__PURE__ */ jsx(
+      DiffSection,
+      {
+        title: "Content",
+        oldText: templateToText(oldPrompt.template),
+        newText: templateToText(newPrompt.template),
+        ...shared
+      }
+    ),
+    hasConfig && /* @__PURE__ */ jsx(DiffSection, { title: "Config", oldText: oldConfig, newText: newConfig, ...shared })
+  ] });
+}
+
+// src/components/composites/dataset-item-diff/to-diff-text.ts
+function fieldToText(value) {
+  if (value === void 0 || value === null) return "";
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+function fieldPresent(a, b) {
+  return a !== void 0 && a !== null || b !== void 0 && b !== null;
+}
+var FIELDS = [
+  { key: "input", title: "Input" },
+  { key: "expectedOutput", title: "Expected output" },
+  { key: "metadata", title: "Metadata" }
+];
+function DatasetItemDiff(props) {
+  const { oldItem, newItem, mode, oldLabel, newLabel, className, ...rest } = props;
+  const shared = { mode, oldLabel, newLabel };
+  return /* @__PURE__ */ jsx("div", { "data-slot": "dataset-item-diff", className: cn("space-y-4", className), ...rest, children: FIELDS.filter((f) => fieldPresent(oldItem[f.key], newItem[f.key])).map((f) => /* @__PURE__ */ jsx(
+    DiffSection,
+    {
+      title: f.title,
+      oldText: fieldToText(oldItem[f.key]),
+      newText: fieldToText(newItem[f.key]),
+      ...shared
+    },
+    f.key
+  )) });
+}
+var VIEW_W2 = 600;
+var PAD3 = { top: 8, right: 8, bottom: 4, left: 40 };
+var BAR_GAP = 2;
+var Histogram = forwardRef((props, ref) => {
+  const {
+    title,
+    height = 180,
+    valueFormatter = (v) => String(v),
+    className,
+    bins: binsProp,
+    values,
+    binCount,
+    ...rest
+  } = props;
+  const bins = binsProp ?? computeHistogram(values ?? [], binCount ?? 0);
+  const hasData = bins.length > 0 && bins.some((b) => b.count > 0);
+  if (!hasData) {
+    return /* @__PURE__ */ jsxs(
+      "figure",
+      {
+        "data-slot": "histogram",
+        ref,
+        className: cn("space-y-1", className),
+        "aria-label": `${title} \u2014 no data`,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "histogram-empty",
+              className: "flex items-center justify-center rounded-md border border-dashed text-body-sm text-muted-foreground",
+              style: { height },
+              children: "No data to distribute."
+            }
+          )
+        ]
+      }
+    );
+  }
+  const countMax = niceMax(bins.map((b) => b.count)) || 1;
+  const yScale = linScale([0, countMax], [height - PAD3.bottom, PAD3.top]);
+  const plotW = VIEW_W2 - PAD3.left - PAD3.right;
+  const slotW = plotW / bins.length;
+  const barW = Math.max(1, slotW - BAR_GAP);
+  return /* @__PURE__ */ jsxs("figure", { "data-slot": "histogram", ref, className: cn("space-y-1", className), ...rest, children: [
+    /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${VIEW_W2} ${height}`,
+        preserveAspectRatio: "none",
+        role: "img",
+        "aria-label": `${title} distribution`,
+        className: "w-full",
+        style: { height },
+        children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: PAD3.left,
+              y1: height - PAD3.bottom,
+              x2: VIEW_W2 - PAD3.right,
+              y2: height - PAD3.bottom,
+              className: "stroke-border",
+              strokeWidth: 1
+            }
+          ),
+          /* @__PURE__ */ jsx("text", { x: 4, y: PAD3.top + 8, className: "fill-muted-foreground text-[10px]", children: valueFormatter(countMax) }),
+          /* @__PURE__ */ jsx("text", { x: 4, y: height - PAD3.bottom, className: "fill-muted-foreground text-[10px]", children: "0" }),
+          bins.map((b, i) => {
+            const y = yScale(b.count);
+            const barH = Math.max(0, height - PAD3.bottom - y);
+            return /* @__PURE__ */ jsx(
+              "rect",
+              {
+                "data-slot": "histogram-bar",
+                "data-count": b.count,
+                x: PAD3.left + i * slotW + BAR_GAP / 2,
+                y,
+                width: barW,
+                height: barH,
+                className: "fill-primary",
+                children: /* @__PURE__ */ jsx("title", { children: `${valueFormatter(b.lo)}\u2013${valueFormatter(b.hi)}: ${b.count}` })
+              },
+              i
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("table", { "data-slot": "histogram-table", className: "sr-only", children: [
+      /* @__PURE__ */ jsxs("caption", { children: [
+        title,
+        " \u2014 data table"
+      ] }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "Range" }),
+        /* @__PURE__ */ jsx("th", { children: "Count" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: bins.map((b, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: bins are positional buckets — index IS the identity
+        /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: `${valueFormatter(b.lo)}\u2013${valueFormatter(b.hi)}` }),
+          /* @__PURE__ */ jsx("td", { children: b.count })
+        ] }, i)
+      )) })
+    ] })
+  ] });
+});
+Histogram.displayName = "Histogram";
+var VIEW_W3 = 600;
+var PAD4 = { top: 8, right: 8, bottom: 4, left: 40 };
+function bandPath(upper, lower, xScale, yScale) {
+  const runs = [];
+  let run = [];
+  for (let i = 0; i < upper.length; i++) {
+    const u = upper[i];
+    const l = lower[i];
+    if (u !== void 0 && l !== void 0 && Number.isFinite(u) && Number.isFinite(l)) {
+      run.push(i);
+    } else if (run.length > 0) {
+      runs.push(run);
+      run = [];
+    }
+  }
+  if (run.length > 0) runs.push(run);
+  return runs.map((idxs) => {
+    const top = idxs.map(
+      (i, k) => `${k === 0 ? "M" : "L"}${xScale(i).toFixed(2)},${yScale(upper[i]).toFixed(2)}`
+    );
+    const bottom = idxs.slice().reverse().map((i) => `L${xScale(i).toFixed(2)},${yScale(lower[i]).toFixed(2)}`);
+    return `${top.join(" ")} ${bottom.join(" ")} Z`;
+  }).join(" ");
+}
+var PercentileChart = forwardRef((props, ref) => {
+  const {
+    title,
+    buckets,
+    height = 180,
+    valueFormatter = (v) => String(v),
+    className,
+    ...rest
+  } = props;
+  const hasData = buckets.length > 0;
+  if (!hasData) {
+    return /* @__PURE__ */ jsxs(
+      "figure",
+      {
+        "data-slot": "percentile-chart",
+        ref,
+        className: cn("space-y-1", className),
+        "aria-label": `${title} \u2014 no data`,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "percentile-empty",
+              className: "flex items-center justify-center rounded-md border border-dashed text-body-sm text-muted-foreground",
+              style: { height },
+              children: "No data in this time range."
+            }
+          )
+        ]
+      }
+    );
+  }
+  const p50 = buckets.map((b) => b.p50);
+  const p95 = buckets.map((b) => b.p95);
+  const p99 = buckets.map((b) => b.p99);
+  const yMax = niceMax([...p99]) || 1;
+  const xScale = linScale([0, Math.max(1, buckets.length - 1)], [PAD4.left, VIEW_W3 - PAD4.right]);
+  const yScale = linScale([0, yMax], [height - PAD4.bottom, PAD4.top]);
+  const p50Points = p50.map((y, x) => ({ x, y }));
+  return /* @__PURE__ */ jsxs("figure", { "data-slot": "percentile-chart", ref, className: cn("space-y-1", className), ...rest, children: [
+    /* @__PURE__ */ jsx("figcaption", { className: "font-semibold text-label-caps text-muted-foreground uppercase", children: title }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: `0 0 ${VIEW_W3} ${height}`,
+        preserveAspectRatio: "none",
+        role: "img",
+        "aria-label": `${title} percentiles`,
+        className: "w-full",
+        style: { height },
+        children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: PAD4.left,
+              y1: height - PAD4.bottom,
+              x2: VIEW_W3 - PAD4.right,
+              y2: height - PAD4.bottom,
+              className: "stroke-border",
+              strokeWidth: 1
+            }
+          ),
+          /* @__PURE__ */ jsx("text", { x: 4, y: PAD4.top + 8, className: "fill-muted-foreground text-[10px]", children: valueFormatter(yMax) }),
+          /* @__PURE__ */ jsx("text", { x: 4, y: height - PAD4.bottom, className: "fill-muted-foreground text-[10px]", children: "0" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-slot": "percentile-band",
+              "data-band": "p95-p99",
+              d: bandPath(p99, p95, xScale, yScale),
+              className: "fill-primary",
+              fillOpacity: 0.15,
+              children: /* @__PURE__ */ jsx("title", { children: "p95\u2013p99" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-slot": "percentile-band",
+              "data-band": "p50-p95",
+              d: bandPath(p95, p50, xScale, yScale),
+              className: "fill-primary",
+              fillOpacity: 0.3,
+              children: /* @__PURE__ */ jsx("title", { children: "p50\u2013p95" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-slot": "percentile-p50-line",
+              d: seriesPath(p50Points, xScale, yScale),
+              fill: "none",
+              className: "stroke-primary",
+              strokeWidth: 1.5,
+              children: /* @__PURE__ */ jsx("title", { children: "p50" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("table", { "data-slot": "percentile-table", className: "sr-only", children: [
+      /* @__PURE__ */ jsxs("caption", { children: [
+        title,
+        " \u2014 data table"
+      ] }),
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "Bucket" }),
+        /* @__PURE__ */ jsx("th", { children: "p50" }),
+        /* @__PURE__ */ jsx("th", { children: "p95" }),
+        /* @__PURE__ */ jsx("th", { children: "p99" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: buckets.map((b, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: buckets are positional time slots — index IS the identity
+        /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("td", { children: b.label ?? i + 1 }),
+          /* @__PURE__ */ jsx("td", { children: Number.isFinite(b.p50) ? valueFormatter(b.p50) : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { children: Number.isFinite(b.p95) ? valueFormatter(b.p95) : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { children: Number.isFinite(b.p99) ? valueFormatter(b.p99) : "\u2014" })
+        ] }, i)
+      )) })
+    ] })
+  ] });
+});
+PercentileChart.displayName = "PercentileChart";
+function AnnotationInput(props) {
+  const { name, description, required, disabled, className } = props;
+  const generatedId = useId();
+  const controlId = props.id ?? generatedId;
+  const descId = description ? `${controlId}-desc` : void 0;
+  const isCategorical = props.config.type === "categorical";
+  const labelId = isCategorical ? `${controlId}-label` : void 0;
+  const label = /* @__PURE__ */ jsx(Label, { id: labelId, htmlFor: isCategorical ? void 0 : controlId, required, children: name });
+  const a11y = {
+    "aria-required": required || void 0,
+    "aria-describedby": descId,
+    disabled
+  };
+  let control = null;
+  if (props.config.type === "categorical") {
+    const { config, value, onValueChange } = props;
+    control = /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        value: value ?? "",
+        onValueChange: (v) => onValueChange(v === "" ? null : v),
+        "aria-labelledby": labelId,
+        className: "gap-1.5",
+        ...a11y,
+        children: config.options.map((opt) => {
+          const optId = `${controlId}-${opt.label}`;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(RadioGroup.Item, { value: opt.label, id: optId, disabled }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: optId, className: "font-normal", children: opt.label })
+          ] }, opt.label);
+        })
+      }
+    );
+  } else if (props.config.type === "continuous") {
+    const { config, value, onValueChange } = props;
+    const onNumber = (e) => {
+      const raw = e.target.value;
+      if (raw === "") return onValueChange(null);
+      const n = Number(raw);
+      onValueChange(Number.isFinite(n) ? n : null);
+    };
+    control = /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...a11y,
+        id: controlId,
+        type: "number",
+        min: config.min,
+        max: config.max,
+        step: config.step,
+        value: value ?? "",
+        onChange: onNumber
+      }
+    );
+  } else if (props.config.type === "freeform") {
+    const { config, value, onValueChange } = props;
+    const onText = (e) => onValueChange(e.target.value === "" ? null : e.target.value);
+    control = /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ...a11y,
+        id: controlId,
+        maxLength: config.maxLength,
+        value: value ?? "",
+        onChange: onText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "annotation-input",
+      "data-type": props.config.type,
+      className: cn("space-y-1.5", className),
+      children: [
+        label,
+        description ? /* @__PURE__ */ jsx("p", { id: descId, className: "text-body-sm text-muted-foreground", children: description }) : null,
+        control
+      ]
+    }
+  );
+}
+
+// src/components/composites/annotation-input/types.ts
+function isCategoricalConfig(c) {
+  return c.type === "categorical";
+}
+function isContinuousConfig(c) {
+  return c.type === "continuous";
+}
+function isFreeformConfig(c) {
+  return c.type === "freeform";
+}
+
+// src/components/composites/evaluator-form/types.ts
+function isTargetEvaluator(c) {
+  return c.type === "exact_match" || c.type === "contains";
+}
+function isRegexEvaluator(c) {
+  return c.type === "regex";
+}
+function isThresholdEvaluator(c) {
+  return c.type === "levenshtein" || c.type === "json_distance";
+}
+function defaultEvaluatorConfig(type) {
+  switch (type) {
+    case "exact_match":
+      return { type, target: "" };
+    case "contains":
+      return { type, target: "" };
+    case "regex":
+      return { type, pattern: "", flags: "" };
+    case "levenshtein":
+      return { type, threshold: 0 };
+    case "json_distance":
+      return { type, threshold: 0 };
+  }
+}
+var EVALUATOR_TYPES = [
+  { value: "exact_match", label: "Exact match" },
+  { value: "contains", label: "Contains" },
+  { value: "regex", label: "Regex" },
+  { value: "levenshtein", label: "Levenshtein" },
+  { value: "json_distance", label: "JSON distance" }
+];
+var EvaluatorForm = forwardRef(
+  ({ value, onChange, disabled, className }, ref) => {
+    const baseId = useId();
+    const typeId = `${baseId}-type`;
+    const fieldId = `${baseId}-field`;
+    const onThreshold = (e) => {
+      const n = Number(e.target.value);
+      const threshold = Number.isFinite(n) ? n : 0;
+      const cfg = value;
+      onChange({ ...cfg, threshold });
+    };
+    let fields = null;
+    if (value.type === "exact_match" || value.type === "contains") {
+      const cfg = value;
+      fields = /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: "Target" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: fieldId,
+            value: cfg.target,
+            disabled,
+            onChange: (e) => onChange({ ...cfg, target: e.target.value })
+          }
+        )
+      ] });
+    } else if (value.type === "regex") {
+      const cfg = value;
+      const flagsId = `${baseId}-flags`;
+      fields = /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: "Pattern" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: fieldId,
+              value: cfg.pattern,
+              disabled,
+              onChange: (e) => onChange({ ...cfg, pattern: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: flagsId, children: "Flags" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: flagsId,
+              value: cfg.flags ?? "",
+              disabled,
+              onChange: (e) => onChange({ ...cfg, flags: e.target.value })
+            }
+          )
+        ] })
+      ] });
+    } else {
+      const cfg = value;
+      fields = /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, children: "Threshold" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: fieldId,
+            type: "number",
+            value: cfg.threshold,
+            disabled,
+            onChange: onThreshold
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "evaluator-form",
+        "data-eval-type": value.type,
+        className: cn("space-y-3", className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Label, { htmlFor: typeId, children: "Evaluator type" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                id: typeId,
+                "data-slot": "evaluator-form-type",
+                value: value.type,
+                disabled,
+                onChange: (e) => onChange(defaultEvaluatorConfig(e.target.value)),
+                className: cn(
+                  "flex h-[var(--theo-control-h,2.25rem)] w-full rounded-md border border-input bg-card px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm text-foreground",
+                  "focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                  "disabled:cursor-not-allowed disabled:opacity-50"
+                ),
+                children: EVALUATOR_TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t.value, children: t.label }, t.value))
+              }
+            )
+          ] }),
+          fields
+        ]
+      }
+    );
+  }
+);
+EvaluatorForm.displayName = "EvaluatorForm";
+function finiteMean(values) {
+  const nums = values.map(Number).filter((n) => Number.isFinite(n));
+  if (nums.length === 0) return null;
+  return nums.reduce((a, b) => a + b, 0) / nums.length;
+}
+function fmt(n) {
+  return Number(n.toFixed(3)).toString();
+}
+function countByOption(options, values) {
+  return options.map((opt) => ({
+    label: opt.label,
+    count: values.filter((v) => v === opt.label).length
+  }));
+}
+var AnnotationSummaryGroup = forwardRef(
+  ({ config, values, label, defaultOpen, className }, ref) => {
+    const heading = label ?? config.type;
+    if (values.length === 0) {
+      return /* @__PURE__ */ jsxs(
+        Card,
+        {
+          "data-slot": "annotation-summary-group-empty",
+          className: cn("p-4 text-body-sm text-muted-foreground", className),
+          children: [
+            heading,
+            ": no annotations yet"
+          ]
+        }
+      );
+    }
+    let body = null;
+    if (config.type === "continuous") {
+      const mean = finiteMean(values);
+      body = /* @__PURE__ */ jsxs("p", { className: "text-body-sm text-muted-foreground", children: [
+        "Mean ",
+        mean === null ? "\u2014" : fmt(mean),
+        " \xB7 ",
+        values.length,
+        " annotation",
+        values.length === 1 ? "" : "s"
+      ] });
+    } else if (config.type === "categorical") {
+      const rows = countByOption(config.options, values);
+      body = /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: rows.map((row) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-body-sm text-foreground", children: row.label }),
+        /* @__PURE__ */ jsx(BadgeWithDot, { size: "sm", children: row.count })
+      ] }, row.label)) });
+    } else {
+      const nonEmpty = values.filter((v) => String(v).trim() !== "").length;
+      body = /* @__PURE__ */ jsxs("p", { className: "text-body-sm text-muted-foreground", children: [
+        nonEmpty,
+        " annotation",
+        nonEmpty === 1 ? "" : "s"
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(
+      "details",
+      {
+        ref,
+        "data-slot": "annotation-summary-group",
+        "data-type": config.type,
+        open: defaultOpen,
+        className: cn(
+          "rounded-xl border border-border bg-card text-card-foreground shadow-md",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer items-center justify-between gap-3 rounded-xl p-4 font-medium text-body-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", children: [
+            /* @__PURE__ */ jsx("span", { children: heading }),
+            /* @__PURE__ */ jsx(BadgeWithDot, { size: "sm", variant: "outline", children: values.length })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "p-4 pt-0", children: body })
+        ]
+      }
+    );
+  }
+);
+AnnotationSummaryGroup.displayName = "AnnotationSummaryGroup";
+var defaultCost6 = (usd) => `$${usd.toFixed(4)}`;
+var EM_DASH = "\u2014";
+var tokens = (n) => n === void 0 ? EM_DASH : String(n);
+var TokenCostBreakdown = forwardRef((props, ref) => {
+  const {
+    inputTokens,
+    outputTokens,
+    cacheTokens,
+    totalTokens,
+    costUsd,
+    formatCostUsd = defaultCost6,
+    className,
+    ...rest
+  } = props;
+  const allAbsent = inputTokens === void 0 && outputTokens === void 0 && cacheTokens === void 0 && totalTokens === void 0 && costUsd === void 0;
+  if (allAbsent) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "token-cost-breakdown-empty",
+        className: cn(
+          "flex items-center justify-center rounded-md border border-dashed p-3 text-body-sm text-muted-foreground",
+          className
+        ),
+        ...rest,
+        children: "No token usage to report."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "dl",
+    {
+      "data-slot": "token-cost-breakdown",
+      ref,
+      className: cn(
+        "grid grid-cols-2 gap-3 rounded-md border border-border bg-muted/20 p-3 text-xs sm:grid-cols-3 lg:grid-cols-5",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Metric, { label: "Input", value: tokens(inputTokens), testId: "tcb-input" }),
+        /* @__PURE__ */ jsx(Metric, { label: "Output", value: tokens(outputTokens), testId: "tcb-output" }),
+        /* @__PURE__ */ jsx(Metric, { label: "Cache", value: tokens(cacheTokens), testId: "tcb-cache" }),
+        /* @__PURE__ */ jsx(Metric, { label: "Total", value: tokens(totalTokens), testId: "tcb-total" }),
+        /* @__PURE__ */ jsx(
+          Metric,
+          {
+            label: "Cost",
+            value: costUsd === void 0 ? EM_DASH : formatCostUsd(costUsd),
+            testId: "tcb-cost"
+          }
+        )
+      ]
+    }
+  );
+});
+TokenCostBreakdown.displayName = "TokenCostBreakdown";
+function Metric({ label, value, testId }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("dd", { "data-testid": testId, className: "font-medium font-mono tabular-nums", children: value })
+  ] });
+}
+function formatPrice(n) {
+  if (!Number.isFinite(n)) return "\u2014";
+  if (n === 0) return "0";
+  const fixed = n.toFixed(12);
+  return fixed.includes(".") ? fixed.replace(/0+$/, "").replace(/\.$/, "") : fixed;
+}
+var PriceBreakdown = forwardRef((props, ref) => {
+  const { prices, unit = "token", className, ...rest } = props;
+  const entries = Object.entries(prices);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "price-breakdown-empty",
+        className: cn(
+          "flex items-center justify-center rounded-md border border-dashed p-3 text-body-sm text-muted-foreground",
+          className
+        ),
+        ...rest,
+        children: "No prices to break down."
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      "data-slot": "price-breakdown",
+      ref,
+      className: cn("w-full text-xs", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("caption", { className: "sr-only", children: [
+          "Price breakdown per ",
+          unit,
+          ", per 1K, and per 1M"
+        ] }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-left text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("th", { scope: "col", className: "py-1 pr-3 font-medium", children: "Usage" }),
+          /* @__PURE__ */ jsxs("th", { scope: "col", className: "py-1 pr-3 text-right font-medium", children: [
+            "Per ",
+            unit
+          ] }),
+          /* @__PURE__ */ jsx("th", { scope: "col", className: "py-1 pr-3 text-right font-medium", children: "Per 1K" }),
+          /* @__PURE__ */ jsx("th", { scope: "col", className: "py-1 text-right font-medium", children: "Per 1M" })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: entries.map(([label, price]) => {
+          const id = label.replace(/\s+/g, "-").toLowerCase();
+          return /* @__PURE__ */ jsxs("tr", { "data-slot": "price-breakdown-row", className: "border-border border-t", children: [
+            /* @__PURE__ */ jsx("th", { scope: "row", className: "py-1 pr-3 text-left font-normal", children: label }),
+            /* @__PURE__ */ jsx(
+              "td",
+              {
+                "data-testid": `price-${id}-unit`,
+                className: "py-1 pr-3 text-right font-mono tabular-nums",
+                children: formatPrice(price)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "td",
+              {
+                "data-testid": `price-${id}-1k`,
+                className: "py-1 pr-3 text-right font-mono tabular-nums",
+                children: formatPrice(price * 1e3)
+              }
+            ),
+            /* @__PURE__ */ jsx("td", { "data-testid": `price-${id}-1m`, className: "py-1 text-right font-mono tabular-nums", children: formatPrice(price * 1e6) })
+          ] }, label);
+        }) })
+      ]
+    }
+  );
+});
+PriceBreakdown.displayName = "PriceBreakdown";
+var DEFAULT_VARIANT_MAP = {
+  alert: "destructive",
+  warning: "warning",
+  ok: "success",
+  no_data: "outline",
+  unknown: "outline",
+  paused: "outline"
+};
+var DEFAULT_LABEL = {
+  ok: "OK",
+  warning: "Warning",
+  alert: "Alert",
+  no_data: "No data",
+  unknown: "Unknown",
+  paused: "Paused"
+};
+var NEUTRAL_VARIANT = "outline";
+function deriveLabel(severity) {
+  return DEFAULT_LABEL[severity] ?? severity;
+}
+var SeverityBadge = forwardRef(
+  ({ severity, label, variantMap, className, ...rest }, ref) => {
+    const variant = variantMap?.[severity] ?? DEFAULT_VARIANT_MAP[severity] ?? NEUTRAL_VARIANT;
+    const text = label ?? deriveLabel(severity);
+    return /* @__PURE__ */ jsx(
+      BadgeWithDot,
+      {
+        "data-slot": "severity-badge",
+        "data-severity": severity,
+        ref,
+        variant,
+        className: cn(className),
+        ...rest,
+        children: text
+      }
+    );
+  }
+);
+SeverityBadge.displayName = "SeverityBadge";
+var TagInput = forwardRef(
+  ({ value, onChange, suggestions, placeholder, disabled, className }, ref) => {
+    const [draft, setDraft] = useState("");
+    const listId = useId();
+    const hasSuggestions = suggestions !== void 0 && suggestions.length > 0;
+    const addTag = () => {
+      const tag = draft.trim();
+      if (tag === "" || value.includes(tag)) {
+        setDraft("");
+        return;
+      }
+      onChange([...value, tag]);
+      setDraft("");
+    };
+    const removeTag = (tag) => {
+      if (disabled) return;
+      onChange(value.filter((t) => t !== tag));
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        addTag();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "tag-input",
+        ref,
+        className: cn("flex flex-wrap items-center gap-1.5", className),
+        children: [
+          value.map((tag) => /* @__PURE__ */ jsxs(BadgeWithDot, { "data-testid": "tag-input-chip", variant: "primary", className: "gap-1 pr-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "normal-case tracking-normal", children: tag }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled,
+                onClick: () => removeTag(tag),
+                "aria-label": `Remove ${tag}`,
+                className: cn(
+                  "inline-flex size-4 items-center justify-center rounded-full leading-none",
+                  "text-current/70 transition-colors hover:bg-primary/20 hover:text-current",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "disabled:cursor-not-allowed disabled:opacity-50"
+                ),
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xD7" })
+              }
+            )
+          ] }, tag)),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              size: "sm",
+              className: "w-auto min-w-[8rem] flex-1",
+              value: draft,
+              disabled,
+              placeholder,
+              list: hasSuggestions ? listId : void 0,
+              onChange: (e) => setDraft(e.target.value),
+              onKeyDown,
+              onBlur: addTag
+            }
+          ),
+          hasSuggestions ? /* @__PURE__ */ jsx("datalist", { id: listId, children: suggestions.map((s) => /* @__PURE__ */ jsx("option", { value: s }, s)) }) : null
+        ]
+      }
+    );
+  }
+);
+TagInput.displayName = "TagInput";
+function initialOf(name) {
+  return name.trim().charAt(0).toUpperCase() || "?";
+}
+var CommentThread = forwardRef(
+  ({ comments, onSubmit, currentUser, disabled, className }, ref) => {
+    const [draft, setDraft] = useState("");
+    const composerId = useId();
+    const submit = () => {
+      const body = draft.trim();
+      if (body === "" || disabled) return;
+      onSubmit(body);
+      setDraft("");
+    };
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "comment-thread", ref, className: cn("flex flex-col gap-4", className), children: [
+      comments.length === 0 ? /* @__PURE__ */ jsx("p", { "data-slot": "comment-thread-empty", className: "text-body-sm text-muted-foreground", children: "No comments yet." }) : /* @__PURE__ */ jsx("ol", { className: "flex flex-col gap-4", children: comments.map((c) => /* @__PURE__ */ jsxs("li", { "data-slot": "comment-thread-item", className: "flex gap-3", children: [
+        /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+          c.avatarUrl ? /* @__PURE__ */ jsx(Avatar.Image, { src: c.avatarUrl, alt: c.author }) : null,
+          /* @__PURE__ */ jsx(Avatar.Fallback, { delayMs: 0, children: initialOf(c.author) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-body-sm text-foreground", children: c.author }),
+            /* @__PURE__ */ jsx(Timestamp, { value: c.createdAt, className: "text-label text-muted-foreground" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-body-sm text-foreground", children: c.body })
+        ] })
+      ] }, c.id)) }),
+      /* @__PURE__ */ jsxs("div", { "data-slot": "comment-thread-composer", className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: composerId, className: "sr-only", children: "Add a comment" }),
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: composerId,
+            value: draft,
+            disabled,
+            placeholder: currentUser ? `Comment as ${currentUser}\u2026` : "Add a comment\u2026",
+            onChange: (e) => setDraft(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", disabled, onClick: submit, children: "Comment" }) })
+      ] })
+    ] });
+  }
+);
+CommentThread.displayName = "CommentThread";
+var roleVariant2 = {
+  user: "primary",
+  assistant: "success",
+  tool: "accent",
+  system: "outline"
+};
+function jsonText(value) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+var ChatMessageCard = forwardRef(
+  ({ className, role, content, toolCalls, toolResults, ...props }, ref) => {
+    const hasContent = content !== void 0 && content !== "";
+    const hasCalls = Array.isArray(toolCalls) && toolCalls.length > 0;
+    const hasResults = Array.isArray(toolResults) && toolResults.length > 0;
+    const isEmpty = !hasContent && !hasCalls && !hasResults;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "chat-message-card",
+        "data-role": role,
+        ref,
+        className: cn(
+          "flex flex-col gap-2 rounded-lg border border-border/40 bg-card p-3",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(BadgeWithDot, { variant: roleVariant2[role] ?? "outline", size: "sm", className: "self-start", children: role }),
+          hasContent ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-slot": "chat-message-card-content",
+              className: "whitespace-pre-wrap text-body-sm text-foreground",
+              children: content
+            }
+          ) : null,
+          hasCalls ? toolCalls?.map((call) => /* @__PURE__ */ jsx(
+            CodeBlock,
+            {
+              caption: call.function?.name ?? "tool call",
+              code: call.function?.arguments ?? ""
+            },
+            call.id
+          )) : null,
+          hasResults ? toolResults?.map((result, i) => /* @__PURE__ */ jsx(
+            CodeBlock,
+            {
+              caption: "result",
+              code: jsonText(result)
+            },
+            i
+          )) : null,
+          isEmpty ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-slot": "chat-message-card-empty",
+              className: "text-body-sm text-muted-foreground italic",
+              children: "No content."
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ChatMessageCard.displayName = "ChatMessageCard";
+function NavButton(props) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      "aria-label": props.label,
+      disabled: props.disabled,
+      onClick: props.onClick,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: props.glyph })
+    }
+  );
+}
+var MessageBranchSelector = forwardRef(
+  ({ className, index, count, onPrev, onNext, disabled = false, ...props }, ref) => {
+    if (count <= 1) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "message-branch-selector",
+        ref,
+        className: cn(
+          "inline-flex items-center gap-1 text-body-sm text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            NavButton,
+            {
+              label: "Previous branch",
+              glyph: "\u2039",
+              disabled: disabled || index <= 0,
+              onClick: onPrev
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { "data-slot": "message-branch-selector-label", className: "tabular-nums", children: [
+            index + 1,
+            " / ",
+            count
+          ] }),
+          /* @__PURE__ */ jsx(
+            NavButton,
+            {
+              label: "Next branch",
+              glyph: "\u203A",
+              disabled: disabled || index >= count - 1,
+              onClick: onNext
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MessageBranchSelector.displayName = "MessageBranchSelector";
+
+// src/components/composites/prompt-template-editor/extract-vars.ts
+var PLACEHOLDER = /\{\{\s*([^{}]*?)\s*\}\}|\{\s*([^{}]*?)\s*\}/g;
+function extractVars(template) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const match of template.matchAll(PLACEHOLDER)) {
+    const name = (match[1] ?? match[2] ?? "").trim();
+    if (name === "" || seen.has(name)) continue;
+    seen.add(name);
+    out.push(name);
+  }
+  return out;
+}
+function deriveChips(value, variables) {
+  const used = new Set(extractVars(value));
+  const declared = new Set(variables);
+  const names = [...declared, ...[...used].filter((v) => !declared.has(v))];
+  return names.map((name) => ({
+    name,
+    used: used.has(name),
+    missing: used.has(name) && !declared.has(name)
+  }));
+}
+function chipVariant(chip) {
+  if (chip.missing) return "warning";
+  return chip.used ? "success" : "outline";
+}
+var PromptTemplateEditor = forwardRef(
+  ({ className, value, onChange, variables = [], disabled = false, ...props }, ref) => {
+    const labelId = useId();
+    const chips = deriveChips(value, variables);
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "prompt-template-editor", className: cn("flex flex-col gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: labelId,
+          className: "font-semibold text-label-caps text-muted-foreground uppercase",
+          children: "Prompt template"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ref,
+          "aria-labelledby": labelId,
+          value,
+          disabled,
+          onChange: (e) => onChange(e.target.value),
+          ...props
+        }
+      ),
+      chips.length > 0 ? /* @__PURE__ */ jsx("div", { "data-slot": "prompt-template-editor-vars", className: "flex flex-wrap gap-1.5", children: chips.map((chip) => /* @__PURE__ */ jsx(
+        BadgeWithDot,
+        {
+          "data-slot": "prompt-template-editor-var",
+          "data-var": chip.name,
+          "data-used": String(chip.used),
+          "data-missing": String(chip.missing),
+          variant: chipVariant(chip),
+          size: "sm",
+          children: chip.missing ? `${chip.name} (undeclared)` : chip.name
+        },
+        chip.name
+      )) }) : null
+    ] });
+  }
+);
+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 };