@oh-my-pi/omp-stats 18.3.4 → 18.4.0

package/src/client/ui/DataTable.tsx

@@ -1,122 +0,0 @@
-import type React from "react";
-
-export interface DataTableColumn<T> {
-	key: string;
-	header: React.ReactNode;
-	render?: (item: T) => React.ReactNode;
-	className?: string;
-	numeric?: boolean;
-}
-
-export interface DataTableProps<T> {
-	columns: DataTableColumn<T>[];
-	data: T[];
-	keyExtractor: (item: T) => string | number;
-	onRowClick?: (item: T) => void;
-	renderMobileCard?: (item: T, onClick?: () => void) => React.ReactNode;
-	emptyText?: string;
-}
-
-export function DataTable<T>({
-	columns,
-	data,
-	keyExtractor,
-	onRowClick,
-	renderMobileCard,
-	emptyText = "No data available",
-}: DataTableProps<T>) {
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLTableRowElement>, item: T) => {
-		if (onRowClick && (e.key === "Enter" || e.key === " ")) {
-			e.preventDefault();
-			onRowClick(item);
-		}
-	};
-
-	if (data.length === 0) {
-		return <div className="stats-table-empty">{emptyText}</div>;
-	}
-
-	return (
-		<div className="stats-table-wrapper">
-			{/* Mobile layout */}
-			{renderMobileCard && (
-				<div className="stats-table-mobile-only">
-					<div className="stats-table-mobile-list">
-						{data.map(item => {
-							const key = String(keyExtractor(item));
-							const onClick = onRowClick ? () => onRowClick(item) : undefined;
-							return (
-								<div key={key} className="stats-table-mobile-card-wrapper">
-									{renderMobileCard(item, onClick)}
-								</div>
-							);
-						})}
-					</div>
-				</div>
-			)}
-
-			{/* Desktop layout */}
-			<div className={renderMobileCard ? "stats-table-desktop-only" : "stats-table-container"}>
-				<table className="stats-table">
-					<thead>
-						<tr>
-							{columns.map(col => {
-								const headerClasses = [
-									"stats-table-th",
-									col.numeric ? "stats-text-right" : "stats-text-left",
-									col.className || "",
-								]
-									.filter(Boolean)
-									.join(" ");
-
-								return (
-									<th key={col.key} className={headerClasses}>
-										{col.header}
-									</th>
-								);
-							})}
-						</tr>
-					</thead>
-					<tbody>
-						{data.map(item => {
-							const key = String(keyExtractor(item));
-							const isClickable = typeof onRowClick === "function";
-							const rowClasses = ["stats-table-tr", isClickable ? "stats-table-tr-clickable" : ""]
-								.filter(Boolean)
-								.join(" ");
-
-							return (
-								<tr
-									key={key}
-									className={rowClasses}
-									onClick={isClickable ? () => onRowClick!(item) : undefined}
-									onKeyDown={isClickable ? e => handleKeyDown(e, item) : undefined}
-									tabIndex={isClickable ? 0 : undefined}
-									role={isClickable ? "button" : undefined}
-								>
-									{columns.map(col => {
-										const cellClasses = [
-											"stats-table-td",
-											col.numeric ? "stats-text-right" : "stats-text-left",
-											col.className || "",
-										]
-											.filter(Boolean)
-											.join(" ");
-
-										return (
-											<td key={col.key} className={cellClasses}>
-												{col.render
-													? col.render(item)
-													: ((item as Record<string, unknown>)[col.key] as React.ReactNode)}
-											</td>
-										);
-									})}
-								</tr>
-							);
-						})}
-					</tbody>
-				</table>
-			</div>
-		</div>
-	);
-}

package/src/client/ui/EmptyState.tsx

@@ -1,16 +0,0 @@
-import { Inbox, type LucideIcon } from "lucide-react";
-
-export interface EmptyStateProps {
-	message?: string;
-	icon?: LucideIcon;
-	className?: string;
-}
-
-export function EmptyState({ message = "No data available", icon: Icon = Inbox, className = "" }: EmptyStateProps) {
-	return (
-		<div className={`stats-empty-state ${className}`}>
-			<Icon size={24} className="stats-empty-state-icon" aria-hidden="true" />
-			<p className="stats-empty-state-message">{message}</p>
-		</div>
-	);
-}

package/src/client/ui/ErrorState.tsx

