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

package/dist/types/shared-types.d.ts

@@ -127,6 +127,20 @@ export interface CostTimeSeriesPoint {
     /** Request count */
     requests: number;
 }
+/**
+ * One local calendar day of aggregate request activity, for the `/usage`
+ * activity heatmap in the coding-agent TUI.
+ */
+export interface DailyActivityPoint {
+    /** Local calendar date, `YYYY-MM-DD`. */
+    day: string;
+    /** Summed API-equivalent cost for the day. */
+    cost: number;
+    /** Request count for the day. */
+    requests: number;
+    /** Total tokens (input + output + cache) for the day. */
+    totalTokens: number;
+}
 /**
  * Overall dashboard stats.
  */
@@ -419,3 +433,119 @@ export interface ProviderDashboardStats {
     usageSeries: UsageWindowSeries[];
     windowInsights: ProviderWindowInsight[];
 }
+/**
+ * One row of the Traces session list: a root session with every child
+ * transcript (task subagents, advisors) folded in.
+ */
+export interface SessionSummary {
+    /** Absolute root session file path (trace key). */
+    file: string;
+    /** Decoded project path (e.g. `/work/pi`). */
+    folder: string;
+    title: string | null;
+    /** ms epoch of first activity. */
+    startedAt: number;
+    /** ms epoch of last activity, children included. */
+    endedAt: number;
+    /** Assistant messages, children folded in. */
+    requests: number;
+    toolCalls: number;
+    /** Child transcript count. */
+    subagents: number;
+    totalTokens: number;
+    costTotal: number;
+    models: string[];
+}
+export type TraceSpanKind = "turn" | "model" | "tool" | "subagent" | "background";
+/** One rendered block on a trace track lane. */
+export interface TraceSpan {
+    /** `${track.id}:${entryId}` (+`:${toolCallId}` for tool spans); stable across refetch. */
+    id: string;
+    kind: TraceSpanKind;
+    /** ms epoch. */
+    start: number;
+    /** ms epoch, >= start. */
+    end: number;
+    /** ≤80 chars: tool name / model id / user-text head / agent name. */
+    label: string;
+    /** ≤160 chars: args projection / result head / task text. */
+    detail?: string;
+    /** Journal entry id for /api/session/entry. */
+    entryId?: string;
+    toolCallId?: string;
+    model?: string;
+    /** usage.totalTokens (model spans). */
+    tokens?: number;
+    /** usage.cost.total (model spans). */
+    cost?: number;
+    /** Time to first token, ms offset from start. */
+    ttft?: number;
+    isError?: boolean;
+    /** End synthesized (no result / pending at session exit). */
+    unterminated?: boolean;
+    /** Set on `subagent` spans whose child transcript became a track. */
+    childTrackId?: string;
+}
+/** Point event drawn on a track header row. */
+export interface TraceMarker {
+    /** ms epoch. */
+    time: number;
+    kind: "compaction" | "model_change" | "mode_change" | "reset" | "session_exit";
+    /** e.g. "compaction 142k→38k", model id, mode name, exit kind. */
+    label: string;
+}
+/** One transcript (main session, subagent, advisor) in a trace. */
+export interface TraceTrack {
+    /** "main" or slash-joined child key: "Scout1", "Scout1/Nested2", "__advisor". */
+    id: string;
+    parentId: string | null;
+    label: string;
+    /** session_init.agent when recorded. */
+    agent: string | null;
+    /** session_init.resolvedModel ?? first assistant model. */
+    model: string | null;
+    /** Absolute transcript path (for entry fetch). */
+    file: string;
+    /** Sorted by start. */
+    spans: TraceSpan[];
+    markers: TraceMarker[];
+}
+/** Per-tool duration aggregate across all tracks of one trace. */
+export interface TraceToolStat {
+    tool: string;
+    calls: number;
+    errors: number;
+    totalMs: number;
+    maxMs: number;
+}
+/** Headline aggregates for one trace. */
+export interface TraceSummary {
+    wallMs: number;
+    /** Summed model-span duration on the main track. */
+    modelMs: number;
+    /** Summed tool-span duration on the main track. */
+    toolMs: number;
+    /** Wall time not covered by any span on any track. */
+    idleMs: number;
+    turns: number;
+    requests: number;
+    toolCalls: number;
+    subagents: number;
+    totalTokens: number;
+    costTotal: number;
+    /** Sorted totalMs desc. */
+    toolStats: TraceToolStat[];
+}
+/** Complete span tree for one session, `/api/session/trace` payload. */
+export interface SessionTrace {
+    file: string;
+    title: string | null;
+    cwd: string | null;
+    startedAt: number;
+    endedAt: number;
+    /** Root transcript mtime; doubles as the ETag. */
+    mtimeMs: number;
+    /** DFS order, main first. */
+    tracks: TraceTrack[];
+    summary: TraceSummary;
+}

