@linxiraos/pi-stats 1.1.7 → 1.1.8

package/dist/client/styles.css

@@ -481,36 +481,31 @@
 }
 :root {
   color-scheme: dark;
-  --bg: #1a1a1a;
-  --bg-panel: #242424;
-  --bg-hover: #2e2e2e;
-  --bg-selected: #383838;
-  --bg-subtle: rgba(255,255,255,0.04);
-  --border: #3a3a3a;
-  --border-strong: rgba(255,255,255,0.13);
-  --text: #e8e8e8;
-  --text-muted: #9ca3af;
-  --text-dim: #6b7280;
-  --accent: #60a5fa;
-  --accent-hover: #93c5fd;
-  --accent-fg: #0f172a;
-  --accent-muted: rgba(96,165,250,0.18);
-  --link: #60a5fa;
-  --success: #22c55e;
-  --danger: #ef4444;
-  --warning: #f59e0b;
-  --page: var(--bg);
-  --surface: var(--bg-panel);
-  --surface-2: var(--bg-hover);
-  --muted: var(--text-muted);
-  --dim: var(--text-dim);
+  --page: oklch(0.16 0.02 307);
+  --surface: oklch(0.19 0.022 307);
+  --surface-2: oklch(0.235 0.026 307);
+  --border: oklch(1 0 0 / 9%);
+  --border-strong: oklch(1 0 0 / 13%);
+  --text: oklch(0.92 0.01 307);
+  --muted: oklch(0.71 0.016 307);
+  --dim: oklch(0.53 0.018 307);
+  --accent: oklch(0.674 0.23 341);
+  --accent-fg: oklch(0.2 0.07 341);
+  --accent-muted: oklch(0.674 0.23 341 / 18%);
+  --link: oklch(0.817 0.112 205);
+  --success: oklch(0.76 0.14 150);
+  --danger: oklch(0.66 0.19 25);
+  --warning: oklch(0.79 0.14 85);
   --text-primary: var(--text);
-  --text-secondary: var(--text-muted);
+  --text-secondary: var(--muted);
+  --text-muted: var(--dim);
   --border-subtle: var(--border);
   --accent-red: var(--danger);
   --accent-green: var(--success);
   --accent-cyan: var(--link);
-  --bg-elevated: var(--bg-hover);
+  --bg-hover: var(--surface-2);
+  --bg-elevated: var(--surface-2);
+  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   --radius-sm: 3px;
   --radius-md: 6px;
   --radius-lg: 8px;
@@ -518,82 +513,42 @@
 @media (prefers-color-scheme: light) {
   :root:not([data-theme]) {
     color-scheme: light;
-    --bg: #ffffff;
-    --bg-panel: #f5f5f5;
-    --bg-hover: #eeeeee;
-    --bg-selected: #e8e8e8;
-    --bg-subtle: rgba(0,0,0,0.03);
-    --border: #e0e0e0;
-    --border-strong: rgba(0,0,0,0.15);
-    --text: #1a1a1a;
-    --text-muted: #6b7280;
-    --text-dim: #9ca3af;
-    --accent: #2563eb;
-    --accent-hover: #1d4ed8;
-    --accent-fg: #ffffff;
-    --accent-muted: rgba(37,99,235,0.14);
-    --link: #2563eb;
-    --success: #16a34a;
-    --danger: #dc2626;
-    --warning: #d97706;
-    --page: var(--bg);
-    --surface: var(--bg-panel);
-    --surface-2: var(--bg-hover);
-    --muted: var(--text-muted);
-    --dim: var(--text-dim);
+    --page: oklch(0.985 0.004 307);
+    --surface: oklch(1 0 0);
+    --surface-2: oklch(0.965 0.006 307);
+    --border: oklch(0 0 0 / 10%);
+    --border-strong: oklch(0 0 0 / 15%);
+    --text: oklch(0.26 0.03 307);
+    --muted: oklch(0.46 0.03 307);
+    --dim: oklch(0.58 0.025 307);
+    --accent: oklch(0.62 0.23 341);
+    --accent-fg: oklch(0.99 0.01 341);
+    --accent-muted: oklch(0.62 0.23 341 / 14%);
+    --link: oklch(0.58 0.13 230);
+    --success: oklch(0.55 0.13 150);
+    --danger: oklch(0.55 0.19 25);
+    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    --warning: oklch(0.6 0.13 85);
   }
 }
 [data-theme="light"] {
   color-scheme: light;
-  --bg: #ffffff;
-  --bg-panel: #f5f5f5;
-  --bg-hover: #eeeeee;
-  --bg-selected: #e8e8e8;
-  --bg-subtle: rgba(0,0,0,0.03);
-  --border: #e0e0e0;
-  --border-strong: rgba(0,0,0,0.15);
-  --text: #1a1a1a;
-  --text-muted: #6b7280;
-  --text-dim: #9ca3af;
-  --accent: #2563eb;
-  --accent-hover: #1d4ed8;
-  --accent-fg: #ffffff;
-  --accent-muted: rgba(37,99,235,0.14);
-  --link: #2563eb;
-  --success: #16a34a;
-  --danger: #dc2626;
-  --warning: #d97706;
-  --page: var(--bg);
-  --surface: var(--bg-panel);
-  --surface-2: var(--bg-hover);
-  --muted: var(--text-muted);
-  --dim: var(--text-dim);
-}
-[data-theme="starfield"] {
-  color-scheme: dark;
-  --bg: #08090d;
-  --bg-panel: #0d1117;
-  --bg-hover: #161d2e;
-  --bg-selected: #1a2540;
-  --bg-subtle: rgba(217,155,38,0.05);
-  --border: #1e2d45;
-  --border-strong: rgba(217,155,38,0.2);
-  --text: #e8eeff;
-  --text-muted: #8fa3c0;
-  --text-dim: #3d5070;
-  --accent: #d99b26;
-  --accent-hover: #f0b840;
-  --accent-fg: #0f172a;
-  --accent-muted: rgba(217,155,38,0.18);
-  --link: #d99b26;
-  --success: #22c55e;
-  --danger: #c81d25;
-  --warning: #e05a2b;
-  --page: var(--bg);
-  --surface: var(--bg-panel);
-  --surface-2: var(--bg-hover);
-  --muted: var(--text-muted);
-  --dim: var(--text-dim);
+  --page: oklch(0.985 0.004 307);
+  --surface: oklch(1 0 0);
+  --surface-2: oklch(0.965 0.006 307);
+  --border: oklch(0 0 0 / 10%);
+  --border-strong: oklch(0 0 0 / 15%);
+  --text: oklch(0.26 0.03 307);
+  --muted: oklch(0.46 0.03 307);
+  --dim: oklch(0.58 0.025 307);
+  --accent: oklch(0.62 0.23 341);
+  --accent-fg: oklch(0.99 0.01 341);
+  --accent-muted: oklch(0.62 0.23 341 / 14%);
+  --link: oklch(0.58 0.13 230);
+  --success: oklch(0.55 0.13 150);
+  --danger: oklch(0.55 0.19 25);
+  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  --warning: oklch(0.6 0.13 85);
 }
 @layer base {
   * {
@@ -910,6 +865,50 @@
   background: var(--surface);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
 }
+.stats-select {
+  appearance: none;
+  padding: 6px 28px 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--text);
+  background-color: var(--surface-2);
+  background-image: var(--select-chevron);
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+  max-width: 100%;
+  text-overflow: ellipsis;
+}
+.stats-select:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background-color: var(--bg-hover);
+}
+.stats-select:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 1px;
+}
+.stats-select:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@media (pointer: coarse) {
+  .stats-select {
+    font-size: 16px;
+  }
+}
+.stats-select option {
+  background-color: var(--surface);
+  color: var(--text);
+}
+@media (forced-colors: active) {
+  .stats-select {
+    appearance: auto;
+  }
+}
 .stats-sync-container {
   display: flex;
   align-items: center;
@@ -1571,7 +1570,7 @@
   width: 16px;
   height: 16px;
   border-radius: 4px;
-  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #60a5fa 100%);
+  background: linear-gradient(135deg, #ed4abf 0%, #9b4dff 50%, #5ad8e6 100%);
 }
 .stats-logo-text, .stats-logo-subtext {
   grid-column: 2;
@@ -1632,6 +1631,271 @@
     transition: none;
   }
 }
