@oh-my-pi/omp-stats 16.1.22 → 16.2.0

package/dist/types/aggregator.d.ts

@@ -48,6 +48,17 @@ export declare function syncAllSessions(opts?: SyncOptions): Promise<{
     processed: number;
     files: number;
 }>;
+interface TimeRangeConfig {
+    timeSeriesHours: number;
+    timeSeriesBucketMs: number;
+    modelSeriesDays: number;
+    modelSeriesBucketMs: number;
+    modelPerformanceDays: number;
+    modelPerformanceBucketMs: number;
+    costSeriesDays: number;
+    cutoff: number | null;
+}
+export declare function getTimeRangeConfig(range?: string | null): TimeRangeConfig;
 /**
  * Get all dashboard stats.
  */
@@ -63,3 +74,4 @@ export declare function getRequestDetails(id: number): Promise<RequestDetails |
  */
 export declare function getTotalMessageCount(): Promise<number>;
 export declare function getBehaviorDashboardStats(range?: string | null): Promise<BehaviorDashboardStats>;
+export {};

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

@@ -1,4 +1,4 @@
-import type { BehaviorDashboardStats, CostDashboardStats, FolderStats, MessageStats, ModelDashboardStats, OverviewStats, RequestDetails, TimeRange } from "./types";
+import type { BehaviorDashboardStats, CostDashboardStats, FolderStats, GainDashboardStats, MessageStats, ModelDashboardStats, OverviewStats, RequestDetails, TimeRange } from "./types";
 export declare class ApiError extends Error {
     status: number;
     endpoint: string;
@@ -17,3 +17,4 @@ export declare function sync(signal?: AbortSignal): Promise<{
 }>;
 export declare function getBehaviorDashboardStats(range?: TimeRange, signal?: AbortSignal): Promise<BehaviorDashboardStats>;
 export declare function getFolderStats(range?: TimeRange, signal?: AbortSignal): Promise<FolderStats[]>;
+export declare function getGainDashboardStats(range?: TimeRange, project?: string | null, signal?: AbortSignal): Promise<GainDashboardStats>;

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

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

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

@@ -5,3 +5,4 @@ export declare function formatPercent(value: number, digits?: number): string;
 export declare function formatDurationMs(value: number | null, digits?: number): string;
 export declare function formatTokensPerSecond(value: number | null): string;
 export declare function formatRelativeTime(timestamp: number): string;
+export declare function formatBytes(value: number): string;

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

@@ -0,0 +1,7 @@
+import type { TimeRange } from "../types";
+export interface GainRouteProps {
+    active: boolean;
+    range: TimeRange;
+    refreshTrigger: number;
+}
+export declare function GainRoute({ active, range, refreshTrigger }: GainRouteProps): import("react").JSX.Element;

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

@@ -1,6 +1,7 @@
 export * from "./BehaviorRoute";
 export * from "./CostsRoute";
 export * from "./ErrorsRoute";
+export * from "./GainRoute";
 export * from "./ModelsRoute";
 export * from "./OverviewRoute";
 export * from "./ProjectsRoute";

package/dist/types/embedded-client.d.ts

@@ -3,7 +3,7 @@
  *
  * `embedded-client.generated.txt` holds the base64 of a gzipped tar of the
  * built dashboard (`dist/client`). It is populated by
- * `scripts/generate-client-bundle.ts --generate` for compiled binaries and the
+ * `gen:stats` for compiled binaries and the
  * prepacked npm bundle, and reset to an empty file afterwards so the dev tree
  * keeps building the dashboard from source.
  */

package/dist/types/gain-aggregator.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Aggregates token-savings data for the Gain dashboard.
+ *
+ * Source:
+ *   1. Snapcompact: colocated with stats.db as snapcompact-savings.jsonl
+ *
+ * Missing files are treated as zero records — never an error.
+ */
+import type { GainDashboardStats } from "./shared-types";
+/**
+ * Collapse conventional worktree sub-paths to their logical project root.
+ *
+ * Rules are generic: omp internal wt paths are dropped; conventional worktree
+ * suffixes (`.wt/`, `-wt/`, `.worktrees/`, `-worktrees/`) are stripped. No
+ * author-specific IDE or tool paths are baked in.
+ *
+ * Returns null to drop temp/internal paths entirely.
+ */
+export declare function normalizeProjectPath(p: string): string | null;
+/**
+ * Given a raw set of paths, normalize worktree paths and remove sub-paths
+ * that are already covered by a shorter parent at depth ≥ 4.
+ * Returns a sorted, deduped list of meaningful project roots.
+ */
+export declare function dedupeProjects(rawPaths: Set<string>): string[];
+export declare function getGainDashboardStats(range?: string | null, project?: string | null): Promise<GainDashboardStats>;

package/dist/types/index.d.ts

@@ -1,5 +1,7 @@
 #!/usr/bin/env bun
 export { getDashboardStats, getTotalMessageCount, type SyncOptions, type SyncProgress, smokeTestSyncWorker, syncAllSessions, } from "./aggregator";
 export { closeDb } from "./db";
+export { getGainDashboardStats } from "./gain-aggregator";
 export { startServer } from "./server";
+export type { GainDashboardStats, GainSource, GainSourceTotals, GainTimeSeriesPoint, } from "./shared-types";
 export type { AggregatedStats, DashboardStats, FolderStats, MessageStats, ModelPerformancePoint, ModelStats, ModelTimeSeriesPoint, TimeSeriesPoint, } from "./types";

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

@@ -218,3 +218,36 @@ export interface BehaviorDashboardStats {
     byModel: BehaviorModelStats[];
     behaviorSeries: BehaviorTimeSeriesPoint[];
 }
+/** Token savings from a single source type. */
+export interface GainSourceTotals {
+    savedTokens: number;
+    savedBytes: number;
+    hits: number;
+    /** originalBytes - savedBytes, when original is known */
+    outputBytes: number;
+    /** Total original bytes before compression, when known */
+    originalBytes: number;
+    /** savedBytes / originalBytes when both are known, else null */
+    reductionPercent: number | null;
+}
+/** Per-source breakdown. */
+export type GainSource = "snapcompact";
+/** Time-series point for gain (daily bucket). */
+export interface GainTimeSeriesPoint {
+    date: string;
+    snapcompact: number;
+    total: number;
+}
+/** Complete gain dashboard payload. */
+export interface GainDashboardStats {
+    /** Aggregate across all sources for the active range. */
+    overall: GainSourceTotals;
+    /** Per-source breakdown. */
+    bySource: Record<GainSource, GainSourceTotals>;
+    /** Daily time series. */
+    timeSeries: GainTimeSeriesPoint[];
+    /** Active project filter (cwd prefix), or null for all projects. */
+    project: string | null;
+    /** All distinct projects seen in the data, for the selector. */
+    projects: string[];
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/omp-stats",
-	"version": "16.1.22",
+	"version": "16.2.0",
 	"description": "Local observability dashboard for pi AI usage statistics",
 	"homepage": "https://omp.sh",
 	"author": "Can Boluk",
@@ -28,6 +28,8 @@
 		"omp-stats": "./src/index.ts"
 	},
 	"scripts": {
+		"gen:stats": "bun scripts/generate-client-bundle.ts --generate",
+		"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",
@@ -37,9 +39,9 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-ai": "16.1.22",
-		"@oh-my-pi/pi-catalog": "16.1.22",
-		"@oh-my-pi/pi-utils": "16.1.22",
+		"@oh-my-pi/pi-ai": "16.2.0",
+		"@oh-my-pi/pi-catalog": "16.2.0",
+		"@oh-my-pi/pi-utils": "16.2.0",
 		"@tailwindcss/node": "^4.3.0",
 		"chart.js": "^4.5.1",
 		"date-fns": "^4.4.0",

package/src/aggregator.ts

@@ -330,7 +330,7 @@ const TIME_RANGE_TO_CONFIG: Record<TimeRange, Omit<TimeRangeConfig, "cutoff">> =
 	},
 };
 