package/dist/types/trace.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Session trace assembly for the Traces dashboard section.
+ *
+ * Builds a span tree (turns, model calls, tool calls, subagents, background
+ * jobs) directly from raw session JSONL — the only source with tool start/end
+ * times — while stats.db supplies the session-list rollups. Entry shapes are
+ * mirrored structurally from the coding-agent journal (`tool_execution_start`,
+ * `session_exit`, task results, async-result batches); stats never imports
+ * coding-agent.
+ */
+import type { SessionEntry, SessionSummary, SessionTrace } from "./types.js";
+/** Client-supplied path escaped the sessions root or is not a transcript. Maps to HTTP 400. */
+export declare class TracePathError extends Error {
+}
+/**
+ * Trace payload schema/assembly revision, folded into the HTTP ETag. Bump when
+ * span assembly changes so browsers don't revalidate stale cached bodies
+ * against an unchanged transcript mtime.
+ */
+export declare const TRACE_ETAG_VERSION = 2;
+/**
+ * Assemble the full span tree for one root session transcript.
+ * Throws {@link TracePathError} for paths outside the sessions root; ENOENT
+ * passes through for the caller's 404 mapping.
+ */
+export declare function buildSessionTrace(fileParam: string): Promise<SessionTrace>;
+/** Fetch one full journal entry by id from a transcript, for the span drawer. */
+export declare function getTraceEntry(fileParam: string, entryId: string): Promise<SessionEntry | null>;
+/**
+ * List root sessions for the Traces section, folding every synced child
+ * transcript (subagents, advisors) into its root row.
+ */
+export declare function listSessionSummaries(limit?: number, q?: string): Promise<SessionSummary[]>;

package/dist/types/types.d.ts

@@ -70,7 +70,41 @@ export interface SessionServiceTierChangeEntry {
     timestamp: string;
     serviceTier: ServiceTierByFamily | ServiceTier | null;
 }
