feat: refine dashboard history and runtime logging

Author: jcaose

logbook.md

@@ -103,11 +103,14 @@ What changed:
 - Added a built-in activity dashboard at `/dashboard` with summary cards, quota snapshots, a full-width live log, and a locally served Chart.js history plot.
 - Added a SQLite-backed dashboard telemetry store with backfill from persisted JSONL and gzipped capture files plus an SSE live event stream.
 - Captured telemetry for chat completions, Anthropic messages, Responses API, and embeddings, including completed requests, upstream errors, proxy errors, and client aborts.
-- Changed the history chart to stacked bars by base model so hourly, daily, weekly, and monthly buckets are visible in one plot with a legend.
-- Moved dashboard controls into the history panel and removed the separate by-model pane in favor of the chart breakdown.
-- Replaced the default Hono request logger with `consola` request start/finish lines to align terminal logging with the existing session token logs.
+- Changed the history chart to stacked `input` and `output` bars with hover breakdown by model, while keeping the model filter as a scope over the plotted data.
+- Filled missing hour/day/week/month buckets so zero-traffic intervals still appear in the history series.
+- Moved the model filter to the history pane header and compacted the bucket/range controls into the chart toolbar with responsive native selects on narrower screens.
+- Replaced the default Hono request logger with a timestamped `consola` reporter and a single standardized HTTP access log line that includes method, path, status, and duration.
+- Added a `--log-level` startup option and centralized runtime log formatting in `src/lib/logger.ts`, while preserving `--verbose` as a compatibility shortcut.
 - Hardened dashboard telemetry persistence so SQLite I/O failures degrade the dashboard store to in-memory mode instead of breaking proxied requests.
 - Added dashboard coverage in `tests/dashboard.test.ts`, including API aggregation, backfill, live stream, and local chart asset checks.
+- Added startup logging coverage in `tests/start-idle-timeout.test.ts`.
 
 ## Commit Trail
 

src/lib/dashboard-store-time.ts

@@ -4,7 +4,7 @@ import type {
   DashboardModelBreakdownRow,
   DashboardRange,
   DashboardRangeCounters,
-  DashboardSeriesDataset,
+  DashboardSeriesBreakdownRow,
   DashboardSeriesPoint,
   TelemetryEvent,
 } from "~/lib/dashboard-store-types"
@@ -18,6 +18,11 @@ interface ZonedParts {
   year: number
 }
 
+interface SeriesBounds {
+  end: ZonedParts
+  start: ZonedParts
+}
+
 export function clearDashboardTimeCache(): void {
   formatterCache.clear()
 }
