Unify otel-ui on ds-* theme; restore redesigned Issues view

Restore IssuesVisualizer redesign reverted by merge 67ce419 and re-apply
Needle triage/test additions. Migrate all remaining screens off the MD3
palette, raw Tailwind colors, gradients and Material Symbols. Remove the
legacy theme block and fonts, drop the duplicate tab strip, rebuild
TelemetryFilters on FilterBar, and document status in AGENTS.md.

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

AGENTS.md

@@ -19,14 +19,15 @@ The theme toggle lives in `TopBar.tsx`, persists to `localStorage`
 (`otel.ui.theme`), and is applied before first paint by an inline script in
 `index.html` so there's no flash of the wrong theme.
 
-The repo still has a second, older color system - the MD3-style
-`--color-surface-container-*` / `--color-on-surface` / `--color-primary-container`
-tokens, also in `index.css` - left over from before this redesign. That system
-is **dead**, not a design choice: it exists only because not every screen has
-been migrated yet (see the checklist below). Never add new usages of it. Once
-the checklist is empty, delete that whole legacy `@theme` block plus the old
-Geist/Inter/JetBrains/Material-Symbols font `<link>` entries in `index.html`,
-so exactly one design system remains in the codebase.
+The old MD3-style `--color-surface-container-*` / `--color-on-surface` tokens,
+the Material Symbols icon font and the Geist/Inter/JetBrains fonts have been
+**deleted**. Never reintroduce them, raw Tailwind palette colors
+(`slate-*`, `sky-*`, `rose-*`, `white/10`...), gradients, or shadows. Use
+`lucide-react` for icons.
+
+Documented exceptions (data-viz only, never chrome): per-service span colors
+in the trace waterfall (`getSpanColor` in `otel-utils.ts`) and the muted
+chart-series hues for metric lines/pods (`POD_COLORS`).
 
 ### Token reference
 
@@ -130,52 +131,36 @@ remaining screens:
    `getComputedStyle`, trust the computed style, front the tab, and re-check
    before concluding there's a real bug.
 
-## Migration checklist
+## Migration status
 
-Converted to `ds-*` already: `App.tsx` (shell), `IconRail.tsx`, `TopBar.tsx`,
-`FilterBar.tsx`, `IssuesVisualizer.tsx` (Issues / triage overview, tab0),
-`RumSessionsVisualizer.tsx` (RUM sessions, tab7).
+Whole UI is on `ds-*` (one theme, light + dark). The nav strip in `Tabs.tsx`
+is gone - `IconRail` is the only navigation; `Tabs.tsx` just renders the
+active screen. `TelemetryFilters` is built on `FilterBar`. The Material
+Symbols icons were replaced with lucide.
 
-Everything below still renders with the legacy MD3 dark-only palette
-(`text-on-surface`, `bg-surface-container-*`, `bg-primary-container`,
-gradient badges, the Material Symbols icon font) and needs the same
-treatment. Sizes are current line counts, biggest first:
+Lessons from getting here:
 
