-
-
Queue is empty
-
- Paste a URL above to start playback.
+ {/* Up next — right dock */}
+
+
+ up next
+
+ {queueList.length} track{queueList.length === 1 ? "" : "s"}
+ {queueTotal ? ` · ${formatDuration(queueTotal)}` : ""}
+
+
+
+ {queueList.length === 0 ? (
+
+
+
+ Queue is empty
+
+
+ Paste a URL to start playback.
+
-
- {queueList.map((item, i) => {
- const isNext = i === 0 && playing;
- return (
-
-
{i + 1}
- {item.thumbnailUrl ? (
- // biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
-
- ) : (
-
-
+ ) : (
+
+ {queueList.map((item, i) => {
+ const isNext = i === 0 && playing;
+ return (
+
+
+ {i + 1}
- )}
-
-
- {item.title}
+ {item.thumbnailUrl ? (
+ // biome-ignore lint/performance/noImgElement: external CDN thumbnails, next/image needs remote allowlist
+
+ ) : (
+
+
+
+ )}
+
+
+ {item.title}
+
+
+ {item.source}
+
-
- {item.source}
-
-
- {isNext && (
-
- up next
-
- )}
-
- {item.mode ?? "music"}
-
- {formatDuration(item.durationMs) && (
-
+ {isNext ? (
+
+ up next
+
+ ) : null}
+
{formatDuration(item.durationMs)}
- )}
-
- );
- })}
-
- )}
-
+
+ )}
+
);
}
diff --git a/services/frontend/src/app/(dashboard)/recordings/view.tsx b/services/frontend/src/app/(dashboard)/recordings/view.tsx
index 4268b809..839a9602 100644
--- a/services/frontend/src/app/(dashboard)/recordings/view.tsx
+++ b/services/frontend/src/app/(dashboard)/recordings/view.tsx
@@ -1,18 +1,25 @@
"use client";
+/**
+ * Recordings scene — voice clips orbit as a timeline ring on the stage;
+ * the clip archive docks right with inline audio players, playing clip
+ * highlighted both in the dock and on the sky.
+ */
import { Download, Hash, Headphones, Loader2, Trash2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import { useAmbient } from "@/components/ambient/ambient-context";
import {
Avatar,
Badge,
Button,
- GlassCard,
- GlassPanel,
Skeleton,
toast,
} from "@/components/primitives";
-import { EmptyState, ErrorState, SectionHeader } from "@/components/shared";
+import { EmptyState, ErrorState } from "@/components/shared";
+import {
+ useSceneFocusSetter,
+ useScenePublish,
+} from "@/components/shell/scene-graph-context";
import {
NowPlayingChip,
RecordingAudioPlayer,
@@ -22,11 +29,29 @@ import {
useRecordings,
useRecordingsWsSync,
} from "@/hooks";
+import type { ConstellationGraph } from "@/lib/constellation/graph";
import { formatBytes, formatRelativeTime } from "@/lib/format";
import type { VoiceRecording } from "@/lib/types";
import { staggerDelay } from "@/lib/utils";
import { useWebSocket } from "@/lib/ws/context";
+function recordingsGraph(items: VoiceRecording[]): ConstellationGraph {
+ const recent = items.slice(0, 28);
+ return {
+ nodes: [
+ { id: "archive", label: "archive", kind: "guild", value: 1 },
+ ...recent.map((r) => ({
+ id: `rec:${r.id}`,
+ label: r.username,
+ kind: "media" as const,
+ value: 0.5,
+ href: undefined,
+ })),
+ ],
+ edges: recent.map((r) => ({ source: "archive", target: `rec:${r.id}` })),
+ };
+}
+
export function RecordingsView({
initialItems,
}: {
@@ -37,8 +62,25 @@ export function RecordingsView({
const del = useDeleteRecording();
useRecordingsWsSync(ws);
const ambient = useAmbient();
+ const publish = useScenePublish();
+ const setFocus = useSceneFocusSetter();
const [playingId, setPlayingId] = useState
(null);
+ const list = items ?? [];
+
+ const graph = useMemo(() => recordingsGraph(list), [list]);
+ useEffect(() => {
+ publish({ graph, focus: playingId ? `rec:${playingId}` : null });
+ }, [graph, playingId, publish]);
+
+ useEffect(
+ () => () => {
+ publish({ graph: { nodes: [], edges: [] }, focus: null });
+ setFocus(null);
+ },
+ [publish, setFocus],
+ );
+
useEffect(() => {
ambient.set("signal", 0.3, "recordings");
}, [ambient]);
@@ -59,14 +101,17 @@ export function RecordingsView({
if (error && !items) return ;
if (!items && isLoading)
return (
-
+
-
- {Array.from({ length: 6 }).map((_, i) => (
-
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
@@ -75,118 +120,168 @@ export function RecordingsView({
-
+
))}
);
return (
-
-
- {(items ?? []).length} clips
+
+ {/* Archive dock — right */}
+
+
+
voice captures
+
+ {list.length} clips
- }
- />
- {(items ?? []).length === 0 ? (
-
}
- title="No recordings"
- description="Voice clips captured by the bot appear here."
- />
- ) : (
-
- {(items ?? []).map((r, i) => {
- const up = uploadStatus(r);
- const isPlaying = playingId === r.id;
- return (
-
-
-
-
-
- {r.username}
-
-
-
-
- {r.channel_name ?? "voice"}
-
- ·
-
- {formatRelativeTime(r.created_at)}
-
-
-
- {isPlaying &&
}
- {up && !isPlaying &&
{up.label}}
-
- {formatBytes(r.size_bytes)}
-
-
-
- {r.upload_status === "pending"
- ? "Upload pending…"
- : r.upload_error
- ? r.upload_error
- : "Processing…"}
-
- )}
-
-
- {r.download_url && (
-
- Download
-
- )}
-
-
- );
- })}
- )}
-
+
+ {list.length === 0 ? (
+
}
+ title="No recordings"
+ description="Voice clips captured by the bot appear here."
+ />
+ ) : (
+
+ {list.map((r, i) => {
+ const up = uploadStatus(r);
+ const isPlaying = playingId === r.id;
+ return (
+
+
+
+
+
+ {r.username}
+
+
+
+
+ {r.channel_name ?? "voice"}
+
+ ·
+ {formatRelativeTime(r.created_at)}
+
+
+ {isPlaying ?
: null}
+ {up && !isPlaying ? (
+
{up.label}
+ ) : null}
+
+ {formatBytes(r.size_bytes)}
+
+
+
+ {r.upload_status === "pending"
+ ? "Upload pending…"
+ : r.upload_error
+ ? r.upload_error
+ : "Processing…"}
+
+ )}
+
+
+ {r.download_url ? (
+
+ Download
+
+ ) : null}
+
+
+ );
+ })}
+
+ )}
+
+
+
+ {/* Mobile dock */}
+
+ {list.length === 0 ? (
+
+ ) : (
+ list.map((r) => (
+
+
+ {r.username} · {formatRelativeTime(r.created_at)}
+
+ {r.download_url ? (
+
+ setPlayingId((prev) =>
+ active ? r.id : prev === r.id ? null : prev,
+ )
+ }
+ />
+ ) : (
+
+ processing…
+
+ )}
+
+ ))
+ )}
+
+
+ {/* Hint */}
+
+ setiap klip adalah simpel di cincin timeline — yang sedang play menyala
+ di langit
+
+
+ menyetel ulang stage…
+
);
const connected = status?.connected ?? false;
@@ -118,43 +161,94 @@ export function VoiceView({
};
return (
-
-
-
-
{
- setGuildId(g);
- setChannelId(c);
- }}
- />
-
- {connected ? (
-
- ) : (
-
- )}
-
+ {/* Stage presence — top-center whisper */}
+
+
+ {speakers.length === 0 ? (
+ }
+ title={connected ? "Silent right now" : "Not connected"}
+ description={
+ connected
+ ? "Speakers appear as they talk."
+ : "Connect to a voice channel to see presence."
+ }
+ />
+ ) : (
+
+ )}
+
-
+ {/* Connections — right */}
+
+ links · {speakers.length} present
+
+ {(status?.connections ?? []).map((c) => (
+
+
+ {c.channelName}
+
+ {new Date(c.connectedAt).toLocaleTimeString()}
+
+
+ ))}
+ {(status?.connections ?? []).length === 0 ? (
+
+ no active links
+
+ ) : null}
+
+ channel: {status?.activeChannelName ?? "—"}
+
+
+
+ {/* Console — bottom-left */}
+
+ {
+ setGuildId(g);
+ setChannelId(c);
+ }}
+ />
+
+ {connected ? (
+
+ ) : (
+
+ )}
:
}
{micOn ? "Mic live" : "Push-to-talk"}
- {micOn && (
-
-
-
-
- )}
-
-
- {speakers.length} present
-
- }
- />
- {speakers.length === 0 ? (
- }
- title={connected ? "Silent right now" : "Not connected"}
- description={
- connected
- ? "Speakers appear as they talk."
- : "Connect to a voice channel to see presence."
- }
+ {micOn ? (
+
+
+
+
+ ) : null}
+ {listen.active ? (
+
+
+
+
+ ) : null}
+
+
+
);
}