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

refactor: update UI components for consistency and improved styling

Browse Source 
- Refactored ChannelCultureGlossary, LiveModerationFeed, TermGlossary, and Chatbot components to use new design tokens and styles.
- Updated button, badge, and section components to align with the new design system.
- Enhanced the visual hierarchy and accessibility of various UI elements.
- Improved responsiveness and hover states across components.
- Replaced hardcoded colors with design tokens for better maintainability.
This commit is contained in:
asepharyana
2026-08-26 14:57:08 +07:00
parent 7fc36170c8
commit a5f908dc06
18 changed files with 565 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/app/(dashboard)/analysis/view.tsx
+16 -18
View File
@@ -116,16 +116,16 @@ export function AnalysisView() {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3"> <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" /> <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase"> <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Deep Scan · Semantic Search & Telemetry Analysis Deep Scan · Semantic Search & Telemetry Analysis
</h1> </h1>
</div> </div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]"> <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>ENGINE:</span> <span>ENGINE:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]"> <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
{query.trim().length >= 2 ? "SCANNING" : "STANDBY"} {query.trim().length >= 2 ? "SCANNING" : "STANDBY"}
</span> </span>
</div> </div>
@@ -134,14 +134,14 @@ export function AnalysisView() {
{/* Hero Query Stage */} {/* Hero Query Stage */}
<GlassPanel className="p-5"> <GlassPanel className="p-5">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="flex size-8 items-center justify-center rounded-[6px] border border-white/[0.08] bg-[#7170ff]/10 text-[#7170ff]"> <span className="flex size-8 items-center justify-center rounded-[6px] border border-signal/30 bg-signal/10 text-signal">
<Sparkles className="size-4" /> <Sparkles className="size-4" />
</span> </span>
<div> <div>
<h2 className="text-base font-semibold text-ink"> <h2 className="text-base font-semibold text-ink">
Cross-Guild Archive Intelligence Cross-Guild Archive Intelligence
</h2> </h2>
<p className="font-mono text-[11px] text-[#8a8f98]"> <p className="font-mono text-[11px] text-ink-muted">
Query vectorized messages, heuristic flags, and user behavior Query vectorized messages, heuristic flags, and user behavior
</p> </p>
</div> </div>
@@ -184,7 +184,7 @@ export function AnalysisView() {
{(search.data ?? []).map((m) => ( {(search.data ?? []).map((m) => (
<div <div
key={m.id} key={m.id}
className="search-result-card flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]" className="search-result-card hud-card flex items-start gap-3 p-3 transition-all"
> >
<Avatar src={m.avatar_url} name={m.username} size={32} /> <Avatar src={m.avatar_url} name={m.username} size={32} />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
@@ -224,8 +224,7 @@ export function AnalysisView() {
eyebrow="engagement" eyebrow="engagement"
title={ title={
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5">
<TrendingUp className="size-3.5 text-[#7170ff]" /> Top <TrendingUp className="size-3.5 text-signal" /> Top Reactors
Reactors
</span> </span>
} }
/> />
@@ -247,14 +246,14 @@ export function AnalysisView() {
<span className="w-24 shrink-0 truncate font-mono text-xs text-ink sm:w-32"> <span className="w-24 shrink-0 truncate font-mono text-xs text-ink sm:w-32">
{r.username} {r.username}
</span> </span>
<div className="h-1 flex-1 overflow-hidden rounded-full bg-white/[0.06]"> <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-surface-2">
<div <div
className="reactor-bar-fill h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff]" className="reactor-bar-fill h-full rounded-full bg-signal"
style={{ width: `${pct}%` }} style={{ width: `${pct}%` }}
/> />
</div> </div>
<span <span
className="reactor-count font-mono w-10 text-right text-[11px] font-semibold text-[#7170ff]" className="reactor-count font-mono w-10 text-right text-[11px] font-semibold text-signal"
data-target={r.net_count} data-target={r.net_count}
> >
+0 +0
@@ -275,8 +274,7 @@ export function AnalysisView() {
eyebrow="volume" eyebrow="volume"
title={ title={
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5">
<Hash className="size-3.5 text-[#7170ff]" /> Top Active <Hash className="size-3.5 text-signal" /> Top Active Channels
Channels
</span> </span>
} }
/> />
@@ -284,13 +282,13 @@ export function AnalysisView() {
{(channels ?? []).slice(0, 6).map((c) => ( {(channels ?? []).slice(0, 6).map((c) => (
<div <div
key={c.channel_id} key={c.channel_id}
className="channel-row flex items-center justify-between rounded-[6px] border border-white/[0.04] bg-white/[0.01] p-2 text-xs hover:bg-white/[0.03]" className="channel-row hud-card flex items-center justify-between p-2 text-xs"
> >
<span className="flex items-center gap-1.5 truncate font-mono text-xs text-ink"> <span className="flex items-center gap-1.5 truncate font-mono text-xs text-ink">
<Hash className="size-3 text-[#7170ff]" /> <Hash className="size-3 text-signal" />
{c.channel_name ?? c.channel_id.slice(0, 10)} {c.channel_name ?? c.channel_id.slice(0, 10)}
</span> </span>
<span className="font-mono text-[10px] text-[#8a8f98]"> <span className="font-mono text-[10px] text-ink-muted">
{c.total_messages.toLocaleString()} msgs {c.total_messages.toLocaleString()} msgs
</span> </span>
</div> </div>
services/frontend/src/app/(dashboard)/dashboard/view.tsx
+20 -24
View File
@@ -102,17 +102,17 @@ export function DashboardView({
return ( return (
<PageTransition> <PageTransition>
<div ref={hudRef} className="space-y-4"> <div ref={hudRef} className="space-y-4">
{/* Precision Sub-Header Bar */} {/* Tactical HUD Header Bar */}
<div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3"> <div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" /> <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase"> <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Telemetry Overview · Node 01 Telemetry Overview · Node 01
</h1> </h1>
</div> </div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]"> <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>SIGNAL:</span> <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]"> <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
STABLE_STREAM STABLE_STREAM
</span> </span>
</div> </div>
@@ -174,20 +174,16 @@ export function DashboardView({
/> />
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center"> <div className="grid grid-cols-2 gap-2 border-t border-hairline pt-3 text-center">
<div> <div>
<div className="font-mono text-[10px] text-[#8a8f98]"> <div className="eyebrow">CLEAN</div>
CLEAN <div className="font-sans text-sm font-semibold text-success">
</div>
<div className="font-sans text-sm font-semibold text-[#10b981]">
{formatNumber(s.total_clean)} {formatNumber(s.total_clean)}
</div> </div>
</div> </div>
<div> <div>
<div className="font-mono text-[10px] text-[#8a8f98]"> <div className="eyebrow">FLAGGED</div>
FLAGGED <div className="font-sans text-sm font-semibold text-vermilion">
</div>
<div className="font-sans text-sm font-semibold text-[#f43f5e]">
{formatNumber(s.total_flagged)} {formatNumber(s.total_flagged)}
</div> </div>
</div> </div>
@@ -207,12 +203,12 @@ export function DashboardView({
{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-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 hover:bg-white/[0.04]" className="hud-card flex items-center justify-between p-2.5"
> >
<span className="truncate pr-2 text-xs text-[#d0d6e0]"> <span className="truncate pr-2 text-xs text-ink-soft">
{r.content || "[Media/Attachment]"} {r.content || "[Media/Attachment]"}
</span> </span>
<span className="font-mono text-xs font-semibold text-[#7170ff] shrink-0"> <span className="font-mono text-xs font-semibold text-signal shrink-0">
{formatNumber(r.reaction_count)} reactions {formatNumber(r.reaction_count)} reactions
</span> </span>
</div> </div>
@@ -227,23 +223,23 @@ export function DashboardView({
<div className="mt-2 space-y-1.5"> <div className="mt-2 space-y-1.5">
<Link <Link
href="/moderation" 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]" className="hud-card flex items-center justify-between p-2.5 text-xs text-ink-soft transition-colors hover:text-ink"
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<Shield className="size-3.5 text-[#7170ff]" /> <Shield className="size-3.5 text-signal" />
Review Live Moderation Queue Review Live Moderation Queue
</span> </span>
<ChevronRight className="size-3.5 text-[#8a8f98]" /> <ChevronRight className="size-3.5 text-ink-muted" />
</Link> </Link>
<Link <Link
href="/voice" 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]" className="hud-card flex items-center justify-between p-2.5 text-xs text-ink-soft transition-colors hover:text-ink"
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<AudioWaveform className="size-3.5 text-[#10b981]" /> <AudioWaveform className="size-3.5 text-success" />
Inspect Active Voice Stages Inspect Active Voice Stages
</span> </span>
<ChevronRight className="size-3.5 text-[#8a8f98]" /> <ChevronRight className="size-3.5 text-ink-muted" />
</Link> </Link>
</div> </div>
</div> </div>
services/frontend/src/app/(dashboard)/media/view.tsx
+16 -18
View File
@@ -98,26 +98,26 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
<PageTransition> <PageTransition>
<div ref={mediaRef} className="space-y-4"> <div ref={mediaRef} className="space-y-4">
{/* Precision Sub-Header Bar */} {/* Precision Sub-Header Bar */}
<div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3"> <div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span <span
className={`h-2 w-2 rounded-full ${ className={`h-2 w-2 rounded-full ${
playing playing
? "bg-[#7170ff] shadow-[0_0_8px_#7170ff]" ? "bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
: "bg-[#8a8f98]" : "bg-ink-muted"
}`} }`}
/> />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase"> <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Audio Engine · Media Gateway Audio Engine · Media Gateway
</h1> </h1>
</div> </div>
<div className="flex items-center gap-2 font-mono text-[11px]"> <div className="flex items-center gap-2 font-mono text-[11px]">
<span className="text-[#8a8f98]">ENGINE:</span> <span className="text-ink-muted">ENGINE:</span>
<span <span
className={`rounded px-1.5 py-0.5 font-medium border ${ className={`rounded px-1.5 py-0.5 font-medium border ${
playing playing
? "border-[#7170ff]/30 bg-[#7170ff]/10 text-[#7170ff]" ? "border-signal/30 bg-signal/10 text-signal"
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]" : "border-hairline bg-surface-2 text-ink-muted"
}`} }`}
> >
{playing ? "STREAMING" : "IDLE"} {playing ? "STREAMING" : "IDLE"}
@@ -130,16 +130,16 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
<GlassPanel className="p-5"> <GlassPanel className="p-5">
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between"> <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex items-center gap-3.5"> <div className="flex items-center gap-3.5">
<div className="flex size-11 items-center justify-center rounded-[8px] border border-white/[0.08] bg-white/[0.03] text-[#7170ff]"> <div className="flex size-11 items-center justify-center rounded-[8px] border border-hairline bg-surface-2 text-signal">
<Disc <Disc
className={`size-6 ${playing ? "animate-spin-disc text-[#7170ff]" : "text-[#8a8f98]"}`} className={`size-6 ${playing ? "animate-spin-disc text-signal" : "text-ink-muted"}`}
/> />
</div> </div>
<div> <div>
<div className="text-sm font-semibold tracking-tight text-[#f7f8f8]"> <div className="text-sm font-semibold tracking-tight text-ink">
{current?.title ?? "No Active Media Stream"} {current?.title ?? "No Active Media Stream"}
</div> </div>
<div className="font-mono text-[11px] text-[#8a8f98]"> <div className="font-mono text-[11px] text-ink-muted">
{current {current
? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream` ? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream`
: "Queue a track via URL below"} : "Queue a track via URL below"}
@@ -153,9 +153,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => loop.mutateAsync()} onClick={() => loop.mutateAsync()}
className={ className={media?.loop ? "border-signal text-signal" : ""}
media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""
}
> >
<Repeat className="size-3.5" /> <Repeat className="size-3.5" />
</Button> </Button>
@@ -177,7 +175,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
</div> </div>
{/* Quick URL Input */} {/* Quick URL Input */}
<div className="mt-4 flex gap-2 border-t border-white/[0.06] pt-4"> <div className="mt-4 flex gap-2 border-t border-hairline pt-4">
<Input <Input
placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..." placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..."
value={url} value={url}
@@ -211,19 +209,19 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
/> />
<div className="mt-3 space-y-2"> <div className="mt-3 space-y-2">
{queueList.length === 0 ? ( {queueList.length === 0 ? (
<div className="py-8 text-center font-mono text-xs text-[#8a8f98]"> <div className="py-8 text-center font-mono text-xs text-ink-muted">
QUEUE EMPTY QUEUE EMPTY
</div> </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-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0]" className="flex items-center justify-between rounded-[6px] border border-hairline bg-surface-2 p-2.5 text-xs text-ink-soft"
> >
<span className="truncate pr-2 font-medium"> <span className="truncate pr-2 font-medium">
{item.title} {item.title}
</span> </span>
<span className="font-mono text-[10px] text-[#8a8f98] shrink-0"> <span className="font-mono text-[10px] text-ink-muted shrink-0">
{formatDuration(item.durationMs ?? 0)} {formatDuration(item.durationMs ?? 0)}
</span> </span>
</div> </div>
services/frontend/src/app/(dashboard)/messages/view.tsx
+38 -38
View File
@@ -227,16 +227,16 @@ export function MessagesView({
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3"> <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" /> <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase"> <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Chat Log Stream · Ingestion Stream Chat Log Stream · Ingestion Stream
</h1> </h1>
</div> </div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]"> <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>MODE:</span> <span>MODE:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]"> <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
{searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()} {searching ? "SEARCH_ACTIVE" : viewMode.toUpperCase()}
</span> </span>
</div> </div>
@@ -266,14 +266,14 @@ export function MessagesView({
onChange={(e) => setQuery(e.target.value)} onChange={(e) => setQuery(e.target.value)}
/> />
</div> </div>
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5"> <div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
<button <button
type="button" type="button"
onClick={() => setSemanticMode(false)} onClick={() => setSemanticMode(false)}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${ className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
!semanticMode !semanticMode
? "bg-white/[0.08] text-white border border-white/[0.12]" ? "bg-surface text-ink border border-hairline-focus shadow-xs"
: "text-[#8a8f98] hover:text-[#d0d6e0]" : "text-ink-muted hover:text-ink"
}`} }`}
> >
EXACT EXACT
@@ -283,8 +283,8 @@ export function MessagesView({
onClick={() => setSemanticMode(true)} onClick={() => setSemanticMode(true)}
className={`flex items-center gap-1 rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${ className={`flex items-center gap-1 rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
semanticMode semanticMode
? "bg-[#7170ff]/20 text-[#7170ff] border border-[#7170ff]/30" ? "bg-signal/20 text-signal border border-signal/40 shadow-xs"
: "text-[#8a8f98] hover:text-[#d0d6e0]" : "text-ink-muted hover:text-ink"
}`} }`}
> >
<Sparkles className="size-3" /> <Sparkles className="size-3" />
@@ -292,14 +292,14 @@ export function MessagesView({
</button> </button>
</div> </div>
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] p-0.5"> <div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
<button <button
type="button" type="button"
onClick={() => setViewMode("feed")} onClick={() => setViewMode("feed")}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${ className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
viewMode === "feed" viewMode === "feed"
? "bg-white/[0.08] text-white border border-white/[0.12]" ? "bg-surface text-ink border border-hairline-focus shadow-xs"
: "text-[#8a8f98] hover:text-[#d0d6e0]" : "text-ink-muted hover:text-ink"
}`} }`}
> >
FEED FEED
@@ -309,8 +309,8 @@ export function MessagesView({
onClick={() => setViewMode("timeline")} onClick={() => setViewMode("timeline")}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${ className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
viewMode === "timeline" viewMode === "timeline"
? "bg-white/[0.08] text-white border border-white/[0.12]" ? "bg-surface text-ink border border-hairline-focus shadow-xs"
: "text-[#8a8f98] hover:text-[#d0d6e0]" : "text-ink-muted hover:text-ink"
}`} }`}
> >
TIMELINE TIMELINE
@@ -337,18 +337,18 @@ export function MessagesView({
{semantic.data.map((r, i) => ( {semantic.data.map((r, i) => (
<div <div
key={r.message_id ?? i} key={r.message_id ?? i}
className="flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 hover:border-white/[0.12] hover:bg-white/[0.04]" className="hud-card flex items-start gap-3 p-3"
> >
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-mono text-[10px] font-semibold text-[#7170ff]"> <span className="font-mono text-[10px] font-semibold text-signal">
{(r.score * 100).toFixed(0)}% RELEVANCE {(r.score * 100).toFixed(0)}% RELEVANCE
</span> </span>
<span className="ml-auto font-mono text-[10px] text-[#8a8f98]"> <span className="ml-auto font-mono text-[10px] text-ink-muted">
{formatRelativeTime(r.created_at)} {formatRelativeTime(r.created_at)}
</span> </span>
</div> </div>
<div className="mt-1 text-xs text-[#d0d6e0] leading-relaxed"> <div className="mt-1 text-xs text-ink-soft leading-relaxed">
{r.content} {r.content}
</div> </div>
</div> </div>
@@ -391,20 +391,20 @@ export function MessagesView({
{!searching && ( {!searching && (
<div className="mb-2 flex items-center justify-center gap-2"> <div className="mb-2 flex items-center justify-center gap-2">
{loadMore.isPending ? ( {loadMore.isPending ? (
<span className="flex items-center gap-1.5 font-mono text-xs text-[#8a8f98]"> <span className="flex items-center gap-1.5 font-mono text-xs text-ink-muted">
<Loader2 className="size-3.5 animate-spin" /> <Loader2 className="size-3.5 animate-spin text-signal" />
FETCHING EARLIER PACKETS... FETCHING EARLIER PACKETS...
</span> </span>
) : hasMore && loadedPages < MAX_OLDER_PAGES ? ( ) : hasMore && loadedPages < MAX_OLDER_PAGES ? (
<button <button
type="button" type="button"
onClick={loadOlder} onClick={loadOlder}
className="rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-3 py-1 font-mono text-[10px] text-[#8a8f98] transition-colors hover:bg-white/[0.05] hover:text-[#f7f8f8]" className="rounded-[5px] border border-hairline bg-surface-2 px-3 py-1 font-mono text-[10px] text-ink-muted transition-colors hover:bg-surface hover:text-ink"
> >
↑ LOAD PREVIOUS BATCH ↑ LOAD PREVIOUS BATCH
</button> </button>
) : ( ) : (
<span className="font-mono text-[10px] text-[#62666d]"> <span className="font-mono text-[10px] text-ink-faint">
{loadedPages >= MAX_OLDER_PAGES {loadedPages >= MAX_OLDER_PAGES
? `CAPPED AT ${MAX_OLDER_PAGES} PAGES` ? `CAPPED AT ${MAX_OLDER_PAGES} PAGES`
: "STREAM ROOT REACHED"} : "STREAM ROOT REACHED"}
@@ -432,9 +432,9 @@ export function MessagesView({
node.type === "date" ? ( node.type === "date" ? (
<div <div
key={`date-${node.iso}`} key={`date-${node.iso}`}
className="flex items-center gap-2 py-1 font-mono text-[10px] text-[#8a8f98]" className="flex items-center gap-2 py-1 font-mono text-[10px] text-ink-muted"
> >
<Calendar className="size-3 text-[#7170ff]" /> <Calendar className="size-3 text-signal" />
{node.label} {node.label}
</div> </div>
) : ( ) : (
@@ -554,7 +554,7 @@ function MessageDetail({
</div> </div>
</div> </div>
<div className="rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-[#d0d6e0] leading-relaxed"> <div className="hud-card p-3 text-xs text-ink-soft leading-relaxed">
{renderMessageContent(m.edited_content ?? m.content, m.metadata) || {renderMessageContent(m.edited_content ?? m.content, m.metadata) ||
"(no text content)"} "(no text content)"}
</div> </div>
@@ -562,7 +562,7 @@ function MessageDetail({
{m.ai_analysis && ( {m.ai_analysis && (
<div> <div>
<div className="eyebrow mb-1">AI heuristic reasoning</div> <div className="eyebrow mb-1">AI heuristic reasoning</div>
<div className="rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 text-xs text-[#8a8f98] leading-relaxed"> <div className="hud-card p-3 text-xs text-ink-muted leading-relaxed">
{m.ai_analysis} {m.ai_analysis}
</div> </div>
</div> </div>
@@ -595,11 +595,11 @@ function MessageDetail({
href={a.discord_url ?? a.uploaded_url ?? "#"} href={a.discord_url ?? a.uploaded_url ?? "#"}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="flex items-center gap-2 rounded-[6px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 text-xs text-[#d0d6e0] hover:border-white/[0.12] hover:text-[#f7f8f8]" className="hud-card flex items-center gap-2 px-3 py-2 text-xs text-ink-soft hover:text-ink"
> >
<ImageIcon className="size-3.5 text-[#7170ff]" /> <ImageIcon className="size-3.5 text-signal" />
<span className="flex-1 truncate">{a.filename}</span> <span className="flex-1 truncate">{a.filename}</span>
<span className="mono text-[10px] text-[#8a8f98]"> <span className="mono text-[10px] text-ink-muted">
{formatBytes(a.size)} {formatBytes(a.size)}
</span> </span>
</a> </a>
@@ -626,28 +626,28 @@ function MessageRow({
key={m.id} key={m.id}
type="button" type="button"
onClick={() => onSelect(m.id)} onClick={() => onSelect(m.id)}
className={`msg-feed-card flex w-full items-start gap-3 rounded-[6px] border p-2.5 text-left transition-all ${ className={`msg-feed-card flex w-full items-start gap-3 rounded-[8px] border p-2.5 text-left transition-all ${
selected === m.id selected === m.id
? "border-[#7170ff]/40 bg-[#7170ff]/10" ? "border-signal/50 bg-signal/10 shadow-xs"
: "border-white/[0.06] bg-white/[0.02] hover:border-white/[0.12] hover:bg-white/[0.04]" : "border-hairline bg-surface-2 hover:border-hairline-focus hover:bg-surface"
}`} }`}
> >
<Avatar src={m.avatar_url} name={m.username} size={32} /> <Avatar src={m.avatar_url} name={m.username} size={32} />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="truncate text-xs font-semibold text-[#f7f8f8]"> <span className="truncate text-xs font-semibold text-ink">
{m.username} {m.username}
</span> </span>
<span className="font-mono text-[10px] text-[#8a8f98]"> <span className="font-mono text-[10px] text-ink-muted">
{getMessageChannelLabel(m)} {getMessageChannelLabel(m)}
</span> </span>
<span className="ml-auto font-mono text-[10px] text-[#8a8f98]"> <span className="ml-auto font-mono text-[10px] text-ink-muted">
{formatRelativeTime(m.created_at)} {formatRelativeTime(m.created_at)}
</span> </span>
</div> </div>
<div className="mt-0.5 line-clamp-2 text-xs text-[#d0d6e0]"> <div className="mt-0.5 line-clamp-2 text-xs text-ink-soft">
{renderMessageContent(m.content, m.metadata) || ( {renderMessageContent(m.content, m.metadata) || (
<span className="italic text-[#8a8f98]">(empty / embed)</span> <span className="italic text-ink-muted">(empty / embed)</span>
)} )}
</div> </div>
</div> </div>
services/frontend/src/app/(dashboard)/moderation/view.tsx
+8 -8
View File
@@ -91,21 +91,21 @@ export function ModerationView({
return ( return (
<PageTransition> <PageTransition>
<div ref={containerRef} className="space-y-4"> <div ref={containerRef} className="space-y-4">
{/* Precision Sub-Header Bar */} {/* Tactical HUD 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="mod-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span <span
className={`h-2 w-2 rounded-full ${ className={`h-2 w-2 rounded-full ${
failedRatio > 0.1 failedRatio > 0.1
? "bg-[#f43f5e] shadow-[0_0_8px_#f43f5e]" ? "bg-vermilion shadow-[0_0_8px_var(--color-vermilion-glow)]"
: "bg-[#7170ff] shadow-[0_0_8px_#7170ff]" : "bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
}`} }`}
/> />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase"> <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Moderation Intelligence Console Moderation Intelligence Console
</h1> </h1>
</div> </div>
<div className="flex items-center gap-1.5 rounded-[5px] border border-white/[0.06] bg-white/[0.02] p-0.5"> <div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 p-0.5">
{(["all", "flagged", "clean"] as const).map((mode) => ( {(["all", "flagged", "clean"] as const).map((mode) => (
<button <button
key={mode} key={mode}
@@ -113,8 +113,8 @@ export function ModerationView({
onClick={() => setFilterMode(mode)} onClick={() => setFilterMode(mode)}
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${ className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
filterMode === mode filterMode === mode
? "bg-white/[0.08] text-white border border-white/[0.12]" ? "bg-surface text-ink border border-hairline-focus shadow-xs"
: "text-[#8a8f98] hover:text-[#d0d6e0]" : "text-ink-muted hover:text-ink"
}`} }`}
> >
{mode.toUpperCase()} {mode.toUpperCase()}
services/frontend/src/app/(dashboard)/recordings/view.tsx
+16 -16
View File
@@ -92,16 +92,16 @@ export function RecordingsView({
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3"> <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" /> <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase"> <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Tape Deck · Captured Audio Archive Tape Deck · Captured Audio Archive
</h1> </h1>
</div> </div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]"> <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>STATUS:</span> <span>STATUS:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]"> <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
{totalRecordings} CLIPS_ONLINE {totalRecordings} CLIPS_ONLINE
</span> </span>
</div> </div>
@@ -134,22 +134,22 @@ export function RecordingsView({
return ( return (
<div <div
key={r.id} key={r.id}
className={`recording-deck-card flex flex-col justify-between rounded-[8px] border bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04] ${ className={`recording-deck-card hud-card flex flex-col justify-between p-4 transition-all duration-200 ${
isPlaying isPlaying
? "border-[#7170ff]/50 bg-[#7170ff]/5 shadow-[0_0_24px_-10px_rgba(113,112,255,0.3)]" ? "border-signal/50 bg-signal/10 shadow-[0_0_24px_-10px_var(--color-signal-glow)]"
: "border-white/[0.06]" : ""
}`} }`}
> >
<div> <div>
{/* Header info */} {/* Header info */}
<div className="flex items-center gap-3 border-b border-white/[0.05] pb-3"> <div className="flex items-center gap-3 border-b border-hairline pb-3">
<Avatar src={r.avatar_url} name={r.username} size={36} /> <Avatar src={r.avatar_url} name={r.username} size={36} />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<div className="truncate text-xs font-semibold text-ink"> <div className="truncate text-xs font-semibold text-ink">
{r.username} {r.username}
</div> </div>
<div className="flex items-center gap-1.5 font-mono text-[10px] text-ink-faint"> <div className="flex items-center gap-1.5 font-mono text-[10px] text-ink-faint">
<Hash className="size-2.5 text-[#7170ff]" /> <Hash className="size-2.5 text-signal" />
<span className="truncate"> <span className="truncate">
{r.channel_name ?? "voice"} {r.channel_name ?? "voice"}
</span> </span>
@@ -179,8 +179,8 @@ export function RecordingsView({
} }
/> />
) : ( ) : (
<div className="flex items-center gap-1.5 rounded-[6px] border border-white/[0.06] bg-white/[0.02] px-3 py-2 font-mono text-[11px] text-[#8a8f98]"> <div className="flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-2 font-mono text-[11px] text-ink-muted">
<Loader2 className="size-3.5 animate-spin text-[#7170ff]" /> <Loader2 className="size-3.5 animate-spin text-signal" />
{r.upload_status === "pending" {r.upload_status === "pending"
? "UPLOAD_PENDING..." ? "UPLOAD_PENDING..."
: r.upload_error : r.upload_error
@@ -192,7 +192,7 @@ export function RecordingsView({
</div> </div>
{/* Actions & File Stats */} {/* Actions & File Stats */}
<div className="flex items-center justify-between border-t border-white/[0.04] pt-2.5"> <div className="flex items-center justify-between border-t border-hairline pt-2.5">
<span className="font-mono text-[10px] text-ink-faint"> <span className="font-mono text-[10px] text-ink-faint">
SIZE: {formatBytes(r.size_bytes)} SIZE: {formatBytes(r.size_bytes)}
</span> </span>
@@ -202,16 +202,16 @@ export function RecordingsView({
href={r.download_url} href={r.download_url}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="inline-flex items-center gap-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.05] hover:text-ink" className="inline-flex items-center gap-1 rounded-[5px] border border-hairline bg-surface-2 px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
> >
<Download className="size-3 text-[#7170ff]" /> RAW <Download className="size-3 text-signal" /> RAW
</a> </a>
)} )}
<button <button
type="button" type="button"
onClick={() => onDelete(r.id)} onClick={() => onDelete(r.id)}
disabled={del.isPending} disabled={del.isPending}
className="inline-flex items-center gap-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2 py-1 font-mono text-[10px] text-[#f43f5e] transition-colors hover:border-[#f43f5e]/30 hover:bg-[#f43f5e]/10" className="inline-flex items-center gap-1 rounded-[5px] border border-vermilion/30 bg-vermilion/10 px-2 py-1 font-mono text-[10px] text-vermilion transition-colors hover:bg-vermilion/20"
> >
<Trash2 className="size-3" /> PURGE <Trash2 className="size-3" /> PURGE
</button> </button>
services/frontend/src/app/(dashboard)/voice/view.tsx
+17 -17
View File
@@ -116,26 +116,26 @@ export function VoiceView({
<PageTransition> <PageTransition>
<div ref={containerRef} className="space-y-4"> <div ref={containerRef} className="space-y-4">
{/* Precision Sub-Header Bar */} {/* Precision Sub-Header Bar */}
<div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3"> <div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span <span
className={`h-2 w-2 rounded-full ${ className={`h-2 w-2 rounded-full ${
connected connected
? "bg-[#10b981] shadow-[0_0_8px_#10b981]" ? "bg-success shadow-[0_0_8px_var(--color-status-success)]"
: "bg-[#8a8f98]" : "bg-ink-muted"
}`} }`}
/> />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase"> <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Voice Spectrum & Stage Controls Voice Spectrum & Stage Controls
</h1> </h1>
</div> </div>
<div className="flex items-center gap-2 font-mono text-[11px]"> <div className="flex items-center gap-2 font-mono text-[11px]">
<span className="text-[#8a8f98]">STAGE:</span> <span className="text-ink-muted">STAGE:</span>
<span <span
className={`rounded px-1.5 py-0.5 font-medium border ${ className={`rounded px-1.5 py-0.5 font-medium border ${
connected connected
? "border-[#10b981]/30 bg-[#10b981]/10 text-[#10b981]" ? "border-success/30 bg-success/10 text-success"
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]" : "border-hairline bg-surface-2 text-ink-muted"
}`} }`}
> >
{connected ? "LIVE_BRIDGE" : "OFFLINE"} {connected ? "LIVE_BRIDGE" : "OFFLINE"}
@@ -203,12 +203,12 @@ export function VoiceView({
<SectionHeader eyebrow="Telemetry" title="Input / Output Mix" /> <SectionHeader eyebrow="Telemetry" title="Input / Output Mix" />
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
<div> <div>
<div className="flex justify-between text-xs font-medium text-[#d0d6e0]"> <div className="flex justify-between text-xs font-medium text-ink-soft">
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5">
<Mic className="size-3.5 text-[#7170ff]" /> <Mic className="size-3.5 text-signal" />
Mic Sensitivity Mic Sensitivity
</span> </span>
<span className="font-mono text-[11px] text-[#8a8f98]"> <span className="font-mono text-[11px] text-ink-muted">
{micVol}% {micVol}%
</span> </span>
</div> </div>
@@ -222,17 +222,17 @@ export function VoiceView({
setMicVol(v); setMicVol(v);
mic.setVolume(v / 100); mic.setVolume(v / 100);
}} }}
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#7170ff]" className="mt-2 h-1.5 w-full appearance-none rounded-full bg-surface-2 accent-signal"
/> />
</div> </div>
<div> <div>
<div className="flex justify-between text-xs font-medium text-[#d0d6e0]"> <div className="flex justify-between text-xs font-medium text-ink-soft">
<span className="flex items-center gap-1.5"> <span className="flex items-center gap-1.5">
<Volume2 className="size-3.5 text-[#10b981]" /> <Volume2 className="size-3.5 text-success" />
Monitor Output Monitor Output
</span> </span>
<span className="font-mono text-[11px] text-[#8a8f98]"> <span className="font-mono text-[11px] text-ink-muted">
{listenVol}% {listenVol}%
</span> </span>
</div> </div>
@@ -246,14 +246,14 @@ export function VoiceView({
setListenVol(v); setListenVol(v);
listen.setVolume(v / 100); listen.setVolume(v / 100);
}} }}
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#10b981]" className="mt-2 h-1.5 w-full appearance-none rounded-full bg-surface-2 accent-success"
/> />
</div> </div>
</div> </div>
</div> </div>
<div className="mt-6 border-t border-white/[0.06] pt-3"> <div className="mt-6 border-t border-hairline pt-3">
<div className="font-mono text-[10px] text-[#8a8f98]"> <div className="font-mono text-[10px] text-ink-muted">
CODEC: OPUS 48KHZ · LOW_LATENCY CODEC: OPUS 48KHZ · LOW_LATENCY
</div> </div>
</div> </div>
services/frontend/src/app/globals.css
+161 -158
View File
@@ -3,111 +3,131 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
/* /*
* GMW — Linear Precision Clean Dark Design System * GMW — Command Center Tactical HUD Design System
* * Engineered for high precision in both DARK and LIGHT modes.
* Inspired by Linear's ultra-precise, dark-mode native interface. * Uses semantic CSS variables for seamless theme switching, eliminating hardcoded hex clashes.
* Built on achromatic luminance hierarchy, near-black canvas (#08090a),
* ultra-crisp hairline borders, subtle indigo/violet accents (#5e6ad2 / #7170ff),
* and buttery smooth GSAP-driven micro-interactions.
*/ */
:root {
/* ── Light Mode Base Palette (Crisp High-Contrast Titanium HUD) ── */
--canvas-base: #f0f2f5;
--canvas-subtle: #e5e8ed;
--panel-bg: rgba(255, 255, 255, 0.85);
--panel-bg-subtle: rgba(255, 255, 255, 0.6);
--panel-border: rgba(15, 23, 42, 0.08);
--panel-border-hover: rgba(94, 106, 210, 0.35);
--text-primary: #0f172a;
--text-secondary: #334155;
--text-muted: #64748b;
--text-faint: #94a3b8;
--accent-brand: #4f46e5;
--accent-signal: #6366f1;
--accent-signal-bg: rgba(99, 102, 241, 0.1);
--accent-signal-border: rgba(99, 102, 241, 0.25);
--accent-signal-glow: rgba(99, 102, 241, 0.25);
--color-success: #059669;
--color-success-bg: rgba(5, 150, 105, 0.1);
--color-warning: #d97706;
--color-warning-bg: rgba(217, 119, 6, 0.1);
--color-danger: #e11d48;
--color-danger-bg: rgba(225, 29, 72, 0.1);
--grid-pattern: rgba(15, 23, 42, 0.035);
--shadow-hud: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.dark {
/* ── Dark Mode Base Palette (Stealth Obsidian Tactical HUD) ── */
--canvas-base: #060709;
--canvas-subtle: #0c0e12;
--panel-bg: rgba(13, 16, 23, 0.75);
--panel-bg-subtle: rgba(255, 255, 255, 0.03);
--panel-border: rgba(255, 255, 255, 0.07);
--panel-border-hover: rgba(113, 112, 255, 0.45);
--text-primary: #f8fafc;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--text-faint: #475569;
--accent-brand: #5e6ad2;
--accent-signal: #7170ff;
--accent-signal-bg: rgba(113, 112, 255, 0.12);
--accent-signal-border: rgba(113, 112, 255, 0.3);
--accent-signal-glow: rgba(113, 112, 255, 0.35);
--color-success: #10b981;
--color-success-bg: rgba(16, 185, 129, 0.12);
--color-warning: #f59e0b;
--color-warning-bg: rgba(245, 158, 11, 0.12);
--color-danger: #f43f5e;
--color-danger-bg: rgba(244, 63, 94, 0.15);
--grid-pattern: rgba(255, 255, 255, 0.025);
--shadow-hud: 0 8px 32px -4px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
@theme { @theme {
/* ── Canvas & Surface Stack (Luminance Stacking) ── */ --color-canvas: var(--canvas-base);
--color-canvas: #08090a; --color-canvas-2: var(--canvas-subtle);
--color-canvas-2: #0f1011; --color-surface: var(--panel-bg);
--color-surface: rgba(255, 255, 255, 0.035); --color-surface-2: var(--panel-bg-subtle);
--color-surface-2: rgba(255, 255, 255, 0.06); --color-hairline: var(--panel-border);
--color-surface-elevated: #191a1b; --color-hairline-focus: var(--panel-border-hover);
--color-surface-hover: rgba(255, 255, 255, 0.08);
/* ── Typography & Ink ── */ --color-ink: var(--text-primary);
--color-ink: #f7f8f8; --color-ink-soft: var(--text-secondary);
--color-ink-soft: #d0d6e0; --color-ink-muted: var(--text-muted);
--color-ink-muted: #8a8f98; --color-ink-faint: var(--text-faint);
--color-ink-faint: #62666d;
/* ── Hairline Structural Borders ── */ --color-brand: var(--accent-brand);
--color-hairline: rgba(255, 255, 255, 0.08); --color-brand-accent: var(--accent-signal);
--color-hairline-subtle: rgba(255, 255, 255, 0.05); --color-signal: var(--accent-signal);
--color-hairline-focus: rgba(255, 255, 255, 0.16); --color-signal-glow: var(--accent-signal-glow);
--hairline-w: 1px;
/* ── Brand & Accent Signals (Subdued Precision) ── */ --color-status-success: var(--color-success);
--color-brand: #5e6ad2; --color-amber: var(--color-warning);
--color-brand-accent: #7170ff; --color-vermilion: var(--color-danger);
--color-brand-hover: #828fff;
--color-brand-subtle: rgba(94, 106, 210, 0.15);
--color-signal: #7170ff; --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--color-signal-ink: #ffffff; --font-mono: var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
--color-signal-glow: rgba(113, 112, 255, 0.25); --font-display: var(--font-display), var(--font-inter), sans-serif;
/* Semantic status colors (crisp, purposeful) */ --radius-r: 8px;
--color-status-success: #10b981; --radius-r-panel: 10px;
--color-status-success-subtle: rgba(16, 185, 129, 0.15);
--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);
--color-ring: var(--color-brand-accent);
/* ── Typography Stack ── */
--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-control: 6px;
--radius-r-pill: 9999px; --radius-r-pill: 9999px;
} }
/* ── Light Theme Fallbacks ── */
.light {
color-scheme: light;
--color-canvas: #f7f8f8;
--color-canvas-2: #f3f4f5;
--color-surface: rgba(0, 0, 0, 0.03);
--color-surface-2: rgba(0, 0, 0, 0.05);
--color-surface-elevated: #ffffff;
--color-surface-hover: rgba(0, 0, 0, 0.06);
--color-ink: #171717;
--color-ink-soft: #404040;
--color-ink-muted: #737373;
--color-ink-faint: #a3a3a3;
--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);
}
@layer base { @layer base {
* { * {
@apply border-transparent; border-color: var(--panel-border);
font-feature-settings: "cv01", "ss03";
} }
html { html {
@apply font-sans antialiased scroll-smooth; @apply font-sans antialiased scroll-smooth;
background-color: var(--color-canvas); background-color: var(--canvas-base);
color: var(--color-ink); color: var(--text-primary);
} }
body { body {
@apply bg-canvas text-ink font-sans antialiased;
min-height: 100dvh; min-height: 100dvh;
background-color: var(--canvas-base);
color: var(--text-primary);
background-image:
linear-gradient(to right, var(--grid-pattern) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-pattern) 1px, transparent 1px);
background-size: 32px 32px;
} }
::selection { ::selection {
background: rgba(113, 112, 255, 0.28); background: var(--accent-signal-bg);
color: #ffffff; color: var(--accent-signal);
} }
/* Linear-style minimalist slim scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 6px; width: 6px;
height: 6px; height: 6px;
@@ -116,65 +136,69 @@
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12); background: var(--text-faint);
opacity: 0.4;
border-radius: 9999px; border-radius: 9999px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.22); background: var(--text-muted);
} }
:focus-visible { :focus-visible {
outline: 2px solid var(--color-brand-accent); outline: 2px solid var(--accent-signal);
outline-offset: 2px; outline-offset: 2px;
} }
} }
@layer components { @layer components {
/* Precision Surface Panel (Linear Card) */ /* Tactical HUD Glass Panel */
.glass { .glass {
background: var(--color-surface); background: var(--panel-bg);
border: 1px solid var(--color-hairline); border: 1px solid var(--panel-border);
border-radius: var(--radius-r); border-radius: var(--radius-r-panel);
backdrop-filter: blur(12px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(16px);
box-shadow: box-shadow: var(--shadow-hud);
0 1px 0 0 rgba(255, 255, 255, 0.03) inset, transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
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:hover {
border-color: var(--panel-border-hover);
} }
.glass-2 { .glass-2 {
background: var(--color-surface-2); background: var(--panel-bg-subtle);
border: 1px solid var(--color-hairline-subtle); border: 1px solid var(--panel-border);
border-radius: var(--radius-r-panel); border-radius: var(--radius-r);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
} }
/* Linear-style subtle interactive hover card */ /* HUD Tactical Card */
.linear-card { .linear-card,
background: rgba(255, 255, 255, 0.02); .hud-card {
border: 1px solid rgba(255, 255, 255, 0.06); position: relative;
background: var(--panel-bg);
border: 1px solid var(--panel-border);
border-radius: var(--radius-r-panel); border-radius: var(--radius-r-panel);
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(12px);
box-shadow: var(--shadow-hud);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
} }
.linear-card:hover {
background: rgba(255, 255, 255, 0.04); .linear-card:hover,
border-color: rgba(255, 255, 255, 0.12); .hud-card:hover {
border-color: var(--panel-border-hover);
transform: translateY(-1px); 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;
font-weight: 500; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: var(--color-ink-muted); color: var(--text-muted);
} }
/* Micro-Pill Tag */
.pill { .pill {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -182,10 +206,11 @@
padding: 0.18rem 0.55rem; padding: 0.18rem 0.55rem;
border-radius: var(--radius-r-pill); border-radius: var(--radius-r-pill);
font-size: 0.7rem; font-size: 0.7rem;
font-family: var(--font-mono);
font-weight: 500; font-weight: 500;
background: rgba(255, 255, 255, 0.04); background: var(--panel-bg-subtle);
border: 1px solid var(--color-hairline); border: 1px solid var(--panel-border);
color: var(--color-ink-soft); color: var(--text-secondary);
} }
.mono { .mono {
@@ -193,77 +218,57 @@
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
/* Display Typography (Compressed Linear-style tracking) */
.display { .display {
font-family: var(--font-sans); font-family: var(--font-display);
font-weight: 600; font-weight: 700;
letter-spacing: -0.035em; letter-spacing: -0.035em;
line-height: 1.05; line-height: 1.1;
} }
} }
@layer utilities { @layer utilities {
.text-signal { color: var(--color-brand-accent); } .text-signal { color: var(--accent-signal); }
.text-brand { color: var(--color-brand-accent); } .text-brand { color: var(--accent-brand); }
.text-amber { color: var(--color-amber); } .text-amber { color: var(--color-warning); }
.text-vermilion { color: var(--color-vermilion); } .text-vermilion { color: var(--color-danger); }
.text-success { color: var(--color-status-success); } .text-success { color: var(--color-success); }
.text-ink-soft { color: var(--color-ink-soft); } .text-ink { color: var(--text-primary); }
.text-ink-muted { color: var(--color-ink-muted); } .text-ink-soft { color: var(--text-secondary); }
.text-ink-faint { color: var(--color-ink-faint); } .text-ink-muted { color: var(--text-muted); }
.text-ink-faint { color: var(--text-faint); }
.hero-clamp { .bg-canvas { background-color: var(--canvas-base); }
font-size: clamp(1.85rem, 1.2rem + 3.5vw, 2.5rem); .bg-surface { background-color: var(--panel-bg); }
letter-spacing: -0.04em; .bg-surface-2 { background-color: var(--panel-bg-subtle); }
font-weight: 600; .border-hairline { border-color: var(--panel-border); }
}
.glow-signal { .glow-signal {
text-shadow: 0 0 16px var(--color-signal-glow); text-shadow: 0 0 16px var(--accent-signal-glow);
}
.ring-focus {
transition: box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
}
.ring-focus:hover {
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 ═══ */ /* ═══ Keyframes & Animations ═══ */
.nav-dock-item { @keyframes breathe {
position: relative; 0%, 100% { opacity: 0.4; transform: scale(0.95); }
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1); 50% { opacity: 1; transform: scale(1.05); }
}
.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 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: 0.8; } 0% { transform: scale(0.85); opacity: 0.9; }
100% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; }
} }
.animate-breathe { animation: breathe 2.5s ease-in-out infinite; }
.animate-spin-disc { animation: spin-disc 10s linear infinite; } .animate-spin-disc { animation: spin-disc 10s linear infinite; }
.animate-pulse-ring { animation: pulse-ring 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; } .animate-pulse-ring { animation: pulse-ring 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.animate-breathe,
.animate-spin-disc, .animate-spin-disc,
.animate-pulse-ring { .animate-pulse-ring {
animation: none !important; animation: none !important;
@@ -274,7 +279,5 @@
animation-duration: 0.001ms !important; animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important; transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
} }
html { scroll-behavior: auto; }
} }
services/frontend/src/components/ChannelCultureGlossary.tsx
+10 -10
View File
@@ -63,7 +63,7 @@ export function ChannelCultureGlossary({
placeholder="Filter channels or culture topics..." placeholder="Filter channels or culture topics..."
value={filter} value={filter}
onChange={(e) => setFilter(e.target.value)} onChange={(e) => setFilter(e.target.value)}
className="w-full rounded-[6px] border border-white/[0.08] bg-white/[0.02] py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-[#7170ff] focus:outline-none" className="w-full rounded-[6px] border border-hairline bg-surface-2 py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
/> />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -80,9 +80,9 @@ export function ChannelCultureGlossary({
})), })),
) )
} }
className="inline-flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-ink" className="inline-flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
> >
<Download className="size-3.5 text-[#7170ff]" /> <Download className="size-3.5 text-signal" />
EXPORT_CSV EXPORT_CSV
</button> </button>
)} )}
@@ -116,13 +116,13 @@ export function ChannelCultureGlossary({
return ( return (
<div <div
key={c.channel_id} key={c.channel_id}
className="channel-node-card group relative flex flex-col justify-between overflow-hidden rounded-[8px] border border-white/[0.06] bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04] hover:shadow-lg" className="channel-node-card hud-card group relative flex flex-col justify-between overflow-hidden p-4"
> >
<div> <div>
{/* Channel Card Header */} {/* Channel Card Header */}
<div className="flex items-center justify-between gap-2 border-b border-white/[0.05] pb-2.5"> <div className="flex items-center justify-between gap-2 border-b border-hairline pb-2.5">
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0">
<span className="flex size-6 items-center justify-center rounded bg-white/[0.04] text-[#7170ff]"> <span className="flex size-6 items-center justify-center rounded bg-surface-2 text-signal">
<Hash className="size-3.5" /> <Hash className="size-3.5" />
</span> </span>
<span className="truncate font-mono text-xs font-semibold text-ink"> <span className="truncate font-mono text-xs font-semibold text-ink">
@@ -152,10 +152,10 @@ export function ChannelCultureGlossary({
</div> </div>
{/* Signal Strength Bar & Timestamp */} {/* Signal Strength Bar & Timestamp */}
<div className="mt-4 pt-3 border-t border-white/[0.04]"> <div className="mt-4 pt-3 border-t border-hairline">
<div className="flex items-center justify-between font-mono text-[10px] text-ink-faint mb-1.5"> <div className="flex items-center justify-between font-mono text-[10px] text-ink-faint mb-1.5">
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
<Activity className="size-3 text-[#7170ff]" /> <Activity className="size-3 text-signal" />
INTEL RATIO INTEL RATIO
</span> </span>
<span> <span>
@@ -164,9 +164,9 @@ export function ChannelCultureGlossary({
: "NEVER"} : "NEVER"}
</span> </span>
</div> </div>
<div className="h-1 w-full overflow-hidden rounded-full bg-white/[0.06]"> <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-2">
<div <div
className="h-full rounded-full bg-gradient-to-r from-[#5e6ad2] to-[#7170ff] transition-all duration-500" className="h-full rounded-full bg-signal transition-all duration-500"
style={{ width: `${pct}%` }} style={{ width: `${pct}%` }}
/> />
</div> </div>
services/frontend/src/components/LiveModerationFeed.tsx
+9 -9
View File
@@ -27,14 +27,14 @@ function actionIcon(type: string) {
switch (type) { switch (type) {
case "ban_user": case "ban_user":
case "kick_user": case "kick_user":
return <UserX className="size-3.5 text-[#f43f5e]" />; return <UserX className="size-3.5 text-vermilion" />;
case "timeout_user": case "timeout_user":
return <VolumeX className="size-3.5 text-[#f59e0b]" />; return <VolumeX className="size-3.5 text-amber" />;
case "delete_message": case "delete_message":
case "warn_user": case "warn_user":
return <ShieldAlert className="size-3.5 text-[#7170ff]" />; return <ShieldAlert className="size-3.5 text-signal" />;
default: default:
return <CheckCircle2 className="size-3.5 text-[#10b981]" />; return <CheckCircle2 className="size-3.5 text-success" />;
} }
} }
@@ -90,11 +90,11 @@ export function LiveModerationFeed({
return ( return (
<div className="flex max-h-[460px] flex-col"> <div className="flex max-h-[460px] flex-col">
<div className="flex items-center justify-between border-b border-white/[0.06] pb-3"> <div className="flex items-center justify-between border-b border-hairline pb-3">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="relative flex size-2"> <span className="relative flex size-2">
<span className="absolute inline-flex size-full animate-ping rounded-full bg-[#10b981] opacity-75" /> <span className="absolute inline-flex size-full animate-ping rounded-full bg-success opacity-75" />
<span className="relative inline-flex size-2 rounded-full bg-[#10b981]" /> <span className="relative inline-flex size-2 rounded-full bg-success" />
</span> </span>
<span className="font-mono text-xs font-medium text-ink"> <span className="font-mono text-xs font-medium text-ink">
Live Stream Audit Log Live Stream Audit Log
@@ -116,9 +116,9 @@ export function LiveModerationFeed({
return ( return (
<div <div
key={a.id} key={a.id}
className="mod-feed-item flex items-start gap-3 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]" className="mod-feed-item hud-card flex items-start gap-3 p-3 transition-all"
> >
<span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-white/[0.08] bg-white/[0.03]"> <span className="flex size-7 shrink-0 items-center justify-center rounded-[6px] border border-hairline bg-surface-2">
{actionIcon(a.action_type)} {actionIcon(a.action_type)}
</span> </span>
services/frontend/src/components/TermGlossary.tsx
+12 -12
View File
@@ -14,7 +14,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
const bodyRef = useRef<HTMLDivElement>(null); const bodyRef = useRef<HTMLDivElement>(null);
return ( return (
<div className="glossary-entry overflow-hidden rounded-[6px] border border-white/[0.06] bg-white/[0.02] transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"> <div className="glossary-entry hud-card overflow-hidden transition-all">
<button <button
type="button" type="button"
onClick={() => setOpen((v) => !v)} onClick={() => setOpen((v) => !v)}
@@ -42,7 +42,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
style={{ gridTemplateRows: open ? "1fr" : "0fr" }} style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
> >
<div className="overflow-hidden"> <div className="overflow-hidden">
<div className="border-t border-white/[0.04] bg-black/20 px-3.5 py-2.5 text-xs"> <div className="border-t border-hairline bg-surface-2 px-3.5 py-2.5 text-xs">
<p className="font-sans text-ink-soft leading-relaxed"> <p className="font-sans text-ink-soft leading-relaxed">
{t.definition} {t.definition}
</p> </p>
@@ -51,7 +51,7 @@ function GlossaryEntry({ t }: { t: GlossaryRow }) {
href={t.source_url} href={t.source_url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="mt-2 inline-flex items-center gap-1.5 font-mono text-[10px] text-[#7170ff] hover:underline" className="mt-2 inline-flex items-center gap-1.5 font-mono text-[10px] text-signal hover:underline"
> >
<Globe className="size-3" /> <Globe className="size-3" />
{t.source_url} {t.source_url}
@@ -86,16 +86,16 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Tactical HUD Header Bar */} {/* Tactical HUD Header Bar */}
<div className="flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3"> <div className="flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" /> <span className="h-2 w-2 rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase"> <h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Slang & Term Glossary · Knowledge Base Slang & Term Glossary · Knowledge Base
</h1> </h1>
</div> </div>
<div className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]"> <div className="flex items-center gap-2 font-mono text-[11px] text-ink-muted">
<span>INDEXED:</span> <span>INDEXED:</span>
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]"> <span className="rounded bg-signal/15 px-2 py-0.5 font-medium text-signal border border-signal/30">
{terms.length} TERMS_RECORDED {terms.length} TERMS_RECORDED
</span> </span>
</div> </div>
@@ -110,7 +110,7 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
placeholder="Search slang term or definition keywords..." placeholder="Search slang term or definition keywords..."
value={filter} value={filter}
onChange={(e) => setFilter(e.target.value)} onChange={(e) => setFilter(e.target.value)}
className="w-full rounded-[6px] border border-white/[0.08] bg-white/[0.02] py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-[#7170ff] focus:outline-none" className="w-full rounded-[6px] border border-hairline bg-surface-2 py-1.5 pl-9 pr-3 text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
/> />
</div> </div>
{terms.length > 0 && ( {terms.length > 0 && (
@@ -128,9 +128,9 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
})), })),
) )
} }
className="inline-flex items-center gap-1.5 rounded-[6px] border border-white/[0.08] bg-white/[0.02] px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:border-white/[0.16] hover:bg-white/[0.04] hover:text-ink" className="inline-flex items-center gap-1.5 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-[11px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
> >
<Download className="size-3.5 text-[#7170ff]" /> <Download className="size-3.5 text-signal" />
EXPORT_CSV EXPORT_CSV
</button> </button>
)} )}
@@ -141,7 +141,7 @@ export function TermGlossary({ terms }: { terms: GlossaryRow[] }) {
eyebrow="knowledge directory" eyebrow="knowledge directory"
title="Slang & Definition Index" title="Slang & Definition Index"
action={ action={
<span className="mono text-xs text-[#8a8f98]"> <span className="mono text-xs text-ink-muted">
{filtered.length} of {terms.length} terms {filtered.length} of {terms.length} terms
</span> </span>
} }
services/frontend/src/components/chatbot/chatbot.tsx
+196 -154
View File
@@ -2,217 +2,259 @@
import { useGSAP } from "@gsap/react"; import { useGSAP } from "@gsap/react";
import gsap from "gsap"; import gsap from "gsap";
import { Bot, MessageSquare, Send, Trash2, X } from "lucide-react"; import {
Bot,
Loader2,
Maximize2,
Minimize2,
Send,
Sparkles,
X,
} from "lucide-react";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { Button, toast } from "@/components/primitives"; import { Button } from "@/components/primitives";
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 { formatRelativeTime } from "@/lib/format";
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
gsap.registerPlugin(useGSAP); gsap.registerPlugin(useGSAP);
} }
interface Msg { interface ChatMessage {
id: string; id: string;
role: "user" | "bot"; sender: "user" | "bot";
content: string; text: string;
ts: number; timestamp: number;
}
function formatTime(ts: number): string {
try {
return new Date(ts).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
});
} catch {
return "";
}
} }
export function Chatbot() { export function Chatbot() {
const userId = useChatbotUserId();
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [msgs, setMsgs] = useState<Msg[]>([]); const [expanded, setExpanded] = useState(false);
const [messages, setMessages] = useState<ChatMessage[]>([]);
const [input, setInput] = useState(""); const [input, setInput] = useState("");
const [loading, setLoading] = useState(false); const [sending, setSending] = useState(false);
const panelRef = useRef<HTMLDivElement>(null); const userId = useChatbotUserId();
const bottomRef = useRef<HTMLDivElement>(null);
useGSAP( const containerRef = useRef<HTMLDivElement>(null);
() => { const scrollRef = useRef<HTMLDivElement>(null);
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] },
);
// Load history on mount
useEffect(() => { useEffect(() => {
if (!open || !userId) return;
chatbotApi chatbotApi
.getHistory(userId) .getHistory(userId || undefined)
.then((res) => { .then((res) => {
setMsgs( if (res.history) {
res.history.slice(-12).flatMap((h) => [ const loaded: ChatMessage[] = res.history.flatMap((h) => [
{ {
id: `${h.id}-u`, id: `${h.id}-u`,
role: "user" as const, sender: "user",
content: h.user_message, text: h.user_message,
ts: Date.parse(h.created_at) || Date.now(), timestamp: new Date(h.created_at).getTime(),
}, },
{ {
id: `${h.id}-b`, id: `${h.id}-b`,
role: "bot" as const, sender: "bot",
content: h.bot_response, text: h.bot_response,
ts: Date.parse(h.created_at) || Date.now(), timestamp: new Date(h.created_at).getTime() + 100,
}, },
]), ]);
); setMessages(loaded);
}
}) })
.catch(() => {}); .catch(() => {});
}, [open, userId]); }, [userId]);
// Auto-scroll to bottom on new messages
useEffect(() => { useEffect(() => {
bottomRef.current?.scrollIntoView({ behavior: "smooth" }); if (scrollRef.current) {
}, []); scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
const send = async (text: string) => {
if (!text.trim() || loading || !userId) return;
setInput("");
setMsgs((m) => [
...m,
{ id: `u-${Date.now()}`, role: "user", content: text, ts: Date.now() },
]);
setLoading(true);
try {
const res = await chatbotApi.send(text, undefined, userId);
setMsgs((m) => [
...m,
{
id: `b-${Date.now()}`,
role: "bot",
content: res.response,
ts: Date.parse(res.timestamp) || Date.now(),
},
]);
} catch (e) {
toast({ title: "Chat error", description: String(e), tone: "vermilion" });
} finally {
setLoading(false);
} }
}; });
// GSAP animation for floating window
useGSAP(
() => {
if (!containerRef.current) return;
if (open) {
gsap.fromTo(
containerRef.current,
{ opacity: 0, scale: 0.95, y: 15 },
{ opacity: 1, scale: 1, y: 0, duration: 0.25, ease: "power2.out" },
);
}
},
{ dependencies: [open], scope: containerRef },
);
const handleSend = async (e: React.FormEvent) => {
e.preventDefault();
const query = input.trim();
if (!query || sending) return;
const userMsg: ChatMessage = {
id: `u-${Date.now()}`,
sender: "user",
text: query,
timestamp: Date.now(),
};
setMessages((prev) => [...prev, userMsg]);
setInput("");
setSending(true);
const clearAll = async () => {
if (!userId) return;
setMsgs([]);
try { try {
await chatbotApi.clearHistory(userId); const res = await chatbotApi.send(query, undefined, userId || "operator");
const botMsg: ChatMessage = {
id: `b-${Date.now()}`,
sender: "bot",
text: res.response || "No response received.",
timestamp: Date.now(),
};
setMessages((prev) => [...prev, botMsg]);
} catch { } catch {
/* best-effort */ const errMsg: ChatMessage = {
id: `err-${Date.now()}`,
sender: "bot",
text: "Signal telemetry fault. Failed to communicate with neural core.",
timestamp: Date.now(),
};
setMessages((prev) => [...prev, errMsg]);
} finally {
setSending(false);
} }
}; };
return ( return (
<> <>
<button {/* Floating Tactical Launcher Button */}
type="button" {!open && (
aria-label="Open assistant" <button
onClick={() => setOpen((o) => !o)} type="button"
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]" aria-label="Open neural HUD assistant"
> onClick={() => setOpen(true)}
{open ? ( className="fixed right-4 bottom-5 z-50 flex size-11 items-center justify-center rounded-full border border-signal/40 bg-surface text-signal shadow-[0_0_20px_var(--color-signal-glow)] transition-all duration-200 hover:scale-105 hover:border-signal hover:bg-signal hover:text-white"
<X className="size-4" /> >
) : ( <Sparkles className="size-5 animate-breathe" />
<MessageSquare className="size-4 text-[#7170ff]" /> </button>
)} )}
</button>
{/* Neural Assistant Dialog */}
{open && ( {open && (
<div <div
ref={panelRef} ref={containerRef}
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" className={`glass fixed right-4 bottom-18 z-50 flex flex-col p-0 shadow-2xl transition-all duration-200 ${
expanded
? "h-[min(85dvh,680px)] w-[min(94vw,540px)]"
: "h-[min(65dvh,480px)] w-[min(92vw,360px)]"
}`}
> >
<div className="flex items-center justify-between border-b border-white/[0.06] px-3.5 py-2.5"> {/* Header */}
<div className="flex items-center justify-between border-b border-hairline px-3.5 py-2.5">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="flex size-6 items-center justify-center rounded-md bg-[#7170ff]/15 text-[#7170ff]"> <span className="flex size-6 items-center justify-center rounded-[4px] bg-signal/15 text-signal">
<Bot className="size-3.5" /> <Bot className="size-3.5" />
</span> </span>
<div> <div>
<div className="text-xs font-semibold text-[#f7f8f8]"> <span className="font-mono text-xs font-bold text-ink">
Linear Assistant Neural Core Assistant
</div> </span>
<div className="font-mono text-[9px] text-[#62666d]"> <span className="ml-2 font-mono text-[10px] text-success">
active context ● ACTIVE
</div>
</div>
</div>
<button
type="button"
onClick={clearAll}
className="rounded-[5px] p-1 text-[#62666d] hover:bg-white/[0.05] hover:text-[#d0d6e0]"
>
<Trash2 className="size-3.5" />
</button>
</div>
<div className="flex-1 space-y-2.5 overflow-y-auto px-3.5 py-3">
{msgs.length === 0 && !loading && (
<div className="py-8 text-center text-xs text-[#62666d]">
Ask anything about telemetry, moderation, or media.
</div>
)}
{msgs.map((m) => (
<div
key={m.id}
className={cn(
"flex flex-col text-xs",
m.role === "user" ? "items-end" : "items-start",
)}
>
<div
className={cn(
"max-w-[85%] rounded-[6px] px-2.5 py-1.5",
m.role === "user"
? "bg-[#5e6ad2] text-white"
: "border border-white/[0.06] bg-white/[0.03] text-[#d0d6e0]",
)}
>
{m.role === "bot" ? (
<MarkdownLite content={m.content} />
) : (
<span>{m.content}</span>
)}
</div>
<span className="font-mono mt-0.5 text-[9px] text-[#62666d]">
{formatTime(m.ts)}
</span> </span>
</div> </div>
))} </div>
<div ref={bottomRef} />
<div className="flex items-center gap-1">
<button
type="button"
onClick={() => setExpanded(!expanded)}
className="rounded-[5px] p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
>
{expanded ? (
<Minimize2 className="size-3.5" />
) : (
<Maximize2 className="size-3.5" />
)}
</button>
<button
type="button"
onClick={() => setOpen(false)}
className="rounded-[5px] p-1 text-ink-muted hover:bg-surface-2 hover:text-ink"
>
<X className="size-3.5" />
</button>
</div>
</div> </div>
{/* Messages Body */}
<div
ref={scrollRef}
className="flex-1 space-y-3 overflow-y-auto p-3.5"
>
{messages.length === 0 ? (
<div className="flex h-full flex-col items-center justify-center text-center font-mono text-xs text-ink-muted">
<Sparkles className="mb-2 size-6 text-signal opacity-60" />
<span>Neural Assistant ready.</span>
<span className="text-[10px] text-ink-faint">
Ask about telemetry, moderation policies, or channel activity.
</span>
</div>
) : (
messages.map((m) => {
const isUser = m.sender === "user";
return (
<div
key={m.id}
className={`flex flex-col ${
isUser ? "items-end" : "items-start"
}`}
>
<div
className={`max-w-[85%] rounded-[8px] p-2.5 text-xs leading-relaxed ${
isUser
? "bg-signal text-white"
: "hud-card text-ink-soft"
}`}
>
{m.text}
</div>
<span className="mt-1 font-mono text-[9px] text-ink-faint">
{formatRelativeTime(m.timestamp)}
</span>
</div>
);
})
)}
{sending && (
<div className="flex items-center gap-2 font-mono text-xs text-ink-muted">
<Loader2 className="size-3.5 animate-spin text-signal" />
<span>Processing vector inference...</span>
</div>
)}
</div>
{/* Input Footer */}
<form <form
onSubmit={(e) => { onSubmit={handleSend}
e.preventDefault(); className="flex items-center gap-1.5 border-t border-hairline p-2"
send(input);
}}
className="flex items-center gap-1.5 border-t border-white/[0.06] p-2"
> >
<input <input
type="text" type="text"
placeholder="Transmit instruction to core..."
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
placeholder="Ask command..." className="flex-1 rounded-[6px] border border-hairline bg-surface-2 px-3 py-1.5 font-mono text-xs text-ink placeholder:text-ink-faint focus:border-signal focus:outline-none"
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"> <Button
<Send className="size-3" /> variant="primary"
size="sm"
type="submit"
disabled={!input.trim() || sending}
className="px-2.5"
>
<Send className="size-3.5" />
</Button> </Button>
</form> </form>
</div> </div>
services/frontend/src/components/primitives/badge.tsx
+10 -10
View File
@@ -16,19 +16,19 @@ export function Badge({
...props ...props
}: BadgeProps) { }: BadgeProps) {
const tones = { const tones = {
neutral: "bg-white/[0.04] text-[#d0d6e0] border-white/[0.08]", neutral: "bg-surface-2 text-ink-soft border-hairline",
signal: "bg-[#7170ff]/10 text-[#7170ff] border-[#7170ff]/25", signal: "bg-signal/15 text-signal border-signal/30",
success: "bg-[#10b981]/10 text-[#10b981] border-[#10b981]/25", success: "bg-success/15 text-success border-success/30",
amber: "bg-[#f59e0b]/10 text-[#f59e0b] border-[#f59e0b]/25", amber: "bg-amber/15 text-amber border-amber/30",
vermilion: "bg-[#f43f5e]/10 text-[#f43f5e] border-[#f43f5e]/25", vermilion: "bg-vermilion/15 text-vermilion border-vermilion/30",
}; };
const dots = { const dots = {
neutral: "bg-[#8a8f98]", neutral: "bg-ink-muted",
signal: "bg-[#7170ff]", signal: "bg-signal",
success: "bg-[#10b981]", success: "bg-success",
amber: "bg-[#f59e0b]", amber: "bg-amber",
vermilion: "bg-[#f43f5e]", vermilion: "bg-vermilion",
}; };
const sizes = { const sizes = {
services/frontend/src/components/primitives/button.tsx
+7 -8
View File
@@ -11,21 +11,20 @@ export const buttonVariants = ({
className?: string; className?: string;
}) => { }) => {
const base = 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"; "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-signal disabled:pointer-events-none disabled:opacity-40 cursor-pointer";
const variants = { const variants = {
primary: primary:
"bg-[#5e6ad2] text-white hover:bg-[#7170ff] shadow-sm active:scale-[0.98]", "bg-signal text-white hover:opacity-90 shadow-xs active:scale-[0.98]",
ghost: 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]", "bg-surface-2 text-ink-soft border border-hairline hover:bg-surface hover:text-ink hover:border-hairline-focus active:scale-[0.98]",
outline: outline:
"bg-transparent text-[#d0d6e0] border border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8] active:scale-[0.98]", "bg-transparent text-ink-soft border border-hairline hover:bg-surface-2 hover:text-ink active:scale-[0.98]",
secondary: secondary:
"bg-white/[0.06] text-[#f7f8f8] hover:bg-white/[0.1] border border-white/[0.08] active:scale-[0.98]", "bg-surface text-ink hover:bg-surface-2 border border-hairline active:scale-[0.98]",
subtle: subtle: "bg-transparent text-ink-muted hover:bg-surface-2 hover:text-ink",
"bg-transparent text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#f7f8f8]",
danger: danger:
"bg-[#f43f5e]/15 text-[#f43f5e] border border-[#f43f5e]/30 hover:bg-[#f43f5e]/25 active:scale-[0.98]", "bg-vermilion/15 text-vermilion border border-vermilion/30 hover:bg-vermilion/25 active:scale-[0.98]",
}; };
const sizes = { const sizes = {
services/frontend/src/components/shared/section.tsx
+19 -25
View File
@@ -19,12 +19,8 @@ export function SectionHeader({
)} )}
> >
<div className="min-w-0"> <div className="min-w-0">
{eyebrow && ( {eyebrow && <div className="eyebrow mb-0.5">{eyebrow}</div>}
<div className="font-mono text-[10px] font-medium tracking-wider uppercase text-[#8a8f98] mb-0.5"> <h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-ink">
{eyebrow}
</div>
)}
<h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-[#f7f8f8]">
{title} {title}
</h2> </h2>
</div> </div>
@@ -54,46 +50,44 @@ export function MetricTile({
className?: string; className?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
}) { }) {
const toneColor = const toneClass =
tone === "vermilion" tone === "vermilion"
? "#f43f5e" ? "text-vermilion"
: tone === "amber" : tone === "amber"
? "#f59e0b" ? "text-amber"
: tone === "signal" : tone === "signal"
? "#7170ff" ? "text-signal"
: "#f7f8f8"; : "text-ink";
return ( return (
<div <div
className={cn( className={cn("hud-card p-4 transition-all duration-200", className)}
"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,
)}
style={style} style={style}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="font-mono text-[10px] font-medium uppercase tracking-wider text-[#8a8f98]"> <div className="eyebrow">{label}</div>
{label} {icon && <span className="text-ink-muted">{icon}</span>}
</div>
{icon && <span className="text-[#8a8f98]">{icon}</span>}
</div> </div>
<div <div
className="font-sans mt-1.5 text-[1.65rem] font-semibold leading-none tracking-tight" className={cn(
style={{ color: tone === "neutral" ? undefined : toneColor }} "font-sans mt-2 text-[1.65rem] font-semibold leading-none tracking-tight",
toneClass,
)}
> >
{value} {value}
</div> </div>
{hint && ( {hint && (
<div className="font-mono mt-1 text-[10px] text-[#62666d]">{hint}</div> <div className="font-mono mt-1.5 text-[11px] text-ink-muted">
{hint}
</div>
)} )}
{spark && spark.length > 1 && ( {spark && spark.length > 1 && (
<div className="mt-2.5"> <div className="mt-2.5">
<div className="h-[3px] w-full overflow-hidden rounded-full bg-white/[0.06]"> <div className="h-[3px] w-full overflow-hidden rounded-full bg-surface-2">
<div <div
className="h-full rounded-full" className={cn("h-full rounded-full bg-current", toneClass)}
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,
opacity: 0.8, opacity: 0.8,
}} }}
/> />
services/frontend/src/components/shell/nav-rail.tsx
+5 -5
View File
@@ -30,17 +30,17 @@ function NavItem({
className={cn( className={cn(
"nav-dock-item group relative flex size-9 items-center justify-center rounded-[7px] transition-all duration-150", "nav-dock-item group relative flex size-9 items-center justify-center rounded-[7px] transition-all duration-150",
active active
? "is-active bg-white/[0.08] text-[#f7f8f8] shadow-sm border border-white/[0.12]" ? "is-active bg-signal/15 text-signal font-semibold shadow-xs border border-signal/30"
: "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]", : "text-ink-muted hover:bg-surface-2 hover:text-ink",
)} )}
> >
<Icon className="relative z-10 size-4" strokeWidth={active ? 2.2 : 1.8} /> <Icon className="relative z-10 size-4" strokeWidth={active ? 2.2 : 1.8} />
{/* Precision Micro-Indicator */} {/* Precision Micro-Indicator */}
{active && ( {active && (
<span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-[#7170ff]" /> <span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-signal shadow-[0_0_8px_var(--color-signal-glow)]" />
)} )}
{/* Tooltip on hover */} {/* 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"> <span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-hairline bg-surface px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-ink 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>
@@ -75,7 +75,7 @@ export function NavRail() {
return ( return (
<nav <nav
ref={railRef} ref={railRef}
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" 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-[54px] flex-col items-center gap-1 py-3 md:flex"
> >
<div className="flex flex-1 flex-col gap-1"> <div className="flex flex-1 flex-col gap-1">
{navItems.map((item) => ( {navItems.map((item) => (
services/frontend/src/components/shell/topbar.tsx
+2 -2
View File
@@ -54,7 +54,7 @@ export function TopBar() {
onClick={() => onClick={() =>
window.dispatchEvent(new Event("command-palette:open")) window.dispatchEvent(new Event("command-palette:open"))
} }
className="hidden items-center gap-1.5 rounded-[11px] border border-hairline bg-white/5 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-signal/40 sm:flex" className="hidden items-center gap-1.5 rounded-[8px] border border-hairline bg-surface-2 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-hairline-focus sm:flex"
> >
<span className="mono text-[0.65rem]">⌘K</span> <span className="mono text-[0.65rem]">⌘K</span>
</button> </button>
@@ -62,7 +62,7 @@ export function TopBar() {
type="button" type="button"
aria-label="Toggle theme" aria-label="Toggle theme"
onClick={() => setTheme(theme === "light" ? "dark" : "light")} onClick={() => setTheme(theme === "light" ? "dark" : "light")}
className="flex size-9 items-center justify-center rounded-[11px] border border-hairline bg-white/5 text-ink-soft transition-colors hover:text-ink hover:border-signal/40" className="flex size-8.5 items-center justify-center rounded-[8px] border border-hairline bg-surface-2 text-ink-soft transition-colors hover:text-ink hover:border-hairline-focus"
> >
{mounted && theme === "light" ? ( {mounted && theme === "light" ? (
<Moon className="size-4" /> <Moon className="size-4" />
services/frontend/src/components/voice/recording-audio-player.tsx
+3 -3
View File
@@ -141,7 +141,7 @@ export function RecordingAudioPlayer({
return ( return (
<div <div
className={cn( className={cn(
"rounded-[10px] border bg-white/[0.04] px-3 py-2.5 transition-colors", "rounded-[8px] border bg-surface-2 px-3 py-2.5 transition-colors",
playing || buffering playing || buffering
? "border-signal/40 shadow-[0_0_24px_-10px_var(--color-signal-glow)]" ? "border-signal/40 shadow-[0_0_24px_-10px_var(--color-signal-glow)]"
: "border-hairline", : "border-hairline",
@@ -160,7 +160,7 @@ export function RecordingAudioPlayer({
"flex size-9 shrink-0 items-center justify-center rounded-full border transition-all active:scale-95", "flex size-9 shrink-0 items-center justify-center rounded-full border transition-all active:scale-95",
playing || buffering playing || buffering
? "border-signal/50 bg-signal/15 text-signal" ? "border-signal/50 bg-signal/15 text-signal"
: "border-hairline bg-white/5 text-ink-soft hover:border-signal/40 hover:text-ink", : "border-hairline bg-surface text-ink-soft hover:border-signal/40 hover:text-ink",
)} )}
> >
{buffering ? ( {buffering ? (
@@ -195,7 +195,7 @@ export function RecordingAudioPlayer({
}} }}
className="group relative h-4 cursor-pointer" className="group relative h-4 cursor-pointer"
> >
<div className="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 overflow-hidden rounded-full bg-white/10"> <div className="absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 overflow-hidden rounded-full bg-surface">
<div <div
className={cn( className={cn(
"h-full rounded-full transition-[width]", "h-full rounded-full transition-[width]",