feat(api,spa): model price reference page

Add a read-only reference of every priced model and its list rate (USD
per 1M tokens), backed by the existing model_prices table — no schema
change. GET /api/prices returns the rows + max(updated_at) ("last
fetched"). New SPA /prices page: searchable table (Input/Output/Cache
read/Cache write per 1M tokens), last-fetched timestamp, and a nav link
from /me. $0 rates render as "—" (free / flat-rate subscription).

- db.ts fetchModelPrices(); prices/routes.ts mounted at /api
- 2 new integration tests (seeded rows + updatedAt; auth required)

Author: viloforge

packages/api/src/server/app.test.ts

@@ -34,6 +34,9 @@ function makeFakeDb(): Db {
 		async fetchSessions() {
 			return [];
 		},
+		async fetchModelPrices() {
+			return { updatedAt: null, items: [] };
+		},
 		async close() {},
 	};
 }

packages/api/src/server/app.ts

@@ -26,6 +26,7 @@ import type { Verifier } from "./auth/idp.js";
 import type { Db } from "./db.js";
 import { ingestRoutes } from "./ingest/routes.js";
 import { meRoutes } from "./me/routes.js";
+import { pricesRoutes } from "./prices/routes.js";
 
 export interface AppDeps {
 	readonly publicUrl: string;
@@ -68,6 +69,7 @@ export function createApp(deps: AppDeps): Express {
 
 	app.use(ingestRoutes({ db: deps.db, verifier: deps.verifier }));
 	app.use("/api", meRoutes({ db: deps.db, verifier: deps.verifier }));
+	app.use("/api", pricesRoutes({ db: deps.db, verifier: deps.verifier }));
 
 	if (existsSync(SPA_DIR)) {
 		// SPA bundle is present — serve it. Static assets first; any

packages/api/src/server/auth/middleware.test.ts

@@ -45,6 +45,9 @@ function makeDb(opts: { failUpsert?: boolean } = {}): RecordingDb {
 		async fetchSessions() {
 			return [];
 		},
+		async fetchModelPrices() {
+			return { updatedAt: null, items: [] };
+		},
 		async close() {},
 	};
 }

packages/api/src/server/db.ts

@@ -48,9 +48,30 @@ export interface Db {
 	 * `?cursor=` query param (or null for the first page).
 	 */
 	fetchSessions(input: FetchSessionsInput): Promise<SessionRow[]>;
+	/**
+	 * The model_prices reference table: every priced model with its list
+	 * rate (USD per 1,000,000 tokens), plus the most recent `updated_at`
+	 * across the table (when the prices were last synced). Ordered by model.
+	 */
+	fetchModelPrices(): Promise<ModelPrices>;
 	close(): Promise<void>;
 }
 
+export interface ModelPrice {
+	readonly model: string;
+	readonly inputPerMtok: number;
+	readonly outputPerMtok: number;
+	readonly cacheReadPerMtok: number;
+	readonly cacheWritePerMtok: number;
+	readonly source: string;
+}
+
+export interface ModelPrices {
+	/** Max(updated_at) across the table as ISO 8601, or null if empty. */
+	readonly updatedAt: string | null;
+	readonly items: readonly ModelPrice[];
+}
+
 export interface UsageTotals {
 	/** Actually-billed cost (SUM cost_total_usd). $0 for subscription usage. */
 	readonly costUsd: number;
@@ -382,6 +403,37 @@ export function createDb(databaseUrl: string): Db {
 			await pool.query(sql, values);
 		},
 
+		async fetchModelPrices() {
+			const { rows } = await pool.query<{
+				model: string;
+				input_per_mtok: string;
+				output_per_mtok: string;
+				cache_read_per_mtok: string;
+				cache_write_per_mtok: string;
+				source: string;
+				updated_at: Date;
+			}>(
+				`SELECT model, input_per_mtok, output_per_mtok,
+				        cache_read_per_mtok, cache_write_per_mtok, source, updated_at
+				   FROM model_prices
+				  ORDER BY model`,
+			);
+			const updatedAt = rows.reduce<Date | null>((max, r) => {
+				return max === null || r.updated_at > max ? r.updated_at : max;
+			}, null);
+			return {
+				updatedAt: updatedAt ? updatedAt.toISOString() : null,
+				items: rows.map((r) => ({
+					model: r.model,
+					inputPerMtok: Number.parseFloat(r.input_per_mtok),
+					outputPerMtok: Number.parseFloat(r.output_per_mtok),
+					cacheReadPerMtok: Number.parseFloat(r.cache_read_per_mtok),
+					cacheWritePerMtok: Number.parseFloat(r.cache_write_per_mtok),
+					source: r.source,
+				})),
+			};
+		},
+
 		async close() {
 			await pool.end();
 		},

packages/api/src/server/me/me.integration.test.ts

@@ -332,6 +332,34 @@ describe("GET /api/me/sessions — pagination + scoping", () => {
 	});
 });
 
+describe("GET /api/prices — model price reference", () => {
+	it("returns the seeded prices + updatedAt", async () => {
+		if (!env) throw new Error("env failed");
+		const r = await fetch(`${env.baseUrl}/api/prices`, { headers: { authorization: `Bearer ${env.aliceToken}` } });
+		expect(r.status).toBe(200);
+		const body = (await r.json()) as {
+			updatedAt: string | null;
+			count: number;
+			items: { model: string; inputPerMtok: number; outputPerMtok: number }[];
+		};
+		expect(body.count).toBeGreaterThan(0);
+		expect(body.count).toBe(body.items.length);
+		expect(typeof body.updatedAt).toBe("string"); // table is seeded → has a timestamp
+		const opus = body.items.find((m) => m.model === "claude-opus-4-7");
+		expect(opus?.inputPerMtok).toBe(5);
+		expect(opus?.outputPerMtok).toBe(25);
+		// sorted by model
+		const models = body.items.map((m) => m.model);
+		expect([...models].sort()).toEqual(models);
+	});
+
+	it("requires auth", async () => {
+		if (!env) throw new Error("env failed");
+		const r = await fetch(`${env.baseUrl}/api/prices`);
+		expect(r.status).toBe(401);
+	});
+});
+
 // ---------------------------------------------------------------------------
 // env setup + IdP fixture + seed helpers
 // ---------------------------------------------------------------------------

packages/api/src/server/prices/routes.ts

@@ -0,0 +1,38 @@
+/**
+ * `/api/prices` — the model price reference table.
+ *
+ *   GET /api/prices   list every priced model + its list rate (USD per
+ *                     1,000,000 tokens) + when prices were last synced.
+ *
+ * Reference data, not own-data — there's no rowScope here. It still
+ * requires a valid TokenTracker.* token (requireAuth) so the surface
+ * matches the rest of /api and the SPA can reuse its bearer.
+ */
+
+import express, { type Request, type Response, type Router } from "express";
+import type { Verifier } from "../auth/idp.js";
+import { requireAuth } from "../auth/middleware.js";
+import type { Db } from "../db.js";
+
+export interface PricesRouteDeps {
+	readonly db: Db;
+	readonly verifier: Verifier;
+}
+
+export function pricesRoutes(deps: PricesRouteDeps): Router {
+	const router = express.Router();
+	const auth = requireAuth({ verifier: deps.verifier, db: deps.db });
+
+	router.get("/prices", auth, (_req: Request, res: Response) => handlePrices(res, deps));
+
+	return router;
+}
+
+async function handlePrices(res: Response, deps: PricesRouteDeps): Promise<void> {
+	const prices = await deps.db.fetchModelPrices();
+	res.json({
+		updatedAt: prices.updatedAt,
+		count: prices.items.length,
+		items: prices.items,
+	});
+}

packages/spa/src/App.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
 import Home from "./pages/Home.svelte";
 import Me from "./pages/Me.svelte";
+import Prices from "./pages/Prices.svelte";
 
 const path = window.location.pathname;
-const page = path === "/me" || path.startsWith("/me/") ? "me" : "home";
+const page =
+	path === "/prices" || path.startsWith("/prices/")
+		? "prices"
+		: path === "/me" || path.startsWith("/me/")
+			? "me"
+			: "home";
 </script>
 
-{#if page === "me"}
+{#if page === "prices"}
+	<Prices />
+{:else if page === "me"}
 	<Me />
 {:else}
 	<Home />

packages/spa/src/lib/api.ts

@@ -68,6 +68,22 @@ export interface SessionItem {
 	readonly models: readonly string[];
 }
 
+export interface ModelPrice {
+	readonly model: string;
+	readonly inputPerMtok: number;
+	readonly outputPerMtok: number;
+	readonly cacheReadPerMtok: number;
+	readonly cacheWritePerMtok: number;
+	readonly source: string;
+}
+
+export interface PricesResponse {
+	/** When prices were last synced (ISO 8601), or null if empty. */
+	readonly updatedAt: string | null;
+	readonly count: number;
+	readonly items: readonly ModelPrice[];
+}
+
 export interface SessionsResponse {
 	readonly from: string;
 	readonly to: string;
@@ -128,6 +144,10 @@ export function fetchSessions(opts?: {
 	return getJson<SessionsResponse>(`/api/me/sessions${qs ? `?${qs}` : ""}`);
 }
 
+export function fetchPrices(): Promise<PricesResponse> {
+	return getJson<PricesResponse>("/api/prices");
+}
+
 /** Begin the IdP login redirect (handled entirely client-side by MSAL). */
 export function redirectToLogin(): void {
 	login();
@@ -143,6 +163,12 @@ export function fmtInt(n: number): string {
 	return new Intl.NumberFormat("en-US").format(n);
 }
 
+/** Price per 1M tokens, e.g. `$5.00`. `$0` is shown as `—` (free/subscription). */
+export function fmtRate(n: number): string {
+	if (n === 0) return "—";
+	return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 4 }).format(n);
+}
+
 export function fmtDateTime(iso: string): string {
 	return new Date(iso).toLocaleString();
 }

packages/spa/src/pages/Me.svelte

@@ -110,6 +110,9 @@ $effect(() => {
 					<option value="90">Last 90 days</option>
 				</select>
 			</label>
+			<a href="/prices" class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800">
+				Prices
+			</a>
 			<button type="button" onclick={logout} class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:hover:bg-slate-800">
 				Log out
 			</button>