-function getTimeRangeConfig(range?: string | null): TimeRangeConfig {
+export function getTimeRangeConfig(range?: string | null): TimeRangeConfig {
 	const normalized = range?.trim().toLowerCase() ?? DEFAULT_TIME_RANGE;
 	const config = TIME_RANGE_TO_CONFIG[normalized as TimeRange];
 	if (config) {

package/src/client/App.tsx

@@ -6,6 +6,7 @@ import {
 	BehaviorRoute,
 	CostsRoute,
 	ErrorsRoute,
+	GainRoute,
 	ModelsRoute,
 	OverviewRoute,
 	ProjectsRoute,
@@ -77,6 +78,8 @@ export default function App() {
 				return <BehaviorRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
 			case "projects":
 				return <ProjectsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "gain":
+				return <GainRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
 		}
 	};
 

package/src/client/api.ts

@@ -2,6 +2,7 @@ import type {
 	BehaviorDashboardStats,
 	CostDashboardStats,
 	FolderStats,
+	GainDashboardStats,
 	MessageStats,
 	ModelDashboardStats,
 	OverviewStats,
@@ -81,3 +82,13 @@ export async function getBehaviorDashboardStats(
 export async function getFolderStats(range: TimeRange = "24h", signal?: AbortSignal): Promise<FolderStats[]> {
 	return fetchJson<FolderStats[]>(`${API_BASE}/stats/folders?range=${encodeURIComponent(range)}`, { signal });
 }
+
+export async function getGainDashboardStats(
+	range: TimeRange = "24h",
+	project?: string | null,
+	signal?: AbortSignal,
+): Promise<GainDashboardStats> {
+	const params = new URLSearchParams({ range });
+	if (project) params.set("project", project);
+	return fetchJson<GainDashboardStats>(`${API_BASE}/stats/gain?${params}`, { signal });
+}

package/src/client/app/routes.ts

@@ -1,7 +1,15 @@
-import { Activity, AlertCircle, Coins, Cpu, Folder, LayoutDashboard, Smile } from "lucide-react";
+import { Activity, AlertCircle, Coins, Cpu, Folder, LayoutDashboard, Smile, TrendingUp } from "lucide-react";
 import type React from "react";
 
-export type DashboardSection = "overview" | "requests" | "errors" | "models" | "costs" | "behavior" | "projects";
+export type DashboardSection =
+	| "overview"
+	| "requests"
+	| "errors"
+	| "models"
+	| "costs"
+	| "behavior"
+	| "projects"
+	| "gain";
 
 export interface DashboardRoute {
 	id: DashboardSection;
@@ -47,4 +55,9 @@ export const routes: DashboardRoute[] = [
 		label: "Projects",
 		icon: Folder,
 	},
+	{
+		id: "gain",
+		label: "Gain",
+		icon: TrendingUp,
+	},
 ];

package/src/client/data/formatters.ts

@@ -36,3 +36,10 @@ export function formatTokensPerSecond(value: number | null): string {
 export function formatRelativeTime(timestamp: number): string {
 	return formatDistanceToNow(new Date(timestamp), { addSuffix: true });
 }
+
+export function formatBytes(value: number): string {
+	if (value >= 1e9) return `${(value / 1e9).toFixed(1)} GB`;
+	if (value >= 1e6) return `${(value / 1e6).toFixed(1)} MB`;
+	if (value >= 1e3) return `${(value / 1e3).toFixed(1)} KB`;
+	return `${value} B`;
+}

package/src/client/data/useHashRoute.ts

@@ -10,6 +10,7 @@ const VALID_SECTIONS: DashboardSection[] = [
 	"costs",
 	"behavior",
 	"projects",
+	"gain",
 ];
 
 const VALID_RANGES: TimeRange[] = ["1h", "24h", "7d", "30d", "90d", "all"];

package/src/client/routes/GainRoute.tsx

@@ -0,0 +1,226 @@
+import { useMemo, useState } from "react";
+import { Line } from "react-chartjs-2";
+import { getGainDashboardStats } from "../api";
+import { buildSharedPlugins, buildSharedScales, CHART_THEMES, lineDatasetStyle } from "../components/chart-shared";
+import { formatBytes, formatCompact, formatInteger, formatPercent } from "../data/formatters";
+import { useResource } from "../data/useResource";
+import type { GainDashboardStats, GainSourceTotals, GainTimeSeriesPoint, TimeRange } from "../types";
+import { AsyncBoundary, Panel } from "../ui";
+import { useSystemTheme } from "../useSystemTheme";
+
+export interface GainRouteProps {
+	active: boolean;
+	range: TimeRange;
+	refreshTrigger: number;
+}
+
+export function GainRoute({ active, range, refreshTrigger }: GainRouteProps) {
+	const [project, setProject] = useState<string | null>(null);
+
+	const {
+		data: stats,
+		error,
+		loading,
+	} = useResource(["gain", range, refreshTrigger, project], signal => getGainDashboardStats(range, project, signal), {
+		pollMs: 30_000,
+		enabled: active,
+	});
+
+	return (
+		<div className="stats-route-container space-y-6">
+			<AsyncBoundary loading={loading} error={error} data={stats}>
+				{stats && (
+					<>
+						<GainProjectSelector projects={stats.projects} selected={project} onChange={setProject} />
+						<GainOverallPanel overall={stats.overall} />
+						<GainBySourcePanel bySource={stats.bySource} />
+						<GainTimeSeriesPanel timeSeries={stats.timeSeries} />
+					</>
+				)}
+			</AsyncBoundary>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Project selector
+// ---------------------------------------------------------------------------
+
+function GainProjectSelector({
+	projects,
+	selected,
+	onChange,
+}: {
+	projects: string[];
+	selected: string | null;
+	onChange: (p: string | null) => void;
+}) {
+	if (projects.length === 0) return null;
+	return (
+		<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+			<span className="stats-text-secondary" style={{ fontSize: "0.875rem", whiteSpace: "nowrap" }}>
+				Project
+			</span>
+			<select
+				className="stats-select"
+				value={selected ?? ""}
+				onChange={e => onChange(e.target.value || null)}
+				style={{ maxWidth: "480px", flex: 1 }}
+			>
+				<option value="">All projects</option>
+				{projects.map(p => (
+					<option key={p} value={p}>
+						{p}
+					</option>
+				))}
+			</select>
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Overall metrics panel
+// ---------------------------------------------------------------------------
+
+function GainOverallPanel({ overall }: { overall: GainSourceTotals }) {
+	return (
+		<Panel title="Overall Gain" subtitle="Aggregate snapcompact savings">
+			<div className="stats-metric-primary-grid">
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Saved Tokens</div>
+					<div className="stats-metric-value">{formatCompact(overall.savedTokens)}</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Saved Bytes</div>
+					<div className="stats-metric-value">{formatBytes(overall.savedBytes)}</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Reduction</div>
+					<div className="stats-metric-value">
+						{overall.reductionPercent !== null ? formatPercent(overall.reductionPercent) : "—"}
+					</div>
+				</div>
+				<div className="stats-metric-card primary">
+					<div className="stats-metric-label">Total Hits</div>
+					<div className="stats-metric-value">{formatInteger(overall.hits)}</div>
+				</div>
+			</div>
+		</Panel>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// By-source breakdown panel
+// ---------------------------------------------------------------------------
+
+function SourceCard({ title, totals }: { title: string; totals: GainSourceTotals }) {
+	return (
+		<div className="stats-metric-card secondary" style={{ flex: 1 }}>
+			<div className="stats-metric-label" style={{ fontWeight: 600, marginBottom: 8 }}>
+				{title}
+			</div>
+			<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
+				<div>
+					<div className="stats-metric-label">Saved Tokens</div>
+					<div className="stats-metric-value" style={{ fontSize: "1rem" }}>
+						{formatCompact(totals.savedTokens)}
+					</div>
+				</div>
+				<div>
+					<div className="stats-metric-label">Saved Bytes</div>
+					<div className="stats-metric-value" style={{ fontSize: "1rem" }}>
+						{formatBytes(totals.savedBytes)}
+					</div>
+				</div>
+				<div>
+					<div className="stats-metric-label">Hits</div>
+					<div className="stats-metric-value" style={{ fontSize: "1rem" }}>
+						{formatInteger(totals.hits)}
+					</div>
+				</div>
+				<div>
+					<div className="stats-metric-label">Reduction</div>
+					<div className="stats-metric-value" style={{ fontSize: "1rem" }}>
+						{totals.reductionPercent !== null ? formatPercent(totals.reductionPercent) : "—"}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function GainBySourcePanel({ bySource }: { bySource: GainDashboardStats["bySource"] }) {
+	return (
+		<Panel title="By Source" subtitle="Savings breakdown per subsystem">
+			<div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
+				<SourceCard title="Snapcompact" totals={bySource.snapcompact} />
+			</div>
+		</Panel>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Time series chart (stacked area, daily)
+// ---------------------------------------------------------------------------
+
+const GAIN_COLORS = {
+	snapcompact: "rgb(34, 197, 94)",
+} as const;
+
+function GainTimeSeriesPanel({ timeSeries }: { timeSeries: GainTimeSeriesPoint[] }) {
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
+
+	const { data, options } = useMemo(() => {
+		const labelFormatter = new Intl.DateTimeFormat(undefined, {
+			month: "short",
+			day: "numeric",
+			timeZone: "UTC",
+		});
+		const labels = timeSeries.map(p => labelFormatter.format(new Date(`${p.date}T00:00:00.000Z`)));
+		const chartData = {
+			labels,
+			datasets: [
+				{
+					label: "Snapcompact",
+					data: timeSeries.map(p => p.snapcompact),
+					...lineDatasetStyle(GAIN_COLORS.snapcompact),
+				},
+			],
+		};
+
+		const { sharedScaleBase, yScale } = buildSharedScales({
+			chartTheme,
+			formatY: n => formatCompact(n),
+		});
+
+		const chartOptions = {
+			responsive: true,
+			maintainAspectRatio: false,
+			plugins: buildSharedPlugins({
+				chartTheme,
+				showLegend: true,
+				defaultLabel: "Tokens Saved",
+				formatValue: formatCompact,
+			}),
+			scales: {
+				x: { ...sharedScaleBase, stacked: true },
+				y: { ...yScale, stacked: true },
+			},
+		};
+
+		return { data: chartData, options: chartOptions };
+	}, [timeSeries, chartTheme]);
+
+	return (
+		<Panel title="Savings Over Time" subtitle="Daily token savings">
+			<div style={{ height: 240 }}>
+				{timeSeries.length === 0 ? (
+					<div className="stats-table-empty">No time series data yet</div>
+				) : (
+					<Line data={data} options={options as Parameters<typeof Line>[0]["options"]} />
+				)}
+			</div>
+		</Panel>
+	);
+}

package/src/client/routes/index.ts

@@ -1,6 +1,7 @@
 export * from "./BehaviorRoute";
 export * from "./CostsRoute";
 export * from "./ErrorsRoute";
+export * from "./GainRoute";
 export * from "./ModelsRoute";
 export * from "./OverviewRoute";
 export * from "./ProjectsRoute";

package/src/embedded-client.ts

@@ -3,7 +3,7 @@
  *
  * `embedded-client.generated.txt` holds the base64 of a gzipped tar of the
  * built dashboard (`dist/client`). It is populated by
- * `scripts/generate-client-bundle.ts --generate` for compiled binaries and the
+ * `gen:stats` for compiled binaries and the
  * prepacked npm bundle, and reset to an empty file afterwards so the dev tree
  * keeps building the dashboard from source.
  */