@oh-my-pi/omp-stats 6.9.69

package/README.md

@@ -0,0 +1,82 @@
+# @oh-my-pi/omp-stats
+
+Local observability dashboard for AI usage statistics.
+
+## Features
+
+- **Session log parsing**: Reads JSONL session logs from `~/.omp/agent/sessions/`
+- **SQLite aggregation**: Efficient stats storage and querying using `bun:sqlite`
+- **Web dashboard**: Real-time metrics visualization with Chart.js
+- **Incremental sync**: Only processes new/modified log entries
+
+## Metrics Tracked
+
+| Metric | Calculation |
+|--------|-------------|
+| Tokens/s | `output_tokens / (duration / 1000)` |
+| Cache Rate | `cache_read / (input + cache_read) * 100` |
+| Error Rate | `count(stopReason=error) / total_calls * 100` |
+| Total Cost | Sum of `usage.cost.total` |
+| Avg Latency | Mean of `duration` |
+| TTFT | Mean of `ttft` (time to first token) |
+
+## Usage
+
+### Via CLI
+
+```bash
+# Start dashboard server (default: http://localhost:3847)
+omp stats
+
+# Custom port
+omp stats --port 8080
+
+# Print summary to console
+omp stats --summary
+
+# Output as JSON (for scripting)
+omp stats --json
+```
+
+### Programmatic
+
+```typescript
+import { getDashboardStats, syncAllSessions } from "@oh-my-pi/omp-stats";
+
+// Sync session logs to database
+const { processed, files } = await syncAllSessions();
+
+// Get aggregated stats
+const stats = await getDashboardStats();
+console.log(stats.overall.totalCost);
+console.log(stats.byModel[0].avgTokensPerSecond);
+```
+
+## API Endpoints
+
+| Endpoint | Description |
+|----------|-------------|
+| `GET /api/stats` | Overall stats with all breakdowns |
+| `GET /api/stats/models` | Per-model statistics |
+| `GET /api/stats/folders` | Per-folder/project statistics |
+| `GET /api/stats/timeseries` | Hourly time series data |
+| `GET /api/sync` | Trigger sync and return counts |
+
+## Data Storage
+
+- **Session logs**: `~/.omp/agent/sessions/` (JSONL files)
+- **Stats database**: `~/.omp/stats.db` (SQLite)
+
+## Dashboard
+
+The web dashboard provides:
+
+- Overall metrics cards (requests, cost, cache rate, error rate, duration, tokens/s)
+- Time series chart showing requests and errors over time
+- Per-model breakdown table
+- Per-folder breakdown table
+- Auto-refresh every 30 seconds
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,66 @@
+{
+	"name": "@oh-my-pi/omp-stats",
+	"version": "6.9.69",
+	"description": "Local observability dashboard for pi AI usage statistics",
+	"type": "module",
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"bin": {
+		"omp-stats": "./src/index.ts"
+	},
+	"exports": {
+		".": {
+			"types": "./src/index.ts",
+			"import": "./src/index.ts"
+		},
+		"./src/server": {
+			"types": "./src/server.ts",
+			"import": "./src/server.ts"
+		},
+		"./src/db": {
+			"types": "./src/db.ts",
+			"import": "./src/db.ts"
+		}
+	},
+	"files": [
+		"src",
+		"public",
+		"README.md"
+	],
+	"keywords": [
+		"ai",
+		"observability",
+		"metrics",
+		"dashboard",
+		"llm",
+		"statistics"
+	],
+	"scripts": {
+		"dev": "bun run src/index.ts",
+		"check": "tsgo --noEmit && tsgo --noEmit -p tsconfig.client.json",
+		"build": "bun run build.ts && tsgo -p tsconfig.build.json"
+	},
+	"author": "Can Bölük",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/can1357/oh-my-pi.git",
+		"directory": "packages/omp-stats"
+	},
+	"dependencies": {
+		"@oh-my-pi/pi-ai": "6.9.69",
+		"date-fns": "^4.1.0",
+		"lucide-react": "^0.562.0",
+		"react": "^19.2.3",
+		"react-dom": "^19.2.3",
+		"recharts": "^3.6.0"
+	},
+	"devDependencies": {
+		"@types/node": "^24.3.0",
+		"@types/react": "^19.2.9",
+		"@types/react-dom": "^19.2.3"
+	},
+	"engines": {
+		"bun": ">=1.0.0"
+	}
+}

