@oh-my-pi/omp-stats 18.0.11 → 18.1.0

package/dist/client/styles.css

@@ -1584,6 +1584,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;

package/dist/types/client/traces/time-scale.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Virtual time axis for the trace flamegraph.
+ *
+ * All three axis modes are piecewise-linear monotonic maps over global wall
+ * time, so cross-track alignment is preserved in every mode:
+ * - `time`: identity, or idle-compressed (long gaps collapse to fixed bridges)
+ * - `turns`: each main-track turn interval gets equal virtual width
+ * - `calls`: each interval between consecutive span boundaries gets equal width
+ */
+import type { TraceTrack } from "../types.js";
+export type AxisMode = "time" | "turns" | "calls";
+export interface TraceScale {
+    /** ms epoch → virtual axis; monotonic non-decreasing. */
+    toU(t: number): number;
+    /** Inverse (clamped to domain). */
+    toT(u: number): number;
+    /** Virtual axis domain. */
+    domain: [number, number];
+    /** Idle bridges (time mode + compression): real gap [t0,t1] at virtual uMid. */
+    gaps: Array<{
+        t0: number;
+        t1: number;
+        uMid: number;
+    }>;
+}
+/** Build the axis map for the given mode over all tracks. */
+export declare function buildScale(tracks: TraceTrack[], mode: AxisMode, compressIdle: boolean): TraceScale;
+export interface Tick {
+    u: number;
+    label: string;
+    major: boolean;
+}
+/** Offset label from trace start: `+mm:ss.mmm`, hours prepended when needed. */
+export declare function formatOffset(deltaMs: number): string;
+/**
+ * Ruler ticks inside `[u0, u1]`. Ticks are placed at nice wall-time steps in
+ * the underlying t-space (per linear segment in compressed/sequence modes),
+ * with major ticks labelled as local wall clock and minors as offsets.
+ */
+export declare function buildTicks(scale: TraceScale, u0: number, u1: number, widthPx: number): Tick[];

package/dist/types/client/traces/trace-colors.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Category palette + canvas chrome tokens for the trace flamegraph, keyed by
+ * resolved theme. Hues align with the dashboard chip palette; chrome tokens
+ * mirror `CHART_THEMES` so the canvas matches the chart.js surfaces.
+ */
+import type { TraceSpanKind } from "../types.js";
+export interface TraceTheme {
+    /** Span fill per category. */
+    category: Record<TraceSpanKind, string>;
+    /** Error fill tint + left-edge accent. */
+    error: string;
+    /** Marker diamond fill. */
+    marker: string;
+    /** Alternating turn-band fill. */
+    turnBand: string;
+    /** Canvas background. */
+    surface: string;
+    /** Ruler/lane hairlines. */
+    grid: string;
+    /** Ruler tick labels. */
+    tick: string;
+    /** Span label text drawn inside blocks. */
+    spanText: string;
+    /** Selection outline (brand cyan focus ring). */
+    selection: string;
+    tooltipBackground: string;
+    tooltipTitle: string;
+    tooltipBody: string;
+    tooltipBorder: string;
+}
+export declare const TRACE_THEMES: Record<"dark" | "light", TraceTheme>;

package/dist/types/db.d.ts

@@ -1,5 +1,5 @@
 import { Database } from "bun:sqlite";
-import type { AgentTypeStats, AggregatedStats, BehaviorModelStats, BehaviorOverallStats, BehaviorTimeSeriesPoint, CostTimeSeriesPoint, FolderStats, MessageStats, ModelPerformancePoint, ModelStats, ModelTimeSeriesPoint, ProviderAggregate, ProviderHourlyPoint, ProviderTimeSeriesPoint, TimeSeriesPoint, ToolCallStats, ToolModelStats, ToolResultLink, ToolTimeSeriesPoint, ToolUsageStats, UserMessageLink, UserMessageStats } from "./types.js";
+import type { AgentTypeStats, AggregatedStats, BehaviorModelStats, BehaviorOverallStats, BehaviorTimeSeriesPoint, CostTimeSeriesPoint, DailyActivityPoint, FolderStats, MessageStats, ModelPerformancePoint, ModelStats, ModelTimeSeriesPoint, ProviderAggregate, ProviderHourlyPoint, ProviderTimeSeriesPoint, TimeSeriesPoint, ToolCallStats, ToolModelStats, ToolResultLink, ToolTimeSeriesPoint, ToolUsageStats, UserMessageLink, UserMessageStats } from "./types.js";
 /**
  * Initialize the database and create tables.
  */
