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>

otel-ui/src/components/TodosVisualizer.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react"
-import { CheckCircle2, ExternalLink, ListTodo, RefreshCw, RotateCcw } from "lucide-react"
+import { CheckCircle2, Crosshair, ExternalLink, ListTodo, RefreshCw, RotateCcw } from "lucide-react"
 import { useTodos } from "../hooks/useTodos"
 import { formatRelativeTime } from "../lib/timeUtils"
 import type { Todo } from "../lib/types"
@@ -16,9 +16,20 @@ const TodoCard = ({ todo, onDone }: { todo: Todo; onDone: (todo: Todo, done: boo
       }`}
     >
       <div className="flex items-start gap-4">
-        <p className={`min-w-0 flex-1 whitespace-pre-wrap break-words text-[14px] ${todo.done ? "text-ds-text-3 line-through" : "text-ds-text"}`}>
-          {todo.text}
-        </p>
+        <div className="min-w-0 flex-1">
+          <p className={`whitespace-pre-wrap break-words text-[14px] ${todo.done ? "text-ds-text-3 line-through" : "text-ds-text"}`}>
+            {todo.text}
+          </p>
+          {todo.elementSelector && (
+            <div
+              title={todo.elementSelector}
+              className="mt-2 inline-flex max-w-full items-center gap-1.5 rounded-[7px] border border-ds-accent/25 bg-ds-accent-bg px-2 py-1 text-[11px] text-ds-accent"
+            >
+              <Crosshair className="h-3 w-3 shrink-0" aria-hidden="true" />
+              <span className="truncate font-[family-name:var(--font-data)]">{todo.elementLabel || todo.elementSelector}</span>
+            </div>
+          )}
+        </div>
         <div className="flex shrink-0 items-center gap-2">
           {todo.url && (
             <a
@@ -141,7 +152,7 @@ export const TodosVisualizer = () => {
           </p>
           {todos.length === 0 && !loading && (
             <p className="max-w-sm text-[12.5px] text-ds-text-3">
-              Press Alt+Shift+T on a page running otel-rum.js to file one.
+              Press Alt+Shift+T on a page running otel-rum.js to file one — click "Reference an element" in that dialog to point at what needs to change.
             </p>
           )}
         </div>