feat(frontend): add tactical HUD header and GSAP stagger deck to recordings route

services/frontend/src/app/(dashboard)/recordings/view.tsx

@@ -22,9 +22,9 @@ import {
   useRecordings,
   useRecordingsWsSync,
 } from "@/hooks";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { formatBytes, formatRelativeTime } from "@/lib/format";
 import type { VoiceRecording } from "@/lib/types";
-import { staggerDelay } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
 
 export function RecordingsView({
@@ -39,6 +39,12 @@ export function RecordingsView({
   const ambient = useAmbient();
   const [playingId, setPlayingId] = useState<string | null>(null);
 
+  const deckRef = useStaggerReveal<HTMLDivElement>(".recording-deck-card", {
+    stagger: 0.05,
+    y: 14,
+    dependencies: [items],
+  });
+
   useEffect(() => {
     ambient.set("signal", 0.3, "recordings");
   }, [ambient]);
@@ -83,6 +89,24 @@ export function RecordingsView({
     );
 
   return (
+    <div className="space-y-4">
+      {/* Tactical HUD Header Bar */}
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
+        <div className="flex items-center gap-3">
+          <div className="relative flex size-3 items-center justify-center">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-signal" />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            RECORDINGS · TAPE_DECK
+          </h1>
+        </div>
+        <div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
+          <span className="text-ink-faint">CLIPS:</span>
+          <span className="font-bold text-signal">{(items ?? []).length}</span>
+        </div>
+      </div>
+
       <GlassPanel>
         <SectionHeader
           eyebrow="voice captures"
@@ -100,19 +124,21 @@ export function RecordingsView({
             description="Voice clips captured by the bot appear here."
           />
         ) : (
-        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          <div
-          {(items ?? []).map((r, i) => {
+            ref={deckRef}
+            className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
+          >
+            {(items ?? []).map((r) => {
               const up = uploadStatus(r);
               const isPlaying = playingId === r.id;
               return (
                 <GlassCard
                   key={r.id}
-                className={`animate-stagger flex flex-col gap-3 transition-colors hover:bg-white/[0.06] ${
+                  className={`recording-deck-card flex flex-col gap-3 transition-colors hover:bg-white/[0.06] ${
                     isPlaying
                       ? "border-signal/40 shadow-[0_0_36px_-16px_var(--color-signal-glow)]"
                       : ""
                   }`}
-                style={staggerDelay(i)}
                 >
                   <div className="flex items-center gap-3">
                     <Avatar src={r.avatar_url} name={r.username} size={38} />
@@ -132,7 +158,9 @@ export function RecordingsView({
                       </div>
                     </div>
                     {isPlaying && <NowPlayingChip />}
-                  {up && !isPlaying && <Badge tone={up.tone}>{up.label}</Badge>}
+                    {up && !isPlaying && (
+                      <Badge tone={up.tone}>{up.label}</Badge>
+                    )}
                     <span className="mono text-[0.65rem] text-ink-faint">
                       {formatBytes(r.size_bytes)}
                     </span>
@@ -188,6 +216,7 @@ export function RecordingsView({
           </div>
         )}
       </GlassPanel>
+    </div>
   );
 }