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

package/src/client/components/BehaviorModelsTable.tsx

@@ -1,342 +0,0 @@
-import {
-	CategoryScale,
-	Chart as ChartJS,
-	Legend,
-	LinearScale,
-	LineElement,
-	PointElement,
-	Title,
-	Tooltip,
-} from "chart.js";
-import { format } from "date-fns";
-import { useMemo, useState } from "react";
-import { Line } from "react-chartjs-2";
-import type { BehaviorModelStats, BehaviorTimeSeriesPoint } from "../types";
-import { useSystemTheme } from "../useSystemTheme";
-import {
-	DetailChartEmpty,
-	detailChartPlugins,
-	detailChartScalesSingleAxis,
-	ExpandableModelRow,
-	lineSeriesStyle,
-	MiniSparkline,
-	MODEL_COLORS,
-	ModelNameCell,
-	ModelTableBody,
-	ModelTableHeader,
-	ModelTableShell,
-	TABLE_CHART_THEMES,
-	type TableChartTheme,
-	TrendEmpty,
-} from "./models-table-shared";
-
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
-
-const SERIES_COLORS = {
-	yelling: "#fbbf24", // amber
-	profanity: "#f87171", // red
-	anguish: "#a78bfa", // violet
-	frustration: "#22d3ee", // cyan - new semantic signals
-} as const;
-
-interface BehaviorModelsTableProps {
-	models: BehaviorModelStats[];
-	behaviorSeries: BehaviorTimeSeriesPoint[];
-}
-
-interface DailyPoint {
-	timestamp: number;
-	yelling: number;
-	profanity: number;
-	anguish: number;
-	frustration: number;
-	total: number;
-}
-
-interface ModelTrendSeries {
-	data: DailyPoint[];
-}
-
-const GRID_TEMPLATE = "2fr 0.9fr 0.8fr 0.8fr 0.8fr 0.9fr 0.8fr 140px 40px";
-
-function formatInt(value: number): string {
-	return value.toLocaleString();
-}
-
-function totalHitRate(model: BehaviorModelStats): number {
-	if (model.totalMessages === 0) return 0;
-	const hits =
-		model.totalYelling +
-		model.totalProfanity +
-		model.totalAnguish +
-		model.totalNegation +
-		model.totalRepetition +
-		model.totalBlame;
-	return hits / model.totalMessages;
-}
-
-/**
- * Rate-as-percent. < 1% shows one decimal so a 0.4% model doesn't read as 0%.
- */
-function formatRate(total: number, messages: number): string {
-	if (messages === 0) return "-";
-	const pct = (total / messages) * 100;
-	if (pct === 0) return "0%";
-	if (pct < 1) return `${pct.toFixed(1)}%`;
-	return `${pct.toFixed(0)}%`;
-}
-
-export function BehaviorModelsTable({ models, behaviorSeries }: BehaviorModelsTableProps) {
-	const [expandedKey, setExpandedKey] = useState<string | null>(null);
-	const theme = useSystemTheme();
-	const chartTheme = TABLE_CHART_THEMES[theme];
-
-	const trendByKey = useMemo(() => buildTrendLookup(behaviorSeries), [behaviorSeries]);
-
-	// Sort by usage so the models you actually rely on surface first; rates
-	// stay visible per row so a low-volume freak doesn't dominate.
-	const sortedModels = [...models].sort((a, b) => {
-		if (b.totalMessages !== a.totalMessages) return b.totalMessages - a.totalMessages;
-		return totalHitRate(b) - totalHitRate(a);
-	});
-
-	return (
-		<ModelTableShell
-			title="Behavior by Model"
-			subtitle="How often each model elicited a tantrum — rates are per user message"
-		>
-			<ModelTableHeader
-				gridTemplate={GRID_TEMPLATE}
-				columns={[
-					{ label: "Model" },
-					{ label: "Messages", align: "right" },
-					{ label: "CAPS %", align: "right" },
-					{ label: "Profanity %", align: "right" },
-					{ label: "Anguish %", align: "right" },
-					{ label: "Frustration %", align: "right" },
-					{ label: "Hits %", align: "right" },
-					{ label: "Trend", align: "center" },
-				]}
-			/>
-
-			<ModelTableBody>
-				{sortedModels.map((model, index) => {
-					const key = `${model.model}::${model.provider}`;
-					const trend = trendByKey.get(key)?.data ?? [];
-					const trendColor = MODEL_COLORS[index % MODEL_COLORS.length];
-					const isExpanded = expandedKey === key;
-					const totalFrustration = model.totalNegation + model.totalRepetition + model.totalBlame;
-					const totalHits = model.totalYelling + model.totalProfanity + model.totalAnguish + totalFrustration;
-
-					return (
-						<ExpandableModelRow
-							key={key}
-							gridTemplate={GRID_TEMPLATE}
-							isExpanded={isExpanded}
-							onToggle={() => setExpandedKey(isExpanded ? null : key)}
-							cells={[
-								<ModelNameCell key="name" model={model.model} provider={model.provider} />,
-								<div key="messages" className="text-right text-[var(--text-secondary)] font-mono text-sm">
-									{formatInt(model.totalMessages)}
-								</div>,
-								<div key="caps" className="text-right text-[var(--text-secondary)] font-mono text-sm">
-									{formatRate(model.totalYelling, model.totalMessages)}
-								</div>,
-								<div key="profanity" className="text-right text-[var(--text-secondary)] font-mono text-sm">
-									{formatRate(model.totalProfanity, model.totalMessages)}
-								</div>,
-								<div key="anguish" className="text-right text-[var(--text-secondary)] font-mono text-sm">
-									{formatRate(model.totalAnguish, model.totalMessages)}
-								</div>,
-								<div key="frustration" className="text-right text-[var(--text-secondary)] font-mono text-sm">
-									{formatRate(totalFrustration, model.totalMessages)}
-								</div>,
-								<div key="hits" className="text-right text-[var(--text-secondary)] font-mono text-sm">
-									{formatRate(totalHits, model.totalMessages)}
-								</div>,
-							]}
-							trendCell={
-								trend.length === 0 ? (
-									<TrendEmpty />
-								) : (
-									<MiniSparkline
-										timestamps={trend.map(d => d.timestamp)}
-										values={trend.map(d => d.total)}
-										color={trendColor}
-									/>
-								)
-							}
-							expandedContent={
-								<div className="grid gap-4" style={{ gridTemplateColumns: "220px 1fr" }}>
-									<div className="space-y-4 text-sm">
-										<DetailRow
-											label="Yelling (CAPS)"
-											total={model.totalYelling}
-											messages={model.totalMessages}
-											valueClass="text-[var(--accent-amber,#fbbf24)]"
-										/>
-										<DetailRow
-											label="Profanity"
-											total={model.totalProfanity}
-											messages={model.totalMessages}
-											valueClass="text-[var(--accent-red,#f87171)]"
-										/>
-										<DetailRow
-											label="Anguish (!!!, nooo, dude, ..)"
-											total={model.totalAnguish}
-											messages={model.totalMessages}
-											valueClass="text-[var(--accent-violet,#a78bfa)]"
-										/>
-										<DetailRow
-											label="Negation (no/nope/wrong)"
-											total={model.totalNegation}
-											messages={model.totalMessages}
-											valueClass="text-[var(--accent-cyan,#22d3ee)]"
-										/>
-										<DetailRow
-											label="Repetition (i meant, still doesnt)"
-											total={model.totalRepetition}
-											messages={model.totalMessages}
-											valueClass="text-[var(--accent-cyan,#22d3ee)]"
-										/>
-										<DetailRow
-											label="Blame (you didnt, stop X-ing)"
-											total={model.totalBlame}
-											messages={model.totalMessages}
-											valueClass="text-[var(--accent-cyan,#22d3ee)]"
-										/>
-										<DetailRow
-											label="Avg chars / msg"
-											total={model.totalChars}
-											messages={model.totalMessages}
-											valueClass="text-[var(--text-secondary)]"
-											mode="average"
-										/>
-									</div>
-									<div className="h-[200px]">
-										{trend.length === 0 ? (
-											<DetailChartEmpty />
-										) : (
-											<BreakdownChart data={trend} chartTheme={chartTheme} />
-										)}
-									</div>
-								</div>
-							}
-						/>
-					);
-				})}
-				{sortedModels.length === 0 ? (
-					<div className="border-t border-[var(--border-subtle)] px-5 py-8 text-center text-[var(--text-muted)] text-sm">
-						No user behavior recorded for this range yet.
-					</div>
-				) : null}
-			</ModelTableBody>
-		</ModelTableShell>
-	);
-}
-
-function DetailRow({
-	label,
-	total,
-	messages,
-	valueClass,
-	mode = "rate",
-}: {
-	label: string;
-	total: number;
-	messages: number;
-	valueClass: string;
-	mode?: "rate" | "average";
-}) {
-	const perMsgLabel = mode === "rate" ? "% of msgs" : "Per msg";
-	const perMsgValue =
-		messages > 0 ? (mode === "rate" ? formatRate(total, messages) : (total / messages).toFixed(0)) : "-";
-	return (
-		<div>
-			<div className="text-[var(--text-primary)] font-medium mb-2">{label}</div>
-			<div className="space-y-1 text-[var(--text-secondary)]">
-				<div className="flex items-center justify-between">
-					<span>Total</span>
-					<span className={`font-mono ${valueClass}`}>{formatInt(total)}</span>
-				</div>
-				<div className="flex items-center justify-between">
-					<span>{perMsgLabel}</span>
-					<span className="font-mono">{perMsgValue}</span>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-function BreakdownChart({ data, chartTheme }: { data: DailyPoint[]; chartTheme: TableChartTheme }) {
-	const chartData = {
-		labels: data.map(d => format(new Date(d.timestamp), "MMM d")),
-		datasets: [
-			{ label: "CAPS", data: data.map(d => d.yelling), ...lineSeriesStyle(SERIES_COLORS.yelling) },
-			{ label: "Profanity", data: data.map(d => d.profanity), ...lineSeriesStyle(SERIES_COLORS.profanity) },
-			{ label: "Anguish", data: data.map(d => d.anguish), ...lineSeriesStyle(SERIES_COLORS.anguish) },
-			{ label: "Frustration", data: data.map(d => d.frustration), ...lineSeriesStyle(SERIES_COLORS.frustration) },
-		],
-	};
-
-	const options = {
-		responsive: true,
-		maintainAspectRatio: false,
-		plugins: detailChartPlugins(chartTheme),
-		scales: detailChartScalesSingleAxis(chartTheme),
-	};
-
-	return <Line data={chartData} options={options} />;
-}
-
-/**
- * Group the daily time-series by model+provider, producing one continuous
- * day-bucket array per model so the sparkline / breakdown chart can render
- * without missing-day artifacts.
- */
-function buildTrendLookup(points: BehaviorTimeSeriesPoint[]): Map<string, ModelTrendSeries> {
-	if (points.length === 0) return new Map();
-
-	const allDays = [...new Set(points.map(p => p.timestamp))].sort((a, b) => a - b);
-	const byKey = new Map<string, Map<number, DailyPoint>>();
-
-	for (const point of points) {
-		const key = `${point.model}::${point.provider}`;
-		let dayMap = byKey.get(key);
-		if (!dayMap) {
-			dayMap = new Map();
-			byKey.set(key, dayMap);
-		}
-		const existing = dayMap.get(point.timestamp) ?? {
-			timestamp: point.timestamp,
-			yelling: 0,
-			profanity: 0,
-			anguish: 0,
-			frustration: 0,
-			total: 0,
-		};
-		existing.yelling += point.yelling;
-		existing.profanity += point.profanity;
-		existing.anguish += point.anguish;
-		existing.frustration += point.negation + point.repetition + point.blame;
-		existing.total = existing.yelling + existing.profanity + existing.anguish + existing.frustration;
-		dayMap.set(point.timestamp, existing);
-	}
-
-	const out = new Map<string, ModelTrendSeries>();
-	for (const [key, dayMap] of byKey) {
-		const data = allDays.map(
-			ts =>
-				dayMap.get(ts) ?? {
-					timestamp: ts,
-					yelling: 0,
-					profanity: 0,
-					anguish: 0,
-					frustration: 0,
-					total: 0,
-				},
-		);
-		out.set(key, { data });
-	}
-	return out;
-}

package/src/client/components/BehaviorSummary.tsx

@@ -1,95 +0,0 @@
-import { useMemo } from "react";
-import type { BehaviorOverallStats, BehaviorTimeSeriesPoint } from "../types";
-
-interface BehaviorSummaryProps {
-	overall: BehaviorOverallStats;
-	behaviorSeries: BehaviorTimeSeriesPoint[];
-}
-
-function formatInt(value: number): string {
-	return value.toLocaleString();
-}
-
-/**
- * Per-message rate for a signal. Uses 2 decimals so a 0.01-hits-per-msg model
- * still distinguishes from a true zero, and never shows `NaN` or `Infinity`
- * when there are no messages.
- */
-function perMsg(total: number, messages: number): string | undefined {
-	if (messages <= 0) return undefined;
-	return `${(total / messages).toFixed(2)} / msg`;
-}
-
-export function BehaviorSummary({ overall, behaviorSeries }: BehaviorSummaryProps) {
-	// Top "ranted-at" model: model that absorbed the most caps + profanity +
-	// anguish + frustration (negation/repetition/blame).
-	const topModel = useMemo(() => {
-		const totals = new Map<string, { model: string; provider: string; score: number }>();
-		for (const point of behaviorSeries) {
-			const key = `${point.model}::${point.provider}`;
-			const existing = totals.get(key);
-			const score =
-				point.yelling + point.profanity + point.anguish + point.negation + point.repetition + point.blame;
-			if (existing) {
-				existing.score += score;
-			} else {
-				totals.set(key, { model: point.model, provider: point.provider, score });
-			}
-		}
-		let best: { model: string; provider: string; score: number } | null = null;
-		for (const entry of totals.values()) {
-			if (!best || entry.score > best.score) best = entry;
-		}
-		return best;
-	}, [behaviorSeries]);
-
-	const totalFrustration = overall.totalNegation + overall.totalRepetition + overall.totalBlame;
-	const messages = overall.totalMessages;
-
-	const cards: Array<{ label: string; value: string; sub?: string }> = [
-		{
-			label: "Messages",
-			value: formatInt(overall.totalMessages),
-			sub: messages > 0 ? "in selected range" : undefined,
-		},
-		{
-			label: "Yelling",
-			value: formatInt(overall.totalYelling),
-			sub: perMsg(overall.totalYelling, messages),
-		},
-		{
-			label: "Profanity hits",
-			value: formatInt(overall.totalProfanity),
-			sub: perMsg(overall.totalProfanity, messages),
-		},
-		{
-			label: "Anguish",
-			value: formatInt(overall.totalAnguish),
-			sub: perMsg(overall.totalAnguish, messages),
-		},
-		{
-			label: "Frustration",
-			value: formatInt(totalFrustration),
-			sub: perMsg(totalFrustration, messages),
-		},
-		{
-			label: "Most yelled-at",
-			value: topModel?.model ?? "\u2014",
-			sub: topModel ? `${formatInt(topModel.score)} hits` : undefined,
-		},
-	];
-
-	return (
-		<div className="grid grid-cols-2 sm:grid-cols-6 gap-4">
-			{cards.map(card => (
-				<div key={card.label} className="surface px-4 py-3">
-					<p className="text-xs text-[var(--text-muted)] mb-1">{card.label}</p>
-					<p className="text-lg font-semibold text-[var(--text-primary)] truncate" title={card.value}>
-						{card.value}
-					</p>
-					{card.sub && <p className="text-xs text-[var(--text-muted)] mt-0.5">{card.sub}</p>}
-				</div>
-			))}
-		</div>
-	);
-}

package/src/client/components/ChartsContainer.tsx

@@ -1,221 +0,0 @@
-import {
-	CategoryScale,
-	Chart as ChartJS,
-	Filler,
-	Legend,
-	LinearScale,
-	LineElement,
-	PointElement,
-	Title,
-	Tooltip,
-} from "chart.js";
-import { useMemo } from "react";
-import { Line } from "react-chartjs-2";
-import type { ModelTimeSeriesPoint, TimeRange } from "../types";
-import { useSystemTheme } from "../useSystemTheme";
-import { formatRangeTick, rangeMeta } from "./range-meta";
-
-ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
-
-const MODEL_COLORS = [
-	"#a78bfa", // violet
-	"#22d3ee", // cyan
-	"#ec4899", // pink
-	"#4ade80", // green
-	"#fbbf24", // amber
-	"#f87171", // red
-	"#60a5fa", // blue
-];
-
-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;
-interface ChartsContainerProps {
-	modelSeries: ModelTimeSeriesPoint[];
-	timeRange: TimeRange;
-}
-
-export function ChartsContainer({ modelSeries, timeRange }: ChartsContainerProps) {
-	const chartData = useMemo(() => buildModelPreferenceSeries(modelSeries), [modelSeries]);
-	const theme = useSystemTheme();
-	const chartTheme = CHART_THEMES[theme];
-	const meta = rangeMeta(timeRange);
-	const data = {
-		labels: chartData.data.map(d => formatRangeTick(d.timestamp, timeRange)),
-		datasets: chartData.series.map((seriesName, index) => ({
-			label: seriesName,
-			data: chartData.data.map(d => d[seriesName] ?? 0),
-			borderColor: MODEL_COLORS[index % MODEL_COLORS.length],
-			backgroundColor: `${MODEL_COLORS[index % MODEL_COLORS.length]}20`,
-			fill: true,
-			tension: 0.4,
-			pointRadius: 0,
-			pointHoverRadius: 4,
-			borderWidth: 2,
-		})),
-	};
-
-	const options = {
-		responsive: true,
-		maintainAspectRatio: false,
-		interaction: {
-			mode: "index" as const,
-			intersect: false,
-		},
-		plugins: {
-			legend: {
-				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: (context: { dataset: { label?: string }; parsed: { y: number | null } }) => {
-						const label = context.dataset.label ?? "";
-						const value = context.parsed.y;
-						return `${label}: ${(value ?? 0).toFixed(1)}%`;
-					},
-				},
-			},
-		},
-		scales: {
-			x: {
-				grid: {
-					color: chartTheme.grid,
-					drawBorder: false,
-				},
-				ticks: {
-					color: chartTheme.tick,
-					font: { size: 11 },
-				},
-			},
-			y: {
-				grid: {
-					color: chartTheme.grid,
-					drawBorder: false,
-				},
-				ticks: {
-					color: chartTheme.tick,
-					font: { size: 11 },
-					callback: (value: number | string) => `${value}%`,
-				},
-				min: 0,
-				max: 100,
-			},
-		},
-	};
-
-	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)]">Model Preference</h3>
-				<p className="text-xs text-[var(--text-muted)] mt-1">Share of requests over {meta.windowLabel}</p>
-			</div>
-			<div className="p-5 min-h-[320px]">
-				{chartData.data.length === 0 ? (
-					<div className="h-full flex items-center justify-center text-[var(--text-muted)] text-sm">
-						No data available
-					</div>
-				) : (
-					<div className="h-[280px]">
-						<Line data={data} options={options} />
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-function buildModelPreferenceSeries(
-	points: ModelTimeSeriesPoint[],
-	topN = 5,
-): {
-	data: Array<Record<string, number>>;
-	series: string[];
-} {
-	if (points.length === 0) return { data: [], series: [] };
-
-	const totals = new Map<string, { model: string; provider: string; total: number }>();
-	for (const point of points) {
-		const key = `${point.model}::${point.provider}`;
-		const existing = totals.get(key);
-		if (existing) {
-			existing.total += point.requests;
-		} else {
-			totals.set(key, { model: point.model, provider: point.provider, total: point.requests });
-		}
-	}
-
-	const sorted = [...totals.entries()].map(([key, value]) => ({ key, ...value })).sort((a, b) => b.total - a.total);
-	const topEntries = sorted.slice(0, topN);
-	const topKeys = new Set(topEntries.map(entry => entry.key));
-
-	const topModelCounts = new Map<string, number>();
-	for (const entry of topEntries) {
-		topModelCounts.set(entry.model, (topModelCounts.get(entry.model) ?? 0) + 1);
-	}
-
-	const labelByKey = new Map<string, string>();
-	for (const entry of topEntries) {
-		const showProvider = (topModelCounts.get(entry.model) ?? 0) > 1;
-		labelByKey.set(entry.key, showProvider ? `${entry.model} (${entry.provider})` : entry.model);
-	}
-
-	const dataMap = new Map<number, Record<string, number>>();
-
-	for (const point of points) {
-		const key = `${point.model}::${point.provider}`;
-		const bucket = dataMap.get(point.timestamp) ?? { timestamp: point.timestamp, total: 0 };
-		bucket.total += point.requests;
-		const seriesLabel = topKeys.has(key) ? (labelByKey.get(key) ?? point.model) : "Other";
-		bucket[seriesLabel] = (bucket[seriesLabel] ?? 0) + point.requests;
-		dataMap.set(point.timestamp, bucket);
-	}
-
-	const series = topEntries.map(entry => labelByKey.get(entry.key) ?? entry.model);
-	if ([...dataMap.values()].some(row => (row.Other ?? 0) > 0)) {
-		series.push("Other");
-	}
-
-	const data = [...dataMap.values()]
-		.sort((a, b) => (a.timestamp ?? 0) - (b.timestamp ?? 0))
-		.map(row => {
-			const total = row.total ?? 0;
-			for (const key of series) {
-				row[key] = total > 0 ? ((row[key] ?? 0) / total) * 100 : 0;
-			}
-			return row;
-		});
-
-	return { data, series };
-}