From 2c4b212ae6111723818f00883e0ec5db142132a1 Mon Sep 17 00:00:00 2001
From: William Valentin <william.valentin.info@gmail.com>
Date: Sat, 14 Mar 2026 11:59:38 -0700
Subject: [PATCH] feat: semantic accent colors on summary cards, infrastructure
 label

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cmd/web-ui/static/app.js    | 39 ++++++++++++++++++++-----------------
 cmd/web-ui/static/style.css | 20 ++++++++++++++-----
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/cmd/web-ui/static/app.js b/cmd/web-ui/static/app.js
index ef490a0..44beb07 100644
--- a/cmd/web-ui/static/app.js
+++ b/cmd/web-ui/static/app.js
@@ -952,25 +952,29 @@
         <h2>Dashboard <span class="live-indicator"><span class="live-dot"></span>Live</span></h2>
       </div>
       <div class="dashboard-summary">
-        <div class="summary-card">
-          <div class="summary-card-label">Active Sessions</div>
+        <div class="summary-card" style="--card-accent:var(--accent)">
+          <div class="summary-card-label"><span class="summary-card-icon">◉</span>Active Sessions</div>
           <div class="summary-card-value" id="dash-active">-</div>
-          <div class="summary-card-sub" id="dash-active-sub"></div>
+          <div class="summary-card-sub" id="dash-active-sub">&nbsp;</div>
         </div>
-        <div class="summary-card">
-          <div class="summary-card-label">Runs Today</div>
+        <div class="summary-card" style="--card-accent:var(--success)">
+          <div class="summary-card-label"><span class="summary-card-icon">▶</span>Runs Today</div>
           <div class="summary-card-value" id="dash-runs">-</div>
+          <div class="summary-card-sub" id="dash-runs-sub">&nbsp;</div>
         </div>
-        <div class="summary-card">
-          <div class="summary-card-label">Tool Calls</div>
+        <div class="summary-card" style="--card-accent:var(--purple)">
+          <div class="summary-card-label"><span class="summary-card-icon">⚡</span>Tool Calls</div>
           <div class="summary-card-value" id="dash-tools">-</div>
+          <div class="summary-card-sub" id="dash-tools-sub">&nbsp;</div>
         </div>
-        <div class="summary-card">
-          <div class="summary-card-label">Errors</div>
+        <div class="summary-card" style="--card-accent:var(--error)">
+          <div class="summary-card-label"><span class="summary-card-icon">⚠</span>Errors</div>
           <div class="summary-card-value" id="dash-errors">-</div>
+          <div class="summary-card-sub" id="dash-errors-sub">&nbsp;</div>
         </div>
       </div>
-      <div class="vm-strip" id="dash-vm-strip"></div>
+      <div class="section-title" style="margin-bottom:0.75rem">Infrastructure</div>
+      <div class="vm-strip" id="dash-vm-strip" style="margin-bottom:1.5rem"></div>
       <div class="charts-row">
         <div class="chart-panel">
           <div class="chart-header">
@@ -1142,18 +1146,17 @@
     el('dash-tools', s.tool_calls_today);
     el('dash-errors', s.errors_today);
 
+    // Sub-line: framework breakdown for active sessions
+    const fws = Object.keys(s.by_framework || {});
+    if (fws.length > 0) {
+      const sub = document.getElementById('dash-active-sub');
+      if (sub) sub.textContent = fws.map(f => `${f} ${(s.by_framework[f].runs || 0)}`).join(' · ');
+    }
+
     const errEl = document.getElementById('dash-errors');
     if (errEl) {
       errEl.classList.toggle('has-errors', s.errors_today > 0);
     }
-
-    const subEl = document.getElementById('dash-active-sub');
-    if (subEl && s.by_framework) {
-      const parts = Object.entries(s.by_framework)
-        .filter(([, v]) => v.runs > 0)
-        .map(([name, v]) => escapeHTML(name) + ' ' + v.runs);
-      subEl.textContent = parts.length > 0 ? parts.join(' / ') : '';
-    }
   }
 
   async function loadTimeseries() {
diff --git a/cmd/web-ui/static/style.css b/cmd/web-ui/static/style.css
index e829049..4dada97 100644
--- a/cmd/web-ui/static/style.css
+++ b/cmd/web-ui/static/style.css
@@ -995,24 +995,34 @@ tr.clickable:hover td:first-child {
 .summary-card {
   background: var(--surface);
   border: 1px solid var(--border);
+  border-left: 3px solid var(--card-accent, var(--border));
   border-radius: var(--radius-lg);
   padding: 1.125rem 1.25rem;
-  transition: border-color 0.2s;
+  transition: border-color 0.2s, border-left-color 0.2s;
 }
 
 .summary-card:hover {
-  border-color: rgba(34, 211, 238, 0.18);
+  border-color: var(--card-accent, var(--border));
+  border-left-color: var(--card-accent, var(--border));
 }
 
 .summary-card-label {
-  font-size: 0.68rem;
-  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
   color: var(--text-dim);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.08em;
   margin-bottom: 0.5rem;
 }
 
+.summary-card-icon {
+  font-size: 0.85rem;
+  opacity: 0.7;
+}
+
 .summary-card-value {
   font-family: var(--font-display);
   font-size: 2rem;