@oh-my-pi/omp-stats 13.3.13 → 13.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/omp-stats",
-	"version": "13.3.13",
+	"version": "13.4.0",
 	"description": "Local observability dashboard for pi AI usage statistics",
 	"homepage": "https://github.com/can1357/oh-my-pi",
 	"author": "Can Boluk",
@@ -33,8 +33,8 @@
 		"build": "bun run build.ts"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-ai": "13.3.13",
-		"@oh-my-pi/pi-utils": "13.3.13",
+		"@oh-my-pi/pi-ai": "13.4.0",
+		"@oh-my-pi/pi-utils": "13.4.0",
 		"@tailwindcss/node": "4",
 		"chart.js": "^4.5",
 		"date-fns": "^4.1",

package/src/client/components/ChartsContainer.tsx

@@ -13,6 +13,7 @@ import { format } from "date-fns";
 import { useMemo } from "react";
 import { Line } from "react-chartjs-2";
 import type { ModelTimeSeriesPoint } from "../types";
+import { useSystemTheme } from "../useSystemTheme";
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
 
@@ -26,13 +27,34 @@ const MODEL_COLORS = [
 	"#60a5fa", // blue
 ];
 
+const CHART_THEMES = {
+	dark: {
+		legendLabel: "#94a3b8",
+		tooltipBackground: "#16161e",
+		tooltipTitle: "#f8fafc",
+		tooltipBody: "#94a3b8",
+		tooltipBorder: "rgba(255, 255, 255, 0.1)",
+		grid: "rgba(255, 255, 255, 0.06)",
+		tick: "#64748b",
+	},
+	light: {
+		legendLabel: "#475569",
+		tooltipBackground: "#ffffff",
+		tooltipTitle: "#0f172a",
+		tooltipBody: "#334155",
+		tooltipBorder: "rgba(15, 23, 42, 0.18)",
+		grid: "rgba(15, 23, 42, 0.08)",
+		tick: "#64748b",
+	},
+} as const;
 interface ChartsContainerProps {
 	modelSeries: ModelTimeSeriesPoint[];
 }
 
 export function ChartsContainer({ modelSeries }: ChartsContainerProps) {
 	const chartData = useMemo(() => buildModelPreferenceSeries(modelSeries), [modelSeries]);
-
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
 	const data = {
 		labels: chartData.data.map(d => format(new Date(d.timestamp), "MMM d")),
 		datasets: chartData.series.map((seriesName, index) => ({
@@ -60,7 +82,7 @@ export function ChartsContainer({ modelSeries }: ChartsContainerProps) {
 				position: "top" as const,
 				align: "start" as const,
 				labels: {
-					color: "#94a3b8",
+					color: chartTheme.legendLabel,
 					usePointStyle: true,
 					padding: 16,
 					font: { size: 12 },
@@ -68,10 +90,10 @@ export function ChartsContainer({ modelSeries }: ChartsContainerProps) {
 				},
 			},
 			tooltip: {
-				backgroundColor: "#16161e",
-				titleColor: "#f8fafc",
-				bodyColor: "#94a3b8",
-				borderColor: "rgba(255, 255, 255, 0.1)",
+				backgroundColor: chartTheme.tooltipBackground,
+				titleColor: chartTheme.tooltipTitle,
+				bodyColor: chartTheme.tooltipBody,
+				borderColor: chartTheme.tooltipBorder,
 				borderWidth: 1,
 				padding: 12,
 				cornerRadius: 8,
@@ -87,21 +109,21 @@ export function ChartsContainer({ modelSeries }: ChartsContainerProps) {
 		scales: {
 			x: {
 				grid: {
-					color: "rgba(255, 255, 255, 0.06)",
+					color: chartTheme.grid,
 					drawBorder: false,
 				},
 				ticks: {
-					color: "#64748b",
+					color: chartTheme.tick,
 					font: { size: 11 },
 				},
 			},
 			y: {
 				grid: {
-					color: "rgba(255, 255, 255, 0.06)",
+					color: chartTheme.grid,
 					drawBorder: false,
 				},
 				ticks: {
-					color: "#64748b",
+					color: chartTheme.tick,
 					font: { size: 11 },
 					callback: (value: number | string) => `${value}%`,
 				},

package/src/client/components/ModelsTable.tsx

@@ -13,6 +13,7 @@ import { ChevronDown, ChevronUp } from "lucide-react";
 import { useMemo, useState } from "react";
 import { Line } from "react-chartjs-2";
 import type { ModelPerformancePoint, ModelStats } from "../types";
+import { useSystemTheme } from "../useSystemTheme";
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
 
@@ -26,6 +27,28 @@ const MODEL_COLORS = [
 	"#60a5fa", // blue
 ];
 
+const CHART_THEMES = {
+	dark: {
+		legendLabel: "#cbd5e1",
+		tooltipBackground: "#16161e",
+		tooltipTitle: "#f8fafc",
+		tooltipBody: "#94a3b8",
+		tooltipBorder: "rgba(255, 255, 255, 0.1)",
+		grid: "rgba(255, 255, 255, 0.06)",
+		tick: "#94a3b8",
+	},
+	light: {
+		legendLabel: "#334155",
+		tooltipBackground: "#ffffff",
+		tooltipTitle: "#0f172a",
+		tooltipBody: "#334155",
+		tooltipBorder: "rgba(15, 23, 42, 0.18)",
+		grid: "rgba(15, 23, 42, 0.08)",
+		tick: "#475569",
+	},
+} as const;
+
+type ChartTheme = (typeof CHART_THEMES)[keyof typeof CHART_THEMES];
 interface ModelsTableProps {
 	models: ModelStats[];
 	performanceSeries: ModelPerformancePoint[];
@@ -45,6 +68,8 @@ export function ModelsTable({ models, performanceSeries }: ModelsTableProps) {
 	const [expandedKey, setExpandedKey] = useState<string | null>(null);
 
 	const performanceSeriesByKey = useMemo(() => buildModelPerformanceLookup(performanceSeries), [performanceSeries]);
+	const theme = useSystemTheme();
+	const chartTheme = CHART_THEMES[theme];
 	const sortedModels = [...models].sort(
 		(a, b) => b.totalInputTokens + b.totalOutputTokens - (a.totalInputTokens + a.totalOutputTokens),
 	);
@@ -173,7 +198,7 @@ export function ModelsTable({ models, performanceSeries }: ModelsTableProps) {
 														No data available
 													</div>
 												) : (
-													<PerformanceChart data={trendData} color={trendColor} />
+													<PerformanceChart data={trendData} color={trendColor} chartTheme={chartTheme} />
 												)}
 											</div>
 										</div>
@@ -225,9 +250,11 @@ function TrendChart({
 function PerformanceChart({
 	data,
 	color,
+	chartTheme,
 }: {
 	data: Array<{ timestamp: number; avgTtftSeconds: number | null; avgTokensPerSecond: number | null }>;
 	color: string;
+	chartTheme: ChartTheme;
 }) {
 	const chartData = {
 		labels: data.map(d => format(new Date(d.timestamp), "MMM d")),
@@ -263,39 +290,39 @@ function PerformanceChart({
 				display: true,
 				position: "top" as const,
 				labels: {
-					color: "#cbd5e1",
+					color: chartTheme.legendLabel,
 					usePointStyle: true,
 					padding: 16,
 					font: { size: 12 },
 				},
 			},
 			tooltip: {
-				backgroundColor: "#16161e",
-				titleColor: "#f8fafc",
-				bodyColor: "#94a3b8",
-				borderColor: "rgba(255, 255, 255, 0.1)",
+				backgroundColor: chartTheme.tooltipBackground,
+				titleColor: chartTheme.tooltipTitle,
+				bodyColor: chartTheme.tooltipBody,
+				borderColor: chartTheme.tooltipBorder,
 				borderWidth: 1,
 				cornerRadius: 8,
 			},
 		},
 		scales: {
 			x: {
-				grid: { color: "rgba(255, 255, 255, 0.06)" },
-				ticks: { color: "#94a3b8", font: { size: 11 } },
+				grid: { color: chartTheme.grid },
+				ticks: { color: chartTheme.tick, font: { size: 11 } },
 			},
 			y: {
 				type: "linear" as const,
 				display: true,
 				position: "left" as const,
-				grid: { color: "rgba(255, 255, 255, 0.06)" },
-				ticks: { color: "#94a3b8", font: { size: 11 } },
+				grid: { color: chartTheme.grid },
+				ticks: { color: chartTheme.tick, font: { size: 11 } },
 			},
 			y1: {
 				type: "linear" as const,
 				display: true,
 				position: "right" as const,
 				grid: { drawOnChartArea: false },
-				ticks: { color: "#94a3b8", font: { size: 11 } },
+				ticks: { color: chartTheme.tick, font: { size: 11 } },
 			},
 		},
 	};

package/src/client/styles.css

@@ -1,32 +1,64 @@
 @import "tailwindcss/index.css";
 :root {
-  --bg-page: #0a0a0f;
-  --bg-surface: #111118;
-  --bg-elevated: #16161e;
-  --bg-hover: rgba(255, 255, 255, 0.03);
-  --bg-active: rgba(255, 255, 255, 0.06);
-
-  --border-subtle: rgba(255, 255, 255, 0.06);
-  --border-default: rgba(255, 255, 255, 0.1);
-
-  --text-primary: #f8fafc;
-  --text-secondary: #94a3b8;
+  color-scheme: light;
+  --bg-page: #f8fafc;
+  --bg-surface: #ffffff;
+  --bg-elevated: #f1f5f9;
+  --bg-hover: rgba(15, 23, 42, 0.04);
+  --bg-active: rgba(15, 23, 42, 0.08);
+
+  --border-subtle: rgba(15, 23, 42, 0.08);
+  --border-default: rgba(15, 23, 42, 0.14);
+
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
   --text-muted: #64748b;
 
   --accent-pink: #ec4899;
-  --accent-pink-glow: rgba(236, 72, 153, 0.3);
-  --accent-cyan: #22d3ee;
-  --accent-cyan-glow: rgba(34, 211, 238, 0.3);
-  --accent-violet: #a78bfa;
-  --accent-green: #4ade80;
-  --accent-amber: #fbbf24;
-  --accent-red: #f87171;
+  --accent-pink-glow: rgba(236, 72, 153, 0.26);
+  --accent-cyan: #0891b2;
+  --accent-cyan-glow: rgba(8, 145, 178, 0.24);
+  --accent-violet: #8b5cf6;
+  --accent-green: #16a34a;
+  --accent-amber: #d97706;
+  --accent-red: #dc2626;
+
+  --tab-active-highlight: inset 0 1px 0 rgba(15, 23, 42, 0.08);
 
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 14px;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --bg-page: #0a0a0f;
+    --bg-surface: #111118;
+    --bg-elevated: #16161e;
+    --bg-hover: rgba(255, 255, 255, 0.03);
+    --bg-active: rgba(255, 255, 255, 0.06);
+
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --border-default: rgba(255, 255, 255, 0.1);
+
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+
+    --accent-pink: #ec4899;
+    --accent-pink-glow: rgba(236, 72, 153, 0.3);
+    --accent-cyan: #22d3ee;
+    --accent-cyan-glow: rgba(34, 211, 238, 0.3);
+    --accent-violet: #a78bfa;
+    --accent-green: #4ade80;
+    --accent-amber: #fbbf24;
+    --accent-red: #f87171;
+
+    --tab-active-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+}
+
 @layer base {
   * {
     box-sizing: border-box;
@@ -140,7 +172,7 @@
   .tab-btn.active {
     color: var(--text-primary);
     background: var(--bg-elevated);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    box-shadow: var(--tab-active-highlight);
   }
 
   .stat-card {

package/src/client/useSystemTheme.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export type SystemTheme = "light" | "dark";
+
+const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+
+function getSystemTheme(): SystemTheme {
+	if (typeof window === "undefined") {
+		return "light";
+	}
+
+	return window.matchMedia(DARK_SCHEME_QUERY).matches ? "dark" : "light";
+}
+
+export function useSystemTheme(): SystemTheme {
+	const [theme, setTheme] = useState<SystemTheme>(() => getSystemTheme());
+
+	useEffect(() => {
+		const media = window.matchMedia(DARK_SCHEME_QUERY);
+		const applyTheme = () => {
+			setTheme(media.matches ? "dark" : "light");
+		};
+
+		applyTheme();
+
+		media.addEventListener("change", applyTheme);
+		return () => media.removeEventListener("change", applyTheme);
+	}, []);
+
+	return theme;
+}