asepharyana
82f1698043
Closes the three highest-value gaps from the FE data-flow audit:
- voice/view.tsx: render VoiceStatus.connections (multi-guild bridge roster)
which was fetched but never shown — channel name, guild/channel id,
connected time, ACTIVE marker for the primary bridge (falls back to the
active channel when connections is empty).
- recordings/view.tsx: show SpeakerSummary.last_at ('active <relative>') on
the speaker leaderboard row (data was fetched but hidden).
- dashboard/view.tsx: render activity.hourly as an 'Hourly Flow · Last 24h'
24-bar volume strip with per-hour tooltip and total msgs/flagged header
(hourly distribution was fetched but only daily was charted).
Verified: tsc clean, biome clean (127 files), pnpm build green.
491 lines
18 KiB
TypeScript
491 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Cable,
|
|
Mic,
|
|
PhoneOff,
|
|
Radio,
|
|
ShieldCheck,
|
|
ShieldOff,
|
|
Volume2,
|
|
} from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useAmbient } from "@/components/ambient/ambient-context";
|
|
import { Button, GlassPanel, toast } from "@/components/primitives";
|
|
import {
|
|
ErrorState,
|
|
PageTransition,
|
|
SectionHeader,
|
|
SkeletonPanel,
|
|
} from "@/components/shared";
|
|
import { GuildChannelPicker } from "@/components/shared/guild-picker";
|
|
import { VoiceStage } from "@/components/voice/voice-stage";
|
|
import {
|
|
useMicTransmit,
|
|
useSpeakers,
|
|
useVoiceConnect,
|
|
useVoiceDisconnect,
|
|
useVoiceListen,
|
|
useVoiceStatus,
|
|
} from "@/hooks";
|
|
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
|
import type { Guild, VoiceStatus } from "@/lib/types";
|
|
import { useWebSocket } from "@/lib/ws/context";
|
|
|
|
export function VoiceView({
|
|
initialStatus,
|
|
initialGuilds,
|
|
}: {
|
|
initialStatus?: VoiceStatus;
|
|
initialGuilds?: Guild[];
|
|
}) {
|
|
const ws = useWebSocket();
|
|
const {
|
|
data: status,
|
|
isLoading,
|
|
error,
|
|
mutate,
|
|
} = useVoiceStatus(initialStatus);
|
|
const connect = useVoiceConnect();
|
|
const disconnect = useVoiceDisconnect();
|
|
const mic = useMicTransmit(ws);
|
|
const listen = useVoiceListen(ws);
|
|
const { speakers, subscribe } = useSpeakers(initialStatus?.activeSpeakers);
|
|
const ambient = useAmbient();
|
|
|
|
const [guildId, setGuildId] = useState<string | null>(
|
|
initialStatus?.activeGuildId ?? initialGuilds?.[0]?.id ?? null,
|
|
);
|
|
const [channelId, setChannelId] = useState<string | null>(
|
|
initialStatus?.activeChannelId ?? null,
|
|
);
|
|
const [micVol, setMicVol] = useState(100);
|
|
const [listenVol, setListenVol] = useState(75);
|
|
const [micActive, setMicActive] = useState(false);
|
|
const [listenActive, setListenActive] = useState(false);
|
|
|
|
const toggleMic = async () => {
|
|
const next = !micActive;
|
|
try {
|
|
await mic.mutateAsync(next);
|
|
setMicActive(next);
|
|
toast({
|
|
title: next ? "Mic activated" : "Mic deactivated",
|
|
tone: next ? "signal" : "neutral",
|
|
});
|
|
} catch (e) {
|
|
// MicAccessError from mic-transmit.ts has specific reasons
|
|
const msg = e instanceof Error ? e.message : String(e);
|
|
const isPermDenied = msg.includes("denied") || msg.includes("Permission");
|
|
const isNoMic = msg.includes("No microphone");
|
|
toast({
|
|
title: isPermDenied
|
|
? "Mic permission denied"
|
|
: isNoMic
|
|
? "No microphone found"
|
|
: "Mic toggle failed",
|
|
description: msg,
|
|
tone: "vermilion",
|
|
});
|
|
}
|
|
};
|
|
|
|
const toggleListen = () => {
|
|
const next = !listenActive;
|
|
listen.toggle(next);
|
|
setListenActive(next);
|
|
toast({
|
|
title: next ? "Monitor activated" : "Monitor deactivated",
|
|
tone: next ? "signal" : "neutral",
|
|
});
|
|
};
|
|
|
|
const containerRef = useStaggerReveal<HTMLDivElement>(".voice-tile", {
|
|
stagger: 0.04,
|
|
y: 8,
|
|
dependencies: [status],
|
|
});
|
|
|
|
useEffect(() => {
|
|
const unsub = subscribe(ws);
|
|
return unsub;
|
|
}, [subscribe, ws]);
|
|
|
|
useEffect(() => {
|
|
if (status?.connected) ambient.set("signal", 0.45, "voice active");
|
|
else ambient.set("vermilion", 0.25, "voice disconnected");
|
|
}, [status?.connected, ambient]);
|
|
|
|
if (error && !status)
|
|
return <ErrorState error={error} onRetry={() => void mutate()} />;
|
|
if (!status && isLoading)
|
|
return (
|
|
<div className="space-y-4">
|
|
<SkeletonPanel rows={3} />
|
|
<SkeletonPanel rows={5} />
|
|
</div>
|
|
);
|
|
|
|
const connected = status?.connected ?? false;
|
|
|
|
const onConnect = async () => {
|
|
if (!guildId || !channelId) {
|
|
toast({ title: "Select target channel", tone: "vermilion" });
|
|
return;
|
|
}
|
|
try {
|
|
await connect.mutateAsync({ guildId, channelId });
|
|
toast({ title: "Connected to voice channel", tone: "signal" });
|
|
} catch (e) {
|
|
toast({
|
|
title: "Connection failed",
|
|
description: String(e),
|
|
tone: "vermilion",
|
|
});
|
|
}
|
|
};
|
|
|
|
const onDisconnect = async () => {
|
|
try {
|
|
await disconnect.mutateAsync();
|
|
toast({ title: "Disconnected from voice", tone: "neutral" });
|
|
} catch (e) {
|
|
toast({
|
|
title: "Disconnect failed",
|
|
description: String(e),
|
|
tone: "vermilion",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<PageTransition>
|
|
<div ref={containerRef} className="space-y-4">
|
|
{/* Precision Sub-Header Bar */}
|
|
<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">
|
|
<span
|
|
className={`h-2 w-2 rounded-full ${
|
|
connected
|
|
? "bg-success shadow-[0_0_8px_var(--color-status-success)]"
|
|
: "bg-ink-muted"
|
|
}`}
|
|
/>
|
|
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
|
|
Voice Spectrum & Stage Controls
|
|
</h1>
|
|
</div>
|
|
<div className="flex items-center gap-2 font-mono text-[11px]">
|
|
<span className="text-ink-muted">STAGE:</span>
|
|
<span
|
|
className={`rounded px-1.5 py-0.5 font-medium border ${
|
|
connected
|
|
? "border-success/30 bg-success/10 text-success"
|
|
: "border-hairline bg-surface-2 text-ink-muted"
|
|
}`}
|
|
>
|
|
{connected ? "LIVE_BRIDGE" : "OFFLINE"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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-1 min-w-[240px]">
|
|
<GuildChannelPicker
|
|
guildId={guildId}
|
|
channelId={channelId}
|
|
guildsInitial={initialGuilds}
|
|
onChange={(g, c) => {
|
|
setGuildId(g);
|
|
setChannelId(c);
|
|
}}
|
|
mode="voice"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{connected ? (
|
|
<Button
|
|
variant="danger"
|
|
size="md"
|
|
onClick={onDisconnect}
|
|
className="gap-1.5"
|
|
>
|
|
<PhoneOff className="size-3.5" />
|
|
Disconnect
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
variant="primary"
|
|
size="md"
|
|
onClick={onConnect}
|
|
className="gap-1.5"
|
|
>
|
|
<Radio className="size-3.5" />
|
|
Connect Bridge
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</GlassPanel>
|
|
</div>
|
|
|
|
{/* Connected Bridges — multi-guild voice bridge roster */}
|
|
<GlassPanel className="voice-tile">
|
|
<SectionHeader
|
|
eyebrow="Bridges"
|
|
title="Connected Voice Bridges"
|
|
action={
|
|
<span className="mono text-xs text-[#8a8f98]">
|
|
{status?.connections?.length ?? (connected ? 1 : 0)} ACTIVE
|
|
</span>
|
|
}
|
|
/>
|
|
<div className="mt-3">
|
|
{status?.connections && status.connections.length > 0 ? (
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
{status.connections.map((conn) => {
|
|
const isActive =
|
|
conn.guildId === status.activeGuildId &&
|
|
conn.channelId === status.activeChannelId;
|
|
return (
|
|
<div
|
|
key={`${conn.guildId}-${conn.channelId}`}
|
|
className={`flex items-center gap-2.5 rounded-[8px] border p-2.5 ${
|
|
isActive
|
|
? "border-success/40 bg-success/5"
|
|
: "border-hairline bg-surface-2"
|
|
}`}
|
|
>
|
|
<span
|
|
className={`flex size-8 shrink-0 items-center justify-center rounded-full border ${
|
|
isActive
|
|
? "border-success/40 bg-success/10 text-success"
|
|
: "border-hairline bg-surface text-ink-muted"
|
|
}`}
|
|
>
|
|
<Cable className="size-3.5" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-xs font-medium text-ink">
|
|
{conn.channelName || "#" + conn.channelId.slice(0, 8)}
|
|
</div>
|
|
<div className="mt-0.5 flex items-center gap-1.5 font-mono text-[9px] text-ink-faint">
|
|
<span className="truncate">
|
|
G:{conn.guildId.slice(0, 8)} · C:
|
|
{conn.channelId.slice(0, 8)}
|
|
</span>
|
|
{isActive && (
|
|
<span className="rounded bg-success/15 px-1 text-success">
|
|
ACTIVE
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<span
|
|
className="shrink-0 font-mono text-[9px] text-ink-faint"
|
|
suppressHydrationWarning
|
|
>
|
|
{new Date(conn.connectedAt).toLocaleTimeString([], {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
})}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : connected ? (
|
|
<div className="flex items-center gap-2.5 rounded-[8px] border border-success/30 bg-success/5 p-2.5">
|
|
<span className="flex size-8 items-center justify-center rounded-full border border-success/40 bg-success/10 text-success">
|
|
<Cable className="size-3.5" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-xs font-medium text-ink">
|
|
{status?.activeChannelName || "Voice channel"}
|
|
</div>
|
|
<div className="mt-0.5 font-mono text-[9px] text-ink-faint">
|
|
Active bridge · G:
|
|
{(status?.activeGuildId ?? guildId ?? "").slice(0, 8)}
|
|
</div>
|
|
</div>
|
|
<span className="rounded bg-success/15 px-1 font-mono text-[9px] text-success">
|
|
ACTIVE
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-[8px] border border-dashed border-hairline p-4 text-center">
|
|
<span className="font-mono text-[10px] text-ink-faint">
|
|
No active voice bridges
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</GlassPanel>
|
|
|
|
{/* Voice Stage Grid */}
|
|
<div className="grid gap-3 lg:grid-cols-3">
|
|
<GlassPanel className="voice-tile lg:col-span-2">
|
|
<SectionHeader
|
|
eyebrow="Participants"
|
|
title="Active Stage Members"
|
|
/>
|
|
<div className="mt-4 min-h-[160px]">
|
|
<VoiceStage speakers={speakers} />
|
|
</div>
|
|
</GlassPanel>
|
|
|
|
<GlassPanel className="voice-tile flex flex-col justify-between">
|
|
<div>
|
|
<SectionHeader eyebrow="Telemetry" title="Input / Output Mix" />
|
|
<div className="mt-4 space-y-4">
|
|
{/* Mic Toggle */}
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={toggleMic}
|
|
className={`flex items-center gap-1.5 rounded-[8px] px-3 py-1.5 text-xs font-medium transition-all ${
|
|
micActive
|
|
? "bg-signal/15 text-signal border border-signal/40 glow-pulse"
|
|
: "bg-surface-2 text-ink-muted border border-hairline hover:border-signal/30 hover:text-ink"
|
|
}`}
|
|
>
|
|
<Mic className="size-3.5" />
|
|
{micActive ? "MIC LIVE" : "MIC OFF"}
|
|
</button>
|
|
<span className="font-mono text-[11px] text-ink-muted">
|
|
{micVol}%
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={150}
|
|
value={micVol}
|
|
onChange={(e) => {
|
|
const v = Number(e.target.value);
|
|
setMicVol(v);
|
|
mic.setVolume(v / 100);
|
|
}}
|
|
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-surface-2 accent-signal"
|
|
/>
|
|
{/* Live mic level meter */}
|
|
{micActive && (
|
|
<div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-surface-2">
|
|
<div
|
|
className="h-full rounded-full bg-signal transition-all duration-100"
|
|
style={{
|
|
width: `${Math.min(100, mic.micLevel * 100)}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Noise Suppression Toggle */}
|
|
<div className="mt-2.5 flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const next = !mic.noiseSuppression;
|
|
mic.toggleNoiseSuppression(next);
|
|
toast({
|
|
title: next
|
|
? "Noise suppression ON"
|
|
: "Noise suppression OFF",
|
|
tone: next ? "signal" : "neutral",
|
|
});
|
|
}}
|
|
className={`flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium transition-all ${
|
|
mic.noiseSuppression
|
|
? "bg-success/15 text-success border border-success/30"
|
|
: "bg-surface-2 text-ink-faint border border-hairline hover:border-ink-muted/30"
|
|
}`}
|
|
>
|
|
{mic.noiseSuppression ? (
|
|
<ShieldCheck className="size-3" />
|
|
) : (
|
|
<ShieldOff className="size-3" />
|
|
)}
|
|
NS {mic.noiseSuppression ? "ON" : "OFF"}
|
|
</button>
|
|
{micActive && (
|
|
<span className="font-mono text-[9px] text-ink-faint">
|
|
{mic.noiseSuppression ? "noise gated" : "raw audio"}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Listen Toggle */}
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={toggleListen}
|
|
className={`flex items-center gap-1.5 rounded-[8px] px-3 py-1.5 text-xs font-medium transition-all ${
|
|
listenActive
|
|
? "bg-success/15 text-success border border-success/40 glow-pulse"
|
|
: "bg-surface-2 text-ink-muted border border-hairline hover:border-success/30 hover:text-ink"
|
|
}`}
|
|
>
|
|
<Volume2 className="size-3.5" />
|
|
{listenActive ? "MONITOR LIVE" : "MONITOR OFF"}
|
|
</button>
|
|
<span className="font-mono text-[11px] text-ink-muted">
|
|
{listenVol}%
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={150}
|
|
value={listenVol}
|
|
onChange={(e) => {
|
|
const v = Number(e.target.value);
|
|
setListenVol(v);
|
|
listen.setVolume(v / 100);
|
|
}}
|
|
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-surface-2 accent-success"
|
|
/>
|
|
{/* Per-speaker level meters */}
|
|
{listenActive && listen.levels.size > 0 && (
|
|
<div className="mt-2 space-y-1">
|
|
{Array.from(listen.levels.entries()).map(
|
|
([hash, level]) => (
|
|
<div key={hash} className="flex items-center gap-2">
|
|
<span className="font-mono text-[9px] text-ink-faint w-8">
|
|
#{hash.toString(16).slice(-3)}
|
|
</span>
|
|
<div className="h-1 flex-1 overflow-hidden rounded-full bg-surface-2">
|
|
<div
|
|
className="h-full rounded-full bg-success transition-all duration-100"
|
|
style={{
|
|
width: `${Math.min(100, level * 100)}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 border-t border-hairline pt-3">
|
|
<div className="font-mono text-[10px] text-ink-muted">
|
|
CODEC: OPUS 48KHZ · LOW_LATENCY
|
|
{mic.noiseSuppression ? " · NS_ACTIVE" : ""}
|
|
</div>
|
|
</div>
|
|
</GlassPanel>
|
|
</div>
|
|
</div>
|
|
</PageTransition>
|
|
);
|
|
}
|