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>

otel-ui/src/components/CommandAndQueryBar.tsx

@@ -1,3 +1,4 @@
+import { AlertTriangle, Download } from "lucide-react"
 import React from "react";
 import { useObservabilityData } from "../hooks/useObservabilityData";
 import { useIssues } from "../hooks/useIssues";
@@ -101,25 +102,25 @@ export const CommandAndQueryBar: React.FC = () => {
     <div className="flex flex-col gap-2.5 mb-4 font-body">
       {/* Real Anomaly Radar Banner */}
       {(errorStats.errorCount > 0 || topOpenIssue) && (
-        <div className="rounded-xl border border-rose-500/30 bg-gradient-to-r from-rose-950/40 via-slate-950/60 to-rose-950/20 p-3 shadow-lg flex flex-col sm:flex-row sm:items-center justify-between gap-3 animate-in fade-in duration-300">
+        <div className="rounded-xl border border-ds-critical/30 bg-ds-surface-2    p-3 shadow-lg flex flex-col sm:flex-row sm:items-center justify-between gap-3 animate-in fade-in duration-300">
           <div className="flex items-center gap-2.5 min-w-0">
-            <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-rose-500/20 text-rose-400 border border-rose-500/40">
-              <span className="material-symbols-outlined text-[18px]">warning</span>
+            <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-ds-critical-bg text-ds-critical border border-ds-critical/40">
+              <AlertTriangle className="h-[18px] w-[18px] shrink-0" aria-hidden="true" />
             </div>
             <div className="flex flex-col min-w-0">
               <div className="flex items-center gap-2">
-                <span className="font-mono text-xs font-bold text-rose-300 uppercase tracking-wider">
+                <span className="font-mono text-xs font-bold text-ds-critical uppercase tracking-wider">
                   Anomaly Radar:
                 </span>
-                <span className="font-mono text-xs text-white truncate">
+                <span className="font-mono text-xs text-ds-text truncate">
                   {errorStats.errorCount > 0
                     ? `${errorStats.errorCount} errors in active window (${errorStats.services.join(", ") || "various"})`
                     : `${topOpenIssue?.count} occurrences of "${topOpenIssue?.title}"`}
                 </span>
               </div>
               {topOpenIssue && (
-                <span className="text-[11px] text-slate-400 truncate">
-                  Top Issue: <span className="text-slate-200 font-semibold">{topOpenIssue.title}</span> (Service: {topOpenIssue.service}, ×{topOpenIssue.count})
+                <span className="text-[11px] text-ds-text-2 truncate">
+                  Top Issue: <span className="text-ds-text font-semibold">{topOpenIssue.title}</span> (Service: {topOpenIssue.service}, ×{topOpenIssue.count})
                 </span>
               )}
             </div>
@@ -129,7 +130,7 @@ export const CommandAndQueryBar: React.FC = () => {
             <button
               type="button"
               onClick={() => setActiveTab("tab0")}
-              className="px-3 py-1 rounded-lg bg-rose-500 hover:bg-rose-600 text-white font-mono text-xs font-bold transition-colors shadow-sm"
+              className="px-3 py-1 rounded-lg bg-ds-critical hover:bg-ds-critical text-ds-text font-mono text-xs font-bold transition-colors shadow-sm"
             >
               Triage Issues
             </button>
@@ -137,7 +138,7 @@ export const CommandAndQueryBar: React.FC = () => {
               <button
                 type="button"
                 onClick={() => setShowErrorsOnly(true)}
-                className="px-2.5 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-slate-200 font-mono text-xs transition-colors"
+                className="px-2.5 py-1 rounded-lg bg-ds-fill hover:bg-ds-fill text-ds-text font-mono text-xs transition-colors"
               >
                 Isolate Errors
               </button>
@@ -147,13 +148,13 @@ export const CommandAndQueryBar: React.FC = () => {
       )}
 
       {/* Filter and Telemetry Status Bar */}
-      <div className="flex flex-wrap items-center justify-between gap-2.5 p-3 rounded-xl bg-surface-container-lowest border border-surface-container/50 shadow-sm">
+      <div className="flex flex-wrap items-center justify-between gap-2.5 p-3 rounded-xl bg-ds-bg border border-ds-line shadow-sm">
         <div className="flex items-center gap-2 flex-wrap">
-          <span className="font-mono text-[10px] text-outline uppercase tracking-wider font-semibold shrink-0">
+          <span className="font-mono text-[10px] text-ds-text-3 uppercase tracking-wider font-semibold shrink-0">
             Active Context:
           </span>
 
-          <span className="font-mono text-xs text-secondary font-semibold">
+          <span className="font-mono text-xs text-ds-accent font-semibold">
             {totalFilteredEvents} Signals ({timeWindow === "all" ? "All Time" : `Last ${timeWindow}`})
           </span>
 
@@ -161,13 +162,13 @@ export const CommandAndQueryBar: React.FC = () => {
           {Array.from(selectedServices).map((service) => (
             <span
               key={service}
-              className="inline-flex items-center gap-1 rounded-full bg-primary-container/20 text-primary-container border border-primary-container/40 px-2.5 py-0.5 font-mono text-xs font-semibold"
+              className="inline-flex items-center gap-1 rounded-full bg-ds-accent-bg text-ds-accent border border-ds-line px-2.5 py-0.5 font-mono text-xs font-semibold"
             >
               <span>service:{service}</span>
               <button
                 type="button"
                 onClick={() => toggleService(service)}
-                className="hover:text-white"
+                className="hover:text-ds-text"
               >
                 ×
               </button>
@@ -176,12 +177,12 @@ export const CommandAndQueryBar: React.FC = () => {
 
           {/* Errors Only Pill */}
           {showErrorsOnly && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-error-container text-on-error-container px-2.5 py-0.5 font-mono text-xs font-semibold">
+            <span className="inline-flex items-center gap-1 rounded-full bg-ds-critical-bg text-ds-critical px-2.5 py-0.5 font-mono text-xs font-semibold">
               <span>Errors Only</span>
               <button
                 type="button"
                 onClick={() => setShowErrorsOnly(false)}
-                className="hover:text-white"
+                className="hover:text-ds-text"
               >
                 ×
               </button>
@@ -190,12 +191,12 @@ export const CommandAndQueryBar: React.FC = () => {
 
           {/* Slow Spans Pill */}
           {minDurationMs > 0 && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/40 px-2.5 py-0.5 font-mono text-xs font-semibold">
+            <span className="inline-flex items-center gap-1 rounded-full bg-ds-warn-bg text-ds-warn border border-ds-warn/40 px-2.5 py-0.5 font-mono text-xs font-semibold">
               <span>Latency &gt;{minDurationMs}ms</span>
               <button
                 type="button"
                 onClick={() => setMinDurationMs(0)}
-                className="hover:text-white"
+                className="hover:text-ds-text"
               >
                 ×
               </button>
@@ -204,12 +205,12 @@ export const CommandAndQueryBar: React.FC = () => {
 
           {/* Search Query Pill */}
           {searchQuery && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-surface-container text-on-surface border border-surface-container-high px-2.5 py-0.5 font-mono text-xs">
+            <span className="inline-flex items-center gap-1 rounded-full bg-ds-surface-2 text-ds-text border border-ds-line px-2.5 py-0.5 font-mono text-xs">
               <span>query: &quot;{searchQuery}&quot;</span>
               <button
                 type="button"
                 onClick={() => setSearchQuery("")}
-                className="hover:text-white"
+                className="hover:text-ds-text"
               >
                 ×
               </button>
@@ -224,7 +225,7 @@ export const CommandAndQueryBar: React.FC = () => {
                 setMinDurationMs(0);
                 setTimeWindow("all");
               }}
-              className="text-outline hover:text-white font-mono text-xs underline ml-1"
+              className="text-ds-text-3 hover:text-ds-text font-mono text-xs underline ml-1"
             >
               Clear all
             </button>
@@ -236,10 +237,10 @@ export const CommandAndQueryBar: React.FC = () => {
           <button
             type="button"
             onClick={exportNDJSON}
-            className="flex items-center gap-1 px-2.5 py-1 bg-surface-container-low hover:bg-surface-container text-on-surface font-mono text-xs rounded-lg transition-colors border border-surface-container/40 shadow-sm"
+            className="flex items-center gap-1 px-2.5 py-1 bg-ds-surface hover:bg-ds-surface-2 text-ds-text font-mono text-xs rounded-lg transition-colors border border-ds-line shadow-sm"
             title="Export currently filtered telemetry signals as NDJSON"
           >
-            <span className="material-symbols-outlined text-[15px]">download</span>
+            <Download className="h-[15px] w-[15px] shrink-0" aria-hidden="true" />
             <span>Export NDJSON</span>
           </button>
         </div>