@oh-my-pi/omp-stats 16.0.4 → 16.0.5

package/src/client/useSystemTheme.ts

@@ -1,31 +1,87 @@
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 
 export type SystemTheme = "light" | "dark";
+export type ThemePreference = "system" | "light" | "dark";
 
+const STORAGE_KEY = "omp-stats-theme";
 const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
 
-function getSystemTheme(): SystemTheme {
-	if (typeof window === "undefined") {
-		return "light";
-	}
+function readStoredPreference(): ThemePreference {
+	if (typeof localStorage === "undefined") return "system";
+	const stored = localStorage.getItem(STORAGE_KEY);
+	return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
+}
 
+function getSystemTheme(): SystemTheme {
+	if (typeof window === "undefined") return "dark";
 	return window.matchMedia(DARK_SCHEME_QUERY).matches ? "dark" : "light";
 }
 
-export function useSystemTheme(): SystemTheme {
-	const [theme, setTheme] = useState<SystemTheme>(() => getSystemTheme());
+// Module-level store shared by the toggle (writer) and every chart (reader) so
+// an explicit override and the system default resolve through one source.
+let preference: ThemePreference = readStoredPreference();
+let resolved: SystemTheme = preference === "system" ? getSystemTheme() : preference;
+const listeners = new Set<() => void>();
+
+function emit(): void {
+	for (const listener of listeners) listener();
+}
+
+function applyResolvedTheme(): void {
+	resolved = preference === "system" ? getSystemTheme() : preference;
+	if (typeof document !== "undefined") {
+		document.documentElement.dataset.theme = resolved;
+		document.documentElement.style.colorScheme = resolved;
+	}
+}
+
+if (typeof window !== "undefined") {
+	applyResolvedTheme();
+	window.matchMedia(DARK_SCHEME_QUERY).addEventListener("change", () => {
+		// System changes only move the needle while following the system.
+		if (preference === "system") {
+			applyResolvedTheme();
+			emit();
+		}
+	});
+}
 
-	useEffect(() => {
-		const media = window.matchMedia(DARK_SCHEME_QUERY);
-		const applyTheme = () => {
-			setTheme(media.matches ? "dark" : "light");
-		};
+export function setThemePreference(next: ThemePreference): void {
+	preference = next;
+	if (typeof localStorage !== "undefined") localStorage.setItem(STORAGE_KEY, next);
+	applyResolvedTheme();
+	emit();
+}
 
-		applyTheme();
+function subscribe(callback: () => void): () => void {
+	listeners.add(callback);
+	return () => listeners.delete(callback);
+}
 
-		media.addEventListener("change", applyTheme);
-		return () => media.removeEventListener("change", applyTheme);
-	}, []);
+/** Reader for the active resolved theme. Reflects system default and overrides. */
+export function useSystemTheme(): SystemTheme {
+	return useSyncExternalStore(
+		subscribe,
+		() => resolved,
+		() => "dark" as SystemTheme,
+	);
+}
 
-	return theme;
+/** Reader + writer for the theme preference (powers the toggle). */
+export function useThemePreference(): {
+	preference: ThemePreference;
+	resolved: SystemTheme;
+	setPreference: (next: ThemePreference) => void;
+} {
+	const pref = useSyncExternalStore(
+		subscribe,
+		() => preference,
+		() => "system" as ThemePreference,
+	);
+	const res = useSyncExternalStore(
+		subscribe,
+		() => resolved,
+		() => "dark" as SystemTheme,
+	);
+	return { preference: pref, resolved: res, setPreference: setThemePreference };
 }

package/dist/types/client/components/BehaviorChart.d.ts

@@ -1,6 +0,0 @@
-import type { BehaviorTimeSeriesPoint } from "../types";
-interface BehaviorChartProps {
-    behaviorSeries: BehaviorTimeSeriesPoint[];
-}
-export declare function BehaviorChart({ behaviorSeries }: BehaviorChartProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/BehaviorModelsTable.d.ts

@@ -1,7 +0,0 @@
-import type { BehaviorModelStats, BehaviorTimeSeriesPoint } from "../types";
-interface BehaviorModelsTableProps {
-    models: BehaviorModelStats[];
-    behaviorSeries: BehaviorTimeSeriesPoint[];
-}
-export declare function BehaviorModelsTable({ models, behaviorSeries }: BehaviorModelsTableProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/BehaviorSummary.d.ts

@@ -1,7 +0,0 @@
-import type { BehaviorOverallStats, BehaviorTimeSeriesPoint } from "../types";
-interface BehaviorSummaryProps {
-    overall: BehaviorOverallStats;
-    behaviorSeries: BehaviorTimeSeriesPoint[];
-}
-export declare function BehaviorSummary({ overall, behaviorSeries }: BehaviorSummaryProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/ChartsContainer.d.ts

@@ -1,7 +0,0 @@
-import type { ModelTimeSeriesPoint, TimeRange } from "../types";
-interface ChartsContainerProps {
-    modelSeries: ModelTimeSeriesPoint[];
-    timeRange: TimeRange;
-}
-export declare function ChartsContainer({ modelSeries, timeRange }: ChartsContainerProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/CostChart.d.ts

@@ -1,6 +0,0 @@
-import type { CostTimeSeriesPoint } from "../types";
-interface CostChartProps {
-    costSeries: CostTimeSeriesPoint[];
-}
-export declare function CostChart({ costSeries }: CostChartProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/CostSummary.d.ts

@@ -1,6 +0,0 @@
-import type { CostTimeSeriesPoint } from "../types";
-interface CostSummaryProps {
-    costSeries: CostTimeSeriesPoint[];
-}
-export declare function CostSummary({ costSeries }: CostSummaryProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/Header.d.ts

@@ -1,12 +0,0 @@
-import type { TimeRange } from "../types";
-type Tab = "overview" | "requests" | "errors" | "models" | "costs" | "behavior";
-interface HeaderProps {
-    activeTab: Tab;
-    onTabChange: (tab: Tab) => void;
-    onSync: () => void;
-    syncing: boolean;
-    timeRange: TimeRange;
-    onTimeRangeChange: (timeRange: TimeRange) => void;
-}
-export declare function Header({ activeTab, onTabChange, onSync, syncing, timeRange, onTimeRangeChange }: HeaderProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/ModelsTable.d.ts

@@ -1,8 +0,0 @@
-import type { ModelPerformancePoint, ModelStats, TimeRange } from "../types";
-interface ModelsTableProps {
-    models: ModelStats[];
-    performanceSeries: ModelPerformancePoint[];
-    timeRange: TimeRange;
-}
-export declare function ModelsTable({ models, performanceSeries, timeRange }: ModelsTableProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/RequestDetail.d.ts

@@ -1,6 +0,0 @@
-interface RequestDetailProps {
-    id: number;
-    onClose: () => void;
-}
-export declare function RequestDetail({ id, onClose }: RequestDetailProps): import("react").JSX.Element | null;
-export {};

package/dist/types/client/components/RequestList.d.ts

@@ -1,8 +0,0 @@
-import type { MessageStats } from "../types";
-interface RequestListProps {
-    requests: MessageStats[];
-    onSelect: (req: MessageStats) => void;
-    title: string;
-}
-export declare function RequestList({ requests, onSelect, title }: RequestListProps): import("react").JSX.Element;
-export {};

package/dist/types/client/components/StatsGrid.d.ts

@@ -1,6 +0,0 @@
-import type { AggregatedStats } from "../types";
-interface StatsGridProps {
-    stats: AggregatedStats;
-}
-export declare function StatsGrid({ stats }: StatsGridProps): import("react").JSX.Element;
-export {};

package/src/client/components/BehaviorChart.tsx

@@ -1,189 +0,0 @@
-import {
-	BarElement,
-	CategoryScale,
-	Chart as ChartJS,
-	type ChartOptions,
-	Filler,
-	Legend,
-	LinearScale,
-	LineElement,
-	PointElement,
-	Title,
-	Tooltip,
-} from "chart.js";
-import { useMemo, useState } from "react";
-import { Bar, Line } from "react-chartjs-2";
-import type { BehaviorTimeSeriesPoint } from "../types";
-import { useSystemTheme } from "../useSystemTheme";
-import {
-	barDatasetStyle,
-	buildAggregateTimeSeries,
-	buildSharedPlugins,
-	buildSharedScales,
-	buildTopNByModelSeries,
-	CHART_THEMES,
-	ChartFrame,
-	type ChartSeries,
-	lineDatasetStyle,
-	MODEL_COLORS,
-	styleDatasets,
-} from "./chart-shared";
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, Filler);
-
-const METRIC_OPTIONS = [
-	{ value: "yelling", label: "Yelling" },
-	{ value: "profanity", label: "Profanity" },
-	{ value: "anguish", label: "Anguish (!!!, nooo, dude, ..)" },
-	{ value: "negation", label: "Negation (no/nope/wrong)" },
-	{ value: "repetition", label: "Repetition (i meant, still doesnt)" },
-	{ value: "blame", label: "Blame (you didnt, stop X-ing)" },
-	{ value: "frustration", label: "Frustration (neg + rep + blame)" },
-	{ value: "total", label: "All signals combined" },
-] as const;
-type Metric = (typeof METRIC_OPTIONS)[number]["value"];
-
-function formatRateAxis(value: number): string {
-	if (!Number.isFinite(value)) return "-";
-	if (value === 0) return "0%";
-	if (Math.abs(value) < 1) return `${value.toFixed(1)}%`;
-	return `${value.toFixed(0)}%`;
-}
-
-interface BehaviorChartProps {
-	behaviorSeries: BehaviorTimeSeriesPoint[];
-}
-
-function pointHits(point: BehaviorTimeSeriesPoint, metric: Metric): number {
-	if (metric === "frustration") return point.negation + point.repetition + point.blame;
-	if (metric === "total") {
-		return point.yelling + point.profanity + point.anguish + point.negation + point.repetition + point.blame;
-	}
-	return point[metric];
-}
-
-/** Hits per 100 user messages, 0 when there were no messages. */
-function ratePercent(hits: number, messages: number): number {
-	if (messages <= 0) return 0;
-	return (hits / messages) * 100;
-}
-
-interface DailyBucket {
-	hits: number;
-	messages: number;
-}
-
-function buildAggregateSeries(points: BehaviorTimeSeriesPoint[], metric: Metric): ChartSeries {
-	const label = METRIC_OPTIONS.find(m => m.value === metric)?.label ?? "Hits";
-	return buildAggregateTimeSeries<BehaviorTimeSeriesPoint, DailyBucket>(points, label, {
-		initBucket: () => ({ hits: 0, messages: 0 }),
-		accumulate: (bucket, point) => {
-			bucket.hits += pointHits(point, metric);
-			bucket.messages += point.messages;
-		},
-		bucketToValue: bucket => ratePercent(bucket.hits, bucket.messages),
-	});
-}
-
-function buildByModelSeries(points: BehaviorTimeSeriesPoint[], metric: Metric): ChartSeries {
-	// Rank by message volume so the models you actually use surface first,
-	// matching the Behavior-by-Model table. Per-bucket math tracks hits +
-	// messages separately so the final rate isn't skewed by low-volume days.
-	return buildTopNByModelSeries<BehaviorTimeSeriesPoint, DailyBucket>(points, {
-		rankWeight: point => point.messages,
-		initBucket: () => ({ hits: 0, messages: 0 }),
-		accumulate: (bucket, point) => {
-			bucket.hits += pointHits(point, metric);
-			bucket.messages += point.messages;
-		},
-		bucketToValue: bucket => ratePercent(bucket.hits, bucket.messages),
-	});
-}
-
-export function BehaviorChart({ behaviorSeries }: BehaviorChartProps) {
-	const [byModel, setByModel] = useState(false);
-	const [metric, setMetric] = useState<Metric>("total");
-	const theme = useSystemTheme();
-	const chartTheme = CHART_THEMES[theme];
-
-	const chartData = useMemo(
-		() => (byModel ? buildByModelSeries(behaviorSeries, metric) : buildAggregateSeries(behaviorSeries, metric)),
-		[behaviorSeries, byModel, metric],
-	);
-
-	const sharedPlugins = buildSharedPlugins({
-		chartTheme,
-		showLegend: byModel,
-		defaultLabel: "Hits",
-		formatValue: formatRateAxis,
-	});
-
-	const { sharedScaleBase, yScale } = buildSharedScales({ chartTheme, formatY: formatRateAxis });
-
-	const metricLabel = METRIC_OPTIONS.find(m => m.value === metric)?.label ?? "";
-	const metricTabs = (
-		<div className="flex bg-[var(--bg-surface)] rounded-[var(--radius-sm)] p-0.5 border border-[var(--border-subtle)]">
-			{METRIC_OPTIONS.map(opt => (
-				<button
-					key={opt.value}
-					type="button"
-					onClick={() => setMetric(opt.value)}
-					className={`tab-btn text-xs ${metric === opt.value ? "active" : ""}`}
-				>
-					{opt.label}
-				</button>
-			))}
-		</div>
-	);
-
-	let chartNode: React.ReactNode;
-	if (byModel) {
-		const lineData = {
-			labels: chartData.labels,
-			datasets: styleDatasets(chartData, i => lineDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
-		};
-
-		const lineOptions: ChartOptions<"line"> = {
-			responsive: true,
-			maintainAspectRatio: false,
-			interaction: { mode: "index", intersect: false },
-			plugins: sharedPlugins,
-			scales: { x: sharedScaleBase, y: yScale },
-		};
-
-		chartNode = <Line data={lineData} options={lineOptions} />;
-	} else {
-		const barData = {
-			labels: chartData.labels,
-			datasets: styleDatasets(chartData, i => barDatasetStyle(MODEL_COLORS[i % MODEL_COLORS.length])),
-		};
-
-		const barOptions: ChartOptions<"bar"> = {
-			responsive: true,
-			maintainAspectRatio: false,
-			interaction: { mode: "index", intersect: false },
-			plugins: sharedPlugins,
-			scales: {
-				x: { ...sharedScaleBase, stacked: true },
-				y: { ...yScale, stacked: true },
-			},
-			layout: { padding: { top: 8 } },
-		};
-
-		chartNode = <Bar data={barData} options={barOptions} />;
-	}
-
-	return (
-		<ChartFrame
-			title="User Tantrums"
-			subtitle={`${metricLabel} as % of user messages per day`}
-			empty={chartData.labels.length === 0}
-			emptyMessage="No behavioral data yet. Sync to scan your sessions."
-			controls={metricTabs}
-			byModel={byModel}
-			onByModelChange={setByModel}
-		>
-			{chartNode}
-		</ChartFrame>
-	);
-}