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/lib/issue-utils.ts

@@ -55,12 +55,12 @@ export function parseBreadcrumbs(raw?: string): ParsedBreadcrumb[] {
 export type IssueStatus = "open" | "resolved" | "ignored"
 
 export const issueStatusMeta: Record<IssueStatus, { label: string; className: string }> = {
-  open: { label: "Open", className: "bg-rose-500/10 text-rose-300 border-rose-500/20" },
+  open: { label: "Open", className: "bg-ds-critical-bg text-ds-critical border-ds-critical/20" },
   resolved: {
     label: "Resolved",
-    className: "bg-emerald-500/10 text-emerald-300 border-emerald-500/20",
+    className: "bg-ds-ok/15 text-ds-ok border-ds-ok/20",
   },
-  ignored: { label: "Ignored", className: "bg-slate-500/10 text-slate-400 border-white/10" },
+  ignored: { label: "Ignored", className: "bg-ds-fill text-ds-text-2 border-ds-line" },
 }
 
 export function issueStatusOf(issue: Issue): IssueStatus {

otel-ui/src/lib/otel-utils.ts

@@ -124,16 +124,26 @@ export function getPodName(
   return "";
 }
 
-export const POD_COLORS = [
-  { stroke: "#38bdf8", fill: "#38bdf8", text: "text-sky-400", bg: "bg-sky-500/10", border: "border-sky-500/20" },
-  { stroke: "#a855f7", fill: "#a855f7", text: "text-purple-400", bg: "bg-purple-500/10", border: "border-purple-500/20" },
-  { stroke: "#34d399", fill: "#34d399", text: "text-emerald-400", bg: "bg-emerald-500/10", border: "border-emerald-500/20" },
-  { stroke: "#fbbf24", fill: "#fbbf24", text: "text-amber-400", bg: "bg-amber-500/10", border: "border-amber-500/20" },
-  { stroke: "#fb7185", fill: "#fb7185", text: "text-rose-400", bg: "bg-rose-500/10", border: "border-rose-500/20" },
-  { stroke: "#22d3ee", fill: "#22d3ee", text: "text-cyan-400", bg: "bg-cyan-500/10", border: "border-cyan-500/20" },
-  { stroke: "#f472b6", fill: "#f472b6", text: "text-pink-400", bg: "bg-pink-500/10", border: "border-pink-500/20" },
-  { stroke: "#818cf8", fill: "#818cf8", text: "text-indigo-400", bg: "bg-indigo-500/10", border: "border-indigo-500/20" },
+// Chart-series colours (metrics lines, pod chips). Muted, distinct hues that
+// read on both themes. Data-viz exception to the "one accent" rule; chrome
+// around them (chip background/border/text) stays neutral ds-*.
+const SERIES_HUES = [
+  "var(--ds-accent)",
+  "var(--ds-ok)",
+  "var(--ds-warn)",
+  "#B07CC6",
+  "#4FB3BF",
+  "#C9788F",
+  "#8FA35A",
+  "#7F8FA6",
 ];
+export const POD_COLORS = SERIES_HUES.map((c) => ({
+  stroke: c,
+  fill: c,
+  text: "text-ds-text-2",
+  bg: "bg-ds-surface-2",
+  border: "border-ds-line-strong",
+}));
 
 export function getPodPalette(pod: string) {
   return POD_COLORS[hashString(pod) % POD_COLORS.length] ?? POD_COLORS[0];
@@ -147,50 +157,12 @@ export const formatAttributeValue = (value: AttributeValue): string => {
   return "unknown";
 };
 
-export const servicePalettes = [
-  {
-    gradient: "from-violet-600 via-indigo-600 to-sky-600",
-    ring: "ring-violet-400/40",
-    text: "text-violet-400",
-    bg: "bg-violet-400/10",
-    border: "border-violet-400/20",
-  },
-  {
-    gradient: "from-emerald-500 via-teal-600 to-cyan-700",
-    ring: "ring-emerald-400/40",
-    text: "text-emerald-400",
-    bg: "bg-emerald-400/10",
-    border: "border-emerald-400/20",
-  },
-  {
-    gradient: "from-amber-600 via-orange-600 to-rose-600",
-    ring: "ring-amber-400/40",
-    text: "text-amber-400",
-    bg: "bg-amber-400/10",
-    border: "border-amber-400/20",
-  },
-  {
-    gradient: "from-fuchsia-600 via-purple-600 to-indigo-700",
-    ring: "ring-purple-400/40",
-    text: "text-fuchsia-400",
-    bg: "bg-fuchsia-400/10",
-    border: "border-fuchsia-400/20",
-  },
-  {
-    gradient: "from-sky-500 via-blue-600 to-indigo-700",
-    ring: "ring-sky-400/40",
-    text: "text-sky-400",
-    bg: "bg-sky-400/10",
-    border: "border-sky-400/20",
-  },
-  {
-    gradient: "from-lime-500 via-emerald-600 to-teal-700",
-    ring: "ring-lime-400/40",
-    text: "text-lime-400",
-    bg: "bg-lime-400/10",
-    border: "border-lime-400/20",
-  },
-];
+// Muted per-service colours, reserved for trace-waterfall span bars and the
+// service time-distribution bar. Never use for general UI chrome.
+export const spanColors = ["#6C7BD6", "#3FA37F", "#C8963E", "#A56BB8", "#4A9DB5", "#8DA04E"];
+
+export const getSpanColor = (service: string): string =>
+  spanColors[hashString(service) % spanColors.length] ?? spanColors[0];
 
 export const hashString = (value: string): number => {
   let hash = 0;
@@ -201,9 +173,13 @@ export const hashString = (value: string): number => {
   return Math.abs(hash);
 };
 
-export const getServicePalette = (service: string) => {
-  const palette =
-    servicePalettes[hashString(service) % servicePalettes.length] ??
-    servicePalettes[0];
-  return palette;
+// Neutral service badge classes. Services are told apart by name, not colour.
+const neutralServicePalette = {
+  gradient: "",
+  ring: "ring-ds-line-strong",
+  text: "text-ds-text-2",
+  bg: "bg-ds-surface-2",
+  border: "border-ds-line-strong",
 };
+
+export const getServicePalette = (_service: string) => neutralServicePalette;