-| File | Lines | Tab / role | Notes |
-|---|---|---|---|
-| `TraceVisualization.tsx` | 1866 | Traces & Spans (tab1) | Waterfall + span detail; closest existing screen to the design spec's `trace-waterfall.html` reference |
-| `MetricsVisualizer.tsx` | 1107 | Metrics & APM (tab2) | Imports `GaugeMeter.tsx` |
-| `StructuredLogTerminal.tsx` | 582 | Live Log Stream (tab3) | Uses Material Symbols icons |
-| `Tabs.tsx` (shell) | 513 | horizontal tab strip rendered above every screen | Gradient active-tab underline, slate colors; decide whether this strip is still needed now that `IconRail` is the primary nav, or whether it should just lose the gradient/slate styling |
-| `SearchAndWatcher.tsx` | 504 | Archive & Trap (tab6) | |
-| `ServiceGraph.tsx` | 495 | used by `TraceVisualization.tsx` | migrate alongside its caller |
-| `WaveformHistogram.tsx` | 385 | shown above every non-Issues/RUM tab's content | Uses Material Symbols icons; see the shared-chrome note below |
-| `GaugeMeter.tsx` | 372 | used by `MetricsVisualizer.tsx` | migrate alongside its caller |
-| `TrendsVisualizer.tsx` | 323 | Historical Trends (tab5, only when ClickHouse stats are configured) | |
-| `CommandAndQueryBar.tsx` | 251 | shown above every non-Issues/RUM tab's content | see the shared-chrome note below |
-| `TelemetryFilters.tsx` | 124 | conditionally shown above `Tabs.tsx` content | service multiselect + attribute exclusions; candidate to rebuild on top of `FilterBar.tsx` instead of restyling in place |
-| `SetupPanel.tsx` | 112 | Setup & Agent API (tab4) | |
-| `PatternsVisualizer.tsx` | 76 | Similarity Patterns (tab8) | |
-| `ViewErrorBoundary.tsx` | 62 | error fallback UI, wraps every tab's content | small, easy pass |
-| `RolloutsVisualizer.tsx` | 48 | Cluster Rollouts (tab9) | |
-| `AuthCallbackView` (inside `App.tsx`) | ~40 | OIDC callback screen | still 100% old tokens even though the rest of `App.tsx` is migrated |
-
-**Shared chrome note:** `CommandAndQueryBar.tsx` (anomaly banner, filter
-status strip, NDJSON export) and `WaveformHistogram.tsx` (volume/error
-waveform with click-to-focus) are currently skipped entirely on the Issues
-tab (`isTriageOverview` branch in `App.tsx`) because their old styling would
-clash with the new `FilterBar`. When migrating the remaining tabs, decide
-per screen whether that real functionality gets folded into the screen's own
-`FilterBar`/content area (as happened for Issues and RUM sessions), or stays
-as shared chrome above the remaining tabs, restyled to `ds-*` tokens.
+- **Merges can silently revert a redesign.** `67ce419` reverted
+  `IssuesVisualizer.tsx` to the old styling (a parallel branch had edited the
+  same file). After any merge touching `otel-ui/src`, run the greps below -
+  they must return nothing.
+- **A stale `otel-ui/dist` or un-redeployed image hides changes.** The Go
+  server serves `otel-ui/dist`, else `./dist`, else the legacy root
+  `index.html`. Rebuild (`npm --prefix otel-ui run build`) before concluding a
+  screen isn't wired.
+- Still to polish (functional, but not yet re-laid-out to the screen
+  pattern): `TraceVisualization`, `MetricsVisualizer`, `StructuredLogTerminal`,
+  `SearchAndWatcher`, `TrendsVisualizer`, `SetupPanel`. They use `ds-*`
+  colors via a mechanical token swap but keep their old layout/type scale, use
+  `onClick` on non-buttons in places, and `CommandAndQueryBar` /
+  `WaveformHistogram` still sit above every non-Issues/RUM tab. Restructure
+  them onto `FilterBar` + the card/aside pattern when touching them.
 
 ### Finding old-pattern usages
 
 ```sh
 grep -rlE "surface-container|text-on-surface|primary-container|bg-error-container|material-symbols-outlined" otel-ui/src
-grep -rlE "from-[a-z]+-[0-9]+ via-[a-z]+-[0-9]+|getServicePalette" otel-ui/src
+grep -rnE "(bg|text|border|ring|from|to|via)-(slate|zinc|gray|sky|cyan|blue|violet|indigo|purple|emerald|teal|rose|red|amber|orange)-[0-9]|text-white|border-white|bg-(white|black)/" otel-ui/src
 ```
 
-A file with zero hits and zero `ds-*` usage either has no meaningful styling
-of its own (a pure hook/context) or hasn't been looked at yet - check the
-checklist above.
+Both must print nothing.