@linxiraos/pi-stats 1.0.9 → 1.1.0

package/src/client/routes/CostsRoute.tsx

@@ -13,7 +13,7 @@ import {
 	MODEL_COLORS,
 	styleDatasets,
 } from "../components/chart-shared";
-import { formatCost } from "../data/formatters";
+import { formatCost, formatEstimatedCost } from "../data/formatters";
 import { useResource } from "../data/useResource";
 import { buildCostSummary } from "../data/view-models";
 import type { CostTimeSeriesPoint, TimeRange } from "../types";
@@ -54,12 +54,22 @@ function CostOverviewPanel({ costSeries }: { costSeries: CostTimeSeriesPoint[] }
 	const summary = useMemo(() => buildCostSummary(costSeries), [costSeries]);
 
 	const cards = [
-		{ label: "Total Cost", value: formatCost(summary.totalCost) },
-		{ label: "Average / Day", value: formatCost(summary.avgDailyCost) },
+		{
+			label: "API-equivalent estimate",
+			value: formatEstimatedCost(summary.totalCost, summary.unpricedRequests),
+			sub:
+				summary.unpricedRequests > 0
+					? `Excludes ${summary.unpricedRequests.toLocaleString()} unpriced subscription request${summary.unpricedRequests === 1 ? "" : "s"}`
+					: undefined,
+		},
+		{
+			label: "Average estimate / Day",
+			value: formatEstimatedCost(summary.avgDailyCost, summary.unpricedRequests),
+		},
 		{
 			label: "Top Model",
 			value: summary.topModelName || "—",
-			sub: summary.topModelName ? formatCost(summary.topModelCost) : undefined,
+			sub: summary.topModelName ? `API-equivalent estimate: ${formatCost(summary.topModelCost)}` : undefined,
 		},
 	];
 
@@ -71,7 +81,7 @@ function CostOverviewPanel({ costSeries }: { costSeries: CostTimeSeriesPoint[] }
 					<p className="text-2xl font-bold stats-text-primary truncate" title={card.value}>
 						{card.value}
 					</p>
-					{card.sub && <p className="text-xs stats-text-muted mt-1 font-medium">Total spent: {card.sub}</p>}
+					{card.sub && <p className="text-xs stats-text-muted mt-1 font-medium">{card.sub}</p>}
 				</Panel>
 			))}
 		</div>
