@oh-my-pi/omp-stats 17.0.5 → 17.0.7

package/dist/client/styles.css

@@ -1,10 +1,11 @@
-/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --spacing: 0.25rem;
@@ -40,7 +41,7 @@
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     font-feature-settings: var(--default-font-feature-settings, normal);
     font-variation-settings: var(--default-font-variation-settings, normal);
     -webkit-tap-highlight-color: transparent;
@@ -92,7 +93,7 @@
     border-color: inherit;
     border-collapse: collapse;
   }
-  :-moz-focusring {
+  :-moz-focusring:where(:not(iframe)) {
     outline: auto;
   }
   progress {
@@ -251,7 +252,7 @@
     max-width: 440px;
   }
   .min-w-0 {
-    min-width: 0;
+    min-width: 0px;
   }
   .flex-1 {
     flex: 1;
@@ -298,40 +299,30 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
-  .space-y-0\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  :where(.space-y-0\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
   }
-  .space-y-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
   }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
   }
-  .space-y-4 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  :where(.space-y-4 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
   }
-  .space-y-6 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
-    }
+  :where(.space-y-6 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
   .truncate {
     overflow: hidden;
@@ -466,30 +457,24 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .hover\:bg-\[var\(--bg-hover\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--bg-hover);
-      }
+  @media (hover: hover) {
+    .hover\:bg-\[var\(--bg-hover\)\]:hover {
+      background-color: var(--bg-hover);
     }
   }
-  .md\:grid-cols-3 {
-    @media (width >= 48rem) {
+  @media (width >= 48rem) {
+    .md\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-  }
-  .md\:grid-cols-6 {
-    @media (width >= 48rem) {
+    .md\:grid-cols-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
   }
-  .lg\:col-span-2 {
-    @media (width >= 64rem) {
+  @media (width >= 64rem) {
+    .lg\:col-span-2 {
       grid-column: span 2 / span 2;
     }
-  }
-  .lg\:grid-cols-3 {
-    @media (width >= 64rem) {
+    .lg\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
@@ -974,15 +959,15 @@
 }
 .stats-metric-secondary-grid {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(8, 1fr);
   gap: 12px;
 }
-@media (max-width: 1023px) {
+@media (max-width: 1279px) {
   .stats-metric-secondary-grid {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 }
-@media (max-width: 600px) {
+@media (max-width: 767px) {
   .stats-metric-secondary-grid {
     grid-template-columns: repeat(2, 1fr);
   }

package/dist/types/client/data/view-models.d.ts

@@ -1,4 +1,12 @@
 import type { AgentType, AgentTypeStats, BehaviorOverallStats, BehaviorTimeSeriesPoint, CostTimeSeriesPoint, FolderStats, ModelPerformancePoint, TimeRange, ToolUsageStats } from "../types.js";
+export interface ConversationTokenStats {
+    totalInputTokens: number;
+    totalOutputTokens: number;
+    totalCacheReadTokens: number;
+    totalCacheWriteTokens: number;
+}
+/** Sum every conversation-token bucket shown by the overview. */
+export declare function sumConversationTokens(stats: ConversationTokenStats): number;
 export interface AgentTokenSegment {
     agentType: AgentType;
     /** input + output + cache read + cache write — the displayed denominator. */
@@ -16,9 +24,8 @@ export interface AgentTokenShareView {
 /**
  * Build the "token usage by agent" breakdown: one segment per agent type that
  * appears in the data, ordered main -> subagents -> advisor, each carrying its
- * token total and share of the grand total. Token counts sum the same four
- * columns the overview renders (input + output + cache read + cache write) so a
- * segment's share never disagrees with the count beside it.
+ * token total and share of the grand total. Token counts use the same four
+ * conversation-token buckets as the overview total so the two views reconcile.
  */
 export declare function buildAgentTokenShare(stats: AgentTypeStats[]): AgentTokenShareView;
 export interface CostSummaryView {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/omp-stats",
-	"version": "17.0.5",
+	"version": "17.0.7",
 	"description": "Local observability dashboard for pi AI usage statistics",
 	"homepage": "https://omp.sh",
 	"author": "Can Boluk",
@@ -39,9 +39,9 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-ai": "17.0.5",
-		"@oh-my-pi/pi-catalog": "17.0.5",
-		"@oh-my-pi/pi-utils": "17.0.5",
+		"@oh-my-pi/pi-ai": "17.0.7",
+		"@oh-my-pi/pi-catalog": "17.0.7",
+		"@oh-my-pi/pi-utils": "17.0.7",
 		"@tailwindcss/node": "^4.3.2",
 		"chart.js": "^4.5.1",
 		"date-fns": "^4.4.0",

package/src/client/data/view-models.ts

@@ -14,6 +14,18 @@ import type {
 /** Fixed display order for the agent-token-share breakdown. */
 const AGENT_TYPE_ORDER: AgentType[] = ["main", "subagent", "advisor"];
 
+export interface ConversationTokenStats {
+	totalInputTokens: number;
+	totalOutputTokens: number;
+	totalCacheReadTokens: number;
+	totalCacheWriteTokens: number;
+}
+
+/** Sum every conversation-token bucket shown by the overview. */
+export function sumConversationTokens(stats: ConversationTokenStats): number {
+	return stats.totalInputTokens + stats.totalOutputTokens + stats.totalCacheReadTokens + stats.totalCacheWriteTokens;
+}
+
 export interface AgentTokenSegment {
 	agentType: AgentType;
 	/** input + output + cache read + cache write — the displayed denominator. */
@@ -33,25 +45,21 @@ export interface AgentTokenShareView {
 /**
  * Build the "token usage by agent" breakdown: one segment per agent type that
  * appears in the data, ordered main -> subagents -> advisor, each carrying its
- * token total and share of the grand total. Token counts sum the same four
- * columns the overview renders (input + output + cache read + cache write) so a
- * segment's share never disagrees with the count beside it.
+ * token total and share of the grand total. Token counts use the same four
+ * conversation-token buckets as the overview total so the two views reconcile.
  */
 export function buildAgentTokenShare(stats: AgentTypeStats[]): AgentTokenShareView {
 	const byType = new Map<AgentType, AgentTypeStats>();
 	for (const stat of stats) byType.set(stat.agentType, stat);
 
-	const tokensOf = (stat: AgentTypeStats) =>
-		stat.totalInputTokens + stat.totalOutputTokens + stat.totalCacheReadTokens + stat.totalCacheWriteTokens;
-
 	const present = AGENT_TYPE_ORDER.map(type => byType.get(type)).filter(
 		(stat): stat is AgentTypeStats => stat !== undefined,
 	);
-	const totalTokens = present.reduce((sum, stat) => sum + tokensOf(stat), 0);
+	const totalTokens = present.reduce((sum, stat) => sum + sumConversationTokens(stat), 0);
 	const totalCost = present.reduce((sum, stat) => sum + stat.totalCost, 0);
 
 	const segments = present.map(stat => {
-		const tokens = tokensOf(stat);
+		const tokens = sumConversationTokens(stat);
 		return {
 			agentType: stat.agentType,
 			tokens,

package/src/client/routes/OverviewRoute.tsx

@@ -226,8 +226,8 @@ export function OverviewRoute({ active, range, refreshTrigger, onRequestClick }:
 			</AsyncBoundary>
 
 			<Panel
-				title="Token Usage by Agent"
-				subtitle="Share of tokens across the main agent, task subagents, and the advisor"
+				title="Conversation Tokens by Agent"
+				subtitle="Uncached input + cache reads + cache writes + output, grouped by agent type"
 			>
 				<AsyncBoundary loading={overviewLoading} error={overviewError} data={overview}>
 					{overview && <AgentTokenShare stats={overview.byAgentType} />}

package/src/client/styles.css

@@ -581,17 +581,17 @@
 
 .stats-metric-secondary-grid {
   display: grid;
-  grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(8, 1fr);
   gap: 12px;
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 1279px) {
   .stats-metric-secondary-grid {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 767px) {
   .stats-metric-secondary-grid {
     grid-template-columns: repeat(2, 1fr);
   }

package/src/client/ui/MetricCluster.tsx

@@ -6,6 +6,7 @@ import {
 	formatPercent,
 	formatTokensPerSecond,
 } from "../data/formatters";
+import { sumConversationTokens } from "../data/view-models";
 import type { AggregatedStats } from "../types";
 
 export interface MetricClusterProps {
@@ -13,6 +14,8 @@ export interface MetricClusterProps {
 }
 
 export function MetricCluster({ stats }: MetricClusterProps) {
+	const conversationTokens = sumConversationTokens(stats);
+
 	return (
 		<div className="stats-metric-cluster">
 			<div className="stats-metric-primary-grid">
@@ -37,14 +40,22 @@ export function MetricCluster({ stats }: MetricClusterProps) {
 			</div>
 
 			<div className="stats-metric-secondary-grid">
-				<div className="stats-metric-card secondary">
-					<div className="stats-metric-label">Input Tokens</div>
+				<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>