feat(frontend): add HUD header and GSAP accordion reveal to glossary route

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

@@ -1,7 +1,9 @@
 "use client";
 
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import { Hash, Search, Sparkles, TrendingUp } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAmbient } from "@/components/ambient/ambient-context";
 import { Avatar, Badge, GlassPanel, Input } from "@/components/primitives";
 import { EmptyState, SectionHeader, SkeletonRows } from "@/components/shared";
@@ -13,6 +15,10 @@ import {
   renderMessageContent,
 } from "@/lib/format";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 export function AnalysisView() {
   const [query, setQuery] = useState("");
   const search = useMessageSearch(query, query.trim().length >= 2);
@@ -20,6 +26,9 @@ export function AnalysisView() {
   const { data: channels } = useChannels();
   const ambient = useAmbient();
 
+  const reactorsRef = useRef<HTMLDivElement>(null);
+  const channelsRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     ambient.set(
       query ? "amber" : "signal",
@@ -28,8 +37,96 @@ export function AnalysisView() {
     );
   }, [query, ambient]);
 
+  // Count-up + bar-fill reveal for the reactor leaderboard — HUD gauge motif.
+  useGSAP(
+    () => {
+      if (!reactorsRef.current) return;
+      const bars = reactorsRef.current.querySelectorAll(".reactor-bar-fill");
+      const counters = reactorsRef.current.querySelectorAll(".reactor-count");
+      if (bars.length === 0) return;
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) {
+        gsap.set(bars, { scaleX: 1 });
+        return;
+      }
+      gsap.fromTo(
+        bars,
+        { scaleX: 0 },
+        {
+          scaleX: 1,
+          duration: 0.7,
+          stagger: 0.06,
+          ease: "power2.out",
+          transformOrigin: "left center",
+        },
+      );
+      counters.forEach((el) => {
+        const target = Number(el.getAttribute("data-target") ?? "0");
+        const obj = { val: 0 };
+        gsap.to(obj, {
+          val: target,
+          duration: 0.8,
+          ease: "power2.out",
+          onUpdate: () => {
+            el.textContent = `+${Math.round(obj.val)}`;
+          },
+        });
+      });
+    },
+    { scope: reactorsRef, dependencies: [reactors] },
+  );
+
+  useGSAP(
+    () => {
+      if (!channelsRef.current) return;
+      const rows = channelsRef.current.querySelectorAll(".channel-row");
+      if (rows.length === 0) return;
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) {
+        gsap.set(rows, { opacity: 1, x: 0 });
+        return;
+      }
+      gsap.fromTo(
+        rows,
+        { opacity: 0, x: -10 },
+        {
+          opacity: 1,
+          x: 0,
+          duration: 0.35,
+          stagger: 0.04,
+          ease: "power2.out",
+          clearProps: "transform",
+        },
+      );
+    },
+    { scope: channelsRef, dependencies: [channels] },
+  );
+
   return (
-    <div className="space-y-5">
+    <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">
+            ANALYSIS ENGINE · DEEP_SCAN
+          </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">MODE:</span>
+          <span className="font-bold text-signal">
+            {query.trim().length >= 2 ? "SEARCHING" : "IDLE"}
+          </span>
+        </div>
+      </div>
+
       <GlassPanel glow className="relative overflow-hidden">
         <div className="scan-line absolute inset-x-0 top-0" />
         <div className="flex items-center gap-3">
@@ -123,7 +220,7 @@ export function AnalysisView() {
                 </span>
               }
             />
-            <div className="space-y-2">
+            <div ref={reactorsRef} className="space-y-2">
               {(reactors ?? []).slice(0, 6).map((r, i) => {
                 const maxNet = reactors?.[0]?.net_count || 1;
                 const pct = Math.max(
@@ -141,12 +238,15 @@ export function AnalysisView() {
                     </span>
                     <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/8">
                       <div
-                        className="h-full rounded-full bg-signal/70"
+                        className="reactor-bar-fill h-full rounded-full bg-signal/70"
                         style={{ width: `${pct}%` }}
                       />
                     </div>
-                    <span className="mono w-12 text-right text-xs text-signal">
-                      +{r.net_count}
+                    <span
+                      className="reactor-count mono w-12 text-right text-xs text-signal"
+                      data-target={r.net_count}
+                    >
+                      +0
                     </span>
                   </div>
                 );
@@ -168,11 +268,11 @@ export function AnalysisView() {
                 </span>
               }
             />
-            <div className="space-y-2">
+            <div ref={channelsRef} className="space-y-2">
               {(channels ?? []).slice(0, 6).map((c) => (
                 <div
                   key={c.channel_id}
-                  className="flex items-center gap-3 text-sm"
+                  className="channel-row flex items-center gap-3 text-sm"
                 >
                   <span className="flex-1 truncate text-ink-soft">
                     {c.channel_name ?? c.channel_id.slice(0, 8)}

services/frontend/src/components/TermGlossary.tsx

@@ -1,71 +1,130 @@
 "use client";
 
-import { Globe } from "lucide-react";
+import { ChevronDown, Globe } from "lucide-react";
+import { useRef, useState } from "react";
 import { GlassPanel } from "@/components/primitives";
 import { SectionHeader } from "@/components/shared";
+import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { downloadCsv } from "@/lib/csv";
 import { formatRelativeTime } from "@/lib/format";
 import type { GlossaryRow } from "@/lib/types";
 
-export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
+function GlossaryEntry({ t }: { t: GlossaryRow }) {
+  const [open, setOpen] = useState(false);
+  const bodyRef = useRef<HTMLDivElement>(null);
+
   return (
-    <GlassPanel className="lg:col-span-3">
-      <SectionHeader
-        eyebrow="knowledge"
-        title="Term Knowledge Base"
-        action={
-          terms.length > 0 ? (
-            <button
-              type="button"
-              onClick={() =>
-                downloadCsv(
-                  "glossary.csv",
-                  terms.map((t) => ({
-                    term: t.term,
-                    definition: t.definition,
-                    source: t.source_url,
-                    resolved: t.resolved_at,
-                    hits: t.hit_count,
-                  })),
-                )
-              }
-              className="flex items-center gap-1.5 text-xs text-ink-soft hover:text-ink"
-            >
-              CSV
-            </button>
-          ) : null
-        }
-      />
-      {terms.length === 0 ? (
-        <p className="py-6 text-center text-xs text-ink-faint">
-          No term resolutions cached yet.
-        </p>
-      ) : (
-        <div className="space-y-3">
-          {terms.map((t) => (
-            <div key={t.term} className="text-sm">
-              <div className="flex flex-wrap items-baseline justify-between gap-2">
-                <span className="font-medium text-ink">{t.term}</span>
-                <span className="text-xs text-ink-faint">
-                  {t.hit_count} uses · {formatRelativeTime(t.resolved_at)}
-                </span>
-              </div>
-              <p className="mt-1 text-ink-faint">{t.definition}</p>
-              {t.source_url && (
-                <a
-                  href={t.source_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="mt-0.5 text-xs text-ink-soft hover:text-ink"
-                >
-                  <Globe className="mr-1 inline size-3" />
-                  {t.source_url}
-                </a>
-              )}
-            </div>
-          ))}
+    <div className="glossary-entry overflow-hidden rounded-md border border-hairline bg-surface/30">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left transition-colors hover:bg-surface/50"
+        aria-expanded={open}
+      >
+        <span className="flex min-w-0 items-baseline gap-2">
+          <span className="truncate font-medium text-ink">{t.term}</span>
+          <span className="mono shrink-0 text-[10px] text-ink-faint">
+            {t.hit_count} uses
+          </span>
+        </span>
+        <span className="flex shrink-0 items-center gap-2 font-mono text-[10px] text-ink-faint">
+          {formatRelativeTime(t.resolved_at)}
+          <ChevronDown
+            className={`size-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+          />
+        </span>
+      </button>
+      <div
+        ref={bodyRef}
+        className="grid transition-[grid-template-rows] duration-300 ease-out"
+        style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
+      >
+        <div className="overflow-hidden">
+          <div className="border-t border-hairline px-3 py-2.5 text-sm">
+            <p className="text-ink-faint">{t.definition}</p>
+            {t.source_url && (
+              <a
+                href={t.source_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-1.5 inline-flex items-center gap-1 text-xs text-ink-soft hover:text-ink"
+              >
+                <Globe className="size-3" />
+                {t.source_url}
+              </a>
+            )}
+          </div>
         </div>
-      )}
-    </GlassPanel>
+      </div>
+    </div>
+  );
+}
+
+export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
+  const listRef = useStaggerReveal<HTMLDivElement>(".glossary-entry", {
+    stagger: 0.035,
+    y: 10,
+    dependencies: [terms],
+  });
+
+  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">
+            TERM GLOSSARY · KB_INDEX
+          </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">TERMS:</span>
+          <span className="font-bold text-signal">{terms.length}</span>
+        </div>
+      </div>
+
+      <GlassPanel className="lg:col-span-3">
+        <SectionHeader
+          eyebrow="knowledge"
+          title="Term Knowledge Base"
+          action={
+            terms.length > 0 ? (
+              <button
+                type="button"
+                onClick={() =>
+                  downloadCsv(
+                    "glossary.csv",
+                    terms.map((t) => ({
+                      term: t.term,
+                      definition: t.definition,
+                      source: t.source_url,
+                      resolved: t.resolved_at,
+                      hits: t.hit_count,
+                    })),
+                  )
+                }
+                className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink"
+              >
+                EXPORT_CSV
+              </button>
+            ) : null
+          }
+        />
+        {terms.length === 0 ? (
+          <p className="py-6 text-center font-mono text-xs text-ink-faint">
+            NO TERM RESOLUTIONS CACHED YET
+          </p>
+        ) : (
+          <div ref={listRef} className="space-y-2">
+            {terms.map((t) => (
+              <GlossaryEntry key={t.term} t={t} />
+            ))}
+          </div>
+        )}
+      </GlassPanel>
+    </div>
   );
 }