Quick polish pass on remaining screens; hide legacy chrome on RUM tab

Normalize radii, drop shadows/blur and font-black, and document the
one-view-at-a-time plan in AGENTS.md.

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

AGENTS.md

@@ -153,7 +153,7 @@ Lessons from getting here:
   `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
+  `WaveformHistogram` still sit above every tab except Issues and RUM sessions (`isTriageOverview` in `App.tsx`). Restructure
   them onto `FilterBar` + the card/aside pattern when touching them.
 
 ### Finding old-pattern usages
@@ -164,3 +164,10 @@ grep -rnE "(bg|text|border|ring|from|to|via)-(slate|zinc|gray|sky|cyan|blue|viol
 ```
 
 Both must print nothing.
+
+### Working order from here
+
+Initial pass is done. Take **one view at a time** to the full screen pattern
+(FilterBar + card/aside layout, real buttons, fold or restyle the shared
+chrome for that screen), verify it in the browser in both themes, commit, then
+move to the next. Suggested order: Traces, Logs, Metrics, Search, Trends, Setup.

otel-ui/src/App.tsx

@@ -73,7 +73,7 @@ function App() {
   // The Issues tab is the redesigned triage overview: it owns its own filter
   // bar and cards, so the legacy anomaly banner and volume waveform above it
   // would just duplicate that UI in a different visual language.
-  const isTriageOverview = activeTab === "tab0";
+  const isTriageOverview = activeTab === "tab0" || activeTab === "tab7";
 
   if (isCallback) {
     return <AuthCallbackView />;

otel-ui/src/components/CommandAndQueryBar.tsx

@@ -102,7 +102,7 @@ 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-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="rounded-xl border border-ds-critical/30 bg-ds-surface-2 p-3 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-ds-critical-bg text-ds-critical border border-ds-critical/40">
               <AlertTriangle className="h-[18px] w-[18px] shrink-0" aria-hidden="true" />
@@ -130,7 +130,7 @@ export const CommandAndQueryBar: React.FC = () => {
             <button
               type="button"
               onClick={() => setActiveTab("tab0")}
-              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"
+              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"
             >
               Triage Issues
             </button>
@@ -148,7 +148,7 @@ 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-ds-bg border border-ds-line 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">
         <div className="flex items-center gap-2 flex-wrap">
           <span className="font-mono text-[10px] text-ds-text-3 uppercase tracking-wider font-semibold shrink-0">
             Active Context:
@@ -237,7 +237,7 @@ export const CommandAndQueryBar: React.FC = () => {
           <button
             type="button"
             onClick={exportNDJSON}
-            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"
+            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"
             title="Export currently filtered telemetry signals as NDJSON"
           >
             <Download className="h-[15px] w-[15px] shrink-0" aria-hidden="true" />

otel-ui/src/components/GaugeMeter.tsx

@@ -185,7 +185,7 @@ export const GaugeMeter = ({
   );
 
   return (
-    <div className="flex flex-col items-center justify-between rounded-2xl border border-ds-line bg-ds-surface-2 p-4 shadow-lg backdrop-blur-sm transition-all hover:border-ds-line-strong">
+    <div className="flex flex-col items-center justify-between rounded-[14px] border border-ds-line bg-ds-surface-2 p-4 transition-all hover:border-ds-line-strong">
       <div className="flex w-full items-start justify-between gap-2 border-b border-ds-line pb-2">
         <div className="flex flex-col min-w-0 pr-1">
           <div className="flex items-center gap-1 flex-wrap mb-1">
@@ -203,7 +203,7 @@ export const GaugeMeter = ({
                 className="inline-flex items-center gap-1 rounded bg-ds-accent-bg px-1.5 py-0.5 text-[9px] font-mono font-bold text-ds-accent border border-ds-accent/30"
                 title={`Sum of values across ${podCount} pods`}
               >
-                <span className="text-[11px] font-black leading-none text-ds-accent">∑</span>
+                <span className="text-[11px] font-bold leading-none text-ds-accent">∑</span>
                 <span>{podCount} pods</span>
               </span>
             )}
@@ -287,15 +287,15 @@ export const GaugeMeter = ({
         {/* Center Readout */}
         <div className="absolute inset-0 flex flex-col items-center justify-center pt-3 text-center pointer-events-none">
           {soloPod ? (
-            <span className="text-[8px] font-mono uppercase font-black text-ds-warn tracking-wider truncate max-w-[100px]" title={`Solo: ${soloPod}`}>
+            <span className="text-[8px] font-mono uppercase font-bold text-ds-warn tracking-wider truncate max-w-[100px]" title={`Solo: ${soloPod}`}>
               {soloPod}
             </span>
           ) : aggLabel ? (
-            <span className="text-[8.5px] font-mono uppercase font-black text-ds-accent tracking-wider">
+            <span className="text-[8.5px] font-mono uppercase font-bold text-ds-accent tracking-wider">
               {aggLabel}
             </span>
           ) : podCount !== undefined && podCount > 1 ? (
-            <span className="text-[8.5px] font-mono uppercase font-black text-ds-accent tracking-wider">
+            <span className="text-[8.5px] font-mono uppercase font-bold text-ds-accent tracking-wider">
               {isSum ? "Sum (∑)" : "Avg (μ)"}
             </span>
           ) : null}

otel-ui/src/components/MetricsVisualizer.tsx

@@ -303,7 +303,7 @@ const MetricCard = ({ name, service, type, points, unit, pods = [], index }: Met
     if (active && payload && payload.length) {
       const data = payload[0].payload;
       return (
-        <div className="z-50 flex flex-col gap-2 rounded-xl border border-ds-line bg-ds-bg/95 p-3 text-xs shadow-2xl backdrop-blur-md min-w-[220px]">
+        <div className="z-50 flex flex-col gap-2 rounded-xl border border-ds-line bg-ds-bg/95 p-3 text-xs min-w-[220px]">
           <div className="flex items-center justify-between gap-4 border-b border-ds-line pb-2">
             <span className="font-mono text-ds-text-2">
               {new Date(data.time).toLocaleTimeString([], {
@@ -394,11 +394,11 @@ const MetricCard = ({ name, service, type, points, unit, pods = [], index }: Met
   };
 
   return (
-    <article className="group relative flex flex-col overflow-hidden rounded-3xl border border-ds-line bg-ds-surface-2 transition-all hover:border-ds-line hover:bg-ds-surface-2">
+    <article className="group relative flex flex-col overflow-hidden rounded-[14px] border border-ds-line bg-ds-surface-2 transition-all hover:border-ds-line hover:bg-ds-surface-2">
       <header className="flex items-start justify-between p-5 border-b border-ds-line gap-3 flex-wrap sm:flex-nowrap">
         <div className="flex items-center gap-3 min-w-0">
           <div
-            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-ds-surface-2 shadow-md"
+            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-ds-surface-2"
             style={{
               backgroundImage: `linear-gradient(to bottom right, ${color.from}, ${color.to})`,
               color: "var(--ds-bg)",
@@ -555,7 +555,7 @@ const MetricCard = ({ name, service, type, points, unit, pods = [], index }: Met
             <div className="text-[9px] font-bold uppercase tracking-[0.2em] text-ds-text-3">
               {currentDisplay.label}
             </div>
-            <div className="text-lg font-black text-ds-text font-mono">
+            <div className="text-lg font-bold text-ds-text font-mono">
               {valueFormatter.format(currentDisplay.value)}
               {unit && <span className="ml-1 text-xs text-ds-text-2 font-normal">{unit}</span>}
             </div>
@@ -804,7 +804,7 @@ const MetricCard = ({ name, service, type, points, unit, pods = [], index }: Met
                 <span className={`font-bold ${isSelected ? "text-ds-warn" : pal.text}`}>
                   {valueFormatter.format(ps.value)}
                 </span>
-                {isSelected && <span className="text-[8.5px] uppercase font-black text-ds-warn">SOLO</span>}
+                {isSelected && <span className="text-[8.5px] uppercase font-bold text-ds-warn">SOLO</span>}
               </button>
             );
           })}
@@ -939,7 +939,7 @@ export const MetricsVisualizer = () => {
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <Gauge className="h-4 w-4 text-ds-accent" />
-              <h2 className="text-xs font-black uppercase tracking-[0.2em] text-ds-text-2">
+              <h2 className="text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
                 Live Gauge Dashboard
               </h2>
             </div>

otel-ui/src/components/NeedleTestModal.tsx

@@ -73,8 +73,8 @@ export const NeedleTestModal: React.FC<NeedleTestModalProps> = ({ isOpen, onClos
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-ds-bg/80 p-4 backdrop-blur-sm animate-fade-in">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-ds-bg/80 p-4 animate-fade-in">
-      <div className="relative flex flex-col w-full max-w-2xl rounded-2xl border border-ds-ok/30 bg-ds-bg/95 p-6 shadow-2xl  max-h-[90vh] overflow-y-auto">
+      <div className="relative flex flex-col w-full max-w-2xl rounded-[14px] border border-ds-ok/30 bg-ds-bg/95 p-6 max-h-[90vh] overflow-y-auto">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-ds-line pb-4">
           <div className="flex items-center gap-3">
@@ -148,7 +148,7 @@ export const NeedleTestModal: React.FC<NeedleTestModalProps> = ({ isOpen, onClos
             type="button"
             onClick={handleClassify}
             disabled={loading || !inputText.trim()}
-            className="inline-flex items-center gap-2 rounded-xl bg-ds-surface-2   px-4 py-2 text-xs font-bold text-ds-on-accent transition-all hover:opacity-95 active:scale-95 disabled:opacity-50 shadow-lg "
+            className="inline-flex items-center gap-2 rounded-xl bg-ds-surface-2 px-4 py-2 text-xs font-bold text-ds-on-accent transition-all hover:opacity-95 active:scale-95 disabled:opacity-50"
           >
             {loading ? (
               <>

otel-ui/src/components/PatternsVisualizer.tsx

@@ -62,7 +62,7 @@ export function PatternsVisualizer() {
   if (loading && patterns.length === 0) return <div className="py-16 text-center text-sm text-ds-text-3">Loading deterministic patterns…</div>
   return <div className="space-y-4">
     <div className="flex flex-wrap items-center gap-3 border-b border-ds-line pb-3">
-      <div><div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3"><GitBranch className="h-3 w-3 text-ds-accent" /> Similarity Patterns</div><div className="mt-1 text-xs text-ds-text-3">Exact issues stay separate; broader deterministic patterns are reviewable.</div></div>
+      <div><div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3"><GitBranch className="h-3 w-3 text-ds-accent" /> Similarity Patterns</div><div className="mt-1 text-xs text-ds-text-3">Exact issues stay separate; broader deterministic patterns are reviewable.</div></div>
       <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Filter patterns…" className="ml-auto rounded-lg border border-ds-line bg-ds-surface-2 px-3 py-2 text-xs text-ds-text outline-none placeholder:text-ds-text-3 focus:border-ds-accent/40" />
       <button onClick={() => void refresh()} className="inline-flex items-center gap-2 rounded-lg border border-ds-line px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-ds-text-2 hover:text-ds-text"><RefreshCw className="h-3 w-3" /> Refresh</button>
     </div>

otel-ui/src/components/RolloutsVisualizer.tsx

@@ -30,7 +30,7 @@ export function RolloutsVisualizer() {
   if (loading && rollouts.length === 0) return <div className="py-16 text-center text-sm text-ds-text-3">Loading cluster rollouts…</div>
   return <div className="space-y-4">
     <div className="flex flex-wrap items-center gap-3 border-b border-ds-line pb-3">
-      <div><div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3"><CloudCog className="h-3 w-3 text-ds-accent" /> Cluster Rollouts</div><div className="mt-1 text-xs text-ds-text-3">Read-only Kubernetes deployment state with optional Prometheus impact data.</div></div>
+      <div><div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3"><CloudCog className="h-3 w-3 text-ds-accent" /> Cluster Rollouts</div><div className="mt-1 text-xs text-ds-text-3">Read-only Kubernetes deployment state with optional Prometheus impact data.</div></div>
       <button onClick={() => void refresh()} className="ml-auto inline-flex items-center gap-2 rounded-lg border border-ds-line px-3 py-2 text-[10px] font-bold uppercase tracking-wider text-ds-text-2 hover:text-ds-text"><RefreshCw className="h-3 w-3" /> Refresh</button>
     </div>
     {error && <div className="rounded-lg border border-ds-warn/20 bg-ds-warn-bg p-3 text-xs text-ds-warn">Rollout watcher unavailable: {String(error)}</div>}

otel-ui/src/components/SearchAndWatcher.tsx

@@ -143,7 +143,7 @@ export const SearchAndWatcher: React.FC = () => {
   return (
     <div className="space-y-8 max-w-6xl font-body">
       {/* Top Banner */}
-      <div className="rounded-2xl border border-ds-accent/20 bg-ds-surface-2    p-5 shadow-xl backdrop-blur-md">
+      <div className="rounded-[14px] border border-ds-accent/20 bg-ds-surface-2 p-5">
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
           <div className="space-y-1">
             <div className="flex items-center gap-2">
@@ -162,11 +162,11 @@ export const SearchAndWatcher: React.FC = () => {
       </div>
 
       {/* SECTION 1: Live Signal Trap */}
-      <section className="rounded-2xl border border-ds-line bg-ds-surface-2 p-5 shadow-xl space-y-4">
+      <section className="rounded-[14px] border border-ds-line bg-ds-surface-2 p-5 space-y-4">
         <div className="flex items-center justify-between border-b border-ds-line pb-3">
           <div className="flex items-center gap-2">
             <Radar className="h-4 w-4 text-ds-accent" />
-            <h3 className="text-xs font-black uppercase tracking-[0.2em] text-ds-text-2">
+            <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
               Live Signal Trap (/api/history/wait)
             </h3>
           </div>
@@ -230,7 +230,7 @@ export const SearchAndWatcher: React.FC = () => {
               <button
                 type="button"
                 onClick={cancelWatcher}
-                className="h-9 px-4 rounded-xl bg-ds-critical hover:bg-ds-critical text-ds-text font-mono text-xs font-bold transition-colors flex items-center gap-1.5 shadow-lg "
+                className="h-9 px-4 rounded-xl bg-ds-critical hover:bg-ds-critical text-ds-text font-mono text-xs font-bold transition-colors flex items-center gap-1.5"
               >
                 <Square className="h-3.5 w-3.5 fill-current" />
                 <span>Cancel</span>
@@ -239,7 +239,7 @@ export const SearchAndWatcher: React.FC = () => {
               <button
                 type="button"
                 onClick={startWatcher}
-                className="h-9 px-4 rounded-xl bg-ds-accent hover:bg-ds-accent text-ds-text font-mono text-xs font-bold transition-colors flex items-center gap-1.5 shadow-lg "
+                className="h-9 px-4 rounded-xl bg-ds-accent hover:bg-ds-accent text-ds-text font-mono text-xs font-bold transition-colors flex items-center gap-1.5"
               >
                 <Play className="h-3.5 w-3.5 fill-current" />
                 <span>Arm Trap</span>
@@ -308,11 +308,11 @@ export const SearchAndWatcher: React.FC = () => {
       </section>
 
       {/* SECTION 2: Persistent Storage Search */}
-      <section className="rounded-2xl border border-ds-line bg-ds-surface-2 p-5 shadow-xl space-y-4">
+      <section className="rounded-[14px] border border-ds-line bg-ds-surface-2 p-5 space-y-4">
         <div className="flex items-center justify-between border-b border-ds-line pb-3">
           <div className="flex items-center gap-2">
             <Search className="h-4 w-4 text-ds-accent" />
-            <h3 className="text-xs font-black uppercase tracking-[0.2em] text-ds-text-2">
+            <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
               Query Persistent Telemetry Store (/api/history/search)
             </h3>
           </div>
@@ -389,7 +389,7 @@ export const SearchAndWatcher: React.FC = () => {
               <button
                 type="submit"
                 disabled={searchLoading}
-                className="w-full h-9 rounded-xl bg-ds-accent hover:bg-ds-accent text-ds-on-accent font-mono text-xs font-bold transition-colors flex items-center justify-center gap-1.5 shadow-lg  disabled:opacity-50"
+                className="w-full h-9 rounded-xl bg-ds-accent hover:bg-ds-accent text-ds-on-accent font-mono text-xs font-bold transition-colors flex items-center justify-center gap-1.5 disabled:opacity-50"
               >
                 <Search className="h-3.5 w-3.5" />
                 <span>{searchLoading ? "Searching..." : "Search"}</span>

otel-ui/src/components/ServiceGraph.tsx

@@ -220,7 +220,7 @@ export const ServiceGraph = ({
   const nodeMap = new Map(nodes.map((n) => [n.id, n]));
 
   return (
-    <div className="relative overflow-hidden rounded-2xl border border-ds-line bg-ds-surface-2 p-4 shadow-2xl backdrop-blur-md">
+    <div className="relative overflow-hidden rounded-[14px] border border-ds-line bg-ds-surface-2 p-4">
       <div className="mb-4 flex flex-wrap items-center justify-between gap-4 border-b border-ds-line pb-3">
         <div className="flex items-center gap-2">
           <Layers className="h-4 w-4 text-ds-accent" />

otel-ui/src/components/SetupPanel.tsx

@@ -48,7 +48,7 @@ export const SetupPanel = () => {
     <div className="space-y-6 max-w-3xl">
       <div className="rounded-xl border border-ds-line bg-ds-surface-2 p-5">
         <div className="flex items-center justify-between gap-4">
-          <span className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3">
+          <span className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3">
             <Globe className="h-3.5 w-3.5 text-ds-accent" />
             Browser instrumentation (otel-rum.js)
           </span>
@@ -87,7 +87,7 @@ export const SetupPanel = () => {
       </div>
 
       <div className="rounded-xl border border-ds-line bg-ds-surface-2 p-5">
-        <span className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3">
+        <span className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3">
           <FileText className="h-3.5 w-3.5 text-ds-accent" />
           Agent instructions
         </span>

otel-ui/src/components/StructuredLogTerminal.tsx

@@ -165,7 +165,7 @@ export const StructuredLogTerminal: React.FC<{ logs: LogEntry[] }> = ({ logs })
       {/* LEFT PANEL: Faceted Filter Breakdown (3 Cols) */}
       <aside className="lg:col-span-3 flex flex-col gap-4">
         {/* Severity Breakdown Card */}
-        <div className="bg-ds-bg p-4 rounded-xl shadow-md flex flex-col gap-2 border border-ds-line">
+        <div className="bg-ds-bg p-4 rounded-xl flex flex-col gap-2 border border-ds-line">
           <div className="flex items-center justify-between pb-1 border-b border-ds-line">
             <span className="font-mono text-[10px] text-ds-text-3 uppercase tracking-wider font-semibold">
               Severity Breakdown
@@ -263,7 +263,7 @@ export const StructuredLogTerminal: React.FC<{ logs: LogEntry[] }> = ({ logs })
         </div>
 
         {/* Service Facet Card */}
-        <div className="bg-ds-bg p-4 rounded-xl shadow-md flex flex-col gap-2 border border-ds-line">
+        <div className="bg-ds-bg p-4 rounded-xl flex flex-col gap-2 border border-ds-line">
           <div className="flex items-center justify-between pb-1 border-b border-ds-line">
             <span className="font-mono text-[10px] text-ds-text-3 uppercase tracking-wider font-semibold">
               Service Name
@@ -303,7 +303,7 @@ export const StructuredLogTerminal: React.FC<{ logs: LogEntry[] }> = ({ logs })
         </div>
 
         {/* AI Root Cause Diagnostic Hint Box */}
-        <div className="bg-ds-surface p-4 rounded-xl shadow-md flex flex-col gap-1.5 border border-ds-line">
+        <div className="bg-ds-surface p-4 rounded-xl flex flex-col gap-1.5 border border-ds-line">
           <div className="flex items-center gap-2 text-ds-accent">
             <Brain className="h-[18px] w-[18px] shrink-0" aria-hidden="true" />
             <span className="font-[family-name:var(--font-display)] font-semibold text-xs leading-none">
@@ -328,7 +328,7 @@ export const StructuredLogTerminal: React.FC<{ logs: LogEntry[] }> = ({ logs })
       </aside>
 
       {/* RIGHT PANEL: High-Density Structured Live Log Stream (9 Cols) */}
-      <main className="lg:col-span-9 flex flex-col bg-ds-bg rounded-xl shadow-md overflow-hidden border border-ds-line">
+      <main className="lg:col-span-9 flex flex-col bg-ds-bg rounded-xl overflow-hidden border border-ds-line">
         {/* Stream Controls Bar */}
         <div className="flex flex-wrap items-center justify-between gap-2 p-2.5 bg-ds-surface border-b border-ds-line">
           <div className="flex items-center gap-2 flex-1 min-w-[240px]">

otel-ui/src/components/Tabs.tsx

@@ -250,7 +250,7 @@ export const LogEntryView = ({ log }: { log: LogEntry }) => {
                   {record.traceId && (
                     <button
                       onClick={() => navigateToSpan(record.traceId!, record.spanId)}
-                      className="inline-flex items-center gap-2 rounded-xl bg-ds-accent px-4 py-2 text-[10px] font-black uppercase tracking-widest text-ds-on-accent transition-all hover:bg-ds-accent hover:scale-[1.02] active:scale-[0.98] shadow-lg "
+                      className="inline-flex items-center gap-2 rounded-xl bg-ds-accent px-4 py-2 text-[10px] font-bold uppercase tracking-widest text-ds-on-accent transition-all hover:bg-ds-accent hover:scale-[1.02] active:scale-[0.98]"
                     >
                       <Activity className="h-3 w-3" />
                       Jump to Span in Trace

otel-ui/src/components/TraceVisualization.tsx

@@ -191,7 +191,7 @@ const SpanInspector = ({
     traceTotalRange > 0 ? ((span.duration / traceTotalRange) * 100).toFixed(1) : "100";
 
   return (
-    <aside className="flex flex-col h-full rounded-2xl border border-ds-line bg-ds-bg/95 shadow-2xl backdrop-blur-xl animate-in slide-in-from-right-4 duration-300">
+    <aside className="flex flex-col h-full rounded-[14px] border border-ds-line bg-ds-bg/95 animate-in slide-in-from-right-4 duration-300">
       {/* Header */}
       <div className="flex items-start justify-between border-b border-ds-line p-4">
         <div className="space-y-1 min-w-0 pr-2">
@@ -278,7 +278,7 @@ const SpanInspector = ({
           <div className="space-y-4">
             <div className="grid grid-cols-2 gap-3">
               <div className="rounded-xl border border-ds-line bg-ds-surface-2 p-3 space-y-1">
-                <span className="text-[9px] font-black uppercase tracking-wider text-ds-text-3">
+                <span className="text-[9px] font-bold uppercase tracking-wider text-ds-text-3">
                   Duration
                 </span>
                 <p className="font-mono text-base font-bold text-ds-text">
@@ -287,7 +287,7 @@ const SpanInspector = ({
                 <p className="text-[10px] text-ds-text-2">{percentageOfTrace}% of total trace</p>
               </div>
               <div className="rounded-xl border border-ds-line bg-ds-surface-2 p-3 space-y-1">
-                <span className="text-[9px] font-black uppercase tracking-wider text-ds-text-3">
+                <span className="text-[9px] font-bold uppercase tracking-wider text-ds-text-3">
                   Start Time
                 </span>
                 <p className="font-mono text-[11px] font-bold text-ds-text">
@@ -305,7 +305,7 @@ const SpanInspector = ({
             </div>
 
             <div className="space-y-2 rounded-xl border border-ds-line bg-ds-surface-2 p-3">
-              <span className="text-[10px] font-black uppercase tracking-widest text-ds-text-3">
+              <span className="text-[10px] font-bold uppercase tracking-widest text-ds-text-3">
                 Identifiers
               </span>
               <div className="space-y-2 font-mono text-[11px]">
@@ -584,7 +584,7 @@ const VirtualizedSpanWaterfall = ({
   const rulerTicks = [0, 0.25, 0.5, 0.75, 1];
 
   return (
-    <div className="flex flex-col rounded-2xl border border-ds-line bg-ds-surface-2 shadow-xl overflow-hidden">
+    <div className="flex flex-col rounded-[14px] border border-ds-line bg-ds-surface-2 overflow-hidden">
       {/* Waterfall Toolbar */}
       <div className="flex flex-wrap items-center justify-between gap-3 border-b border-ds-line bg-ds-surface-2 px-4 py-2.5">
         <div className="flex items-center gap-2">
@@ -656,7 +656,7 @@ const VirtualizedSpanWaterfall = ({
       </div>
 
       {/* Synchronized Time Ruler Header */}
-      <div className="grid grid-cols-12 border-b border-ds-line bg-ds-surface-2 px-4 py-2 text-[10px] font-black uppercase tracking-wider text-ds-text-3 select-none">
+      <div className="grid grid-cols-12 border-b border-ds-line bg-ds-surface-2 px-4 py-2 text-[10px] font-bold uppercase tracking-wider text-ds-text-3 select-none">
         <div className="col-span-12 sm:col-span-6 lg:col-span-5 flex items-center justify-between pr-4">
           <span>Hierarchy & Operation</span>
           <span>Duration</span>
@@ -914,13 +914,13 @@ const SingleTraceView = ({
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-3 font-mono text-xs">
             <div className="text-right">
-              <span className="text-[9px] font-black uppercase tracking-wider text-ds-text-3 block">
+              <span className="text-[9px] font-bold uppercase tracking-wider text-ds-text-3 block">
                 Total Spans
               </span>
               <span className="font-bold text-ds-text">{trace.spans.length}</span>
             </div>
             <div className="text-right">
-              <span className="text-[9px] font-black uppercase tracking-wider text-ds-text-3 block">
+              <span className="text-[9px] font-bold uppercase tracking-wider text-ds-text-3 block">
                 Duration
               </span>
               <span
@@ -962,7 +962,7 @@ const SingleTraceView = ({
       </header>
 
       {/* Visual Service Distribution Timeline Bar */}
-      <div className="space-y-1.5 rounded-2xl border border-ds-line bg-ds-surface-2 p-3">
+      <div className="space-y-1.5 rounded-[14px] border border-ds-line bg-ds-surface-2 p-3">
         <div className="flex items-center justify-between text-[10px] font-bold text-ds-text-2">
           <span className="uppercase tracking-widest text-ds-text-3">Service Time Distribution</span>
           <div className="flex gap-3">
@@ -1084,7 +1084,7 @@ const TracePickerDropdown = ({
       <button
         type="button"
         onClick={() => setIsOpen((prev) => !prev)}
-        className="flex items-center gap-2 rounded-xl bg-ds-surface-2 border border-ds-line-strong px-3 py-1.5 text-xs font-bold text-ds-text hover:border-ds-line-strong hover:bg-ds-surface transition-all shadow-sm"
+        className="flex items-center gap-2 rounded-xl bg-ds-surface-2 border border-ds-line-strong px-3 py-1.5 text-xs font-bold text-ds-text hover:border-ds-line-strong hover:bg-ds-surface transition-all"
         title="Switch trace"
       >
         <span
@@ -1107,7 +1107,7 @@ const TracePickerDropdown = ({
       </button>
 
       {isOpen && (
-        <div className="absolute left-0 top-full mt-2 w-80 sm:w-96 z-50 rounded-2xl border border-ds-line-strong bg-ds-bg/95 shadow-2xl backdrop-blur-xl p-3 flex flex-col gap-2 animate-in fade-in slide-in-from-top-2 duration-150">
+        <div className="absolute left-0 top-full mt-2 w-80 sm:w-96 z-50 rounded-[14px] border border-ds-line-strong bg-ds-bg/95 p-3 flex flex-col gap-2 animate-in fade-in slide-in-from-top-2 duration-150">
           <div className="relative flex items-center">
             <Search className="absolute left-2.5 h-3.5 w-3.5 text-ds-text-3 pointer-events-none" />
             <input
@@ -1234,7 +1234,7 @@ const TraceDirectoryTable = ({
   }, [traces]);
 
   return (
-    <div className="space-y-4 rounded-3xl border border-ds-line bg-ds-surface-2 p-5 shadow-xl">
+    <div className="space-y-4 rounded-[14px] border border-ds-line bg-ds-surface-2 p-5">
       {/* Directory Header & Toolbar */}
       <div className="flex flex-col md:flex-row md:items-center justify-between gap-3 border-b border-ds-line pb-4">
         <div className="flex items-center gap-3">
@@ -1262,7 +1262,7 @@ const TraceDirectoryTable = ({
         <button
           type="button"
           onClick={onSwitchToWaterfall}
-          className="flex items-center gap-1.5 self-start md:self-auto rounded-xl bg-ds-accent-bg hover:bg-ds-accent-bg text-ds-accent border border-ds-accent/30 px-3.5 py-2 text-xs font-bold transition-all shadow-sm"
+          className="flex items-center gap-1.5 self-start md:self-auto rounded-xl bg-ds-accent-bg hover:bg-ds-accent-bg text-ds-accent border border-ds-accent/30 px-3.5 py-2 text-xs font-bold transition-all"
         >
           <SlidersHorizontal className="h-3.5 w-3.5" />
           Open Waterfall Detail
@@ -1270,7 +1270,7 @@ const TraceDirectoryTable = ({
       </div>
 
       {/* Filter and Search Controls */}
-      <div className="flex flex-wrap items-center justify-between gap-3 bg-ds-surface-2 p-3 rounded-2xl border border-ds-line">
+      <div className="flex flex-wrap items-center justify-between gap-3 bg-ds-surface-2 p-3 rounded-[14px] border border-ds-line">
         <div className="flex items-center gap-2 flex-1 min-w-[220px] max-w-md">
           <div className="relative flex-1">
             <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-ds-text-3 pointer-events-none" />
@@ -1386,10 +1386,10 @@ const TraceDirectoryTable = ({
           No traces match your filter or search criteria.
         </div>
       ) : (
-        <div className="overflow-x-auto rounded-2xl border border-ds-line bg-ds-surface-2">
+        <div className="overflow-x-auto rounded-[14px] border border-ds-line bg-ds-surface-2">
           <table className="w-full text-left border-collapse">
             <thead>
-              <tr className="border-b border-ds-line bg-ds-surface-2 text-[10px] font-black uppercase tracking-wider text-ds-text-3">
+              <tr className="border-b border-ds-line bg-ds-surface-2 text-[10px] font-bold uppercase tracking-wider text-ds-text-3">
                 <th className="py-3 px-4">Status</th>
                 <th className="py-3 px-4">Trace / Operation</th>
                 <th className="py-3 px-4">Services</th>
@@ -1710,7 +1710,7 @@ export const TraceVisualization = ({ traces }: TraceVisualizationProps) => {
 
   if (orderedTraces.length === 0) {
     return (
-      <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-ds-line-strong bg-ds-surface-2 p-12 text-center text-ds-text-2">
+      <div className="flex min-h-[300px] flex-col items-center justify-center gap-4 rounded-[14px] border border-dashed border-ds-line-strong bg-ds-surface-2 p-12 text-center text-ds-text-2">
         <Sparkles className="h-10 w-10 text-ds-accent" />
         <div>
           <p className="text-lg font-semibold text-ds-text">No traces match your filters</p>
@@ -1744,7 +1744,7 @@ export const TraceVisualization = ({ traces }: TraceVisualizationProps) => {
     <div className="space-y-5">
       {/* Waveform Focus Notification Banner if Active */}
       {selectedTimeRange && (
-        <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-ds-accent/30 bg-ds-accent-bg px-4 py-2.5 text-xs text-ds-accent">
+        <div className="flex flex-wrap items-center justify-between gap-3 rounded-[14px] border border-ds-accent/30 bg-ds-accent-bg px-4 py-2.5 text-xs text-ds-accent">
           <div className="flex items-center gap-2.5">
             <span className="flex h-2 w-2 rounded-full bg-ds-accent animate-ping" />
             <span>

otel-ui/src/components/TrendsVisualizer.tsx

@@ -36,7 +36,7 @@ const ChartTooltip = ({ active, payload, granularity }: any) => {
   const p = payload[0].payload
   const d = new Date(String(p.bucket).replace(" ", "T") + "Z")
   return (
-    <div className="rounded-xl border border-ds-line bg-ds-bg/95 p-3 text-xs shadow-2xl backdrop-blur-md">
+    <div className="rounded-xl border border-ds-line bg-ds-bg/95 p-3 text-xs">
       <div className="mb-1 font-mono text-[10px] text-ds-text-2">
         {d.toLocaleString([], {
           month: "short",
@@ -116,9 +116,9 @@ export const TrendsVisualizer = () => {
   return (
     <div className="space-y-6">
       {/* Toolbar */}
-      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-3 border-b border-ds-line bg-ds-bg/95 py-2 backdrop-blur">
+      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-3 border-b border-ds-line bg-ds-bg/95 py-2">
         <div className="flex flex-wrap items-center gap-3">
-          <span className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-text-3">
+          <span className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-text-3">
             <GitCompareArrows className="h-3 w-3 text-ds-accent" />
             Historical Trends
           </span>
@@ -178,7 +178,7 @@ export const TrendsVisualizer = () => {
       )}
 
       {/* Error trend */}
-      <section className="rounded-2xl border border-ds-line bg-ds-surface-2 p-4">
+      <section className="rounded-[14px] border border-ds-line bg-ds-surface-2 p-4">
         <header className="mb-3 flex items-center justify-between">
           <h3 className="flex items-center gap-2 text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
             <AlertOctagon className="h-3.5 w-3.5 text-ds-critical" />
@@ -253,7 +253,7 @@ export const TrendsVisualizer = () => {
       </section>
 
       {/* Release comparison */}
-      <section className="rounded-2xl border border-ds-line bg-ds-surface-2 p-4">
+      <section className="rounded-[14px] border border-ds-line bg-ds-surface-2 p-4">
         <header className="mb-3 flex items-center justify-between">
           <h3 className="flex items-center gap-2 text-xs font-bold uppercase tracking-[0.2em] text-ds-text-2">
             <GitCompareArrows className="h-3.5 w-3.5 text-ds-accent" />

otel-ui/src/components/ViewErrorBoundary.tsx

@@ -35,7 +35,7 @@ export class ViewErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.error) {
       return (
-        <div className="flex min-h-[240px] flex-col items-center justify-center gap-4 rounded-3xl border border-ds-critical/20 bg-ds-critical-bg p-12 text-center">
+        <div className="flex min-h-[240px] flex-col items-center justify-center gap-4 rounded-[14px] border border-ds-critical/20 bg-ds-critical-bg p-12 text-center">
           <AlertTriangle className="h-10 w-10 text-ds-critical" />
           <div>
             <p className="text-lg font-semibold text-ds-text">
@@ -48,7 +48,7 @@ export class ViewErrorBoundary extends Component<Props, State> {
           <button
             type="button"
             onClick={() => this.setState({ error: null })}
-            className="inline-flex items-center gap-2 rounded-xl border border-ds-critical/30 bg-ds-critical-bg px-4 py-2 text-[10px] font-black uppercase tracking-[0.2em] text-ds-critical transition-all hover:bg-ds-critical-bg"
+            className="inline-flex items-center gap-2 rounded-xl border border-ds-critical/30 bg-ds-critical-bg px-4 py-2 text-[10px] font-bold uppercase tracking-[0.2em] text-ds-critical transition-all hover:bg-ds-critical-bg"
           >
             <RotateCcw className="h-3 w-3" />
             Retry

otel-ui/src/components/WaveformHistogram.tsx

@@ -168,7 +168,7 @@ export const WaveformHistogram = () => {
 
   if (buckets.length === 0) {
     return (
-      <div className="relative bg-ds-bg p-3.5 rounded-xl shadow-md mb-4 border border-ds-line">
+      <div className="relative bg-ds-bg p-3.5 rounded-xl mb-4 border border-ds-line">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Activity className="text-ds-accent h-[18px] w-[18px] shrink-0" aria-hidden="true" />
@@ -183,7 +183,7 @@ export const WaveformHistogram = () => {
   }
 
   return (
-    <div className="relative bg-ds-bg p-3.5 rounded-xl shadow-md mb-4 overflow-hidden border border-ds-line font-body">
+    <div className="relative bg-ds-bg p-3.5 rounded-xl mb-4 overflow-hidden border border-ds-line font-body">
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-2">
         <div className="flex items-center gap-3 flex-wrap">
           <button
@@ -268,7 +268,7 @@ export const WaveformHistogram = () => {
                     {/* Active Selection Focus Pin Indicator */}
                     {isSelected && (
                       <div className="absolute -top-4 left-1/2 -translate-x-1/2 flex flex-col items-center pointer-events-none z-20 whitespace-nowrap">
-                        <span className="px-1.5 py-0.5 bg-ds-accent text-ds-on-accent font-mono text-[9px] font-black rounded shadow">
+                        <span className="px-1.5 py-0.5 bg-ds-accent text-ds-on-accent font-mono text-[9px] font-bold rounded shadow">
                           FOCUS
                         </span>
                         <span className="w-0.5 h-1 bg-ds-accent"></span>