package/src/aggregator.ts

@@ -0,0 +1,125 @@
+import { stat } from "node:fs/promises";
+import {
+	getRecentErrors as dbGetRecentErrors,
+	getRecentRequests as dbGetRecentRequests,
+	getFileOffset,
+	getMessageById,
+	getMessageCount,
+	getOverallStats,
+	getStatsByFolder,
+	getStatsByModel,
+	getTimeSeries,
+	initDb,
+	insertMessageStats,
+	setFileOffset,
+} from "./db";
+import { getSessionEntry, listAllSessionFiles, parseSessionFile } from "./parser";
+import type { DashboardStats, MessageStats, RequestDetails } from "./types";
+
+/**
+ * Sync a single session file to the database.
+ * Only processes new entries since the last sync.
+ */
+async function syncSessionFile(sessionFile: string): Promise<number> {
+	// Get file stats
+	let fileStats: Awaited<ReturnType<typeof stat>>;
+	try {
+		fileStats = await stat(sessionFile);
+	} catch {
+		return 0;
+	}
+
+	const lastModified = fileStats.mtimeMs;
+
+	// Check if file has changed since last sync
+	const stored = getFileOffset(sessionFile);
+	if (stored && stored.lastModified >= lastModified) {
+		return 0; // File hasn't changed
+	}
+
+	// Parse file from last offset
+	const fromOffset = stored?.offset ?? 0;
+	const { stats, newOffset } = await parseSessionFile(sessionFile, fromOffset);
+
+	if (stats.length > 0) {
+		insertMessageStats(stats);
+	}
+
+	// Update offset tracker
+	setFileOffset(sessionFile, newOffset, lastModified);
+
+	return stats.length;
+}
+
+/**
+ * Sync all session files to the database.
+ * Returns the number of new entries processed.
+ */
+export async function syncAllSessions(): Promise<{ processed: number; files: number }> {
+	await initDb();
+
+	const files = await listAllSessionFiles();
+	let totalProcessed = 0;
+	let filesProcessed = 0;
+
+	for (const file of files) {
+		const count = await syncSessionFile(file);
+		if (count > 0) {
+			totalProcessed += count;
+			filesProcessed++;
+		}
+	}
+
+	return { processed: totalProcessed, files: filesProcessed };
+}
+
+/**
+ * Get all dashboard stats.
+ */
+export async function getDashboardStats(): Promise<DashboardStats> {
+	await initDb();
+
+	return {
+		overall: getOverallStats(),
+		byModel: getStatsByModel(),
+		byFolder: getStatsByFolder(),
+		timeSeries: getTimeSeries(24),
+	};
+}
+
+export async function getRecentRequests(limit?: number): Promise<MessageStats[]> {
+	await initDb();
+	return dbGetRecentRequests(limit);
+}
+
+export async function getRecentErrors(limit?: number): Promise<MessageStats[]> {
+	await initDb();
+	return dbGetRecentErrors(limit);
+}
+
+export async function getRequestDetails(id: number): Promise<RequestDetails | null> {
+	await initDb();
+	const msg = getMessageById(id);
+	if (!msg) return null;
+
+	const entry = await getSessionEntry(msg.sessionFile, msg.entryId);
+	if (!entry || entry.type !== "message") return null;
+
+	// TODO: Get parent/context messages?
+	// For now we return the single entry which contains the assistant response.
+	// The user prompt is likely the parent.
+
+	return {
+		...msg,
+		messages: [entry],
+		output: (entry as any).message,
+	};
+}
+
+/**
+ * Get the current message count in the database.
+ */
+export async function getTotalMessageCount(): Promise<number> {
+	await initDb();
+	return getMessageCount();
+}

