@oh-my-pi/omp-stats 18.3.4 → 18.4.0

package/src/client/app/NavRail.tsx

@@ -1,44 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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/TopBar.tsx

@@ -1,73 +0,0 @@
-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

@@ -1,93 +0,0 @@
-import {
-	Activity,
-	AlertCircle,
-	Coins,
-	Cpu,
-	Folder,
-	LayoutDashboard,
-	ListTree,
-	Plug,
-	Smile,
-	TrendingUp,
-	Wrench,
-} from "lucide-react";
-import type React from "react";
-
-export type DashboardSection =
-	| "overview"
-	| "requests"
-	| "traces"
-	| "errors"
-	| "models"
-	| "providers"
-	| "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: "traces",
-		label: "Traces",
-		icon: ListTree,
-	},
-	{
-		id: "errors",
-		label: "Errors",
-		icon: AlertCircle,
-	},
-	{
-		id: "models",
-		label: "Models",
-		icon: Cpu,
-	},
-	{
-		id: "providers",
-		label: "Providers",
-		icon: Plug,
-	},
-	{
-		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

@@ -1,68 +0,0 @@
-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>
-	);
-}

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

@@ -1,273 +0,0 @@
-/**
- * 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 "@oh-my-pi/pi-utils/dates";
-
-// 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 = [
-	"#ed4abf", // brand pink (accent)
-	"#9b4dff", // brand violet
-	"#5ad8e6", // brand cyan
-	"#62d394", // green
-	"#c77dff", // light purple
-	"#ff8fd1", // light pink
-	"#f5c14b", // amber
-	"#ff6b7d", // rose
-];
-
-export function buildModelColorLookup(
-	records: readonly { model: string; provider: string; totalRequests: number }[],
-): Map<string, string> {
-	const rankedRecords = [...records].sort(
-		(a, b) =>
-			b.totalRequests - a.totalRequests || `${a.model}::${a.provider}`.localeCompare(`${b.model}::${b.provider}`),
-	);
-
-	return new Map(
-		rankedRecords.map((record, index) => [
-			`${record.model}::${record.provider}`,
-			MODEL_COLORS[index % MODEL_COLORS.length],
-		]),
-	);
-}
-
-export const CHART_THEMES = {
-	dark: {
-		legendLabel: "#a89fb3",
-		tooltipBackground: "#241a2e",
-		tooltipTitle: "#eae5ef",
-		tooltipBody: "#a89fb3",
-		tooltipBorder: "rgba(255, 255, 255, 0.12)",
-		grid: "rgba(255, 255, 255, 0.06)",
-		tick: "#867a93",
-	},
-	light: {
-		legendLabel: "#5a5462",
-		tooltipBackground: "#ffffff",
-		tooltipTitle: "#241a2e",
-		tooltipBody: "#5a5462",
-		tooltipBorder: "rgba(20, 12, 28, 0.15)",
-		grid: "rgba(20, 12, 28, 0.08)",
-		tick: "#6a6275",
-	},
-} as const;
-
-export type ChartTheme = (typeof CHART_THEMES)[keyof typeof CHART_THEMES];
-
-export interface ChartSeries {
-	labels: string[];
-	datasets: Array<{ label: string; data: number[] }>;
-}
-
-interface TooltipItem {
-	parsed: { y: number | null };
-}
-
-/** Tooltip + legend config common to bar and line variants of the time charts. */
-export function buildSharedPlugins(opts: {
-	chartTheme: ChartTheme;
-	showLegend: boolean;
-	defaultLabel: string;
-	formatValue: (n: number) => string;
-	footer?: (items: TooltipItem[]) => string | undefined;
-}) {
-	const { chartTheme, showLegend, defaultLabel, formatValue, footer } = opts;
-	return {
-		legend: {
-			display: showLegend,
-			position: "top" as const,
-			align: "start" as const,
-			labels: {
-				color: chartTheme.legendLabel,
-				usePointStyle: true,
-				padding: 16,
-				font: { size: 12 },
-				boxWidth: 8,
-			},
-		},
-		tooltip: {
-			backgroundColor: chartTheme.tooltipBackground,
-			titleColor: chartTheme.tooltipTitle,
-			bodyColor: chartTheme.tooltipBody,
-			borderColor: chartTheme.tooltipBorder,
-			borderWidth: 1,
-			padding: 12,
-			cornerRadius: 8,
-			callbacks: {
-				label: (ctx: { dataset: { label?: string }; parsed: { y: number | null } }) => {
-					const label = ctx.dataset.label ?? defaultLabel;
-					const value = ctx.parsed.y ?? 0;
-					return `${label}: ${formatValue(value)}`;
-				},
-				...(footer ? { footer } : {}),
-			},
-		},
-	};
-}
-
-/** Y-axis tick formatter + grid/tick styling shared by both charts. */
-export function buildSharedScales(opts: { chartTheme: ChartTheme; formatY: (n: number) => string }) {
-	const { chartTheme, formatY } = opts;
-	const sharedScaleBase = {
-		grid: { color: chartTheme.grid, drawBorder: false },
-		ticks: { color: chartTheme.tick, font: { size: 11 } },
-	};
-	const yScale = {
-		...sharedScaleBase,
-		ticks: {
-			...sharedScaleBase.ticks,
-			callback: (value: number | string) => formatY(Number(value)),
-		},
-		min: 0,
-	};
-	return { sharedScaleBase, yScale };
-}
-
-/** Stylistic defaults for a single line dataset in a stacked/by-model chart. */
-export function lineDatasetStyle(color: string) {
-	return {
-		borderColor: color,
-		backgroundColor: `${color}20`,
-		fill: true,
-		tension: 0,
-		pointRadius: 3,
-		pointHoverRadius: 4,
-		borderWidth: 2,
-	};
-}
-
-/** Stylistic defaults for a single bar dataset in a stacked chart. */
-export function barDatasetStyle(color: string) {
-	return {
-		backgroundColor: color,
-		borderColor: color,
-		borderWidth: 0,
-		borderRadius: 4,
-		maxBarThickness: 56,
-	};
-}
-
-/**
- * Map a generic ChartSeries' datasets through a per-index style function so
- * callers can supply line or bar styling without repeating the label/data
- * spread at every chart site.
- */
-export function styleDatasets(series: ChartSeries, styleFor: (index: number) => Record<string, unknown>) {
-	return series.datasets.map((ds, index) => ({
-		label: ds.label,
-		data: ds.data,
-		...styleFor(index),
-	}));
-}
-
-/**
- * Bucket points by day into a single aggregate series. Caller supplies the
- * per-bucket accumulator + final value extractor; mirrors the shape of
- * `buildTopNByModelSeries` for the non-by-model variant of each time chart.
- */
-export function buildAggregateTimeSeries<T extends { timestamp: number }, B>(
-	points: T[],
-	label: string,
-	opts: {
-		initBucket: () => B;
-		accumulate: (bucket: B, point: T) => void;
-		bucketToValue: (bucket: B) => number;
-	},
-): ChartSeries {
-	if (points.length === 0) return { labels: [], datasets: [] };
-	const { initBucket, accumulate, bucketToValue } = opts;
-	const byDay = new Map<number, B>();
-	for (const point of points) {
-		const bucket = byDay.get(point.timestamp) ?? initBucket();
-		accumulate(bucket, point);
-		byDay.set(point.timestamp, bucket);
-	}
-	const sorted = [...byDay.entries()].sort((a, b) => a[0] - b[0]);
-	return {
-		labels: sorted.map(([ts]) => format(new Date(ts), "MMM d")),
-		datasets: [{ label, data: sorted.map(([, bucket]) => bucketToValue(bucket)) }],
-	};
-}
-
-interface ModelKeyedPoint {
-	timestamp: number;
-	model: string;
-	provider: string;
-}
-
-/**
- * Bucket points by day and by top-N model (with an "Other" rollup), producing
- * a ChartSeries. Caller controls how points contribute to ranking and to each
- * day-bucket value via the `rankWeight`/`accumulate`/`bucketToValue` callbacks
- * — keeps the behavior chart's rate math separate from the cost chart's sum.
- */
-export function buildTopNByModelSeries<T extends ModelKeyedPoint, B>(
-	points: T[],
-	opts: {
-		topN?: number;
-		rankWeight: (point: T) => number;
-		initBucket: () => B;
-		accumulate: (bucket: B, point: T) => void;
-		bucketToValue: (bucket: B) => number;
-	},
-): ChartSeries {
-	if (points.length === 0) return { labels: [], datasets: [] };
-	const { topN = 5, rankWeight, initBucket, accumulate, bucketToValue } = opts;
-
-	const totals = new Map<string, { model: string; provider: string; weight: number }>();
-	for (const point of points) {
-		const key = `${point.model}::${point.provider}`;
-		const existing = totals.get(key);
-		if (existing) {
-			existing.weight += rankWeight(point);
-		} else {
-			totals.set(key, { model: point.model, provider: point.provider, weight: rankWeight(point) });
-		}
-	}
-
-	const sorted = [...totals.entries()].sort((a, b) => b[1].weight - a[1].weight);
-	const topEntries = sorted.slice(0, topN);
-	const topKeys = new Set(topEntries.map(([key]) => key));
-
-	const modelCount = new Map<string, number>();
-	for (const [, { model }] of topEntries) {
-		modelCount.set(model, (modelCount.get(model) ?? 0) + 1);
-	}
-	const labelByKey = new Map<string, string>();
-	for (const [key, { model, provider }] of topEntries) {
-		labelByKey.set(key, (modelCount.get(model) ?? 0) > 1 ? `${model} (${provider})` : model);
-	}
-
-	const allDays = [...new Set(points.map(p => p.timestamp))].sort((a, b) => a - b);
-	const seriesNames = topEntries.map(([key]) => labelByKey.get(key) ?? key);
-	const hasOther = points.some(p => !topKeys.has(`${p.model}::${p.provider}`));
-	if (hasOther) seriesNames.push("Other");
-
-	const dayMap = new Map<number, Record<string, B>>();
-	for (const day of allDays) dayMap.set(day, {});
-	for (const point of points) {
-		const key = `${point.model}::${point.provider}`;
-		const label = topKeys.has(key) ? (labelByKey.get(key) ?? point.model) : "Other";
-		const row = dayMap.get(point.timestamp);
-		if (!row) continue;
-		const bucket = row[label] ?? initBucket();
-		accumulate(bucket, point);
-		row[label] = bucket;
-	}
-
-	return {
-		labels: allDays.map(ts => format(new Date(ts), "MMM d")),
-		datasets: seriesNames.map(name => ({
-			label: name,
-			data: allDays.map(day => {
-				const bucket = dayMap.get(day)?.[name];
-				return bucket ? bucketToValue(bucket) : 0;
-			}),
-		})),
-	};
-}