opencode-global-habit-profile 0.1.0 → 0.2.0

package/src/plugin-stats.js

@@ -0,0 +1,215 @@
+import { statSync } from "node:fs"
+
+const hookNames = Object.freeze(["session.prompt", "session.context", "tool.execute.after", "shell.create.before"])
+const latencyBuckets = Object.freeze([1, 5, 10, 25, 50, 100, 250, 500, 1000, 5000])
+const histogram = () => ({ counts: new Array(latencyBuckets.length).fill(0) })
+let startedAt
+let hooks
+let context
+let store
+let sse
+let requests
+let flush
+let errors
+
+function reset() {
+  startedAt = Date.now()
+  hooks = Object.fromEntries(hookNames.map((name) => [name, { invocations: 0, errors: 0, latency: histogram() }]))
+  context = { injections: 0, injectedChars: 0, notices: { checkpoint: 0, todo: 0 } }
+  store = { reads: 0, writes: 0, bytesRead: 0, bytesWritten: 0, lockWaits: 0, lockTimeouts: 0, errors: 0, writeLatency: histogram() }
+  sse = { clients: 0, peakClients: 0, refreshes: 0 }
+  requests = { "2xx": 0, "4xx": 0, "5xx": 0 }
+  flush = { lastAt: null, pending: 0, failures: 0 }
+  errors = { hooks: 0, store: 0, server: 0, collector: 0 }
+}
+reset()
+
+function observe(histogramValue, durationMs) {
+  const value = Number(durationMs)
+  if (!Number.isFinite(value) || value < 0) return
+  let index = latencyBuckets.findIndex((max) => value <= max)
+  if (index === -1) index = latencyBuckets.length - 1
+  histogramValue.counts[index]++
+}
+
+function percentile(histogramValue, quantile) {
+  const samples = histogramValue.counts.reduce((sum, count) => sum + count, 0)
+  if (!samples) return null
+  const target = Math.ceil(samples * quantile)
+  let seen = 0
+  for (let index = 0; index < histogramValue.counts.length; index++) {
+    seen += histogramValue.counts[index]
+    if (seen >= target) return latencyBuckets[index]
+  }
+  return latencyBuckets.at(-1)
+}
+
+function histogramSnapshot(histogramValue) {
+  return {
+    samples: histogramValue.counts.reduce((sum, count) => sum + count, 0),
+    p50: percentile(histogramValue, 0.5),
+    p95: percentile(histogramValue, 0.95),
+    buckets: histogramValue.counts.map((count, index) => ({ maxMs: index === histogramValue.counts.length - 1 ? null : latencyBuckets[index], count })),
+  }
+}
+
+function recordHook(name, durationMs, failed) {
+  const hook = hooks[name]
+  if (!hook) return
+  hook.invocations++
+  observe(hook.latency, durationMs)
+  if (failed) {
+    hook.errors++
+    errors.hooks++
+  }
+}
+
+export async function measureHook(name, fn) {
+  const started = Date.now()
+  try {
+    const result = await fn()
+    recordHook(name, Date.now() - started, false)
+    return result
+  } catch (error) {
+    recordHook(name, Date.now() - started, true)
+    throw error
+  }
+}
+
+export function recordHookError(name) {
+  const hook = hooks[name]
+  if (!hook) return
+  hook.errors++
+  errors.hooks++
+}
+
+export function recordContextChars(chars) {
+  const value = Number(chars)
+  if (!Number.isSafeInteger(value) || value < 0) return
+  if (!value) return
+  context.injections++
+  context.injectedChars += value
+}
+
+export function recordNotice(kind) {
+  if (kind === "checkpoint" || kind === "todo") context.notices[kind]++
+}
+
+export function recordStoreRead(bytes) {
+  store.reads++
+  const value = Number(bytes)
+  if (Number.isSafeInteger(value) && value >= 0) store.bytesRead += value
+}
+
+export function recordStoreWrite(bytes, durationMs) {
+  store.writes++
+  const value = Number(bytes)
+  if (Number.isSafeInteger(value) && value >= 0) store.bytesWritten += value
+  observe(store.writeLatency, durationMs)
+}
+
+export function recordStoreLockWait() {
+  store.lockWaits++
+}
+
+export function recordStoreLockTimeout() {
+  store.lockTimeouts++
+  errors.store++
+}
+
+export function recordStoreError() {
+  store.errors++
+  errors.store++
+}
+
+export function recordSseClient(delta) {
+  sse.clients = Math.max(0, sse.clients + (Number(delta) || 0))
+  sse.peakClients = Math.max(sse.peakClients, sse.clients)
+}
+
+export function recordSseRefresh() {
+  sse.refreshes++
+}
+
+export function recordRequestStatus(status) {
+  const code = Number(status)
+  if (code >= 200 && code < 300) requests["2xx"]++
+  else if (code >= 400 && code < 500) requests["4xx"]++
+  else if (code >= 500 && code < 600) {
+    requests["5xx"]++
+    errors.server++
+  }
+}
+
+export function recordServerError() {
+  errors.server++
+}
+
+export function recordCollectorPending(pending) {
+  const value = Number(pending)
+  flush.pending = Number.isSafeInteger(value) && value >= 0 ? value : 0
+}
+
+export function recordCollectorFlush(pending, failed) {
+  flush.lastAt = Date.now()
+  recordCollectorPending(pending)
+  if (failed) {
+    flush.failures++
+    errors.collector++
+  }
+}
+
+function currentCounts(storeData) {
+  if (!storeData || typeof storeData !== "object") return null
+  const checkpoints = Array.isArray(storeData.checkpoints) ? storeData.checkpoints : []
+  const todos = Array.isArray(storeData.todos) ? storeData.todos : []
+  return {
+    checkpoints: checkpoints.length,
+    todos: todos.length,
+    activeTodos: todos.filter((todo) => todo?.status === "pending").length,
+    scopes: new Set(checkpoints.map((checkpoint) => `${checkpoint?.project}\u0000${checkpoint?.context}`)).size,
+  }
+}
+
+function fileSize(path) {
+  try { return statSync(path).size } catch { return null }
+}
+
+export function storeStats() {
+  return {
+    reads: store.reads,
+    writes: store.writes,
+    bytesRead: store.bytesRead,
+    bytesWritten: store.bytesWritten,
+    lockWaits: store.lockWaits,
+    lockTimeouts: store.lockTimeouts,
+    errors: store.errors,
+    writeLatency: histogramSnapshot(store.writeLatency),
+  }
+}
+
+export function pluginSnapshot({ storeData, storePath, metricsPath } = {}) {
+  return {
+    startedAt: new Date(startedAt).toISOString(),
+    uptimeMs: Math.max(0, Date.now() - startedAt),
+    hooks: Object.fromEntries(Object.entries(hooks).map(([name, hook]) => [name, {
+      invocations: hook.invocations,
+      errors: hook.errors,
+      latency: histogramSnapshot(hook.latency),
+    }])),
+    context: { injections: context.injections, injectedChars: context.injectedChars, notices: { ...context.notices } },
+    store: storeStats(),
+    sse: { clients: sse.clients, peakClients: sse.peakClients, refreshes: sse.refreshes },
+    requests: { ...requests },
+    flush: { ...flush },
+    errors: { ...errors },
+    current: currentCounts(storeData),
+    bytes: { store: fileSize(storePath), metrics: fileSize(metricsPath) },
+  }
+}
+
+export function resetPluginStats() {
+  reset()
+}
+
+export { hookNames }

