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

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import {
   AlertTriangle,
   Ban,
@@ -13,7 +15,7 @@ import {
   UserX,
   XCircle,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
 import { CategoryDrilldown } from "@/components/CategoryDrilldown";
 import { CoverageTiles } from "@/components/CoverageTiles";
@@ -58,6 +60,10 @@ import type {
 } from "@/lib/types";
 import { staggerDelay } from "@/lib/utils";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 const ACTION_ICON: Record<ModerationActionType, React.ReactNode> = {
   delete_message: <Trash2 className="size-3.5" />,
   mute_user: <MicOff className="size-3.5" />,
@@ -127,6 +133,32 @@ export function ModerationView({
     );
   }, [failedRate, ambient]);
 
+  // Alert-priority HUD: a GSAP pulse loop on the inverted mono badge when
+  // there is anything pending review — cleared up when the queue empties.
+  const alertRef = useRef<HTMLDivElement>(null);
+  const pendingCount = stats?.pending ?? 0;
+  useGSAP(
+    () => {
+      if (!alertRef.current || pendingCount <= 0) return;
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) return;
+      const tl = gsap.timeline({ repeat: -1, yoyo: true });
+      tl.to(alertRef.current, {
+        opacity: 0.45,
+        duration: 0.7,
+        ease: "sine.inOut",
+      });
+      return () => {
+        tl.kill();
+        if (alertRef.current)
+          gsap.set(alertRef.current, { clearProps: "opacity" });
+      };
+    },
+    { scope: alertRef, dependencies: [pendingCount] },
+  );
+
   if (error && !stats)
     return <ErrorState error={error} onRetry={() => void mutateStats()} />;
   if (!stats && isLoading)
@@ -160,7 +192,39 @@ export function ModerationView({
   ];
 
   return (
-    <div className="space-y-5">
+    <div className="space-y-4">
+      {/* Alert-priority HUD header */}
+      <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 rounded-full opacity-75 ${
+                pendingCount > 0 ? "animate-ping bg-ink" : "bg-signal"
+              }`}
+            />
+            <span
+              className={`relative inline-flex size-2 rounded-full ${
+                pendingCount > 0 ? "bg-ink" : "bg-signal"
+              }`}
+            />
+          </div>
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
+            AUTO-MOD RADAR · ALERT_QUEUE
+          </h1>
+        </div>
+        <div
+          ref={alertRef}
+          className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-0.5 font-mono text-[11px] font-bold uppercase ${
+            pendingCount > 0
+              ? "border border-ink bg-ink text-canvas"
+              : "bg-surface text-ink-soft"
+          }`}
+        >
+          <span>{pendingCount > 0 ? "PENDING" : "QUEUE CLEAR"}</span>
+          {pendingCount > 0 && <span>· {pendingCount}</span>}
+        </div>
+      </div>
+
       <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
         <MetricTile
           label="Total actions"

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,111 +89,134 @@ export function RecordingsView({
     );
 
   return (
-    <GlassPanel>
+    <div className="space-y-4">
-      <SectionHeader
+      {/* Tactical HUD Header Bar */}
-        eyebrow="voice captures"
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
-        title="Recordings"
+        <div className="flex items-center gap-3">
-        action={
+          <div className="relative flex size-3 items-center justify-center">
-          <span className="mono text-xs text-ink-faint">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
-            {(items ?? []).length} clips
+            <span className="relative inline-flex size-2 rounded-full bg-signal" />
-          </span>
+          </div>
-        }
+          <h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
-      />
+            RECORDINGS · TAPE_DECK
-      {(items ?? []).length === 0 ? (
+          </h1>
-        <EmptyState
-          icon={<Headphones className="size-7" />}
-          title="No recordings"
-          description="Voice clips captured by the bot appear here."
-        />
-      ) : (
-        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-          {(items ?? []).map((r, i) => {
-            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] ${
-                  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} />
-                  <div className="min-w-0 flex-1">
-                    <div className="truncate text-sm font-semibold text-ink">
-                      {r.username}
-                    </div>
-                    <div className="flex items-center gap-1.5 text-[0.65rem] text-ink-faint">
-                      <Hash className="size-3" />
-                      <span className="truncate">
-                        {r.channel_name ?? "voice"}
-                      </span>
-                      <span className="text-ink-faint/60">·</span>
-                      <span className="mono">
-                        {formatRelativeTime(r.created_at)}
-                      </span>
-                    </div>
-                  </div>
-                  {isPlaying && <NowPlayingChip />}
-                  {up && !isPlaying && <Badge tone={up.tone}>{up.label}</Badge>}
-                  <span className="mono text-[0.65rem] text-ink-faint">
-                    {formatBytes(r.size_bytes)}
-                  </span>
-                </div>
-
-                {r.download_url ? (
-                  <RecordingAudioPlayer
-                    src={r.download_url}
-                    label={`Voice recording by ${r.username}`}
-                    onPlayStateChange={(active) =>
-                      setPlayingId((prev) => {
-                        if (active) return r.id;
-                        // Only clear if THIS card was the one playing.
-                        return prev === r.id ? null : prev;
-                      })
-                    }
-                  />
-                ) : (
-                  <div className="flex items-center gap-1.5 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-faint">
-                    <Loader2 className="size-3.5 animate-spin" />
-                    {r.upload_status === "pending"
-                      ? "Upload pending…"
-                      : r.upload_error
-                        ? r.upload_error
-                        : "Processing…"}
-                  </div>
-                )}
-
-                <div className="flex items-center gap-2">
-                  {r.download_url && (
-                    <a
-                      href={r.download_url}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-1.5 rounded-[9px] border border-hairline px-2.5 py-1.5 text-xs text-ink-soft hover:text-ink hover:border-signal/40"
-                    >
-                      <Download className="size-3.5" /> Download
-                    </a>
-                  )}
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="ml-auto"
-                    onClick={() => onDelete(r.id)}
-                    disabled={del.isPending}
-                  >
-                    <Trash2 className="size-3.5" /> Delete
-                  </Button>
-                </div>
-              </GlassCard>
-            );
-          })}
         </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">
-    </GlassPanel>
+          <span className="text-ink-faint">CLIPS:</span>
+          <span className="font-bold text-signal">{(items ?? []).length}</span>
+        </div>
+      </div>
+
+      <GlassPanel>
+        <SectionHeader
+          eyebrow="voice captures"
+          title="Recordings"
+          action={
+            <span className="mono text-xs text-ink-faint">
+              {(items ?? []).length} clips
+            </span>
+          }
+        />
+        {(items ?? []).length === 0 ? (
+          <EmptyState
+            icon={<Headphones className="size-7" />}
+            title="No recordings"
+            description="Voice clips captured by the bot appear here."
+          />
+        ) : (
+          <div
+            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={`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)]"
+                      : ""
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <Avatar src={r.avatar_url} name={r.username} size={38} />
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate text-sm font-semibold text-ink">
+                        {r.username}
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[0.65rem] text-ink-faint">
+                        <Hash className="size-3" />
+                        <span className="truncate">
+                          {r.channel_name ?? "voice"}
+                        </span>
+                        <span className="text-ink-faint/60">·</span>
+                        <span className="mono">
+                          {formatRelativeTime(r.created_at)}
+                        </span>
+                      </div>
+                    </div>
+                    {isPlaying && <NowPlayingChip />}
+                    {up && !isPlaying && (
+                      <Badge tone={up.tone}>{up.label}</Badge>
+                    )}
+                    <span className="mono text-[0.65rem] text-ink-faint">
+                      {formatBytes(r.size_bytes)}
+                    </span>
+                  </div>
+
+                  {r.download_url ? (
+                    <RecordingAudioPlayer
+                      src={r.download_url}
+                      label={`Voice recording by ${r.username}`}
+                      onPlayStateChange={(active) =>
+                        setPlayingId((prev) => {
+                          if (active) return r.id;
+                          // Only clear if THIS card was the one playing.
+                          return prev === r.id ? null : prev;
+                        })
+                      }
+                    />
+                  ) : (
+                    <div className="flex items-center gap-1.5 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-faint">
+                      <Loader2 className="size-3.5 animate-spin" />
+                      {r.upload_status === "pending"
+                        ? "Upload pending…"
+                        : r.upload_error
+                          ? r.upload_error
+                          : "Processing…"}
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-2">
+                    {r.download_url && (
+                      <a
+                        href={r.download_url}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-1.5 rounded-[9px] border border-hairline px-2.5 py-1.5 text-xs text-ink-soft hover:text-ink hover:border-signal/40"
+                      >
+                        <Download className="size-3.5" /> Download
+                      </a>
+                    )}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="ml-auto"
+                      onClick={() => onDelete(r.id)}
+                      disabled={del.isPending}
+                    >
+                      <Trash2 className="size-3.5" /> Delete
+                    </Button>
+                  </div>
+                </GlassCard>
+              );
+            })}
+          </div>
+        )}
+      </GlassPanel>
+    </div>
   );
 }