Add historical sparklines to host cards

24h of snapshots were already being retained but never read. Adds a
windowed query (last ~40 samples/host, one query total via
ROW_NUMBER() OVER PARTITION BY, not N+1) embedded in the existing
/api/hosts response, rendered as small hand-rolled SVG sparklines
(cpu/mem/disk overlaid) -- no charting library needed at this scale.

Closes #10.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/api/src/db/index.ts

@@ -101,8 +101,35 @@ export function getLatestSnapshots(db: Database.Database): LatestRow[] {
     .all() as LatestRow[];
 }
 
-// Old snapshots aren't useful yet (no charting in Phase 1) and would grow unbounded
-// on a poll-every-30s cadence, so trim anything older than the retention window.
+export interface HistoryPoint {
+  host_id: string;
+  ts: string;
+  cpu_pct: number | null;
+  mem_pct: number | null;
+  disk_pct: number | null;
+}
+
+// Last N samples per host (not a time window) — at the default 30s poll interval
+// that's ~20 minutes of trend, enough for a sparkline without needing to
+// downsample. A window function keeps this to one query instead of one per host.
+export function getRecentHistory(db: Database.Database, samplesPerHost = 40): HistoryPoint[] {
+  return db
+    .prepare(
+      `
+      SELECT host_id, ts, cpu_pct, mem_pct, disk_pct FROM (
+        SELECT host_id, ts, cpu_pct, mem_pct, disk_pct,
+               ROW_NUMBER() OVER (PARTITION BY host_id ORDER BY id DESC) AS rn
+        FROM metric_snapshots
+      )
+      WHERE rn <= @samplesPerHost
+      ORDER BY host_id, ts ASC
+    `
+    )
+    .all({ samplesPerHost }) as HistoryPoint[];
+}
+
+// Sparklines only ever read the last ~40 samples (see getRecentHistory), so
+// anything older than the retention window is just dead weight — trim it.
 export function pruneOldSnapshots(db: Database.Database, retentionHours: number): void {
   db.prepare(`DELETE FROM metric_snapshots WHERE ts < datetime('now', @cutoff)`).run({
     cutoff: `-${retentionHours} hours`,

apps/api/src/routes/hosts.ts

@@ -1,6 +1,6 @@
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 import type Database from "better-sqlite3";
-import { getLatestSnapshots } from "../db/index.js";
+import { getLatestSnapshots, getRecentHistory } from "../db/index.js";
 
 async function requireAuth(req: FastifyRequest, reply: FastifyReply) {
   if (!req.session.username) {
@@ -11,6 +11,13 @@ async function requireAuth(req: FastifyRequest, reply: FastifyReply) {
 export function registerHostRoutes(app: FastifyInstance, db: Database.Database): void {
   app.get("/api/hosts", { preHandler: requireAuth }, async () => {
     const rows = getLatestSnapshots(db);
+
+    const history = new Map<string, { ts: string; cpuPct: number | null; memPct: number | null; diskPct: number | null }[]>();
+    for (const h of getRecentHistory(db)) {
+      if (!history.has(h.host_id)) history.set(h.host_id, []);
+      history.get(h.host_id)!.push({ ts: h.ts, cpuPct: h.cpu_pct, memPct: h.mem_pct, diskPct: h.disk_pct });
+    }
+
     return {
       hosts: rows.map((r) => ({
         hostId: r.host_id,
@@ -24,6 +31,7 @@ export function registerHostRoutes(app: FastifyInstance, db: Database.Database):
         cpuPressurePct: r.cpu_pressure_pct,
         uptimeSec: r.uptime_sec,
         lastSeen: r.ts,
+        history: history.get(r.host_id) ?? [],
       })),
     };
   });