@gajae-code/stats 0.1.1

package/src/client/styles.css

@@ -0,0 +1,306 @@
+@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: #ec4899;
+  --accent-pink-glow: rgba(236, 72, 153, 0.26);
+  --accent-cyan: #0891b2;
+  --accent-cyan-glow: rgba(8, 145, 178, 0.24);
+  --accent-violet: #8b5cf6;
+  --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;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --bg-page: #0a0a0f;
+    --bg-surface: #111118;
+    --bg-elevated: #16161e;
+    --bg-hover: rgba(255, 255, 255, 0.03);
+    --bg-active: rgba(255, 255, 255, 0.06);
+
+    --border-subtle: rgba(255, 255, 255, 0.06);
+    --border-default: rgba(255, 255, 255, 0.1);
+
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --text-muted: #64748b;
+
+    --accent-pink: #ec4899;
+    --accent-pink-glow: rgba(236, 72, 153, 0.3);
+    --accent-cyan: #22d3ee;
+    --accent-cyan-glow: rgba(34, 211, 238, 0.3);
+    --accent-violet: #a78bfa;
+    --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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    background: var(--bg-page);
+    color: var(--text-primary);
+    margin: 0;
+    min-height: 100vh;
+  }
+
+  /* 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: linear-gradient(135deg, var(--accent-pink) 0%, #db2777 100%);
+    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(34, 211, 238, 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
+ *     `@gajae-code/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;
+}