@usetheo/ui 0.23.0 → 0.27.0

package/dist/components/composites/annotation-input/annotation-input.d.ts

@@ -0,0 +1,38 @@
+import type { AnnotationCategoricalConfig, AnnotationContinuousConfig, AnnotationFreeformConfig } from "./types.js";
+/**
+ * AnnotationInput — a controlled, config-driven human annotation input (M12).
+ * Dispatches on `config.type` (Phoenix's three-type model): categorical →
+ * RadioGroup over named options; continuous → number input bounded by the
+ * config; freeform → textarea. Fully controlled (`value` + `onValueChange`);
+ * the consumer owns the config (fixture or backend store) and the submission.
+ * Composes the DS form primitives — zero new dependency (M12 ADR D2).
+ *
+ *   <AnnotationInput name="Quality" config={qualityConfig}
+ *                    value={v} onValueChange={setV} />
+ */
+interface AnnotationInputCommon {
+    /** The score name — rendered as the field label / radiogroup accessible name. */
+    name: string;
+    /** Overrides the generated control id (for external label association). */
+    id?: string;
+    /** Optional helper text, wired via aria-describedby. */
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+export type AnnotationInputProps = (AnnotationInputCommon & {
+    config: AnnotationCategoricalConfig;
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+}) | (AnnotationInputCommon & {
+    config: AnnotationContinuousConfig;
+    value: number | null;
+    onValueChange: (value: number | null) => void;
+}) | (AnnotationInputCommon & {
+    config: AnnotationFreeformConfig;
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+});
+declare function AnnotationInput(props: AnnotationInputProps): import("react").JSX.Element;
+export { AnnotationInput };

package/dist/components/composites/annotation-input/index.d.ts

@@ -0,0 +1,4 @@
+export { AnnotationInput } from "./annotation-input.js";
+export type { AnnotationInputProps } from "./annotation-input.js";
+export type { CategoricalOption, AnnotationCategoricalConfig, AnnotationContinuousConfig, AnnotationFreeformConfig, AnnotationConfig, } from "./types.js";
+export { isCategoricalConfig, isContinuousConfig, isFreeformConfig } from "./types.js";

package/dist/components/composites/annotation-input/types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Annotation config types — the named-score-type contract for AnnotationInput
+ * (M12). Follows Phoenix's three-type model (categorical / continuous /
+ * freeform); Langfuse's BOOLEAN is categorical-of-two and CORRECTION is
+ * system-only, so neither adds to a controlled human input. The config is a
+ * plain descriptor the consumer owns (fixture or backend store) — the DS
+ * component is config-driven and stateless.
+ */
+/** One named categorical choice; `score` optionally maps the label to a numeric value on submit. */
+export interface CategoricalOption {
+    label: string;
+    score?: number | null;
+}
+export interface AnnotationCategoricalConfig {
+    type: "categorical";
+    options: CategoricalOption[];
+}
+export interface AnnotationContinuousConfig {
+    type: "continuous";
+    min: number;
+    max: number;
+    step?: number;
+}
+export interface AnnotationFreeformConfig {
+    type: "freeform";
+    maxLength?: number;
+}
+export type AnnotationConfig = AnnotationCategoricalConfig | AnnotationContinuousConfig | AnnotationFreeformConfig;
+export declare function isCategoricalConfig(c: AnnotationConfig): c is AnnotationCategoricalConfig;
+export declare function isContinuousConfig(c: AnnotationConfig): c is AnnotationContinuousConfig;
+export declare function isFreeformConfig(c: AnnotationConfig): c is AnnotationFreeformConfig;

package/dist/components/composites/annotation-summary-group/annotation-summary-group.d.ts

