@usetheo/ui 0.22.1 → 0.26.0

package/dist/index.js

@@ -38,6 +38,495 @@ var twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// src/lib/trace/duration.ts
+function toNs(value) {
+  if (typeof value === "bigint") return value;
+  if (typeof value !== "string" || value === "") return null;
+  try {
+    return BigInt(value);
+  } catch {
+    const ms = Date.parse(value);
+    return Number.isNaN(ms) ? null : BigInt(ms) * 1000000n;
+  }
+}
+function durationMs(span) {
+  const start = toNs(span.startTime);
+  const end = toNs(span.endTime ?? null);
+  if (start === null || end === null) return null;
+  const ms = (end - start) / 1000000n;
+  return ms < 0n ? null : Number(ms);
+}
+function isSpanError(status) {
+  return status === "ERROR";
+}
+function formatDurationMs(ms) {
+  if (ms === null) return "in-flight";
+  if (ms >= 6e4) return `${trimZeros(ms / 6e4)}min`;
+  if (ms >= 1e3) return `${trimZeros(ms / 1e3)}s`;
+  return `${Math.round(ms)}ms`;
+}
+function trimZeros(n) {
+  return Number.parseFloat(n.toFixed(2)).toString();
+}
+
+// src/lib/trace/chat.ts
+function asChat(value) {
+  try {
+    const parsed = JSON.parse(value);
+    if (Array.isArray(parsed) && parsed.length > 0 && parsed.every((m) => m !== null && typeof m === "object" && "role" in m && "content" in m)) {
+      return parsed;
+    }
+  } catch {
+  }
+  return null;
+}
+function prettyValue(value) {
+  try {
+    return JSON.stringify(JSON.parse(value), null, 2);
+  } catch {
+    return value;
+  }
+}
+var REDACTED = "<REDACTED>";
+function isRedactedThinking(m) {
+  if (m.content === REDACTED) return true;
+  if (Array.isArray(m.content)) {
+    return m.content.some((b) => {
+      if (b === null || typeof b !== "object") return false;
+      const block = b;
+      const type = typeof block.type === "string" ? block.type : "";
+      if (type === "redacted_thinking") return true;
+      if (type === "thinking") {
+        return block.thinking === REDACTED || block.thinking === void 0 || block.thinking === "";
+      }
+      return false;
+    });
+  }
+  return false;
+}
+function contentText(content) {
+  if (typeof content === "string") return content;
+  if (content === null || content === void 0) return "";
+  if (Array.isArray(content)) {
+    return content.map((b) => {
+      if (typeof b === "string") return b;
+      if (b !== null && typeof b === "object") {
+        const block = b;
+        if (typeof block.text === "string") return block.text;
+        if (typeof block.thinking === "string") return block.thinking;
+      }
+      return "";
+    }).filter(Boolean).join("\n\n");
+  }
+  return JSON.stringify(content, null, 2);
+}
+
+// src/lib/trace/attributes.ts
+function groupByNamespace(attrs) {
+  const buckets = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(attrs)) {
+    const dot = key.indexOf(".");
+    const ns = dot > 0 ? key.slice(0, dot) : "general";
+    let bucket = buckets.get(ns);
+    if (!bucket) {
+      bucket = [];
+      buckets.set(ns, bucket);
+    }
+    bucket.push([key, value]);
+  }
+  return [...buckets.entries()].sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([namespace, entries]) => ({ namespace, entries }));
+}
+
+// src/lib/trace/cost.ts
+var COST_ATTRIBUTE_KEYS = ["gen_ai.usage.cost", "gen_ai.usage.cost_usd", "cost_usd", "cost"];
+function spanCostUsd(span) {
+  if (typeof span.costUsd === "number" && Number.isFinite(span.costUsd)) {
+    return span.costUsd > 0 ? span.costUsd : 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 : 0;
+  }
+  return 0;
+}
+function aggregateCost(span) {
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (s) => {
+    if (seen.has(s.id)) return 0;
+    seen.add(s.id);
+    let total = spanCostUsd(s);
+    for (const c of s.children ?? []) total += walk(c);
+    return total;
+  };
+  return walk(span);
+}
+
+// src/lib/trace/flatten.ts
+var VIRTUALIZE_THRESHOLD = 200;
+function flattenAll(root) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (span) => {
+    if (seen.has(span.id)) return;
+    seen.add(span.id);
+    out.push(span);
+    for (const c of span.children ?? []) walk(c);
+  };
+  walk(root);
+  return out;
+}
+function flattenVisible(root, collapsed) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (span, depth) => {
+    if (seen.has(span.id)) return;
+    seen.add(span.id);
+    out.push({ span, depth });
+    if (!collapsed.has(span.id)) for (const c of span.children ?? []) walk(c, depth + 1);
+  };
+  walk(root, 0);
+  return out;
+}
+var TRANSCRIPT_PREVIEW_CHARS = 140;
+var SUBAGENT_MIN_CHILDREN = 2;
+function transcriptPreview(span) {
+  const oneLine = (span.outputValue ?? "").replace(/\s+/g, " ").trim();
+  return oneLine.length > TRANSCRIPT_PREVIEW_CHARS ? `${oneLine.slice(0, TRANSCRIPT_PREVIEW_CHARS)}\u2026` : oneLine;
+}
+function toTranscriptRows(root) {
+  const rows = [];
+  const walk = (span) => {
+    const children = span.children ?? [];
+    rows.push({
+      kind: "span",
+      spanId: span.id,
+      role: span.kind ?? span.name ?? "span",
+      preview: transcriptPreview(span),
+      stats: {
+        inputTokens: span.inputTokens ?? 0,
+        outputTokens: span.outputTokens ?? 0,
+        costUsd: spanCostUsd(span),
+        durationMs: durationMs(span)
+      }
+    });
+    if (children.length >= SUBAGENT_MIN_CHILDREN) {
+      rows.push({ kind: "group-header", spanId: span.id, groupId: span.id });
+    }
+    for (const c of children) walk(c);
+  };
+  walk(root);
+  return rows;
+}
+
+// src/lib/trace/align.ts
+function traceMetrics(root) {
+  const all = flattenAll(root);
+  let totalTokens = 0;
+  let hasError = false;
+  for (const s of all) {
+    totalTokens += (s.inputTokens ?? 0) + (s.outputTokens ?? 0);
+    if (isSpanError(s.status)) hasError = true;
+  }
+  return {
+    durationMs: durationMs(root),
+    totalTokens,
+    costUsd: aggregateCost(root),
+    hasError,
+    spanCount: all.length
+  };
+}
+function numericDelta(from, to) {
+  const deltaPct = from !== null && to !== null && from !== 0 ? (to - from) / Math.abs(from) * 100 : null;
+  return { from, to, deltaPct };
+}
+function spanTokens(s) {
+  return (s.inputTokens ?? 0) + (s.outputTokens ?? 0);
+}
+function computeDelta(a, b) {
+  return {
+    durationMs: numericDelta(durationMs(a), durationMs(b)),
+    tokens: numericDelta(spanTokens(a), spanTokens(b)),
+    costUsd: numericDelta(a.costUsd ?? 0, b.costUsd ?? 0)
+  };
+}
+function alignSpanTrees(a, b) {
+  const rows = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (an, bn, depth) => {
+    const anchor = an ?? bn;
+    if (!anchor) return;
+    const guardId = `${an?.id ?? ""}|${bn?.id ?? ""}`;
+    if (seen.has(guardId)) return;
+    seen.add(guardId);
+    const status = an && bn ? "matched" : an ? "only-in-a" : "only-in-b";
+    rows.push({
+      key: anchor.name,
+      depth,
+      a: an,
+      b: bn,
+      status,
+      delta: an && bn ? computeDelta(an, bn) : void 0
+    });
+    const aChildren = an?.children ?? [];
+    const bChildren = bn?.children ?? [];
+    const bUsed = /* @__PURE__ */ new Set();
+    for (const ac of aChildren) {
+      if (ac.id === an?.id) continue;
+      const j = bChildren.findIndex((bc, idx) => !bUsed.has(idx) && bc.name === ac.name);
+      if (j >= 0) {
+        bUsed.add(j);
+        walk(ac, bChildren[j], depth + 1);
+      } else {
+        walk(ac, void 0, depth + 1);
+      }
+    }
+    for (let idx = 0; idx < bChildren.length; idx++) {
+      if (!bUsed.has(idx) && bChildren[idx]?.id !== bn?.id)
+        walk(void 0, bChildren[idx], depth + 1);
+    }
+  };
+  walk(a, b, 0);
+  return rows;
+}
+
+// src/lib/trace/bar-layout.ts
+function computeTraceBounds(root) {
+  let start = null;
+  let end = null;
+  for (const span of flattenAll(root)) {
+    const s2 = toNs(span.startTime);
+    if (s2 === null) continue;
+    if (start === null || s2 < start) start = s2;
+    const e = toNs(span.endTime ?? null) ?? s2;
+    const eff = e >= s2 ? e : s2;
+    if (end === null || eff > end) end = eff;
+  }
+  const s = start ?? 0n;
+  return { startNs: s, endNs: end ?? s };
+}
+function computeBarLayout(spanStart, spanEnd, traceStartNs, traceEndNs) {
+  const window2 = traceEndNs > traceStartNs ? traceEndNs - traceStartNs : 1n;
+  const start = toNs(spanStart);
+  if (start === null) return { leftPct: 0, widthPct: 0, unbounded: true };
+  const end = toNs(spanEnd ?? null);
+  const skewed = end !== null && end < start;
+  const unbounded = end === null || skewed;
+  const effEnd = end !== null && !skewed ? end : start;
+  const pct = (delta) => delta > 0n ? Number(delta * 10000n / window2) / 100 : 0;
+  const leftPct = Math.min(Math.max(pct(start - traceStartNs), 0), 100);
+  const rawWidth = effEnd > start ? pct(effEnd - start) : 0;
+  const widthPct = Math.min(Math.max(rawWidth, 0), 100 - leftPct);
+  return { leftPct, widthPct, unbounded };
+}
+var NICE_MANTISSAS = [1n, 2n, 5n];
+var MIN_TICK_PX = 70;
+function trimZeros2(n) {
+  return Number.parseFloat(n.toFixed(2)).toString();
+}
+function labelForNs(offsetNs) {
+  const ns = Number(offsetNs);
+  if (ns >= 6e10) return `${trimZeros2(ns / 6e10)}min`;
+  if (ns >= 1e9) return `${trimZeros2(ns / 1e9)}s`;
+  return `${trimZeros2(ns / 1e6)}ms`;
+}
+function niceStep(targetNs) {
+  if (!(targetNs > 0)) return 0n;
+  let pow = 1n;
+  for (let guard = 0; guard < 32; guard++) {
+    for (const m of NICE_MANTISSAS) {
+      const candidate = m * pow;
+      if (Number(candidate) >= targetNs) return candidate;
+    }
+    pow *= 10n;
+  }
+  return pow;
+}
+function niceAxisTicks(startNs, endNs, pxWidth) {
+  if (endNs <= startNs || !(pxWidth > 0)) return [];
+  const spanNs = endNs - startNs;
+  const maxTicks = Math.max(1, Math.floor(pxWidth / MIN_TICK_PX));
+  const step = niceStep(Number(spanNs) / maxTicks);
+  if (step <= 0n) return [];
+  const ticks = [];
+  const spanNum = Number(spanNs);
+  for (let offset = 0n; offset <= spanNs; offset += step) {
+    ticks.push({
+      offsetNs: offset,
+      label: labelForNs(offset),
+      leftPct: Number(offset) / spanNum * 100
+    });
+  }
+  return ticks;
+}
+function packRows(spans) {
+  const rows = /* @__PURE__ */ new Map();
+  const rowEnds = [];
+  const ordered = [...spans].sort(
+    (a, b) => a.startNs < b.startNs ? -1 : a.startNs > b.startNs ? 1 : 0
+  );
+  for (const s of ordered) {
+    const end = s.endNs >= s.startNs ? s.endNs : s.startNs;
+    let placed = -1;
+    for (let r = 0; r < rowEnds.length; r++) {
+      const rowEnd = rowEnds[r];
+      if (rowEnd !== void 0 && rowEnd <= s.startNs) {
+        placed = r;
+        break;
+      }
+    }
+    if (placed === -1) {
+      placed = rowEnds.length;
+      rowEnds.push(end);
+    } else {
+      rowEnds[placed] = end;
+    }
+    rows.set(s.id, placed);
+  }
+  return rows;
+}
+
+// src/lib/trace/graph-layout.ts
+function attr(span, key) {
+  const a = span.attributes;
+  if (a == null || typeof a !== "object") return void 0;
+  const v = a[key];
+  return typeof v === "string" ? v : void 0;
+}
+function deriveSpanKind(span) {
+  const operationName = attr(span, "gen_ai.operation.name");
+  const toolName = attr(span, "gen_ai.tool.name");
+  const hasChildren = (span.children?.length ?? 0) > 0;
+  if (toolName != null || operationName === "execute_tool") return "tool";
+  if (operationName === "retrieve" || operationName === "search") return "retriever";
+  if (operationName === "embeddings" || operationName === "embedding") return "embedding";
+  if (operationName === "chat" || operationName === "text_completion" || span.model != null)
+    return "llm";
+  if (hasChildren) return "chain";
+  return "unknown";
+}
+var GRAPH_NODE_CAP = 200;
+var NODE_X_GAP = 168;
+var NODE_Y_GAP = 96;
+function buildLayeredGraph(root, selectedId, cap = GRAPH_NODE_CAP) {
+  const seenIds = /* @__PURE__ */ new Set();
+  const all = flattenAll(root).filter((s) => {
+    if (seenIds.has(s.id)) return false;
+    seenIds.add(s.id);
+    return true;
+  });
+  const count = all.length;
+  if (count > cap) {
+    return { nodes: [], edges: [], width: 0, height: 0, truncated: true, count };
+  }
+  const byId = new Map(all.map((s) => [s.id, s]));
+  const parentOf = /* @__PURE__ */ new Map();
+  const childrenOf = /* @__PURE__ */ new Map();
+  for (const s of all) {
+    if (s.id === root.id) continue;
+    const p = s.parentId;
+    const eff = p != null && p !== s.id && byId.has(p) ? p : root.id;
+    parentOf.set(s.id, eff);
+    let bucket = childrenOf.get(eff);
+    if (!bucket) {
+      bucket = [];
+      childrenOf.set(eff, bucket);
+    }
+    bucket.push(s.id);
+  }
+  const depthOf = /* @__PURE__ */ new Map();
+  const orderOf = /* @__PURE__ */ new Map();
+  const perDepth = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set([root.id]);
+  const queue = [{ id: root.id, depth: 0 }];
+  let maxDepth = 0;
+  while (queue.length > 0) {
+    const item = queue.shift();
+    if (!item) break;
+    const order = perDepth.get(item.depth) ?? 0;
+    perDepth.set(item.depth, order + 1);
+    depthOf.set(item.id, item.depth);
+    orderOf.set(item.id, order);
+    maxDepth = Math.max(maxDepth, item.depth);
+    for (const child of childrenOf.get(item.id) ?? []) {
+      if (visited.has(child)) continue;
+      visited.add(child);
+      queue.push({ id: child, depth: item.depth + 1 });
+    }
+  }
+  for (const s of all) {
+    if (depthOf.has(s.id)) continue;
+    const order = perDepth.get(1) ?? 0;
+    perDepth.set(1, order + 1);
+    depthOf.set(s.id, 1);
+    orderOf.set(s.id, order);
+    parentOf.set(s.id, root.id);
+    maxDepth = Math.max(maxDepth, 1);
+  }
+  const pathSet = new Set(computePath(root.id, selectedId, parentOf, depthOf, byId));
+  const nodes = all.map((s) => {
+    const depth = depthOf.get(s.id) ?? 0;
+    const order = orderOf.get(s.id) ?? 0;
+    return {
+      spanId: s.id,
+      name: s.name,
+      kind: deriveSpanKind(s),
+      depth,
+      order,
+      x: order * NODE_X_GAP,
+      y: depth * NODE_Y_GAP,
+      error: isSpanError(s.status),
+      selected: selectedId != null && s.id === selectedId,
+      onPath: pathSet.has(s.id)
+    };
+  });
+  const edges = all.filter((s) => s.id !== root.id).map((s) => {
+    const from = parentOf.get(s.id) ?? root.id;
+    return { from, to: s.id, onPath: pathSet.has(from) && pathSet.has(s.id) };
+  });
+  const width = Math.max(1, ...Array.from(perDepth.values())) * NODE_X_GAP;
+  const height = (maxDepth + 1) * NODE_Y_GAP;
+  return { nodes, edges, width, height, truncated: false, count };
+}
+function computePath(rootId, selectedId, parentOf, depthOf, byId) {
+  let target = selectedId != null && byId.has(selectedId) ? selectedId : void 0;
+  if (target === void 0) {
+    let deepest = rootId;
+    let best = -1;
+    for (const [id, d] of depthOf) {
+      if (d > best) {
+        best = d;
+        deepest = id;
+      }
+    }
+    target = deepest;
+  }
+  const chain = [];
+  const seen = /* @__PURE__ */ new Set();
+  let cur = target;
+  while (cur != null && !seen.has(cur)) {
+    seen.add(cur);
+    chain.push(cur);
+    if (cur === rootId) break;
+    cur = parentOf.get(cur);
+  }
+  return chain;
+}
+var KIND_LABEL = {
+  llm: "LLM",
+  tool: "Tool",
+  retriever: "Retriever",
+  embedding: "Embedding",
+  agent: "Agent",
+  chain: "Chain",
+  reranker: "Reranker",
+  evaluator: "Evaluator",
+  guardrail: "Guardrail",
+  unknown: "Span"
+};
 var buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg",