package/src/client/App.tsx

@@ -0,0 +1,168 @@
+import { useEffect, useState } from "react";
+import { Activity, AlertCircle, BarChart2, CheckCircle, Database, RefreshCw, Server } from "lucide-react";
+import { getRecentErrors, getRecentRequests, getStats, sync } from "./api";
+import { RequestDetail } from "./components/RequestDetail";
+import { RequestList } from "./components/RequestList";
+import { StatCard } from "./components/StatCard";
+import type { DashboardStats, MessageStats } from "./types";
+
+export default function App() {
+	const [stats, setStats] = useState<DashboardStats | null>(null);
+	const [recentRequests, setRecentRequests] = useState<MessageStats[]>([]);
+	const [recentErrors, setRecentErrors] = useState<MessageStats[]>([]);
+	const [selectedRequest, setSelectedRequest] = useState<number | null>(null);
+	const [syncing, setSyncing] = useState(false);
+	const [activeTab, setActiveTab] = useState<"overview" | "requests" | "errors">("overview");
+
+	const loadData = async () => {
+		try {
+			const [s, r, e] = await Promise.all([
+				getStats(),
+				getRecentRequests(50),
+				getRecentErrors(50)
+			]);
+			setStats(s);
+			setRecentRequests(r);
+			setRecentErrors(e);
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	const handleSync = async () => {
+		setSyncing(true);
+		try {
+			await sync();
+			await loadData();
+		} finally {
+			setSyncing(false);
+		}
+	};
+
+	useEffect(() => {
+		loadData();
+		const interval = setInterval(loadData, 30000);
+		return () => clearInterval(interval);
+	}, []);
+
+	if (!stats) return <div style={{ padding: 40, textAlign: "center" }}>Loading stats...</div>;
+
+	return (
+		<div style={{ maxWidth: "1400px", margin: "0 auto", padding: "20px" }}>
+			<header style={{ 
+				display: "flex", justifyContent: "space-between", alignItems: "center",
+				marginBottom: "30px", paddingBottom: "20px", borderBottom: "1px solid var(--border)"
+			}}>
+				<h1 style={{ margin: 0, fontSize: "1.5rem", display: "flex", alignItems: "center", gap: "10px" }}>
+					<Activity color="var(--accent)" />
+					AI Usage Statistics
+				</h1>
+				<div style={{ display: "flex", gap: "15px", alignItems: "center" }}>
+					<div style={{ display: "flex", background: "var(--bg-secondary)", borderRadius: "6px", padding: "4px" }}>
+						{(["overview", "requests", "errors"] as const).map(tab => (
+							<button
+								key={tab}
+								onClick={() => setActiveTab(tab)}
+								style={{
+									background: activeTab === tab ? "var(--bg-card)" : "transparent",
+									color: activeTab === tab ? "var(--text-primary)" : "var(--text-secondary)",
+									border: "none", padding: "6px 16px", borderRadius: "4px",
+									cursor: "pointer", textTransform: "capitalize", fontWeight: 500
+								}}
+							>
+								{tab}
+							</button>
+						))}
+					</div>
+					<button 
+						onClick={handleSync}
+						disabled={syncing}
+						style={{ 
+							background: "var(--accent)", color: "white", border: "none",
+							padding: "8px 16px", borderRadius: "6px", cursor: "pointer",
+							display: "flex", alignItems: "center", gap: "8px", opacity: syncing ? 0.7 : 1
+						}}
+					>
+						<RefreshCw size={16} className={syncing ? "spin" : ""} />
+						{syncing ? "Syncing..." : "Sync"}
+					</button>
+				</div>
+			</header>
+
+			{activeTab === "overview" && (
+				<>
+					<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "20px", marginBottom: "30px" }}>
+						<StatCard 
+							title="Total Requests" 
+							value={stats.overall.totalRequests.toLocaleString()} 
+							detail={`${stats.overall.successfulRequests} success, ${stats.overall.failedRequests} errors`}
+							icon={<Server size={20} />}
+						/>
+						<StatCard 
+							title="Total Cost" 
+							value={`$${stats.overall.totalCost.toFixed(2)}`} 
+							detail={stats.overall.totalRequests > 0 ? `$${(stats.overall.totalCost / stats.overall.totalRequests).toFixed(4)} avg/req` : '-'}
+							icon={<Activity size={20} />}
+						/>
+						<StatCard 
+							title="Cache Rate" 
+							value={`${(stats.overall.cacheRate * 100).toFixed(1)}%`} 
+							detail={`${(stats.overall.totalCacheReadTokens / 1000).toFixed(1)}k cached tokens`}
+							icon={<Database size={20} />}
+						/>
+						<StatCard 
+							title="Error Rate" 
+							value={`${(stats.overall.errorRate * 100).toFixed(1)}%`} 
+							detail={`${stats.overall.failedRequests} failed requests`}
+							icon={<AlertCircle size={20} />}
+							color="var(--error)"
+						/>
+						<StatCard 
+							title="Tokens/Sec" 
+							value={stats.overall.avgTokensPerSecond?.toFixed(1) ?? "-"} 
+							detail={`${(stats.overall.totalInputTokens + stats.overall.totalOutputTokens).toLocaleString()} total tokens`}
+							icon={<BarChart2 size={20} />}
+						/>
+					</div>
+
+					<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", height: "400px" }}>
+						<RequestList 
+							title="Recent Requests" 
+							requests={recentRequests} 
+							onSelect={(r) => r.id && setSelectedRequest(r.id)} 
+						/>
+						<RequestList 
+							title="Recent Errors" 
+							requests={recentErrors} 
+							onSelect={(r) => r.id && setSelectedRequest(r.id)} 
+						/>
+					</div>
+				</>
+			)}
+
+			{activeTab === "requests" && (
+				<div style={{ height: "calc(100vh - 150px)" }}>
+					<RequestList 
+						title="All Recent Requests" 
+						requests={recentRequests} 
+						onSelect={(r) => r.id && setSelectedRequest(r.id)} 
+					/>
+				</div>
+			)}
+
+			{activeTab === "errors" && (
+				<div style={{ height: "calc(100vh - 150px)" }}>
+					<RequestList 
+						title="Failed Requests" 
+						requests={recentErrors} 
+						onSelect={(r) => r.id && setSelectedRequest(r.id)} 
+					/>
+				</div>
+			)}
+
+			{selectedRequest !== null && (
+				<RequestDetail id={selectedRequest} onClose={() => setSelectedRequest(null)} />
+			)}
+		</div>
+	);
+}

