feat(frontend): rebuild as Ambient/WebGL console with all pages + command palette

Ground-up rombak UI: hapus semua component/page lama, bangun ulang dengan
desain sistem Ambient (WebGL haze + drifting motes, signal-driven color)
di atas kontrak API/WS/type yang sudah ada.

- Design system: globals.css tokens + primitives (glass, button, badge,
  select, avatar, toast, chart SVG murni).
- Shell: nav rail, topbar (status WS + pill signal + theme), AppFrame.
- 8 halaman: dashboard, voice (orbital stage), media, messages (live feed +
  detail AI), moderation, analysis (search), recordings, + chatbot floating.
- Command palette (Cmd/Ctrl+K) untuk navigasi cepat.
- Server fetch di-page di-try/catch agar render graceful saat backend mati.

Verified: tsc clean, next build 8/8 halaman, semua route 200.

services/frontend/src/components/primitives/select.tsx

@@ -1,26 +1,91 @@
-import { forwardRef, type SelectHTMLAttributes } from "react";
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Check, ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
-  mono?: boolean;
+export interface SelectOption {
+  value: string;
+  label: string;
+  hint?: string;
 }
 
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ className, mono, children, ...props }, ref) => (
-    <select
-      ref={ref}
-      className={cn(
-        "w-full bg-[var(--color-surface-2)] text-[var(--color-ink)] appearance-none cursor-pointer",
-        "rounded-[var(--radius-r-control)] border border-[var(--color-hairline)] px-3 py-2 text-sm",
-        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] transition-colors",
-        "bg-[url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 fill=%22none%22 stroke=%22%23aaa%22 stroke-width=%222%22><path d=%22M2 4l4 4 4-4%22/></svg>')] bg-[length:12px] bg-[right_0.75rem_center] bg-no-repeat pr-9",
-        mono && "font-mono tracking-tight",
-        className,
+export function Select({
+  value,
+  onChange,
+  options,
+  placeholder = "Select…",
+  className,
+  size = "md",
+}: {
+  value: string | null;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  className?: string;
+  size?: "sm" | "md";
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+
+  const selected = options.find((o) => o.value === value);
+
+  return (
+    <div ref={ref} className={cn("relative", className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className={cn(
+          "flex w-full items-center justify-between gap-2 rounded-[11px] border border-hairline bg-white/5 text-left text-ink transition-colors hover:border-signal/40",
+          "focus:outline-none focus:border-signal/60",
+          size === "sm" ? "h-9 px-3 text-xs" : "h-10 px-3.5 text-sm",
+        )}
+      >
+        <span className={cn("truncate", !selected && "text-ink-faint")}>
+          {selected?.label ?? placeholder}
+        </span>
+        <ChevronDown
+          className={cn("size-4 shrink-0 text-ink-faint transition-transform", open && "rotate-180")}
+        />
+      </button>
+
+      {open && (
+        <div
+          className="glass absolute z-50 mt-1.5 max-h-72 w-full overflow-auto p-1.5"
+          style={{ animation: "fade-up 0.14s ease" }}
+        >
+          {options.length === 0 && (
+            <div className="px-3 py-2 text-xs text-ink-faint">No options</div>
+          )}
+          {options.map((o) => (
+            <button
+              key={o.value}
+              type="button"
+              onClick={() => {
+                onChange(o.value);
+                setOpen(false);
+              }}
+              className={cn(
+                "flex w-full items-center justify-between gap-2 rounded-[9px] px-3 py-2 text-left text-sm transition-colors",
+                o.value === value ? "bg-signal/15 text-signal" : "text-ink hover:bg-white/6",
+              )}
+            >
+              <span className="truncate">{o.label}</span>
+              {o.hint && <span className="mono text-[0.65rem] text-ink-faint">{o.hint}</span>}
+              {o.value === value && <Check className="size-3.5 shrink-0" />}
+            </button>
+          ))}
+        </div>
       )}
-      {...props}
-    >
-      {children}
-    </select>
-  ),
-);
-Select.displayName = "Select";
+    </div>
+  );
+}