@@ -0,0 +1,28 @@
+import type { AnnotationConfig } from "../annotation-input/types.js";
+/**
+ * AnnotationSummaryGroup — a collapsible group showing AGGREGATE stats over a
+ * list of annotation values for one `AnnotationConfig` (M18). Reuses the M12
+ * `AnnotationConfig` contract (DRY, ADR D2) and dispatches on `config.type`:
+ *   - continuous  → mean of the finite numeric values + count.
+ *   - categorical → count per option label + total count.
+ *   - freeform    → count of non-empty values.
+ *
+ * Controlled and pure — the consumer owns `values` (fixture or backend store);
+ * this component only summarizes. Uses a native `<details>`/`<summary>` for
+ * zero-JS collapsibility; composes `Card`/`Badge`. Zero new dependency.
+ *
+ *   <AnnotationSummaryGroup config={cfg} values={vals} label="Quality" />
+ */
+export interface AnnotationSummaryGroupProps {
+    /** The annotation config the values were collected against (reused from M12). */
+    config: AnnotationConfig;
+    /** The collected annotation values to aggregate. */
+    values: (string | number)[];
+    /** Group heading; falls back to the config type when omitted. */
+    label?: string;
+    /** Whether the group starts expanded. */
+    defaultOpen?: boolean;
+    className?: string;
+}
+declare const AnnotationSummaryGroup: import("react").ForwardRefExoticComponent<AnnotationSummaryGroupProps & import("react").RefAttributes<HTMLDetailsElement>>;
+export { AnnotationSummaryGroup };

package/dist/components/composites/annotation-summary-group/index.d.ts

@@ -0,0 +1 @@
+export { AnnotationSummaryGroup, type AnnotationSummaryGroupProps, } from "./annotation-summary-group.js";

package/dist/components/composites/chat-message-card/chat-message-card.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+import type { ToolCall } from "../../../lib/trace/types.js";
+export interface ChatMessageCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** ChatML role — user / assistant / tool / system (or any string). */
+    role: string;
+    /** Text body of the message. */
+    content?: string;
+    /** Structured tool calls attached to the message (assistant turns). */
+    toolCalls?: ToolCall[];
+    /** Structured tool results (tool turns). Serialized to JSON for display. */
+    toolResults?: unknown[];
+}
+declare const ChatMessageCard: import("react").ForwardRefExoticComponent<ChatMessageCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ChatMessageCard };

package/dist/components/composites/chat-message-card/index.d.ts

@@ -0,0 +1 @@
+export { ChatMessageCard, type ChatMessageCardProps } from "./chat-message-card.js";