package/src/client/api.ts

@@ -0,0 +1,33 @@
+import type { DashboardStats, MessageStats, RequestDetails } from "./types";
+
+const API_BASE = "/api";
+
+export async function getStats(): Promise<DashboardStats> {
+	const res = await fetch(`${API_BASE}/stats`);
+	if (!res.ok) throw new Error("Failed to fetch stats");
+	return res.json() as Promise<DashboardStats>;
+}
+
+export async function getRecentRequests(limit = 50): Promise<MessageStats[]> {
+	const res = await fetch(`${API_BASE}/stats/recent?limit=${limit}`);
+	if (!res.ok) throw new Error("Failed to fetch recent requests");
+	return res.json() as Promise<MessageStats[]>;
+}
+
+export async function getRecentErrors(limit = 50): Promise<MessageStats[]> {
+	const res = await fetch(`${API_BASE}/stats/errors?limit=${limit}`);
+	if (!res.ok) throw new Error("Failed to fetch recent errors");
+	return res.json() as Promise<MessageStats[]>;
+}
+
+export async function getRequestDetails(id: number): Promise<RequestDetails> {
+	const res = await fetch(`${API_BASE}/request/${id}`);
+	if (!res.ok) throw new Error("Failed to fetch request details");
+	return res.json() as Promise<RequestDetails>;
+}
+
+export async function sync(): Promise<any> {
+	const res = await fetch(`${API_BASE}/sync`);
+	if (!res.ok) throw new Error("Failed to sync");
+	return res.json();
+}

