feat(web-ui): improve Agents page legibility and scannability

Targeted UI/UX polish on the Agents page, keeping the existing dark
aesthetic and both Overview/Live view modes:

- Add a readable --text-mute token (dark + light) and apply it to the
  summary chips, lane meta, and idle/offline status, which previously
  used the near-invisible --text-dim.
- Event feed: demote the generic "Span Started/Completed" label to a
  quiet mono category tag and promote the tool name, with a left-edge
  accent by event kind (run/span/error/session). Scoped to
  #agents-content so other pages' feeds are unaffected.
- Active-op pills: add a per-kind left accent bar (tool/subagent/run).
- Lane sparkline: raise opacity and add a gradient so it actually reads.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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

@@ -46,6 +46,14 @@ let _agentsRenderTimer = null;
 
 // ── Private helpers ──────────────────────────────────────
 
+function eventKindClass(eventType) {
+  if (eventType === 'run.start' || eventType === 'run.end') return 'evt-run';
+  if (eventType === 'span.start' || eventType === 'span.end') return 'evt-span';
+  if (eventType === 'error') return 'evt-error';
+  if (eventType === 'session.start' || eventType === 'session.end') return 'evt-session';
+  return 'evt-other';
+}
+
 function ensureAgentBucket(evt) {
   const identity = getAgentIdentity(evt);
   if (!identity.key) return null;
@@ -258,7 +266,8 @@ function renderAgentLanes() {
     const opsHTML = ops.length > 0 ? `<div class="active-ops">${ops.map(op => {
       const elapsed = Math.floor((Date.now() - op.startedAt) / 1000);
       const stale = elapsed > 300;
-      const kindClass = op.kind === 'agent' || op.subType === 'subagent' ? ' subagent' : '';
+      const kindClass = op.kind === 'agent' || op.subType === 'subagent' ? ' subagent'
+        : op.kind === 'run' ? ' run' : '';
       return `
         <div class="active-op${stale ? ' stale' : ''}${kindClass}">
           <span class="active-op-dot"></span>
@@ -276,7 +285,7 @@ function renderAgentLanes() {
       const expandHTML = details ? '<button class="timeline-expand-hint" type="button">details</button>' : '';
 
       return `
-        <div class="timeline-event">
+        <div class="timeline-event ${eventKindClass(eventType)}">
           <div class="timeline-event-header">
             ${getEventIcon(eventType)}
             <span class="timeline-event-type">${escapeHTML(getEventLabel(eventType))}</span>
@@ -675,7 +684,7 @@ function renderAgentsLive() {
               </div>
               <div class="live-run-events">
                 ${group.events.map(evt => `
-                  <div class="timeline-event live-event">
+                  <div class="timeline-event live-event ${eventKindClass(getEnvelopeType(evt))}">
                     <div class="timeline-event-header">
                       ${getEventIcon(getEnvelopeType(evt))}
                       <span class="timeline-event-type">${escapeHTML(getEventLabel(getEnvelopeType(evt)))}</span>