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

package/src/client/app/SyncButton.tsx

@@ -0,0 +1,75 @@
+import { RefreshCw } from "lucide-react";
+import { useState } from "react";
+import { sync } from "../api";
+
+export interface SyncButtonProps {
+	onSyncStart?: () => void;
+	onSyncComplete?: (result: {
+		success: boolean;
+		data?: { processed: number; files: number; totalMessages: number };
+		error?: string;
+	}) => void;
+	className?: string;
+}
+
+export function SyncButton({ onSyncStart, onSyncComplete, className = "" }: SyncButtonProps) {
+	const [syncing, setSyncing] = useState(false);
+	const [status, setStatus] = useState<{ type: "success" | "error"; message: string } | null>(null);
+
+	const handleSync = async () => {
+		if (syncing) return;
+
+		setSyncing(true);
+		setStatus(null);
+		if (onSyncStart) {
+			onSyncStart();
+		}
+
+		try {
+			const data = await sync();
+			const result = {
+				processed: typeof data?.processed === "number" ? data.processed : 0,
+				files: typeof data?.files === "number" ? data.files : 0,
+				totalMessages: typeof data?.totalMessages === "number" ? data.totalMessages : 0,
+			};
+			setStatus({
+				type: "success",
+				message: `Synced: ${result.processed} new request${result.processed === 1 ? "" : "s"} found.`,
+			});
+			if (onSyncComplete) {
+				onSyncComplete({ success: true, data: result });
+			}
+		} catch (err) {
+			const errorMessage = err instanceof Error ? err.message : String(err);
+			setStatus({
+				type: "error",
+				message: `Sync failed: ${errorMessage}`,
+			});
+			if (onSyncComplete) {
+				onSyncComplete({ success: false, error: errorMessage });
+			}
+		} finally {
+			setSyncing(false);
+		}
+	};
+
+	return (
+		<div className={`stats-sync-container ${className}`}>
+			{status && (
+				<span className="stats-sync-status-msg" data-type={status.type}>
+					{status.message}
+				</span>
+			)}
+			<button
+				type="button"
+				onClick={handleSync}
+				disabled={syncing}
+				className="stats-button stats-button-primary stats-sync-btn"
+				aria-busy={syncing}
+			>
+				<RefreshCw size={14} className={`stats-sync-icon ${syncing ? "stats-spin" : ""}`} />
+				{syncing ? "Syncing..." : "Sync DB"}
+			</button>
+		</div>
+	);
+}

package/src/client/app/ThemeToggle.tsx

@@ -0,0 +1,37 @@
+import { type LucideIcon, Monitor, Moon, Sun } from "lucide-react";
+import { type ThemePreference, useThemePreference } from "../useSystemTheme";
+
+const NEXT_PREFERENCE: Record<ThemePreference, ThemePreference> = {
+	system: "light",
+	light: "dark",
+	dark: "system",
+};
+
+const PREFERENCE_ICON: Record<ThemePreference, LucideIcon> = {
+	system: Monitor,
+	light: Sun,
+	dark: Moon,
+};
+
+const PREFERENCE_LABEL: Record<ThemePreference, string> = {
+	system: "System theme",
+	light: "Light theme",
+	dark: "Dark theme",
+};
+
+export function ThemeToggle() {
+	const { preference, setPreference } = useThemePreference();
+	const Icon = PREFERENCE_ICON[preference];
+
+	return (
+		<button
+			type="button"
+			className="stats-theme-toggle"
+			onClick={() => setPreference(NEXT_PREFERENCE[preference])}
+			aria-label={`${PREFERENCE_LABEL[preference]} (click to switch)`}
+			title={`${PREFERENCE_LABEL[preference]} — click to switch`}
+		>
+			<Icon size={16} />
+		</button>
+	);
+}

package/src/client/app/TopBar.tsx