package/src/client/components/RequestDetail.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from "react";
+import { getRequestDetails } from "../api";
+import type { RequestDetails } from "../types";
+import { X } from "lucide-react";
+
+interface RequestDetailProps {
+	id: number;
+	onClose: () => void;
+}
+
+export function RequestDetail({ id, onClose }: RequestDetailProps) {
+	const [details, setDetails] = useState<RequestDetails | null>(null);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		getRequestDetails(id).then(setDetails).catch(console.error).finally(() => setLoading(false));
+	}, [id]);
+
+	if (!details && loading) {
+		return (
+			<div style={{
+				position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)",
+				display: "flex", justifyContent: "center", alignItems: "center", zIndex: 100
+			}}>
+				<div style={{ background: "var(--bg-secondary)", padding: "20px", borderRadius: "8px" }}>Loading...</div>
+			</div>
+		);
+	}
+
+	if (!details) return null;
+
+	return (
+		<div style={{
+			position: "fixed", inset: 0, background: "rgba(0,0,0,0.8)",
+			display: "flex", justifyContent: "end", zIndex: 100
+		}} onClick={onClose}>
+			<div style={{
+				width: "800px", maxWidth: "100%", background: "var(--bg-primary)",
+				height: "100%", overflowY: "auto", borderLeft: "1px solid var(--border)",
+				padding: "30px"
+			}} onClick={e => e.stopPropagation()}>
+				<div style={{ display: "flex", justifyContent: "space-between", marginBottom: "20px" }}>
+					<h2 style={{ margin: 0 }}>Request Details</h2>
+					<button onClick={onClose} style={{ background: "none", border: "none", color: "var(--text-secondary)", cursor: "pointer" }}>
+						<X />
+					</button>
+				</div>
+
+				<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px", marginBottom: "30px" }}>
+					<div>
+						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Model</div>
+						<div>{details.model} ({details.provider})</div>
+					</div>
+					<div>
+						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Cost</div>
+						<div>${details.usage.cost.total.toFixed(4)}</div>
+					</div>
+					<div>
+						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Tokens</div>
+						<div>{details.usage.totalTokens} (In: {details.usage.input}, Out: {details.usage.output})</div>
+					</div>
+					<div>
+						<div style={{ color: "var(--text-secondary)", fontSize: "0.9rem" }}>Duration</div>
+						<div>{details.duration ? `${(details.duration / 1000).toFixed(2)}s` : '-'}</div>
+					</div>
+				</div>
+
+				<h3 style={{ borderBottom: "1px solid var(--border)", paddingBottom: "10px", marginBottom: "15px" }}>Output</h3>
+				<pre style={{
+					background: "var(--bg-secondary)", padding: "20px", borderRadius: "8px",
+					whiteSpace: "pre-wrap", overflowX: "auto", fontSize: "0.9rem",
+					fontFamily: "monospace"
+				}}>
+					{JSON.stringify(details.output, null, 2)}
+				</pre>
+				
+				<h3 style={{ borderBottom: "1px solid var(--border)", paddingBottom: "10px", marginBottom: "15px", marginTop: "30px" }}>Raw Metadata</h3>
+				<pre style={{
+					background: "var(--bg-secondary)", padding: "20px", borderRadius: "8px",
+					whiteSpace: "pre-wrap", overflowX: "auto", fontSize: "0.8rem",
+					fontFamily: "monospace", color: "var(--text-secondary)"
+				}}>
+					{JSON.stringify(details, null, 2)}
+				</pre>
+			</div>
+		</div>
+	);
+}

package/src/client/components/RequestList.tsx

