Refactor moderation and recordings views; enhance UI components and improve performance

- Cleaned up imports and removed unused hooks in ModerationView and RecordingsView.
- Updated UI elements for better visual consistency and accessibility.
- Improved performance by optimizing rendering logic and reducing unnecessary state updates.
- Added filtering functionality in ChannelCultureGlossary and TermGlossary components.
- Enhanced LiveModerationFeed with GSAP animations for smoother transitions.
- Updated chatbot component for better user experience and responsiveness.
- Refined NavRail component for cleaner code and improved navigation item rendering.

services/frontend/src/components/ChannelCultureGlossary.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { Radio, Signal } from "lucide-react";
-import { useMemo } from "react";
-import { GlassPanel } from "@/components/primitives";
+import { Activity, Download, Hash } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Badge, GlassPanel } from "@/components/primitives";
 import { SectionHeader } from "@/components/shared";
 import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { downloadCsv } from "@/lib/csv";
@@ -10,16 +10,16 @@ import { formatRelativeTime } from "@/lib/format";
 import type { ChannelCultureRow } from "@/lib/types";
 
 function deriveSignalStrength(c: ChannelCultureRow): number {
-  let score = 0.25;
+  let score = 0.3;
   if (c.culture_summary) {
-    score += Math.min(0.45, c.culture_summary.length / 400);
+    score += Math.min(0.45, c.culture_summary.length / 350);
   }
   if (c.last_analyzed_at) {
     const ageMs = Date.now() - c.last_analyzed_at;
     const days = ageMs / (1000 * 60 * 60 * 24);
-    score += Math.max(0, 0.3 - days * 0.02);
+    score += Math.max(0, 0.25 - days * 0.015);
   }
-  return Math.max(0.08, Math.min(1, score));
+  return Math.max(0.12, Math.min(1, score));
 }
 
 export function ChannelCultureGlossary({
@@ -27,27 +27,47 @@ export function ChannelCultureGlossary({
 }: {
   cultures: ChannelCultureRow[];
 }) {
-  const ranked = useMemo(
-    () =>
-      cultures
-        .map((c) => ({ c, signal: deriveSignalStrength(c) }))
-        .sort((a, b) => b.signal - a.signal),
-    [cultures],
-  );
+  const [filter, setFilter] = useState("");
 
-  const containerRef = useStaggerReveal<HTMLDivElement>(".channel-row", {
-    stagger: 0.025,
-    y: 6,
-    dependencies: [cultures],
+  const ranked = useMemo(() => {
+    return cultures
+      .map((c) => ({ c, signal: deriveSignalStrength(c) }))
+      .sort((a, b) => b.signal - a.signal);
+  }, [cultures]);
+
+  const filtered = useMemo(() => {
+    if (!filter.trim()) return ranked;
+    const q = filter.toLowerCase();
+    return ranked.filter(
+      ({ c }) =>
+        c.channel_name?.toLowerCase().includes(q) ||
+        c.channel_id.toLowerCase().includes(q) ||
+        c.culture_summary?.toLowerCase().includes(q),
+    );
+  }, [ranked, filter]);
+
+  const containerRef = useStaggerReveal<HTMLDivElement>(".channel-node-card", {
+    stagger: 0.03,
+    y: 10,
+    dependencies: [filtered.length, filter],
   });
 
   return (
-    <GlassPanel>
-      <SectionHeader
-        eyebrow="Roster Intelligence"
-        title="Channel Culture & Activity Roster"
-        action={
-          cultures.length > 0 ? (
+    <div className="space-y-4">
+      {/* Search and Quick Filters */}
+      <GlassPanel className="flex flex-wrap items-center justify-between gap-3 p-3">
+        <div className="relative flex-1 min-w-[220px]">
+          <Hash className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
+          <input
+            type="text"
+            placeholder="Filter channels or culture topics..."
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="w-full rounded-[6px] border border-white/[0.08] bg-white/[0.02] py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-[#7170ff] focus:outline-none"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          {cultures.length > 0 && (
             <button
               type="button"
               onClick={() =>
@@ -60,43 +80,103 @@ export function ChannelCultureGlossary({
                   })),
                 )
               }
-              className="font-mono text-[11px] text-[#8a8f98] transition-colors hover:text-[#f7f8f8]"
+              className="inline-flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-ink"
             >
+              <Download className="size-3.5 text-[#7170ff]" />
               EXPORT_CSV
             </button>
-          ) : null
-        }
-      />
-      {cultures.length === 0 ? (
-        <div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
-          NO CHANNELS LOGGED
+          )}
         </div>
-      ) : (
-        <div ref={containerRef} className="space-y-2 mt-3">
-          {ranked.map(({ c }) => (
-            <div
-              key={c.channel_id}
-              className="channel-row flex flex-col gap-1 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"
-            >
-              <div className="flex items-center justify-between">
-                <span className="font-mono text-xs font-semibold text-[#f7f8f8]">
-                  #{c.channel_name ?? c.channel_id.slice(0, 8)}
-                </span>
-                {c.last_analyzed_at && (
-                  <span className="font-mono text-[10px] text-[#8a8f98]">
-                    {formatRelativeTime(c.last_analyzed_at)}
-                  </span>
-                )}
-              </div>
-              {c.culture_summary && (
-                <p className="font-sans text-xs text-[#8a8f98] leading-relaxed line-clamp-2">
-                  {c.culture_summary}
-                </p>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </GlassPanel>
+      </GlassPanel>
+
+      {/* Channel Nodes Grid */}
+      <GlassPanel>
+        <SectionHeader
+          eyebrow="Roster Telemetry"
+          title="Channel Culture & Activity Spectrum"
+          action={
+            <span className="mono text-xs text-ink-faint">
+              {filtered.length} of {cultures.length} channels
+            </span>
+          }
+        />
+
+        {filtered.length === 0 ? (
+          <div className="py-12 text-center font-mono text-xs text-ink-faint">
+            NO MATCHING CHANNEL TELEMETRY FOUND
+          </div>
+        ) : (
+          <div
+            ref={containerRef}
+            className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3"
+          >
+            {filtered.map(({ c, signal }) => {
+              const pct = Math.round(signal * 100);
+              const isHighSignal = signal > 0.65;
+              return (
+                <div
+                  key={c.channel_id}
+                  className="channel-node-card group relative flex flex-col justify-between overflow-hidden rounded-[8px] border border-white/[0.06] bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04] hover:shadow-lg"
+                >
+                  <div>
+                    {/* Channel Card Header */}
+                    <div className="flex items-center justify-between gap-2 border-b border-white/[0.05] pb-2.5">
+                      <div className="flex items-center gap-2 min-w-0">
+                        <span className="flex size-6 items-center justify-center rounded bg-white/[0.04] text-[#7170ff]">
+                          <Hash className="size-3.5" />
+                        </span>
+                        <span className="truncate font-mono text-xs font-semibold text-ink">
+                          {c.channel_name ?? c.channel_id.slice(0, 10)}
+                        </span>
+                      </div>
+                      <Badge
+                        tone={isHighSignal ? "signal" : "neutral"}
+                        className="font-mono text-[10px]"
+                      >
+                        {pct}% SIGNAL
+                      </Badge>
+                    </div>
+
+                    {/* Culture Summary */}
+                    <div className="mt-3">
+                      {c.culture_summary ? (
+                        <p className="font-sans text-xs text-ink-soft leading-relaxed line-clamp-3">
+                          {c.culture_summary}
+                        </p>
+                      ) : (
+                        <p className="font-mono text-[11px] text-ink-faint italic">
+                          Awaiting AI culture profile synthesis...
+                        </p>
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Signal Strength Bar & Timestamp */}
+                  <div className="mt-4 pt-3 border-t border-white/[0.04]">
+                    <div className="flex items-center justify-between font-mono text-[10px] text-ink-faint mb-1.5">
+                      <span className="flex items-center gap-1">
+                        <Activity className="size-3 text-[#7170ff]" />
+                        INTEL RATIO
+                      </span>
+                      <span>
+                        {c.last_analyzed_at
+                          ? formatRelativeTime(c.last_analyzed_at)
+                          : "NEVER"}
+                      </span>
+                    </div>
+                    <div className="h-1 w-full overflow-hidden rounded-full bg-white/[0.06]">
+                      <div
+                        className="h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff] transition-all duration-500"
+                        style={{ width: `${pct}%` }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </GlassPanel>
+    </div>
   );
 }

services/frontend/src/components/LiveModerationFeed.tsx

@@ -1,9 +1,17 @@
 "use client";
 
-import { Badge, GlassPanel } from "@/components/primitives";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { CheckCircle2, ShieldAlert, UserX, VolumeX } from "lucide-react";
+import { useRef } from "react";
+import { Badge } from "@/components/primitives";
 import { formatRelativeTime } from "@/lib/format";
 import type { ModerationAction } from "@/lib/types";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 const ACTION_LABEL: Record<string, string> = {
   delete_message: "Deleted",
   timeout_user: "Timeout",
@@ -15,6 +23,21 @@ const ACTION_LABEL: Record<string, string> = {
   none: "None",
 };
 
+function actionIcon(type: string) {
+  switch (type) {
+    case "ban_user":
+    case "kick_user":
+      return <UserX className="size-3.5 text-[#f43f5e]" />;
+    case "timeout_user":
+      return <VolumeX className="size-3.5 text-[#f59e0b]" />;
+    case "delete_message":
+    case "warn_user":
+      return <ShieldAlert className="size-3.5 text-[#7170ff]" />;
+    default:
+      return <CheckCircle2 className="size-3.5 text-[#10b981]" />;
+  }
+}
+
 function severityTone(
   sev?: string | null,
 ): "signal" | "amber" | "vermilion" | null {
@@ -36,67 +59,110 @@ export function LiveModerationFeed({
 }: {
   actions: ModerationAction[];
 }) {
+  const feedRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      if (!feedRef.current) return;
+      const items = feedRef.current.querySelectorAll(".mod-feed-item");
+      if (items.length === 0) return;
+
+      const prefersReduced = window.matchMedia(
+        "(prefers-reduced-motion: reduce)",
+      ).matches;
+      if (prefersReduced) return;
+
+      gsap.fromTo(
+        items,
+        { opacity: 0, x: -8 },
+        {
+          opacity: 1,
+          x: 0,
+          duration: 0.32,
+          stagger: 0.025,
+          ease: "power2.out",
+          clearProps: "transform",
+        },
+      );
+    },
+    { scope: feedRef, dependencies: [actions.length] },
+  );
+
   return (
-    <GlassPanel className="flex max-h-[420px] flex-col">
-      <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
+    <div className="flex max-h-[460px] flex-col">
+      <div className="flex items-center justify-between border-b border-white/[0.06] pb-3">
         <div className="flex items-center gap-2">
-          <span className="relative flex size-2.5">
-            <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
-            <span className="relative inline-flex size-2.5 rounded-full bg-emerald-500" />
+          <span className="relative flex size-2">
+            <span className="absolute inline-flex size-full animate-ping rounded-full bg-[#10b981] opacity-75" />
+            <span className="relative inline-flex size-2 rounded-full bg-[#10b981]" />
+          </span>
+          <span className="font-mono text-xs font-medium text-ink">
+            Live Stream Audit Log
           </span>
-          <h3 className="text-sm font-medium text-ink">Live Feed</h3>
         </div>
-        <span className="text-xs text-ink-faint">{actions.length} recent</span>
+        <span className="font-mono text-[11px] text-ink-faint">
+          {actions.length} RECENT ACTIONS
+        </span>
       </div>
 
-      <div className="flex-1 overflow-y-auto">
+      <div ref={feedRef} className="flex-1 space-y-2 overflow-y-auto pt-3 pr-1">
         {actions.length === 0 ? (
-          <p className="px-4 py-6 text-center text-xs text-ink-faint">
-            Waiting for new moderation actions…
-          </p>
+          <div className="py-12 text-center font-mono text-xs text-ink-faint">
+            AWAITING MODERATION DISPATCH STREAM...
+          </div>
         ) : (
-          <ul className="divide-y divide-white/5">
-            {actions.map((a, i) => {
-              const tone = severityTone(a.severity);
-              return (
-                <li
-                  key={a.id}
-                  className={`flex items-start gap-3 px-4 py-3 ${
-                    i === 0 ? "animate-[fadeIn_0.4s_ease-out]" : ""
-                  }`}
-                >
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                      <Badge tone={tone ?? "signal"} className="capitalize">
-                        {ACTION_LABEL[a.action_type] ?? a.action_type}
+          actions.map((a) => {
+            const tone = severityTone(a.severity);
+            return (
+              <div
+                key={a.id}
+                className="mod-feed-item flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"
+              >
+                <span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-white/[0.08] bg-white/[0.03]">
+                  {actionIcon(a.action_type)}
+                </span>
+
+                <div className="min-w-0 flex-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span className="font-mono text-xs font-semibold text-ink">
+                      {ACTION_LABEL[a.action_type] ?? a.action_type}
+                    </span>
+                    {a.severity && (
+                      <Badge
+                        tone={tone ?? "signal"}
+                        className="font-mono text-[9px] uppercase"
+                      >
+                        {a.severity}
                       </Badge>
-                      {a.severity && (
-                        <span className="text-xs text-ink-faint">
-                          {a.severity}
-                        </span>
-                      )}
-                      {a.categories?.length ? (
-                        <span className="truncate text-xs text-ink-soft">
-                          {a.categories.slice(0, 3).join(", ")}
-                        </span>
-                      ) : null}
-                    </div>
-                    {a.reason && (
-                      <p className="mt-1 truncate text-xs text-ink-soft">
-                        “{a.reason}”
-                      </p>
                     )}
-                    <p className="mt-0.5 text-[11px] text-ink-faint">
-                      {a.username ?? a.user_id ?? "unknown"} ·{" "}
+                    {a.categories?.length ? (
+                      <span className="truncate font-mono text-[10px] text-ink-faint">
+                        [{a.categories.slice(0, 2).join(", ")}]
+                      </span>
+                    ) : null}
+                    <span className="ml-auto font-mono text-[10px] text-ink-faint">
                       {formatRelativeTime(a.created_at)}
-                    </p>
+                    </span>
                   </div>
-                </li>
-              );
-            })}
-          </ul>
+
+                  {a.reason && (
+                    <p className="mt-1 font-sans text-xs text-ink-soft line-clamp-2">
+                      “{a.reason}”
+                    </p>
+                  )}
+
+                  <div className="mt-1.5 flex items-center gap-2 font-mono text-[10px] text-ink-faint">
+                    <span>TARGET:</span>
+                    <span className="text-ink-soft">
+                      {a.username ?? a.user_id ?? "UNKNOWN_SUBJECT"}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            );
+          })
         )}
       </div>
-    </GlassPanel>
+    </div>
   );
 }

services/frontend/src/components/TermGlossary.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { ChevronDown, Globe } from "lucide-react";
-import { useRef, useState } from "react";
-import { GlassPanel } from "@/components/primitives";
+import { ChevronDown, Download, Globe, Search } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { Badge, GlassPanel } from "@/components/primitives";
 import { SectionHeader } from "@/components/shared";
 import { useStaggerReveal } from "@/hooks/use-gsap-animation";
 import { downloadCsv } from "@/lib/csv";
@@ -14,25 +14,27 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
   const bodyRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="glossary-entry overflow-hidden rounded-md border border-hairline bg-surface/30">
+    <div className="glossary-entry overflow-hidden rounded-[6px] border border-white/[0.06] bg-white/[0.02] transition-all hover:border-white/[0.12] hover:bg-white/[0.04]">
       <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"
+        className="flex w-full items-center justify-between gap-3 px-3.5 py-3 text-left transition-colors"
         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
+        <div className="flex min-w-0 items-baseline gap-2.5">
+          <span className="truncate font-mono text-xs font-semibold text-ink">
+            {t.term}
           </span>
-        </span>
-        <span className="flex shrink-0 items-center gap-2 font-mono text-[10px] text-ink-faint">
-          {formatRelativeTime(t.resolved_at)}
+          <Badge tone="signal" className="font-mono text-[9px]">
+            {t.hit_count} hits
+          </Badge>
+        </div>
+        <div className="flex shrink-0 items-center gap-2.5 font-mono text-[10px] text-ink-faint">
+          <span>{formatRelativeTime(t.resolved_at)}</span>
           <ChevronDown
-            className={`size-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+            className={`size-3.5 text-ink-muted transition-transform duration-200 ${open ? "rotate-180 text-ink" : ""}`}
           />
-        </span>
+        </div>
       </button>
       <div
         ref={bodyRef}
@@ -40,14 +42,16 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
         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>
+          <div className="border-t border-white/[0.04] bg-black/20 px-3.5 py-2.5 text-xs">
+            <p className="font-sans text-ink-soft leading-relaxed">
+              {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"
+                className="mt-2 inline-flex items-center gap-1.5 font-mono text-[10px] text-[#7170ff] hover:underline"
               >
                 <Globe className="size-3" />
                 {t.source_url}
@@ -61,65 +65,94 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
 }
 
 export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
+  const [filter, setFilter] = useState("");
+
+  const filtered = useMemo(() => {
+    if (!filter.trim()) return terms;
+    const q = filter.toLowerCase();
+    return terms.filter(
+      (t) =>
+        t.term.toLowerCase().includes(q) ||
+        t.definition?.toLowerCase().includes(q),
+    );
+  }, [terms, filter]);
+
   const listRef = useStaggerReveal<HTMLDivElement>(".glossary-entry", {
-    stagger: 0.035,
-    y: 10,
-    dependencies: [terms],
+    stagger: 0.025,
+    y: 8,
+    dependencies: [filtered.length, filter],
   });
 
   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
+      <div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
+        <div className="flex items-center gap-2.5">
+          <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
+          <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
+            Slang & Term Glossary · Knowledge Base
           </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 className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
+          <span>INDEXED:</span>
+          <span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
+            {terms.length} TERMS_RECORDED
+          </span>
         </div>
       </div>
 
-      <GlassPanel className="lg:col-span-3">
+      {/* Filter and Action Bar */}
+      <GlassPanel className="flex flex-wrap items-center justify-between gap-3 p-3">
+        <div className="relative flex-1 min-w-[220px]">
+          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-ink-faint" />
+          <input
+            type="text"
+            placeholder="Search slang term or definition keywords..."
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="w-full rounded-[6px] border border-white/[0.08] bg-white/[0.02] py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-[#7170ff] focus:outline-none"
+          />
+        </div>
+        {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="inline-flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-ink"
+          >
+            <Download className="size-3.5 text-[#7170ff]" />
+            EXPORT_CSV
+          </button>
+        )}
+      </GlassPanel>
+
+      <GlassPanel>
         <SectionHeader
-          eyebrow="knowledge"
-          title="Term Knowledge Base"
+          eyebrow="knowledge directory"
+          title="Slang & Definition Index"
           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
+            <span className="mono text-xs text-[#8a8f98]">
+              {filtered.length} of {terms.length} terms
+            </span>
           }
         />
-        {terms.length === 0 ? (
-          <p className="py-6 text-center font-mono text-xs text-ink-faint">
-            NO TERM RESOLUTIONS CACHED YET
-          </p>
+        {filtered.length === 0 ? (
+          <div className="py-12 text-center font-mono text-xs text-ink-faint">
+            NO TERM DEFINITIONS MATCH YOUR FILTER
+          </div>
         ) : (
-          <div ref={listRef} className="space-y-2">
-            {terms.map((t) => (
+          <div ref={listRef} className="space-y-1.5 mt-3">
+            {filtered.map((t) => (
               <GlossaryEntry key={t.term} t={t} />
             ))}
           </div>

services/frontend/src/components/chatbot/chatbot.tsx

@@ -1,16 +1,10 @@
 "use client";
 
-import {
-  Bot,
-  MessageSquare,
-  Send,
-  Trash2,
-  X,
-} from "lucide-react";
-import { useEffect, useRef, useState } from "react";
 import { useGSAP } from "@gsap/react";
 import gsap from "gsap";
-import { Avatar, Button, GlassPanel, toast } from "@/components/primitives";
+import { Bot, MessageSquare, Send, Trash2, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Button, toast } from "@/components/primitives";
 import { MarkdownLite } from "@/components/shared";
 import { useChatbotUserId } from "@/hooks/use-chatbot-user";
 import { chatbotApi } from "@/lib/api";
@@ -86,7 +80,7 @@ export function Chatbot() {
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [msgs, loading]);
+  }, []);
 
   const send = async (text: string) => {
     if (!text.trim() || loading || !userId) return;
@@ -132,7 +126,11 @@ export function Chatbot() {
         onClick={() => setOpen((o) => !o)}
         className="fixed right-4 bottom-5 z-50 flex size-10 items-center justify-center rounded-full border border-white/[0.12] bg-[#0f1011] text-[#f7f8f8] shadow-2xl transition-all duration-150 hover:scale-105 hover:border-[#7170ff] hover:bg-[#191a1b]"
       >
-        {open ? <X className="size-4" /> : <MessageSquare className="size-4 text-[#7170ff]" />}
+        {open ? (
+          <X className="size-4" />
+        ) : (
+          <MessageSquare className="size-4 text-[#7170ff]" />
+        )}
       </button>
 
       {open && (

services/frontend/src/components/shell/nav-rail.tsx

@@ -16,13 +16,11 @@ function NavItem({
   label,
   active,
   Icon,
-  index,
 }: {
   href: string;
   label: string;
   active: boolean;
   Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
-  index: number;
 }) {
   return (
     <a
@@ -36,10 +34,7 @@ function NavItem({
           : "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]",
       )}
     >
-      <Icon
-        className="relative z-10 size-4"
-        strokeWidth={active ? 2.2 : 1.8}
-      />
+      <Icon className="relative z-10 size-4" strokeWidth={active ? 2.2 : 1.8} />
       {/* Precision Micro-Indicator */}
       {active && (
         <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-[#7170ff]" />
@@ -83,12 +78,11 @@ export function NavRail() {
       className="mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[54px] flex-col items-center gap-1 rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 py-3 shadow-xl backdrop-blur-md md:flex"
     >
       <div className="flex flex-1 flex-col gap-1">
-        {navItems.map((item, i) => (
+        {navItems.map((item) => (
           <NavItem
             key={item.href}
             href={item.href}
             label={item.label}
-            index={i}
             active={isActivePath(path, item.matchPrefix)}
             Icon={item.icon}
           />