@oh-my-pi-zen/omp-stats 16.3.6-zen.1

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>
+	);
+}

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,69 @@
+import { Activity, AlertCircle, Coins, Cpu, Folder, LayoutDashboard, Smile, TrendingUp, Wrench } from "lucide-react";
+import type React from "react";
+
+export type DashboardSection =
+	| "overview"
+	| "requests"
+	| "errors"
+	| "models"
+	| "tools"
+	| "costs"
+	| "behavior"
+	| "projects"
+	| "gain";
+
+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: "tools",
+		label: "Tools",
+		icon: Wrench,
+	},
+	{
+		id: "costs",
+		label: "Costs",
+		icon: Coins,
+	},
+	{
+		id: "behavior",
+		label: "Behavior",
+		shortLabel: "Behavior",
+		icon: Smile,
+	},
+	{
+		id: "projects",
+		label: "Projects",
+		icon: Folder,
+	},
+	{
+		id: "gain",
+		label: "Gain",
+		icon: TrendingUp,
+	},
+];

package/src/client/components/AgentTokenShare.tsx

@@ -0,0 +1,68 @@
+import { useMemo } from "react";
+import { formatCompact, formatInteger, formatPercent } from "../data/formatters";
+import { buildAgentTokenShare } from "../data/view-models";
+import type { AgentType, AgentTypeStats } from "../types";
+
+/**
+ * Per-agent-type display chrome. Colors follow the OMP brand palette
+ * (pink -> violet -> cyan) used by the dashboard charts so the bar reads on
+ * both themes without per-theme overrides.
+ */
+const AGENT_META: Record<AgentType, { label: string; color: string }> = {
+	main: { label: "Main agent", color: "#ed4abf" },
+	subagent: { label: "Subagents", color: "#9b4dff" },
+	advisor: { label: "Advisor", color: "#5ad8e6" },
+};
+
+export interface AgentTokenShareProps {
+	stats: AgentTypeStats[];
+}
+
+export function AgentTokenShare({ stats }: AgentTokenShareProps) {
+	const view = useMemo(() => buildAgentTokenShare(stats), [stats]);
+
+	if (view.totalTokens === 0) {
+		return <div className="py-8 text-center stats-text-muted text-sm">No token usage in this range</div>;
+	}
+
+	return (
+		<div className="space-y-4">
+			<div className="flex h-3 w-full overflow-hidden rounded-full" style={{ background: "var(--surface-2)" }}>
+				{view.segments.map(
+					seg =>
+						seg.share > 0 && (
+							<div
+								key={seg.agentType}
+								className="h-full"
+								style={{ width: `${seg.share * 100}%`, background: AGENT_META[seg.agentType].color }}
+								title={`${AGENT_META[seg.agentType].label}: ${formatPercent(seg.share)}`}
+							/>
+						),
+				)}
+			</div>
+
+			<div className="space-y-2">
+				{view.segments.map(seg => (
+					<div key={seg.agentType} className="flex items-center justify-between gap-3 text-sm">
+						<div className="flex items-center gap-2 min-w-0">
+							<span
+								className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+								style={{ background: AGENT_META[seg.agentType].color }}
+							/>
+							<span className="stats-text-primary truncate">{AGENT_META[seg.agentType].label}</span>
+							<span className="stats-text-muted stats-text-xs whitespace-nowrap">
+								{formatInteger(seg.requests)} req
+							</span>
+						</div>
+						<div className="flex items-center gap-3 whitespace-nowrap">
+							<span className="stats-text-secondary">{formatCompact(seg.tokens)} tok</span>
+							<span className="stats-font-semibold stats-text-primary tabular-nums">
+								{formatPercent(seg.share)}
+							</span>
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}