package/dist/components/composites/comment-thread/comment-thread.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A single comment in a {@link CommentThread}. The `id` keys the list; the
+ * consumer owns id assignment (backend or fixture).
+ */
+export interface Comment {
+    id: string;
+    author: string;
+    body: string;
+    /** ISO string OR Unix **ms** (Timestamp contract) — NOT seconds. */
+    createdAt: string | number;
+    avatarUrl?: string;
+}
+export interface CommentThreadProps {
+    /** The rendered thread (controlled — the consumer brings/persists it). */
+    comments: Comment[];
+    /** Called with the trimmed draft when the composer submits a non-empty body. */
+    onSubmit: (body: string) => void;
+    /** Name of the person composing — surfaced as the composer avatar/context. */
+    currentUser?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const CommentThread: import("react").ForwardRefExoticComponent<CommentThreadProps & import("react").RefAttributes<HTMLDivElement>>;
+export { CommentThread };

package/dist/components/composites/comment-thread/index.d.ts

@@ -0,0 +1,2 @@
+export { CommentThread } from "./comment-thread.js";
+export type { Comment, CommentThreadProps } from "./comment-thread.js";

package/dist/components/composites/dataset-item-diff/dataset-item-diff.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "react";
+import { type DiffSectionCommon } from "../diff-view/diff-section.js";
+import { type DatasetItemSnapshot } from "./to-diff-text.js";
+/**
+ * DatasetItemDiff — diffs two dataset-item versions (M14 ADR D3). Stringifies
+ * each field (input / expectedOutput / metadata) and composes a labeled
+ * `DiffView` per field. Zero new dependency — reuses the DS diff primitive.
+ *
+ * A field absent in BOTH items is omitted honestly (no empty "No changes"
+ * table); a field present on either side is rendered so an add/remove shows.
+ *
+ *   <DatasetItemDiff oldItem={v1} newItem={v2} />
+ */
+export type DatasetItemDiffProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & DiffSectionCommon & {
+    oldItem: DatasetItemSnapshot;
+    newItem: DatasetItemSnapshot;
+};
+declare function DatasetItemDiff(props: DatasetItemDiffProps): import("react").JSX.Element;
+export { DatasetItemDiff };

package/dist/components/composites/dataset-item-diff/index.d.ts

@@ -0,0 +1,4 @@
+export { DatasetItemDiff } from "./dataset-item-diff.js";
+export type { DatasetItemDiffProps } from "./dataset-item-diff.js";
+export type { DatasetItemSnapshot } from "./to-diff-text.js";
+export { fieldToText, fieldPresent } from "./to-diff-text.js";

package/dist/components/composites/dataset-item-diff/to-diff-text.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Pure normalizers for dataset-item snapshots (M14 ADR D3). Turns each field
+ * (input / expectedOutput / metadata), whose value is `unknown`, into the plain
+ * text a `DiffView` diffs. No React, no I/O; total and deterministic.
+ */
+/** A dataset item version. Fields are optional so absent ones can be omitted. */
+export interface DatasetItemSnapshot {
+    input: unknown;
+    expectedOutput?: unknown;
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Stringify a field value for diffing: a string passes through unchanged;
+ * `undefined`/`null` become ""; anything else is pretty-printed JSON. Keeping
+ * strings raw avoids wrapping user text in quotes/escapes in the diff.
+ */
+export declare function fieldToText(value: unknown): string;
+/**
+ * True when a field is present on either side — the caller renders a section
+ * only for present fields, omitting one absent in BOTH items honestly.
+ */
+export declare function fieldPresent(a: unknown, b: unknown): boolean;

package/dist/components/composites/diff-view/diff-section.d.ts

@@ -0,0 +1,19 @@
+import { type DiffViewMode } from "./diff-view.js";
+/**
+ * DiffSection — a labeled `DiffView` (a heading + the diff table). Shared by the
+ * domain composites (PromptVersionDiff, DatasetItemDiff) so each labeled diff is
+ * a single call instead of a repeated heading+DiffView block (DRY).
+ */
+/** The DiffView pass-through props the composites forward to every section. */
+export interface DiffSectionCommon {
+    /** Layout mode, forwarded to DiffView. */
+    mode?: DiffViewMode;
+    oldLabel?: string;
+    newLabel?: string;
+}
+export type DiffSectionProps = DiffSectionCommon & {
+    title: string;
+    oldText: string;
+    newText: string;
+};
+export declare function DiffSection({ title, oldText, newText, ...rest }: DiffSectionProps): import("react").JSX.Element;

package/dist/components/composites/diff-view/diff-view.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from "react";
+/**
+ * DiffView — a controlled, line-level text diff rendered as a semantic table
+ * (M14 ADR D2). Runs the pure `diffLines` LCS over `oldText`/`newText`; zero
+ * new dependency (registry stays copy-pasteable — M14 ADR D1).
+ *
+ * `mode="split"` (default) shows two columns — old on the left, new on the
+ * right, aligning `del` rows on the left and `add` rows on the right; `eq` on
+ * both. `mode="unified"` shows a single inline column with `+`/`-` prefixes.
+ *
+ * A11y is not color-alone: every changed row carries a TEXTUAL marker
+ * (`+`/`-`/` `) plus `data-diff`, and the whole thing is a `<table>` with an
+ * sr-only `<caption>` so screen readers announce a data table. Identical input
+ * reads as an honest "No changes" state, never an empty table.
+ *
+ *   <DiffView oldText={v1} newText={v2} oldLabel="v1" newLabel="v2" />
+ */
+export type DiffViewMode = "split" | "unified";
+export type DiffViewProps = Omit<HTMLAttributes<HTMLTableElement>, "children"> & {
+    oldText: string;
+    newText: string;
+    /** Layout: two-column split (default) or inline unified. */
+    mode?: DiffViewMode;
+    /** Column header for the old text (split) / caption context. */
+    oldLabel?: string;
+    /** Column header for the new text (split) / caption context. */
+    newLabel?: string;
+};
+declare const DiffView: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLTableElement>, "children"> & {
+    oldText: string;
+    newText: string;
+    /** Layout: two-column split (default) or inline unified. */
+    mode?: DiffViewMode;
+    /** Column header for the old text (split) / caption context. */
+    oldLabel?: string;
+    /** Column header for the new text (split) / caption context. */
+    newLabel?: string;
+} & import("react").RefAttributes<HTMLTableElement>>;
+export { DiffView };

package/dist/components/composites/diff-view/index.d.ts

@@ -0,0 +1,2 @@
+export { DiffView } from "./diff-view.js";
+export type { DiffViewProps, DiffViewMode } from "./diff-view.js";

package/dist/components/composites/evaluator-form/evaluator-form.d.ts

@@ -0,0 +1,25 @@
+import { type EvaluatorConfig } from "./types.js";
+/**
+ * EvaluatorForm — a controlled, config-driven builder for a built-in evaluator
+ * (M18). Dispatches on `value.type` (Phoenix's code-evaluator model): a
+ * `<select>` switches the evaluator type; the fields below it edit the config
+ * for the current type — exact_match/contains → a target string; regex →
+ * pattern + optional flags; levenshtein/json_distance → a numeric threshold.
+ * Switching type emits a FRESH config of that type with sensible defaults.
+ *
+ * Fully controlled (`value` + `onChange`); the consumer owns the config and its
+ * persistence. The form only EDITS — execution/sandboxing of the evaluator is a
+ * platform concern (ADR D3). Composes DS primitives; zero new dependency.
+ *
+ *   <EvaluatorForm value={cfg} onChange={setCfg} />
+ */
+export interface EvaluatorFormProps {
+    /** The evaluator config being edited (discriminated by `type`). */
+    value: EvaluatorConfig;
+    /** Emitted with the new config on any edit — always fully typed. */
+    onChange: (value: EvaluatorConfig) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare const EvaluatorForm: import("react").ForwardRefExoticComponent<EvaluatorFormProps & import("react").RefAttributes<HTMLDivElement>>;
+export { EvaluatorForm };

package/dist/components/composites/evaluator-form/index.d.ts

@@ -0,0 +1,3 @@
+export { EvaluatorForm, type EvaluatorFormProps } from "./evaluator-form.js";
+export type { EvaluatorConfig, EvaluatorType, ExactMatchEvaluatorConfig, ContainsEvaluatorConfig, RegexEvaluatorConfig, LevenshteinEvaluatorConfig, JsonDistanceEvaluatorConfig, } from "./types.js";
+export { defaultEvaluatorConfig, isTargetEvaluator, isRegexEvaluator, isThresholdEvaluator, } from "./types.js";

package/dist/components/composites/evaluator-form/types.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Evaluator config types — the discriminated-union contract for EvaluatorForm
+ * (M18). Follows Phoenix's built-in code-evaluator model: each evaluator has a
+ * `type` discriminant plus the fields that type needs. The config is a plain
+ * descriptor the consumer owns (fixture or backend store) — EvaluatorForm only
+ * EDITS it; execution/sandboxing of the evaluator is a platform concern (ADR
+ * D3). Same union + Extract narrowing pattern as AnnotationInput (M12), which
+ * side-steps the TS#30581 correlated-union limitation.
+ */
+/** A string-target evaluator: the produced output is matched against `target`. */
+export interface ExactMatchEvaluatorConfig {
+    type: "exact_match";
+    target: string;
+}
+export interface ContainsEvaluatorConfig {
+    type: "contains";
+    target: string;
+}
+/** A regex evaluator: `pattern` is the source, `flags` the optional RegExp flags. */
+export interface RegexEvaluatorConfig {
+    type: "regex";
+    pattern: string;
+    flags?: string;
+}
+/** A Levenshtein-distance evaluator: passes when distance ≤ `threshold`. */
+export interface LevenshteinEvaluatorConfig {
+    type: "levenshtein";
+    threshold: number;
+}
+/** A JSON-structural-distance evaluator: passes when distance ≤ `threshold`. */
+export interface JsonDistanceEvaluatorConfig {
+    type: "json_distance";
+    threshold: number;
+}
+export type EvaluatorType = EvaluatorConfig["type"];
+export type EvaluatorConfig = ExactMatchEvaluatorConfig | ContainsEvaluatorConfig | RegexEvaluatorConfig | LevenshteinEvaluatorConfig | JsonDistanceEvaluatorConfig;
+export declare function isTargetEvaluator(c: EvaluatorConfig): c is ExactMatchEvaluatorConfig | ContainsEvaluatorConfig;
+export declare function isRegexEvaluator(c: EvaluatorConfig): c is RegexEvaluatorConfig;
+export declare function isThresholdEvaluator(c: EvaluatorConfig): c is LevenshteinEvaluatorConfig | JsonDistanceEvaluatorConfig;
+/** A fresh config of `type` with sensible defaults — emitted on a type switch. */
+export declare function defaultEvaluatorConfig(type: EvaluatorType): EvaluatorConfig;

package/dist/components/composites/histogram/histogram.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from "react";
+import { type HistogramBin } from "../../../lib/chart/histogram.js";
+type HistogramData = {
+    bins: HistogramBin[];
+    values?: never;
+    binCount?: never;
+} | {
+    values: number[];
+    binCount: number;
+    bins?: never;
+};
+export type HistogramProps = HTMLAttributes<HTMLElement> & {
+    title: string;
+    height?: number;
+    /** Formats the count axis label and the bin bounds in the a11y table. */
+    valueFormatter?: (v: number) => string;
+} & HistogramData;
+declare const Histogram: import("react").ForwardRefExoticComponent<HistogramProps & import("react").RefAttributes<HTMLElement>>;
+export { Histogram };

package/dist/components/composites/histogram/index.d.ts

@@ -0,0 +1,2 @@
+export { Histogram } from "./histogram.js";
+export type { HistogramProps } from "./histogram.js";

package/dist/components/composites/message-branch-selector/index.d.ts

@@ -0,0 +1 @@
+export { MessageBranchSelector, type MessageBranchSelectorProps, } from "./message-branch-selector.js";

package/dist/components/composites/message-branch-selector/message-branch-selector.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from "react";
+/**
+ * MessageBranchSelector — controlled navigator across alternative message
+ * branches (e.g. regenerated responses): "‹ 2 / 5 ›" with prev/next buttons.
+ *
+ * Fully controlled (M19 ADR D3): the consumer owns `index` and reacts to
+ * `onPrev` / `onNext`; regenerate / streaming is a platform concern, not the DS.
+ * Prev is disabled at the first branch, next at the last. With a single branch
+ * (`count <= 1`) there is nothing to navigate, so it renders nothing.
+ *
+ *   <MessageBranchSelector index={i} count={branches.length}
+ *     onPrev={() => setI(i - 1)} onNext={() => setI(i + 1)} />
+ */
+export interface MessageBranchSelectorProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Zero-based index of the active branch. */
+    index: number;
+    /** Total number of branches. */
+    count: number;
+    /** Navigate to the previous branch. */
+    onPrev: () => void;
+    /** Navigate to the next branch. */
+    onNext: () => void;
+    /** Disable both controls (e.g. while a branch is loading). */
+    disabled?: boolean;
+}
+declare const MessageBranchSelector: import("react").ForwardRefExoticComponent<MessageBranchSelectorProps & import("react").RefAttributes<HTMLDivElement>>;
+export { MessageBranchSelector };

package/dist/components/composites/percentile-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { PercentileChart } from "./percentile-chart.js";
+export type { PercentileBucket, PercentileChartProps } from "./percentile-chart.js";

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

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from "react";
+/**
+ * PercentileChart — p50/p95/p99 over time as shaded BANDS (not three flat
+ * lines), pure-SVG (M3 anti-chart-lib ADR upheld, M11 ADR D1). The p50–p95 and
+ * p95–p99 spans render as filled areas + a p50 reference line, so the spread is
+ * read at a glance (phoenix `TraceLatencyPercentilesTimeSeries` pattern, M11
+ * ADR D2 — the upgrade over the lens' current three-line overlay). Reuses
+ * `linScale`/`niceMax`/`seriesPath` from TrendChart — zero new chart dep.
+ *
+ *   <PercentileChart title="Latency" buckets={latencyBuckets}
+ *                    valueFormatter={(v) => `${v}ms`} />
+ */
+export interface PercentileBucket {
+    /** p50 value for this time bucket. */
+    p50: number;
+    /** p95 value for this time bucket. */
+    p95: number;
+    /** p99 value for this time bucket. */
+    p99: number;
+    /** Optional bucket label (read in the a11y table). */
+    label?: string;
+}
+export type PercentileChartProps = HTMLAttributes<HTMLElement> & {
+    title: string;
+    buckets: PercentileBucket[];
+    height?: number;
+    /** Formats the y-axis label and the a11y table cells. */
+    valueFormatter?: (v: number) => string;
+};
+declare const PercentileChart: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    title: string;
+    buckets: PercentileBucket[];
+    height?: number;
+    /** Formats the y-axis label and the a11y table cells. */
+    valueFormatter?: (v: number) => string;
+} & import("react").RefAttributes<HTMLElement>>;
+export { PercentileChart };

package/dist/components/composites/price-breakdown/index.d.ts

@@ -0,0 +1,2 @@
+export { PriceBreakdown } from "./price-breakdown.js";
+export type { PriceBreakdownProps } from "./price-breakdown.js";

package/dist/components/composites/price-breakdown/price-breakdown.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "react";
+/**
+ * PriceBreakdown — a `<table>` of unit prices scaled to per-unit, per-1K, and
+ * per-1M columns. Controlled and pure — the consumer supplies a `prices` map of
+ * usage-type label → price per unit; each scale is a plain multiplication
+ * (`price`, `price × 1000`, `price × 1_000_000`).
+ *
+ * An empty `prices` map renders an honest empty state, not an empty table. A
+ * visually-hidden caption gives screen readers the table's purpose.
+ *
+ *   <PriceBreakdown prices={{ input: 0.000003, output: 0.000015 }} unit="token" />
+ */
+export interface PriceBreakdownProps extends HTMLAttributes<HTMLTableElement> {
+    /** Usage-type label → price per unit. */
+    prices: Record<string, number>;
+    /** The unit each price is quoted per. Default `"token"`. */
+    unit?: string;
+    className?: string;
+}
+declare const PriceBreakdown: import("react").ForwardRefExoticComponent<PriceBreakdownProps & import("react").RefAttributes<HTMLTableElement>>;
+export { PriceBreakdown };

package/dist/components/composites/prompt-template-editor/extract-vars.d.ts

@@ -0,0 +1 @@
+export declare function extractVars(template: string): string[];

package/dist/components/composites/prompt-template-editor/index.d.ts

@@ -0,0 +1,2 @@
+export { PromptTemplateEditor, type PromptTemplateEditorProps, } from "./prompt-template-editor.js";
+export { extractVars } from "./extract-vars.js";

package/dist/components/composites/prompt-template-editor/prompt-template-editor.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from "react";
+/**
+ * PromptTemplateEditor — a controlled template editor: a `Textarea` plus a
+ * simple hint area listing available variables and which are used vs missing.
+ *
+ * The hint is a lightweight overlay over the plain textarea (M19 ADR D1 —
+ * parsimony rung 5): variable detection uses the pure `extractVars` helper;
+ * NO CodeMirror / editor library. "Used" = the variable appears in the current
+ * value; "missing" = it is used in the value but not declared in `variables`.
+ *
+ *   <PromptTemplateEditor value={t} onChange={setT} variables={["name","city"]} />
+ */
+export interface PromptTemplateEditorProps extends Omit<HTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    /** The template text. */
+    value: string;
+    /** Emits the new template text on each edit. */
+    onChange: (value: string) => void;
+    /** Variables the caller declares available to this template. */
+    variables?: string[];
+    /** Disable editing. */
+    disabled?: boolean;
+}
+declare const PromptTemplateEditor: import("react").ForwardRefExoticComponent<PromptTemplateEditorProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { PromptTemplateEditor };

