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

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

@@ -1,2 +1,11 @@
 export type SystemTheme = "light" | "dark";
+export type ThemePreference = "system" | "light" | "dark";
+export declare function setThemePreference(next: ThemePreference): void;
+/** Reader for the active resolved theme. Reflects system default and overrides. */
 export declare function useSystemTheme(): SystemTheme;
+/** Reader + writer for the theme preference (powers the toggle). */
+export declare function useThemePreference(): {
+    preference: ThemePreference;
+    resolved: SystemTheme;
+    setPreference: (next: ThemePreference) => void;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/omp-stats",
-	"version": "16.0.4",
+	"version": "16.0.5",
 	"description": "Local observability dashboard for pi AI usage statistics",
 	"homepage": "https://omp.sh",
 	"author": "Can Boluk",
@@ -37,9 +37,9 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-ai": "16.0.4",
-		"@oh-my-pi/pi-catalog": "16.0.4",
-		"@oh-my-pi/pi-utils": "16.0.4",
+		"@oh-my-pi/pi-ai": "16.0.5",
+		"@oh-my-pi/pi-catalog": "16.0.5",
+		"@oh-my-pi/pi-utils": "16.0.5",
 		"@tailwindcss/node": "^4.3.0",
 		"chart.js": "^4.5.1",
 		"date-fns": "^4.4.0",

package/src/aggregator.ts

@@ -255,6 +255,7 @@ export async function syncAllSessions(opts?: SyncOptions): Promise<{ processed:
 
 const HOUR_MS = 60 * 60 * 1000;
 const DAY_MS = 24 * HOUR_MS;
+const FIVE_MIN_MS = 5 * 60 * 1000;
 
 type TimeRange = "1h" | "24h" | "7d" | "30d" | "90d" | "all";
 
@@ -274,11 +275,11 @@ const DEFAULT_TIME_RANGE: TimeRange = "24h";
 const TIME_RANGE_TO_CONFIG: Record<TimeRange, Omit<TimeRangeConfig, "cutoff">> = {
 	"1h": {
 		timeSeriesHours: 1,
-		timeSeriesBucketMs: HOUR_MS,
+		timeSeriesBucketMs: FIVE_MIN_MS,
 		modelSeriesDays: 1,
-		modelSeriesBucketMs: HOUR_MS,
+		modelSeriesBucketMs: FIVE_MIN_MS,
 		modelPerformanceDays: 1,
-		modelPerformanceBucketMs: HOUR_MS,
+		modelPerformanceBucketMs: FIVE_MIN_MS,
 		costSeriesDays: 1,
 	},
 	"24h": {

package/src/client/App.tsx

@@ -1,221 +1,103 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useRef, useState } from "react";
+import { AppLayout } from "./app/AppLayout";
+import type { DashboardSection } from "./app/routes";
+import { useHashRoute } from "./data/useHashRoute";
 import {
-	getBehaviorDashboardStats,
-	getCostDashboardStats,
-	getModelDashboardStats,
-	getOverviewStats,
-	getRecentErrors,
-	getRecentRequests,
-	sync,
-} from "./api";
-import { BehaviorChart } from "./components/BehaviorChart";
-import { BehaviorModelsTable } from "./components/BehaviorModelsTable";
-import { BehaviorSummary } from "./components/BehaviorSummary";
-import { ChartsContainer } from "./components/ChartsContainer";
-import { CostChart } from "./components/CostChart";
-import { CostSummary } from "./components/CostSummary";
-import { Header } from "./components/Header";
-import { ModelsTable } from "./components/ModelsTable";
-import { RequestDetail } from "./components/RequestDetail";
-import { RequestList } from "./components/RequestList";
-import { StatsGrid } from "./components/StatsGrid";
-import type {
-	BehaviorDashboardStats,
-	CostDashboardStats,
-	MessageStats,
-	ModelDashboardStats,
-	OverviewStats,
-	TimeRange,
-} from "./types";
-
-type Tab = "overview" | "requests" | "errors" | "models" | "costs" | "behavior";
+	BehaviorRoute,
+	CostsRoute,
+	ErrorsRoute,
+	ModelsRoute,
+	OverviewRoute,
+	ProjectsRoute,
+	RequestsRoute,
+} from "./routes";
+import { RequestDrawer } from "./ui/RequestDrawer";
 
 export default function App() {
-	const [overviewStats, setOverviewStats] = useState<OverviewStats | null>(null);
-	const [modelStats, setModelStats] = useState<ModelDashboardStats | null>(null);
-	const [costStats, setCostStats] = useState<CostDashboardStats | null>(null);
-	const [behaviorStats, setBehaviorStats] = useState<BehaviorDashboardStats | 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<Tab>("overview");
-	const [timeRange, setTimeRange] = useState<TimeRange>("24h");
-
-	const loadRecentLists = useCallback(async () => {
-		try {
-			const [requests, errors] = await Promise.all([getRecentRequests(50), getRecentErrors(50)]);
-			setRecentRequests(requests);
-			setRecentErrors(errors);
-		} catch (err) {
-			console.error(err);
+	const { section, setSection, range, setRange } = useHashRoute();
+	const [refreshTrigger, setRefreshTrigger] = useState(0);
+	const [selectedRequestId, setSelectedRequestId] = useState<number | null>(null);
+	const [updatedAt, setUpdatedAt] = useState<number | null>(() => Date.now());
+
+	const handleSyncComplete = useCallback((result: { success: boolean }) => {
+		if (result.success) {
+			setRefreshTrigger(prev => prev + 1);
+			setUpdatedAt(Date.now());
 		}
 	}, []);
 
-	const loadActiveTabStats = useCallback(async () => {
-		try {
-			if (activeTab === "models") {
-				setModelStats(await getModelDashboardStats(timeRange));
-				return;
-			}
-			if (activeTab === "costs") {
-				setCostStats(await getCostDashboardStats(timeRange));
-				return;
-			}
-			if (activeTab === "behavior") {
-				setBehaviorStats(await getBehaviorDashboardStats(timeRange));
-				return;
-			}
-			if (activeTab === "overview") {
-				setOverviewStats(await getOverviewStats(timeRange));
-			}
-		} catch (err) {
-			console.error(err);
-		}
-	}, [activeTab, timeRange]);
-
-	const handleSync = async () => {
-		setSyncing(true);
-		try {
-			await sync();
-			await Promise.all([loadActiveTabStats(), loadRecentLists()]);
-		} finally {
-			setSyncing(false);
+	// Stable identity so the drawer's effects don't tear down on every App render.
+	const closeDrawer = useCallback(() => setSelectedRequestId(null), []);
+
+	const active = section;
+
+	// Keep every visited section mounted and just toggle visibility. Remounting a
+	// route on each navigation replays the chart entry animations (a visible
+	// flicker); keeping it alive makes revisits instant while the live chart
+	// instances still animate in place on data/range updates. Only the active
+	// route fetches/polls (enabled), so hidden routes don't keep hitting the API.
+	const mountedRef = useRef<Set<DashboardSection>>(new Set());
+	mountedRef.current.add(active);
+
+	const renderRoute = (target: DashboardSection) => {
+		const isActive = target === active;
+		switch (target) {
+			case "overview":
+				return (
+					<OverviewRoute
+						active={isActive}
+						range={range}
+						refreshTrigger={refreshTrigger}
+						onRequestClick={setSelectedRequestId}
+					/>
+				);
+			case "requests":
+				return (
+					<RequestsRoute
+						active={isActive}
+						range={range}
+						refreshTrigger={refreshTrigger}
+						onRequestClick={setSelectedRequestId}
+					/>
+				);
+			case "errors":
+				return (
+					<ErrorsRoute
+						active={isActive}
+						range={range}
+						refreshTrigger={refreshTrigger}
+						onRequestClick={setSelectedRequestId}
+					/>
+				);
+			case "models":
+				return <ModelsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "costs":
+				return <CostsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "behavior":
+				return <BehaviorRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
+			case "projects":
+				return <ProjectsRoute active={isActive} range={range} refreshTrigger={refreshTrigger} />;
 		}
 	};
 
-	useEffect(() => {
-		loadRecentLists();
-		const interval = setInterval(loadRecentLists, 30000);
-		return () => clearInterval(interval);
-	}, [loadRecentLists]);
-
-	useEffect(() => {
-		loadActiveTabStats();
-		const interval = setInterval(loadActiveTabStats, 30000);
-		return () => clearInterval(interval);
-	}, [loadActiveTabStats]);
-
 	return (
-		<div className="min-h-screen">
-			<div className="max-w-[1600px] mx-auto px-6 py-6">
-				<Header
-					activeTab={activeTab}
-					onTabChange={setActiveTab}
-					onSync={handleSync}
-					syncing={syncing}
-					timeRange={timeRange}
-					onTimeRangeChange={setTimeRange}
-				/>
-
-				{activeTab === "overview" && (
-					<div className="space-y-6 animate-fade-in">
-						{overviewStats ? (
-							<StatsGrid stats={overviewStats.overall} />
-						) : (
-							<LoadingState label="Loading overview..." />
-						)}
-
-						<div className="grid lg:grid-cols-2 gap-6">
-							<RequestList
-								title="Recent Requests"
-								requests={recentRequests.slice(0, 10)}
-								onSelect={r => r.id && setSelectedRequest(r.id)}
-							/>
-							<RequestList
-								title="Recent Errors"
-								requests={recentErrors.slice(0, 10)}
-								onSelect={r => r.id && setSelectedRequest(r.id)}
-							/>
-						</div>
-					</div>
-				)}
-
-				{activeTab === "requests" && (
-					<div className="h-[calc(100vh-140px)] animate-fade-in">
-						<RequestList
-							title="All Recent Requests"
-							requests={recentRequests}
-							onSelect={r => r.id && setSelectedRequest(r.id)}
-						/>
-					</div>
-				)}
-
-				{activeTab === "errors" && (
-					<div className="h-[calc(100vh-140px)] animate-fade-in">
-						<RequestList
-							title="Failed Requests"
-							requests={recentErrors}
-							onSelect={r => r.id && setSelectedRequest(r.id)}
-						/>
-					</div>
-				)}
-
-				{activeTab === "models" && (
-					<div className="space-y-6 animate-fade-in">
-						{modelStats ? (
-							<>
-								<ChartsContainer modelSeries={modelStats.modelSeries} timeRange={timeRange} />
-								<ModelsTable
-									models={modelStats.byModel}
-									performanceSeries={modelStats.modelPerformanceSeries}
-									timeRange={timeRange}
-								/>
-							</>
-						) : (
-							<LoadingState label="Loading models..." />
-						)}
+		<>
+			<AppLayout
+				activeSection={active}
+				onSectionChange={setSection}
+				range={range}
+				onRangeChange={setRange}
+				updatedAt={updatedAt}
+				onSyncComplete={handleSyncComplete}
+			>
+				{[...mountedRef.current].map(target => (
+					<div key={target} hidden={target !== active}>
+						{renderRoute(target)}
 					</div>
-				)}
+				))}
+			</AppLayout>
 
-				{activeTab === "costs" && (
-					<div className="space-y-6 animate-fade-in">
-						{costStats ? (
-							<>
-								<CostSummary costSeries={costStats.costSeries} />
-								<CostChart costSeries={costStats.costSeries} />
-							</>
-						) : (
-							<LoadingState label="Loading costs..." />
-						)}
-					</div>
-				)}
-
-				{activeTab === "behavior" && (
-					<div className="space-y-6 animate-fade-in">
-						{behaviorStats ? (
-							<>
-								<BehaviorSummary
-									overall={behaviorStats.overall}
-									behaviorSeries={behaviorStats.behaviorSeries}
-								/>
-								<BehaviorChart behaviorSeries={behaviorStats.behaviorSeries} />
-								<BehaviorModelsTable
-									models={behaviorStats.byModel}
-									behaviorSeries={behaviorStats.behaviorSeries}
-								/>
-							</>
-						) : (
-							<LoadingState label="Loading behavior..." />
-						)}
-					</div>
-				)}
-
-				{selectedRequest !== null && (
-					<RequestDetail id={selectedRequest} onClose={() => setSelectedRequest(null)} />
-				)}
-			</div>
-		</div>
-	);
-}
-
-function LoadingState({ label }: { label: string }) {
-	return (
-		<div className="min-h-[180px] flex items-center justify-center">
-			<div className="flex items-center gap-3 text-[var(--text-muted)]">
-				<div className="w-5 h-5 border-2 border-[var(--border-default)] border-t-[var(--accent-cyan)] rounded-full spin" />
-				<span className="text-sm">{label}</span>
-			</div>
-		</div>
+			<RequestDrawer id={selectedRequestId} onClose={closeDrawer} />
+		</>
 	);
 }

package/src/client/api.ts

@@ -1,65 +1,83 @@
 import type {
 	BehaviorDashboardStats,
 	CostDashboardStats,
-	DashboardStats,
+	FolderStats,
 	MessageStats,
 	ModelDashboardStats,
 	OverviewStats,
 	RequestDetails,
+	TimeRange,
 } from "./types";
 
 const API_BASE = "/api";
 
-export async function getStats(range = "24h"): Promise<DashboardStats> {
-	const res = await fetch(`${API_BASE}/stats?range=${encodeURIComponent(range)}`);
-	if (!res.ok) throw new Error("Failed to fetch stats");
-	return res.json() as Promise<DashboardStats>;
+export class ApiError extends Error {
+	status: number;
+	endpoint: string;
+
+	constructor(status: number, endpoint: string, message: string) {
+		super(message);
+		this.name = "ApiError";
+		this.status = status;
+		this.endpoint = endpoint;
+	}
+}
+
+async function fetchJson<T>(endpoint: string, options?: RequestInit): Promise<T> {
+	const res = await fetch(endpoint, options);
+	if (!res.ok) {
+		throw new ApiError(res.status, endpoint, `HTTP error ${res.status} on ${endpoint}`);
+	}
+	return res.json() as Promise<T>;
+}
+
+export async function getOverviewStats(range: TimeRange = "24h", signal?: AbortSignal): Promise<OverviewStats> {
+	return fetchJson<OverviewStats>(`${API_BASE}/stats/overview?range=${encodeURIComponent(range)}`, {
+		signal,
+	});
 }
 
-export async function getOverviewStats(range = "24h"): Promise<OverviewStats> {
-	const res = await fetch(`${API_BASE}/stats/overview?range=${encodeURIComponent(range)}`);
-	if (!res.ok) throw new Error("Failed to fetch overview stats");
-	return res.json() as Promise<OverviewStats>;
+export async function getModelDashboardStats(
+	range: TimeRange = "24h",
+	signal?: AbortSignal,
+): Promise<ModelDashboardStats> {
+	return fetchJson<ModelDashboardStats>(`${API_BASE}/stats/model-dashboard?range=${encodeURIComponent(range)}`, {
+		signal,
+	});
 }
 
-export async function getModelDashboardStats(range = "24h"): Promise<ModelDashboardStats> {
-	const res = await fetch(`${API_BASE}/stats/model-dashboard?range=${encodeURIComponent(range)}`);
-	if (!res.ok) throw new Error("Failed to fetch model stats");
-	return res.json() as Promise<ModelDashboardStats>;
+export async function getCostDashboardStats(
+	range: TimeRange = "24h",
+	signal?: AbortSignal,
+): Promise<CostDashboardStats> {
+	return fetchJson<CostDashboardStats>(`${API_BASE}/stats/costs?range=${encodeURIComponent(range)}`, { signal });
 }
 
-export async function getCostDashboardStats(range = "24h"): Promise<CostDashboardStats> {
-	const res = await fetch(`${API_BASE}/stats/costs?range=${encodeURIComponent(range)}`);
-	if (!res.ok) throw new Error("Failed to fetch cost stats");
-	return res.json() as Promise<CostDashboardStats>;
+export async function getRecentRequests(limit = 50, signal?: AbortSignal): Promise<MessageStats[]> {
+	return fetchJson<MessageStats[]>(`${API_BASE}/stats/recent?limit=${limit}`, { signal });
 }
 
-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, signal?: AbortSignal): Promise<MessageStats[]> {
+	return fetchJson<MessageStats[]>(`${API_BASE}/stats/errors?limit=${limit}`, { signal });
 }
 
-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, signal?: AbortSignal): Promise<RequestDetails> {
+	return fetchJson<RequestDetails>(`${API_BASE}/request/${id}`, { signal });
 }
 
-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(signal?: AbortSignal): Promise<{ processed: number; files: number; totalMessages: number }> {
+	return fetchJson<{ processed: number; files: number; totalMessages: number }>(`${API_BASE}/sync`, { signal });
 }
 
-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();
+export async function getBehaviorDashboardStats(
+	range: TimeRange = "24h",
+	signal?: AbortSignal,
+): Promise<BehaviorDashboardStats> {
+	return fetchJson<BehaviorDashboardStats>(`${API_BASE}/stats/behavior?range=${encodeURIComponent(range)}`, {
+		signal,
+	});
 }
 
-export async function getBehaviorDashboardStats(range = "24h"): Promise<BehaviorDashboardStats> {
-	const res = await fetch(`${API_BASE}/stats/behavior?range=${encodeURIComponent(range)}`);
-	if (!res.ok) throw new Error("Failed to fetch behavior stats");
-	return res.json() as Promise<BehaviorDashboardStats>;
+export async function getFolderStats(range: TimeRange = "24h", signal?: AbortSignal): Promise<FolderStats[]> {
+	return fetchJson<FolderStats[]>(`${API_BASE}/stats/folders?range=${encodeURIComponent(range)}`, { signal });
 }

package/src/client/app/AppLayout.tsx

@@ -0,0 +1,93 @@
+import { X } from "lucide-react";
+import type React from "react";
+import { useState } from "react";
+import type { TimeRange } from "../types";
+import { NavRail } from "./NavRail";
+import type { DashboardSection } from "./routes";
+import { TopBar } from "./TopBar";
+
+export interface AppLayoutProps {
+	activeSection: DashboardSection;
+	onSectionChange: (section: DashboardSection) => void;
+	range: TimeRange;
+	onRangeChange: (range: TimeRange) => void;
+	updatedAt: number | null;
+	onSyncStart?: () => void;
+	onSyncComplete?: (result: { success: boolean }) => void;
+	children: React.ReactNode;
+}
+
+export function AppLayout({
+	activeSection,
+	onSectionChange,
+	range,
+	onRangeChange,
+	updatedAt,
+	onSyncStart,
+	onSyncComplete,
+	children,
+}: AppLayoutProps) {
+	const [menuOpen, setMenuOpen] = useState(false);
+
+	const handleSectionChange = (section: DashboardSection) => {
+		onSectionChange(section);
+		setMenuOpen(false);
+	};
+
+	return (
+		<div className="stats-app-container">
+			{/* Desktop Rail */}
+			<NavRail activeSection={activeSection} onSectionChange={handleSectionChange} className="stats-desktop-nav" />
+
+			{/* Mobile Nav Drawer */}
+			{menuOpen && (
+				<div className="stats-mobile-drawer-overlay" onClick={() => setMenuOpen(false)} role="presentation">
+					<div
+						className="stats-mobile-drawer"
+						onClick={e => e.stopPropagation()}
+						role="dialog"
+						aria-modal="true"
+						aria-label="Navigation menu"
+					>
+						<div className="stats-mobile-drawer-header">
+							<div className="stats-logo-container">
+								<span className="stats-logo-text">OH MY PI</span>
+								<span className="stats-logo-subtext">Observability</span>
+							</div>
+							<button
+								type="button"
+								onClick={() => setMenuOpen(false)}
+								className="stats-drawer-close-btn"
+								aria-label="Close navigation menu"
+							>
+								<X size={18} />
+							</button>
+						</div>
+						<NavRail
+							activeSection={activeSection}
+							onSectionChange={handleSectionChange}
+							className="stats-mobile-nav"
+						/>
+					</div>
+				</div>
+			)}
+
+			{/* Main Layout Pane */}
+			<div className="stats-main-pane">
+				<TopBar
+					activeSection={activeSection}
+					range={range}
+					onRangeChange={onRangeChange}
+					updatedAt={updatedAt}
+					onSyncStart={onSyncStart}
+					onSyncComplete={onSyncComplete}
+					onMenuToggle={() => setMenuOpen(true)}
+				/>
+
+				<main className="stats-content-area">
+					<div className="stats-content-inner">{children}</div>
+				</main>
+			</div>
+		</div>
+	);
+}

package/src/client/app/NavRail.tsx

@@ -0,0 +1,44 @@
+import { type DashboardSection, routes } from "./routes";
+
+export interface NavRailProps {
+	activeSection: DashboardSection;
+	onSectionChange: (section: DashboardSection) => void;
+	className?: string;
+}
+
+export function NavRail({ activeSection, onSectionChange, className = "" }: NavRailProps) {
+	return (
+		<aside className={`stats-nav-rail ${className}`}>
+			<div className="stats-nav-rail-header">
+				<div className="stats-logo-container">
+					<span className="stats-logo-text">OH MY PI</span>
+					<span className="stats-logo-subtext">Observability</span>
+				</div>
+			</div>
+
+			<nav className="stats-nav-rail-menu">
+				{routes.map(route => {
+					const isActive = route.id === activeSection;
+					const Icon = route.icon;
+					return (
+						<button
+							key={route.id}
+							type="button"
+							onClick={() => onSectionChange(route.id)}
+							className="stats-nav-rail-item"
+							data-active={isActive ? "true" : "false"}
+							aria-current={isActive ? "page" : undefined}
+						>
+							<Icon size={16} className="stats-nav-rail-item-icon" />
+							<span className="stats-nav-rail-item-label">{route.label}</span>
+						</button>
+					);
+				})}
+			</nav>
+
+			<div className="stats-nav-rail-footer">
+				<span className="stats-version-tag">OMP Stats v1.0.0</span>
+			</div>
+		</aside>
+	);
+}

package/src/client/app/RangeControl.tsx

@@ -0,0 +1,39 @@
+import type { TimeRange } from "../types";
+
+export interface RangeControlProps {
+	value: TimeRange;
+	onChange: (value: TimeRange) => void;
+	className?: string;
+}
+
+const RANGE_OPTIONS: { value: TimeRange; label: string }[] = [
+	{ value: "1h", label: "1h" },
+	{ value: "24h", label: "24h" },
+	{ value: "7d", label: "7d" },
+	{ value: "30d", label: "30d" },
+	{ value: "90d", label: "90d" },
+	{ value: "all", label: "All" },
+];
+
+export function RangeControl({ value, onChange, className = "" }: RangeControlProps) {
+	return (
+		<div className={`stats-range-control ${className}`} role="radiogroup" aria-label="Select time range">
+			{RANGE_OPTIONS.map(opt => {
+				const isActive = opt.value === value;
+				return (
+					<button
+						key={opt.value}
+						type="button"
+						role="radio"
+						aria-checked={isActive}
+						data-active={isActive ? "true" : "false"}
+						className="stats-range-control-btn"
+						onClick={() => onChange(opt.value)}
+					>
+						{opt.label}
+					</button>
+				);
+			})}
+		</div>
+	);
+}