package/src/store.js

@@ -2,6 +2,7 @@ import { randomUUID } from "node:crypto"
 import { mkdir, open, readFile, rename, stat, unlink } from "node:fs/promises"
 import { dirname, join } from "node:path"
 import { homedir } from "node:os"
+import { recordStoreError, recordStoreLockTimeout, recordStoreLockWait, recordStoreRead, recordStoreWrite, storeStats } from "./plugin-stats.js"
 
 const maxBytes = 2_000_000
 const categories = new Set([
@@ -82,10 +83,12 @@ function valid(data) {
 async function read() {
   try {
     const raw = await readFile(storePath)
+    recordStoreRead(raw.length)
     if (raw.length > maxBytes) throw new Error("Storage exceeds size limit")
     return valid(JSON.parse(raw))
   } catch (error) {
-    if (error.code === "ENOENT") return empty()
+    if (error.code === "ENOENT") { recordStoreRead(0); return empty() }
+    recordStoreError()
     throw error
   }
 }
@@ -117,7 +120,8 @@ async function locked(fn) {
       await recoverStaleLock()
     }
     if (!handle) {
-      if (Date.now() >= deadline) throw new Error("Storage is locked")
+      if (Date.now() >= deadline) { recordStoreLockTimeout(); throw new Error("Storage is locked") }
+      recordStoreLockWait()
       await new Promise((resolve) => setTimeout(resolve, 25))
     }
   }
@@ -130,19 +134,26 @@ async function locked(fn) {
   }
 }
 async function write(data) {
-  valid(data)
-  const serialized = JSON.stringify(data)
-  if (Buffer.byteLength(serialized) > maxBytes) throw new Error("Storage exceeds size limit")
-  const temp = `${storePath}.${process.pid}.${randomUUID()}.tmp`
-  const handle = await open(temp, "wx", 0o600)
+  const started = Date.now()
   try {
-    await handle.writeFile(serialized)
-    await handle.sync()
-    await handle.close()
-    await rename(temp, storePath)
+    valid(data)
+    const serialized = JSON.stringify(data)
+    if (Buffer.byteLength(serialized) > maxBytes) throw new Error("Storage exceeds size limit")
+    const temp = `${storePath}.${process.pid}.${randomUUID()}.tmp`
+    const handle = await open(temp, "wx", 0o600)
+    try {
+      await handle.writeFile(serialized)
+      await handle.sync()
+      await handle.close()
+      await rename(temp, storePath)
+    } catch (error) {
+      await handle.close().catch(() => {})
+      await unlink(temp).catch(() => {})
+      throw error
+    }
+    recordStoreWrite(Buffer.byteLength(serialized), Date.now() - started)
   } catch (error) {
-    await handle.close().catch(() => {})
-    await unlink(temp).catch(() => {})
+    recordStoreError()
     throw error
   }
 }
@@ -261,6 +272,10 @@ export async function archiveTodo(project, id) {
     return true
   })
 }
