@oh-my-pi/omp-stats 15.0.0 → 15.0.2

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

@@ -0,0 +1,320 @@
+/**
+ * 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.
+ */
+
+import { format } from "date-fns";
+
+export const MODEL_COLORS = [
+	"#a78bfa", // violet
+	"#22d3ee", // cyan
+	"#ec4899", // pink
+	"#4ade80", // green
+	"#fbbf24", // amber
+	"#f87171", // red
+	"#60a5fa", // blue
+];
+
+export const CHART_THEMES = {
+	dark: {
+		legendLabel: "#94a3b8",
+		tooltipBackground: "#16161e",
+		tooltipTitle: "#f8fafc",
+		tooltipBody: "#94a3b8",
+		tooltipBorder: "rgba(255, 255, 255, 0.1)",
+		grid: "rgba(255, 255, 255, 0.06)",
+		tick: "#64748b",
+	},
+	light: {
+		legendLabel: "#475569",
+		tooltipBackground: "#ffffff",
+		tooltipTitle: "#0f172a",
+		tooltipBody: "#334155",
+		tooltipBorder: "rgba(15, 23, 42, 0.18)",
+		grid: "rgba(15, 23, 42, 0.08)",
+		tick: "#64748b",
+	},
+} 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: 3,
+	};
+}
+
+/**
+ * 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;
+			}),
+		})),
+	};
+}
+
+/** All Models / By Model segmented toggle — identical UI in every time chart. */
+export 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