package/dist/components/composites/prompt-version-diff/index.d.ts

@@ -0,0 +1,4 @@
+export { PromptVersionDiff } from "./prompt-version-diff.js";
+export type { PromptVersionDiffProps } from "./prompt-version-diff.js";
+export type { PromptSnapshot, ChatMessage } from "./to-diff-text.js";
+export { templateToText, configToText } from "./to-diff-text.js";

package/dist/components/composites/prompt-version-diff/prompt-version-diff.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "react";
+import { type DiffSectionCommon } from "../diff-view/diff-section.js";
+import { type PromptSnapshot } from "./to-diff-text.js";
+/**
+ * PromptVersionDiff — diffs two prompt versions (M14 ADR D3). Normalizes each
+ * snapshot's template (string passthrough; chat array → `role: content` text)
+ * and config (pretty JSON) to plain text, then composes `DiffView` for content
+ * and, when present, config. Zero new dependency — reuses the DS diff primitive.
+ *
+ * The config diff is omitted honestly when both versions have no config, rather
+ * than rendering an empty "No changes" table nobody asked for.
+ *
+ *   <PromptVersionDiff oldPrompt={v1} newPrompt={v2} />
+ */
+export type PromptVersionDiffProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & DiffSectionCommon & {
+    oldPrompt: PromptSnapshot;
+    newPrompt: PromptSnapshot;
+};
+declare function PromptVersionDiff(props: PromptVersionDiffProps): import("react").JSX.Element;
+export { PromptVersionDiff };

