@usetheo/ui 0.22.0 → 0.23.0

package/dist/components/composites/attributes-table/attributes-table.d.ts

@@ -0,0 +1,20 @@
+export interface AttributesTableProps {
+    attrs?: Record<string, unknown>;
+    /** Predicate marking a key's value as sensitive (masked fail-closed). Default: nothing masked. */
+    maskedKeys?: (key: string) => boolean;
+    /** Whether the viewer is authorized to reveal masked values. Default false (fail-closed). */
+    canReveal?: boolean;
+    /** Keys promoted to a badge header above the namespace cards. */
+    promoted?: string[];
+    /** Namespace cards start expanded. Default true. */
+    defaultOpen?: boolean;
+}
+/**
+ * AttributesTable — namespace-grouped OTel span attributes with fail-closed
+ * PII masking. A `maskedKeys`-flagged value renders as `•••`; its raw string
+ * NEVER enters the DOM (no text node, no title/aria/data) until Reveal is
+ * clicked AND `canReveal` is true, and its CopyButton is withheld until then.
+ * When `!canReveal` the reveal control is a quiet "masked" hint, not an inert
+ * button. Object values fall back to the dependency-free `JsonViewer`.
+ */
+export declare function AttributesTable({ attrs, maskedKeys, canReveal, promoted, defaultOpen, }: AttributesTableProps): import("react").JSX.Element;

package/dist/components/composites/attributes-table/index.d.ts

@@ -0,0 +1 @@
+export { AttributesTable, type AttributesTableProps } from "./attributes-table.js";

package/dist/components/composites/io-cards/index.d.ts

@@ -0,0 +1,2 @@
+export { IOCards, type IOCardsProps } from "./io-cards.js";
+export { MessageCard, MessageItem, type RenderMarkdown } from "./message-card.js";

package/dist/components/composites/io-cards/io-cards.d.ts

@@ -0,0 +1,17 @@
+import { type RenderMarkdown } from "./message-card.js";
+export interface IOCardsProps {
+    /** Raw payload string: a chat-message-array JSON, other JSON, or plain text. */
+    value?: string;
+    /** Optional slot for rendering markdown bodies (e.g. react-markdown + sanitize). Default: plain text. */
+    renderMarkdown?: RenderMarkdown;
+    "data-testid"?: string;
+}
+/**
+ * IOCards — renders a span's input/output value. A chat-message array becomes
+ * role-labeled cards (with tool-call/result linkage and long-history
+ * collapse); a redacted marker and non-chat payloads fall back to a plain
+ * message or the dependency-free `JsonViewer`. Markdown bodies go through the
+ * optional `renderMarkdown` slot — the default renderer NEVER interprets HTML
+ * (XSS-safe by construction; no `dangerouslySetInnerHTML` anywhere).
+ */
+export declare function IOCards({ value, renderMarkdown, "data-testid": testId }: IOCardsProps): import("react").JSX.Element;

package/dist/components/composites/io-cards/message-card.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { ChatMessage, ToolCall } from "../../../lib/trace/types.js";
+export type RenderMarkdown = (text: string) => ReactNode;
+/** Props shared by the message-rendering components (kills the repeated `{message, renderMarkdown}` shape). */
+interface MessageProps {
+    message: ChatMessage;
+    renderMarkdown?: RenderMarkdown;
+}
+/** A bordered, role-labeled Card: role Badge + body (markdown slot or plain text) + raw-JSON toggle. */
+export declare function MessageCard({ message, renderMarkdown }: MessageProps): import("react").JSX.Element;
+/** A dedicated tool-call card: function name + call-id + JSON arguments. Linked to its result by id. */
+export declare function ToolCallCard({ call }: {
+    call: ToolCall;
+}): import("react").JSX.Element;
+/** A tool-result card, linked to its originating call by `tool_call_id`. */
+export declare function ToolResultCard({ message }: {
+    message: ChatMessage;
+}): import("react").JSX.Element;
+/** Render one chat message as its appropriate card kind (tool-result → tool-calls → plain message). */
+export declare function MessageItem({ message, renderMarkdown }: MessageProps): import("react").JSX.Element;
+export {};

package/dist/components/composites/span-graph/index.d.ts

@@ -0,0 +1 @@
+export { SpanGraph, type SpanGraphProps } from "./span-graph.js";

package/dist/components/composites/span-graph/span-graph.d.ts

