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

package/src/client/routes/TracesRoute.tsx

@@ -5,185 +5,204 @@
 
 import { useMemo, useState } from "react";
 import { getSessions } from "../api";
-import { formatCompact, formatDurationMs, formatEstimatedCost, formatRelativeTime } from "../data/formatters";
-import { useResource } from "../data/useResource";
+import {
+	formatCompact,
+	formatElapsed,
+	formatEstimatedCost,
+	formatInteger,
+	formatRelativeTime,
+} from "../data/formatters";
+import { useQuery } from "../data/query";
 import { TraceView } from "../traces/TraceView";
 import type { SessionSummary } from "../types";
-import { AsyncBoundary, DataTable, Panel } from "../ui";
+import {
+	Card,
+	type Column,
+	EmptyState,
+	LabelCell,
+	MeterCell,
+	PageHeader,
+	QueryView,
+	SearchInput,
+	Table,
+	TableSkeleton,
+} from "../ui";
+import "../traces/traces.css";
 
 export interface TracesRouteProps {
 	active: boolean;
 	session: string | null;
 	onOpenSession: (file: string | null) => void;
-	refreshTrigger: number;
 }
 
-function ModelChips({ models }: { models: string[] }) {
-	const shown = models.slice(0, 3);
+const SESSION_LIMIT = 200;
+
+function ModelList({ models }: { models: string[] }) {
+	if (models.length === 0) return <span className="dim">-</span>;
 	return (
-		<div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
-			{shown.map(model => (
-				<span
-					key={model}
-					className="stats-text-muted truncate"
-					style={{
-						fontSize: 10,
-						border: "1px solid var(--border)",
-						borderRadius: 999,
-						padding: "1px 6px",
-						maxWidth: 140,
-					}}
-				>
-					{model}
-				</span>
-			))}
-			{models.length > 3 && (
-				<span className="stats-text-muted" style={{ fontSize: 10 }}>
-					+{models.length - 3}
-				</span>
-			)}
-		</div>
+		<span className="traces-models" title={models.join("\n")}>
+			<span className="mono truncate">{models[0]}</span>
+			{models.length > 1 && <span className="badge">+{models.length - 1}</span>}
+		</span>
 	);
 }
 
-export function TracesRoute({ active, session, onOpenSession, refreshTrigger }: TracesRouteProps) {
+export function TracesRoute({ active, session, onOpenSession }: TracesRouteProps) {
 	const [filter, setFilter] = useState("");
-
-	const {
-		data: sessions,
-		error,
-		loading,
-	} = useResource(["sessions", refreshTrigger], signal => getSessions(200, undefined, signal), {
+	const sessions = useQuery(["sessions", SESSION_LIMIT], () => getSessions(SESSION_LIMIT), {
 		pollMs: 30000,
 		enabled: active && session === null,
 	});
 
 	const filtered = useMemo(() => {
-		if (!sessions) return [];
+		const rows = sessions.data ?? [];
 		const needle = filter.trim().toLowerCase();
-		if (!needle) return sessions;
-		return sessions.filter(
+		if (!needle) return rows;
+		return rows.filter(
 			row =>
 				(row.title ?? "").toLowerCase().includes(needle) ||
 				row.folder.toLowerCase().includes(needle) ||
 				row.models.some(model => model.toLowerCase().includes(needle)),
 		);
-	}, [sessions, filter]);
+	}, [sessions.data, filter]);
 
-	const columns = useMemo(
+	const maxCost = useMemo(() => Math.max(0, ...filtered.map(row => row.costTotal)), [filtered]);
+
+	const columns = useMemo<Column<SessionSummary>[]>(
 		() => [
 			{
 				key: "title",
-				header: "Title",
-				render: (item: SessionSummary) => (
-					<div className="stats-font-medium stats-text-primary truncate" style={{ maxWidth: 280 }}>
-						{item.title ?? item.file.split("/").pop()}
-					</div>
-				),
-			},
-			{
-				key: "folder",
-				header: "Project",
-				render: (item: SessionSummary) => (
-					<span className="stats-text-muted truncate" style={{ maxWidth: 160, display: "inline-block" }}>
-						{item.folder.split("/").slice(-2).join("/")}
-					</span>
+				header: "Session",
+				width: "32%",
+				render: row => (
+					<LabelCell
+						primary={row.title ?? row.file.split("/").pop()}
+						secondary={<span className="mono">{row.folder.split("/").slice(-2).join("/")}</span>}
+					/>
 				),
+				sort: row => (row.title ?? row.file).toLowerCase(),
 			},
+			{ key: "models", header: "Models", render: row => <ModelList models={row.models} /> },
 			{
 				key: "started",
 				header: "Started",
-				render: (item: SessionSummary) => formatRelativeTime(item.startedAt),
+				align: "right",
+				render: row => (
+					<span className="muted" title={new Date(row.startedAt).toLocaleString()}>
+						{formatRelativeTime(row.startedAt)}
+					</span>
+				),
+				sort: row => row.startedAt,
 			},
 			{
 				key: "duration",
 				header: "Duration",
-				numeric: true,
-				render: (item: SessionSummary) => formatDurationMs(item.endedAt - item.startedAt),
+				align: "right",
+				render: row => <span className="num">{formatElapsed(row.endedAt - row.startedAt)}</span>,
+				sort: row => row.endedAt - row.startedAt,
+			},
+			{
+				key: "requests",
+				header: "Requests",
+				align: "right",
+				render: row => <span className="num">{formatInteger(row.requests)}</span>,
+				sort: row => row.requests,
+			},
+			{
+				key: "toolCalls",
+				header: "Tools",
+				align: "right",
+				render: row => <span className="num">{formatInteger(row.toolCalls)}</span>,
+				sort: row => row.toolCalls,
+			},
+			{
+				key: "subagents",
+				header: "Agents",
+				align: "right",
+				render: row =>
+					row.subagents > 0 ? (
+						<span className="num">{formatInteger(row.subagents)}</span>
+					) : (
+						<span className="num dim">0</span>
+					),
+				sort: row => row.subagents,
 			},
-			{ key: "requests", header: "Requests", numeric: true, render: (item: SessionSummary) => item.requests },
-			{ key: "toolCalls", header: "Tools", numeric: true, render: (item: SessionSummary) => item.toolCalls },
-			{ key: "subagents", header: "Agents", numeric: true, render: (item: SessionSummary) => item.subagents },
 			{
 				key: "tokens",
 				header: "Tokens",
-				numeric: true,
-				render: (item: SessionSummary) => formatCompact(item.totalTokens),
+				align: "right",
+				render: row => <span className="num">{formatCompact(row.totalTokens)}</span>,
+				sort: row => row.totalTokens,
 			},
 			{
 				key: "cost",
 				header: "Cost",
-				numeric: true,
-				render: (item: SessionSummary) => formatEstimatedCost(item.costTotal, item.unpricedRequests),
+				align: "right",
+				width: 150,
+				render: row => (
+					<MeterCell
+						value={row.costTotal}
+						max={maxCost}
+						display={formatEstimatedCost(row.costTotal, row.unpricedRequests)}
+					/>
+				),
+				sort: row => row.costTotal,
 			},
-			{ key: "models", header: "Models", render: (item: SessionSummary) => <ModelChips models={item.models} /> },
 		],
-		[],
-	);
-
-	const renderMobileCard = (item: SessionSummary, onClick?: () => void) => (
-		<div className="stats-mobile-card" onClick={onClick}>
-			<div className="stats-mobile-card-header">
-				<div className="stats-font-semibold stats-text-primary truncate">
-					{item.title ?? item.file.split("/").pop()}
-				</div>
-			</div>
-			<div className="stats-mobile-card-grid">
-				<div>
-					<div className="stats-mobile-card-label">Started</div>
-					<div className="stats-mobile-card-value">{formatRelativeTime(item.startedAt)}</div>
-				</div>
-				<div>
-					<div className="stats-mobile-card-label">Duration</div>
-					<div className="stats-mobile-card-value">{formatDurationMs(item.endedAt - item.startedAt)}</div>
-				</div>
-				<div>
-					<div className="stats-mobile-card-label">Requests</div>
-					<div className="stats-mobile-card-value">{item.requests}</div>
-				</div>
-				<div>
-					<div className="stats-mobile-card-label">Cost</div>
-					<div className="stats-mobile-card-value">
-						{formatEstimatedCost(item.costTotal, item.unpricedRequests)}
-					</div>
-				</div>
-			</div>
-		</div>
+		[maxCost],
 	);
 
 	if (session !== null) {
 		return <TraceView file={session} active={active} onBack={() => onOpenSession(null)} />;
 	}
 
+	const total = sessions.data?.length ?? 0;
 	return (
-		<div className="stats-route-container">
-			<Panel
+		<div className="stack traces-page">
+			<PageHeader
+				title="Traces"
+				description="Recent sessions with subagent activity folded in. Open one to inspect its timeline."
+			/>
+			<Card
 				title="Sessions"
-				subtitle="Recent sessions with subagent activity folded in — click one to open its trace"
+				description={
+					sessions.data
+						? filter.trim()
+							? `${formatInteger(filtered.length)} of ${formatInteger(total)} most recent`
+							: `${formatInteger(total)} most recent`
+						: undefined
+				}
 				actions={
-					<input
-						type="search"
+					<SearchInput
 						value={filter}
-						onChange={event => setFilter(event.target.value)}
+						onChange={setFilter}
 						placeholder="Filter by title, project, model…"
-						aria-label="Filter sessions"
-						spellCheck={false}
-						className="stats-trace-input"
-						style={{ width: 220 }}
+						width={260}
 					/>
 				}
+				flush
+				index={0}
+				stale={sessions.stale}
 			>
-				<AsyncBoundary loading={loading} error={error} data={sessions}>
-					<DataTable
-						columns={columns}
-						data={filtered}
-						keyExtractor={item => item.file}
-						onRowClick={item => onOpenSession(item.file)}
-						renderMobileCard={renderMobileCard}
-						emptyText="No sessions found — run a Sync to index recent activity"
-					/>
-				</AsyncBoundary>
-			</Panel>
+				<QueryView
+					query={sessions}
+					skeleton={<TableSkeleton rows={10} />}
+					isEmpty={rows => rows.length === 0}
+					empty={<EmptyState title="No sessions found" hint="Run a sync to index recent activity." />}
+				>
+					{() => (
+						<Table
+							columns={columns}
+							rows={filtered}
+							rowKey={row => row.file}
+							onRowClick={row => onOpenSession(row.file)}
+							initialSort={{ key: "started", dir: "desc" }}
+							limit={50}
+							empty={<EmptyState title="No matching sessions" hint="Try a different filter." />}
+						/>
+					)}
+				</QueryView>
+			</Card>
 		</div>
 	);
 }

package/src/client/routes/costs.css

@@ -0,0 +1,24 @@
+/* Costs page: component breakdown list. */
+
+.costs-components {
+	display: flex;
+	flex-direction: column;
+}
+
+.costs-component-row {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto 56px;
+	align-items: center;
+	gap: 12px;
+	padding: 7px 0;
+	border-bottom: 1px solid var(--line-1);
+}
+
+.costs-component-share {
+	text-align: right;
+}
+
+.costs-component-total {
+	border-bottom: 0;
+	font-weight: 500;
+}

package/src/client/routes/errors.css

@@ -0,0 +1,60 @@
+/* Errors page. */
+.errors-signature {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	font-family: var(--font-mono);
+	font-size: 12px;
+	line-height: 1.5;
+	color: var(--ink-1);
+	overflow-wrap: anywhere;
+}
+
+.errors-message {
+	display: block;
+	max-width: 520px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-family: var(--font-mono);
+	font-size: 12px;
+	color: var(--bad);
+}
+
+.errors-filter {
+	max-width: 260px;
+}
+
+.errors-filter .truncate {
+	min-width: 0;
+}
+
+.errors-detail {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 4px 16px 14px;
+	background: var(--hover);
+	border-bottom: 1px solid var(--line-1);
+}
+
+.errors-detail-message {
+	max-height: 200px;
+	color: var(--ink-1);
+}
+
+.errors-detail-meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	flex-wrap: wrap;
+	font-size: 12.5px;
+}
+
+.errors-detail-models {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}

package/src/client/routes/frustration.css

@@ -0,0 +1,123 @@
+.frustration-judge {
+	gap: 10px;
+	font-size: 13px;
+}
+
+.frustration-spacer {
+	flex: 1;
+}
+
+.frustration-progress {
+	gap: 8px;
+}
+
+.frustration-progress-head {
+	gap: 10px;
+}
+
+.frustration-progress-track {
+	height: 6px;
+	border-radius: 3px;
+}
+
+.frustration-progress-fill {
+	border-radius: 3px;
+	background: var(--accent-gradient);
+}
+
+.frustration-progress-meta {
+	flex-wrap: wrap;
+	gap: 4px 18px;
+}
+
+/* Cost quote headline in the confirm dialog. */
+.frustration-quote {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding: 12px 14px;
+	border: 1px solid var(--line-2);
+	border-radius: var(--r-control);
+	background: var(--hover);
+}
+
+.frustration-quote-value {
+	font-size: 22px;
+	font-weight: 600;
+	color: var(--ink-1);
+}
+
+.frustration-chart-body {
+	gap: 14px;
+}
+
+/* Many model classes: scroll sideways rather than wrap (the thumb tracks one row). */
+.frustration-classes {
+	overflow-x: auto;
+	scrollbar-width: none;
+}
+
+.frustration-filters {
+	flex-wrap: wrap;
+	align-items: flex-start;
+	gap: 8px 16px;
+}
+
+.frustration-filters .legend {
+	flex: 1 1 320px;
+}
+
+.frustration-key {
+	padding-top: 10px;
+	border-top: 1px solid var(--line-1);
+	color: var(--ink-3);
+}
+
+.frustration-key .frustration-key-wide {
+	max-width: none;
+}
+
+.frustration-key-swatch[data-variant="assistant"] {
+	background: var(--ink-2);
+}
+
+.frustration-key-swatch[data-variant="angry"] {
+	background: color-mix(in srgb, var(--ink-2) 55%, black);
+}
+
+.frustration-key-swatch[data-variant="other"] {
+	background: color-mix(in srgb, var(--ink-2) 32%, transparent);
+}
+
+.frustration-key-swatch[data-variant="hatch"] {
+	background: repeating-linear-gradient(
+		45deg,
+		var(--ink-2) 0 1.6px,
+		color-mix(in srgb, var(--ink-2) 14%, transparent) 1.6px 3.5px
+	);
+}
+
+.frustration-key-line {
+	width: 12px;
+	height: 2px;
+	border-radius: 1px;
+	background: var(--ink-1);
+}
+
+.frustration-chart-empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 340px;
+}
+
+.frustration-tooltip-extra {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.frustration-judged {
+	justify-content: flex-end;
+	gap: 6px;
+}

package/src/client/routes/index.ts

@@ -1,6 +1,6 @@
-export * from "./BehaviorRoute";
 export * from "./CostsRoute";
 export * from "./ErrorsRoute";
+export * from "./FrustrationRoute";
 export * from "./GainRoute";
 export * from "./ModelsRoute";
 export * from "./OverviewRoute";

package/src/client/routes/models.css

@@ -0,0 +1,43 @@
+/* Models page: expandable model rows. */
+
+.models-chevron {
+	display: inline-flex;
+	color: var(--ink-3);
+	transition: transform var(--dur-2) var(--ease);
+}
+
+.models-chevron[data-open="true"] {
+	transform: rotate(90deg);
+	color: var(--ink-1);
+}
+
+.models-detail {
+	display: grid;
+	grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
+	gap: 24px;
+	padding: 16px 16px 18px 44px;
+	background: var(--panel);
+	border-bottom: 1px solid var(--line-1);
+	animation: rise var(--dur-3) var(--ease-out) both;
+}
+
+.models-detail-facts {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	min-width: 0;
+}
+
+.models-detail-chart {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	min-width: 0;
+}
+
+@media (max-width: 1100px) {
+	.models-detail {
+		grid-template-columns: minmax(0, 1fr);
+		padding-left: 16px;
+	}
+}

package/src/client/routes/projects.css

@@ -0,0 +1,6 @@
+/* Long temp-dir names must not stretch the table. */
+.projects-folder {
+	gap: 8px;
+	max-width: 280px;
+	min-width: 0;
+}

package/src/client/routes/providers.css

@@ -0,0 +1,28 @@
+.providers-select {
+	max-width: 220px;
+}
+
+.providers-mix {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 12px 16px 14px;
+	background: var(--bg);
+	border-top: 1px solid var(--line-1);
+}
+
+/* Keeps account names aligned whether or not the row has a chart swatch. */
+.providers-swatch-slot {
+	display: inline-flex;
+	width: 10px;
+	flex: none;
+}
+
+.providers-account {
+	max-width: 280px;
+}
+
+.providers-accounts {
+	margin: 0 -16px -16px;
+	border-top: 1px solid var(--line-1);
+}

package/src/client/routes/tools.css

@@ -0,0 +1,14 @@
+.tools-filter {
+	width: 200px;
+}
+
+.tools-name {
+	max-width: 220px;
+}
+
+.tools-share {
+	display: inline-block;
+	min-width: 32px;
+	margin-left: 8px;
+	text-align: right;
+}