package/dist/components/composites/prompt-version-diff/to-diff-text.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Pure normalizers that turn a prompt snapshot's domain shape into the plain
+ * text `DiffView` diffs (M14 ADR D3 — composites normalize, DiffView diffs).
+ * No React, no I/O; total and deterministic.
+ */
+/** A single chat message in an array-shaped (ChatML-style) template. */
+export interface ChatMessage {
+    role: string;
+    content: string;
+}
+/** A prompt version: either a raw string template or a chat-message array. */
+export interface PromptSnapshot {
+    template: string | ChatMessage[];
+    config?: Record<string, unknown>;
+}
+/**
+ * Normalize a template to readable text. A string passes through unchanged; a
+ * chat array becomes one `role: content` line per message (blank line between
+ * messages so multi-line contents stay legible in the diff).
+ */
+export declare function templateToText(template: string | ChatMessage[]): string;
+/**
+ * Pretty-print a config object to JSON. Absent/empty → "" (the caller omits the
+ * config diff entirely when both sides are empty).
+ */
+export declare function configToText(config?: Record<string, unknown>): string;

package/dist/components/composites/session-summary/index.d.ts

@@ -0,0 +1 @@
+export { SessionSummary, type SessionSummaryProps } from "./session-summary.js";

package/dist/components/composites/session-summary/session-summary.d.ts