@@ -0,0 +1,19 @@
+import type { TraceSpan } from "../../../lib/trace/types.js";
+export interface SpanGraphProps {
+    root: TraceSpan;
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    /** Max spans before the honest "too large" state renders. Default 200. */
+    nodeCap?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * SpanGraph — a deterministic, dependency-free SVG rendering of the trace as a
+ * layered agent graph (depth = distance from root, order = index within
+ * depth). Edges follow parent/call order; the root→selected path is
+ * highlighted. Over `nodeCap` spans it renders an honest "too large" state
+ * instead of an unreadable hairball. No layout lib (elkjs/d3) — SVG-pure by
+ * ADR D4. Nodes are focusable buttons; selection is controlled.
+ */
+export declare function SpanGraph({ root, selectedId, onSelect, nodeCap, className, "aria-label": ariaLabel, }: SpanGraphProps): import("react").JSX.Element;

package/dist/components/composites/span-tree/index.d.ts

@@ -0,0 +1,2 @@
+export { SpanTree, type SpanTreeProps, type SpanTreeRenderCtx } from "./span-tree.js";
+export { SpanTreeRow, type SpanTreeRowProps } from "./span-tree-row.js";

package/dist/components/composites/span-tree/span-tree-row.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { TraceSpan } from "../../../lib/trace/types.js";
+export interface SpanTreeRowProps {
+    span: TraceSpan;
+    depth: number;
+    selected: boolean;
+    collapsed: boolean;
+    hasChildren: boolean;
+    posinset: number;
+    setsize: number;
+    showMetrics?: boolean;
+    /** Optional trace window for the inline timeline bar. */
+    bounds?: {
+        startNs: bigint;
+        endNs: bigint;
+    };
+    onSelect: (id: string) => void;
+    onToggle: (id: string) => void;
+    renderBadge?: (span: TraceSpan) => ReactNode;
+}
+/** The single clickable row for a span — shared by the recursive and virtualized paths. */
+export declare function SpanTreeRow({ span, depth, selected, collapsed, hasChildren, posinset, setsize, showMetrics, bounds, onSelect, onToggle, renderBadge, }: SpanTreeRowProps): import("react").JSX.Element;

package/dist/components/composites/span-tree/span-tree-virtual.d.ts

@@ -0,0 +1,7 @@
+import type { FlatSpan } from "../../../lib/trace/types.js";
+import type { SpanTreeRenderCtx } from "./span-tree.js";
+export interface SpanTreeVirtualProps extends SpanTreeRenderCtx {
+    flat: FlatSpan[];
+}
+/** Virtualized flat-list tree (large traces at/above the threshold), reusing @tanstack/react-virtual. */
+export declare function SpanTreeVirtual({ flat, selectedId, collapsed, showMetrics, bounds, onSelect, onToggle, renderBadge, }: SpanTreeVirtualProps): import("react").JSX.Element;

package/dist/components/composites/span-tree/span-tree.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+import type { TraceSpan } from "../../../lib/trace/types.js";
+/** Shared render context threaded to every row (kills per-node prop duplication). */
+export interface SpanTreeRenderCtx {
+    selectedId: string | null;
+    collapsed: Set<string>;
+    showMetrics?: boolean;
+    bounds?: {
+        startNs: bigint;
+        endNs: bigint;
+    };
+    onSelect: (id: string) => void;
+    onToggle: (id: string) => void;
+    renderBadge?: (span: TraceSpan) => ReactNode;
+}
+export interface SpanTreeProps extends Omit<SpanTreeRenderCtx, "onToggle"> {
+    /** Root span of the trace. */
+    root: TraceSpan;
+    /** Collapse toggle (controlled). */
+    onToggleCollapse: (id: string) => void;
+    /** Visible-row count at/above which the virtualized path engages. Default 200. */
+    virtualizeThreshold?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * SpanTree — an accessible, controllable tree of trace spans with full
+ * WAI-ARIA APG TreeView semantics (treeitem / level / posinset / setsize /
+ * selected / expanded / group). Renders recursively for small traces and
+ * switches to a virtualized flat-list at/above `virtualizeThreshold`. The
+ * container is keyboard-navigable (↑/↓ move, Home/End jump, Enter/Space
+ * select). Fully controlled: selection + collapse live in the consumer.
+ */
+export declare function SpanTree({ root, selectedId, onSelect, collapsed, onToggleCollapse, showMetrics, bounds, virtualizeThreshold, renderBadge, className, "aria-label": ariaLabel, }: SpanTreeProps): import("react").JSX.Element;

package/dist/components/composites/span-waterfall/index.d.ts

@@ -0,0 +1 @@
+export { SpanWaterfall, type SpanWaterfallProps } from "./span-waterfall.js";

package/dist/components/composites/span-waterfall/span-waterfall.d.ts

@@ -0,0 +1,28 @@
+import type { TraceSpan } from "../../../lib/trace/types.js";
+type Bounds = {
+    startNs: bigint;
+    endNs: bigint;
+};
+export interface SpanWaterfallProps {
+    root: TraceSpan;
+    /** Trace window; defaults to the honest min-start/max-end envelope of the whole tree. */
+    bounds?: Bounds;
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    collapsed: Set<string>;
+    /** ns → label for the hover-needle. Default ISO datetime. */
+    formatTimestamp?: (ns: bigint) => string;
+    /** USD cost formatter for the ∑ rollup badge. Default `$0.0000`. */
+    formatCostUsd?: (usd: number) => string;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * SpanWaterfall — a nice-interval time axis over row-packed span bars, a
+ * hover-needle reading the absolute wall-clock time under the pointer, and a
+ * `∑` rollup-cost badge on parent rows. Bars are percentage-positioned via
+ * `computeBarLayout` (clock-skew / in-flight → dashed unbounded). Controlled:
+ * selection lives in the consumer. Escaped text only — no HTML injection.
+ */
+export declare function SpanWaterfall({ root, bounds, selectedId, onSelect, collapsed, formatTimestamp, formatCostUsd, className, "aria-label": ariaLabel, }: SpanWaterfallProps): import("react").JSX.Element;
+export {};

package/dist/components/composites/trace-compare/index.d.ts

@@ -0,0 +1 @@
+export { TraceCompare, type TraceCompareProps, type CompareLane } from "./trace-compare.js";

package/dist/components/composites/trace-compare/trace-compare.d.ts

@@ -0,0 +1,27 @@
+import { type AlignRow } from "../../../lib/trace/align.js";
+import type { TraceSpan } from "../../../lib/trace/types.js";
+export interface CompareLane {
+    /** Display label (e.g. a trace id). */
+    id: string;
+    root: TraceSpan;
+    /** Data still loading — the lane renders a skeleton and no deltas compute. */
+    pending?: boolean;
+}
+export interface TraceCompareProps {
+    /** Baseline lane. */
+    laneA: CompareLane;
+    /** Compared lane (B vs A). */
+    laneB: CompareLane;
+    /** Custom aligner (default: structural `alignSpanTrees`). */
+    align?: (a: TraceSpan, b: TraceSpan) => AlignRow[];
+    /** USD cost formatter. Default `$0.0000`. */
+    formatCostUsd?: (usd: number) => string;
+    className?: string;
+}
+/**
+ * TraceCompare — two traces side by side (B vs A baseline): a metrics header
+ * per lane and a structural diff table. Deltas are honest — a span present in
+ * only one trace is marked `only in A/B` with no fabricated delta. The
+ * component receives DATA (lanes); fetching/URL live in the consumer.
+ */
+export declare function TraceCompare({ laneA, laneB, align, formatCostUsd, className, }: TraceCompareProps): import("react").JSX.Element;

package/dist/components/composites/trace-transcript/index.d.ts

@@ -0,0 +1 @@
+export { TraceTranscript, type TraceTranscriptProps } from "./trace-transcript.js";

package/dist/components/composites/trace-transcript/trace-transcript.d.ts

@@ -0,0 +1,26 @@
+import type { TraceSpan, TranscriptRow } from "../../../lib/trace/types.js";
+export interface TraceTranscriptProps {
+    /** Trace root — the row model is derived via `toTranscriptRows`. */
+    root: TraceSpan;
+    /** Pre-computed rows (overrides `root` derivation — mainly for tests / custom row models). */
+    rows?: TranscriptRow[];
+    selectedId: string | null;
+    onSelect: (id: string) => void;
+    /** Collapsed group ids (subagent subtrees). Uncontrolled-friendly: omit to keep all expanded. */
+    collapsedGroups?: Set<string>;
+    onToggleGroup?: (groupId: string) => void;
+    /** USD cost formatter for per-row stats. 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;
+}
+/**
+ * TraceTranscript — a reader-mode feed of a trace: one card per span (role
+ * badge + name + output preview + micro-stats), with collapsible group
+ * headers for subagent subtrees. Virtualizes at/above `virtualizeThreshold`.
+ * Controlled selection; group collapse is controlled when `collapsedGroups`
+ * is supplied. Escaped text only.
+ */
+export declare function TraceTranscript({ root, rows: rowsProp, selectedId, onSelect, collapsedGroups, onToggleGroup, formatCostUsd, virtualizeThreshold, className, "aria-label": ariaLabel, }: TraceTranscriptProps): import("react").JSX.Element;

package/dist/components/primitives/action-bar/action-bar.d.ts

@@ -19,6 +19,8 @@ import type { ElementType, HTMLAttributes, ReactNode } from "react";
 export interface ActionBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     search?: {
         placeholder: string;
+        /** Accessible name; defaults to the placeholder with trailing ellipsis stripped (issue #8). */
+        "aria-label"?: string;
         value: string;
         onChange: (value: string) => void;
     };

package/dist/components/primitives/combobox/combobox.d.ts

@@ -23,7 +23,7 @@ declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps
         ref?: React.Ref<HTMLInputElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
         value?: string;
         onValueChange?: (search: string) => void;
     } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
@@ -34,7 +34,7 @@ declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    }, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>>, "value" | "disabled" | "onSelect"> & {
         disabled?: boolean;
         onSelect?: (value: string) => void;
         value?: string;
@@ -47,7 +47,7 @@ declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps
         ref?: React.Ref<HTMLDivElement>;
     } & {
         asChild?: boolean;
-    }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    }, "key" | "asChild" | keyof HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 export { Combobox };
 export type { ComboboxProps, ComboboxContentProps, ComboboxInputProps, ComboboxItemProps };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { cn } from "./lib/cn.js";
+export { aggregateCost, asChat, contentText, isRedactedThinking, buildLayeredGraph, computeBarLayout, computeTraceBounds, deriveSpanKind, durationMs, flattenAll, flattenVisible, GRAPH_NODE_CAP, isSpanError, KIND_LABEL, niceAxisTicks, packRows, prettyValue, spanCostUsd, toNs, alignSpanTrees, groupByNamespace, traceMetrics, toTranscriptRows, VIRTUALIZE_THRESHOLD, } from "./lib/trace/index.js";
+export type { AlignDelta, AlignRow, AttributeGroup, AxisTick, BarLayout, ChatMessage, FlatSpan, GraphEdge, GraphNode, LayeredGraph, SpanKind, SpanStatus, ToolCall, TraceSpan, TranscriptRow, TranscriptRowStats, } from "./lib/trace/index.js";
 export { Button, buttonVariants, type ButtonProps } from "./components/primitives/button/index.js";
 export { Badge, badgeVariants, type BadgeProps } from "./components/primitives/badge/index.js";
 export { Breadcrumb, type BreadcrumbLinkProps, } from "./components/primitives/breadcrumb/index.js";
@@ -61,3 +63,17 @@ export { PreviewEnvCard, type PreviewEnv, type PreviewService, } from "./compone
 export { DomainConfig, type Domain, type DomainStatus, } from "./components/composites/domain-config/index.js";
 export { RollbackUI, type RollbackTarget, } from "./components/composites/rollback-ui/index.js";
 export { CommandPalette, type CommandItem, } from "./components/composites/command-palette/index.js";
+export { SpanTree, SpanTreeRow } from "./components/composites/span-tree/index.js";
+export type { SpanTreeProps, SpanTreeRowProps, SpanTreeRenderCtx, } from "./components/composites/span-tree/index.js";
+export { SpanWaterfall } from "./components/composites/span-waterfall/index.js";
+export type { SpanWaterfallProps } from "./components/composites/span-waterfall/index.js";
+export { AttributesTable } from "./components/composites/attributes-table/index.js";
+export type { AttributesTableProps } from "./components/composites/attributes-table/index.js";
+export { IOCards, MessageCard, MessageItem } from "./components/composites/io-cards/index.js";
+export type { IOCardsProps, RenderMarkdown } from "./components/composites/io-cards/index.js";
+export { TraceTranscript } from "./components/composites/trace-transcript/index.js";
+export type { TraceTranscriptProps } from "./components/composites/trace-transcript/index.js";
+export { SpanGraph } from "./components/composites/span-graph/index.js";
+export type { SpanGraphProps } from "./components/composites/span-graph/index.js";
+export { TraceCompare } from "./components/composites/trace-compare/index.js";
+export type { TraceCompareProps, CompareLane, } from "./components/composites/trace-compare/index.js";