@@ -5971,5 +6460,1692 @@ function CommandPalette({
     ] })
   ] }) });
 }
+function SpanTreeRow({
+  span,
+  depth,
+  selected,
+  collapsed,
+  hasChildren,
+  posinset,
+  setsize,
+  showMetrics = true,
+  bounds,
+  onSelect,
+  onToggle,
+  renderBadge
+}) {
+  const dur = durationMs(span);
+  const error = isSpanError(span.status);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "treeitem",
+      "data-slot": "span-tree-row",
+      "aria-level": depth + 1,
+      "aria-posinset": posinset,
+      "aria-setsize": setsize,
+      "aria-selected": selected,
+      "aria-expanded": hasChildren ? !collapsed : void 0,
+      className: "flex items-center gap-2",
+      style: { paddingLeft: `${depth * 16}px` },
+      children: [
+        hasChildren ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": collapsed ? `Expand ${span.name}` : `Collapse ${span.name}`,
+            "aria-expanded": !collapsed,
+            onClick: () => onToggle(span.id),
+            className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted/50",
+            children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-current": selected ? "true" : void 0,
+            onClick: () => onSelect(span.id),
+            className: cn(
+              "flex min-w-0 flex-1 items-center gap-2 rounded-md py-1 pr-2 text-left text-body-sm hover:bg-muted/50",
+              selected && "bg-muted font-medium"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-xs", children: span.name }),
+              showMetrics && dur !== null ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground text-xs", children: formatDurationMs(dur) }) : null,
+              span.model ? /* @__PURE__ */ jsx(BadgeWithDot, { variant: "outline", className: "shrink-0", children: span.model }) : null,
+              showMetrics && (span.inputTokens !== void 0 || span.outputTokens !== void 0) ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-muted-foreground text-xs", children: [
+                span.inputTokens ?? 0,
+                "\u2192",
+                span.outputTokens ?? 0
+              ] }) : null,
+              error ? /* @__PURE__ */ jsx(BadgeWithDot, { variant: "destructive", className: "shrink-0", children: "error" }) : null,
+              renderBadge?.(span),
+              bounds ? /* @__PURE__ */ jsx(InlineBar, { span, bounds, error }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function InlineBar({
+  span,
+  bounds,
+  error
+}) {
+  const { leftPct, widthPct, unbounded } = computeBarLayout(
+    span.startTime,
+    span.endTime,
+    bounds.startNs,
+    bounds.endNs
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "relative ml-2 block h-4 min-w-[64px] flex-1 overflow-hidden rounded-sm bg-muted/30",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "span-tree-bar",
+          "data-error": error ? "true" : void 0,
+          "data-unbounded": unbounded ? "true" : void 0,
+          style: { left: `${leftPct}%`, width: `max(${widthPct}%, 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"
+          )
+        }
+      )
+    }
+  );
+}
+function SpanTreeVirtual({
+  flat,
+  selectedId,
+  collapsed,
+  showMetrics,
+  bounds,
+  onSelect,
+  onToggle,
+  renderBadge
+}) {
+  const parentRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: flat.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 32,
+    overscan: 20,
+    // A default viewport so rows render before the real ResizeObserver measures the element
+    // (SSR/jsdom have no layout). The real observer overrides this in the browser.
+    initialRect: { width: 320, height: 640 }
+  });
+  useEffect(() => {
+    const index = flat.findIndex((f) => f.span.id === selectedId);
+    if (index >= 0) virtualizer.scrollToIndex(index, { align: "center", behavior: "auto" });
+  }, [selectedId]);
+  return /* @__PURE__ */ jsx("div", { ref: parentRef, "data-slot": "span-tree-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 row = flat[vi.index];
+    if (!row) 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(
+          SpanTreeRow,
+          {
+            span: row.span,
+            depth: row.depth,
+            selected: row.span.id === selectedId,
+            collapsed: collapsed.has(row.span.id),
+            hasChildren: (row.span.children?.length ?? 0) > 0,
+            posinset: vi.index + 1,
+            setsize: flat.length,
+            showMetrics,
+            bounds,
+            onSelect,
+            onToggle,
+            renderBadge
+          }
+        )
+      },
+      `${vi.index}-${row.span.id}`
+    );
+  }) }) });
+}
+function SpanTree({
+  root,
+  selectedId,
+  onSelect,
+  collapsed,
+  onToggleCollapse,
+  showMetrics = true,
+  bounds,
+  virtualizeThreshold = VIRTUALIZE_THRESHOLD,
+  renderBadge,
+  className,
+  "aria-label": ariaLabel = "Trace span tree"
+}) {
+  const flat = useMemo(() => flattenVisible(root, collapsed), [root, collapsed]);
+  const virtualized = flat.length >= virtualizeThreshold;
+  const ctx = {
+    selectedId,
+    collapsed,
+    showMetrics,
+    bounds,
+    onSelect,
+    onToggle: onToggleCollapse,
+    renderBadge
+  };
+  const onKeyDown = (e) => {
+    const idx = flat.findIndex((f) => f.span.id === selectedId);
+    const go = (i) => {
+      const target = flat[i];
+      if (target) onSelect(target.span.id);
+    };
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      go(Math.min(idx + 1, flat.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      go(Math.max(idx - 1, 0));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      go(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      go(flat.length - 1);
+    } else if ((e.key === "Enter" || e.key === " ") && idx >= 0) {
+      e.preventDefault();
+      go(idx);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tree",
+      "data-slot": "span-tree",
+      "aria-label": ariaLabel,
+      tabIndex: 0,
+      onKeyDown,
+      className: cn("outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+      children: virtualized ? /* @__PURE__ */ jsx(SpanTreeVirtual, { flat, ...ctx }) : /* @__PURE__ */ jsx(RecursiveNode, { span: root, depth: 0, posinset: 1, setsize: 1, ctx })
+    }
+  );
+}
+function RecursiveNode({
+  span,
+  depth,
+  posinset,
+  setsize,
+  ctx
+}) {
+  const isCollapsed = ctx.collapsed.has(span.id);
+  const children = span.children ?? [];
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      SpanTreeRow,
+      {
+        span,
+        depth,
+        selected: span.id === ctx.selectedId,
+        collapsed: isCollapsed,
+        hasChildren: children.length > 0,
+        posinset,
+        setsize,
+        showMetrics: ctx.showMetrics,
+        bounds: ctx.bounds,
+        onSelect: ctx.onSelect,
+        onToggle: ctx.onToggle,
+        renderBadge: ctx.renderBadge
+      }
+    ),
+    !isCollapsed && children.length > 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        children: children.map((c, i) => /* @__PURE__ */ jsx(
+          RecursiveNode,
+          {
+            span: c,
+            depth: depth + 1,
+            posinset: i + 1,
+            setsize: children.length,
+            ctx
+          },
+          `${i}-${c.id}`
+        ))
+      }
+    ) : null
+  ] });
+}
+var AXIS_PX = 600;
+var defaultTimestamp = (ns) => new Date(Number(ns / 1000000n)).toISOString();
+var defaultCost = (usd) => `$${usd.toFixed(4)}`;
+function SpanWaterfall({
+  root,
+  bounds,
+  selectedId,
+  onSelect,
+  collapsed,
+  formatTimestamp = defaultTimestamp,
+  formatCostUsd = defaultCost,
+  className,
+  "aria-label": ariaLabel = "Trace waterfall"
+}) {
+  const laneRef = useRef(null);
+  const [needle, setNeedle] = useState(null);
+  const window2 = useMemo(() => bounds ?? computeTraceBounds(root), [bounds, root]);
+  const visible = useMemo(() => flattenVisible(root, collapsed), [root, collapsed]);
+  const rows = useMemo(() => {
+    const items = visible.map((f) => {
+      const startNs = toNs(f.span.startTime);
+      if (startNs === null) return null;
+      return { id: f.span.id, startNs, endNs: toNs(f.span.endTime ?? null) ?? startNs };
+    }).filter((x) => x !== null);
+    return packRows(items);
+  }, [visible]);
+  const spanNs = window2.endNs > window2.startNs ? window2.endNs - window2.startNs : 0n;
+  const ticks = useMemo(() => niceAxisTicks(window2.startNs, window2.endNs, AXIS_PX), [window2]);
+  const onMove = (e) => {
+    if (spanNs <= 0n) return;
+    const rect = laneRef.current?.getBoundingClientRect();
+    const width = rect?.width ?? 0;
+    const frac = width > 0 ? Math.min(Math.max((e.clientX - (rect?.left ?? 0)) / width, 0), 1) : 0;
+    const offsetNs = BigInt(Math.round(frac * Number(spanNs)));
+    setNeedle({ leftPct: frac * 100, label: formatTimestamp(window2.startNs + offsetNs) });
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "span-waterfall", "aria-label": ariaLabel, className: cn("space-y-1", className), children: [
+    ticks.length > 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "relative mb-1 h-4 w-full text-[10px] text-muted-foreground",
+        "aria-hidden": "true",
+        children: ticks.map((t) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "span-waterfall-tick",
+            className: "-translate-x-1/2 absolute whitespace-nowrap",
+            style: { left: `${Math.min(t.leftPct, 100)}%` },
+            children: t.label
+          },
+          t.offsetNs.toString()
+        ))
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: laneRef,
+        className: "relative space-y-0.5",
+        onMouseMove: onMove,
+        onMouseLeave: () => setNeedle(null),
+        children: [
+          needle ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "span-waterfall-needle",
+              "aria-hidden": "true",
+              className: "-top-4 -translate-x-1/2 pointer-events-none absolute z-10 whitespace-nowrap rounded bg-foreground px-1 text-[10px] text-background",
+              style: { left: `${Math.min(needle.leftPct, 100)}%` },
+              children: needle.label
+            }
+          ) : null,
+          visible.map((f) => /* @__PURE__ */ jsx(
+            WaterfallRow,
+            {
+              span: f.span,
+              bounds: window2,
+              row: rows.get(f.span.id) ?? 0,
+              selected: f.span.id === selectedId,
+              onSelect,
+              formatCostUsd
+            },
+            f.span.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+function WaterfallRow({
+  span,
+  bounds,
+  row,
+  selected,
+  onSelect,
+  formatCostUsd
+}) {
+  const { leftPct, widthPct, unbounded } = computeBarLayout(
+    span.startTime,
+    span.endTime,
+    bounds.startNs,
+    bounds.endNs
+  );
+  const error = isSpanError(span.status);
+  const hasChildren = (span.children?.length ?? 0) > 0;
+  const rollupCost = hasChildren ? aggregateCost(span) : 0;
+  const dur = durationMs(span);
+  const tip = `${span.name} \xB7 ${formatDurationMs(dur)}`;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "span-waterfall-row",
+      "aria-label": `Timeline: ${tip}`,
+      "aria-current": selected ? "true" : void 0,
+      onClick: () => onSelect(span.id),
+      title: tip,
+      className: "flex w-full items-center gap-2 rounded-sm py-0.5 text-left hover:bg-muted/40",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "min-w-0 shrink-0 basis-40 truncate font-mono text-xs",
+            style: { paddingLeft: `${row * 8}px` },
+            children: span.name
+          }
+        ),
+        /* @__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": "span-waterfall-bar",
+                "data-error": error ? "true" : void 0,
+                "data-selected": selected ? "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",
+                  selected && "ring-2 ring-primary ring-offset-1",
+                  unbounded && "border border-primary/60 border-dashed bg-transparent"
+                )
+              }
+            )
+          }
+        ),
+        hasChildren && rollupCost > 0 ? /* @__PURE__ */ jsxs(BadgeWithDot, { variant: "outline", className: "shrink-0 font-mono text-[10px]", children: [
+          "\u2211 ",
+          formatCostUsd(rollupCost)
+        ] }) : null
+      ]
+    }
+  );
+}
+function AttributesTable({
+  attrs,
+  maskedKeys,
+  canReveal = false,
+  promoted = [],
+  defaultOpen = true
+}) {
+  const safe = attrs ?? {};
+  const groups = groupByNamespace(safe);
+  const badges = promoted.filter((k) => k in safe).map((k) => ({ key: k, value: safe[k] }));
+  if (groups.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: "No attributes", description: "This span records none." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-slot": "attributes-table", children: [
+    badges.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", "data-testid": "attributes-badges", children: badges.map((b) => /* @__PURE__ */ jsx(BadgeWithDot, { variant: "outline", title: b.key, children: typeof b.value === "string" ? b.value : JSON.stringify(b.value) }, b.key)) }) : null,
+    groups.map((group) => /* @__PURE__ */ jsx(
+      NamespaceCard,
+      {
+        group,
+        canReveal,
+        maskedKeys,
+        defaultOpen
+      },
+      group.namespace
+    ))
+  ] });
+}
+function NamespaceCard({
+  group,
+  canReveal,
+  maskedKeys,
+  defaultOpen
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(Card, { size: "sm", children: [
+    /* @__PURE__ */ jsx(Card.Header, { className: "p-0", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        "aria-expanded": open,
+        "aria-label": `${open ? "Collapse" : "Expand"} ${group.namespace}`,
+        onClick: () => setOpen((o) => !o),
+        className: "w-full justify-start gap-1.5",
+        children: [
+          open ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-xs", children: `${group.namespace} (${group.entries.length})` })
+        ]
+      }
+    ) }),
+    open ? /* @__PURE__ */ jsx(Card.Body, { className: "pt-1", children: /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-1 gap-1 text-xs", children: group.entries.map(([key, value]) => /* @__PURE__ */ jsx(
+      AttributeRow,
+      {
+        attrKey: key,
+        value,
+        masked: maskedKeys?.(key) ?? false,
+        canReveal
+      },
+      key
+    )) }) }) : null
+  ] });
+}
+function AttributeRow({
+  attrKey,
+  value,
+  masked,
+  canReveal
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx("dt", { className: "w-40 shrink-0 truncate font-mono text-muted-foreground", title: attrKey, children: attrKey }),
+    /* @__PURE__ */ jsx("dd", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: masked ? /* @__PURE__ */ jsx(MaskedValue, { value: String(value), canReveal }) : /* @__PURE__ */ jsx(PlainValue, { value, attrKey }) })
+  ] });
+}
+function PlainValue({ value, attrKey }) {
+  if (value !== null && typeof value === "object") {
+    return /* @__PURE__ */ jsx(JsonViewer, { value, collapsed: 1, enableCopy: true });
+  }
+  const text = String(value);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono", children: text }),
+    /* @__PURE__ */ jsx(CopyButton, { value: text, "aria-label": `Copy ${attrKey}`, variant: "ghost", size: "sm" })
+  ] });
+}
+function MaskedValue({ value, canReveal }) {
+  const [revealed, setRevealed] = useState(false);
+  if (revealed && canReveal) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono", children: value }),
+      /* @__PURE__ */ jsx(CopyButton, { value, "aria-label": "Copy value", variant: "ghost", size: "sm" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", "aria-label": "Masked value", children: "\u2022\u2022\u2022" }),
+    canReveal ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "secondary",
+        size: "sm",
+        "aria-label": "Reveal masked value",
+        title: "Reveal",
+        onClick: () => setRevealed(true),
+        children: "Reveal"
+      }
+    ) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "text-muted-foreground text-xs",
+        title: "You do not have permission to reveal this value",
+        children: "masked"
+      }
+    )
+  ] });
+}
+function roleVariant(role) {
+  if (role === "user") return "primary";
+  if (role === "assistant") return "accent";
+  if (role === "system") return "default";
+  return "outline";
+}
+function PlainText({ text }) {
+  return /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-body-sm", children: text });
+}
+function MessageCard({ message, renderMarkdown }) {
+  const [showRaw, setShowRaw] = useState(false);
+  const redacted = isRedactedThinking(message);
+  const body = contentText(message.content);
+  return /* @__PURE__ */ jsx(Card, { size: "sm", "data-slot": "io-card", "data-testid": "io-card", children: /* @__PURE__ */ jsxs(Card.Body, { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(BadgeWithDot, { variant: roleVariant(message.role), children: message.role }),
+      /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "aria-label": showRaw ? "Hide raw JSON" : "Show raw JSON",
+            onClick: () => setShowRaw((r) => !r),
+            children: showRaw ? "Hide JSON" : "Raw JSON"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            value: JSON.stringify(message),
+            "aria-label": "Copy message JSON",
+            variant: "ghost",
+            size: "sm"
+          }
+        )
+      ] })
+    ] }),
+    redacted ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs italic", children: "[Redacted thinking]" }) : body ? renderMarkdown ? renderMarkdown(body) : /* @__PURE__ */ jsx(PlainText, { text: body }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "\u2014" }),
+    showRaw ? /* @__PURE__ */ jsx(JsonViewer, { value: message, collapsed: 1, enableCopy: true }) : null
+  ] }) });
+}
+function ToolCallCard({ call }) {
+  const name = call.function?.name ?? "(unnamed tool)";
+  const args = call.function?.arguments ?? "";
+  return /* @__PURE__ */ jsx(Card, { size: "sm", "data-slot": "io-tool-call", children: /* @__PURE__ */ jsxs(Card.Body, { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(BadgeWithDot, { variant: "outline", children: "tool call" }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-xs", children: name }),
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: call.id }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(CopyButton, { value: args, "aria-label": "Copy tool arguments", variant: "ghost", size: "sm" }) })
+    ] }),
+    args ? /* @__PURE__ */ jsx(JsonViewerText, { text: prettyValue(args) }) : null
+  ] }) });
+}
+function ToolResultCard({ message }) {
+  const id = message.tool_call_id ?? "";
+  const text = contentText(message.content);
+  return /* @__PURE__ */ jsx(Card, { size: "sm", "data-slot": "io-tool-result", children: /* @__PURE__ */ jsxs(Card.Body, { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(BadgeWithDot, { variant: "outline", children: "tool result" }),
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] text-muted-foreground", children: [
+        "\u21B3 ",
+        id
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(CopyButton, { value: text, "aria-label": "Copy tool result", variant: "ghost", size: "sm" }) })
+    ] }),
+    /* @__PURE__ */ jsx(JsonViewerText, { text: prettyValue(text) })
+  ] }) });
+}
+function JsonViewerText({ text }) {
+  try {
+    return /* @__PURE__ */ jsx(JsonViewer, { value: JSON.parse(text), collapsed: 1, enableCopy: true });
+  } catch {
+    return /* @__PURE__ */ jsx("pre", { className: "overflow-auto rounded-md border p-2 font-mono text-xs", children: text });
+  }
+}
+function MessageItem({ message, renderMarkdown }) {
+  if (message.role === "tool" && message.tool_call_id) {
+    return /* @__PURE__ */ jsx(ToolResultCard, { message });
+  }
+  const calls = message.tool_calls ?? [];
+  if (calls.length > 0) {
+    const hasBody = contentText(message.content) !== "" || isRedactedThinking(message);
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      hasBody ? /* @__PURE__ */ jsx(MessageCard, { message, renderMarkdown }) : null,
+      calls.map((c) => /* @__PURE__ */ jsx(ToolCallCard, { call: c }, c.id))
+    ] });
+  }
+  return /* @__PURE__ */ jsx(MessageCard, { message, renderMarkdown });
+}
+var REDACTED2 = "<REDACTED>";
+var COLLAPSE_THRESHOLD = 8;
+var HEAD_TAIL = 3;
+function IOCards({ value, renderMarkdown, "data-testid": testId }) {
+  if (value === void 0 || value === null || value === "") {
+    return /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "\u2014" });
+  }
+  if (value === REDACTED2) {
+    return /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", "data-testid": testId, children: "Redacted by the client (prompt logging is off)." });
+  }
+  const chat = asChat(value);
+  if (chat) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "io-cards", "data-testid": testId, children: /* @__PURE__ */ jsx(MessageFeed, { messages: chat, renderMarkdown }) });
+  }
+  return /* @__PURE__ */ jsx(NonChatFallback, { value, testId });
+}
+function NonChatFallback({ value, testId }) {
+  try {
+    return /* @__PURE__ */ jsx(JsonViewer, { value: JSON.parse(value), collapsed: 1, enableCopy: true });
+  } catch {
+    return /* @__PURE__ */ jsx("pre", { "data-testid": testId, className: "overflow-auto rounded-md border p-2 font-mono text-xs", children: prettyValue(value) });
+  }
+}
+function MessageFeed({
+  messages,
+  renderMarkdown
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const collapsible = messages.length > COLLAPSE_THRESHOLD;
+  if (!collapsible || expanded) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      messages.map((m, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: chat messages carry no stable id; the transcript is append-only so index is the natural key
+        /* @__PURE__ */ jsx(MessageItem, { message: m, renderMarkdown }, i)
+      )),
+      collapsible && expanded ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setExpanded(false), children: "Show less" }) : null
+    ] });
+  }
+  const head = messages.slice(0, HEAD_TAIL);
+  const tail = messages.slice(messages.length - HEAD_TAIL);
+  const hiddenCount = messages.length - head.length - tail.length;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    head.map((m, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: chat messages carry no stable id (append-only feed)
+      /* @__PURE__ */ jsx(MessageItem, { message: m, renderMarkdown }, `h-${i}`)
+    )),
+    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setExpanded(true), children: `Show ${hiddenCount} more` }),
+    tail.map((m, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: chat messages carry no stable id (append-only feed)
+      /* @__PURE__ */ jsx(MessageItem, { message: m, renderMarkdown }, `t-${i}`)
+    ))
+  ] });
+}
+var defaultCost2 = (usd) => `$${usd.toFixed(4)}`;
+function TraceTranscript({
+  root,
+  rows: rowsProp,
+  selectedId,
+  onSelect,
+  collapsedGroups,
+  onToggleGroup,
+  formatCostUsd = defaultCost2,
+  virtualizeThreshold = 200,
+  className,
+  "aria-label": ariaLabel = "Trace transcript"
+}) {
+  const allRows = useMemo(() => rowsProp ?? toTranscriptRows(root), [rowsProp, root]);
+  const hidden = useMemo(() => collectHidden(root, collapsedGroups), [root, collapsedGroups]);
+  const visible = useMemo(() => allRows.filter((r) => !hidden.has(r.spanId)), [allRows, hidden]);
+  if (visible.length === 0) {
+    return /* @__PURE__ */ jsx(EmptyState, { title: "No transcript", description: "This trace has no spans to show." });
+  }
+  const virtualized = visible.length >= virtualizeThreshold;
+  const ctx = { selectedId, onSelect, collapsedGroups, onToggleGroup, formatCostUsd };
+  return /* @__PURE__ */ jsx("div", { "data-slot": "trace-transcript", "aria-label": ariaLabel, className: cn("space-y-2", className), children: virtualized ? /* @__PURE__ */ jsx(VirtualFeed, { rows: visible, ...ctx }) : visible.map((row) => /* @__PURE__ */ jsx(Row3, { row, ...ctx }, `${row.kind}-${row.spanId}`)) });
+}
+function collectHidden(root, collapsed) {
+  const hidden = /* @__PURE__ */ new Set();
+  if (!collapsed || collapsed.size === 0) return hidden;
+  const hideSubtree = (span) => {
+    for (const c of span.children ?? []) {
+      hidden.add(c.id);
+      hideSubtree(c);
+    }
+  };
+  const walk = (span) => {
+    if (collapsed.has(span.id)) hideSubtree(span);
+    for (const c of span.children ?? []) walk(c);
+  };
+  walk(root);
+  return hidden;
+}
+function Row3({ row, ...ctx }) {
+  if (row.kind === "group-header") {
+    const collapsed = ctx.collapsedGroups?.has(row.groupId ?? "") ?? false;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "transcript-group",
+        "aria-expanded": !collapsed,
+        "aria-label": collapsed ? "Expand group" : "Collapse group",
+        onClick: () => ctx.onToggleGroup?.(row.groupId ?? ""),
+        className: "flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-muted-foreground text-xs hover:bg-muted/40",
+        children: [
+          collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" }),
+          "subagent group"
+        ]
+      }
+    );
+  }
+  const selected = row.spanId === ctx.selectedId;
+  const stats = row.stats;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "transcript-span",
+      "aria-current": selected ? "true" : void 0,
+      onClick: () => ctx.onSelect(row.spanId),
+      className: cn(
+        "flex w-full flex-col gap-1 rounded-md border border-border p-2 text-left hover:bg-muted/40",
+        selected && "bg-muted ring-1 ring-primary"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(BadgeWithDot, { variant: "outline", className: "shrink-0", children: row.role ?? "span" }),
+          stats ? /* @__PURE__ */ jsxs("span", { className: "ml-auto shrink-0 font-mono text-[10px] text-muted-foreground", children: [
+            stats.inputTokens,
+            "\u2192",
+            stats.outputTokens,
+            " \xB7 ",
+            ctx.formatCostUsd(stats.costUsd),
+            " \xB7",
+            " ",
+            formatDurationMs(stats.durationMs)
+          ] }) : null
+        ] }),
+        row.preview ? /* @__PURE__ */ jsx("p", { className: "line-clamp-2 whitespace-pre-wrap break-words text-body-sm text-muted-foreground", children: row.preview }) : null
+      ]
+    }
+  );
+}
+function VirtualFeed({ rows, ...ctx }) {
+  const parentRef = useRef(null);
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 64,
+    overscan: 12,
+    initialRect: { width: 480, height: 640 }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: parentRef,
+      "data-slot": "trace-transcript-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 row = rows[vi.index];
+        if (!row) 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)`,
+              paddingBottom: 8
+            },
+            children: /* @__PURE__ */ jsx(Row3, { row, ...ctx })
+          },
+          `${vi.index}-${row.spanId}`
+        );
+      }) })
+    }
+  );
+}
+var NODE_W = 132;
+var NODE_H = 44;
+var PAD2 = 24;
+function SpanGraph({
+  root,
+  selectedId,
+  onSelect,
+  nodeCap = 200,
+  className,
+  "aria-label": ariaLabel = "Agent graph"
+}) {
+  const graph = useMemo(
+    () => buildLayeredGraph(root, selectedId ?? void 0, nodeCap),
+    [root, selectedId, nodeCap]
+  );
+  if (graph.truncated) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "span-graph",
+        className: cn(
+          "rounded-md border border-border border-dashed p-4 text-center text-body-sm text-muted-foreground",
+          className
+        ),
+        children: [
+          "Graph too large to render (",
+          graph.count,
+          " spans > ",
+          nodeCap,
+          " cap). Use the tree or waterfall view instead."
+        ]
+      }
+    );
+  }
+  const width = graph.width + PAD2 * 2 + NODE_W;
+  const height = graph.height + PAD2 * 2;
+  const byId = new Map(graph.nodes.map((n) => [n.spanId, n]));
+  return /* @__PURE__ */ jsx("div", { "data-slot": "span-graph", className: cn("overflow-auto", className), children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: "max-w-full",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: ariaLabel }),
+        graph.edges.map((e) => {
+          const from = byId.get(e.from);
+          const to = byId.get(e.to);
+          if (!from || !to) return null;
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              "data-slot": "span-graph-edge",
+              "data-on-path": e.onPath ? "true" : void 0,
+              x1: from.x + PAD2 + NODE_W / 2,
+              y1: from.y + PAD2 + NODE_H,
+              x2: to.x + PAD2 + NODE_W / 2,
+              y2: to.y + PAD2,
+              className: cn("stroke-1", e.onPath ? "stroke-primary" : "stroke-border")
+            },
+            `${e.from}-${e.to}`
+          );
+        }),
+        graph.nodes.map((n) => /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "data-slot": "span-graph-node",
+            "data-span-id": n.spanId,
+            "data-error": n.error ? "true" : void 0,
+            "data-selected": n.selected ? "true" : void 0,
+            transform: `translate(${n.x + PAD2}, ${n.y + PAD2})`,
+            onClick: () => onSelect(n.spanId),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelect(n.spanId);
+              }
+            },
+            tabIndex: 0,
+            role: "button",
+            "aria-label": `${KIND_LABEL[n.kind]}: ${n.name}`,
+            "aria-current": n.selected ? "true" : void 0,
+            className: "cursor-pointer outline-none focus-visible:[&>rect]:stroke-ring",
+            children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  width: NODE_W,
+                  height: NODE_H,
+                  rx: 6,
+                  className: cn(
+                    "fill-card stroke-1",
+                    n.error ? "stroke-destructive" : "stroke-border",
+                    n.selected && "stroke-2 stroke-primary"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("circle", { cx: 12, cy: NODE_H / 2, r: 4, className: dotClass(n.kind) }),
+              /* @__PURE__ */ jsx("text", { x: 24, y: NODE_H / 2 - 2, className: "fill-foreground font-mono text-[10px]", children: truncate(n.name, 16) }),
+              /* @__PURE__ */ jsx("text", { x: 24, y: NODE_H / 2 + 12, className: "fill-muted-foreground text-[9px]", children: KIND_LABEL[n.kind] })
+            ]
+          },
+          n.spanId
+        ))
+      ]
+    }
+  ) });
+}
+function truncate(s, max) {
+  return s.length > max ? `${s.slice(0, max - 1)}\u2026` : s;
+}
+function dotClass(kind) {
+  switch (kind) {
+    case "llm":
+      return "fill-primary";
+    case "tool":
+      return "fill-warning";
+    case "retriever":
+      return "fill-info";
+    case "embedding":
+      return "fill-accent";
+    case "chain":
+      return "fill-success";
+    default:
+      return "fill-muted-foreground";
+  }
+}
+var defaultCost3 = (usd) => `$${usd.toFixed(4)}`;
+function TraceCompare({
+  laneA,
+  laneB,
+  align = alignSpanTrees,
+  formatCostUsd = defaultCost3,
+  className
+}) {
+  const pending = laneA.pending || laneB.pending;
+  const rows = useMemo(
+    () => pending ? [] : align(laneA.root, laneB.root),
+    [pending, align, laneA.root, laneB.root]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), "data-slot": "trace-compare", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(LaneCard, { lane: laneA, formatCostUsd }),
+      /* @__PURE__ */ jsx(LaneCard, { lane: laneB, formatCostUsd })
+    ] }),
+    pending ? null : /* @__PURE__ */ jsx(DiffTable, { rows, formatCostUsd })
+  ] });
+}
+function LaneCard({
+  lane,
+  formatCostUsd
+}) {
+  const m = useMemo(() => lane.pending ? null : traceMetrics(lane.root), [lane]);
+  return /* @__PURE__ */ jsxs(Card, { size: "sm", children: [
+    /* @__PURE__ */ jsx(Card.Header, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-sm", children: lane.id }),
+      m?.hasError ? /* @__PURE__ */ jsx(BadgeWithDot, { variant: "destructive", children: "error" }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(Card.Body, { children: lane.pending || !m ? /* @__PURE__ */ jsxs("div", { "data-slot": "lane-pending", className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" })
+    ] }) : /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-3 gap-2 text-xs", children: [
+      /* @__PURE__ */ jsx(Stat, { label: "Duration", value: formatDurationMs(m.durationMs) }),
+      /* @__PURE__ */ jsx(Stat, { label: "Tokens", value: String(m.totalTokens) }),
+      /* @__PURE__ */ jsx(Stat, { label: "Cost", value: formatCostUsd(m.costUsd) })
+    ] }) })
+  ] });
+}
+function Stat({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "font-medium font-mono", children: value })
+  ] });
+}
+function DiffTable({
+  rows,
+  formatCostUsd
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-muted/40 text-muted-foreground", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-left font-medium", children: "Span" }),
+      /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-right font-medium", children: "Duration" }),
+      /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-right font-medium", children: "Tokens" }),
+      /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-right font-medium", children: "Cost" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxs("tr", { "data-slot": "diff-row", className: "border-border border-t", children: [
+      /* @__PURE__ */ jsxs(
+        "th",
+        {
+          scope: "row",
+          className: "px-2 py-1 text-left font-mono font-normal",
+          style: { paddingLeft: `${row.depth * 12 + 8}px` },
+          children: [
+            row.key,
+            row.status !== "matched" ? /* @__PURE__ */ jsx(BadgeWithDot, { variant: "outline", className: "ml-2", children: row.status === "only-in-a" ? "only in A" : "only in B" }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DeltaCell,
+        {
+          delta: row.delta?.durationMs,
+          format: (n) => formatDurationMs(n),
+          lowerIsBetter: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DeltaCell,
+        {
+          delta: row.delta?.tokens,
+          format: (n) => String(Math.round(n ?? 0)),
+          lowerIsBetter: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        DeltaCell,
+        {
+          delta: row.delta?.costUsd,
+          format: (n) => formatCostUsd(n ?? 0),
+          lowerIsBetter: true
+        }
+      )
+    ] }, `${row.key}-${i}`)) })
+  ] }) });
+}
+function DeltaCell({
+  delta,
+  format,
+  lowerIsBetter
+}) {
+  if (!delta) {
+    return /* @__PURE__ */ jsx("td", { className: "px-2 py-1 text-right text-muted-foreground", children: "\u2014" });
+  }
+  const { from, to, deltaPct } = delta;
+  const worse = deltaPct !== null && (lowerIsBetter ? deltaPct > 0 : deltaPct < 0);
+  return /* @__PURE__ */ jsxs("td", { className: "px-2 py-1 text-right", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: format(from) }),
+    /* @__PURE__ */ jsx("span", { className: "mx-1 text-muted-foreground", children: "\u2192" }),
+    /* @__PURE__ */ jsx("span", { className: "font-mono", children: format(to) }),
+    deltaPct !== null && Math.abs(deltaPct) >= 0.5 ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-slot": "delta-badge",
+        className: cn("ml-1 font-mono text-[10px]", worse ? "text-destructive" : "text-success"),
+        children: [
+          deltaPct > 0 ? "+" : "",
+          deltaPct.toFixed(0),
+          "%"
+        ]
+      }
+    ) : null
+  ] });
+}
+
+// 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;
+}
+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";
+}
 