@@ -0,0 +1,18 @@
+import type { SessionMetrics, SessionTraceItem } from "../../../lib/session/types.js";
+export interface SessionSummaryProps {
+    /** The session's traces — aggregated internally. Supply `metrics` instead to pass a pre-aggregate. */
+    items?: SessionTraceItem[];
+    /** Pre-computed metrics (overrides `items`). */
+    metrics?: SessionMetrics;
+    /** USD cost formatter. Default `$0.0000`. */
+    formatCostUsd?: (usd: number) => string;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * SessionSummary — a `<dl>` of honest aggregate metrics over a session's traces: trace count, the
+ * session wall-clock window, ∑ cost, ∑ tokens, error count (highlighted destructive when > 0), and
+ * the distinct models. Sums of zero are honest (`$0.0000`, `0`), never an em-dash. Pass `items` (it
+ * aggregates via `aggregateSession`) or a pre-computed `metrics`.
+ */
+export declare function SessionSummary({ items, metrics, formatCostUsd, className, "aria-label": ariaLabel, }: SessionSummaryProps): import("react").JSX.Element;

package/dist/components/composites/session-timeline/index.d.ts

@@ -0,0 +1 @@
+export { SessionTimeline, type SessionTimelineProps } from "./session-timeline.js";

package/dist/components/composites/session-timeline/session-timeline.d.ts

@@ -0,0 +1,22 @@
+import type { SessionTraceItem } from "../../../lib/session/types.js";
+export interface SessionTimelineProps {
+    /** The session's traces (rendered in start-time order regardless of input order). */
+    items: SessionTraceItem[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    /** ns → label for the row timestamp. Default ISO datetime. */
+    formatTimestamp?: (ns: bigint) => string;
+    /** USD cost formatter. Default `$0.0000`. */
+    formatCostUsd?: (usd: number) => string;
+    /** Row count at/above which the virtualized path engages. Default 200. */
+    virtualizeThreshold?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * SessionTimeline — a temporal replay of a session: one row per trace, sorted by start time, each
+ * showing the timestamp, name, a duration bar relative to the session window (via the trace-core
+ * `computeBarLayout`), status, and cost. Controlled selection; virtualizes above the threshold.
+ * Escaped text only.
+ */
+export declare function SessionTimeline({ items, selectedId, onSelect, formatTimestamp, formatCostUsd, virtualizeThreshold, className, "aria-label": ariaLabel, }: SessionTimelineProps): import("react").JSX.Element;

package/dist/components/composites/severity-badge/index.d.ts

@@ -0,0 +1,2 @@
+export { SeverityBadge } from "./severity-badge.js";
+export type { Severity, BadgeVariant, SeverityBadgeProps } from "./severity-badge.js";