@@ -90,10 +90,33 @@ export declare function closeDb(): void;
 export declare function getRecentRequests(limit?: number): MessageStats[];
 export declare function getRecentErrors(limit?: number, cutoff?: number | null): MessageStats[];
 export declare function getMessageById(id: number): MessageStats | null;
+/** Per-transcript-file rollup for the Traces session list. */
+export interface SessionRollupRow {
+    sessionFile: string;
+    requests: number;
+    startedAt: number;
+    endedAt: number;
+    totalTokens: number;
+    costTotal: number;
+    /** Comma-joined DISTINCT models. */
+    models: string;
+}
+/** Aggregate every synced transcript file into one row (subagents unfolded). */
+export declare function getSessionRollups(): SessionRollupRow[];
+/** Tool-call counts keyed by transcript file, for the Traces session list. */
+export declare function getToolCallCountsBySession(): Map<string, number>;
 /**
  * Get daily cost time series data for the last N days, broken down by model.
  */
 export declare function getCostTimeSeries(days?: number, cutoff?: number | null): CostTimeSeriesPoint[];
+/**
+ * Per-local-day activity aggregates for the last `days` days, oldest first.
+ * Self-initializing (opens the stats DB on first use) so the coding-agent TUI
+ * can query without the dashboard server's init flow. Days use the machine's
+ * timezone — this is a localhost tool, same rationale as
+ * {@link getProviderHourlyBurn}.
+ */
+export declare function getDailyActivity(days?: number): Promise<DailyActivityPoint[]>;
 /**
  * Settle every full-session backfill after a successful sync pass.
  */

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ export { getDashboardStats, getToolDashboardStats, getTotalMessageCount, type Sy
 export { closeDb } from "./db.js";
 export { getGainDashboardStats } from "./gain-aggregator.js";
 export { formatStatsDashboardUrl, startServer } from "./server.js";
-export type { GainDashboardStats, GainSource, GainSourceTotals, GainTimeSeriesPoint, } from "./shared-types.js";
+export type { GainDashboardStats, GainSource, GainSourceTotals, GainTimeSeriesPoint } from "./shared-types.js";
 export type { AggregatedStats, DashboardStats, FolderStats, MessageStats, ModelPerformancePoint, ModelStats, ModelTimeSeriesPoint, TimeSeriesPoint, ToolDashboardStats, ToolModelStats, ToolTimeSeriesPoint, ToolUsageStats, } from "./types.js";
 /** Parsed arguments for the standalone `omp-stats` entry point. */
 export interface StandaloneStatsArgs {

package/dist/types/parser.d.ts

@@ -10,6 +10,14 @@ import type { AgentType, MessageStats, SessionEntry, ToolCallStats, ToolResultLi
  * is a task `subagent`.
  */
 export declare function classifyAgentType(sessionPath: string): AgentType;
+/**
+ * Extract folder name from session filename.
+ * Session files are named like: --work--pi--/timestamp_uuid.jsonl
+ * The folder part uses -- as path separator.
+ */
+export declare function extractFolderFromPath(sessionPath: string): string;
+/** Parse every well-formed entry in a transcript buffer (malformed lines skipped). */
+export declare function parseAllSessionEntries(bytes: Uint8Array): SessionEntry[];
 /**
  * Parse a session file and extract all assistant message stats.
  * Uses incremental reading with offset tracking.

package/dist/types/server.d.ts

@@ -7,8 +7,9 @@ export declare function formatStatsDashboardUrl(hostname: string, port: number):
 /**
  * Start the HTTP server, reusing a live dashboard or reclaiming a stale omp listener.
  */
-export declare function startServer(port?: number, hostname?: string): Promise<{
+export interface StatsServerHandle {
     hostname: string;
     port: number;
     stop: () => void;
-}>;
+}
+export declare function startServer(port?: number, hostname?: string): Promise<StatsServerHandle>;