From eeee3b60a1fd8dc8b8b92997f709ef65e4b2097f Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Thu, 19 Mar 2026 23:15:58 +0000
Subject: feat: add errors, throughput, and billing sections to stats dashboard

- GET /api/stats?window=7d: pre-aggregated SQL queries for errors, throughput, billing
- Errors section: category summary (quota/rate_limit/timeout/git/failed) + failure table
- Throughput section: stacked hourly bar chart (completed/failed/other) over 7d
- Billing section: KPIs (7d total, avg/day, cost/run) + daily cost bar chart

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/style.css | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)

(limited to 'web/style.css')

diff --git a/web/style.css b/web/style.css
index 37f3b61..90ceb90 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1551,6 +1551,114 @@ dialog label select:focus {
   flex-shrink: 0;
 }
 
+/* ── Error category badge ───────────────────────────────────────────────── */
+.stats-err-badge {
+  display: inline-block;
+  padding: 0.15rem 0.45rem;
+  border-radius: 4px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+}
+
+.stats-err-cat {
+  border-top: 3px solid var(--cat-color, var(--state-failed));
+}
+
+.stats-err-msg {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  max-width: 360px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Throughput chart ───────────────────────────────────────────────────── */
+.stats-tp-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 120px;
+  margin: 0.75rem 0 0.25rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.stats-tp-col {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+  min-width: 0;
+}
+
+.stats-tp-bar {
+  width: 100%;
+  border-radius: 2px 2px 0 0;
+  min-height: 2px;
+}
+
+.stats-tp-legend {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.4rem;
+}
+
+.stats-tp-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.stats-tp-swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+/* ── Billing chart ──────────────────────────────────────────────────────── */
+.stats-bill-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 100px;
+  margin: 0.75rem 0 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.stats-bill-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  min-width: 0;
+}
+
+.stats-bill-bar {
+  width: 100%;
+  background: var(--state-queued);
+  border-radius: 3px 3px 0 0;
+  min-height: 2px;
+}
+
+.stats-bill-day-label {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
 /* ── Execution detail table ─────────────────────────────────────────────── */
 .stats-exec-table-wrap {
   margin-top: 1rem;
-- 
cgit v1.2.3