-export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FileDropzone, FormField, Input, JsonViewer, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Stepper, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, TrendChart, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, deriveSteps, isNearBottom, linScale, matchesAccept, niceMax, seriesPath, sheetVariants, useStickToBottom, useToast, validateFiles };
+export { AccountMenu, ActionBar, Alert, AnnotationInput, 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, Histogram, IOCards, Input, JsonViewer, KIND_LABEL, Label, LoginSplit, MessageCard, MessageItem, MetricCard, MetricsPanel, PageShell, Pagination, PercentileChart, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, SessionSummary, SessionTimeline, 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, aggregateSession, alignSpanTrees, asChat, avatarVariants, badgeVariants, buildLayeredGraph, buttonVariants, cn, computeBarLayout, computeHistogram, computePageRange, computeTraceBounds, contentText, deriveSpanKind, deriveSteps, durationMs, flattenAll, flattenVisible, groupByNamespace, isCategoricalConfig, isContinuousConfig, isFreeformConfig, isNearBottom, isRedactedThinking, isSpanError, linScale, matchesAccept, niceAxisTicks, niceMax, packRows, prettyValue, seriesPath, sessionBounds, sheetVariants, spanCostUsd, toNs, toTranscriptRows, traceMetrics, useStickToBottom, useToast, validateFiles };