+.stats-trace-view {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.stats-trace-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.stats-trace-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: var(--muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: color 0.14s ease, border-color 0.14s ease;
+}
+.stats-trace-back:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+.stats-trace-back:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+.stats-trace-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stats-trace-cwd {
+  font-size: 11px;
+  color: var(--dim);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 3px 10px;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stats-trace-summary {
+  display: flex;
+  flex-wrap: wrap;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+.stats-trace-summary-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 10px 16px;
+  border-right: 1px solid var(--border);
+  min-width: 76px;
+}
+.stats-trace-summary-cell:last-child {
+  border-right: none;
+}
+.stats-trace-summary-label {
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--dim);
+}
+.stats-trace-summary-value {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+.stats-trace-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.stats-trace-toolbar-hint {
+  font-size: 10px;
+  color: var(--dim);
+  margin-left: auto;
+}
+.stats-trace-input {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  font-size: 12px;
+  padding: 6px 10px;
+}
+.stats-trace-input:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 1px;
+}
+.stats-trace-input::placeholder {
+  color: var(--dim);
+}
+.stats-trace-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+  cursor: pointer;
+  user-select: none;
+}
+.stats-trace-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--muted);
+  cursor: pointer;
+  transition: color 0.14s ease, border-color 0.14s ease;
+}
+.stats-trace-icon-btn:hover:not(:disabled) {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+.stats-trace-icon-btn:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+.stats-trace-icon-btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.stats-trace-timeline-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.stats-trace-timeline {
+  position: relative;
+  display: flex;
+  max-height: 560px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.stats-trace-canvas {
+  cursor: grab;
+  outline: none;
+  touch-action: none;
+  border-radius: var(--radius-sm);
+}
+.stats-trace-canvas:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: 2px;
+}
+.stats-trace-canvas:active {
+  cursor: grabbing;
+}
+.stats-trace-chevron {
+  display: inline-flex;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--muted);
+}
+.stats-trace-chevron:hover {
+  color: var(--text);
+}
+.stats-trace-gutter-track {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text);
+}
+.stats-trace-gutter-model {
+  font-size: 9px;
+  color: var(--dim);
+}
+.stats-trace-gutter-lane {
+  position: absolute;
+  font-size: 8px;
+  color: var(--dim);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.stats-trace-list {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  height: 340px;
+  overflow-y: auto;
+}
+.stats-trace-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 28px;
+  width: 100%;
+  padding: 0 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.stats-trace-row:hover {
+  background: var(--bg-hover);
+}
+.stats-trace-row:focus-visible {
+  outline: 2px solid var(--link);
+  outline-offset: -2px;
+}
+.stats-trace-row[data-selected="true"] {
+  background: var(--accent-muted);
+}
+.stats-trace-row-static {
+  cursor: default;
+}
+.stats-trace-row-static:hover {
+  background: transparent;
+}
+.stats-trace-kind {
+  flex-shrink: 0;
+  width: 58px;
+  font-size: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-radius: 3px;
+  padding: 2px 0;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stats-trace-row-meta {
+  flex-shrink: 0;
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--dim);
+  font-variant-numeric: tabular-nums;
+  display: flex;
+  gap: 10px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .stats-trace-back, .stats-trace-icon-btn, .stats-trace-row {
+    transition: none;
+  }
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;

package/dist/types/client/api.d.ts

@@ -1,4 +1,4 @@
-import type { BehaviorDashboardStats, CostDashboardStats, FolderStats, GainDashboardStats, MessageStats, ModelDashboardStats, OverviewStats, ProviderDashboardStats, RequestDetails, TimeRange, ToolDashboardStats } from "./types.js";
+import type { BehaviorDashboardStats, CostDashboardStats, FolderStats, GainDashboardStats, MessageStats, ModelDashboardStats, OverviewStats, ProviderDashboardStats, RequestDetails, SessionSummary, SessionTrace, TimeRange, ToolDashboardStats } from "./types.js";
 export declare class ApiError extends Error {
     status: number;
     endpoint: string;
@@ -20,3 +20,9 @@ export declare function getFolderStats(range?: TimeRange, signal?: AbortSignal):
 export declare function getGainDashboardStats(range?: TimeRange, project?: string | null, signal?: AbortSignal): Promise<GainDashboardStats>;
 export declare function getToolDashboardStats(range?: TimeRange, signal?: AbortSignal): Promise<ToolDashboardStats>;
 export declare function getProviderDashboardStats(range?: TimeRange, signal?: AbortSignal): Promise<ProviderDashboardStats>;
+export declare function getSessions(limit?: number, q?: string, signal?: AbortSignal): Promise<SessionSummary[]>;
+export declare function getSessionTrace(file: string, signal?: AbortSignal): Promise<SessionTrace>;
+/** Fetch one full journal entry for the span drawer. Entries are opaque JSON. */
+export declare function getSessionEntryDetail(file: string, id: string, signal?: AbortSignal): Promise<{
+    entry: unknown;
+}>;

package/dist/types/client/app/routes.d.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-export type DashboardSection = "overview" | "requests" | "errors" | "models" | "providers" | "tools" | "costs" | "behavior" | "projects" | "gain";
+export type DashboardSection = "overview" | "requests" | "traces" | "errors" | "models" | "providers" | "tools" | "costs" | "behavior" | "projects" | "gain";
 export interface DashboardRoute {
     id: DashboardSection;
     label: string;

package/dist/types/client/data/useHashRoute.d.ts

@@ -5,4 +5,6 @@ export declare function useHashRoute(): {
     setSection: (newSection: DashboardSection) => void;
     range: TimeRange;
     setRange: (newRange: string) => void;
+    session: string | null;
+    setSession: (file: string | null) => void;
 };

package/dist/types/client/routes/TracesRoute.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Traces section: root-session list (subagents folded in) that opens the
+ * flamegraph trace viewer for a selected session.
+ */
+export interface TracesRouteProps {
+    active: boolean;
+    session: string | null;
+    onOpenSession: (file: string | null) => void;
+    refreshTrigger: number;
+}
+export declare function TracesRoute({ active, session, onOpenSession, refreshTrigger }: TracesRouteProps): import("react").JSX.Element;

package/dist/types/client/routes/index.d.ts

@@ -8,3 +8,4 @@ export * from "./ProjectsRoute.js";
 export * from "./ProvidersRoute.js";
 export * from "./RequestsRoute.js";
 export * from "./ToolsRoute.js";
+export * from "./TracesRoute.js";

package/dist/types/client/traces/AggregatesPanel.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Collapsible per-tool duration aggregates for one trace, sorted by total
+ * time descending (as produced by the server).
+ */
+import type { TraceToolStat } from "../types.js";
+export interface AggregatesPanelProps {
+    toolStats: TraceToolStat[];
+}
+export declare function AggregatesPanel({ toolStats }: AggregatesPanelProps): import("react").JSX.Element | null;

package/dist/types/client/traces/Minimap.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Timeline overview strip: per-category density over the full virtual domain
+ * plus a draggable/resizable viewport brush, mirroring DevTools' overview.
+ */
+import type { TraceTrack } from "../types.js";
+import type { TimelineViewport } from "./TimelineCanvas.js";
+import type { TraceScale } from "./time-scale.js";
+export interface MinimapProps {
+    tracks: TraceTrack[];
+    scale: TraceScale;
+    viewport: TimelineViewport;
+    onViewportChange: (viewport: TimelineViewport) => void;
+}
+export declare function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapProps): import("react").JSX.Element;

package/dist/types/client/traces/SpanDrawer.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Detail drawer for a selected trace span. Fetches the full journal entry on
+ * demand (`/api/session/entry`) and renders per-kind detail: model usage grid
+ * + text blocks, tool args/result, user text, subagent task text.
+ */
+import type { TraceSpan, TraceTrack } from "../types.js";
+export interface SpanDrawerProps {
+    span: TraceSpan | null;
+    track: TraceTrack | null;
+    onClose: () => void;
+    /** Selects the first span of the given child track ("open child track"). */
+    onOpenChildTrack?: (childTrackId: string) => void;
+}
+export declare function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawerProps): import("react").JSX.Element | null;

package/dist/types/client/traces/SummaryStrip.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Headline chips for one trace: wall/model/tool/idle time, turns, requests,
+ * tool calls, agents, tokens, cost.
+ */
+import type { TraceSummary } from "../types.js";
+export interface SummaryStripProps {
+    summary: TraceSummary;
+}
+export declare function SummaryStrip({ summary }: SummaryStripProps): import("react").JSX.Element;

package/dist/types/client/traces/TimelineCanvas.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The trace flamegraph: one DPR-scaled canvas with a DOM gutter (track/lane
+ * labels, collapse chevrons) and a DOM tooltip. Implements the Chrome
+ * DevTools interaction contract: cursor-anchored wheel zoom, drag pan, WASD,
+ * fit/focus keys, hover tooltips, click-to-select, double-click-to-zoom.
+ */
+import type { TraceTrack } from "../types.js";
+import { type TraceScale } from "./time-scale.js";
+export interface TimelineViewport {
+    u0: number;
+    u1: number;
+}
+export interface TimelineCanvasProps {
+    tracks: TraceTrack[];
+    scale: TraceScale;
+    viewport: TimelineViewport;
+    onViewportChange: (viewport: TimelineViewport) => void;
+    selection: string | null;
+    onSelect: (spanId: string | null) => void;
+    search: string;
+    collapsed: ReadonlySet<string>;
+    onToggleCollapse: (trackId: string) => void;
+    traceStart: number;
+}
+export declare function TimelineCanvas({ tracks, scale, viewport, onViewportChange, selection, onSelect, search, collapsed, onToggleCollapse, traceStart, }: TimelineCanvasProps): import("react").JSX.Element;

package/dist/types/client/traces/TraceView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Single-session trace viewer: summary strip, axis-mode toolbar, minimap,
+ * flamegraph canvas, transcript list, tool aggregates, and the span drawer.
+ * Owns the shared viewport/selection state so all pieces stay in sync.
+ */
+export interface TraceViewProps {
+    file: string;
+    active: boolean;
+    onBack: () => void;
+}
+export declare function TraceView({ file, active, onBack }: TraceViewProps): import("react").JSX.Element;

package/dist/types/client/traces/TranscriptList.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Windowed transcript list under the timeline: all spans + markers flattened
+ * chronologically across tracks, bidirectionally synced with the canvas
+ * selection. Hand-rolled fixed-row virtualization (32px rows, spacer divs).
+ */
+import type { TraceMarker, TraceSpan, TraceTrack } from "../types.js";
+export interface TranscriptRow {
+    key: string;
+    time: number;
+    span?: TraceSpan;
+    marker?: TraceMarker;
+    track: TraceTrack;
+    depth: number;
+}
+export interface TranscriptListProps {
+    tracks: TraceTrack[];
+    selection: string | null;
+    onSelect: (spanId: string) => void;
+    search: string;
+    traceStart: number;
+}
+/** Flatten all spans and markers across tracks into chronological rows. */
+export declare function buildTranscriptRows(tracks: TraceTrack[]): TranscriptRow[];
+export declare function TranscriptList({ tracks, selection, onSelect, search, traceStart }: TranscriptListProps): import("react").JSX.Element;