@@ -0,0 +1,275 @@
+/**
+ * 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
+ * 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";
+
+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];
+
+/** Style defaults for one line in a non-stacked detail chart. */
+export function lineSeriesStyle(color: string) {
+	return {
+		borderColor: color,
+		backgroundColor: "transparent",
+		tension: 0.4,
+		pointRadius: 0,
+		borderWidth: 2,
+	};
+}
+
+/**
+ * No-axis, no-legend single-series sparkline used in the trend cell of every
+ * model row. Caller supplies the already-extracted numeric series so this
+ * stays agnostic of the row's underlying data shape.
+ */
+export function MiniSparkline({
+	timestamps,
+	values,
+	color,
+}: {
+	timestamps: number[];
+	values: number[];
+	color: string;
+}) {
+	const chartData = {
+		labels: timestamps.map(ts => format(new Date(ts), "MMM d")),
+		datasets: [{ data: values, ...lineSeriesStyle(color) }],
+	};
+
+	const options = {
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: { legend: { display: false }, tooltip: { enabled: false } },
+		scales: {
+			x: { display: false },
+			y: { display: false, min: 0 },
+		},
+	};
+
+	return <Line data={chartData} options={options} />;
+}
+
+/**
+ * Plugin block (legend + tooltip) shared by every multi-series detail chart
+ * in the table expanded views.
+ */
+export function detailChartPlugins(chartTheme: TableChartTheme) {
+	return {
+		legend: {
+			display: true,
+			position: "top" as const,
+			labels: {
+				color: chartTheme.legendLabel,
+				usePointStyle: true,
+				padding: 16,
+				font: { size: 12 },
+			},
+		},
+		tooltip: {
+			backgroundColor: chartTheme.tooltipBackground,
+			titleColor: chartTheme.tooltipTitle,
+			bodyColor: chartTheme.tooltipBody,
+			borderColor: chartTheme.tooltipBorder,
+			borderWidth: 1,
+			cornerRadius: 8,
+		},
+	};
+}
+
+/**
+ * Single-Y-axis scales for a detail chart (used when every series shares a
+ * unit, e.g. behavior counts). Min anchored at 0.
+ */
+export function detailChartScalesSingleAxis(chartTheme: TableChartTheme) {
+	return {
+		x: {
+			grid: { color: chartTheme.grid },
+			ticks: { color: chartTheme.tick, font: { size: 11 } },
+		},
+		y: {
+			grid: { color: chartTheme.grid },
+			ticks: { color: chartTheme.tick, font: { size: 11 } },
+			min: 0,
+		},
+	};
+}
+
+/**
+ * Dual-Y-axis scales for a detail chart with mixed units (e.g. TTFT seconds
+ * on left, tokens/s on right). Right-axis grid is suppressed so it doesn't
+ * collide with the left.
+ */
+export function detailChartScalesDualAxis(chartTheme: TableChartTheme) {
+	return {
+		x: {
+			grid: { color: chartTheme.grid },
+			ticks: { color: chartTheme.tick, font: { size: 11 } },
+		},
+		y: {
+			type: "linear" as const,
+			display: true,
+			position: "left" as const,
+			grid: { color: chartTheme.grid },
+			ticks: { color: chartTheme.tick, font: { size: 11 } },
+		},
+		y1: {
+			type: "linear" as const,
+			display: true,
+			position: "right" as const,
+			grid: { drawOnChartArea: false },
+			ticks: { color: chartTheme.tick, font: { size: 11 } },
+		},
+	};
+}
+
+export interface TableColumn {
+	label: string;
+	align?: "left" | "right" | "center";
+}
+
+/** Outer card + section title used by every model table. */
+export function ModelTableShell({
+	title,
+	subtitle,
+	children,
+}: {
+	title: string;
+	subtitle?: string;
+	children: React.ReactNode;
+}) {
+	return (
+		<div className="surface 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}
+			</div>
+			<div className="overflow-x-auto">{children}</div>
+		</div>
+	);
+}
+
+function alignClass(align: TableColumn["align"]): string {
+	if (align === "right") return "text-right";
+	if (align === "center") return "text-center";
+	return "";
+}
+
+/** Sticky column-header row for a model table. */
+export function ModelTableHeader({ columns, gridTemplate }: { columns: TableColumn[]; gridTemplate: string }) {
+	return (
+		<div
+			className="grid gap-3 px-5 py-3 text-[var(--text-muted)] text-xs uppercase tracking-wider font-semibold"
+			style={{ gridTemplateColumns: gridTemplate }}
+		>
+			{columns.map(col => (
+				<div key={col.label} className={alignClass(col.align)}>
+					{col.label}
+				</div>
+			))}
+			{/* trailing chevron column has no header label */}
+			<div />
+		</div>
+	);
+}
+
+/** Scroll wrapper for the row stack — capped to fit the dashboard viewport. */
+export function ModelTableBody({ children }: { children: React.ReactNode }) {
+	return <div className="max-h-[calc(100vh-300px)] overflow-y-auto">{children}</div>;
+}
+
+/**
+ * Two-line model identity cell (model name + provider) shared by every
+ * per-model table. Kept as a stable named contract so callers don't restate
+ * the same two divs and font-utility classes.
+ */
+export function ModelNameCell({ model, provider }: { model: string; provider: string }) {
+	return (
+		<div>
+			<div className="font-medium text-[var(--text-primary)]">{model}</div>
+			<div className="text-xs text-[var(--text-muted)]">{provider}</div>
+		</div>
+	);
+}
+
+/**
+ * One expandable model row. `cells` matches the column order from
+ * `ModelTableHeader` plus the trend cell at the end (caller controls the
+ * sparkline / placeholder). `expandedContent` is the panel revealed on toggle.
+ */
+export function ExpandableModelRow({
+	gridTemplate,
+	cells,
+	trendCell,
+	isExpanded,
+	onToggle,
+	expandedContent,
+}: {
+	gridTemplate: string;
+	cells: React.ReactNode[];
+	trendCell: React.ReactNode;
+	isExpanded: boolean;
+	onToggle: () => void;
+	expandedContent: React.ReactNode;
+}) {
+	return (
+		<div className="border-t border-[var(--border-subtle)]">
+			<button
+				type="button"
+				onClick={onToggle}
+				className="w-full bg-transparent border-none text-left px-5 py-3 cursor-pointer hover:bg-[var(--bg-hover)] transition-colors"
+			>
+				<div className="grid gap-3 items-center" style={{ gridTemplateColumns: gridTemplate }}>
+					{cells}
+					<div className="h-10">{trendCell}</div>
+					<div className="flex justify-center text-[var(--text-muted)]">
+						{isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+					</div>
+				</div>
+			</button>
+			{isExpanded ? (
+				<div className="px-5 py-4 bg-[var(--bg-elevated)] border-t border-[var(--border-subtle)]">
+					{expandedContent}
+				</div>
+			) : null}
+		</div>
+	);
+}
+
+/** Placeholder shown in the trend cell when a model has no time-series data. */
+export function TrendEmpty() {
+	return <div className="text-[var(--text-muted)] text-center text-sm">-</div>;
+}
+
+/** Placeholder shown in the expanded detail-chart slot when data is missing. */
+export function DetailChartEmpty({ message = "No data available" }: { message?: string }) {
+	return <div className="h-full flex items-center justify-center text-[var(--text-muted)] text-sm">{message}</div>;
+}