+export function getStoreStats() {
+  return storeStats()
+}
+
 export async function importLegacy(profile, checkpoint) {
   return locked(async () => {
     const data = await read()

package/src/ui-model.js

@@ -87,6 +87,82 @@ export function dailyTrend(daily = {}, today = new Date().toISOString().slice(0,
   }).filter(({ tools, commands }) => tools + commands > 0)
 }
 
+function metricDate(value) {
+  return typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value) && new Date(`${value}T00:00:00.000Z`).toISOString().slice(0, 10) === value
+}
+
+export function metricsRange(days, today = new Date().toISOString().slice(0, 10)) {
+  const allowed = [7, 30, 90]
+  const span = allowed.includes(Number(days)) ? Number(days) : 30
+  const to = metricDate(today) ? today : new Date().toISOString().slice(0, 10)
+  const from = new Date(`${to}T00:00:00.000Z`)
+  from.setUTCDate(from.getUTCDate() - (span - 1))
+  return { from: from.toISOString().slice(0, 10), to }
+}
+
+export function tokenBars(series = [], options = {}) {
+  if (!Array.isArray(series) || !series.length) return []
+  const rows = series.filter((row) => row && metricDate(row.day))
+  if (!rows.length) return []
+  const width = options.width ?? 720
+  const height = options.height ?? 180
+  const left = options.left ?? 28
+  const right = options.right ?? 16
+  const top = options.top ?? 12
+  const bottom = options.bottom ?? 28
+  const plotWidth = width - left - right
+  const plotHeight = height - top - bottom
+  const max = Math.max(1, ...rows.map((row) => {
+    const tokens = row.tokens ?? {}
+    return Number(tokens.input || 0) + Number(tokens.cacheRead || 0) + Number(tokens.output || 0)
+  }))
+  const slot = plotWidth / rows.length
+  const barWidth = Math.max(1, Math.min(28, slot * .62))
+  return rows.flatMap((row, index) => {
+    const x = rows.length === 1 ? left + (plotWidth - barWidth) / 2 : left + index * slot + (slot - barWidth) / 2
+    const values = [
+      ['input', Number(row.tokens?.input || 0)],
+      ['cache', Number(row.tokens?.cacheRead || 0)],
+      ['output', Number(row.tokens?.output || 0)],
+    ]
+    let cursor = top + plotHeight
+    return values.map(([key, value]) => {
+      const heightValue = Math.max(0, value) / max * plotHeight
+      const y = Math.max(top, cursor - heightValue)
+      const bar = { day: row.day, key, value, x, y, width: barWidth, height: cursor - y }
+      cursor -= heightValue
+      return bar
+    }).filter(({ value, height: barHeight }) => value > 0 && barHeight > 0)
+  })
+}
+
+export function metricTokenTotal(row) {
+  const tokens = row?.tokens ?? {}
+  return ['input', 'output', 'reasoning', 'cacheRead', 'cacheWrite']
+    .reduce((total, field) => total + (Number(tokens[field]) || 0), 0)
+}
+
+export function sortMetricRows(rows = [], key = 'steps', direction = 'desc') {
+  if (!Array.isArray(rows)) return []
+  const column = key === 'name' || key === 'tokens' ? key : 'steps'
+  const factor = direction === 'asc' ? 1 : -1
+  const nameOf = (row) => String(row?.name ?? row?.key ?? '')
+  const providerOf = (row) => String(row?.provider ?? '')
+  const valueOf = (row) => column === 'tokens'
+    ? metricTokenTotal(row)
+    : column === 'steps' ? Number(row?.steps) || 0 : 0
+  return rows
+    .map((row, index) => ({ row, index }))
+    .sort((a, b) => {
+      const byName = nameOf(a.row).localeCompare(nameOf(b.row))
+      const primary = column === 'name' ? byName * factor : (valueOf(a.row) - valueOf(b.row)) * factor
+      if (primary) return primary
+      if (column === 'name') return providerOf(a.row).localeCompare(providerOf(b.row)) || a.index - b.index
+      return byName || providerOf(a.row).localeCompare(providerOf(b.row)) || a.index - b.index
+    })
+    .map(({ row }) => row)
+}
+
 export function trendBars(series) {
   if (!series.length) return []
   const width = 720, height = 180, left = 28, right = 16, top = 12, bottom = 28

package/src/ui-navigation.js

@@ -1,4 +1,4 @@
-export const viewIds = Object.freeze(['reports', 'checkpoints', 'todos'])
+export const viewIds = Object.freeze(['reports', 'checkpoints', 'todos', 'metrics'])
 
 export function viewFromHash(hash) {
   const view = hash.startsWith('#') ? hash.slice(1) : hash

package/src/ui-server.js

@@ -6,6 +6,8 @@ import { fileURLToPath } from "node:url"
 import { homedir } from "node:os"
 import { createServer, request as httpRequest } from "node:http"
 import { clearCheckpoints, clearHabits, deleteCheckpoint, getData, storePath, updateCheckpoint } from "./store.js"
+import { metricsPath, queryMetrics } from "./metrics.js"
+import { pluginSnapshot, recordRequestStatus, recordServerError, recordSseClient, recordSseRefresh } from "./plugin-stats.js"
 
 const maxBody = 8192
 const distPath = join(fileURLToPath(new URL("../dist/", import.meta.url)))
@@ -16,19 +18,20 @@ export function createUiServer({ port = 0 } = {}) {
   let watcher, refreshTimer
   const server = createServer(async (req, res) => {
     const host = req.headers.host
-    if (![ `127.0.0.1:${server.address()?.port}`, `localhost:${server.address()?.port}` ].includes(host)) { res.writeHead(403).end("Forbidden"); return }
+    if (![ `127.0.0.1:${server.address()?.port}`, `localhost:${server.address()?.port}` ].includes(host)) { recordRequestStatus(403); res.writeHead(403).end("Forbidden"); return }
     const method = req.method || "GET", url = new URL(req.url || "/", `http://${host}`)
     if (url.pathname === controlPath) {
       const supplied = req.headers["x-habit-token"]
       const authorized = ["GET", "POST"].includes(method) && req.headers.origin === `http://${host}` && typeof supplied === "string" && Buffer.byteLength(supplied) === Buffer.byteLength(token) && timingSafeEqual(Buffer.from(supplied), Buffer.from(token))
-      if (!authorized) { res.writeHead(403).end(); return }
+      if (!authorized) { recordRequestStatus(403); res.writeHead(403).end(); return }
+      recordRequestStatus(200)
       if (method === "GET") { res.writeHead(200, { "cache-control": "no-store" }).end("active"); return }
       res.writeHead(200, { "cache-control": "no-store" }).end("stopping")
       setImmediate(() => { server.closeStreams(); server.close() })
       return
     }
     const securityHeaders = { "x-content-type-options": "nosniff", "content-security-policy": "default-src 'none'; script-src 'self'; style-src 'self'; connect-src 'self'; base-uri 'none'; frame-ancestors 'none'", "referrer-policy": "no-referrer" }
-    const send = (status, payload, type = "application/json; charset=utf-8") => { res.writeHead(status, { "content-type": type, "cache-control": "no-store", ...securityHeaders }); res.end(payload) }
+    const send = (status, payload, type = "application/json; charset=utf-8") => { recordRequestStatus(status); res.writeHead(status, { "content-type": type, "cache-control": "no-store", ...securityHeaders }); res.end(payload) }
     if (method === "GET" && url.pathname === "/") {
       try { const html = (await readFile(join(distPath, "index.html"), "utf8")).replace("<head>", `<head><meta name="habit-token" content="${token}">`); send(200, html, "text/html; charset=utf-8") }
       catch { send(503, "WebUI assets are missing (dist/index.html was not found). Run `npm run build` from the plugin directory to generate `dist/`.", "text/plain; charset=utf-8") }
@@ -45,16 +48,36 @@ export function createUiServer({ port = 0 } = {}) {
       catch { send(500, JSON.stringify({ error: "Unable to read local memory" })) }
       return
     }
+    if (method === "GET" && url.pathname === "/api/metrics") {
+      try {
+        const filters = {}
+        for (const key of ["from", "to", "project", "agent", "provider", "model", "kind"]) {
+          const value = url.searchParams.get(key)
+          if (value !== null && value !== "") filters[key] = value
+        }
+        let storeData
+        try { storeData = await getData() } catch {}
+        const result = queryMetrics(filters)
+        result.plugin = pluginSnapshot({ storeData, storePath, metricsPath })
+        send(200, JSON.stringify(result))
+      } catch (error) {
+        const invalid = error?.code === "INVALID_METRICS_QUERY"
+        send(invalid ? 400 : 500, JSON.stringify({ error: invalid ? "Invalid metrics query" : "Unable to read metrics" }))
+      }
+      return
+    }
     if (method === "GET" && url.pathname === "/api/events") {
+      recordRequestStatus(200)
       res.writeHead(200, { "content-type": "text/event-stream; charset=utf-8", "cache-control": "no-store", connection: "keep-alive", ...securityHeaders })
       res.write(": connected\n\n")
       clients.add(res)
+      recordSseClient(1)
       const heartbeat = setInterval(() => {
         if (res.writableEnded) return
         try { res.write(": ping\n\n") } catch { res.end() }
       }, 30_000)
       heartbeat.unref?.()
-      res.on("close", () => { clearInterval(heartbeat); clients.delete(res) })
+      res.on("close", () => { clearInterval(heartbeat); if (clients.delete(res)) recordSseClient(-1) })
       return
     }
     if (method !== "POST" || !["/api/checkpoint/edit", "/api/checkpoint/delete", "/api/scope/delete", "/api/habits/clear"].includes(url.pathname)) { send(404, JSON.stringify({ error: "Not found" })); return }
@@ -78,25 +101,29 @@ export function createUiServer({ port = 0 } = {}) {
       send(changed ? 200 : 404, JSON.stringify({ changed }))
     } catch { send(400, JSON.stringify({ error: "Invalid request" })) }
   })
-  server.on("clientError", (_error, socket) => socket.end("HTTP/1.1 400 Bad Request\r\nConnection: close\r\n\r\n"))
+  server.on("clientError", (_error, socket) => { recordRequestStatus(400); socket.end("HTTP/1.1 400 Bad Request\r\nConnection: close\r\n\r\n") })
   try {
     const directory = dirname(storePath)
+    const metricsName = basename(metricsPath)
+    // -shm is excluded: read-only metrics queries update it and would self-trigger SSE.
+    const watched = new Set([basename(storePath), metricsName, `${metricsName}-wal`])
     mkdirSync(directory, { recursive: true, mode: 0o700 })
     watcher = watch(directory, (_event, filename) => {
-      if (filename && filename !== basename(storePath)) return
+      if (filename && !watched.has(filename)) return
       if (refreshTimer) return
       refreshTimer = setTimeout(() => {
         refreshTimer = undefined
+        if (clients.size) recordSseRefresh()
         for (const client of clients) {
-          if (client.writableEnded) { clients.delete(client); continue }
-          try { client.write("data: refresh\n\n") } catch { clients.delete(client) }
+          if (client.writableEnded) { if (clients.delete(client)) recordSseClient(-1); continue }
+          try { client.write("data: refresh\n\n") } catch { if (clients.delete(client)) recordSseClient(-1); recordServerError() }
         }
       }, 100)
     })
     watcher.unref?.()
     watcher.on("error", () => { watcher?.close(); watcher = undefined })
   } catch {}
-  server.closeStreams = () => { for (const client of clients) { try { client.end() } catch {} } clients.clear() }
+  server.closeStreams = () => { const count = clients.size; for (const client of clients) { try { client.end() } catch {} } clients.clear(); if (count) recordSseClient(-count) }
   server.on("close", () => { clearTimeout(refreshTimer); watcher?.close(); server.closeStreams() })
   server.habitToken = token
   return server.listen(port, "127.0.0.1")

package/src/ui.css

@@ -8,6 +8,9 @@
   --brand: #59d6c8;
   --danger: #ed8589;
   --series-commands: #b69af7;
+  --series-input: #7cc7ff;
+  --series-cache: #59d6c8;
+  --series-output: #f0b86e;
   --line: color-mix(in srgb, var(--ink) 12%, transparent);
   --line-soft: color-mix(in srgb, var(--ink) 7%, transparent);
   --focus: var(--brand);
@@ -26,6 +29,9 @@
   --brand: #087d75;
   --danger: #a8323c;
   --series-commands: #6045a8;
+  --series-input: #0b5f8a;
+  --series-cache: #087d75;
+  --series-output: #8a4b00;
   --line: color-mix(in srgb, var(--ink) 17%, transparent);
   --line-soft: color-mix(in srgb, var(--ink) 10%, transparent);
 }
@@ -47,7 +53,7 @@ button, select { color: inherit; font: inherit; }
 }
 .brand { color: var(--ink); font-size: 1rem; font-weight: 750; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
 .brand::before { content: "HM"; display: inline-grid; width: 1.75rem; height: 1.75rem; margin-right: .55rem; place-items: center; border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); border-radius: .35rem; color: var(--brand); font-size: .65rem; letter-spacing: .02em; vertical-align: -.2rem; }
-.sidebar-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; flex: none; gap: .25rem; padding: .2rem; border: 1px solid var(--line-soft); border-radius: .45rem; background: var(--surface); }
+.sidebar-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; flex: none; gap: .25rem; padding: .2rem; border: 1px solid var(--line-soft); border-radius: .45rem; background: var(--surface); }
 .sidebar-nav a { flex: 1; min-width: 0; padding: .45rem .55rem; border-radius: .3rem; color: var(--muted); font-size: .82rem; font-weight: 650; overflow-wrap: anywhere; text-align: center; text-decoration: none; }
 .sidebar-nav a:hover, .sidebar-nav a:focus-visible { color: var(--ink); background: var(--surface-raised); }
 .sidebar-nav a[aria-current="page"] { color: color-mix(in srgb, var(--brand) 90%, var(--ink)); background: var(--surface-raised); }
@@ -103,6 +109,54 @@ h3 { display: flex; align-items: flex-start; justify-content: space-between; gap
 .trend-chart .tools-series { fill: var(--brand); }
 .trend-chart .commands-series { fill: var(--series-commands); }
 
+.metrics-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); align-items: end; min-width: 0; gap: .65rem; margin: 1rem 0 1.2rem; padding: .75rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); }
+.metrics-filters legend { padding: 0 .3rem; color: var(--brand); font-size: .68rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
+.metrics-filter { display: grid; gap: .28rem; min-width: 0; color: var(--muted); font-size: .72rem; font-weight: 650; }
+.metrics-filter select { width: 100%; min-width: 0; }
+.metrics-reset { align-self: end; }
+.metrics-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin-bottom: .8rem; }
+.metric-card { display: grid; gap: .25rem; min-width: 0; padding: .75rem .8rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); color: var(--muted); font-size: .72rem; }
+.metric-card span { font-weight: 650; overflow-wrap: anywhere; }
+.metric-card strong { color: var(--ink); font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
+.metric-card small { color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
+.savings-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem .8rem; padding: .8rem .9rem; border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line)); border-radius: .4rem; background: var(--surface); }
+.savings-panel h3 { display: block; }
+.savings-panel .section-note { margin: .2rem 0 0; }
+.savings-rate { color: var(--brand); font-size: 1.8rem; font-variant-numeric: tabular-nums; line-height: 1; }
+.savings-detail { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
+.metrics-charts, .metrics-tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; margin-top: .8rem; }
+.metrics-tables-note { margin-top: 1.2rem; }
+.metrics-table-panel { min-width: 0; padding: .8rem .85rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); overflow-x: auto; }
+.metrics-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
+.metrics-table caption { padding: 0 0 .55rem; color: var(--ink); font-size: .84rem; font-weight: 680; text-align: left; }
+.metrics-table th, .metrics-table td { padding: .5rem .45rem; border-top: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
+.metrics-table thead th { color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
+.metrics-table thead th[aria-sort="ascending"], .metrics-table thead th[aria-sort="descending"] { color: var(--ink); }
+.sort-button { display: flex; align-items: center; gap: .22rem; width: 100%; min-height: 1.75rem; padding: .1rem 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
+.sort-button:hover:not(:disabled) { border-color: transparent; color: var(--ink); }
+.sort-indicator { color: var(--brand); font-size: .95em; line-height: 1; }
+.metrics-table tbody th { max-width: 16rem; font-weight: 650; overflow-wrap: anywhere; }
+.metrics-table td { color: var(--muted); }
+.metrics-table .numeric { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
+.row-sub { display: block; margin-top: .15rem; color: var(--muted); font-size: .68rem; font-weight: 400; overflow-wrap: anywhere; }
+.project-hash { display: block; max-width: 100%; color: var(--muted); font-size: .66rem; overflow-wrap: anywhere; }
+.metrics-empty { margin-top: .8rem; }
+.plugin-health { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
+.plugin-heading { margin-bottom: .8rem; }
+.plugin-heading h3 { display: block; font-size: 1rem; }
+.plugin-heading .section-note { margin-bottom: 0; }
+.plugin-tables { margin-top: .8rem; }
+.input-series { color: var(--series-input); }
+.cache-series { color: var(--series-cache); }
+.output-series { color: var(--series-output); }
+.trend-chart .input-series { fill: var(--series-input); }
+.trend-chart .cache-series { fill: var(--series-cache); }
+.trend-chart .output-series { fill: var(--series-output); }
+
+@media (max-width: 30rem) {
+  .savings-panel { grid-template-columns: minmax(0, 1fr); }
+}
+
 .scope { min-width: 0; border: 1px solid var(--line); border-radius: .4rem; background: var(--surface); }
 .scope-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; margin-top: .8rem; }
 .project-summary { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: .8rem; cursor: pointer; }
@@ -158,6 +212,7 @@ button:disabled { opacity: .55; cursor: not-allowed; }
 @media (min-width: 68rem) {
   .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .scope-list { grid-template-columns: minmax(0, 1fr); }
+  .metrics-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/assets/index-CeYHNSfT.css

@@ -1 +0,0 @@
-:root{color-scheme:dark;--canvas: #0b1119;--surface: #101923;--surface-raised: #141f2b;--ink: #dce6ed;--muted: #91a2b1;--brand: #59d6c8;--danger: #ed8589;--series-commands: #b69af7;--line: color-mix(in srgb, var(--ink) 12%, transparent);--line-soft: color-mix(in srgb, var(--ink) 7%, transparent);--focus: var(--brand);background:var(--canvas);color:var(--ink);font:14px/1.5 system-ui,sans-serif}:root[data-theme=light]{color-scheme:light;--canvas: #f2f6f8;--surface: #ffffff;--surface-raised: #e8eff2;--ink: #172733;--muted: #536a78;--brand: #087d75;--danger: #a8323c;--series-commands: #6045a8;--line: color-mix(in srgb, var(--ink) 17%, transparent);--line-soft: color-mix(in srgb, var(--ink) 10%, transparent)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink)}button,select{color:inherit;font:inherit}.app-shell{min-height:100vh;background:var(--canvas)}.sidebar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;padding:.875rem 1rem .75rem;border-bottom:1px solid var(--line);background:var(--canvas)}.brand{color:var(--ink);font-size:1rem;font-weight:750;letter-spacing:-.035em;text-decoration:none;white-space:nowrap}.brand:before{content:"HM";display:inline-grid;width:1.75rem;height:1.75rem;margin-right:.55rem;place-items:center;border:1px solid color-mix(in srgb,var(--brand) 55%,transparent);border-radius:.35rem;color:var(--brand);font-size:.65rem;letter-spacing:.02em;vertical-align:-.2rem}.sidebar-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;flex:none;gap:.25rem;padding:.2rem;border:1px solid var(--line-soft);border-radius:.45rem;background:var(--surface)}.sidebar-nav a{flex:1;min-width:0;padding:.45rem .55rem;border-radius:.3rem;color:var(--muted);font-size:.82rem;font-weight:650;overflow-wrap:anywhere;text-align:center;text-decoration:none}.sidebar-nav a:hover,.sidebar-nav a:focus-visible{color:var(--ink);background:var(--surface-raised)}.sidebar-nav a[aria-current=page]{color:color-mix(in srgb,var(--brand) 90%,var(--ink));background:var(--surface-raised)}.local-note{flex:1 1 9rem;max-width:13rem;margin:0;color:var(--muted);font-size:.75rem}.workspace{min-width:0}.masthead{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding:1.4rem 1rem 1.1rem;border-bottom:1px solid var(--line-soft)}.eyebrow{margin:0 0 .35rem;color:var(--brand);font-size:.68rem;font-weight:750;letter-spacing:.13em}h1{margin:0;font-size:clamp(1.55rem,5vw,2.1rem);font-weight:650;letter-spacing:-.045em;line-height:1.18;text-wrap:balance}.intro{margin:.3rem 0 0;color:var(--muted);font-size:.9rem}.masthead-controls{display:flex;align-items:center;gap:.5rem}.language{display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.75rem;font-weight:650}.language select,.theme-toggle{min-height:2.25rem;padding:.35rem .6rem;border:1px solid var(--line);border-radius:.35rem;background:var(--surface);color:var(--ink);font-size:.78rem;font-weight:650}.theme-toggle{cursor:pointer}main{width:min(100%,88rem);margin-inline:auto;padding:1rem 1rem 3rem}.page-note,.section-note{color:var(--muted)}.page-note{max-width:60rem;margin:0 0 1rem;font-size:.8rem}.stat-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-bottom:1.8rem}.stat-card{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;min-height:3.8rem;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.4rem;background:var(--surface);color:var(--muted);font-size:.76rem;font-weight:650}.stat-card span{min-width:0;overflow-wrap:anywhere}.stat-card strong{color:var(--brand);font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1}.checkpoint-summary{grid-template-columns:minmax(0,1fr);max-width:20rem;margin:.8rem 0 1.2rem}main>section{margin-top:2rem;scroll-margin-top:1rem}h2{display:flex;align-items:baseline;gap:.65rem;margin:0;font-size:1.15rem;font-weight:680;letter-spacing:-.025em;text-wrap:balance}h3{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin:0;font-size:.86rem;font-weight:680;line-height:1.4;text-wrap:balance}.section-note{margin:.25rem 0 .8rem;font-size:.8rem}.notice{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;color:var(--danger)}.report-heading{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.report-heading .section-note{max-width:58rem;margin-bottom:0}.include-archived{display:flex;align-items:center;gap:.5rem;min-height:2.5rem;color:var(--muted);font-size:.8rem;font-weight:650;cursor:pointer}.include-archived input{width:1rem;height:1rem;margin:0;accent-color:var(--brand)}.include-archived input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.report-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem;margin-top:.8rem}.report-card,.trend-panel{min-width:0;padding:.8rem .85rem;border:1px solid var(--line);border-radius:.4rem;background:var(--surface)}.report-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem}.report-total{flex:none;color:var(--brand);font-size:1.1rem;font-variant-numeric:tabular-nums}.report-ranking{margin:.55rem 0 0;padding:0;list-style:none}.report-ranking li{display:flex;justify-content:space-between;gap:.6rem;padding:.55rem 0;border-top:1px solid var(--line-soft)}.report-ranking li>strong{flex:none;color:var(--brand);font-variant-numeric:tabular-nums}.report-label{min-width:0;overflow-wrap:anywhere}.report-label code{display:block;margin-top:.15rem;color:var(--muted);font-size:.7rem}.empty-report{margin:.7rem 0 0;color:var(--muted);font-size:.8rem}.trend-panel{margin-top:.65rem}.trend-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.65rem 0 .2rem;padding:0;color:var(--muted);font-size:.72rem;list-style:none}.trend-legend li:before{display:inline-block;width:.48rem;height:.48rem;margin-right:.35rem;border-radius:.1rem;background:currentColor;content:""}.tools-series{color:var(--brand)}.commands-series{color:var(--series-commands)}.trend-chart{display:block;width:100%;max-width:100%;height:auto;overflow:hidden}.trend-chart .chart-axis{stroke:var(--line);stroke-width:1}.trend-chart text{fill:var(--muted);font:10px system-ui,sans-serif}.trend-chart rect{rx:1px}.trend-chart .tools-series{fill:var(--brand)}.trend-chart .commands-series{fill:var(--series-commands)}.scope{min-width:0;border:1px solid var(--line);border-radius:.4rem;background:var(--surface)}.scope-list{display:grid;grid-template-columns:minmax(0,1fr);gap:.65rem;margin-top:.8rem}.project-summary{display:flex;align-items:center;gap:.75rem;min-width:0;padding:.8rem;cursor:pointer}.project-summary:after{margin-left:auto;color:var(--muted);content:"⌄";font-size:1.2rem}.scope[open]>.project-summary:after{content:"⌃"}.project-summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}.scope-provenance{display:grid;min-width:0;gap:.4rem}.scope-caption{display:flex;align-items:center;gap:.4rem;margin:0;color:var(--brand);font-size:.67rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase}.scope-caption:before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:var(--brand)}.scope-caption .scope-directory{min-width:0;color:var(--ink);font-size:.82rem;letter-spacing:normal;text-transform:none;overflow-wrap:anywhere}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.project-summary code,.entry-context code{display:inline-block;max-width:100%;padding:.15rem .35rem;border:1px solid var(--line-soft);border-radius:.25rem;background:var(--canvas);font-size:.77rem;overflow-wrap:anywhere}.project-checkpoints{border-top:1px solid var(--line-soft)}.todo-status-list{display:grid;padding:.7rem .8rem;border-top:1px solid var(--line-soft)}.todo-status+.todo-status{padding-top:.65rem;border-top:1px solid var(--line-soft)}.todo-status-heading{color:var(--muted);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.todo-status-heading span:last-child{color:var(--brand);font-variant-numeric:tabular-nums}.todo-items{margin:.35rem 0 0;padding:0;list-style:none}.todo-items li{padding:.5rem 0;border-top:1px solid var(--line-soft);overflow-wrap:anywhere;white-space:pre-wrap}.entry{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;padding:.8rem}.entry+.entry{border-top:1px solid var(--line-soft)}.entry-content{min-width:0}.entry-title{display:block;margin:0 0 .25rem;overflow-wrap:anywhere}.entry-summary{margin:0 0 .3rem;white-space:pre-wrap;overflow-wrap:anywhere}.entry-context{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:0 0 .25rem;color:var(--muted);font-size:.72rem}time{color:var(--muted);font-size:.72rem}.entry-actions{display:flex;flex-wrap:wrap;gap:.4rem}button,select{min-height:2.35rem;padding:.4rem .65rem;border:1px solid var(--line);border-radius:.32rem;background:var(--surface-raised);color:var(--ink);cursor:pointer}button{font-size:.76rem;font-weight:650}button:hover:not(:disabled),select:hover{border-color:color-mix(in srgb,var(--brand) 65%,var(--line))}.action-edit{border-color:color-mix(in srgb,var(--brand) 38%,var(--line));color:var(--brand)}.action-delete{border-color:color-mix(in srgb,var(--danger) 46%,var(--line));color:var(--danger)}.action-delete:hover:not(:disabled){background:color-mix(in srgb,var(--danger) 10%,var(--surface))}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}button:disabled{opacity:.55;cursor:not-allowed}@media(min-width:45rem){.app-shell{display:grid;grid-template-columns:13.5rem minmax(0,1fr)}.sidebar{position:sticky;top:0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:1.5rem;height:100vh;min-height:32rem;padding:1.5rem 1rem 1rem;border-right:1px solid var(--line);border-bottom:0}.brand{font-size:1.05rem}.sidebar-nav{display:flex;flex:none;flex-direction:column;gap:.25rem;padding:.25rem}.sidebar-nav a{flex:none;padding:.62rem .65rem;text-align:left}.local-note{flex:none;max-width:none;margin:auto 0 0}.masthead{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:1.6rem 1.75rem 1.2rem}main{padding:1.25rem 1.75rem 3rem}.report-heading{flex-direction:row;align-items:center;justify-content:space-between}.report-heading>button{flex:none}.entry{flex-direction:row;justify-content:space-between}.entry-actions{flex:none}}@media(min-width:68rem){.report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.scope-list{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}