@@ -0,0 +1,73 @@
+import { Menu } from "lucide-react";
+import type { TimeRange } from "../types";
+import { RangeControl } from "./RangeControl";
+import type { DashboardSection } from "./routes";
+import { routes } from "./routes";
+import { SyncButton } from "./SyncButton";
+import { ThemeToggle } from "./ThemeToggle";
+
+export interface TopBarProps {
+	activeSection: DashboardSection;
+	range: TimeRange;
+	onRangeChange: (range: TimeRange) => void;
+	updatedAt: number | null;
+	onSyncStart?: () => void;
+	onSyncComplete?: (result: { success: boolean }) => void;
+	onMenuToggle?: () => void;
+	className?: string;
+}
+
+export function TopBar({
+	activeSection,
+	range,
+	onRangeChange,
+	updatedAt,
+	onSyncStart,
+	onSyncComplete,
+	onMenuToggle,
+	className = "",
+}: TopBarProps) {
+	const currentRoute = routes.find(r => r.id === activeSection);
+	const title = currentRoute?.label || "Observability";
+
+	const formatLastUpdated = (time: number | null) => {
+		if (!time) return "Not updated";
+		const date = new Date(time);
+		return `Updated ${date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}`;
+	};
+
+	return (
+		<header className={`stats-top-bar ${className}`}>
+			<div className="stats-top-bar-left">
+				{onMenuToggle && (
+					<button
+						type="button"
+						onClick={onMenuToggle}
+						className="stats-mobile-menu-btn"
+						aria-label="Open navigation menu"
+					>
+						<Menu size={20} />
+					</button>
+				)}
+				<h1 className="stats-page-title">{title}</h1>
+			</div>
+
+			<div className="stats-top-bar-right">
+				<div className="stats-top-bar-meta">
+					<span
+						className="stats-last-updated"
+						title={updatedAt ? new Date(updatedAt).toLocaleString() : undefined}
+					>
+						{formatLastUpdated(updatedAt)}
+					</span>
+				</div>
+
+				<RangeControl value={range} onChange={onRangeChange} />
+
+				<ThemeToggle />
+
+				<SyncButton onSyncStart={onSyncStart} onSyncComplete={onSyncComplete} />
+			</div>
+		</header>
+	);
+}

package/src/client/app/routes.ts

@@ -0,0 +1,50 @@
+import { Activity, AlertCircle, Coins, Cpu, Folder, LayoutDashboard, Smile } from "lucide-react";
+import type React from "react";
+
+export type DashboardSection = "overview" | "requests" | "errors" | "models" | "costs" | "behavior" | "projects";
+
+export interface DashboardRoute {
+	id: DashboardSection;
+	label: string;
+	shortLabel?: string;
+	icon: React.ComponentType<{ size?: number; className?: string }>;
+}
+
+export const routes: DashboardRoute[] = [
+	{
+		id: "overview",
+		label: "Overview",
+		icon: LayoutDashboard,
+	},
+	{
+		id: "requests",
+		label: "Requests",
+		icon: Activity,
+	},
+	{
+		id: "errors",
+		label: "Errors",
+		icon: AlertCircle,
+	},
+	{
+		id: "models",
+		label: "Models",
+		icon: Cpu,
+	},
+	{
+		id: "costs",
+		label: "Costs",
+		icon: Coins,
+	},
+	{
+		id: "behavior",
+		label: "Behavior",
+		shortLabel: "Behavior",
+		icon: Smile,
+	},
+	{
+		id: "projects",
+		label: "Projects",
+		icon: Folder,
+	},
+];

package/src/client/components/chart-shared.tsx

@@ -1,40 +1,43 @@
 /**
- * Shared chart primitives for the dashboard timeline charts (BehaviorChart,
- * CostChart). Each chart owns its data shape and metric labels — this module
- * owns the layout, theme, legend/tooltip plumbing, and the top-N-by-model
- * bucketing scaffold that's identical between cost and behavior series.
+ * Shared chart primitives for the dashboard timeline charts: the OMP color
+ * palette, light/dark chart chrome, legend/tooltip + scale plumbing, dataset
+ * styling, and the top-N-by-model / aggregate bucketing used by the cost and
+ * behavior series.
  */
 
 import { format } from "date-fns";
 