@@ -0,0 +1,71 @@
+import { formatDistanceToNow } from "date-fns";
+import type { MessageStats } from "../types";
+
+interface RequestListProps {
+	requests: MessageStats[];
+	onSelect: (req: MessageStats) => void;
+	title: string;
+}
+
+export function RequestList({ requests, onSelect, title }: RequestListProps) {
+	return (
+		<div style={{
+			background: "var(--bg-secondary)",
+			borderRadius: "12px",
+			border: "1px solid var(--border)",
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			height: "100%"
+		}}>
+			<div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
+				<h3 style={{ margin: 0, fontSize: "1rem" }}>{title}</h3>
+			</div>
+			<div style={{ overflowY: "auto", flex: 1 }}>
+				<table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.9rem" }}>
+					<thead style={{ background: "rgba(0,0,0,0.2)", position: "sticky", top: 0 }}>
+						<tr>
+							<th style={{ textAlign: "left", padding: "12px 20px", color: "var(--text-secondary)", fontWeight: 500 }}>Time</th>
+							<th style={{ textAlign: "left", padding: "12px 20px", color: "var(--text-secondary)", fontWeight: 500 }}>Model</th>
+							<th style={{ textAlign: "right", padding: "12px 20px", color: "var(--text-secondary)", fontWeight: 500 }}>Tokens</th>
+							<th style={{ textAlign: "right", padding: "12px 20px", color: "var(--text-secondary)", fontWeight: 500 }}>Cost</th>
+							<th style={{ textAlign: "right", padding: "12px 20px", color: "var(--text-secondary)", fontWeight: 500 }}>Duration</th>
+						</tr>
+					</thead>
+					<tbody>
+						{requests.map(req => (
+							<tr 
+								key={`${req.sessionFile}-${req.entryId}`} 
+								onClick={() => onSelect(req)}
+								style={{ 
+									cursor: "pointer",
+									borderBottom: "1px solid var(--border)",
+									transition: "background 0.1s"
+								}}
+								onMouseEnter={(e) => e.currentTarget.style.background = "rgba(255,255,255,0.05)"}
+								onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
+							>
+								<td style={{ padding: "12px 20px" }}>
+									{formatDistanceToNow(req.timestamp, { addSuffix: true })}
+								</td>
+								<td style={{ padding: "12px 20px" }}>
+									<div style={{ fontWeight: 500 }}>{req.model}</div>
+									<div style={{ fontSize: "0.8rem", color: "var(--text-secondary)" }}>{req.provider}</div>
+								</td>
+								<td style={{ padding: "12px 20px", textAlign: "right" }}>
+									{req.usage.totalTokens.toLocaleString()}
+								</td>
+								<td style={{ padding: "12px 20px", textAlign: "right" }}>
+									${req.usage.cost.total.toFixed(4)}
+								</td>
+								<td style={{ padding: "12px 20px", textAlign: "right" }}>
+									{req.duration ? `${(req.duration / 1000).toFixed(1)}s` : '-'}
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+}

package/src/client/components/StatCard.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+interface StatCardProps {
+	title: string;
+	value: string | number;
+	detail?: string;
+	icon?: ReactNode;
+	color?: string;
+}
+
+export function StatCard({ title, value, detail, icon, color = "#4ade80" }: StatCardProps) {
+	return (
+		<div style={{
+			background: "var(--bg-secondary)",
+			padding: "20px",
+			borderRadius: "12px",
+			border: "1px solid var(--border)",
+			display: "flex",
+			flexDirection: "column",
+			gap: "8px"
+		}}>
+			<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+				<h3 style={{ margin: 0, fontSize: "0.9rem", color: "var(--text-secondary)", fontWeight: 500 }}>{title}</h3>
+				{icon && <div style={{ color }}>{icon}</div>}
+			</div>
+			<div style={{ fontSize: "1.8rem", fontWeight: 700 }}>{value}</div>
+			{detail && <div style={{ fontSize: "0.85rem", color: "var(--text-secondary)" }}>{detail}</div>}
+		</div>
+	);
+}

package/src/client/index.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(<App />);