feat(costs): add $/mTok trend line to cost chart with dual Y-axes

Extended CostTrendSchema and repository query to include promptTokens and completionTokens. Added second Y-axis to TrendChart displaying cost-per-million-tokens as orange line alongside existing cost area chart. Calculate $/mTok from total tokens when available, rendering null for zero-token entries.

Author: wgraham17

src/backend/repositories/CostRecordRepository.ts

@@ -306,6 +306,8 @@ export class CostRecordRepository implements Repository {
 			date: string;
 			totalCost: number;
 			count: number;
+			promptTokens: number;
+			completionTokens: number;
 		}>
 	> {
 		const dateExpr =
@@ -321,6 +323,8 @@ export class CostRecordRepository implements Repository {
 				dateExpr.as("date"),
 				eb.fn.sum<number>("cost_usd").as("total_cost"),
 				eb.fn.count<number>("id").as("count"),
+				eb.fn.sum<number>("prompt_tokens").as("prompt_tokens"),
+				eb.fn.sum<number>("completion_tokens").as("completion_tokens"),
 			])
 			.groupBy(dateExpr)
 			.orderBy(dateExpr, "asc");
@@ -333,6 +337,8 @@ export class CostRecordRepository implements Repository {
 			date: row.date,
 			totalCost: row.total_cost ?? 0,
 			count: row.count ?? 0,
+			promptTokens: row.prompt_tokens ?? 0,
+			completionTokens: row.completion_tokens ?? 0,
 		}));
 	}
 

src/features/costs/components/TrendChart.tsx

@@ -1,14 +1,15 @@
 /**
  * TrendChart - Cost over time
  *
- * Recharts LineChart displaying total cost (USD) per date.
- * Uses a single line with area fill for visual emphasis.
+ * Recharts LineChart displaying total cost (USD) and $/mTok per date.
+ * Uses dual Y-axes: left for cost, right for $/mTok.
  */
 
 import {
 	Area,
 	AreaChart,
 	CartesianGrid,
+	Line,
 	ResponsiveContainer,
 	Tooltip,
 	XAxis,
@@ -20,10 +21,17 @@ import { useCostStore } from "../store/costStore";
 export function TrendChart() {
 	const { data, loading, error } = useCostStore((s) => s.trends);
 
-	const chartData = (data ?? []).map((entry) => ({
-		date: entry.date,
-		cost: entry.totalCost,
-	}));
+	const chartData = (data ?? []).map((entry) => {
+		const totalTokens = entry.promptTokens + entry.completionTokens;
+		return {
+			date: entry.date,
+			cost: entry.totalCost,
+			costPerMTok:
+				totalTokens > 0
+					? Number(((entry.totalCost / totalTokens) * 1_000_000).toFixed(2))
+					: null,
+		};
+	});
 
 	return (
 		<Card>
@@ -42,17 +50,32 @@ export function TrendChart() {
 						<AreaChart data={chartData}>
 							<CartesianGrid strokeDasharray="3 3" />
 							<XAxis dataKey="date" />
-							<YAxis />
+							<YAxis yAxisId="cost" />
+							<YAxis yAxisId="rate" orientation="right" />
 							<Tooltip
-								formatter={(value) => [`$${Number(value).toFixed(2)}`, "Cost"]}
+								formatter={(value, name) => {
+									if (name === "cost")
+										return [`$${Number(value).toFixed(2)}`, "Cost"];
+									return [`$${Number(value).toFixed(2)}`, "$/mTok"];
+								}}
 							/>
 							<Area
+								yAxisId="cost"
 								type="monotone"
 								dataKey="cost"
 								stroke="#6366f1"
 								fill="#6366f1"
 								fillOpacity={0.2}
 							/>
+							<Line
+								yAxisId="rate"
+								type="monotone"
+								dataKey="costPerMTok"
+								stroke="#f59e0b"
+								strokeWidth={2}
+								dot={false}
+								connectNulls
+							/>
 						</AreaChart>
 					</ResponsiveContainer>
 				)}

src/shared/schemas/costs.ts

@@ -62,6 +62,8 @@ export const CostTrendSchema = z.array(
 		date: z.string(),
 		totalCost: z.number(),
 		count: z.number(),
+		promptTokens: z.number(),
+		completionTokens: z.number(),
 	}),
 );
 export type CostTrend = z.infer<typeof CostTrendSchema>;