@@ -1,25 +0,0 @@
-export interface ErrorStateProps {
-	error?: Error | null;
-	onRetry?: () => void;
-	className?: string;
-}
-
-export function ErrorState({ error, onRetry, className = "" }: ErrorStateProps) {
-	return (
-		<div className={`stats-error-state ${className}`}>
-			<div className="stats-error-state-content">
-				<h4 className="stats-error-state-title">Failed to load data</h4>
-				{error && <p className="stats-error-state-message">{error.message}</p>}
-				{onRetry && (
-					<button
-						type="button"
-						onClick={onRetry}
-						className="stats-button stats-button-secondary stats-error-state-btn"
-					>
-						Retry
-					</button>
-				)}
-			</div>
-		</div>
-	);
-}

package/src/client/ui/MetricCluster.tsx

@@ -1,92 +0,0 @@
-import {
-	formatCompact,
-	formatDurationMs,
-	formatEstimatedCost,
-	formatInteger,
-	formatPercent,
-	formatTokensPerSecond,
-} from "../data/formatters";
-import { sumConversationTokens } from "../data/view-models";
-import type { AggregatedStats } from "../types";
-
-export interface MetricClusterProps {
-	stats: AggregatedStats;
-}
-
-export function MetricCluster({ stats }: MetricClusterProps) {
-	const conversationTokens = sumConversationTokens(stats);
-
-	return (
-		<div className="stats-metric-cluster">
-			<div className="stats-metric-primary-grid">
-				<div className="stats-metric-card primary">
-					<div className="stats-metric-label">API-equivalent estimate</div>
-					<div className="stats-metric-value">
-						{formatEstimatedCost(
-							stats.totalCost,
-							stats.unpricedRequests,
-							stats.totalCost > 0 && stats.totalCost < 0.01 ? 4 : 2,
-						)}
-					</div>
-				</div>
-				<div className="stats-metric-card primary">
-					<div className="stats-metric-label">Requests</div>
-					<div className="stats-metric-value">{formatInteger(stats.totalRequests)}</div>
-				</div>
-				<div
-					className="stats-metric-card primary"
-					title="Prompt-input cost saved versus billing the same tokens uncached; cache writes can make this negative"
-				>
-					<div className="stats-metric-label">Cache Savings</div>
-					<div className="stats-metric-value">{formatPercent(stats.cacheSavings)}</div>
-				</div>
-				<div
-					className="stats-metric-card primary"
-					title="Prompt input served from cache: cache reads / (uncached input + cache reads)"
-				>
-					<div className="stats-metric-label">Cache Rate</div>
-					<div className="stats-metric-value">{formatPercent(stats.cacheRate)}</div>
-				</div>
-				<div className="stats-metric-card primary">
-					<div className="stats-metric-label">Error Rate</div>
-					<div className="stats-metric-value">{formatPercent(stats.errorRate)}</div>
-				</div>
-			</div>
-
-			<div className="stats-metric-secondary-grid">
-				<div className="stats-metric-card secondary" title="Conversation input not served from cache">
-					<div className="stats-metric-label">Uncached Input</div>
-					<div className="stats-metric-value">{formatCompact(stats.totalInputTokens)}</div>
-				</div>
-				<div className="stats-metric-card secondary" title="Conversation input read from the prompt cache">
-					<div className="stats-metric-label">Cache Read</div>
-					<div className="stats-metric-value">{formatCompact(stats.totalCacheReadTokens)}</div>
-				</div>
-				<div className="stats-metric-card secondary">
-					<div className="stats-metric-label">Output Tokens</div>
-					<div className="stats-metric-value">{formatCompact(stats.totalOutputTokens)}</div>
-				</div>
-				<div className="stats-metric-card secondary" title="Uncached input + cache reads + cache writes + output">
-					<div className="stats-metric-label">Conversation Total</div>
-					<div className="stats-metric-value">{formatCompact(conversationTokens)}</div>
-				</div>
-				<div className="stats-metric-card secondary">
-					<div className="stats-metric-label">Premium Requests</div>
-					<div className="stats-metric-value">{formatInteger(stats.totalPremiumRequests)}</div>
-				</div>
-				<div className="stats-metric-card secondary">
-					<div className="stats-metric-label">Tokens/s</div>
-					<div className="stats-metric-value">{formatTokensPerSecond(stats.avgTokensPerSecond)}</div>
-				</div>
-				<div className="stats-metric-card secondary">
-					<div className="stats-metric-label">Avg Latency</div>
-					<div className="stats-metric-value">{formatDurationMs(stats.avgDuration)}</div>
-				</div>
-				<div className="stats-metric-card secondary">
-					<div className="stats-metric-label">Avg TTFT</div>
-					<div className="stats-metric-value">{formatDurationMs(stats.avgTtft)}</div>
-				</div>
-			</div>
-		</div>
-	);
-}