-export type SessionEntry = SessionHeader | SessionMessageEntry | SessionServiceTierChangeEntry | {
+export interface SessionModelUsageEntry {
+    type: "model_usage";
+    id: string;
+    parentId: string | null;
+    timestamp: string;
+    purpose: string;
+    role?: string;
+    api: string;
+    provider: string;
+    model: string;
+    usage: Usage;
+    stopReason?: StopReason;
+    errorMessage?: string;
+}
+/**
+ * Custom journal entry (`tool_execution_start`, `session_exit`, …). Mirrors
+ * the coding-agent shape structurally — stats never imports coding-agent.
+ */
+export interface SessionCustomEntry {
+    type: "custom";
+    id?: string;
+    parentId?: string | null;
+    timestamp?: string;
+    customType: string;
+    data?: Record<string, unknown>;
+}
+/** Structural variants the trace builder matches on beyond messages. */
+export interface SessionTypedEntry {
+    type: "session_init" | "compaction" | "model_change" | "mode_change" | "reset_boundary";
+    id?: string;
+    parentId?: string | null;
+    timestamp?: string;
+    [key: string]: unknown;
+}
+export type SessionEntry = SessionHeader | SessionMessageEntry | SessionServiceTierChangeEntry | SessionModelUsageEntry | SessionCustomEntry | SessionTypedEntry | {
     type: string;
 };
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/omp-stats",
-	"version": "18.0.10",
+	"version": "18.1.0",
 	"description": "Local observability dashboard for pi AI usage statistics",
 	"homepage": "https://omp.sh",
 	"author": "Stencil Labs, Inc.",
@@ -32,16 +32,16 @@
 		"gen:stats:reset": "bun scripts/generate-client-bundle.ts --reset",
 		"build": "bun run build.ts",
 		"dev": "bun run src/index.ts",
-		"check": "biome check . && bun run check:types",
+		"check": "oxlint . && oxfmt --check --no-error-on-unmatched-pattern 'src/**/*.{ts,tsx}' '{test,bench,examples,scripts}/**/*.ts' '*.ts' && bun run check:types",
 		"check:types": "tsgo -p tsconfig.json --noEmit && tsgo -p tsconfig.client.json --noEmit",
-		"lint": "biome lint .",
-		"fix": "biome check --write --unsafe .",
-		"fmt": "biome format --write ."
+		"lint": "oxlint .",
+		"fix": "oxlint --fix --fix-suggestions . && bun run fmt",
+		"fmt": "oxfmt --no-error-on-unmatched-pattern 'src/**/*.{ts,tsx}' '{test,bench,examples,scripts}/**/*.ts' '*.ts'"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-ai": "18.0.10",
-		"@oh-my-pi/pi-catalog": "18.0.10",
-		"@oh-my-pi/pi-utils": "18.0.10",
+		"@oh-my-pi/pi-ai": "18.1.0",
+		"@oh-my-pi/pi-catalog": "18.1.0",
+		"@oh-my-pi/pi-utils": "18.1.0",
 		"@tailwindcss/node": "^4.3.2",
 		"chart.js": "^4.5.1",
 		"lucide-react": "^1.24.0",

package/src/client/App.tsx

@@ -13,11 +13,12 @@ import {
 	ProvidersRoute,
 	RequestsRoute,
 	ToolsRoute,
+	TracesRoute,
 } from "./routes";
 import { RequestDrawer } from "./ui/RequestDrawer";
 
 export default function App() {
-	const { section, setSection, range, setRange } = useHashRoute();
+	const { section, setSection, range, setRange, session, setSession } = useHashRoute();
 	const [refreshTrigger, setRefreshTrigger] = useState(0);
 	const [selectedRequestId, setSelectedRequestId] = useState<number | null>(null);
 	const [updatedAt, setUpdatedAt] = useState<number | null>(() => Date.now());
@@ -63,6 +64,15 @@ export default function App() {
 						onRequestClick={setSelectedRequestId}
 					/>
 				);
+			case "traces":
+				return (
+					<TracesRoute
+						active={isActive}
+						session={session}
+						onOpenSession={setSession}
+						refreshTrigger={refreshTrigger}
+					/>
+				);
 			case "errors":
 				return (
 					<ErrorsRoute

package/src/client/api.ts

@@ -8,6 +8,8 @@ import type {
 	OverviewStats,
 	ProviderDashboardStats,
 	RequestDetails,
+	SessionSummary,
+	SessionTrace,
 	TimeRange,
 	ToolDashboardStats,
 } from "./types";
@@ -116,3 +118,24 @@ export async function getProviderDashboardStats(
 		signal,
 	});
 }
+export async function getSessions(limit = 100, q?: string, signal?: AbortSignal): Promise<SessionSummary[]> {
+	const params = new URLSearchParams({ limit: String(limit) });
+	if (q) params.set("q", q);
+	return fetchJson<SessionSummary[]>(`${API_BASE}/sessions?${params}`, { signal });
+}
+
+export async function getSessionTrace(file: string, signal?: AbortSignal): Promise<SessionTrace> {
+	return fetchJson<SessionTrace>(`${API_BASE}/session/trace?file=${encodeURIComponent(file)}`, { signal });
+}
+
+/** Fetch one full journal entry for the span drawer. Entries are opaque JSON. */
+export async function getSessionEntryDetail(
+	file: string,
+	id: string,
+	signal?: AbortSignal,
+): Promise<{ entry: unknown }> {
+	return fetchJson<{ entry: unknown }>(
+		`${API_BASE}/session/entry?file=${encodeURIComponent(file)}&id=${encodeURIComponent(id)}`,
+		{ signal },
+	);
+}

package/src/client/app/routes.ts

@@ -5,6 +5,7 @@ import {
 	Cpu,
 	Folder,
 	LayoutDashboard,
+	ListTree,
 	Plug,
 	Smile,
 	TrendingUp,
@@ -15,6 +16,7 @@ import type React from "react";
 export type DashboardSection =
 	| "overview"
 	| "requests"
+	| "traces"
 	| "errors"
 	| "models"
 	| "providers"
@@ -42,6 +44,11 @@ export const routes: DashboardRoute[] = [
 		label: "Requests",
 		icon: Activity,
 	},
+	{
+		id: "traces",
+		label: "Traces",
+		icon: ListTree,
+	},
 	{
 		id: "errors",
 		label: "Errors",

package/src/client/data/useHashRoute.ts

@@ -5,6 +5,7 @@ import type { TimeRange } from "../types";
 const VALID_SECTIONS: DashboardSection[] = [
 	"overview",
 	"requests",
+	"traces",
 	"errors",
 	"models",
 	"providers",
@@ -17,7 +18,7 @@ const VALID_SECTIONS: DashboardSection[] = [
 
 const VALID_RANGES: TimeRange[] = ["1h", "24h", "7d", "30d", "90d", "all"];
 
-function parseHash(hash: string): { section: DashboardSection; range: TimeRange } {
+function parseHash(hash: string): { section: DashboardSection; range: TimeRange; session: string | null } {
 	const cleanHash = hash.replace(/^#\/?/, "");
 	const [pathPart, queryPart] = cleanHash.split("?");
 
@@ -26,15 +27,22 @@ function parseHash(hash: string): { section: DashboardSection; range: TimeRange
 		: "overview";
 
 	let range: TimeRange = "24h";
+	let session: string | null = null;
 	if (queryPart) {
 		const params = new URLSearchParams(queryPart);
 		const rangeParam = params.get("range") as TimeRange;
 		if (VALID_RANGES.includes(rangeParam)) {
 			range = rangeParam;
 		}
+		session = params.get("s");
 	}
 
-	return { section, range };
+	return { section, range, session };
+}
+
+function buildHash(section: string, range: TimeRange, session?: string | null): string {
+	const sessionPart = session ? `&s=${encodeURIComponent(session)}` : "";
+	return `/${section}?range=${range}${sessionPart}`;
 }
 
 export function useHashRoute() {
@@ -51,31 +59,39 @@ export function useHashRoute() {
 		};
 	}, []);
 
-	const updateHash = useCallback((section: string, range: TimeRange) => {
-		window.location.hash = `/${section}?range=${range}`;
+	const updateHash = useCallback((section: string, range: TimeRange, session?: string | null) => {
+		window.location.hash = buildHash(section, range, session);
 	}, []);
 
 	const setSection = useCallback(
 		(newSection: DashboardSection) => {
-			updateHash(newSection, route.range);
+			// The deep-linked session only applies to the traces view.
+			updateHash(newSection, route.range, newSection === "traces" ? route.session : null);
 		},
-		[route.range, updateHash],
+		[route.range, route.session, updateHash],
 	);
 
 	const setRange = useCallback(
 		(newRange: string) => {
 			const nextRange = VALID_RANGES.includes(newRange as TimeRange) ? (newRange as TimeRange) : "24h";
-			updateHash(route.section, nextRange);
+			updateHash(route.section, nextRange, route.session);
+		},
+		[route.section, route.session, updateHash],
+	);
+
+	const setSession = useCallback(
+		(file: string | null) => {
+			updateHash(route.section, route.range, file);
 		},
-		[route.section, updateHash],
+		[route.section, route.range, updateHash],
 	);
 
 	useEffect(() => {
 		const currentHash = window.location.hash;
 		const parsed = parseHash(currentHash);
-		const expectedHash = `#/${parsed.section}?range=${parsed.range}`;
+		const expectedHash = `#${buildHash(parsed.section, parsed.range, parsed.session)}`;
 		if (currentHash !== expectedHash) {
-			window.location.hash = `/${parsed.section}?range=${parsed.range}`;
+			window.location.hash = buildHash(parsed.section, parsed.range, parsed.session);
 		}
 	}, []);
 
@@ -84,5 +100,7 @@ export function useHashRoute() {
 		setSection,
 		range: route.range,
 		setRange,
+		session: route.session,
+		setSession,
 	};
 }

package/src/client/routes/ProvidersRoute.tsx

@@ -234,6 +234,7 @@ function PeakHoursPanel({ hourly, providers }: { hourly: ProviderHourlyPoint[];
 	const chartTheme = CHART_THEMES[theme];
 
 	const { tokensByHour, peakHour } = useMemo(() => {
+		// oxlint-disable-next-line unicorn/no-new-array -- length preallocation
 		const tokens = new Array<number>(24).fill(0);
 		for (const point of hourly) {
 			if (provider !== ALL_PROVIDERS && point.provider !== provider) continue;

package/src/client/routes/TracesRoute.tsx

@@ -0,0 +1,182 @@
+/**
+ * Traces section: root-session list (subagents folded in) that opens the
+ * flamegraph trace viewer for a selected session.
+ */
+
+import { useMemo, useState } from "react";
+import { getSessions } from "../api";
+import { formatCompact, formatCost, formatDurationMs, formatRelativeTime } from "../data/formatters";
+import { useResource } from "../data/useResource";
+import { TraceView } from "../traces/TraceView";
+import type { SessionSummary } from "../types";
+import { AsyncBoundary, DataTable, Panel } from "../ui";
+
+export interface TracesRouteProps {
+	active: boolean;
+	session: string | null;
+	onOpenSession: (file: string | null) => void;
+	refreshTrigger: number;
+}
+
+function ModelChips({ models }: { models: string[] }) {
+	const shown = models.slice(0, 3);
+	return (
+		<div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+			{shown.map(model => (
+				<span
+					key={model}
+					className="stats-text-muted truncate"
+					style={{
+						fontSize: 10,
+						border: "1px solid var(--border)",
+						borderRadius: 999,
+						padding: "1px 6px",
+						maxWidth: 140,
+					}}
+				>
+					{model}
+				</span>
+			))}
+			{models.length > 3 && (
+				<span className="stats-text-muted" style={{ fontSize: 10 }}>
+					+{models.length - 3}
+				</span>
+			)}
+		</div>
+	);
+}
+
+export function TracesRoute({ active, session, onOpenSession, refreshTrigger }: TracesRouteProps) {
+	const [filter, setFilter] = useState("");
+
+	const {
+		data: sessions,
+		error,
+		loading,
+	} = useResource(["sessions", refreshTrigger], signal => getSessions(200, undefined, signal), {
+		pollMs: 30000,
+		enabled: active && session === null,
+	});
+
+	const filtered = useMemo(() => {
+		if (!sessions) return [];
+		const needle = filter.trim().toLowerCase();
+		if (!needle) return sessions;
+		return sessions.filter(
+			row =>
+				(row.title ?? "").toLowerCase().includes(needle) ||
+				row.folder.toLowerCase().includes(needle) ||
+				row.models.some(model => model.toLowerCase().includes(needle)),
+		);
+	}, [sessions, filter]);
+
+	const columns = useMemo(
+		() => [
+			{
+				key: "title",
+				header: "Title",
+				render: (item: SessionSummary) => (
+					<div className="stats-font-medium stats-text-primary truncate" style={{ maxWidth: 280 }}>
+						{item.title ?? item.file.split("/").pop()}
+					</div>
+				),
+			},
+			{
+				key: "folder",
+				header: "Project",
+				render: (item: SessionSummary) => (
+					<span className="stats-text-muted truncate" style={{ maxWidth: 160, display: "inline-block" }}>
+						{item.folder.split("/").slice(-2).join("/")}
+					</span>
+				),
+			},
+			{
+				key: "started",
+				header: "Started",
+				render: (item: SessionSummary) => formatRelativeTime(item.startedAt),
+			},
+			{
+				key: "duration",
+				header: "Duration",
+				numeric: true,
+				render: (item: SessionSummary) => formatDurationMs(item.endedAt - item.startedAt),
+			},
+			{ key: "requests", header: "Requests", numeric: true, render: (item: SessionSummary) => item.requests },
+			{ key: "toolCalls", header: "Tools", numeric: true, render: (item: SessionSummary) => item.toolCalls },
+			{ key: "subagents", header: "Agents", numeric: true, render: (item: SessionSummary) => item.subagents },
+			{
+				key: "tokens",
+				header: "Tokens",
+				numeric: true,
+				render: (item: SessionSummary) => formatCompact(item.totalTokens),
+			},
+			{ key: "cost", header: "Cost", numeric: true, render: (item: SessionSummary) => formatCost(item.costTotal) },
+			{ key: "models", header: "Models", render: (item: SessionSummary) => <ModelChips models={item.models} /> },
+		],
+		[],
+	);
+
+	const renderMobileCard = (item: SessionSummary, onClick?: () => void) => (
+		<div className="stats-mobile-card" onClick={onClick}>
+			<div className="stats-mobile-card-header">
+				<div className="stats-font-semibold stats-text-primary truncate">
+					{item.title ?? item.file.split("/").pop()}
+				</div>
+			</div>
+			<div className="stats-mobile-card-grid">
+				<div>
+					<div className="stats-mobile-card-label">Started</div>
+					<div className="stats-mobile-card-value">{formatRelativeTime(item.startedAt)}</div>
+				</div>
+				<div>
+					<div className="stats-mobile-card-label">Duration</div>
+					<div className="stats-mobile-card-value">{formatDurationMs(item.endedAt - item.startedAt)}</div>
+				</div>
+				<div>
+					<div className="stats-mobile-card-label">Requests</div>
+					<div className="stats-mobile-card-value">{item.requests}</div>
+				</div>
+				<div>
+					<div className="stats-mobile-card-label">Cost</div>
+					<div className="stats-mobile-card-value">{formatCost(item.costTotal)}</div>
+				</div>
+			</div>
+		</div>
+	);
+
+	if (session !== null) {
+		return <TraceView file={session} active={active} onBack={() => onOpenSession(null)} />;
+	}
+
+	return (
+		<div className="stats-route-container">
+			<Panel
+				title="Sessions"
+				subtitle="Recent sessions with subagent activity folded in — click one to open its trace"
+				actions={
+					<input
+						type="search"
+						value={filter}
+						onChange={event => setFilter(event.target.value)}
+						placeholder="Filter by title, project, model…"
+						aria-label="Filter sessions"
+						spellCheck={false}
+						className="stats-trace-input"
+						style={{ width: 220 }}
+					/>
+				}
+			>
+				<AsyncBoundary loading={loading} error={error} data={sessions}>
+					<DataTable
+						columns={columns}
+						data={filtered}
+						keyExtractor={item => item.file}
+						onRowClick={item => onOpenSession(item.file)}
+						renderMobileCard={renderMobileCard}
+						emptyText="No sessions found — run a Sync to index recent activity"
+					/>
+				</AsyncBoundary>
+			</Panel>
+		</div>
+	);
+}

package/src/client/routes/index.ts

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