@vib-rato/stats 0.16.0

package/src/client/styles.css

@@ -0,0 +1,318 @@
+@import "tailwindcss/index.css";
+:root {
+  color-scheme: light;
+  --bg-page: #f8fafc;
+  --bg-surface: #ffffff;
+  --bg-elevated: #f1f5f9;
+  --bg-hover: rgba(15, 23, 42, 0.04);
+  --bg-active: rgba(15, 23, 42, 0.08);
+
+  --border-subtle: rgba(15, 23, 42, 0.08);
+  --border-default: rgba(15, 23, 42, 0.14);
+
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+
+  --accent-pink: #002f6d;
+  --accent-pink-glow: rgba(0, 47, 109, 0.28);
+  --accent-cyan: #4f6fa3;
+  --accent-cyan-glow: rgba(79, 111, 163, 0.24);
+  --accent-violet: #7a8ca8;
+  --accent-green: #16a34a;
+  --accent-amber: #d97706;
+  --accent-red: #dc2626;
+
+  --tab-active-highlight: inset 0 1px 0 rgba(15, 23, 42, 0.08);
+
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+
+  --brand-blue: #002f6d;
+  --brand-gray: #bcbec0;
+  --brand-gradient: linear-gradient(120deg, #003d96 0%, #002f6d 55%, #002d5c 100%);
+  --font-title: "NanumSquare", "NanumSquareRound", "Nanum Gothic", -apple-system, "Apple SD Gothic Neo",
+    "Malgun Gothic", "Segoe UI", sans-serif;
+  --font-body: "KoPubDotum", "KoPub Dotum", "KoPubWorldDotum", "Nanum Gothic", -apple-system, "Apple SD Gothic Neo",
+    "Malgun Gothic", "Segoe UI", sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --bg-page: #0b1220;
+    --bg-surface: #101a2e;
+    --bg-elevated: #16233d;
+    --bg-hover: rgba(255, 255, 255, 0.03);
+    --bg-active: rgba(255, 255, 255, 0.06);
+
+    --border-subtle: rgba(127, 166, 230, 0.12);
+    --border-default: rgba(127, 166, 230, 0.2);
+
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+
+    --accent-pink: #7fa6e6;
+    --accent-pink-glow: rgba(127, 166, 230, 0.35);
+    --accent-cyan: #8fb3e8;
+    --accent-cyan-glow: rgba(143, 179, 232, 0.3);
+    --accent-violet: #a9b7cc;
+    --accent-green: #4ade80;
+    --accent-amber: #fbbf24;
+    --accent-red: #f87171;
+
+    --tab-active-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    font-family: var(--font-body);
+    background: var(--bg-page);
+    color: var(--text-primary);
+    margin: 0;
+    min-height: 100vh;
+  }
+
+  h1, h2, h3, .title {
+    font-family: var(--font-title);
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--border-default);
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+  }
+}
+
+@layer components {
+  .surface {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+  }
+
+  .surface-elevated {
+    background: var(--bg-elevated);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg);
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: var(--radius-md);
+    border: none;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .btn-primary {
+    background: var(--brand-gradient);
+    color: white;
+    box-shadow: 0 0 20px var(--accent-pink-glow);
+  }
+
+  .btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 24px var(--accent-pink-glow);
+  }
+
+  .btn-primary:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  .btn-secondary {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border: 1px solid var(--border-default);
+  }
+
+  .btn-secondary:hover {
+    background: var(--bg-hover);
+    border-color: var(--border-default);
+  }
+
+  .tab-btn {
+    padding: 6px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-muted);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .tab-btn:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+  }
+
+  .tab-btn.active {
+    color: var(--text-primary);
+    background: var(--bg-elevated);
+    box-shadow: var(--tab-active-highlight);
+  }
+
+  .stat-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    transition: all 0.2s ease;
+  }
+
+  .stat-card:hover {
+    border-color: var(--border-default);
+    background: var(--bg-elevated);
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 10px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 100px;
+  }
+
+  .badge-success {
+    background: rgba(74, 222, 128, 0.15);
+    color: var(--accent-green);
+  }
+
+  .badge-error {
+    background: rgba(248, 113, 113, 0.15);
+    color: var(--accent-red);
+  }
+
+  .badge-info {
+    background: rgba(143, 179, 232, 0.15);
+    color: var(--accent-cyan);
+  }
+
+  .badge-warning {
+    background: rgba(251, 191, 36, 0.15);
+    color: var(--accent-amber);
+  }
+
+  .table-header {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+  }
+
+  .table-row {
+    transition: background 0.15s ease;
+  }
+
+  .table-row:hover {
+    background: var(--bg-hover);
+  }
+
+  .gradient-text {
+    background: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-cyan) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .gradient-border {
+    position: relative;
+  }
+
+  .gradient-border::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    border-radius: inherit;
+    background: linear-gradient(135deg, var(--accent-pink), var(--accent-cyan));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  .glow-pink {
+    box-shadow: 0 0 30px var(--accent-pink-glow);
+  }
+
+  .glow-cyan {
+    box-shadow: 0 0 30px var(--accent-cyan-glow);
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 0.3s ease-out;
+  }
+
+  .animate-slide-up {
+    animation: slideUp 0.3s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .spin {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+}

package/src/client/types.ts

@@ -0,0 +1,78 @@
+/**
+ * Client-side type definitions.
+ *
+ * Shared shapes (aggregations, time-series, dashboard payloads) live in
+ * `../shared-types` and are re-exported here. The types declared inline below
+ * are deliberately client-only because:
+ *   - `Usage` is redeclared locally so the client bundle avoids importing
+ *     `@vib-rato/ai` (the server-side AI types package).
+ *   - `MessageStats.stopReason` is widened from the server's `StopReason`
+ *     enum to `string`, again to keep the client free of pi-ai types.
+ *   - `TimeRange`, `OverviewStats`, `ModelDashboardStats`,
+ *     `CostDashboardStats` are UI-only view shapes the server never produces.
+ */
+
+import type {
+	AggregatedStats,
+	CostTimeSeriesPoint,
+	ModelPerformancePoint,
+	ModelStats,
+	ModelTimeSeriesPoint,
+	TimeSeriesPoint,
+} from "../shared-types";
+
+export * from "../shared-types";
+
+export interface Usage {
+	input: number;
+	output: number;
+	cacheRead: number;
+	cacheWrite: number;
+	totalTokens: number;
+	premiumRequests?: number;
+	cost: {
+		input: number;
+		output: number;
+		cacheRead: number;
+		cacheWrite: number;
+		total: number;
+	};
+}
+
+export interface MessageStats {
+	id?: number;
+	sessionFile: string;
+	entryId: string;
+	folder: string;
+	model: string;
+	provider: string;
+	api: string;
+	timestamp: number;
+	duration: number | null;
+	ttft: number | null;
+	stopReason: string;
+	errorMessage: string | null;
+	usage: Usage;
+}
+
+export interface RequestDetails extends MessageStats {
+	messages: unknown[];
+	output: unknown;
+}
+
+export type TimeRange = "1h" | "24h" | "7d" | "30d" | "90d" | "all";
+
+export interface OverviewStats {
+	overall: AggregatedStats;
+	timeSeries: TimeSeriesPoint[];
+}
+
+export interface ModelDashboardStats {
+	byModel: ModelStats[];
+	modelSeries: ModelTimeSeriesPoint[];
+	modelPerformanceSeries: ModelPerformancePoint[];
+}
+
+export interface CostDashboardStats {
+	costSeries: CostTimeSeriesPoint[];
+}

package/src/client/useSystemTheme.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export type SystemTheme = "light" | "dark";
+
+const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+
+function getSystemTheme(): SystemTheme {
+	if (typeof window === "undefined") {
+		return "light";
+	}
+
+	return window.matchMedia(DARK_SCHEME_QUERY).matches ? "dark" : "light";
+}
+
+export function useSystemTheme(): SystemTheme {
+	const [theme, setTheme] = useState<SystemTheme>(() => getSystemTheme());
+
+	useEffect(() => {
+		const media = window.matchMedia(DARK_SCHEME_QUERY);
+		const applyTheme = () => {
+			setTheme(media.matches ? "dark" : "light");
+		};
+
+		applyTheme();
+
+		media.addEventListener("change", applyTheme);
+		return () => media.removeEventListener("change", applyTheme);
+	}, []);
+
+	return theme;
+}

package/src/compiled-client-assets.ts

@@ -0,0 +1,96 @@
+import * as path from "node:path";
+
+const INDEX_ASSET = "index.html";
+const UNSAFE_ARCHIVE_NAME = /[\u0000-\u001f\u007f%?#]/u;
+const WINDOWS_ABSOLUTE_PATH = /^[a-zA-Z]:\//;
+
+const CONTENT_TYPES: Readonly<Record<string, string>> = Object.freeze({
+	".css": "text/css; charset=utf-8",
+	".gif": "image/gif",
+	".html": "text/html; charset=utf-8",
+	".ico": "image/x-icon",
+	".jpeg": "image/jpeg",
+	".jpg": "image/jpeg",
+	".js": "text/javascript; charset=utf-8",
+	".json": "application/json; charset=utf-8",
+	".map": "application/json; charset=utf-8",
+	".png": "image/png",
+	".svg": "image/svg+xml",
+	".ttf": "font/ttf",
+	".webp": "image/webp",
+	".woff": "font/woff",
+	".woff2": "font/woff2",
+});
+
+function normalizeArchiveName(archiveName: string): string {
+	const normalized = archiveName.normalize("NFC");
+	const segments = normalized.split("/");
+	if (
+		!normalized ||
+		normalized.startsWith("/") ||
+		WINDOWS_ABSOLUTE_PATH.test(normalized) ||
+		normalized.includes("\\") ||
+		UNSAFE_ARCHIVE_NAME.test(normalized) ||
+		segments.some(segment => !segment || segment === "." || segment === "..")
+	) {
+		throw new Error(`Unsafe compiled stats client archive entry: ${JSON.stringify(archiveName)}`);
+	}
+	return normalized;
+}
+
+function contentType(assetName: string): string {
+	return CONTENT_TYPES[path.posix.extname(assetName).toLowerCase()] ?? "application/octet-stream";
+}
+
+async function parseArchive(archiveBytes: Uint8Array): Promise<ReadonlyMap<string, Blob>> {
+	const files = await new Bun.Archive(archiveBytes).files();
+	const assets = new Map<string, Blob>();
+	for (const [archiveName, file] of files) {
+		const assetName = normalizeArchiveName(archiveName);
+		if (assets.has(assetName)) {
+			throw new Error(`Duplicate compiled stats client archive entry: ${JSON.stringify(assetName)}`);
+		}
+		assets.set(assetName, new Blob([file], { type: contentType(assetName) }));
+	}
+	if (!assets.has(INDEX_ASSET)) {
+		throw new Error("Compiled stats client archive is missing index.html");
+	}
+	return assets;
+}
+
+function responseForPath(assets: ReadonlyMap<string, Blob>, requestPath: string): Response {
+	const assetName = requestPath === "/" ? INDEX_ASSET : requestPath.replace(/^\//, "");
+	const asset = assets.get(assetName);
+	if (asset) return new Response(asset);
+	return new Response(assets.get(INDEX_ASSET));
+}
+
+export function createCompiledClientAssetHandler(
+	loadArchiveBytes: () => Uint8Array | null | Promise<Uint8Array | null>,
+): { response(requestPath: string): Promise<Response> } {
+	let initialization: Promise<ReadonlyMap<string, Blob>> | null = null;
+
+	async function getAssets(): Promise<ReadonlyMap<string, Blob>> {
+		if (initialization) return await initialization;
+		const attempt = (async () => {
+			const archiveBytes = await loadArchiveBytes();
+			if (!archiveBytes) {
+				throw new Error("Compiled stats client bundle missing. Rebuild binary with embedded stats assets.");
+			}
+			return await parseArchive(archiveBytes);
+		})();
+		initialization = attempt;
+		try {
+			return await attempt;
+		} catch (error) {
+			if (initialization === attempt) initialization = null;
+			throw error;
+		}
+	}
+
+	return {
+		async response(requestPath) {
+			return responseForPath(await getAssets(), requestPath);
+		},
+	};
+}