package/src/client/ui/Panel.tsx

@@ -1,24 +0,0 @@
-import type React from "react";
-
-export interface PanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-	title?: React.ReactNode;
-	subtitle?: React.ReactNode;
-	actions?: React.ReactNode;
-}
-
-export function Panel({ title, subtitle, actions, children, className = "", ...props }: PanelProps) {
-	return (
-		<div className={`stats-panel ${className}`} {...props}>
-			{(title || subtitle || actions) && (
-				<div className="stats-panel-header">
-					<div className="stats-panel-header-titles">
-						{title && <h3 className="stats-panel-title">{title}</h3>}
-						{subtitle && <p className="stats-panel-subtitle">{subtitle}</p>}
-					</div>
-					{actions && <div className="stats-panel-actions">{actions}</div>}
-				</div>
-			)}
-			<div className="stats-panel-body">{children}</div>
-		</div>
-	);
-}

package/src/client/ui/SegmentedControl.tsx

@@ -1,36 +0,0 @@
-export interface SegmentedControlOption<T> {
-	value: T;
-	label: string;
-	title?: string;
-}
-
-export interface SegmentedControlProps<T> {
-	options: SegmentedControlOption<T>[];
-	value: T;
-	onChange: (value: T) => void;
-	className?: string;
-}
-
-export function SegmentedControl<T>({ options, value, onChange, className = "" }: SegmentedControlProps<T>) {
-	return (
-		<div className={`stats-segmented-control ${className}`} role="radiogroup">
-			{options.map(opt => {
-				const isActive = opt.value === value;
-				return (
-					<button
-						key={String(opt.value)}
-						type="button"
-						role="radio"
-						aria-checked={isActive}
-						data-active={isActive ? "true" : "false"}
-						className="stats-segmented-control-btn"
-						title={opt.title}
-						onClick={() => onChange(opt.value)}
-					>
-						{opt.label}
-					</button>
-				);
-			})}
-		</div>
-	);
-}

package/src/client/ui/Skeleton.tsx

@@ -1,17 +0,0 @@
-import type React from "react";
-
-export interface SkeletonProps {
-	variant?: "text" | "rect" | "circle";
-	width?: string | number;
-	height?: string | number;
-	className?: string;
-}
-
-export function Skeleton({ variant = "text", width, height, className = "" }: SkeletonProps) {
-	const style: React.CSSProperties = {
-		width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
-		height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
-	};
-
-	return <div className={`stats-skeleton ${className}`} data-variant={variant} style={style} />;
-}

package/src/client/ui/StatusPill.tsx

@@ -1,15 +0,0 @@
-import type React from "react";
-
-export interface StatusPillProps {
-	variant: "success" | "danger" | "warning" | "info" | "default";
-	children: React.ReactNode;
-	className?: string;
-}
-
-export function StatusPill({ variant, children, className = "" }: StatusPillProps) {
-	return (
-		<span className={`stats-status-pill ${className}`} data-variant={variant}>
-			{children}
-		</span>
-	);
-}

package/tailwind.config.js

@@ -1,40 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-import * as path from "node:path";
-export default {
-	content: [path.join(import.meta.dir, "src", "client", "**/*.{js,jsx,ts,tsx}")],
-	darkMode: "class",
-	theme: {
-		extend: {
-			colors: {
-				page: "var(--bg-page)",
-				surface: "var(--bg-surface)",
-				elevated: "var(--bg-elevated)",
-				"border-subtle": "var(--border-subtle)",
-				"border-default": "var(--border-default)",
-				"text-primary": "var(--text-primary)",
-				"text-secondary": "var(--text-secondary)",
-				"text-muted": "var(--text-muted)",
-				pink: "var(--accent-pink)",
-				cyan: "var(--accent-cyan)",
-				violet: "var(--accent-violet)",
-			},
-			fontFamily: {
-				sans: [
-					"-apple-system",
-					"BlinkMacSystemFont",
-					'"Segoe UI"',
-					"Roboto",
-					"Helvetica",
-					"Arial",
-					"sans-serif",
-				],
-			},
-			borderRadius: {
-				sm: "var(--radius-sm)",
-				md: "var(--radius-md)",
-				lg: "var(--radius-lg)",
-			},
-		},
-	},
-	plugins: [],
-};