MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(frontend): revamp UI to Linear Precision Clean Dark with GSAP micro-interactions

Browse Source
This commit is contained in:
asepharyana
2026-08-26 10:12:42 +07:00
parent c3165ed702
commit 29f59fd91f
13 changed files with 987 additions and 1767 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/app/(dashboard)/dashboard/view.tsx
+127 -248
View File
@@ -7,8 +7,6 @@ import {
MessageSquare, MessageSquare,
Mic, Mic,
Shield, Shield,
ShieldAlert,
Terminal,
Users, Users,
} from "lucide-react"; } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
@@ -18,7 +16,9 @@ import { AreaActivity, RadialGauge } from "@/components/charts";
import { GlassPanel } from "@/components/primitives"; import { GlassPanel } from "@/components/primitives";
import { import {
ErrorState, ErrorState,
MetricTile,
PageTransition, PageTransition,
SectionHeader,
SkeletonHero, SkeletonHero,
SkeletonMetricRow, SkeletonMetricRow,
SkeletonPanel, SkeletonPanel,
@@ -63,9 +63,9 @@ export function DashboardView({
const { data: reactions } = useTopReactions(); const { data: reactions } = useTopReactions();
const ambient = useAmbient(); const ambient = useAmbient();
const hudRef = useStaggerReveal<HTMLDivElement>(".hud-tile", { const hudRef = useStaggerReveal<HTMLDivElement>(".linear-tile", {
stagger: 0.05, stagger: 0.035,
y: 16, y: 8,
dependencies: [stats], dependencies: [stats],
}); });
@@ -82,10 +82,10 @@ export function DashboardView({
return <ErrorState error={error} onRetry={() => void mutateStats()} />; return <ErrorState error={error} onRetry={() => void mutateStats()} />;
if (!stats && isLoading) if (!stats && isLoading)
return ( return (
<div className="space-y-5"> <div className="space-y-4">
<SkeletonHero /> <SkeletonHero />
<SkeletonMetricRow cols={4} /> <SkeletonMetricRow cols={4} />
<SkeletonPanel rows={5} /> <SkeletonPanel rows={4} />
</div> </div>
); );
if (!stats) if (!stats)
@@ -99,277 +99,156 @@ export function DashboardView({
const s = stats; const s = stats;
const total = s.total_flagged + s.total_clean || 1; const total = s.total_flagged + s.total_clean || 1;
const cleanRatio = s.total_clean / total; const cleanRatio = s.total_clean / total;
const sig = deriveSignal(s);
return ( return (
<PageTransition> <PageTransition>
<div ref={hudRef} className="space-y-4"> <div ref={hudRef} className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Precision Sub-Header Bar */}
<div className="hud-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3"> <div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2.5">
<div className="relative flex size-3 items-center justify-center"> <span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" /> <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<span className="relative inline-flex size-2 rounded-full bg-signal" /> Telemetry Overview · Node 01
</div>
<div className="flex items-baseline gap-2">
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
GMW TELEMETRY · MATRIX_01
</h1> </h1>
<span className="font-mono text-[10px] text-ink-faint"> </div>
[LIVE_MONITOR] <div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
<span>SIGNAL:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
STABLE_STREAM
</span> </span>
</div> </div>
</div> </div>
<div className="flex items-center gap-2"> {/* Primary Metric Deck */}
<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"> <div className="linear-tile grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
<span className="text-ink-faint">SYS_STATUS:</span> <MetricTile
<span className="font-bold text-signal">{sig.state}</span> label="Total Messages"
</div> value={formatNumber(s.total_messages)}
<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"> hint={`${formatNumber(s.today_messages)} today`}
<span className="text-ink-faint">VER:</span> icon={<MessageSquare className="size-4" />}
<span className="text-ink">v2.4-GSAP</span> />
</div> <MetricTile
</div> label="Clean Filter Ratio"
</div> value={`${Math.round(cleanRatio * 100)}%`}
hint={`${formatNumber(s.total_clean)} verified clean`}
{/* Spatial HUD Grid: Live Mission Control */} tone="signal"
<div className="grid gap-4 lg:grid-cols-12"> icon={<Shield className="size-4" />}
{/* Main Telemetry & Activity Area */} />
<div className="space-y-4 lg:col-span-8"> <MetricTile
{/* Primary Telemetry Cluster */} label="Voice Recordings"
<div className="hud-tile grid grid-cols-2 gap-2.5 sm:grid-cols-4"> value={formatNumber(s.total_voice_recordings)}
<div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40"> hint="Archived audio sessions"
<div className="flex items-center justify-between text-ink-faint"> icon={<Mic className="size-4" />}
<span className="font-mono text-[10px] tracking-wider uppercase"> />
Messages <MetricTile
</span> label="Total Profiles"
<MessageSquare className="size-3.5 text-signal" /> value={formatNumber(s.total_profiles)}
</div> hint={`${formatNumber(s.active_users_24h)} active 24h`}
<div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink"> icon={<Users className="size-4" />}
{formatNumber(s.total_messages)}
</div>
<div className="mt-1 flex items-center gap-1 font-mono text-[10px] text-ink-faint">
<span className="text-signal">↑ live</span> ingest
</div>
</div>
<div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
<div className="flex items-center justify-between text-ink-faint">
<span className="font-mono text-[10px] tracking-wider uppercase">
Flagged
</span>
<ShieldAlert className="size-3.5 text-vermilion" />
</div>
<div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
{formatNumber(s.total_flagged)}
</div>
<div className="mt-1 font-mono text-[10px] text-ink-faint">
<span className="text-vermilion">{s.today_flagged}</span>{" "}
today
</div>
</div>
<div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
<div className="flex items-center justify-between text-ink-faint">
<span className="font-mono text-[10px] tracking-wider uppercase">
Active 24h
</span>
<Users className="size-3.5 text-signal" />
</div>
<div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
{formatNumber(s.active_users_24h)}
</div>
<div className="mt-1 font-mono text-[10px] text-ink-faint">
<span>unique accounts</span>
</div>
</div>
<div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
<div className="flex items-center justify-between text-ink-faint">
<span className="font-mono text-[10px] tracking-wider uppercase">
Voice Captures
</span>
<Mic className="size-3.5 text-signal" />
</div>
<div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
{formatNumber(s.total_voice_recordings)}
</div>
<div className="mt-1 font-mono text-[10px] text-ink-faint">
<span>audio buffers</span>
</div>
</div>
</div>
{/* Activity Waveform / Time Series */}
<GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
<div className="mb-4 flex items-center justify-between">
<div>
<div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
CHRONO TELEMETRY (14D)
</div>
<div className="text-sm font-medium text-ink">
Message & Activity Stream
</div>
</div>
<div className="flex items-center gap-3 font-mono text-[11px]">
<div className="flex items-center gap-1 text-ink-soft">
<span className="size-2 rounded-full bg-signal" />
<span>Activity Trend</span>
</div>
</div>
</div>
<div className="h-56 w-full">
{activity?.daily ? (
<AreaActivity daily={activity.daily} />
) : (
<div className="flex h-full items-center justify-center font-mono text-xs text-ink-faint">
ACQUIRING SIGNAL...
</div>
)}
</div>
</GlassPanel>
{/* Quick Tactical Links */}
<div className="hud-tile grid grid-cols-1 gap-2.5 sm:grid-cols-3">
<Link
href="/voice"
className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
>
<div className="flex items-center gap-2.5">
<div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
<AudioWaveform className="size-4" />
</div>
<div>
<div className="font-mono text-xs font-semibold text-ink">
Voice Matrix
</div>
<div className="text-[11px] text-ink-faint">
Realtime speaker stream
</div>
</div>
</div>
<ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
</Link>
<Link
href="/messages"
className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
>
<div className="flex items-center gap-2.5">
<div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
<Terminal className="size-4" />
</div>
<div>
<div className="font-mono text-xs font-semibold text-ink">
Chat Log Stream
</div>
<div className="text-[11px] text-ink-faint">
Live telemetry feed
</div>
</div>
</div>
<ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
</Link>
<Link
href="/moderation"
className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
>
<div className="flex items-center gap-2.5">
<div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
<Shield className="size-4" />
</div>
<div>
<div className="font-mono text-xs font-semibold text-ink">
Auto-Mod Radar
</div>
<div className="text-[11px] text-ink-faint">
Classification & audits
</div>
</div>
</div>
<ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
</Link>
</div>
</div>
{/* Side Telemetry Panel: Health, Dials, & Nodes */}
<div className="space-y-4 lg:col-span-4">
{/* Safety & Moderation Integrity Gauge */}
<GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
<div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
INTEGRITY MATRIX
</div>
<div className="mt-1 text-sm font-medium text-ink">
Clean Stream Ratio
</div>
<div className="my-4 flex items-center justify-center">
<RadialGauge
value={Math.round(cleanRatio * 100)}
size={140}
tone={cleanRatio > 0.9 ? "signal" : "amber"}
label={`${Math.round(cleanRatio * 100)}%`}
sublabel="CLEAN RATIO"
/> />
</div> </div>
<div className="space-y-2 border-t border-hairline pt-3 font-mono text-xs">
<div className="flex justify-between"> {/* Dynamic Activity Area & Telemetry Gauges */}
<span className="text-ink-faint">Clean Messages:</span> <div className="grid gap-3 lg:grid-cols-3">
<span className="font-medium text-ink"> <GlassPanel className="linear-tile lg:col-span-2">
{formatNumber(s.total_clean)} <SectionHeader
</span> eyebrow="Activity Stream"
</div> title="Message Volume & Signal Density"
<div className="flex justify-between"> />
<span className="text-ink-faint">Pending Flags:</span> <div className="mt-4">
<span className="font-medium text-vermilion"> <AreaActivity daily={activity?.daily ?? []} />
{formatNumber(s.total_flagged)}
</span>
</div>
</div> </div>
</GlassPanel> </GlassPanel>
{/* Top Reacted Messages / Emitters */} <GlassPanel className="linear-tile flex flex-col justify-between">
<GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
<div className="flex items-center justify-between">
<div> <div>
<div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase"> <SectionHeader
FREQUENT EMITTERS eyebrow="Security State"
</div> title="Moderation Accuracy"
<div className="text-sm font-medium text-ink"> />
Top Reacted Messages <div className="my-6 flex items-center justify-center">
<RadialGauge
value={Math.round(cleanRatio * 100)}
label="Clean Ratio"
tone={cleanRatio > 0.85 ? "signal" : "amber"}
size={140}
/>
</div> </div>
</div> </div>
<Flame className="size-4 text-amber" /> <div className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center">
<div>
<div className="font-mono text-[10px] text-[#8a8f98]">CLEAN</div>
<div className="font-sans text-sm font-semibold text-[#10b981]">
{formatNumber(s.total_clean)}
</div>
</div>
<div>
<div className="font-mono text-[10px] text-[#8a8f98]">FLAGGED</div>
<div className="font-sans text-sm font-semibold text-[#f43f5e]">
{formatNumber(s.total_flagged)}
</div>
</div>
</div>
</GlassPanel>
</div> </div>
{/* Secondary Insights Deck */}
<div className="grid gap-3 lg:grid-cols-2">
{reactions && reactions.length > 0 && (
<GlassPanel className="linear-tile">
<SectionHeader
eyebrow="Engagement"
title="Top Reacted Messages"
/>
<div className="mt-3 space-y-2"> <div className="mt-3 space-y-2">
{reactions && reactions.length > 0 ? ( {reactions.slice(0, 4).map((r) => (
reactions.slice(0, 4).map((r) => (
<div <div
key={r.message_id} key={r.message_id}
className="flex items-center justify-between rounded bg-surface/30 px-2.5 py-1.5 font-mono text-xs" className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 hover:bg-white/[0.04]"
> >
<span className="max-w-[150px] truncate text-ink-soft"> <span className="truncate pr-2 text-xs text-[#d0d6e0]">
{r.username ? `@${r.username}` : "anonymous"} {r.content || "[Media/Attachment]"}
</span> </span>
<div className="flex items-center gap-2"> <span className="font-mono text-xs font-semibold text-[#7170ff] shrink-0">
<span className="text-ink-faint">reacts:</span> {formatNumber(r.reaction_count)} reactions
<span className="font-bold text-signal">
{r.reaction_count}
</span> </span>
</div> </div>
</div> ))}
))
) : (
<div className="py-4 text-center font-mono text-xs text-ink-faint">
NO EMITTER TELEMETRY
</div>
)}
</div> </div>
</GlassPanel> </GlassPanel>
)}
<GlassPanel className="linear-tile flex flex-col justify-between">
<div>
<SectionHeader
eyebrow="Navigation"
title="Quick Diagnostics"
/>
<div className="mt-2 space-y-1.5">
<Link
href="/moderation"
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
>
<span className="flex items-center gap-2">
<Shield className="size-3.5 text-[#7170ff]" />
Review Live Moderation Queue
</span>
<ChevronRight className="size-3.5 text-[#8a8f98]" />
</Link>
<Link
href="/voice"
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
>
<span className="flex items-center gap-2">
<AudioWaveform className="size-3.5 text-[#10b981]" />
Inspect Active Voice Stages
</span>
<ChevronRight className="size-3.5 text-[#8a8f98]" />
</Link>
</div> </div>
</div> </div>
</GlassPanel>
</div>
</div> </div>
</PageTransition> </PageTransition>
); );
services/frontend/src/app/(dashboard)/media/view.tsx
+91 -148
View File
@@ -16,6 +16,7 @@ import { Button, GlassPanel, Input, toast } from "@/components/primitives";
import { import {
ErrorState, ErrorState,
PageTransition, PageTransition,
SectionHeader,
SkeletonHero, SkeletonHero,
SkeletonPanel, SkeletonPanel,
} from "@/components/shared"; } from "@/components/shared";
@@ -52,14 +53,10 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
const playing = media?.playing ?? false; const playing = media?.playing ?? false;
const current = media?.current ?? null; const current = media?.current ?? null;
const queueList = media?.queue ?? []; const queueList = media?.queue ?? [];
const queueTotal = queueList.reduce(
(acc, it) => acc + (it.durationMs ?? 0),
0,
);
const mediaRef = useStaggerReveal<HTMLDivElement>(".media-tile", { const mediaRef = useStaggerReveal<HTMLDivElement>(".media-tile", {
stagger: 0.06, stagger: 0.04,
y: 16, y: 8,
dependencies: [playing, queueList.length], dependencies: [playing, queueList.length],
}); });
@@ -67,21 +64,21 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
useEffect(() => { useEffect(() => {
ambient.set( ambient.set(
tone, tone,
playing ? 0.5 : 0.25, playing ? 0.45 : 0.2,
playing ? "now playing" : "media idle", playing ? "playing stream" : "media ready",
); );
}, [tone, playing, ambient]); }, [tone, playing, ambient]);
const onPlay = async () => { const onPlay = async () => {
const u = url.trim(); const u = url.trim();
if (!u) { if (!u) {
toast({ title: "Enter a media URL", tone: "vermilion" }); toast({ title: "Enter media URL", tone: "vermilion" });
return; return;
} }
try { try {
await queue.mutateAsync({ url: u, mode: "music" }); await queue.mutateAsync({ url: u, mode: "music" });
setUrl(""); setUrl("");
toast({ title: "Queued track", tone: "signal" }); toast({ title: "Track queued", tone: "signal" });
} catch (e) { } catch (e) {
toast({ toast({
title: "Queue failed", title: "Queue failed",
@@ -95,207 +92,153 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
return <ErrorState error={error} onRetry={() => void mutate()} />; return <ErrorState error={error} onRetry={() => void mutate()} />;
if (!media && isLoading) if (!media && isLoading)
return ( return (
<div className="space-y-5"> <div className="space-y-4">
<SkeletonHero /> <SkeletonHero />
<SkeletonPanel rows={4} /> <SkeletonPanel rows={3} />
</div> </div>
); );
const mockLevels = playing const mockLevels = playing
? [0.4, 0.7, 0.9, 0.6, 0.8, 0.5, 0.9, 0.7, 0.4, 0.8, 0.6, 0.9] ? [0.4, 0.7, 0.9, 0.6, 0.8, 0.5, 0.9, 0.7, 0.4, 0.8, 0.6, 0.9]
: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1]; : [0.08, 0.08, 0.08, 0.08, 0.08, 0.08];
return ( return (
<PageTransition> <PageTransition>
<div ref={mediaRef} className="space-y-5"> <div ref={mediaRef} className="space-y-4">
{/* Top Media Matrix Stage */} {/* Precision Sub-Header Bar */}
<div className="media-tile relative overflow-hidden rounded-xl border border-hairline/80 bg-surface/40 p-6 shadow-2xl backdrop-blur-xl"> <div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
{/* Spatial Grid Header */} <div className="flex items-center gap-2.5">
<div className="flex flex-wrap items-center justify-between gap-4 border-b border-hairline/60 pb-4"> <span
<div className="flex items-center gap-3"> className={`h-2 w-2 rounded-full ${
<div className="flex size-9 items-center justify-center rounded-lg bg-canvas-2 border border-hairline text-signal shadow-inner"> playing
<Disc ? "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
className={`size-5 ${playing ? "animate-spin-disc text-signal" : "text-ink-faint"}`} : "bg-[#8a8f98]"
}`}
/> />
</div> <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<div> Audio Engine · Media Gateway
<h1 className="font-mono text-sm font-bold tracking-widest text-ink uppercase">
MEDIA FREQUENCY DECK
</h1> </h1>
<div className="font-mono text-[11px] text-ink-faint">
{playing
? "STREAM_ACTIVE · 48KHZ STEREO"
: "DECK_IDLE · STANDBY"}
</div> </div>
</div> <div className="flex items-center gap-2 font-mono text-[11px]">
</div> <span className="text-[#8a8f98]">ENGINE:</span>
<div className="flex items-center gap-2">
<span <span
className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 font-mono text-xs font-semibold ${playing ? "bg-signal/10 text-signal border border-signal/30" : "bg-surface text-ink-faint border border-hairline"}`} className={`rounded px-1.5 py-0.5 font-medium border ${
playing
? "border-[#7170ff]/30 bg-[#7170ff]/10 text-[#7170ff]"
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
}`}
> >
<span {playing ? "STREAMING" : "IDLE"}
className={`size-1.5 rounded-full ${playing ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
/>
{playing ? "TRANSMITTING" : "STANDBY"}
</span> </span>
</div> </div>
</div> </div>
{/* Player Core View */} {/* Media Playback Deck */}
<div className="mt-6 grid gap-6 lg:grid-cols-12 items-center"> <div className="media-tile">
{/* Vinyl & Visualizer Stage */} <GlassPanel className="p-5">
<div className="lg:col-span-5 flex flex-col items-center justify-center"> <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div className="relative flex size-44 items-center justify-center rounded-full border-2 border-dashed border-hairline/60 bg-canvas-2 shadow-2xl"> <div className="flex items-center gap-3.5">
<div <div className="flex size-11 items-center justify-center rounded-[8px] border border-white/[0.08] bg-white/[0.03] text-[#7170ff]">
className={`absolute inset-2 rounded-full border border-hairline/30 ${playing ? "animate-spin-disc" : ""}`} <Disc
className={`size-6 ${playing ? "animate-spin-disc text-[#7170ff]" : "text-[#8a8f98]"}`}
/> />
{current?.thumbnailUrl ? (
<div
className="size-32 rounded-full bg-cover bg-center border-2 border-hairline/80 shadow-lg"
style={{ backgroundImage: `url(${current.thumbnailUrl})` }}
/>
) : (
<div className="flex size-32 items-center justify-center rounded-full bg-surface border border-hairline">
<ListMusic className="size-12 text-ink-faint" />
</div> </div>
)}
{playing && (
<div className="absolute -inset-2 rounded-full ring-2 ring-signal/40 animate-pulse-ring pointer-events-none" />
)}
</div>
</div>
{/* Current Track Telemetry & Controls */}
<div className="lg:col-span-7 space-y-4">
<div> <div>
<div className="font-mono text-[10px] font-bold tracking-widest text-signal uppercase"> <div className="text-sm font-semibold tracking-tight text-[#f7f8f8]">
{current ? "CURRENT TRANSMISSION" : "DECK UNLOADED"} {current?.title ?? "No Active Media Stream"}
</div>
<div className="font-mono text-[11px] text-[#8a8f98]">
{current
? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream`
: "Queue a track via URL below"}
</div> </div>
<h2 className="text-xl font-bold text-ink mt-1 truncate">
{current?.title ?? "No active stream"}
</h2>
<div className="font-mono text-xs text-ink-soft mt-1">
{current?.source
? `Source: ${current.source}`
: "Queue a URL below to broadcast"}
</div> </div>
</div> </div>
{/* Realtime Equalizer preview */} {/* Controls */}
<div className="h-12 w-full rounded-md border border-hairline bg-canvas-2/50 p-2"> <div className="flex items-center gap-2">
<Equalizer
bars={mockLevels}
color={
playing ? "var(--color-signal)" : "var(--color-ink-faint)"
}
/>
</div>
{/* Interactive Playback Toolbar */}
<div className="flex flex-wrap items-center gap-2.5 pt-2">
<Button <Button
variant="primary" variant="ghost"
onClick={() => stop.mutateAsync()} size="sm"
disabled={!playing || stop.isPending} onClick={() => loop.mutateAsync()}
className="font-mono text-xs font-bold" className={media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""}
> >
<Square className="mr-1.5 size-3.5" /> STOP <Repeat className="size-3.5" />
</Button> </Button>
<Button <Button
variant="outline" variant="ghost"
size="sm"
onClick={() => skip.mutateAsync()} onClick={() => skip.mutateAsync()}
disabled={!playing || skip.isPending}
className="font-mono text-xs font-bold"
> >
<SkipForward className="mr-1.5 size-3.5" /> SKIP <SkipForward className="size-3.5" />
</Button> </Button>
<Button <Button
variant={media?.loop ? "primary" : "outline"} variant="danger"
onClick={() => loop.mutateAsync(!media?.loop)} size="sm"
disabled={loop.isPending} onClick={() => stop.mutateAsync()}
className="font-mono text-xs font-bold"
> >
<Repeat className="mr-1.5 size-3.5" /> LOOP{" "} <Square className="size-3.5" />
{media?.loop ? "ON" : "OFF"}
</Button> </Button>
</div> </div>
</div> </div>
</div>
</div>
{/* Ingest & Queue Spatial Deck */} {/* Quick URL Input */}
<div className="grid gap-5 lg:grid-cols-12"> <div className="mt-4 flex gap-2 border-t border-white/[0.06] pt-4">
{/* URL Ingest Box */}
<div className="media-tile lg:col-span-5 space-y-4">
<GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
<div className="font-mono text-xs font-bold tracking-wider text-ink uppercase mb-3 flex items-center justify-between">
<span>INJECT AUDIO STREAM</span>
<Sliders className="size-4 text-signal" />
</div>
<div className="space-y-3">
<Input <Input
placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..."
value={url} value={url}
onChange={(e) => setUrl(e.target.value)} onChange={(e) => setUrl(e.target.value)}
placeholder="Paste YouTube or Audio URL..." className="flex-1 text-xs"
className="font-mono text-xs"
/> />
<Button <Button variant="primary" size="md" onClick={onPlay}>
variant="primary" <Play className="size-3.5" />
onClick={onPlay} Queue Track
disabled={queue.isPending || !url.trim()}
className="w-full font-mono text-xs font-bold py-2.5"
>
<Play className="mr-1.5 size-4" /> BROADCAST STREAM
</Button> </Button>
</div> </div>
</GlassPanel> </GlassPanel>
</div> </div>
{/* Queue List Stage */} {/* Spectrum & Queue Grid */}
<div className="media-tile lg:col-span-7"> <div className="grid gap-3 lg:grid-cols-3">
<GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl"> <GlassPanel className="media-tile lg:col-span-2">
<div className="flex items-center justify-between border-b border-hairline/60 pb-3 mb-3"> <SectionHeader
<div className="font-mono text-xs font-bold tracking-wider text-ink uppercase"> eyebrow="Visualizer"
QUEUE STACK ({queueList.length}) title="Realtime Frequency Array"
</div> />
<div className="font-mono text-[11px] text-ink-faint"> <div className="my-6 flex items-center justify-center">
Total: {formatDuration(queueTotal)} <Equalizer bars={mockLevels} />
</div>
</div> </div>
</GlassPanel>
<div className="space-y-2 max-h-64 overflow-y-auto pr-1"> <GlassPanel className="media-tile">
{queueList.length > 0 ? ( <SectionHeader
eyebrow="Playlist"
title={`Queue (${queueList.length})`}
/>
<div className="mt-3 space-y-2">
{queueList.length === 0 ? (
<div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
QUEUE EMPTY
</div>
) : (
queueList.map((item, idx) => ( queueList.map((item, idx) => (
<div <div
key={item.id ?? idx} key={item.id ?? idx}
className="flex items-center justify-between rounded-lg border border-hairline bg-surface/30 p-2.5 font-mono text-xs transition hover:border-signal/40" className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0]"
> >
<div className="flex items-center gap-2.5 min-w-0"> <span className="truncate pr-2 font-medium">
<span className="text-ink-faint font-bold"> {item.title}
{idx + 1}.
</span> </span>
<span className="truncate text-ink font-medium"> <span className="font-mono text-[10px] text-[#8a8f98] shrink-0">
{item.title ?? "Unknown Track"}
</span>
</div>
<span className="text-ink-faint text-[11px] shrink-0 ml-2">
{formatDuration(item.durationMs ?? 0)} {formatDuration(item.durationMs ?? 0)}
</span> </span>
</div> </div>
)) ))
) : (
<div className="py-8 text-center font-mono text-xs text-ink-faint">
NO QUEUED AUDIO IN BUFFER
</div>
)} )}
</div> </div>
</GlassPanel> </GlassPanel>
</div> </div>
</div> </div>
</div>
</PageTransition> </PageTransition>
); );
} }
services/frontend/src/app/(dashboard)/moderation/view.tsx
+122 -424
View File
@@ -1,500 +1,198 @@
"use client"; "use client";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { import {
AlertTriangle, AlertTriangle,
Ban,
CheckCircle2, CheckCircle2,
Clock,
Filter, Filter,
MessageSquareWarning, Shield,
MicOff,
ShieldAlert, ShieldAlert,
Trash2,
UserX,
XCircle,
} from "lucide-react"; } from "lucide-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { useAmbient } from "@/components/ambient/ambient-context"; import { useAmbient } from "@/components/ambient/ambient-context";
import { CategoryDrilldown } from "@/components/CategoryDrilldown";
import { CoverageTiles } from "@/components/CoverageTiles";
import { Donut } from "@/components/charts";
import { LiveModerationFeed } from "@/components/LiveModerationFeed"; import { LiveModerationFeed } from "@/components/LiveModerationFeed";
import { ModerationHeatmap } from "@/components/ModerationHeatmap"; import { ModerationHeatmap } from "@/components/ModerationHeatmap";
import { import { Button, GlassPanel } from "@/components/primitives";
Badge,
GlassPanel,
Select,
type SelectOption,
} from "@/components/primitives";
import { ScamDomains } from "@/components/ScamDomains";
import { import {
ErrorState, ErrorState,
MetricTile, MetricTile,
PageTransition,
SectionHeader, SectionHeader,
SkeletonMetricRow, SkeletonMetricRow,
SkeletonPanel, SkeletonPanel,
SkeletonRows,
} from "@/components/shared"; } from "@/components/shared";
import { TopChannels } from "@/components/TopChannels";
import { TopicTrends } from "@/components/TopicTrends";
import { import {
useHourlyModeration, useHourlyModeration,
useLiveModeration,
useModerationActions, useModerationActions,
useModerationByCategory,
useModerationCoverage, useModerationCoverage,
useModerationStats, useModerationStats,
useModerationTrends, useModerationTrends,
useTopFlaggedChannels,
useTopFlaggedDomains,
} from "@/hooks"; } from "@/hooks";
import { aiTone } from "@/lib/ai-status"; import { useStaggerReveal } from "@/hooks/use-gsap-animation";
import { downloadCsv } from "@/lib/csv"; import { formatNumber } from "@/lib/format";
import { formatNumber, formatRelativeTime } from "@/lib/format";
import type { import type {
ModerationAction, ModerationAction,
ModerationActionType, ModerationCoverage,
ModerationStats, ModerationStats,
} from "@/lib/types"; } from "@/lib/types";
import { staggerDelay } from "@/lib/utils";
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
gsap.registerPlugin(useGSAP); gsap.registerPlugin(useGSAP);
} }
const ACTION_ICON: Record<ModerationActionType, React.ReactNode> = {
delete_message: <Trash2 className="size-3.5" />,
mute_user: <MicOff className="size-3.5" />,
warn_user: <MessageSquareWarning className="size-3.5" />,
kick_user: <UserX className="size-3.5" />,
ban_user: <Ban className="size-3.5" />,
};
const ACTION_LABEL: Record<ModerationActionType, string> = {
delete_message: "Delete",
mute_user: "Mute",
warn_user: "Warn",
kick_user: "Kick",
ban_user: "Ban",
};
export function ModerationView({ export function ModerationView({
initialStats, initialStats,
initialActions, initialActions,
initialCoverage,
}: { }: {
initialStats?: ModerationStats; initialStats?: ModerationStats;
initialActions?: ModerationAction[]; initialActions?: ModerationAction[];
initialCoverage?: ModerationCoverage;
}) { }) {
const { const {
data: stats, data: stats,
isLoading, isLoading,
error, error,
mutate: mutateStats, mutate,
} = useModerationStats(initialStats); } = useModerationStats(initialStats);
const [statusFilter, setStatusFilter] = useState<string>("");
const [typeFilter, setTypeFilter] = useState<string>("");
const { data: actions } = useModerationActions( const { data: actions } = useModerationActions(
statusFilter || undefined, undefined,
typeFilter || undefined, undefined,
!statusFilter && !typeFilter ? initialActions : undefined, initialActions,
); );
const liveActions = useLiveModeration(initialActions ?? [], 50); const { data: hourly } = useHourlyModeration();
const { data: trends } = useModerationTrends(30); const { data: trends } = useModerationTrends(14);
const { data: domains } = useTopFlaggedDomains(30);
const { data: channels } = useTopFlaggedChannels(30);
const { data: hourly } = useHourlyModeration(30);
const { data: coverage } = useModerationCoverage(30); const { data: coverage } = useModerationCoverage(30);
const [drilldown, setDrilldown] = useState<string | null>(null);
const { data: categoryActions, isValidating: categoryLoading } =
useModerationByCategory(drilldown ? 30 : 0, drilldown);
const failedRate = stats ? stats.failed_rate * 100 : 0;
const byAction = stats?.by_action ?? {};
const segments = Object.entries(byAction).map(([k, _v]) => ({
value: 1,
color:
k === "ban_user" || k === "kick_user"
? "var(--color-vermilion)"
: k === "warn_user"
? "var(--color-amber)"
: "var(--color-signal)",
label: k,
}));
const ambient = useAmbient(); const ambient = useAmbient();
useEffect(() => {
ambient.set(
failedRate > 20 ? "vermilion" : failedRate > 5 ? "amber" : "signal",
0.3 + Math.min(0.4, failedRate / 50),
"moderation",
);
}, [failedRate, ambient]);
// Alert-priority HUD: a GSAP pulse loop on the inverted mono badge when const [filterMode, setFilterMode] = useState<"all" | "flagged" | "clean">(
// there is anything pending review — cleared up when the queue empties. "all",
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] },
); );
const containerRef = useStaggerReveal<HTMLDivElement>(".mod-tile", {
stagger: 0.035,
y: 8,
dependencies: [stats],
});
const executed = stats?.executed ?? 0;
const failed = stats?.failed ?? 0;
const total = stats?.total || 1;
const failedRatio = failed / total;
useEffect(() => {
if (failedRatio > 0.15) ambient.set("vermilion", 0.5, "high failure rate");
else if (failedRatio > 0.05) ambient.set("amber", 0.35, "moderate issues");
else ambient.set("signal", 0.25, "moderation nominal");
}, [failedRatio, ambient]);
if (error && !stats) if (error && !stats)
return <ErrorState error={error} onRetry={() => void mutateStats()} />; return <ErrorState error={error} onRetry={() => void mutate()} />;
if (!stats && isLoading) if (!stats && isLoading)
return (
<div className="space-y-5">
<SkeletonMetricRow cols={4} />
<SkeletonPanel rows={5} />
<SkeletonRows rows={6} />
</div>
);
if (!stats)
return (
<ErrorState
error={error ?? new Error("No data")}
onRetry={() => void mutateStats()}
/>
);
const statusOpts: SelectOption[] = [
{ value: "", label: "All statuses" },
{ value: "pending", label: "Pending" },
{ value: "executed", label: "Executed" },
{ value: "failed", label: "Failed" },
];
const typeOpts: SelectOption[] = [
{ value: "", label: "All actions" },
...Object.keys(byAction).map((k) => ({
value: k,
label: ACTION_LABEL[k as ModerationActionType] ?? k,
})),
];
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Alert-priority HUD header */} <SkeletonMetricRow cols={3} />
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3"> <SkeletonPanel rows={6} />
<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> </div>
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase"> );
AUTO-MOD RADAR · ALERT_QUEUE if (!stats) return null;
return (
<PageTransition>
<div ref={containerRef} className="space-y-4">
{/* Precision Sub-Header Bar */}
<div className="mod-tile 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 ${
failedRatio > 0.1
? "bg-[#f43f5e] shadow-[0_0_8px_#f43f5e]"
: "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
}`}
/>
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
Moderation Intelligence Console
</h1> </h1>
</div> </div>
<div <div className="flex items-center gap-1.5 rounded-[5px] border border-white/[0.06] bg-white/[0.02] p-0.5">
ref={alertRef} {(["all", "flagged", "clean"] as const).map((mode) => (
className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-0.5 font-mono text-[11px] font-bold uppercase ${ <button
pendingCount > 0 key={mode}
? "border border-ink bg-ink text-canvas" type="button"
: "bg-surface text-ink-soft" onClick={() => setFilterMode(mode)}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
filterMode === mode
? "bg-white/[0.08] text-white border border-white/[0.12]"
: "text-[#8a8f98] hover:text-[#d0d6e0]"
}`} }`}
> >
<span>{pendingCount > 0 ? "PENDING" : "QUEUE CLEAR"}</span> {mode.toUpperCase()}
{pendingCount > 0 && <span>· {pendingCount}</span>}
</div>
</div>
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
<MetricTile
label="Total actions"
value={formatNumber(stats.total)}
tone="signal"
icon={<ShieldAlert className="size-3.5" />}
/>
<MetricTile
label="Executed"
value={formatNumber(stats.executed)}
tone="signal"
icon={<CheckCircle2 className="size-3.5" />}
/>
<MetricTile
label="Failed"
value={formatNumber(stats.failed)}
tone={stats.failed > 0 ? "vermilion" : "neutral"}
icon={<XCircle className="size-3.5" />}
/>
<MetricTile
label="Pending"
value={formatNumber(stats?.pending)}
tone={stats?.pending > 0 ? "amber" : "neutral"}
icon={<Clock className="size-3.5" />}
/>
</div>
<div className="grid gap-5 lg:grid-cols-5">
<div className="lg:col-span-2">
{trends ? (
<TopicTrends trends={trends} />
) : (
<SkeletonPanel rows={6} />
)}
</div>
<div className="lg:col-span-5">
<LiveModerationFeed actions={liveActions} />
</div>
{coverage ? (
<CoverageTiles coverage={coverage} />
) : (
<SkeletonPanel rows={3} className="lg:col-span-5" />
)}
<div className="lg:col-span-2">
{domains ? (
<ScamDomains domains={domains} />
) : (
<SkeletonPanel rows={6} />
)}
</div>
<div className="lg:col-span-2">
{hourly ? (
<ModerationHeatmap hours={hourly} />
) : (
<SkeletonPanel rows={6} />
)}
</div>
<div className="lg:col-span-1">
{channels ? (
<TopChannels channels={channels} />
) : (
<SkeletonPanel rows={6} />
)}
</div>
<div className="lg:col-span-3">
<CategoryDrilldown
trends={trends ?? { categories: [], severities: [], actions: [] }}
selected={drilldown}
actions={categoryActions ?? []}
loading={categoryLoading}
onSelect={setDrilldown}
/>
</div>
<GlassPanel className="lg:col-span-2">
<SectionHeader eyebrow="health" title="Breakdown" />
<div className="flex items-center gap-5">
<Donut
segments={
segments.length
? segments
: [
{
value: 1,
color: "var(--color-ink-faint)",
label: "none",
},
]
}
centerLabel={`${Math.round(failedRate)}%`}
centerSub="fail rate"
/>
<div className="flex-1 space-y-2 text-sm">
{Object.entries(byAction).map(([k, v]) => {
const count = typeof v === "number" ? v : null;
return (
<div key={k} className="flex items-center gap-2.5">
<span className="text-ink-soft">
{ACTION_ICON[k as ModerationActionType]}
</span>
<span className="flex-1 text-ink-soft">
{ACTION_LABEL[k as ModerationActionType] ?? k}
</span>
{count !== null && (
<span className="mono text-ink">{count}</span>
)}
</div>
);
})}
{Object.keys(byAction).length === 0 && (
<div className="text-xs text-ink-faint">
No actions recorded yet.
</div>
)}
</div>
</div>
</GlassPanel>
<GlassPanel className="lg:col-span-3">
<SectionHeader
eyebrow="filter"
title="Action log"
action={
<div className="flex items-center gap-2">
<Filter className="size-3.5 text-ink-faint" />
<Select
value={typeFilter}
onChange={setTypeFilter}
options={typeOpts}
size="sm"
className="w-36"
/>
<Select
value={statusFilter}
onChange={setStatusFilter}
options={statusOpts}
size="sm"
className="w-32"
/>
<button
type="button"
onClick={() =>
downloadCsv(
"moderation-actions.csv",
(actions ?? []).map((a) => ({
id: a.id,
user: a.username ?? a.user_id,
action_type: a.action_type,
status: a.status,
severity: a.severity ?? "",
categories: (a.categories ?? []).join("|"),
reason: a.reason ?? "",
created_at: a.created_at
? new Date(a.created_at).toISOString()
: "",
})),
)
}
className="rounded-full border border-hairline bg-white/[0.03] px-3 py-1 text-xs text-ink-soft transition-colors hover:bg-white/[0.06]"
title="Download moderation actions as CSV"
>
CSV
</button> </button>
))}
</div> </div>
</div>
{/* Primary Metric Grid */}
<div className="mod-tile grid gap-3 sm:grid-cols-3">
<MetricTile
label="Total Audited"
value={formatNumber(stats.total)}
hint="Continuous LLM inspection"
icon={<Shield className="size-4" />}
/>
<MetricTile
label="Clean Executed"
value={formatNumber(stats.executed)}
hint={`${Math.round((executed / total) * 100)}% execution rate`}
tone="signal"
icon={<CheckCircle2 className="size-4" />}
/>
<MetricTile
label="Pending / Failed"
value={formatNumber(stats.pending + stats.failed)}
hint={`${stats.failed} failed items`}
tone={failedRatio > 0.05 ? "vermilion" : "neutral"}
icon={<AlertTriangle className="size-4" />}
/>
</div>
{/* Live Moderation Stream */}
<div className="mod-tile">
<GlassPanel>
<SectionHeader
eyebrow="Realtime Feed"
title="Live Stream Audit Log"
/>
<div className="mt-3">
<LiveModerationFeed
actions={
actions?.filter((r) => {
if (filterMode === "flagged") return r.status === "failed";
if (filterMode === "clean") return r.status === "executed";
return true;
}) ?? []
} }
/> />
<div className="max-h-[60vh] space-y-1.5 overflow-y-auto pr-1">
{(actions ?? []).map((a, i) => (
<ActionRow key={a.id} a={a} index={i} />
))}
{(actions ?? []).length === 0 && (
<div className="py-10 text-center text-xs text-ink-faint">
No matching actions.
</div>
)}
</div> </div>
</GlassPanel> </GlassPanel>
</div> </div>
</div>
);
}
function ActionRow({ a, index = 0 }: { a: ModerationAction; index?: number }) { {/* Heatmap Section */}
const tone = {hourly && hourly.length > 0 && (
a.status === "executed" <div className="mod-tile">
? "signal" <GlassPanel>
: a.status === "failed" <SectionHeader
? "vermilion" eyebrow="Distribution"
: "amber"; title="Hourly Incident Heatmap"
const icon = ACTION_ICON[a.action_type] ?? ( />
<AlertTriangle className="size-3.5" /> <div className="mt-3">
); <ModerationHeatmap hours={hourly} />
// Map moderation severity → design-system tone (reuse aiTone with a
// severity→status projection so "none" reads as clean/signal).
const severityTone =
a.severity == null
? null
: aiTone(
a.severity === "none"
? "clean"
: a.severity === "low" || a.severity === "medium"
? "warn"
: "flagged",
);
return (
<div
className="animate-stagger flex items-start gap-3 rounded-[10px] border border-hairline bg-white/[0.03] p-3"
style={staggerDelay(index)}
>
<span
className={`mt-0.5 ${tone === "vermilion" ? "text-vermilion" : tone === "amber" ? "text-amber" : "text-signal"}`}
>
{icon}
</span>
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="text-sm font-semibold text-ink">
{a.username ?? "unknown"}
</span>
<Badge tone={tone}>{a.status}</Badge>
<span className="mono ml-auto text-[0.6rem] text-ink-faint">
{formatRelativeTime(a.created_at)}
</span>
</div> </div>
{a.reason && ( </GlassPanel>
<div className="mt-0.5 text-xs text-ink-soft">“{a.reason}”</div>
)}
{severityTone && a.severity && (
<div className="mt-1 flex flex-wrap items-center gap-1">
<Badge tone={severityTone}>{a.severity}</Badge>
{a.confidence != null && (
<span className="mono text-[0.6rem] text-ink-faint">
conf {(a.confidence * 100).toFixed(0)}%
</span>
)}
</div> </div>
)} )}
{a.flags?.length ? (
<div className="mt-1 flex flex-wrap gap-1">
{a.flags.slice(0, 6).map((f) => (
<Badge key={f} tone="amber">
{f}
</Badge>
))}
</div>
) : null}
{a.evidence?.length ? (
<div className="mt-1 border-l-2 border-hairline pl-2 text-xs text-ink-faint">
&ldquo;{a.evidence[0]}&rdquo;
</div>
) : null}
{a.executed_by && (
<div className="mono mt-0.5 text-[0.6rem] text-ink-faint">
by {a.executed_by}
{a.executed_at ? ` · ${formatRelativeTime(a.executed_at)}` : ""}
</div>
)}
{a.content && (
<div className="mt-1 line-clamp-2 rounded-[8px] bg-white/[0.03] px-2 py-1 text-xs text-ink-faint">
{a.content}
</div>
)}
{a.error && (
<div className="mt-1 text-xs text-vermilion">{a.error}</div>
)}
</div>
</div> </div>
</PageTransition>
); );
} }
services/frontend/src/app/(dashboard)/voice/view.tsx
+109 -182
View File
@@ -1,6 +1,8 @@
"use client"; "use client";
import { import {
AudioWaveform,
Disc,
Headphones, Headphones,
Mic, Mic,
MicOff, MicOff,
@@ -16,6 +18,7 @@ import { Button, GlassPanel, toast } from "@/components/primitives";
import { import {
EmptyState, EmptyState,
ErrorState, ErrorState,
PageTransition,
SectionHeader, SectionHeader,
SkeletonPanel, SkeletonPanel,
} from "@/components/shared"; } from "@/components/shared";
@@ -60,13 +63,12 @@ export function VoiceView({
const [channelId, setChannelId] = useState<string | null>( const [channelId, setChannelId] = useState<string | null>(
initialStatus?.activeChannelId ?? null, initialStatus?.activeChannelId ?? null,
); );
const [micOn, setMicOn] = useState(false);
const [micVol, setMicVol] = useState(100); const [micVol, setMicVol] = useState(100);
const [listenVol, setListenVol] = useState(75); const [listenVol, setListenVol] = useState(75);
const hudRef = useStaggerReveal<HTMLDivElement>(".hud-tile", { const containerRef = useStaggerReveal<HTMLDivElement>(".voice-tile", {
stagger: 0.06, stagger: 0.04,
y: 14, y: 8,
dependencies: [status], dependencies: [status],
}); });
@@ -76,278 +78,203 @@ export function VoiceView({
}, [subscribe, ws]); }, [subscribe, ws]);
useEffect(() => { useEffect(() => {
if (status?.connected) ambient.set("signal", 0.55, "voice live"); if (status?.connected) ambient.set("signal", 0.45, "voice active");
else ambient.set("vermilion", 0.35, "voice idle"); else ambient.set("vermilion", 0.25, "voice disconnected");
}, [status?.connected, ambient]); }, [status?.connected, ambient]);
if (error && !status) if (error && !status)
return <ErrorState error={error} onRetry={() => void mutate()} />; return <ErrorState error={error} onRetry={() => void mutate()} />;
if (!status && isLoading) if (!status && isLoading)
return ( return (
<div className="space-y-5"> <div className="space-y-4">
<SkeletonPanel rows={2} /> <SkeletonPanel rows={3} />
<div className="grid gap-5 lg:grid-cols-3"> <SkeletonPanel rows={5} />
<SkeletonPanel className="lg:col-span-2" rows={4} />
<SkeletonPanel rows={4} />
</div>
</div> </div>
); );
const connected = status?.connected ?? false; const connected = status?.connected ?? false;
const listenBars = Array.from(listen.levels.values()).slice(0, 32);
const micBars = mic.micLevel
? Array.from({ length: 12 }, (_, i) =>
Math.max(
0.08,
Math.min(1, mic.micLevel * (1 - i * 0.06) + (i % 3) * 0.05),
),
)
: [];
const onConnect = async () => { const onConnect = async () => {
if (!guildId || !channelId) { if (!guildId || !channelId) {
toast({ title: "Pick a guild + channel", tone: "vermilion" }); toast({ title: "Select target channel", tone: "vermilion" });
return; return;
} }
try { try {
await connect.mutateAsync({ guildId, channelId }); await connect.mutateAsync({ guildId, channelId });
toast({ title: "Connected to voice", tone: "signal" }); toast({ title: "Connected to voice channel", tone: "signal" });
} catch (e) { } catch (e) {
toast({ toast({
title: "Connect failed", title: "Connection failed",
description: String(e), description: String(e),
tone: "vermilion", tone: "vermilion",
}); });
} }
}; };
const onMic = async (on: boolean) => { const onDisconnect = async () => {
try { try {
await mic.mutateAsync(on); await disconnect.mutateAsync();
setMicOn(on); toast({ title: "Disconnected from voice", tone: "neutral" });
} catch (e) { } catch (e) {
toast({ title: "Mic error", description: String(e), tone: "vermilion" }); toast({
title: "Disconnect failed",
description: String(e),
tone: "vermilion",
});
} }
}; };
return ( return (
<div ref={hudRef} className="space-y-4"> <PageTransition>
{/* Tactical HUD Header Bar */} <div ref={containerRef} className="space-y-4">
<div className="hud-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3"> {/* Precision Sub-Header Bar */}
<div className="flex items-center gap-3"> <div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
<div className="relative flex size-3 items-center justify-center"> <div className="flex items-center gap-2.5">
<span <span
className={`absolute inline-flex size-full rounded-full opacity-75 ${ className={`h-2 w-2 rounded-full ${
connected ? "animate-ping bg-signal" : "bg-vermilion" connected
? "bg-[#10b981] shadow-[0_0_8px_#10b981]"
: "bg-[#8a8f98]"
}`} }`}
/> />
<span <h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
className={`relative inline-flex size-2 rounded-full ${ Voice Spectrum & Stage Controls
connected ? "bg-signal" : "bg-vermilion"
}`}
/>
</div>
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
VOICE MATRIX · LIVE_LINK
</h1> </h1>
</div> </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"> <div className="flex items-center gap-2 font-mono text-[11px]">
<span className="text-ink-faint">LINK:</span> <span className="text-[#8a8f98]">STAGE:</span>
<span <span
className={`font-bold ${connected ? "text-signal" : "text-vermilion"}`} className={`rounded px-1.5 py-0.5 font-medium border ${
connected
? "border-[#10b981]/30 bg-[#10b981]/10 text-[#10b981]"
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
}`}
> >
{connected ? "ESTABLISHED" : "STANDBY"} {connected ? "LIVE_BRIDGE" : "OFFLINE"}
</span> </span>
</div> </div>
</div> </div>
<GlassPanel className="hud-tile"> {/* Channel Router Stage */}
<div className="voice-tile">
<GlassPanel className="p-4">
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-wrap items-center justify-between gap-3">
<div className="flex-1 min-w-[240px]">
<GuildChannelPicker <GuildChannelPicker
mode="voice"
guildsInitial={initialGuilds}
guildId={guildId} guildId={guildId}
channelId={channelId} channelId={channelId}
guildsInitial={initialGuilds}
onChange={(g, c) => { onChange={(g, c) => {
setGuildId(g); setGuildId(g);
setChannelId(c); setChannelId(c);
}} }}
mode="voice"
/> />
</div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{connected ? ( {connected ? (
<Button <Button
variant="danger" variant="danger"
size="sm" size="md"
onClick={() => disconnect.mutate()} onClick={onDisconnect}
disabled={disconnect.isPending} className="gap-1.5"
> >
<PhoneOff className="size-4" /> Disconnect <PhoneOff className="size-3.5" />
Disconnect
</Button> </Button>
) : ( ) : (
<Button <Button
variant="primary" variant="primary"
size="sm" size="md"
onClick={onConnect} onClick={onConnect}
disabled={connect.isPending} className="gap-1.5"
> >
<Radio className="size-4" /> Connect <Radio className="size-3.5" />
Connect Bridge
</Button> </Button>
)} )}
</div> </div>
</div> </div>
</GlassPanel>
</div>
<div className="mt-3 flex flex-wrap items-center gap-2"> {/* Voice Stage Grid */}
<Button <div className="grid gap-3 lg:grid-cols-3">
variant={micOn ? "primary" : "outline"} <GlassPanel className="voice-tile lg:col-span-2">
size="sm" <SectionHeader
onClick={() => onMic(!micOn)} eyebrow="Participants"
disabled={mic.isPending} title="Active Stage Members"
aria-pressed={micOn} />
> <div className="mt-4 min-h-[160px]">
{micOn ? <Mic className="size-4" /> : <MicOff className="size-4" />} <VoiceStage speakers={speakers} />
{micOn ? "Mic live" : "Push-to-talk"}
</Button>
{micOn && (
<div
className="flex items-center gap-2 rounded-[10px] border border-signal/30 bg-signal/[0.06] px-3 py-1.5"
role="status"
aria-label="Microphone level meter"
>
<Mic className="size-4 text-signal" />
<Equalizer bars={micBars} className="w-28" />
</div> </div>
)} </GlassPanel>
<Button
variant={listen.active ? "primary" : "outline"} <GlassPanel className="voice-tile flex flex-col justify-between">
size="sm" <div>
onClick={() => listen.toggle(!listen.active)} <SectionHeader
> eyebrow="Telemetry"
{listen.active ? ( title="Input / Output Mix"
<Headphones className="size-4" /> />
) : ( <div className="mt-4 space-y-4">
<Volume2 className="size-4" /> <div>
)} <div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
{listen.active ? "Listening" : "Listen in"} <span className="flex items-center gap-1.5">
</Button> <Mic className="size-3.5 text-[#7170ff]" />
{listen.active && ( Mic Sensitivity
<div className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-1.5"> </span>
<Waves className="size-4 text-signal" /> <span className="font-mono text-[11px] text-[#8a8f98]">
<Equalizer bars={listenBars} className="w-40" /> {micVol}%
</span>
</div> </div>
)}
<div className="ml-auto flex items-center gap-3">
<label className="flex items-center gap-2 text-xs text-ink-faint">
<MicOff className="size-3.5" />
<input <input
type="range" type="range"
min={0} min={0}
max={100} max={150}
value={micVol} value={micVol}
onChange={(e) => { onChange={(e) => {
const v = Number(e.target.value); const v = Number(e.target.value);
setMicVol(v); setMicVol(v);
mic.setVolume(v); mic.setVolume(v / 100);
}} }}
aria-label="Mic transmit volume" className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#7170ff]"
className="h-1 w-24 cursor-pointer accent-[var(--color-signal)]"
/> />
<span className="mono w-8 text-right">{micVol}%</span> </div>
</label>
<label className="flex items-center gap-2 text-xs text-ink-faint"> <div>
<Volume2 className="size-3.5" /> <div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
<span className="flex items-center gap-1.5">
<Volume2 className="size-3.5 text-[#10b981]" />
Monitor Output
</span>
<span className="font-mono text-[11px] text-[#8a8f98]">
{listenVol}%
</span>
</div>
<input <input
type="range" type="range"
min={0} min={0}
max={100} max={150}
value={listenVol} value={listenVol}
onChange={(e) => { onChange={(e) => {
const v = Number(e.target.value); const v = Number(e.target.value);
setListenVol(v); setListenVol(v);
listen.setVolume(v); listen.setVolume(v / 100);
}} }}
aria-label="Listen volume" className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#10b981]"
className="h-1 w-24 cursor-pointer accent-[var(--color-signal)]"
/> />
<span className="mono w-8 text-right">{listenVol}%</span>
</label>
</div> </div>
</div> </div>
</GlassPanel> </div>
<div className="grid gap-4 lg:grid-cols-3"> <div className="mt-6 border-t border-white/[0.06] pt-3">
<GlassPanel className="hud-tile lg:col-span-2"> <div className="font-mono text-[10px] text-[#8a8f98]">
<SectionHeader CODEC: OPUS 48KHZ · LOW_LATENCY
eyebrow="stage · radar"
title="Live speakers"
action={
<span className="mono text-xs text-ink-faint">
{speakers.length} present
</span>
}
/>
{speakers.length === 0 ? (
<EmptyState
icon={<MicOff className="size-7" />}
title={connected ? "Silent right now" : "Not connected"}
description={
connected
? "Speakers appear as they talk."
: "Connect to a voice channel to see presence."
}
/>
) : (
<>
<VoiceStage speakers={speakers} />
<div className="mt-2 flex flex-wrap justify-center gap-2">
{speakers.map((sp) => (
<span
key={sp.userId}
className={`mono flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${
sp.speaking
? "border-signal/40 bg-signal/10 text-signal"
: "border-hairline bg-white/5 text-ink-soft"
}`}
>
<span
className={`size-1.5 rounded-full ${sp.speaking ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
/>
{sp.username}
</span>
))}
</div> </div>
</>
)}
</GlassPanel>
<GlassPanel className="hud-tile">
<SectionHeader eyebrow="links" title="Connections" />
<div className="space-y-2">
{(status?.connections ?? []).map((c) => (
<div
key={`${c.guildId}-${c.channelId}`}
className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-sm"
>
<span className="size-2 rounded-full bg-signal" />
<span className="flex-1 truncate text-ink-soft">
{c.channelName}
</span>
<span className="mono text-[0.6rem] text-ink-faint">
{new Date(c.connectedAt).toLocaleTimeString()}
</span>
</div>
))}
{(status?.connections ?? []).length === 0 && (
<div className="py-6 text-center text-xs text-ink-faint">
No active links
</div>
)}
</div>
<div className="mt-3 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-soft">
<span className="mono text-ink-faint">channel</span>{" "}
{status?.activeChannelName ?? "—"}
</div> </div>
</GlassPanel> </GlassPanel>
</div> </div>
</div> </div>
</PageTransition>
); );
} }
services/frontend/src/app/globals.css
+149 -335
View File
@@ -3,88 +3,98 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
/* /*
* GMW — Ambient Ops Console design system. * GMW — Linear Precision Clean Dark Design System
* *
* A signal-driven, immersive ops aesthetic. Hierarchy comes from scale/weight * Inspired by Linear's ultra-precise, dark-mode native interface.
* and tonal surface blocks, not borders. The whole app sits behind a live * Built on achromatic luminance hierarchy, near-black canvas (#08090a),
* WebGL haze (see components/ambient) tinted by a semantic signal: * ultra-crisp hairline borders, subtle indigo/violet accents (#5e6ad2 / #7170ff),
* lime = OK / live * and buttery smooth GSAP-driven micro-interactions.
* amber = warn
* vermilion = flag / danger
*/ */
@theme { @theme {
/* ── Surfaces (dark-first; light overrides below) ── */ /* ── Canvas & Surface Stack (Luminance Stacking) ── */
--color-canvas: oklch(0.12 0.014 70); --color-canvas: #08090a;
--color-canvas-2: oklch(0.16 0.02 70); --color-canvas-2: #0f1011;
--color-surface: oklch(0.2 0.022 70 / 0.45); --color-surface: rgba(255, 255, 255, 0.035);
--color-surface-2: oklch(0.26 0.024 70 / 0.45); --color-surface-2: rgba(255, 255, 255, 0.06);
--color-surface-elevated: #191a1b;
--color-surface-hover: rgba(255, 255, 255, 0.08);
/* ── Ink ── */ /* ── Typography & Ink ── */
--color-ink: oklch(0.95 0.008 75); --color-ink: #f7f8f8;
--color-ink-soft: oklch(0.66 0.02 75); --color-ink-soft: #d0d6e0;
--color-ink-faint: oklch(0.5 0.02 75); --color-ink-muted: #8a8f98;
--color-ink-faint: #62666d;
/* ── Structural ── */ /* ── Hairline Structural Borders ── */
--color-hairline: oklch(1 0 0 / 0.1); --color-hairline: rgba(255, 255, 255, 0.08);
--color-hairline-subtle: rgba(255, 255, 255, 0.05);
--color-hairline-focus: rgba(255, 255, 255, 0.16);
--hairline-w: 1px; --hairline-w: 1px;
/* ── Semantic signals (monochrome: tone = luminance steps) ── */ /* ── Brand & Accent Signals (Subdued Precision) ── */
--color-signal: oklch(0.97 0 0); --color-brand: #5e6ad2;
--color-signal-ink: oklch(0.1 0 0); --color-brand-accent: #7170ff;
--color-signal-glow: oklch(1 0 0 / 0.35); --color-brand-hover: #828fff;
--color-amber: oklch(0.72 0 0); --color-brand-subtle: rgba(94, 106, 210, 0.15);
--color-vermilion: oklch(0.85 0 0);
--color-vermilion-glow: oklch(1 0 0 / 0.45);
--color-ring: var(--color-signal); --color-signal: #7170ff;
--color-signal-ink: #ffffff;
--color-signal-glow: rgba(113, 112, 255, 0.25);
/* ── Fonts ── */ /* Semantic status colors (crisp, purposeful) */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --color-status-success: #10b981;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --color-status-success-subtle: rgba(16, 185, 129, 0.15);
--font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif; --color-amber: #f59e0b;
--color-amber-subtle: rgba(245, 158, 11, 0.15);
--color-vermilion: #f43f5e;
--color-vermilion-subtle: rgba(244, 63, 94, 0.15);
--color-vermilion-glow: rgba(244, 63, 94, 0.3);
/* ── Radii ── */ --color-ring: var(--color-brand-accent);
--radius-r: 16px;
--radius-r-panel: 12px; /* ── Typography Stack ── */
--radius-r-control: 9px; --font-sans: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--font-display: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
/* ── Radii (Refined, tighter precision) ── */
--radius-r: 10px;
--radius-r-panel: 8px;
--radius-r-control: 6px;
--radius-r-pill: 9999px; --radius-r-pill: 9999px;
} }
/* ── Light theme overrides ── */ /* ── Light Theme Fallbacks ── */
.light { .light {
color-scheme: light; color-scheme: light;
--color-canvas: oklch(0.96 0.012 80); --color-canvas: #f7f8f8;
--color-canvas-2: oklch(0.92 0.014 80); --color-canvas-2: #f3f4f5;
--color-surface: oklch(1 0 0 / 0.7); --color-surface: rgba(0, 0, 0, 0.03);
--color-surface-2: oklch(1 0 0 / 0.5); --color-surface-2: rgba(0, 0, 0, 0.05);
--color-surface-elevated: #ffffff;
--color-surface-hover: rgba(0, 0, 0, 0.06);
--color-ink: oklch(0.22 0.02 70); --color-ink: #171717;
--color-ink-soft: oklch(0.46 0.02 70); --color-ink-soft: #404040;
--color-ink-faint: oklch(0.6 0.02 70); --color-ink-muted: #737373;
--color-ink-faint: #a3a3a3;
--color-hairline: oklch(0.22 0.02 70 / 0.12); --color-hairline: rgba(0, 0, 0, 0.08);
} --color-hairline-subtle: rgba(0, 0, 0, 0.04);
--color-hairline-focus: rgba(0, 0, 0, 0.18);
/* Light-theme scrollbar + selection tuned for pale canvas */
.light ::-webkit-scrollbar-thumb {
background: oklch(0.22 0.02 70 / 0.2);
}
.light ::-webkit-scrollbar-thumb:hover {
background: oklch(0.22 0.02 70 / 0.34);
}
.light ::selection {
background: oklch(0.2 0 0 / 0.9);
color: oklch(1 0 0);
} }
@layer base { @layer base {
* { * {
@apply border-transparent; @apply border-transparent;
font-feature-settings: "cv01", "ss03";
} }
html { html {
@apply font-sans antialiased scroll-smooth; @apply font-sans antialiased scroll-smooth;
background-color: var(--color-canvas);
color: var(--color-ink);
} }
body { body {
@@ -93,72 +103,87 @@
} }
::selection { ::selection {
background: var(--color-signal-glow); background: rgba(113, 112, 255, 0.28);
color: inherit; color: #ffffff;
} }
/* Scrollbar */ /* Linear-style minimalist slim scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 6px;
height: 8px; height: 6px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: oklch(1 0 0 / 0.14); background: rgba(255, 255, 255, 0.12);
border-radius: 999px; border-radius: 9999px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: oklch(1 0 0 / 0.26); background: rgba(255, 255, 255, 0.22);
} }
:focus-visible { :focus-visible {
outline: 2px solid var(--color-signal); outline: 2px solid var(--color-brand-accent);
outline-offset: 2px; outline-offset: 2px;
} }
} }
@layer components { @layer components {
/* Glass panel — the workhorse container. Floating, blurred, faint glow. */ /* Precision Surface Panel (Linear Card) */
.glass { .glass {
background: var(--color-surface); background: var(--color-surface);
border: var(--hairline-w) solid var(--color-hairline); border: 1px solid var(--color-hairline);
border-radius: var(--radius-r); border-radius: var(--radius-r);
backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(12px);
box-shadow: box-shadow:
0 1px 0 0 oklch(1 0 0 / 0.06) inset, 0 1px 0 0 rgba(255, 255, 255, 0.03) inset,
0 18px 50px -28px oklch(0 0 0 / 0.8); 0 12px 32px -16px rgba(0, 0, 0, 0.7);
transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
} }
.glass-2 { .glass-2 {
background: var(--color-surface-2); background: var(--color-surface-2);
border: var(--hairline-w) solid var(--color-hairline); border: 1px solid var(--color-hairline-subtle);
border-radius: var(--radius-r-panel); border-radius: var(--radius-r-panel);
backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(8px);
} }
/* Section label — small uppercase mono eyebrow */ /* Linear-style subtle interactive hover card */
.linear-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-r-panel);
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.linear-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
}
/* Precision Eyebrow Header */
.eyebrow { .eyebrow {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.68rem; font-size: 0.68rem;
letter-spacing: 0.18em; font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: var(--color-ink-faint); color: var(--color-ink-muted);
} }
/* Micro-Pill Tag */
.pill { .pill {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.35rem;
padding: 0.22rem 0.7rem; padding: 0.18rem 0.55rem;
border-radius: var(--radius-r-pill); border-radius: var(--radius-r-pill);
font-size: 0.72rem; font-size: 0.7rem;
font-weight: 600; font-weight: 500;
letter-spacing: 0.01em; background: rgba(255, 255, 255, 0.04);
background: oklch(1 0 0 / 0.06);
border: 1px solid var(--color-hairline); border: 1px solid var(--color-hairline);
color: var(--color-ink-soft); color: var(--color-ink-soft);
} }
@@ -166,294 +191,83 @@
.mono { .mono {
font-family: var(--font-mono); font-family: var(--font-mono);
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
} }
/* Display Typography (Compressed Linear-style tracking) */
.display { .display {
font-family: var(--font-display); font-family: var(--font-sans);
font-weight: 800; font-weight: 600;
letter-spacing: -0.03em; letter-spacing: -0.035em;
line-height: 0.96; line-height: 1.05;
} }
} }
@layer utilities { @layer utilities {
.text-signal { color: var(--color-signal); } .text-signal { color: var(--color-brand-accent); }
.text-brand { color: var(--color-brand-accent); }
.text-amber { color: var(--color-amber); } .text-amber { color: var(--color-amber); }
.text-vermilion { color: var(--color-vermilion); } .text-vermilion { color: var(--color-vermilion); }
.text-success { color: var(--color-status-success); }
.text-ink-soft { color: var(--color-ink-soft); } .text-ink-soft { color: var(--color-ink-soft); }
.text-ink-muted { color: var(--color-ink-muted); }
.text-ink-faint { color: var(--color-ink-faint); } .text-ink-faint { color: var(--color-ink-faint); }
/* Fluid hero title — never overflows on small screens. */ .hero-clamp {
.hero-clamp { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); } font-size: clamp(1.85rem, 1.2rem + 3.5vw, 2.5rem);
letter-spacing: -0.04em;
font-weight: 600;
}
.glow-signal { .glow-signal {
text-shadow: 0 0 22px var(--color-signal-glow); text-shadow: 0 0 16px var(--color-signal-glow);
}
.glow-vermilion {
text-shadow: 0 0 22px var(--color-vermilion-glow);
}
/* animated scan line for live headers */
.scan-line {
position: relative;
overflow: hidden;
}
.scan-line::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 1px;
width: 100%;
background: linear-gradient(
90deg,
transparent,
var(--color-signal) 25%,
var(--color-signal) 75%,
transparent
);
background-size: 200% 100%;
animation: scan 2.8s linear infinite;
opacity: 0.7;
} }
.ring-focus { .ring-focus {
transition: box-shadow 0.18s ease, border-color 0.18s ease; transition: box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
} }
.ring-focus:hover { .ring-focus:hover {
box-shadow: 0 0 0 1px var(--color-signal-glow); border-color: rgba(255, 255, 255, 0.16);
}
.ring-focus:focus-visible {
box-shadow: 0 0 0 2px var(--color-brand-accent);
} }
} }
/* ═══ Micro Navigation Elements ═══ */
.nav-dock-item {
position: relative;
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-dock-item:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--color-ink);
}
.nav-dock-item.is-active {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* ── Keyframes ── */ /* ── Keyframes ── */
@keyframes scan {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes eq {
0%, 100% { transform: scaleY(0.25); }
30% { transform: scaleY(1); }
60% { transform: scaleY(0.5); }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin-disc { @keyframes spin-disc {
from { transform: rotate(0deg); } from { transform: rotate(0deg); }
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
@keyframes pulse-ring { @keyframes pulse-ring {
0% { transform: scale(0.85); opacity: 1; } 0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes breathe {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
} }
.animate-eq { .animate-spin-disc { animation: spin-disc 10s linear infinite; }
animation: eq 0.9s ease-in-out infinite; .animate-pulse-ring { animation: pulse-ring 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
transform-origin: bottom;
}
.animate-spin-disc { animation: spin-disc 9s linear infinite; }
.animate-spin-disc.paused { animation-play-state: paused; }
.animate-pulse-ring { animation: pulse-ring 1.6s ease-out infinite; }
.animate-shimmer {
background: linear-gradient(
90deg,
transparent,
oklch(0.86 0.19 128 / 0.1),
transparent
);
background-size: 200% 100%;
animation: shimmer 1.6s infinite;
}
.animate-breathe { animation: breathe 3.5s ease-in-out infinite; }
/* Page-enter: subtle rise+settle. Respect reduced-motion (handled globally). */
.animate-fade-up {
animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* List stagger: each child rises in sequence. Pair with inline
style={{ animationDelay }} set via staggerDelay(). */
.animate-stagger {
animation: fade-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Toast: slide up + settle from the dock edge. */
.animate-toast-in {
animation: toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateY(14px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ═══ Game-menu nav (monochrome) ═══
Corner brackets + one-shot light sweep + staggered entrance.
Pure transform/opacity — compositor only. */
.game-nav-item {
--i: 0;
position: relative;
isolation: isolate;
animation: nav-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i) * 45ms);
}
/* corner brackets on hover/active */
.game-nav-item::before,
.game-nav-item::after {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.game-nav-item::before {
border-left: 2px solid currentColor;
border-top: 2px solid currentColor;
border-top-left-radius: 13px;
clip-path: polygon(0 0, 62% 0, 62% 30%, 30% 30%, 30% 100%, 0 100%);
}
.game-nav-item::after {
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
border-bottom-right-radius: 13px;
clip-path: polygon(100% 100%, 38% 100%, 38% 70%, 70% 70%, 70% 0, 100% 0);
}
.game-nav-item:hover::before,
.game-nav-item:hover::after,
.game-nav-item.is-active::before,
.game-nav-item.is-active::after {
opacity: 1;
}
/* one-shot sweep */
.game-nav-item .game-sweep {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.game-nav-item .game-sweep > i {
position: absolute;
top: -20%;
bottom: -20%;
width: 34%;
left: -60%;
background: linear-gradient(
105deg,
transparent,
oklch(1 0 0 / 0.16),
transparent
);
transform: skewX(-14deg);
}
.game-nav-item:hover .game-sweep > i,
.game-nav-item.is-active .game-sweep > i {
animation: sweep-x 0.55s ease-out both;
}
/* active triangle marker (game cursor) */
.game-marker {
position: absolute;
top: 50%;
width: 0;
height: 0;
border-block: 7px solid transparent;
border-left: 11px solid currentColor;
transform: translateY(-50%);
filter: drop-shadow(0 0 6px var(--color-signal-glow));
animation: marker-nudge 1.6s ease-in-out infinite;
}
@keyframes marker-nudge {
0%, 100% { transform: translateY(-50%) translateX(0); }
50% { transform: translateY(-50%) translateX(3px); }
}
@keyframes sweep-x {
from { left: -60%; }
to { left: 130%; }
}
@keyframes nav-in {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── Game frame: panel with cut corners + drawn-in edge lines ── */
.game-frame {
position: relative;
}
.game-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(var(--color-hairline), var(--color-hairline)) top left /
26px 1.5px,
linear-gradient(var(--color-hairline), var(--color-hairline)) top left / 1.5px
26px,
linear-gradient(var(--color-hairline), var(--color-hairline)) top right /
26px 1.5px,
linear-gradient(var(--color-hairline), var(--color-hairline)) top right / 1.5px
26px,
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
26px 1.5px,
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
1.5px 26px,
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
26px 1.5px,
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
1.5px 26px;
background-repeat: no-repeat;
}
/* ── Mobile lightness (<md): cheaper blur, shorter animations ── */
@media (max-width: 767px) {
.glass {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.game-nav-item {
animation-duration: 0.25s;
animation-delay: calc(var(--i) * 18ms);
}
.scan-line::after,
.animate-shimmer {
display: none;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.scan-line::after,
.scan-line,
.animate-eq,
.animate-spin-disc, .animate-spin-disc,
.animate-pulse-ring, .animate-pulse-ring {
.animate-shimmer,
.animate-breathe,
.animate-fade-up,
.animate-stagger,
.animate-toast-in {
animation: none !important; animation: none !important;
} }
.scan-line {
background: none !important;
}
*, *,
*::before, *::before,
*::after { *::after {
services/frontend/src/components/ChannelCultureGlossary.tsx
+18 -43
View File
@@ -9,10 +9,6 @@ import { downloadCsv } from "@/lib/csv";
import { formatRelativeTime } from "@/lib/format"; import { formatRelativeTime } from "@/lib/format";
import type { ChannelCultureRow } from "@/lib/types"; import type { ChannelCultureRow } from "@/lib/types";
/**
* Deterministic pseudo signal-strength (0..1) derived from recency + summary
* richness — purely cosmetic telemetry framing, no backend field for this.
*/
function deriveSignalStrength(c: ChannelCultureRow): number { function deriveSignalStrength(c: ChannelCultureRow): number {
let score = 0.25; let score = 0.25;
if (c.culture_summary) { if (c.culture_summary) {
@@ -39,22 +35,17 @@ export function ChannelCultureGlossary({
[cultures], [cultures],
); );
const hudRef = useStaggerReveal<HTMLDivElement>(".channel-node", { const containerRef = useStaggerReveal<HTMLDivElement>(".channel-row", {
stagger: 0.045, stagger: 0.025,
y: 14, y: 6,
dependencies: [cultures], dependencies: [cultures],
}); });
return ( return (
<GlassPanel className="lg:col-span-3"> <GlassPanel>
<SectionHeader <SectionHeader
eyebrow="knowledge · roster" eyebrow="Roster Intelligence"
title={ title="Channel Culture & Activity Roster"
<span className="flex items-center gap-2">
<Radio className="size-4 text-signal" />
Channel Culture Glossary
</span>
}
action={ action={
cultures.length > 0 ? ( cultures.length > 0 ? (
<button <button
@@ -69,7 +60,7 @@ export function ChannelCultureGlossary({
})), })),
) )
} }
className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink" className="font-mono text-[11px] text-[#8a8f98] transition-colors hover:text-[#f7f8f8]"
> >
EXPORT_CSV EXPORT_CSV
</button> </button>
@@ -77,47 +68,31 @@ export function ChannelCultureGlossary({
} }
/> />
{cultures.length === 0 ? ( {cultures.length === 0 ? (
<p className="py-6 text-center font-mono text-xs text-ink-faint"> <div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
NO CHANNEL TELEMETRY CAPTURED YET NO CHANNELS LOGGED
</p> </div>
) : ( ) : (
<div ref={hudRef} className="space-y-2"> <div ref={containerRef} className="space-y-2 mt-3">
{ranked.map(({ c, signal }) => ( {ranked.map(({ c }) => (
<div <div
key={c.channel_id} key={c.channel_id}
className="channel-node group relative overflow-hidden rounded-md border border-hairline bg-surface/40 p-3 backdrop-blur-md transition-colors hover:border-signal/40" 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-baseline justify-between gap-3"> <div className="flex items-center justify-between">
<span className="truncate font-mono text-xs font-semibold text-ink"> <span className="font-mono text-xs font-semibold text-[#f7f8f8]">
#{c.channel_name ?? c.channel_id.slice(0, 8)} #{c.channel_name ?? c.channel_id.slice(0, 8)}
</span> </span>
<div className="flex items-center gap-2 shrink-0">
<Signal className="size-3 text-ink-faint" />
{c.last_analyzed_at && ( {c.last_analyzed_at && (
<span className="font-mono text-[10px] text-ink-faint"> <span className="font-mono text-[10px] text-[#8a8f98]">
{formatRelativeTime(c.last_analyzed_at)} {formatRelativeTime(c.last_analyzed_at)}
</span> </span>
)} )}
</div> </div>
</div> {c.culture_summary && (
<p className="font-sans text-xs text-[#8a8f98] leading-relaxed line-clamp-2">
{c.culture_summary ? (
<p className="mt-1.5 line-clamp-2 text-[13px] text-ink-soft">
{c.culture_summary} {c.culture_summary}
</p> </p>
) : (
<span className="mt-1.5 block font-mono text-[11px] text-ink-faint">
(no summary captured)
</span>
)} )}
{/* Signal strength readout bar */}
<div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-canvas-2">
<div
className="h-full rounded-full bg-signal transition-[width] duration-700 ease-out"
style={{ width: `${Math.round(signal * 100)}%` }}
/>
</div>
</div> </div>
))} ))}
</div> </div>
services/frontend/src/components/chatbot/chatbot.tsx
+75 -164
View File
@@ -2,20 +2,24 @@
import { import {
Bot, Bot,
Check, MessageSquare,
Copy, Send,
MessageCircle,
RotateCw,
Trash2, Trash2,
X, X,
} from "lucide-react"; } from "lucide-react";
import { useEffect, useRef, useState } from "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 { Avatar, Button, GlassPanel, toast } from "@/components/primitives";
import { MarkdownLite } from "@/components/shared"; import { MarkdownLite } from "@/components/shared";
import { useChatbotUserId } from "@/hooks/use-chatbot-user"; import { useChatbotUserId } from "@/hooks/use-chatbot-user";
import { chatbotApi } from "@/lib/api"; import { chatbotApi } from "@/lib/api";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
if (typeof window !== "undefined") {
gsap.registerPlugin(useGSAP);
}
interface Msg { interface Msg {
id: string; id: string;
role: "user" | "bot"; role: "user" | "bot";
@@ -34,32 +38,27 @@ function formatTime(ts: number): string {
} }
} }
function TypingDots() {
return (
<div className="flex items-center gap-1 py-1">
{[0, 1, 2].map((i) => (
<span
key={i}
className="size-1.5 rounded-full bg-ink-faint animate-bounce"
style={{ animationDelay: `${i * 0.15}s`, animationDuration: "0.9s" }}
/>
))}
</div>
);
}
export function Chatbot() { export function Chatbot() {
const userId = useChatbotUserId(); const userId = useChatbotUserId();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [msgs, setMsgs] = useState<Msg[]>([]); const [msgs, setMsgs] = useState<Msg[]>([]);
const [input, setInput] = useState(""); const [input, setInput] = useState("");
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [failed, setFailed] = useState<string | null>(null); const panelRef = useRef<HTMLDivElement>(null);
const [copiedId, setCopiedId] = useState<string | null>(null);
const listRef = useRef<HTMLDivElement>(null);
const taRef = useRef<HTMLTextAreaElement>(null);
const bottomRef = useRef<HTMLDivElement>(null); const bottomRef = useRef<HTMLDivElement>(null);
useGSAP(
() => {
if (!open || !panelRef.current) return;
gsap.fromTo(
panelRef.current,
{ opacity: 0, y: 12, scale: 0.98 },
{ opacity: 1, y: 0, scale: 1, duration: 0.22, ease: "power2.out" },
);
},
{ dependencies: [open] },
);
useEffect(() => { useEffect(() => {
if (!open || !userId) return; if (!open || !userId) return;
chatbotApi chatbotApi
@@ -85,44 +84,12 @@ export function Chatbot() {
.catch(() => {}); .catch(() => {});
}, [open, userId]); }, [open, userId]);
// Auto-scroll to newest whenever the thread or typing state changes.
// biome-ignore lint/correctness/useExhaustiveDependencies: scroll must fire on thread/typing changes even though the body only reads the ref
useEffect(() => { useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" }); bottomRef.current?.scrollIntoView({ behavior: "smooth" });
}, [msgs, loading, open]); }, [msgs, loading]);
// Auto-grow the composer.
// biome-ignore lint/correctness/useExhaustiveDependencies: height recompute is keyed to input changes; body only reads the textarea element
useEffect(() => {
const ta = taRef.current;
if (!ta) return;
ta.style.height = "auto";
ta.style.height = `${Math.min(ta.scrollHeight, 140)}px`;
}, [input]);
const copy = async (id: string, text: string) => {
try {
await navigator.clipboard.writeText(text);
setCopiedId(id);
window.setTimeout(() => setCopiedId((c) => (c === id ? null : c)), 1200);
} catch {
/* clipboard unavailable */
}
};
const clearAll = async () => {
if (!userId) return;
setMsgs([]);
try {
await chatbotApi.clearHistory(userId);
} catch {
/* best-effort */
}
};
const send = async (text: string) => { const send = async (text: string) => {
if (!text.trim() || loading || !userId) return; if (!text.trim() || loading || !userId) return;
setFailed(null);
setInput(""); setInput("");
setMsgs((m) => [ setMsgs((m) => [
...m, ...m,
@@ -141,172 +108,116 @@ export function Chatbot() {
}, },
]); ]);
} catch (e) { } catch (e) {
setFailed(text);
toast({ title: "Chat error", description: String(e), tone: "vermilion" }); toast({ title: "Chat error", description: String(e), tone: "vermilion" });
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
const clearAll = async () => {
if (!userId) return;
setMsgs([]);
try {
await chatbotApi.clearHistory(userId);
} catch {
/* best-effort */
}
};
return ( return (
<> <>
<button <button
type="button" type="button"
aria-label="Open assistant" aria-label="Open assistant"
onClick={() => setOpen((o) => !o)} onClick={() => setOpen((o) => !o)}
className="fixed right-4 bottom-24 z-50 flex items-center justify-center rounded-full bg-signal text-signal-ink shadow-[0_10px_30px_-8px_var(--color-signal-glow)] transition-transform hover:scale-105 md:right-5 md:bottom-5" 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]"
style={{ width: 52, height: 52 }}
> >
{open ? <X className="size-5" /> : <MessageCircle className="size-5" />} {open ? <X className="size-4" /> : <MessageSquare className="size-4 text-[#7170ff]" />}
</button> </button>
{open && ( {open && (
<GlassPanel <div
className="fixed right-4 bottom-24 z-50 flex w-[min(94vw,360px)] flex-col p-0 md:right-5 md:bottom-20" ref={panelRef}
style={{ className="fixed right-4 bottom-18 z-50 flex h-[min(65dvh,480px)] w-[min(92vw,350px)] flex-col rounded-[10px] border border-white/[0.08] bg-[#0f1011]/95 p-0 shadow-2xl backdrop-blur-xl"
animation: "fade-up 0.16s ease",
height: "min(68dvh, 520px)",
}}
> >
<div className="flex items-center gap-2 border-b border-hairline px-4 py-3"> <div className="flex items-center justify-between border-b border-white/[0.06] px-3.5 py-2.5">
<span className="flex size-8 items-center justify-center rounded-full bg-signal/15 text-signal"> <div className="flex items-center gap-2">
<Bot className="size-4" /> <span className="flex size-6 items-center justify-center rounded-md bg-[#7170ff]/15 text-[#7170ff]">
<Bot className="size-3.5" />
</span> </span>
<div> <div>
<div className="text-sm font-semibold text-ink"> <div className="text-xs font-semibold text-[#f7f8f8]">
GMW Assistant Linear Assistant
</div>
<div className="font-mono text-[9px] text-[#62666d]">
active context
</div> </div>
<div className="mono text-[0.6rem] text-ink-faint">
context-aware
</div> </div>
</div> </div>
<button <button
type="button" type="button"
aria-label="Clear conversation"
onClick={clearAll} onClick={clearAll}
className="ml-auto rounded-[9px] p-1.5 text-ink-faint transition-colors hover:bg-white/5 hover:text-ink-soft" className="rounded-[5px] p-1 text-[#62666d] hover:bg-white/[0.05] hover:text-[#d0d6e0]"
> >
<Trash2 className="size-4" /> <Trash2 className="size-3.5" />
</button> </button>
</div> </div>
<div <div className="flex-1 space-y-2.5 overflow-y-auto px-3.5 py-3">
ref={listRef}
className="flex-1 space-y-3 overflow-y-auto px-4 py-3"
>
{msgs.length === 0 && !loading && ( {msgs.length === 0 && !loading && (
<div className="py-8 text-center text-xs text-ink-faint"> <div className="py-8 text-center text-xs text-[#62666d]">
Ask about moderation, voice, or media. Ask anything about telemetry, moderation, or media.
</div> </div>
)} )}
{msgs.map((m) => ( {msgs.map((m) => (
<div <div
key={m.id} key={m.id}
className={cn( className={cn(
"group flex gap-2", "flex flex-col text-xs",
m.role === "user" ? "justify-end" : "justify-start", m.role === "user" ? "items-end" : "items-start",
)} )}
> >
{m.role === "bot" && (
<Avatar
name="GMW"
size={26}
className="mt-0.5 bg-signal/15 text-signal"
/>
)}
<div className="flex max-w-[82%] flex-col">
<div <div
className={cn( className={cn(
"rounded-2xl px-3 py-2 text-sm", "max-w-[85%] rounded-[6px] px-2.5 py-1.5",
m.role === "user" m.role === "user"
? "rounded-br-sm bg-signal/20 text-ink" ? "bg-[#5e6ad2] text-white"
: "rounded-bl-sm bg-white/5 text-ink-soft", : "border border-white/[0.06] bg-white/[0.03] text-[#d0d6e0]",
)} )}
> >
{m.role === "bot" ? ( {m.role === "bot" ? (
<MarkdownLite content={m.content} /> <MarkdownLite content={m.content} />
) : ( ) : (
<span className="whitespace-pre-wrap break-words"> <span>{m.content}</span>
{m.content} )}
</div>
<span className="font-mono mt-0.5 text-[9px] text-[#62666d]">
{formatTime(m.ts)}
</span> </span>
)}
</div>
<div
className={cn(
"mt-0.5 flex items-center gap-1.5 text-[0.6rem] text-ink-faint",
m.role === "user" && "flex-row-reverse",
)}
>
<span className="mono">{formatTime(m.ts)}</span>
<button
type="button"
aria-label="Copy message"
onClick={() => copy(m.id, m.content)}
className="rounded p-0.5 opacity-0 transition-opacity hover:text-ink-soft group-hover:opacity-100"
>
{copiedId === m.id ? (
<Check className="size-3 text-signal" />
) : (
<Copy className="size-3" />
)}
</button>
</div>
</div>
</div> </div>
))} ))}
{loading && (
<div className="flex gap-2">
<Avatar
name="GMW"
size={26}
className="bg-signal/15 text-signal"
/>
<div className="rounded-2xl rounded-bl-sm bg-white/5 px-3 py-2">
<TypingDots />
</div>
</div>
)}
<div ref={bottomRef} /> <div ref={bottomRef} />
</div> </div>
{failed && ( <form
<div className="mx-3 mb-1 flex items-center gap-2 rounded-[10px] border border-vermilion/30 bg-vermilion/10 px-3 py-1.5 text-xs text-vermilion"> onSubmit={(e) => {
<span className="flex-1 truncate">Send failed</span>
<button
type="button"
onClick={() => send(failed)}
className="inline-flex items-center gap-1 font-medium hover:underline"
>
<RotateCw className="size-3" /> Retry
</button>
</div>
)}
<div className="flex items-end gap-2 border-t border-hairline p-3">
<textarea
ref={taRef}
rows={1}
placeholder="Message…"
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
send(input); send(input);
}
}} }}
className="max-h-[140px] min-h-[40px] flex-1 resize-none rounded-[11px] bg-white/5 border border-hairline px-3 py-2 text-sm text-ink placeholder:text-ink-faint transition-colors focus:outline-none focus:border-signal/50 focus:bg-white/8" className="flex items-center gap-1.5 border-t border-white/[0.06] p-2"
/>
<Button
variant="primary"
size="icon"
onClick={() => send(input)}
disabled={loading}
> >
<MessageCircle className="size-4" /> <input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Ask command..."
className="flex-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2.5 py-1.5 text-xs text-[#f7f8f8] placeholder:text-[#62666d] focus:border-[#7170ff] focus:outline-none"
/>
<Button type="submit" size="sm" variant="primary">
<Send className="size-3" />
</Button> </Button>
</form>
</div> </div>
</GlassPanel>
)} )}
</> </>
); );
services/frontend/src/components/primitives/badge.tsx
+35 -22
View File
@@ -1,39 +1,52 @@
import type React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
type Tone = "signal" | "amber" | "vermilion" | "neutral"; export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
tone?: "neutral" | "signal" | "amber" | "vermilion" | "success";
const tones: Record<Tone, string> = { size?: "sm" | "md";
signal: "bg-signal/12 text-signal border-signal/30", dot?: boolean;
amber: "bg-amber/12 text-amber border-amber/30", }
vermilion: "bg-vermilion/12 text-vermilion border-vermilion/30",
neutral: "bg-white/6 text-ink-soft border-white/10",
};
export function Badge({ export function Badge({
tone = "neutral", tone = "neutral",
dot, size = "md",
dot = false,
className, className,
children, children,
}: { ...props
tone?: Tone; }: BadgeProps) {
dot?: boolean; const tones = {
className?: string; neutral: "bg-white/[0.04] text-[#d0d6e0] border-white/[0.08]",
children: React.ReactNode; signal: "bg-[#7170ff]/10 text-[#7170ff] border-[#7170ff]/25",
}) { success: "bg-[#10b981]/10 text-[#10b981] border-[#10b981]/25",
amber: "bg-[#f59e0b]/10 text-[#f59e0b] border-[#f59e0b]/25",
vermilion: "bg-[#f43f5e]/10 text-[#f43f5e] border-[#f43f5e]/25",
};
const dots = {
neutral: "bg-[#8a8f98]",
signal: "bg-[#7170ff]",
success: "bg-[#10b981]",
amber: "bg-[#f59e0b]",
vermilion: "bg-[#f43f5e]",
};
const sizes = {
sm: "px-1.5 py-0.5 text-[10px]",
md: "px-2 py-0.5 text-[11px]",
};
return ( return (
<span <span
className={cn( className={cn(
"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[0.7rem] font-semibold tracking-wide", "inline-flex items-center gap-1.5 rounded-[4px] border font-mono font-medium tracking-tight",
tones[tone], tones[tone],
sizes[size],
className, className,
)} )}
{...props}
> >
{dot && ( {dot && <span className={cn("size-1.5 rounded-full", dots[tone])} />}
<span className="relative flex h-1.5 w-1.5">
<span className="absolute inline-flex h-full w-full rounded-full bg-current opacity-60 animate-pulse-ring" />
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
</span>
)}
{children} {children}
</span> </span>
); );
services/frontend/src/components/primitives/button.tsx
+37 -28
View File
@@ -1,51 +1,60 @@
import type React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Slot } from "./slot";
type Variant = "primary" | "ghost" | "outline" | "danger" | "subtle"; export const buttonVariants = ({
type Size = "sm" | "md" | "lg" | "icon"; variant = "primary",
size = "md",
className,
}: {
variant?: "primary" | "ghost" | "danger" | "secondary" | "subtle" | "outline";
size?: "sm" | "md" | "lg" | "icon";
className?: string;
}) => {
const base =
"inline-flex items-center justify-center font-sans font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7170ff] disabled:pointer-events-none disabled:opacity-40 cursor-pointer";
const variants: Record<Variant, string> = { const variants = {
primary: primary:
"bg-signal text-signal-ink hover:brightness-110 shadow-[0_8px_24px_-10px_var(--color-signal-glow)] font-semibold", "bg-[#5e6ad2] text-white hover:bg-[#7170ff] shadow-sm active:scale-[0.98]",
ghost: "text-ink-soft hover:text-ink hover:bg-white/5", ghost:
"bg-white/[0.03] text-[#d0d6e0] border border-white/[0.08] hover:bg-white/[0.06] hover:text-[#f7f8f8] hover:border-white/[0.14] active:scale-[0.98]",
outline: outline:
"border border-hairline bg-white/0 text-ink hover:bg-white/5 hover:border-signal/40", "bg-transparent text-[#d0d6e0] border border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8] active:scale-[0.98]",
secondary:
"bg-white/[0.06] text-[#f7f8f8] hover:bg-white/[0.1] border border-white/[0.08] active:scale-[0.98]",
subtle:
"bg-transparent text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#f7f8f8]",
danger: danger:
"bg-vermilion text-white hover:brightness-110 shadow-[0_8px_24px_-10px_var(--color-vermilion-glow)] font-semibold", "bg-[#f43f5e]/15 text-[#f43f5e] border border-[#f43f5e]/30 hover:bg-[#f43f5e]/25 active:scale-[0.98]",
subtle: "bg-white/5 text-ink hover:bg-white/10",
}; };
const sizes: Record<Size, string> = { const sizes = {
sm: "h-8 px-3 text-xs rounded-[9px] gap-1.5", sm: "h-7 px-2.5 text-xs rounded-[5px] gap-1.5",
md: "h-10 px-4 text-sm rounded-[11px] gap-2", md: "h-8.5 px-3.5 text-xs rounded-[6px] gap-2",
lg: "h-12 px-6 text-base rounded-[13px] gap-2", lg: "h-10 px-4 text-sm rounded-[7px] gap-2.5",
icon: "h-10 w-10 rounded-[11px]", icon: "size-8.5 rounded-[6px] p-0",
};
return cn(base, variants[variant], sizes[size], className);
}; };
export interface ButtonProps export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> { extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: Variant; variant?: "primary" | "ghost" | "danger" | "secondary" | "subtle" | "outline";
size?: Size; size?: "sm" | "md" | "lg" | "icon";
asChild?: boolean;
} }
export const Button = ({ export const Button = ({
className, className,
variant = "subtle", variant = "ghost",
size = "md", size = "md",
asChild, type = "button",
...props ...props
}: ButtonProps) => { }: ButtonProps) => {
const Comp = asChild ? Slot : "button";
return ( return (
<Comp <button
className={cn( type={type}
"inline-flex items-center justify-center whitespace-nowrap transition-all duration-150 select-none active:scale-[0.97]", className={buttonVariants({ variant, size, className })}
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-signal/60 disabled:opacity-40 disabled:pointer-events-none",
variants[variant],
sizes[size],
className,
)}
{...props} {...props}
/> />
); );
services/frontend/src/components/primitives/card.tsx
+20 -8
View File
@@ -1,19 +1,24 @@
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
/** Floating glass panel — primary container. */ export interface GlassPanelProps extends React.HTMLAttributes<HTMLDivElement> {
glow?: boolean;
}
export function GlassPanel({ export function GlassPanel({
className,
children, children,
className,
style,
glow, glow,
...props ...props
}: React.HTMLAttributes<HTMLDivElement> & { glow?: boolean }) { }: GlassPanelProps) {
return ( return (
<div <div
className={cn( className={cn(
"glass p-5", "relative rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 p-5 shadow-xl backdrop-blur-md transition-all duration-200",
glow && "shadow-[0_0_40px_-18px_var(--color-signal-glow)]", glow && "shadow-[0_0_24px_rgba(113,112,255,0.12)] border-[#7170ff]/30",
className, className,
)} )}
style={style}
{...props} {...props}
> >
{children} {children}
@@ -21,14 +26,21 @@ export function GlassPanel({
); );
} }
/** Smaller glass sub-panel. */
export function GlassCard({ export function GlassCard({
className,
children, children,
className,
style,
...props ...props
}: React.HTMLAttributes<HTMLDivElement>) { }: React.HTMLAttributes<HTMLDivElement>) {
return ( return (
<div className={cn("glass-2 p-4", className)} {...props}> <div
className={cn(
"relative rounded-[8px] border border-white/[0.06] bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.12] hover:bg-white/[0.04]",
className,
)}
style={style}
{...props}
>
{children} {children}
</div> </div>
); );
services/frontend/src/components/shared/section.tsx
+24 -18
View File
@@ -14,13 +14,19 @@ export function SectionHeader({
return ( return (
<div <div
className={cn( className={cn(
"mb-3 flex flex-wrap items-start justify-between gap-2 sm:gap-3", "mb-3.5 flex flex-wrap items-center justify-between gap-3",
className, className,
)} )}
> >
<div className="min-w-0"> <div className="min-w-0">
{eyebrow && <div className="eyebrow mb-1">{eyebrow}</div>} {eyebrow && (
<h2 className="display text-balance text-xl text-ink">{title}</h2> <div className="font-mono text-[10px] font-medium tracking-wider uppercase text-[#8a8f98] mb-0.5">
{eyebrow}
</div>
)}
<h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-[#f7f8f8]">
{title}
</h2>
</div> </div>
{action && ( {action && (
<div className="flex flex-wrap items-center gap-2">{action}</div> <div className="flex flex-wrap items-center gap-2">{action}</div>
@@ -50,45 +56,45 @@ export function MetricTile({
}) { }) {
const toneColor = const toneColor =
tone === "vermilion" tone === "vermilion"
? "var(--color-vermilion)" ? "#f43f5e"
: tone === "amber" : tone === "amber"
? "var(--color-amber)" ? "#f59e0b"
: tone === "signal" : tone === "signal"
? "var(--color-signal)" ? "#7170ff"
: "var(--color-ink)"; : "#f7f8f8";
return ( return (
<div <div
className={cn( className={cn(
"glass p-4 ring-focus transition-transform duration-200 hover:-translate-y-0.5", "relative rounded-[8px] border border-white/[0.07] bg-white/[0.025] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04]",
className, className,
)} )}
style={style} style={style}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="eyebrow">{label}</div> <div className="font-mono text-[10px] font-medium uppercase tracking-wider text-[#8a8f98]">
{icon && <span className="text-ink-faint">{icon}</span>} {label}
</div>
{icon && <span className="text-[#8a8f98]">{icon}</span>}
</div> </div>
<div <div
className="display mt-1 text-[1.9rem] leading-none" className="font-sans mt-1.5 text-[1.65rem] font-semibold leading-none tracking-tight"
style={{ color: tone === "neutral" ? undefined : toneColor }} style={{ color: tone === "neutral" ? undefined : toneColor }}
> >
{value} {value}
</div> </div>
{hint && ( {hint && (
<div className="mono mt-1 text-[0.68rem] text-ink-faint">{hint}</div> <div className="font-mono mt-1 text-[10px] text-[#62666d]">{hint}</div>
)} )}
{spark && spark.length > 1 && ( {spark && spark.length > 1 && (
<div className="mt-2"> <div className="mt-2.5">
<div <div className="h-[3px] w-full overflow-hidden rounded-full bg-white/[0.06]">
className="h-1 w-full overflow-hidden rounded-full"
style={{ background: "oklch(1 0 0 / 0.08)" }}
>
<div <div
className="h-full rounded-full" className="h-full rounded-full"
style={{ style={{
width: `${Math.min(100, (spark[spark.length - 1] / (Math.max(...spark) || 1)) * 100)}%`, width: `${Math.min(100, (spark[spark.length - 1] / (Math.max(...spark) || 1)) * 100)}%`,
background: toneColor, background: toneColor,
opacity: 0.7, opacity: 0.8,
}} }}
/> />
</div> </div>
services/frontend/src/components/shell/nav-rail.tsx
+16 -19
View File
@@ -29,25 +29,23 @@ function NavItem({
href={href} href={href}
aria-label={label} aria-label={label}
aria-current={active ? "page" : undefined} aria-current={active ? "page" : undefined}
style={{ "--i": index } as React.CSSProperties}
className={cn( className={cn(
"nav-dock-item game-nav-item group relative flex size-11 items-center justify-center rounded-[13px] transition-all duration-200", "nav-dock-item group relative flex size-9 items-center justify-center rounded-[7px] transition-all duration-150",
active active
? "is-active bg-white/10 text-white shadow-sm ring-1 ring-white/20" ? "is-active bg-white/[0.08] text-[#f7f8f8] shadow-sm border border-white/[0.12]"
: "text-ink-faint hover:bg-white/5 hover:text-ink-soft hover:scale-105", : "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]",
)} )}
> >
{active && <span className="game-marker -left-3.5" />}
<span className="game-sweep" aria-hidden="true">
<i />
</span>
<Icon <Icon
className="relative z-10 size-[18px]" className="relative z-10 size-4"
strokeWidth={active ? 2.4 : 2} strokeWidth={active ? 2.2 : 1.8}
/> />
{/* HUD Tooltip on hover */} {/* Precision Micro-Indicator */}
<span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-md border border-hairline bg-canvas-2/95 px-2.5 py-1 font-mono text-[11px] font-semibold tracking-wider text-ink opacity-0 shadow-xl backdrop-blur-md transition-all group-hover:translate-x-1 group-hover:opacity-100 md:block"> {active && (
<span className="text-signal mr-1.5">›</span> <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-[#7170ff]" />
)}
{/* Tooltip on hover */}
<span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-white/[0.08] bg-[#0f1011] px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-[#f7f8f8] opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
{label} {label}
</span> </span>
</a> </a>
@@ -65,13 +63,12 @@ export function NavRail() {
const items = railRef.current.querySelectorAll(".nav-dock-item"); const items = railRef.current.querySelectorAll(".nav-dock-item");
gsap.fromTo( gsap.fromTo(
items, items,
{ opacity: 0, x: -8, scale: 0.9 }, { opacity: 0, x: -6 },
{ {
opacity: 1, opacity: 1,
x: 0, x: 0,
scale: 1, duration: 0.3,
duration: 0.4, stagger: 0.025,
stagger: 0.04,
ease: "power2.out", ease: "power2.out",
clearProps: "transform", clearProps: "transform",
}, },
@@ -83,9 +80,9 @@ export function NavRail() {
return ( return (
<nav <nav
ref={railRef} ref={railRef}
className="glass 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-[68px] flex-col items-center gap-1 rounded-[18px] border border-hairline/80 py-4 shadow-2xl backdrop-blur-xl md:flex" 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.5"> <div className="flex flex-1 flex-col gap-1">
{navItems.map((item, i) => ( {navItems.map((item, i) => (
<NavItem <NavItem
key={item.href} key={item.href}
services/frontend/src/hooks/use-gsap-animation.ts
+43 -7
View File
@@ -6,10 +6,16 @@ import { type RefObject, useRef } from "react";
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
gsap.registerPlugin(useGSAP); gsap.registerPlugin(useGSAP);
// Set default Linear-style crisp easing & duration
gsap.defaults({
ease: "power2.out",
duration: 0.35,
});
} }
/** /**
* Reusable hook for staggered reveal animations on child elements. * Reusable hook for staggered reveal animations on child elements.
* Linear-style: crisp entry, very subtle vertical displacement, no layout shift.
*/ */
export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>( export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
selector: string, selector: string,
@@ -41,16 +47,14 @@ export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
elements, elements,
{ {
opacity: 0, opacity: 0,
y: options?.y ?? 12, y: options?.y ?? 8,
scale: 0.98,
}, },
{ {
opacity: 1, opacity: 1,
y: 0, y: 0,
scale: 1, duration: options?.duration ?? 0.32,
duration: options?.duration ?? 0.35, delay: options?.delay ?? 0.02,
delay: options?.delay ?? 0.05, stagger: options?.stagger ?? 0.03,
stagger: options?.stagger ?? 0.04,
ease: "power2.out", ease: "power2.out",
clearProps: "transform", clearProps: "transform",
}, },
@@ -80,7 +84,7 @@ export function useCounter(
const obj = { val: 0 }; const obj = { val: 0 };
gsap.to(obj, { gsap.to(obj, {
val: targetValue, val: targetValue,
duration: 0.8, duration: 0.75,
ease: "power2.out", ease: "power2.out",
onUpdate: () => { onUpdate: () => {
if (ref.current) { if (ref.current) {
@@ -94,3 +98,35 @@ export function useCounter(
{ dependencies: [targetValue] }, { dependencies: [targetValue] },
); );
} }
/**
* Micro-interaction hook for interactive elements (hover card tilt/glow, pulse)
*/
export function useLinearHover<T extends HTMLElement = HTMLDivElement>() {
const elementRef = useRef<T>(null);
useGSAP(
(_, contextSafe) => {
if (!elementRef.current || !contextSafe) return;
const el = elementRef.current;
const onEnter = contextSafe(() => {
gsap.to(el, { y: -2, duration: 0.18, ease: "power2.out" });
});
const onLeave = contextSafe(() => {
gsap.to(el, { y: 0, duration: 0.22, ease: "power2.out" });
});
el.addEventListener("mouseenter", onEnter);
el.addEventListener("mouseleave", onLeave);
return () => {
el.removeEventListener("mouseenter", onEnter);
el.removeEventListener("mouseleave", onLeave);
};
},
{ scope: elementRef },
);
return elementRef;
}