+// OMP brand palette (packages/collab-web/src/styles/tokens.css): pink/purple/cyan.
+// Categorical series lead with the brand gradient hues (pink -> purple -> cyan).
 export const MODEL_COLORS = [
-	"#a78bfa", // violet
-	"#22d3ee", // cyan
-	"#ec4899", // pink
-	"#4ade80", // green
-	"#fbbf24", // amber
-	"#f87171", // red
-	"#60a5fa", // blue
+	"#ed4abf", // brand pink (accent)
+	"#9b4dff", // brand violet
+	"#5ad8e6", // brand cyan
+	"#62d394", // green
+	"#c77dff", // light purple
+	"#ff8fd1", // light pink
+	"#f5c14b", // amber
+	"#ff6b7d", // rose
 ];
 
 export const CHART_THEMES = {
 	dark: {
-		legendLabel: "#94a3b8",
-		tooltipBackground: "#16161e",
-		tooltipTitle: "#f8fafc",
-		tooltipBody: "#94a3b8",
-		tooltipBorder: "rgba(255, 255, 255, 0.1)",
+		legendLabel: "#a89fb3",
+		tooltipBackground: "#241a2e",
+		tooltipTitle: "#eae5ef",
+		tooltipBody: "#a89fb3",
+		tooltipBorder: "rgba(255, 255, 255, 0.12)",
 		grid: "rgba(255, 255, 255, 0.06)",
-		tick: "#64748b",
+		tick: "#867a93",
 	},
 	light: {
-		legendLabel: "#475569",
+		legendLabel: "#5a5462",
 		tooltipBackground: "#ffffff",
-		tooltipTitle: "#0f172a",
-		tooltipBody: "#334155",
-		tooltipBorder: "rgba(15, 23, 42, 0.18)",
-		grid: "rgba(15, 23, 42, 0.08)",
-		tick: "#64748b",
+		tooltipTitle: "#241a2e",
+		tooltipBody: "#5a5462",
+		tooltipBorder: "rgba(20, 12, 28, 0.15)",
+		grid: "rgba(20, 12, 28, 0.08)",
+		tick: "#6a6275",
 	},
 } as const;
 
@@ -128,7 +131,8 @@ export function barDatasetStyle(color: string) {
 		backgroundColor: color,
 		borderColor: color,
 		borderWidth: 0,
-		borderRadius: 3,
+		borderRadius: 4,
+		maxBarThickness: 56,
 	};
 }
 
@@ -251,70 +255,3 @@ export function buildTopNByModelSeries<T extends ModelKeyedPoint, B>(
 		})),
 	};
 }
-
-/** All Models / By Model segmented toggle — identical UI in every time chart. */
-function ByModelToggle({ byModel, onChange }: { byModel: boolean; onChange: (v: boolean) => void }) {
-	return (
-		<div className="flex bg-[var(--bg-surface)] rounded-[var(--radius-sm)] p-0.5 border border-[var(--border-subtle)]">
-			<button
-				type="button"
-				onClick={() => onChange(false)}
-				className={`tab-btn text-xs ${!byModel ? "active" : ""}`}
-			>
-				All Models
-			</button>
-			<button type="button" onClick={() => onChange(true)} className={`tab-btn text-xs ${byModel ? "active" : ""}`}>
-				By Model
-			</button>
-		</div>
-	);
-}
-
-/**
- * Outer surface card used by both time charts. `controls` slot covers
- * chart-specific tabs (e.g. behavior metric picker); the by-model toggle and
- * empty-state are part of the frame so callers don't redeclare them.
- */
-export function ChartFrame({
-	title,
-	subtitle,
-	empty,
-	emptyMessage,
-	controls,
-	byModel,
-	onByModelChange,
-	children,
-}: {
-	title: string;
-	subtitle: string;
-	empty: boolean;
-	emptyMessage: string;
-	controls?: React.ReactNode;
-	byModel: boolean;
-	onByModelChange: (v: boolean) => void;
-	children: React.ReactNode;
-}) {
-	return (
-		<div className="surface overflow-hidden">
-			<div className="px-5 py-4 border-b border-[var(--border-subtle)] flex items-center justify-between gap-4 flex-wrap">
-				<div>
-					<h3 className="text-sm font-semibold text-[var(--text-primary)]">{title}</h3>
-					<p className="text-xs text-[var(--text-muted)] mt-1">{subtitle}</p>
-				</div>
-				<div className="flex items-center gap-2 flex-wrap">
-					{controls}
-					<ByModelToggle byModel={byModel} onChange={onByModelChange} />
-				</div>
-			</div>
-			<div className="p-5 min-h-[320px]">
-				{empty ? (
-					<div className="h-full flex items-center justify-center text-[var(--text-muted)] text-sm">
-						{emptyMessage}
-					</div>
-				) : (
-					<div className="h-[280px]">{children}</div>
-				)}
-			</div>
-		</div>
-	);
-}

