@usetheo/ui 0.26.0 → 0.27.0

package/dist/index.js

@@ -7793,6 +7793,222 @@ function computeHistogram(values, binCount) {
   }
   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;
@@ -8148,4 +8364,707 @@ function isFreeformConfig(c) {
   return c.type === "freeform";
 }
 
-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 };
+// 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 };