better rum todo

otel-ui/src/components/Tabs.tsx

@@ -7,6 +7,7 @@ import {
   CheckCircle2,
   ChevronDown,
   ChevronUp,
+  X,
 } from "lucide-react"
 import type { LucideIcon } from "lucide-react"
 import { MetricsVisualizer } from "./MetricsVisualizer"
@@ -398,11 +399,27 @@ export const TabsComponent = () => {
       {statusNotice && (
         <div
           role="status"
-          className={`fixed bottom-6 left-1/2 z-50 flex max-w-[min(560px,calc(100vw-120px))] -translate-x-1/2 items-center gap-3 rounded-[10px] border bg-ds-surface px-4 py-2.5 text-[13px] ${
-            statusNotice.error ? "border-ds-critical/40 text-ds-critical" : "border-ds-line-strong text-ds-text"
+          className={`fixed bottom-10 left-1/2 z-50 flex max-w-[min(560px,calc(100vw-120px))] -translate-x-1/2 items-center gap-3 overflow-hidden rounded-2xl border bg-ds-surface/90 py-2.5 pl-2.5 pr-4 text-[13px] shadow-[0_8px_30px_-8px_rgba(0,0,0,0.45)] backdrop-blur-md animate-in fade-in slide-in-from-bottom-3 duration-300 ${
+            statusNotice.error ? "border-ds-critical/30" : "border-ds-ok/25"
           }`}
         >
-          <span className="truncate">{statusNotice.text}</span>
+          <span
+            className={`pointer-events-none absolute inset-x-0 top-0 h-[2px] ${
+              statusNotice.error ? "bg-ds-critical/70" : "bg-ds-ok/70"
+            }`}
+            aria-hidden="true"
+          />
+          <span
+            className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full ${
+              statusNotice.error ? "bg-ds-critical-bg text-ds-critical" : "bg-ds-ok/15 text-ds-ok"
+            }`}
+            aria-hidden="true"
+          >
+            {statusNotice.error ? <AlertTriangle className="h-3.5 w-3.5" /> : <CheckCircle2 className="h-3.5 w-3.5" />}
+          </span>
+          <span className={`truncate ${statusNotice.error ? "text-ds-critical" : "text-ds-text"}`}>
+            {statusNotice.text}
+          </span>
           {statusNotice.undo && (
             <button
               type="button"
@@ -410,11 +427,19 @@ export const TabsComponent = () => {
                 statusNotice.undo?.()
                 setStatusNotice(null)
               }}
-              className="shrink-0 font-semibold text-ds-accent hover:underline"
+              className="shrink-0 rounded-full border border-ds-accent/30 bg-ds-accent-bg px-2.5 py-1 font-semibold text-ds-accent transition-colors hover:bg-ds-accent hover:text-ds-on-accent"
             >
               Undo
             </button>
           )}
+          <button
+            type="button"
+            onClick={() => setStatusNotice(null)}
+            aria-label="Dismiss"
+            className="shrink-0 rounded-full p-1 text-ds-text-3 transition-colors hover:bg-ds-fill hover:text-ds-text"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
         </div>
       )}
     </div>