feat(web-ui): better stats and ergonomics

Usage page: add 7-day trend chart (activity/tokens/cost tabs),
framework breakdown panel with per-framework run/tool/error counts
and proportional bars, and 7d aggregate pills above the chart.

Dashboard: add avg cost/run metric pill to the metrics strip.

Run detail: extract and display prompt preview from the first agent
span's payload above the spans table.

Bug fixes: stat-list bars now render correctly (flex-direction:column),
right-panel-tab active background uses correct accent color, missing
framework colors added for hermes/codex/gemini/copilot. Dead code
renderSessionRow removed from sessions.js. Hardcoded font-family
replaced with CSS variable in metric-pill-value and token-stat-value.
Usage page cleanup() wired into router teardown.

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

cmd/web-ui/static/modules/pages/dashboard.js

@@ -184,6 +184,11 @@ function renderSummaryCards() {
     animateCounter('dash-error-rate', rate.toFixed(1) + '%');
     errorRateEl.classList.toggle('alert', rate > 5);
   }
+
+  if (document.getElementById('dash-cost-per-run')) {
+    const avgCost = (s.runs_today || 0) > 0 ? (s.cost_today || 0) / s.runs_today : 0;
+    animateCounter('dash-cost-per-run', avgCost ? formatCost(avgCost) : '$0.0000');
+  }
 }
 
 async function loadTimeseries() {
@@ -875,6 +880,10 @@ export async function renderDashboard(routeToken) {
         <span class="metric-pill-label">Error rate</span>
         <span class="metric-pill-value metric-pill-alert" id="dash-error-rate">-</span>
       </div>
+      <div class="metric-pill">
+        <span class="metric-pill-label">Cost / run</span>
+        <span class="metric-pill-value" id="dash-cost-per-run">-</span>
+      </div>
     </div>
     <div class="section-title" style="margin-bottom:0.75rem">Infrastructure</div>
     <div class="vm-strip" id="dash-vm-strip"></div>