package/src/client/components/models-table-shared.tsx

@@ -1,39 +1,19 @@
 /**
- * Shared primitives for the per-model breakdown tables (ModelsTable,
- * BehaviorModelsTable). Each table still owns its column definitions, sort
- * order, sidebar contents and chart type — this module owns the surface
- * chrome, expand-row plumbing, theme palette, and the mini-sparkline plus
+ * Shared primitives for the per-model breakdown tables. Each table owns its
+ * column definitions, sort order, and chart type — this module owns the
+ * surface chrome, expand-row plumbing, theme palette, the mini-sparkline, and
  * the shared plugin/scale config consumed by multi-line detail charts.
  */
 
 import { format } from "date-fns";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Line } from "react-chartjs-2";
+import type { ChartTheme } from "./chart-shared";
 
-export { MODEL_COLORS } from "./chart-shared";
-
-export const TABLE_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;
-
-export type TableChartTheme = (typeof TABLE_CHART_THEMES)[keyof typeof TABLE_CHART_THEMES];
+// Detail-table charts share the exact OMP chart chrome as the timeline charts;
+// re-export rather than duplicate so the palette has a single source of truth.
+export { CHART_THEMES as TABLE_CHART_THEMES, MODEL_COLORS } from "./chart-shared";
+export type TableChartTheme = ChartTheme;
 
 /** Style defaults for one line in a non-stacked detail chart. */
 export function lineSeriesStyle(color: string) {
@@ -167,7 +147,7 @@ export function ModelTableShell({
 	children: React.ReactNode;
 }) {
 	return (
-		<div className="surface overflow-hidden">
+		<div className="stats-panel overflow-hidden">
 			<div className="px-5 py-4 border-b border-[var(--border-subtle)]">
 				<h3 className="text-sm font-semibold text-[var(--text-primary)]">{title}</h3>
 				{subtitle ? <p className="text-xs text-[var(--text-muted)] mt-1">{subtitle}</p> : null}

package/src/client/components/range-meta.ts

@@ -9,6 +9,7 @@ import type { TimeRange } from "../types";
 
 const HOUR_MS = 60 * 60 * 1000;
 const DAY_MS = 24 * HOUR_MS;
+const FIVE_MIN_MS = 5 * 60 * 1000;
 
 export interface RangeMeta {
 	/** Human label used in chart subtitles ("the last 24 hours"). */
@@ -27,8 +28,8 @@ const RANGE_META: Record<TimeRange, RangeMeta> = {
 	"1h": {
 		windowLabel: "the last hour",
 		trendLabel: "1h Trend",
-		bucketMs: HOUR_MS,
-		bucketCount: 1,
+		bucketMs: FIVE_MIN_MS,
+		bucketCount: 12,
 		tickFormat: "HH:mm",
 	},
 	"24h": {

package/src/client/data/charts.ts

@@ -0,0 +1,14 @@
+import {
+	BarElement,
+	CategoryScale,
+	Chart as ChartJS,
+	Filler,
+	Legend,
+	LinearScale,
+	LineElement,
+	PointElement,
+	Title,
+	Tooltip,
+} from "chart.js";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, Filler);

package/src/client/data/formatters.ts

@@ -0,0 +1,38 @@
+import { formatDistanceToNow } from "date-fns";
+
+export function formatInteger(value: number): string {
+	return value.toLocaleString();
+}
+
+export function formatCompact(value: number): string {
+	return value.toLocaleString(undefined, { notation: "compact" });
+}
+
+export function formatCost(value: number, digits?: number): string {
+	if (value === 0) return "$0";
+	const fractionDigits = digits !== undefined ? digits : value > 0 && value < 0.01 ? 4 : 2;
+	return `$${value.toLocaleString(undefined, {
+		minimumFractionDigits: fractionDigits,
+		maximumFractionDigits: fractionDigits,
+	})}`;
+}
+
+export function formatPercent(value: number, digits = 1): string {
+	return `${(value * 100).toFixed(digits)}%`;
+}
+
+export function formatDurationMs(value: number | null, digits?: number): string {
+	if (value === null) return "-";
+	const sec = value / 1000;
+	const d = digits !== undefined ? digits : sec < 1 ? 2 : 1;
+	return `${sec.toFixed(d)}s`;
+}
+
+export function formatTokensPerSecond(value: number | null): string {
+	if (value === null) return "-";
+	return value.toFixed(1);
+}
+
+export function formatRelativeTime(timestamp: number): string {
+	return formatDistanceToNow(new Date(timestamp), { addSuffix: true });
+}

package/src/client/data/useHashRoute.ts

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useState } from "react";
+import type { DashboardSection } from "../app/routes";
+import type { TimeRange } from "../types";
+
+const VALID_SECTIONS: DashboardSection[] = [
+	"overview",
+	"requests",
+	"errors",
+	"models",
+	"costs",
+	"behavior",
+	"projects",
+];
+
+const VALID_RANGES: TimeRange[] = ["1h", "24h", "7d", "30d", "90d", "all"];
+
+function parseHash(hash: string): { section: DashboardSection; range: TimeRange } {
+	const cleanHash = hash.replace(/^#\/?/, "");
+	const [pathPart, queryPart] = cleanHash.split("?");
+
+	const section: DashboardSection = (VALID_SECTIONS as string[]).includes(pathPart)
+		? (pathPart as DashboardSection)
+		: "overview";
+
+	let range: TimeRange = "24h";
+	if (queryPart) {
+		const params = new URLSearchParams(queryPart);
+		const rangeParam = params.get("range") as TimeRange;
+		if (VALID_RANGES.includes(rangeParam)) {
+			range = rangeParam;
+		}
+	}
+
+	return { section, range };
+}
+
+export function useHashRoute() {
+	const [route, setRouteState] = useState(() => parseHash(window.location.hash));
+
+	useEffect(() => {
+		const handleHashChange = () => {
+			setRouteState(parseHash(window.location.hash));
+		};
+
+		window.addEventListener("hashchange", handleHashChange);
+		return () => {
+			window.removeEventListener("hashchange", handleHashChange);
+		};
+	}, []);
+
+	const updateHash = useCallback((section: string, range: TimeRange) => {
+		window.location.hash = `/${section}?range=${range}`;
+	}, []);
+
+	const setSection = useCallback(
+		(newSection: DashboardSection) => {
+			updateHash(newSection, route.range);
+		},
+		[route.range, updateHash],
+	);
+
+	const setRange = useCallback(
+		(newRange: string) => {
+			const nextRange = VALID_RANGES.includes(newRange as TimeRange) ? (newRange as TimeRange) : "24h";
+			updateHash(route.section, nextRange);
+		},
+		[route.section, updateHash],
+	);
+
+	useEffect(() => {
+		const currentHash = window.location.hash;
+		const parsed = parseHash(currentHash);
+		const expectedHash = `#/${parsed.section}?range=${parsed.range}`;
+		if (currentHash !== expectedHash) {
+			window.location.hash = `/${parsed.section}?range=${parsed.range}`;
+		}
+	}, []);
+
+	return {
+		section: route.section,
+		setSection,
+		range: route.range,
+		setRange,
+	};
+}