@@ -85,14 +90,24 @@ export function buildSeries(
     timeZone: string
   },
 ): {
-  datasets: Array<DashboardSeriesDataset>
   series: Array<DashboardSeriesPoint>
 } {
   const { bucket, range, timeZone } = options
   const filteredEvents = filterEventsForRange(events, range, timeZone)
+    .slice()
+    .sort((left, right) => left.timestamp.localeCompare(right.timestamp))
+
+  if (filteredEvents.length === 0) {
+    return {
+      series: [],
+    }
+  }
+
   const buckets = new Map<string, DashboardCounter>()
-  const modelBuckets = new Map<string, Map<string, number>>()
-  const modelTotals = new Map<string, number>()
+  const modelBreakdowns = new Map<
+    string,
+    Map<string, DashboardSeriesBreakdownRow>
+  >()
 
   for (const event of filteredEvents) {
     const key = getBucketKey(
@@ -104,49 +119,82 @@ export function buildSeries(
     buckets.set(key, counter)
 
     const model = event.baseModel ?? "unknown"
-    const bucketTotals = modelBuckets.get(model) ?? new Map<string, number>()
+    const bucketBreakdowns =
+      modelBreakdowns.get(key) ?? new Map<string, DashboardSeriesBreakdownRow>()
+    const modelCounter: DashboardSeriesBreakdownRow = bucketBreakdowns.get(
+      model,
+    ) ?? {
+      ...createCounter(),
+      model,
+    }
 
-    bucketTotals.set(key, (bucketTotals.get(key) ?? 0) + event.totalTokens)
-    modelBuckets.set(model, bucketTotals)
-    modelTotals.set(model, (modelTotals.get(model) ?? 0) + event.totalTokens)
+    addEventToCounter(modelCounter, event)
+    bucketBreakdowns.set(model, modelCounter)
+    modelBreakdowns.set(key, bucketBreakdowns)
   }
 
-  const keys = Array.from(buckets.keys()).sort((left, right) =>
-    left.localeCompare(right),
-  )
+  const keys = buildSeriesKeys(filteredEvents, {
+    bucket,
+    range,
+    timeZone,
+  })
   const series = keys.map((key) => {
     const counter = buckets.get(key) ?? createCounter()
+    const bucketBreakdowns =
+      modelBreakdowns.get(key) ?? new Map<string, DashboardSeriesBreakdownRow>()
+    const breakdown = Array.from(bucketBreakdowns.values()).sort(
+      (left, right) => {
+        if (left.totalTokens === right.totalTokens) {
+          return left.model.localeCompare(right.model)
+        }
+
+        return right.totalTokens - left.totalTokens
+      },
+    )
 
     return {
+      breakdown,
       key,
       requests: counter.requests,
       inputTokens: counter.inputTokens,
       outputTokens: counter.outputTokens,
       totalTokens: counter.totalTokens,
     }
   })
-  const datasets = Array.from(modelBuckets.entries())
-    .sort(([leftModel], [rightModel]) => {
-      const leftTotal = modelTotals.get(leftModel) ?? 0
-      const rightTotal = modelTotals.get(rightModel) ?? 0
-
-      if (leftTotal === rightTotal) {
-        return leftModel.localeCompare(rightModel)
-      }
-
-      return rightTotal - leftTotal
-    })
-    .map(([model, totalsByBucket]) => ({
-      model,
-      totals: keys.map((key) => totalsByBucket.get(key) ?? 0),
-    }))
 
   return {
-    datasets,
     series,
   }
 }
 
+function buildSeriesKeys(
+  events: Array<TelemetryEvent>,
+  options: {
+    bucket: DashboardBucket
+    range: DashboardRange
+    timeZone: string
+  },
+): Array<string> {
+  const bounds = getSeriesBounds(events, options)
+
+  if (!bounds) {
+    return []
+  }
+
+  const keys: Array<string> = []
+  const end = getBucketStartParts(bounds.end, options.bucket)
+
+  for (
+    let cursor = getBucketStartParts(bounds.start, options.bucket);
+    compareZonedParts(cursor, end) <= 0;
+    cursor = incrementBucketParts(cursor, options.bucket)
+  ) {
+    keys.push(getBucketKey(cursor, options.bucket))
+  }
+
+  return keys
+}
+
 export function buildModelBreakdown(
   events: Array<TelemetryEvent>,
   range: DashboardRange,
@@ -242,6 +290,179 @@ function getBucketKey(parts: ZonedParts, bucket: DashboardBucket): string {
   }
 }
 
+function getSeriesBounds(
+  events: Array<TelemetryEvent>,
+  options: {
+    bucket: DashboardBucket
+    range: DashboardRange
+    timeZone: string
+  },
+): SeriesBounds | undefined {
+  if (events.length === 0) {
+    return undefined
+  }
+
+  if (options.range === "total") {
+    const firstEvent = events[0]
+    const lastEvent = events.at(-1) ?? firstEvent
+
+    return {
+      end: getZonedParts(new Date(lastEvent.timestamp), options.timeZone),
+      start: getZonedParts(new Date(firstEvent.timestamp), options.timeZone),
+    }
+  }
+
+  const current = getZonedParts(new Date(), options.timeZone)
+
+  return {
+    end: current,
+    start: getRangeStartParts(current, options.range),
+  }
+}
+
+function getRangeStartParts(
+  current: ZonedParts,
+  range: DashboardRange,
+): ZonedParts {
+  switch (range) {
+    case "current_hour": {
+      return current
+    }
+    case "today": {
+      return {
+        ...current,
+        hour: 0,
+      }
+    }
+    case "week_to_date": {
+      return getIsoWeekStartParts(current)
+    }
+    case "month_to_date": {
+      return {
+        day: 1,
+        hour: 0,
+        month: current.month,
+        year: current.year,
+      }
+    }
+    default: {
+      return current
+    }
+  }
+}
+
+function getBucketStartParts(
+  parts: ZonedParts,
+  bucket: DashboardBucket,
+): ZonedParts {
+  switch (bucket) {
+    case "hour": {
+      return parts
+    }
+    case "day": {
+      return {
+        ...parts,
+        hour: 0,
+      }
+    }
+    case "week": {
+      return getIsoWeekStartParts(parts)
+    }
+    case "month": {
+      return {
+        day: 1,
+        hour: 0,
+        month: parts.month,
+        year: parts.year,
+      }
+    }
+    default: {
+      return parts
+    }
+  }
+}
+
+function incrementBucketParts(
+  parts: ZonedParts,
+  bucket: DashboardBucket,
+): ZonedParts {
+  switch (bucket) {
+    case "hour": {
+      return addHours(parts, 1)
+    }
+    case "day": {
+      return addDays(parts, 1)
+    }
+    case "week": {
+      return addDays(parts, 7)
+    }
+    case "month": {
+      return addMonths(parts, 1)
+    }
+    default: {
+      return addDays(parts, 1)
+    }
+  }
+}
+
+function getIsoWeekStartParts(parts: ZonedParts): ZonedParts {
+  const date = createUtcCalendarDate({
+    ...parts,
+    hour: 0,
+  })
+  const weekday = date.getUTCDay() === 0 ? 7 : date.getUTCDay()
+
+  date.setUTCDate(date.getUTCDate() + 1 - weekday)
+
+  return getUtcCalendarParts(date)
+}
+
+function addHours(parts: ZonedParts, amount: number): ZonedParts {
+  const date = createUtcCalendarDate(parts)
+
+  date.setUTCHours(date.getUTCHours() + amount)
+
+  return getUtcCalendarParts(date)
+}
+
+function addDays(parts: ZonedParts, amount: number): ZonedParts {
+  const date = createUtcCalendarDate(parts)
+
+  date.setUTCDate(date.getUTCDate() + amount)
+
+  return getUtcCalendarParts(date)
+}
+
+function addMonths(parts: ZonedParts, amount: number): ZonedParts {
+  const date = createUtcCalendarDate(parts)
+
+  date.setUTCMonth(date.getUTCMonth() + amount, 1)
+
+  return getUtcCalendarParts(date)
+}
+
+function compareZonedParts(left: ZonedParts, right: ZonedParts): number {
+  return (
+    left.year - right.year
+    || left.month - right.month
+    || left.day - right.day
+    || left.hour - right.hour
+  )
+}
+
+function createUtcCalendarDate(parts: ZonedParts): Date {
+  return new Date(Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour))
+}
+
+function getUtcCalendarParts(date: Date): ZonedParts {
+  return {
+    day: date.getUTCDate(),
+    hour: date.getUTCHours(),
+    month: date.getUTCMonth() + 1,
+    year: date.getUTCFullYear(),
+  }
+}
+
 function getFormatter(timeZone: string): Intl.DateTimeFormat {
   const cached = formatterCache.get(timeZone)
   if (cached) {

src/lib/dashboard-store-types.ts

@@ -80,12 +80,12 @@ export interface DashboardCounter {
 export type DashboardRangeCounters = Record<DashboardRange, DashboardCounter>
 
 export interface DashboardSeriesPoint extends DashboardCounter {
+  breakdown: Array<DashboardSeriesBreakdownRow>
   key: string
 }
 
-export interface DashboardSeriesDataset {
+export interface DashboardSeriesBreakdownRow extends DashboardCounter {
   model: string
-  totals: Array<number>
 }
 
 export interface DashboardModelBreakdownRow extends DashboardCounter {