feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/components/DebugRecorder.tsx

@@ -29,6 +29,7 @@ import SegmentedToggle from "./ui/SegmentedToggle";
 import IssueComposer from "./IssueComposer";
 import { useDebugRecording } from "./useDebugRecording";
 import { Input } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
 
 // The debug recorder (E16): Start → reproduce → Stop.
 //
@@ -152,7 +153,7 @@ function RecorderPill() {
     <div
       role="group"
       aria-label={t("recorder.pill.label")}
-      className={`relative glass rounded-full h-12 pl-3 sm:pl-4 pr-1.5 flex items-center gap-1.5 sm:gap-2 shadow-lg ${
+      className={`relative ${SURFACE.floating} h-12 pl-3 sm:pl-4 pr-1.5 flex items-center gap-1.5 sm:gap-2 shadow-lg ${
         hidden ? "invisible" : ""
       }`}
     >
@@ -304,7 +305,9 @@ function StepPrompt({ id, onDone }: { id: string; onDone: (label: string | null)
     }
   };
   return (
-    <div className="absolute bottom-full left-0 mb-2 w-80 max-w-[calc(100vw-2rem)] glass rounded-xl p-3 flex flex-col gap-2 shadow-lg">
+    <div
+      className={`${SURFACE.popover} absolute bottom-full left-0 mb-2 w-80 max-w-[calc(100vw-2rem)] p-3 flex flex-col gap-2`}
+    >
       <label htmlFor="debug-step-label" className="text-sm text-muted">
         {t("recorder.pill.stepPrompt", { n })}
       </label>