@linxiraos/pi-stats 1.1.13 → 1.1.15

package/src/client/components/chart-shared.tsx

@@ -1,5 +1,5 @@
 /**
- * Shared chart primitives for the dashboard timeline charts: the OMP color
+ * Shared chart primitives for the dashboard timeline charts: the Zeta color
  * palette, light/dark chart chrome, legend/tooltip + scale plumbing, dataset
  * styling, and the top-N-by-model / aggregate bucketing used by the cost and
  * behavior series.
@@ -7,17 +7,17 @@
 
 import { format } from "@linxiraos/pi-utils/dates";
 
-// OMP brand palette (packages/collab-web/src/styles/tokens.css): pink/purple/cyan.
-// Categorical series lead with the brand gradient hues (pink -> purple -> cyan).
+// Zeta palette (web-ui/lib/theme/themes/zeta-dark.json): neutral graphite lead
+// plus the zeta categorical chart colors. Mid-tone series read on both themes.
 export const MODEL_COLORS = [
-	"#ed4abf", // brand pink (accent)
-	"#9b4dff", // brand violet
-	"#5ad8e6", // brand cyan
-	"#62d394", // green
-	"#c77dff", // light purple
-	"#ff8fd1", // light pink
-	"#f5c14b", // amber
-	"#ff6b7d", // rose
+	"#9d9d9d", // zeta neutral (surface.mutedForeground)
+	"#f07178", // zeta red
+	"#e5c07b", // zeta amber
+	"#98c379", // zeta green
+	"#61afef", // zeta blue
+	"#c678dd", // zeta violet
+	"#d19a66", // zeta orange
+	"#56b6c2", // zeta cyan
 ];
 
 export function buildModelColorLookup(
@@ -38,22 +38,22 @@ export function buildModelColorLookup(
 
 export const CHART_THEMES = {
 	dark: {
-		legendLabel: "#a89fb3",
-		tooltipBackground: "#241a2e",
-		tooltipTitle: "#eae5ef",
-		tooltipBody: "#a89fb3",
+		legendLabel: "#9d9d9d",
+		tooltipBackground: "#232323",
+		tooltipTitle: "#f5f5f5",
+		tooltipBody: "#9d9d9d",
 		tooltipBorder: "rgba(255, 255, 255, 0.12)",
 		grid: "rgba(255, 255, 255, 0.06)",
-		tick: "#867a93",
+		tick: "#7a7a7a",
 	},
 	light: {
-		legendLabel: "#5a5462",
+		legendLabel: "#616161",
 		tooltipBackground: "#ffffff",
-		tooltipTitle: "#241a2e",
-		tooltipBody: "#5a5462",
-		tooltipBorder: "rgba(20, 12, 28, 0.15)",
-		grid: "rgba(20, 12, 28, 0.08)",
-		tick: "#6a6275",
+		tooltipTitle: "#1f1f1f",
+		tooltipBody: "#616161",
+		tooltipBorder: "rgba(0, 0, 0, 0.15)",
+		grid: "rgba(0, 0, 0, 0.08)",
+		tick: "#8c8c8c",
 	},
 } as const;
 

package/src/client/data/formatters.ts

@@ -23,10 +23,22 @@ export function formatEstimatedCost(value: number, unpricedRequests: number, dig
 	return value === 0 && unpricedRequests > 0 ? "N/A" : formatCost(value, digits);
 }
 
-/** Format one request's cost, distinguishing unpriced SuperGrok usage from free usage. */
-export function formatMessageCost(message: Pick<MessageStats, "provider" | "usage">, digits?: number): string {
+/**
+ * Format one request's cost, distinguishing unpriced usage from free usage.
+ * Mirrors the server's `unpricedRequestSql`: `xai-oauth` is billed through a
+ * subscription, and `costUnpriced` marks a row the ingest path could not price
+ * (a scheduled card with no recoverable request timestamp).
+ */
+export function formatMessageCost(
+	message: Pick<MessageStats, "provider" | "usage" | "costUnpriced">,
+	digits?: number,
+): string {
 	const unpricedRequests =
-		message.provider === "xai-oauth" && message.usage.totalTokens > 0 && message.usage.cost.total === 0 ? 1 : 0;
+		message.usage.totalTokens > 0 &&
+		message.usage.cost.total === 0 &&
+		(message.provider === "xai-oauth" || message.costUnpriced === true)
+			? 1
+			: 0;
 	return formatEstimatedCost(message.usage.cost.total, unpricedRequests, digits);
 }
 

package/src/client/routes/BehaviorRoute.tsx

@@ -416,37 +416,37 @@ function BehaviorModelsTable({
 											label="Yelling (CAPS)"
 											total={model.totalYelling}
 											messages={model.totalMessages}
-											valueClass="text-[#ed4abf]"
+											valueClass="text-[#f07178]"
 										/>
 										<DetailRow
 											label="Profanity"
 											total={model.totalProfanity}
 											messages={model.totalMessages}
-											valueClass="text-[#ff6b7d]"
+											valueClass="text-[#d19a66]"
 										/>
 										<DetailRow
 											label="Anguish (!!!, nooo, dude, ..)"
 											total={model.totalAnguish}
 											messages={model.totalMessages}
-											valueClass="text-[#9b4dff]"
+											valueClass="text-[#c678dd]"
 										/>
 										<DetailRow
 											label="Negation (no/nope/wrong)"
 											total={model.totalNegation}
 											messages={model.totalMessages}
-											valueClass="text-[#5ad8e6]"
+											valueClass="text-[#56b6c2]"
 										/>
 										<DetailRow
 											label="Repetition (i meant, still doesnt)"
 											total={model.totalRepetition}
 											messages={model.totalMessages}
-											valueClass="text-[#5ad8e6]"
+											valueClass="text-[#56b6c2]"
 										/>
 										<DetailRow
 											label="Blame (you didnt, stop X-ing)"
 											total={model.totalBlame}
 											messages={model.totalMessages}
-											valueClass="text-[#5ad8e6]"
+											valueClass="text-[#56b6c2]"
 										/>
 										<DetailRow
 											label="Avg chars / msg"
@@ -515,10 +515,10 @@ function DetailRow({
 }
 
 const SERIES_COLORS = {
-	yelling: "#ed4abf", // brand pink
-	profanity: "#ff6b7d", // rose
-	anguish: "#9b4dff", // brand violet
-	frustration: "#5ad8e6", // brand cyan
+	yelling: "#f07178", // zeta red
+	profanity: "#d19a66", // zeta orange
+	anguish: "#c678dd", // zeta violet
+	frustration: "#56b6c2", // zeta cyan
 } as const;
 
 function BreakdownChart({ data, chartTheme }: { data: DailyPoint[]; chartTheme: TableChartTheme }) {

package/src/client/routes/ModelsRoute.tsx

@@ -441,7 +441,7 @@ function PerformanceChart({
 				{
 					label: "TTFT",
 					data: data.map(d => d.avgTtftSeconds ?? null),
-					...lineSeriesStyle("#5ad8e6"),
+					...lineSeriesStyle("#61afef"),
 					yAxisID: "y" as const,
 				},
 				{

package/src/client/routes/OverviewRoute.tsx

@@ -53,8 +53,8 @@ export function OverviewRoute({ active, range, refreshTrigger, onRequestClick }:
 				{
 					label: "Requests",
 					data: overview.timeSeries.map(pt => pt.requests),
-					borderColor: "#5ad8e6",
-					backgroundColor: "rgba(90, 216, 230, 0.12)",
+					borderColor: "#61afef",
+					backgroundColor: "rgba(97, 175, 239, 0.12)",
 					tension: 0.2,
 					borderWidth: 2,
 					pointRadius,
@@ -64,8 +64,8 @@ export function OverviewRoute({ active, range, refreshTrigger, onRequestClick }:
 				{
 					label: "Errors",
 					data: overview.timeSeries.map(pt => pt.errors),
-					borderColor: "#ff6b7d",
-					backgroundColor: "rgba(255, 107, 125, 0.12)",
+					borderColor: "#f07178",
+					backgroundColor: "rgba(240, 113, 120, 0.12)",
 					tension: 0.2,
 					borderWidth: 2,
 					pointRadius,

package/src/client/routes/ProvidersRoute.tsx

@@ -396,9 +396,9 @@ function WindowInsightsPanel({ insights }: { insights: ProviderWindowInsight[] }
 // ---------------------------------------------------------------------------
 
 const UTILIZATION_COLORS = {
-	ok: "#62d394",
-	warning: "#f5c14b",
-	exhausted: "#ff6b7d",
+	ok: "#98c379",
+	warning: "#e5c07b",
+	exhausted: "#f07178",
 } as const;
 
 function WindowUtilizationPanel({ usageSeries }: { usageSeries: UsageWindowSeries[] }) {

package/src/client/routes/TracesRoute.tsx

@@ -5,7 +5,7 @@
 
 import { useMemo, useState } from "react";
 import { getSessions } from "../api";
-import { formatCompact, formatCost, formatDurationMs, formatRelativeTime } from "../data/formatters";
+import { formatCompact, formatDurationMs, formatEstimatedCost, formatRelativeTime } from "../data/formatters";
 import { useResource } from "../data/useResource";
 import { TraceView } from "../traces/TraceView";
 import type { SessionSummary } from "../types";
@@ -110,7 +110,12 @@ export function TracesRoute({ active, session, onOpenSession, refreshTrigger }:
 				numeric: true,
 				render: (item: SessionSummary) => formatCompact(item.totalTokens),
 			},
-			{ key: "cost", header: "Cost", numeric: true, render: (item: SessionSummary) => formatCost(item.costTotal) },
+			{
+				key: "cost",
+				header: "Cost",
+				numeric: true,
+				render: (item: SessionSummary) => formatEstimatedCost(item.costTotal, item.unpricedRequests),
+			},
 			{ key: "models", header: "Models", render: (item: SessionSummary) => <ModelChips models={item.models} /> },
 		],
 		[],
@@ -138,7 +143,9 @@ export function TracesRoute({ active, session, onOpenSession, refreshTrigger }:
 				</div>
 				<div>
 					<div className="stats-mobile-card-label">Cost</div>
-					<div className="stats-mobile-card-value">{formatCost(item.costTotal)}</div>
+					<div className="stats-mobile-card-value">
+						{formatEstimatedCost(item.costTotal, item.unpricedRequests)}
+					</div>
 				</div>
 			</div>
 		</div>

package/src/client/styles.css

@@ -1,29 +1,29 @@
 @import "tailwindcss/index.css";
 
 /* ==========================================================================
-   OMP Theme Variables & Color Scheme
+   Theme Variables & Color Scheme
    ========================================================================== */
 :root {
   color-scheme: dark;
-  /* OMP brand palette — packages/collab-web/src/styles/tokens.css:
-     deep-purple surfaces (hue 307), pink accent #ed4abf, cyan focus ring #5ad8e6. */
-  --page: oklch(0.16 0.02 307);
-  --surface: oklch(0.19 0.022 307);
-  --surface-2: oklch(0.235 0.026 307);
-  --border: oklch(1 0 0 / 9%);
-  --border-strong: oklch(1 0 0 / 13%);
-  --text: oklch(0.92 0.01 307);
-  --muted: oklch(0.71 0.016 307);
-  --dim: oklch(0.53 0.018 307);
-  --accent: oklch(0.674 0.23 341);          /* brand pink #ed4abf */
-  --accent-fg: oklch(0.2 0.07 341);         /* ink on accent fills */
-  --accent-muted: oklch(0.674 0.23 341 / 18%);
-  --link: oklch(0.817 0.112 205);           /* brand cyan #5ad8e6 */
-  --success: oklch(0.76 0.14 150);
-  --danger: oklch(0.66 0.19 25);
-  --warning: oklch(0.79 0.14 85);
-
-  /* Bridge the view components' token vocabulary to the OMP base tokens so
+  /* Zeta dark palette — web-ui/lib/theme/themes/zeta-dark.json:
+     neutral graphite surfaces, #EAEAEA accent, no blue accent. */
+  --page: #161616;
+  --surface: #1e1e1e;
+  --surface-2: #232323;
+  --border: #2e2e2e;
+  --border-strong: #3c3c3c;
+  --text: #f5f5f5;
+  --muted: #9d9d9d;
+  --dim: #6e6e6e;
+  --accent: #eaeaea;                        /* primary.base */
+  --accent-fg: #161616;                     /* primary.foreground — ink on accent fills */
+  --accent-muted: rgb(234 234 234 / 0.18);  /* primary.muted */
+  --link: #61afef;                          /* status.info */
+  --success: #98c379;                       /* status.success */
+  --danger: #f07178;                        /* status.error */
+  --warning: #e5c07b;                       /* status.warning */
+
+  /* Bridge the view components' token vocabulary to the Zeta base tokens so
      muted/secondary text and semantic accents resolve instead of silently
      falling back to inherited text color. Re-resolve per theme via var(). */
   --text-primary: var(--text);
@@ -47,44 +47,46 @@
 @media (prefers-color-scheme: light) {
   :root:not([data-theme]) {
     color-scheme: light;
-    --page: oklch(0.985 0.004 307);
-    --surface: oklch(1 0 0);
-    --surface-2: oklch(0.965 0.006 307);
-    --border: oklch(0 0 0 / 10%);
-    --border-strong: oklch(0 0 0 / 15%);
-    --text: oklch(0.26 0.03 307);
-    --muted: oklch(0.46 0.03 307);
-    --dim: oklch(0.58 0.025 307);
-    --accent: oklch(0.62 0.23 341);
-    --accent-fg: oklch(0.99 0.01 341);
-    --accent-muted: oklch(0.62 0.23 341 / 14%);
-    --link: oklch(0.58 0.13 230);
-    --success: oklch(0.55 0.13 150);
-    --danger: oklch(0.55 0.19 25);
+    /* Zeta light palette — web-ui/lib/theme/themes/zeta-light.json. */
+    --page: #fafafa;
+    --surface: #ffffff;
+    --surface-2: #f0f0f0;
+    --border: #e0e0e0;
+    --border-strong: #c8c8c8;
+    --text: #1f1f1f;
+    --muted: #616161;
+    --dim: #9e9e9e;
+    --accent: #1a1a1a;
+    --accent-fg: #fafafa;
+    --accent-muted: rgb(26 26 26 / 0.14);
+    --link: #4078c0;
+    --success: #50a14f;
+    --danger: #e45649;
     --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-    --warning: oklch(0.6 0.13 85);
+    --warning: #986801;
   }
 }
 
 /* Explicit theme override (toggle or persisted preference). */
 [data-theme="light"] {
   color-scheme: light;
-  --page: oklch(0.985 0.004 307);
-  --surface: oklch(1 0 0);
-  --surface-2: oklch(0.965 0.006 307);
-  --border: oklch(0 0 0 / 10%);
-  --border-strong: oklch(0 0 0 / 15%);
-  --text: oklch(0.26 0.03 307);
-  --muted: oklch(0.46 0.03 307);
-  --dim: oklch(0.58 0.025 307);
-  --accent: oklch(0.62 0.23 341);
-  --accent-fg: oklch(0.99 0.01 341);
-  --accent-muted: oklch(0.62 0.23 341 / 14%);
-  --link: oklch(0.58 0.13 230);
-  --success: oklch(0.55 0.13 150);
-  --danger: oklch(0.55 0.19 25);
+  /* Zeta light palette — web-ui/lib/theme/themes/zeta-light.json. */
+  --page: #fafafa;
+  --surface: #ffffff;
+  --surface-2: #f0f0f0;
+  --border: #e0e0e0;
+  --border-strong: #c8c8c8;
+  --text: #1f1f1f;
+  --muted: #616161;
+  --dim: #9e9e9e;
+  --accent: #1a1a1a;
+  --accent-fg: #fafafa;
+  --accent-muted: rgb(26 26 26 / 0.14);
+  --link: #4078c0;
+  --success: #50a14f;
+  --danger: #e45649;
   --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-  --warning: oklch(0.6 0.13 85);
+  --warning: #986801;
 }
 
 /* ==========================================================================
@@ -1293,7 +1295,7 @@
 }
 
 /* ==========================================================================
-   Brand mark on the OMP wordmark (both rail + mobile drawer headers)
+   Brand mark on the ZETA wordmark (both rail + mobile drawer headers)
    ========================================================================== */
 .stats-logo-container {
   display: grid;
@@ -1308,7 +1310,7 @@
   width: 16px;
   height: 16px;
   border-radius: 4px;
-  background: linear-gradient(135deg, #ed4abf 0%, #9b4dff 50%, #5ad8e6 100%); /* OMP brand gradient mark */
+  background: linear-gradient(135deg, #eaeaea 0%, #9d9d9d 50%, #3c3c3c 100%); /* Zeta graphite mark */
 }
 
 .stats-logo-text,

package/src/client/traces/SummaryStrip.tsx

@@ -3,7 +3,7 @@
  * tool calls, agents, tokens, cost.
  */
 
-import { formatCompact, formatCost, formatDurationMs, formatInteger } from "../data/formatters";
+import { formatCompact, formatDurationMs, formatEstimatedCost, formatInteger } from "../data/formatters";
 import type { TraceSummary } from "../types";
 
 export interface SummaryStripProps {
@@ -21,7 +21,7 @@ export function SummaryStrip({ summary }: SummaryStripProps) {
 		{ label: "Tool Calls", value: formatInteger(summary.toolCalls) },
 		{ label: "Agents", value: formatInteger(summary.subagents) },
 		{ label: "Tokens", value: formatCompact(summary.totalTokens) },
-		{ label: "Cost", value: formatCost(summary.costTotal) },
+		{ label: "Cost", value: formatEstimatedCost(summary.costTotal, summary.unpricedRequests) },
 	];
 
 	return (

package/src/client/traces/trace-colors.ts

@@ -23,7 +23,7 @@ export interface TraceTheme {
 	tick: string;
 	/** Span label text drawn inside blocks. */
 	spanText: string;
-	/** Selection outline (brand cyan focus ring). */
+	/** Selection outline (theme focus accent). */
 	selection: string;
 	tooltipBackground: string;
 	tooltipTitle: string;
@@ -45,12 +45,12 @@ export const TRACE_THEMES: Record<"dark" | "light", TraceTheme> = {
 		turnBand: "rgba(255, 255, 255, 0.035)",
 		surface: "transparent",
 		grid: "rgba(255, 255, 255, 0.06)",
-		tick: "#867a93",
-		spanText: "#16121c",
-		selection: "#5ad8e6",
-		tooltipBackground: "#241a2e",
-		tooltipTitle: "#eae5ef",
-		tooltipBody: "#a89fb3",
+		tick: "#7a7a7a",
+		spanText: "#161616",
+		selection: "#eaeaea",
+		tooltipBackground: "#232323",
+		tooltipTitle: "#f5f5f5",
+		tooltipBody: "#9d9d9d",
 		tooltipBorder: "rgba(255, 255, 255, 0.12)",
 	},
 	light: {
@@ -65,13 +65,13 @@ export const TRACE_THEMES: Record<"dark" | "light", TraceTheme> = {
 		marker: "#ca8a04",
 		turnBand: "rgba(0, 0, 0, 0.04)",
 		surface: "transparent",
-		grid: "rgba(20, 12, 28, 0.08)",
-		tick: "#6a6275",
+		grid: "rgba(0, 0, 0, 0.08)",
+		tick: "#8c8c8c",
 		spanText: "#ffffff",
-		selection: "#0e7490",
+		selection: "#1a1a1a",
 		tooltipBackground: "#ffffff",
-		tooltipTitle: "#241a2e",
-		tooltipBody: "#5a5462",
-		tooltipBorder: "rgba(20, 12, 28, 0.15)",
+		tooltipTitle: "#1f1f1f",
+		tooltipBody: "#616161",
+		tooltipBorder: "rgba(0, 0, 0, 0.15)",
 	},
 };

package/src/client/types.ts

@@ -54,6 +54,8 @@ export interface MessageStats {
 	stopReason: string;
 	errorMessage: string | null;
 	usage: Usage;
+	/** Ingest found no tariff to price this request from; its zero is unknown spend. */
+	costUnpriced?: boolean;
 }
 
 export interface RequestDetails extends MessageStats {