@@ -118,6 +128,10 @@ function CostTrendPanel({ costSeries }: { costSeries: CostTimeSeriesPoint[] }) {
 	const [byModel, setByModel] = useState(false);
 	const theme = useSystemTheme();
 	const chartTheme = CHART_THEMES[theme];
+	const unpricedRequests = useMemo(
+		() => costSeries.reduce((sum, point) => sum + point.unpricedRequests, 0),
+		[costSeries],
+	);
 
 	const chartData = useMemo(() => {
 		if (byModel) {
@@ -130,7 +144,7 @@ function CostTrendPanel({ costSeries }: { costSeries: CostTimeSeriesPoint[] }) {
 				bucketToValue: bucket => bucket.total,
 			});
 		}
-		return buildAggregateTimeSeries<CostTimeSeriesPoint, { total: number }>(costSeries, "Cost", {
+		return buildAggregateTimeSeries<CostTimeSeriesPoint, { total: number }>(costSeries, "API-equivalent estimate", {
 			initBucket: () => ({ total: 0 }),
 			accumulate: (bucket, point) => {
 				bucket.total += point.cost;
@@ -143,7 +157,7 @@ function CostTrendPanel({ costSeries }: { costSeries: CostTimeSeriesPoint[] }) {
 		return buildSharedPlugins({
 			chartTheme,
 			showLegend: byModel,
-			defaultLabel: "Cost",
+			defaultLabel: "API-equivalent estimate",
 			formatValue: v => `$${v.toFixed(2)}`,
 			footer: items => {
 				if (!byModel || items.length < 2) return undefined;
@@ -214,14 +228,18 @@ function CostTrendPanel({ costSeries }: { costSeries: CostTimeSeriesPoint[] }) {
 
 	return (
 		<Panel
-			title="Daily Cost"
-			subtitle="API spending over time"
+			title="Daily API-equivalent estimate"
+			subtitle={
+				unpricedRequests > 0
+					? `Public API rate-card value over time; excludes ${unpricedRequests.toLocaleString()} unpriced subscription request${unpricedRequests === 1 ? "" : "s"}`
+					: "Public API rate-card value over time"
+			}
 			actions={<SegmentedControl options={toggleOptions} value={byModel} onChange={setByModel} />}
 		>
 			<div className="h-[300px]">
 				{chartData.labels.length === 0 ? (
 					<div className="h-full flex items-center justify-center text-stats-muted text-sm">
-						No cost data available
+						No API-equivalent estimate data available
 					</div>
 				) : byModel && lineData ? (
 					<Line data={lineData} options={lineOptions} />

package/src/client/routes/ErrorsRoute.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { getRecentErrors } from "../api";
-import { formatCost, formatInteger, formatRelativeTime } from "../data/formatters";
+import { formatInteger, formatMessageCost, formatRelativeTime } from "../data/formatters";
 import { useResource } from "../data/useResource";
 import type { MessageStats, TimeRange } from "../types";
 import { AsyncBoundary, DataTable, Panel, StatusPill } from "../ui";
@@ -59,9 +59,9 @@ export function ErrorsRoute({ active, range, refreshTrigger, onRequestClick }: E
 			},
 			{
 				key: "cost",
-				header: "Cost",
+				header: "API-equivalent estimate",
 				numeric: true,
-				render: (item: MessageStats) => formatCost(item.usage.cost.total, 4),
+				render: (item: MessageStats) => formatMessageCost(item, 4),
 			},
 		],
 		[],
@@ -82,8 +82,8 @@ export function ErrorsRoute({ active, range, refreshTrigger, onRequestClick }: E
 					<div className="stats-mobile-card-value">{formatRelativeTime(item.timestamp)}</div>
 				</div>
 				<div>
-					<div className="stats-mobile-card-label">Cost</div>
-					<div className="stats-mobile-card-value">{formatCost(item.usage.cost.total, 4)}</div>
+					<div className="stats-mobile-card-label">API-equivalent estimate</div>
+					<div className="stats-mobile-card-value">{formatMessageCost(item, 4)}</div>
 				</div>
 				<div>
 					<div className="stats-mobile-card-label">Tokens</div>

package/src/client/routes/ModelsRoute.tsx

@@ -18,6 +18,7 @@ import {
 	TrendEmpty,
 } from "../components/models-table-shared";
 import { formatRangeTick, rangeMeta } from "../components/range-meta";
+import { formatEstimatedCost } from "../data/formatters";
 import { useResource } from "../data/useResource";
 import { buildModelPerformanceLookup } from "../data/view-models";
 import type { ModelPerformancePoint, ModelStats, ModelTimeSeriesPoint, TimeRange } from "../types";
@@ -266,7 +267,7 @@ function ModelsTable({
 				columns={[
 					{ label: "Model" },
 					{ label: "Requests", align: "right" },
-					{ label: "Cost", align: "right" },
+					{ label: "API-equivalent estimate", align: "right" },
 					{ label: "Tokens", align: "right" },
 					{ label: "Tokens/s", align: "right" },
 					{ label: "TTFT", align: "right" },
@@ -295,7 +296,7 @@ function ModelsTable({
 									{model.totalRequests.toLocaleString()}
 								</div>,
 								<div key="cost" className="text-right text-[var(--text-secondary)] font-mono text-sm">
-									${model.totalCost.toFixed(2)}
+									{formatEstimatedCost(model.totalCost, model.unpricedRequests)}
 								</div>,
 								<div key="tokens" className="text-right text-[var(--text-secondary)] font-mono text-sm">
 									{(model.totalInputTokens + model.totalOutputTokens).toLocaleString()}

package/src/client/routes/OverviewRoute.tsx

@@ -4,7 +4,7 @@ import { Line } from "react-chartjs-2";
 import { getOverviewStats, getRecentRequests } from "../api";
 import { AgentTokenShare } from "../components/AgentTokenShare";
 import { CHART_THEMES } from "../components/chart-shared";
-import { formatCost, formatDurationMs, formatInteger, formatRelativeTime } from "../data/formatters";
+import { formatDurationMs, formatInteger, formatMessageCost, formatRelativeTime } from "../data/formatters";
 import { useResource } from "../data/useResource";
 import type { MessageStats, TimeRange } from "../types";
 import { AsyncBoundary, DataTable, MetricCluster, Panel, Skeleton, StatusPill } from "../ui";
@@ -157,9 +157,9 @@ export function OverviewRoute({ active, range, refreshTrigger, onRequestClick }:
 			},
 			{
 				key: "cost",
-				header: "Cost",
+				header: "API-equivalent estimate",
 				numeric: true,
-				render: (item: MessageStats) => formatCost(item.usage.cost.total, 4),
+				render: (item: MessageStats) => formatMessageCost(item, 4),
 			},
 			{
 				key: "duration",
@@ -198,8 +198,8 @@ export function OverviewRoute({ active, range, refreshTrigger, onRequestClick }:
 					<div className="stats-mobile-card-value">{formatRelativeTime(item.timestamp)}</div>
 				</div>
 				<div>
-					<div className="stats-mobile-card-label">Cost</div>
-					<div className="stats-mobile-card-value">{formatCost(item.usage.cost.total, 4)}</div>
+					<div className="stats-mobile-card-label">API-equivalent estimate</div>
+					<div className="stats-mobile-card-value">{formatMessageCost(item, 4)}</div>
 				</div>
 				<div>
 					<div className="stats-mobile-card-label">Tokens</div>
@@ -298,7 +298,7 @@ export function OverviewRoute({ active, range, refreshTrigger, onRequestClick }:
 													<div>{req.provider}</div>
 													<div>
 														{req.duration ? formatDurationMs(req.duration) : ""}{" "}
-														{req.usage?.cost?.total ? `· ${formatCost(req.usage.cost.total, 4)}` : ""}
+														{req.usage.totalTokens > 0 ? `· ${formatMessageCost(req, 4)}` : ""}
 													</div>
 												</div>
 												{isError && (

package/src/client/routes/ProjectsRoute.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { getFolderStats } from "../api";
-import { formatCost, formatDurationMs, formatInteger, formatPercent } from "../data/formatters";
+import { formatDurationMs, formatEstimatedCost, formatInteger, formatPercent } from "../data/formatters";
 import { useResource } from "../data/useResource";
 import { buildFolderRows, type FolderRowView } from "../data/view-models";
 import type { TimeRange } from "../types";
@@ -60,11 +60,11 @@ export function ProjectsRoute({ active, range, refreshTrigger }: ProjectsRoutePr
 			},
 			{
 				key: "totalCost",
-				header: "Cost",
+				header: "API-equivalent estimate",
 				numeric: true,
 				render: (item: FolderRowView) => (
 					<div className="stats-text-right">
-						<div className="font-mono">{formatCost(item.totalCost)}</div>
+						<div className="font-mono">{formatEstimatedCost(item.totalCost, item.unpricedRequests)}</div>
 						<div className="stats-progress-bar-track mt-1 ml-auto w-24 h-1">
 							<div
 								className="stats-progress-bar-fill"
@@ -133,8 +133,10 @@ export function ProjectsRoute({ active, range, refreshTrigger }: ProjectsRoutePr
 					<div className="stats-mobile-card-value font-mono">{formatInteger(item.totalRequests)}</div>
 				</div>
 				<div>
-					<div className="stats-mobile-card-label">Cost</div>
-					<div className="stats-mobile-card-value font-mono">{formatCost(item.totalCost)}</div>
+					<div className="stats-mobile-card-label">API-equivalent estimate</div>
+					<div className="stats-mobile-card-value font-mono">
+						{formatEstimatedCost(item.totalCost, item.unpricedRequests)}
+					</div>
 				</div>
 				<div>
 					<div className="stats-mobile-card-label">Cache Rate</div>

package/src/client/routes/ProvidersRoute.tsx

@@ -13,6 +13,7 @@ import {
 import {
 	formatCompact,
 	formatCost,
+	formatEstimatedCost,
 	formatInteger,
 	formatPercent,
 	formatRelativeTime,
@@ -69,6 +70,10 @@ export function ProvidersRoute({ active, range, refreshTrigger }: ProvidersRoute
 
 function ProviderTotalsPanel({ providers }: { providers: ProviderAggregate[] }) {
 	const grandTotal = useMemo(() => providers.reduce((sum, p) => sum + p.totalTokens, 0), [providers]);
+	const unpricedRequests = useMemo(
+		() => providers.reduce((sum, provider) => sum + provider.unpricedRequests, 0),
+		[providers],
+	);
 
 	const columns: DataTableColumn<ProviderAggregate>[] = [
 		{ key: "provider", header: "Provider", render: p => <span className="font-medium">{p.provider}</span> },
@@ -98,12 +103,24 @@ function ProviderTotalsPanel({ providers }: { providers: ProviderAggregate[] })
 			numeric: true,
 			render: p => formatPercent(grandTotal > 0 ? p.totalTokens / grandTotal : 0),
 		},
-		{ key: "cost", header: "Cost", numeric: true, render: p => formatCost(p.totalCost) },
+		{
+			key: "cost",
+			header: "API-equivalent estimate",
+			numeric: true,
+			render: provider => formatEstimatedCost(provider.totalCost, provider.unpricedRequests),
+		},
 		{ key: "tps", header: "Tok/s", numeric: true, render: p => formatTokensPerSecond(p.avgTokensPerSecond) },
 	];
 
 	return (
-		<Panel title="Provider Totals" subtitle="Token, request, and cost totals per provider over the active range">
+		<Panel
+			title="Provider Totals"
+			subtitle={
+				unpricedRequests > 0
+					? `Token, request, and API-equivalent estimates; excludes ${unpricedRequests.toLocaleString()} unpriced subscription request${unpricedRequests === 1 ? "" : "s"}`
+					: "Token, request, and API-equivalent estimates over the active range"
+			}
+		>
 			<DataTable
 				columns={columns}
 				data={providers}
@@ -122,6 +139,10 @@ function ProviderTrendPanel({ stats }: { stats: ProviderDashboardStats }) {
 	const [metric, setMetric] = useState<"tokens" | "cost">("tokens");
 	const theme = useSystemTheme();
 	const chartTheme = CHART_THEMES[theme];
+	const unpricedRequests = useMemo(
+		() => stats.providers.reduce((sum, provider) => sum + provider.unpricedRequests, 0),
+		[stats.providers],
+	);
 
 	// buildTopNByModelSeries keys on `model`; feed it the provider name so we
 	// get the same top-N + "Other" rollup without a parallel implementation.
@@ -148,7 +169,7 @@ function ProviderTrendPanel({ stats }: { stats: ProviderDashboardStats }) {
 			plugins: buildSharedPlugins({
 				chartTheme,
 				showLegend: true,
-				defaultLabel: metric === "tokens" ? "Tokens" : "Cost",
+				defaultLabel: metric === "tokens" ? "Tokens" : "API-equivalent estimate",
 				formatValue,
 				footer: items => {
 					if (items.length < 2) return undefined;
@@ -174,12 +195,16 @@ function ProviderTrendPanel({ stats }: { stats: ProviderDashboardStats }) {
 	return (
 		<Panel
 			title="Burn by Provider"
-			subtitle="Stacked token/cost burn per provider over time"
+			subtitle={
+				metric === "cost" && unpricedRequests > 0
+					? `API-equivalent estimates over time; excludes ${unpricedRequests.toLocaleString()} unpriced subscription request${unpricedRequests === 1 ? "" : "s"}`
+					: "Stacked token or API-equivalent estimate burn over time"
+			}
 			actions={
 				<SegmentedControl
 					options={[
 						{ value: "tokens" as const, label: "Tokens" },
-						{ value: "cost" as const, label: "Cost" },
+						{ value: "cost" as const, label: "API-equivalent estimate" },
 					]}
 					value={metric}
 					onChange={setMetric}

package/src/client/routes/RequestsRoute.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { getRecentRequests } from "../api";
-import { formatCost, formatDurationMs, formatInteger, formatRelativeTime } from "../data/formatters";
+import { formatDurationMs, formatInteger, formatMessageCost, formatRelativeTime } from "../data/formatters";
 import { useResource } from "../data/useResource";
 import type { MessageStats, TimeRange } from "../types";
 import { AsyncBoundary, DataTable, Panel, StatusPill } from "../ui";
@@ -47,9 +47,9 @@ export function RequestsRoute({ active, refreshTrigger, onRequestClick }: Reques
 			},
 			{
 				key: "cost",
-				header: "Cost",
+				header: "API-equivalent estimate",
 				numeric: true,
-				render: (item: MessageStats) => formatCost(item.usage.cost.total, 4),
+				render: (item: MessageStats) => formatMessageCost(item, 4),
 			},
 			{
 				key: "duration",
@@ -88,8 +88,8 @@ export function RequestsRoute({ active, refreshTrigger, onRequestClick }: Reques
 					<div className="stats-mobile-card-value">{formatRelativeTime(item.timestamp)}</div>
 				</div>
 				<div>
-					<div className="stats-mobile-card-label">Cost</div>
-					<div className="stats-mobile-card-value">{formatCost(item.usage.cost.total, 4)}</div>
+					<div className="stats-mobile-card-label">API-equivalent estimate</div>
+					<div className="stats-mobile-card-value">{formatMessageCost(item, 4)}</div>
 				</div>
 				<div>
 					<div className="stats-mobile-card-label">Tokens</div>

package/src/client/routes/ToolsRoute.tsx

@@ -3,7 +3,13 @@ import { Line } from "react-chartjs-2";
 import { getToolDashboardStats } from "../api";
 import { CHART_THEMES, MODEL_COLORS } from "../components/chart-shared";
 import { formatRangeTick, rangeMeta } from "../components/range-meta";
-import { formatCompact, formatCost, formatInteger, formatPercent, formatRelativeTime } from "../data/formatters";
+import {
+	formatCompact,
+	formatEstimatedCost,
+	formatInteger,
+	formatPercent,
+	formatRelativeTime,
+} from "../data/formatters";
 import { useResource } from "../data/useResource";
 import { buildToolRows, type ToolRowView } from "../data/view-models";
 import type { TimeRange, ToolModelStats, ToolTimeSeriesPoint, ToolUsageStats } from "../types";
@@ -53,6 +59,7 @@ function ToolsSummaryPanel({ byTool }: { byTool: ToolUsageStats[] }) {
 		let tokens = 0;
 		let output = 0;
 		let cost = 0;
+		let unpricedRequests = 0;
 		let resultChars = 0;
 		let argsChars = 0;
 		for (const t of byTool) {
@@ -61,16 +68,17 @@ function ToolsSummaryPanel({ byTool }: { byTool: ToolUsageStats[] }) {
 			tokens += t.totalTokensShare;
 			output += t.outputTokensShare;
 			cost += t.costShare;
+			unpricedRequests += t.unpricedRequestsShare;
 			resultChars += t.resultChars;
 			argsChars += t.argsChars;
 		}
-		return { calls, errors, tokens, output, cost, resultChars, argsChars, tools: byTool.length };
+		return { calls, errors, tokens, output, cost, unpricedRequests, resultChars, argsChars, tools: byTool.length };
 	}, [byTool]);
 
 	return (
 		<Panel
 			title="Tool Usage"
-			subtitle="Tokens/cost are the invoking turns' real provider usage, split across each turn's tool calls"
+			subtitle="Tokens and API-equivalent estimates are split from invoking turns across each turn's tool calls"
 		>
 			<div className="stats-metric-cluster">
 				<div className="stats-metric-primary-grid">
@@ -89,8 +97,8 @@ function ToolsSummaryPanel({ byTool }: { byTool: ToolUsageStats[] }) {
 						</div>
 					</div>
 					<div className="stats-metric-card primary">
-						<div className="stats-metric-label">Attributed Cost</div>
-						<div className="stats-metric-value">{formatCost(totals.cost)}</div>
+						<div className="stats-metric-label">Attributed API-equivalent estimate</div>
+						<div className="stats-metric-value">{formatEstimatedCost(totals.cost, totals.unpricedRequests)}</div>
 					</div>
 				</div>
 
@@ -292,9 +300,11 @@ function ToolsTable({ byTool }: { byTool: ToolUsageStats[] }) {
 			},
 			{
 				key: "cost",
-				header: "Attr. Cost",
+				header: "Attr. API-equivalent estimate",
 				numeric: true,
-				render: (item: ToolRowView) => <span className="font-mono">{formatCost(item.costShare)}</span>,
+				render: (item: ToolRowView) => (
+					<span className="font-mono">{formatEstimatedCost(item.costShare, item.unpricedRequestsShare)}</span>
+				),
 			},
 			{
 				key: "resultChars",
@@ -336,8 +346,10 @@ function ToolsTable({ byTool }: { byTool: ToolUsageStats[] }) {
 					</div>
 				</div>
 				<div>
-					<div className="stats-mobile-card-label">Attr. Cost</div>
-					<div className="stats-mobile-card-value font-mono">{formatCost(item.costShare)}</div>
+					<div className="stats-mobile-card-label">Attr. API-equivalent estimate</div>
+					<div className="stats-mobile-card-value font-mono">
+						{formatEstimatedCost(item.costShare, item.unpricedRequestsShare)}
+					</div>
 				</div>
 				<div>
 					<div className="stats-mobile-card-label">Result Text</div>
@@ -422,10 +434,10 @@ function ToolModelPanel({ byToolModel }: { byToolModel: ToolModelStats[] }) {
 			},
 			{
 				key: "cost",
-				header: "Attr. Cost",
+				header: "Attr. API-equivalent estimate",
 				numeric: true,
 				render: (item: ToolModelStats & { errorRate: number }) => (
-					<span className="font-mono">{formatCost(item.costShare)}</span>
+					<span className="font-mono">{formatEstimatedCost(item.costShare, item.unpricedRequestsShare)}</span>
 				),
 			},
 		],

package/src/client/ui/MetricCluster.tsx

@@ -1,7 +1,7 @@
 import {
 	formatCompact,
-	formatCost,
 	formatDurationMs,
+	formatEstimatedCost,
 	formatInteger,
 	formatPercent,
 	formatTokensPerSecond,
@@ -20,9 +20,13 @@ export function MetricCluster({ stats }: MetricClusterProps) {
 		<div className="stats-metric-cluster">
 			<div className="stats-metric-primary-grid">
 				<div className="stats-metric-card primary">
-					<div className="stats-metric-label">Total Cost</div>
+					<div className="stats-metric-label">API-equivalent estimate</div>
 					<div className="stats-metric-value">
-						{formatCost(stats.totalCost, stats.totalCost > 0 && stats.totalCost < 0.01 ? 4 : 2)}
+						{formatEstimatedCost(
+							stats.totalCost,
+							stats.unpricedRequests,
+							stats.totalCost > 0 && stats.totalCost < 0.01 ? 4 : 2,
+						)}
 					</div>
 				</div>
 				<div className="stats-metric-card primary">

package/src/client/ui/RequestDrawer.tsx

@@ -1,7 +1,7 @@
 import { Clock, Coins, Gauge, Hash, Star, X, Zap } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { getRequestDetails } from "../api";
-import { formatCost, formatDurationMs, formatInteger } from "../data/formatters";
+import { formatDurationMs, formatInteger, formatMessageCost } from "../data/formatters";
 import type { RequestDetails } from "../types";
 import { JsonBlock } from "./JsonBlock";
 import { Skeleton } from "./Skeleton";
@@ -138,9 +138,9 @@ export function RequestDrawer({ id, onClose }: RequestDrawerProps) {
 								<div className="stats-drawer-metric-card">
 									<div className="stats-drawer-metric-label">
 										<Coins size={14} className="stats-drawer-metric-icon" />
-										Cost
+										API-equivalent estimate
 									</div>
-									<div className="stats-drawer-metric-value">{formatCost(details.usage.cost.total, 4)}</div>
+									<div className="stats-drawer-metric-value">{formatMessageCost(details, 4)}</div>
 								</div>
 
 								<div className="stats-drawer-metric-card">