@oh-my-pi/omp-stats 14.9.3 → 14.9.7

package/src/client/components/CostSummary.tsx

@@ -1,35 +1,21 @@
-import { useMemo } from "react";
 import type { CostTimeSeriesPoint } from "../types";
 
 interface CostSummaryProps {
 	costSeries: CostTimeSeriesPoint[];
 }
 
-const SUMMARY_DAYS = 30;
-
 function formatCost(value: number): string {
 	return `$${Math.round(value)}`;
 }
 
 export function CostSummary({ costSeries }: CostSummaryProps) {
-	const cutoff = Date.now() - SUMMARY_DAYS * 86400000;
-	const prevCutoff = cutoff - SUMMARY_DAYS * 86400000;
-
-	const current = useMemo(() => costSeries.filter(p => p.timestamp >= cutoff), [costSeries, cutoff]);
-	const previous = useMemo(
-		() => costSeries.filter(p => p.timestamp >= prevCutoff && p.timestamp < cutoff),
-		[costSeries, prevCutoff, cutoff],
-	);
-
-	const totalCost = current.reduce((sum, p) => sum + p.cost, 0);
-	const prevTotalCost = previous.reduce((sum, p) => sum + p.cost, 0);
-
-	const dayBuckets = new Set(current.map(p => p.timestamp)).size;
+	const totalCost = costSeries.reduce((sum, p) => sum + p.cost, 0);
+	const dayBuckets = new Set(costSeries.map(p => p.timestamp)).size;
 	const avgDaily = dayBuckets > 0 ? totalCost / dayBuckets : 0;
 
-	// Most expensive model over current period
+	// Most expensive model over the visible window
 	const modelTotals = new Map<string, number>();
-	for (const point of current) {
+	for (const point of costSeries) {
 		modelTotals.set(point.model, (modelTotals.get(point.model) ?? 0) + point.cost);
 	}
 	let topModel = "";
@@ -41,47 +27,22 @@ export function CostSummary({ costSeries }: CostSummaryProps) {
 		}
 	}
 
-	const trend = prevTotalCost > 0 ? ((totalCost - prevTotalCost) / prevTotalCost) * 100 : null;
-
 	const cards = [
-		{
-			label: "Total (30d)",
-			value: formatCost(totalCost),
-			positive: null as boolean | null,
-		},
-		{
-			label: "Avg / day",
-			value: formatCost(avgDaily),
-			positive: null as boolean | null,
-		},
+		{ label: "Total", value: formatCost(totalCost) },
+		{ label: "Avg / day", value: formatCost(avgDaily) },
 		{
 			label: "Top model",
 			value: topModel || "—",
 			sub: topModel ? formatCost(topModelCost) : undefined,
-			positive: null as boolean | null,
-		},
-		{
-			label: "vs prev 30d",
-			value: trend !== null ? `${trend >= 0 ? "+" : ""}${Math.round(trend)}%` : "—",
-			sub: undefined as string | undefined,
-			positive: trend !== null ? trend <= 0 : null,
 		},
 	];
 
 	return (
-		<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+		<div className="grid grid-cols-1 sm:grid-cols-3 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 ${
-							card.positive === true
-								? "text-[var(--accent-green,#4ade80)]"
-								: card.positive === false
-									? "text-[var(--accent-pink)]"
-									: "text-[var(--text-primary)]"
-						}`}
-					>
+					<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>}

package/src/client/components/Header.tsx

@@ -1,17 +1,28 @@
 import { Activity, RefreshCw } from "lucide-react";
+import type { TimeRange } from "../types";
 
-type Tab = "overview" | "requests" | "errors" | "models" | "costs";
+type Tab = "overview" | "requests" | "errors" | "models" | "costs" | "behavior";
+
+const tabs: Tab[] = ["overview", "requests", "errors", "models", "costs", "behavior"];
+const timeRanges: { label: string; value: TimeRange }[] = [
+	{ label: "1h", value: "1h" },
+	{ label: "24h", value: "24h" },
+	{ label: "7d", value: "7d" },
+	{ label: "30d", value: "30d" },
+	{ label: "90d", value: "90d" },
+	{ label: "All", value: "all" },
+];
 
 interface HeaderProps {
 	activeTab: Tab;
 	onTabChange: (tab: Tab) => void;
 	onSync: () => void;
 	syncing: boolean;
+	timeRange: TimeRange;
+	onTimeRangeChange: (timeRange: TimeRange) => void;
 }
 
-const tabs: Tab[] = ["overview", "requests", "errors", "models", "costs"];
-
-export function Header({ activeTab, onTabChange, onSync, syncing }: HeaderProps) {
+export function Header({ activeTab, onTabChange, onSync, syncing, timeRange, onTimeRangeChange }: HeaderProps) {
 	return (
 		<header className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 mb-8 border-b border-[var(--border-subtle)]">
 			<div className="flex items-center gap-3">
@@ -37,6 +48,19 @@ export function Header({ activeTab, onTabChange, onSync, syncing }: HeaderProps)
 						</button>
 					))}
 				</div>
+				<div className="flex bg-[var(--bg-surface)] rounded-[var(--radius-md)] p-1 border border-[var(--border-subtle)]">
+					{timeRanges.map(range => (
+						<button
+							key={range.value}
+							type="button"
+							onClick={() => onTimeRangeChange(range.value)}
+							className={`tab-btn ${timeRange === range.value ? "active" : ""}`}
+							title={range.value === "all" ? "All time" : `Last ${range.label}`}
+						>
+							{range.label}
+						</button>
+					))}
+				</div>
 
 				<button type="button" onClick={onSync} disabled={syncing} className="btn btn-primary">
 					<RefreshCw size={16} className={syncing ? "spin" : ""} />

package/src/client/components/StatsGrid.tsx

@@ -5,6 +5,15 @@ interface StatsGridProps {
 	stats: AggregatedStats;
 }
 
+const compactNumberFormatter = new Intl.NumberFormat(undefined, {
+	notation: "compact",
+	maximumFractionDigits: 1,
+});
+
+function formatCompactNumber(value: number): string {
+	return compactNumberFormatter.format(value);
+}
+
 const statConfig = [
 	{
 		key: "requests",
@@ -39,7 +48,7 @@ const statConfig = [
 		icon: Database,
 		color: "var(--accent-cyan)",
 		getValue: (s: AggregatedStats) => `${(s.cacheRate * 100).toFixed(1)}%`,
-		getDetail: (s: AggregatedStats) => `${(s.totalCacheReadTokens / 1000).toFixed(1)}k cached tokens`,
+		getDetail: (s: AggregatedStats) => `${formatCompactNumber(s.totalCacheReadTokens)} cached tokens`,
 	},
 	{
 		key: "errors",

package/src/client/types.ts

@@ -59,6 +59,7 @@ export interface AggregatedStats {
 	lastTimestamp: number;
 }
 
+export type TimeRange = "1h" | "24h" | "7d" | "30d" | "90d" | "all";
 export interface ModelStats extends AggregatedStats {
 	model: string;
 	provider: string;
@@ -113,3 +114,65 @@ export interface DashboardStats {
 	modelPerformanceSeries: ModelPerformancePoint[];
 	costSeries: CostTimeSeriesPoint[];
 }
+
+export interface OverviewStats {
+	overall: AggregatedStats;
+	timeSeries: TimeSeriesPoint[];
+}
+
+export interface ModelDashboardStats {
+	byModel: ModelStats[];
+	modelSeries: ModelTimeSeriesPoint[];
+	modelPerformanceSeries: ModelPerformancePoint[];
+}
+
+export interface CostDashboardStats {
+	costSeries: CostTimeSeriesPoint[];
+}
+
+export interface BehaviorTimeSeriesPoint {
+	timestamp: number;
+	model: string;
+	provider: string;
+	messages: number;
+	yelling: number;
+	profanity: number;
+	anguish: number;
+	negation: number;
+	repetition: number;
+	blame: number;
+	chars: number;
+}
+
+export interface BehaviorOverallStats {
+	totalMessages: number;
+	totalYelling: number;
+	totalProfanity: number;
+	totalAnguish: number;
+	totalNegation: number;
+	totalRepetition: number;
+	totalBlame: number;
+	totalChars: number;
+	firstTimestamp: number;
+	lastTimestamp: number;
+}
+
+export interface BehaviorModelStats {
+	model: string;
+	provider: string;
+	totalMessages: number;
+	totalYelling: number;
+	totalProfanity: number;
+	totalAnguish: number;
+	totalNegation: number;
+	totalRepetition: number;
+	totalBlame: number;
+	totalChars: number;
+	lastTimestamp: number;
+}
+
+export interface BehaviorDashboardStats {
+	overall: BehaviorOverallStats;
+	byModel: BehaviorModelStats[];
+	behaviorSeries: BehaviorTimeSeriesPoint[];
+}