feat(frontend): group recordings into call sessions + session playback + session WAV export

services/frontend/src/app/(dashboard)/recordings/view.tsx

@@ -9,6 +9,8 @@ import {
   Loader2,
   MessagesSquare,
   Mic,
+  Pause,
+  Play,
   Search,
   Trash2,
   Users,
@@ -99,6 +101,9 @@ export function RecordingsView({
   const [playingId, setPlayingId] = useState<string | null>(null);
   const [exportingIds, setExportingIds] = useState<Set<string>>(new Set());
   const [exportingAll, setExportingAll] = useState(false);
+  const [exportingSessions, setExportingSessions] = useState<Set<string>>(
+    new Set(),
+  );
 
   // Maximum older pages to prevent infinite runaway memory usage
   const MAX_OLDER_PAGES = 10;
@@ -141,6 +146,8 @@ export function RecordingsView({
     ];
   }, [items]);
 
+  const sessions = useMemo(() => groupSessions(items ?? []), [items]);
+
   const loadOlder = useCallback(async () => {
     if (
       !hasMore ||
@@ -249,6 +256,46 @@ export function RecordingsView({
     }
   };
 
+  const onExportSession = async (session: Session) => {
+    if (exportingSessions.has(session.key)) return;
+    const target = session.clips.filter(
+      (r): r is VoiceRecording & { download_url: string } =>
+        Boolean(r.download_url),
+    );
+    if (target.length === 0) return;
+    setExportingSessions((prev) => new Set(prev).add(session.key));
+    try {
+      const buffers = [];
+      for (const r of target) {
+        buffers.push(await decodeAudio(r.download_url));
+      }
+      const merged = concatAudioBuffers(buffers);
+      if (!merged) throw new Error("No audio decoded");
+      const wav = audioBufferToWav(merged);
+      const safeChannel = (session.channelName ?? "session").replace(
+        /[^\w.-]+/g,
+        "_",
+      );
+      downloadBlob(wav, `gmw-session-${safeChannel}-${target.length}clips.wav`);
+      toast({
+        title: `Session exported: ${target.length} clips as one WAV`,
+        tone: "signal",
+      });
+    } catch (e) {
+      toast({
+        title: "Session export failed",
+        description: String(e),
+        tone: "vermilion",
+      });
+    } finally {
+      setExportingSessions((prev) => {
+        const next = new Set(prev);
+        next.delete(session.key);
+        return next;
+      });
+    }
+  };
+
   if (error && !items)
     return <ErrorState error={error} onRetry={() => void mutate()} />;
   if (!items && isLoading)
@@ -439,7 +486,21 @@ export function RecordingsView({
                   ref={deckRef}
                   className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3"
                 >
-                  {(items ?? []).map((r) => {
+                  {sessions.flatMap((session) => {
+                    const sessionPlayable = session.clips.some((c) =>
+                      Boolean(c.download_url),
+                    );
+                    const sessionExporting = exportingSessions.has(session.key);
+                    const header = (
+                      <SessionHeader
+                        key={`session-${session.key}`}
+                        session={session}
+                        playable={sessionPlayable}
+                        exporting={sessionExporting}
+                        onExport={() => void onExportSession(session)}
+                      />
+                    );
+                    const cards = session.clips.map((r) => {
                       const up = uploadStatus(r);
                       const isPlaying = playingId === r.id;
                       const isExporting = exportingIds.has(r.id);
@@ -561,6 +622,8 @@ export function RecordingsView({
                           </div>
                         </div>
                       );
+                    });
+                    return [header, ...cards];
                   })}
                 </div>
 
@@ -749,3 +812,171 @@ function uploadStatus(
   if (r.upload_status === "pending") return { tone: "amber", label: "pending" };
   return { tone: "amber", label: "processing" };
 }
+
+// ── Session grouping ──────────────────────────────────────────────────────
+// Clips become one "meeting session" when they share a channel and the gap
+// between consecutive clips is within SESSION_GAP_MS. items arrive newest-first,
+// so sessions are produced most-recent-first and each keeps its clips in that
+// order (newest → oldest).
+const SESSION_GAP_MS = 120_000;
+
+interface Session {
+  key: string;
+  channelId: string;
+  channelName: string;
+  startTs: number;
+  endTs: number;
+  clips: VoiceRecording[];
+}
+
+function groupSessions(items: VoiceRecording[]): Session[] {
+  const sessions: Session[] = [];
+  for (const r of items) {
+    const last = sessions[sessions.length - 1];
+    if (
+      last &&
+      last.channelId === (r.channel_id ?? "") &&
+      last.startTs - r.created_at <= SESSION_GAP_MS
+    ) {
+      last.clips.push(r);
+      last.startTs = r.created_at;
+    } else {
+      sessions.push({
+        key: r.id,
+        channelId: r.channel_id ?? "",
+        channelName: r.channel_name ?? "voice",
+        startTs: r.created_at,
+        endTs: r.created_at,
+        clips: [r],
+      });
+    }
+  }
+  return sessions;
+}
+
+function sessionEstDurationSec(session: Session): number {
+  const bytes = session.clips.reduce((acc, c) => acc + c.size_bytes, 0);
+  return Math.round((bytes * 8) / 128000);
+}
+
+function sessionTimestamp(session: Session): string {
+  const d = new Date(session.endTs);
+  const s = new Date(session.startTs);
+  const sameDay = d.toDateString() === s.toDateString();
+  const fmt = (x: Date) =>
+    `${x.getMonth() + 1}/${x.getDate()} ${String(x.getHours()).padStart(2, "0")}:${String(
+      x.getMinutes(),
+    ).padStart(2, "0")}`;
+  return sameDay ? fmt(d) : `${fmt(d)} – ${fmt(s)}`;
+}
+
+/** Sequential playback of a session's clips via one <audio> element. */
+function SessionPlayer({
+  clips,
+}: {
+  clips: Array<VoiceRecording & { download_url: string }>;
+}) {
+  const [idx, setIdx] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    const audio = new Audio();
+    audio.preload = "metadata";
+    audioRef.current = audio;
+    const onEnded = () => {
+      setIdx((i) => {
+        const next = i + 1;
+        if (next < clips.length) {
+          audio.src = clips[next].download_url;
+          void audio.play().catch(() => setPlaying(false));
+          return next;
+        }
+        setPlaying(false);
+        return 0;
+      });
+    };
+    audio.addEventListener("ended", onEnded);
+    return () => {
+      audio.removeEventListener("ended", onEnded);
+      audio.pause();
+      audio.src = "";
+    };
+  }, [clips]);
+
+  const toggle = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (playing) {
+      audio.pause();
+      setPlaying(false);
+    } else {
+      if (idx >= clips.length || audio.src === "")
+        audio.src = clips[0].download_url;
+      void audio.play().catch(() => setPlaying(false));
+      setPlaying(true);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      title={
+        playing ? "Pause session playback" : "Play all clips in this session"
+      }
+      className="inline-flex items-center gap-1 rounded-md border border-signal/40 bg-signal/10 px-2 py-1 font-mono text-[10px] text-signal transition-colors hover:bg-signal/20"
+    >
+      {playing ? <Pause className="size-3" /> : <Play className="size-3" />}
+      {playing ? `PAUSE ${idx + 1}/${clips.length}` : "PLAY SESSION"}
+    </button>
+  );
+}
+
+function SessionHeader({
+  session,
+  playable,
+  exporting,
+  onExport,
+}: {
+  session: Session;
+  playable: boolean;
+  exporting: boolean;
+  onExport: () => void;
+}) {
+  return (
+    <div className="col-span-full -mx-1 mb-1 mt-2 flex items-center gap-3 rounded-lg border border-hairline bg-surface px-3 py-2 first:mt-0">
+      <Hash className="size-3.5 shrink-0 text-signal" />
+      <div className="min-w-0 flex-1">
+        <div className="truncate font-mono text-[11px] font-semibold uppercase tracking-wide text-ink">
+          {session.channelName}
+        </div>
+        <div className="font-mono text-[10px] text-ink-faint">
+          {sessionTimestamp(session)} · {session.clips.length} clips ·{" "}
+          {formatDuration(sessionEstDurationSec(session) * 1000)}
+        </div>
+      </div>
+      {playable && (
+        <SessionPlayer
+          clips={session.clips.filter(
+            (c): c is VoiceRecording & { download_url: string } =>
+              Boolean(c.download_url),
+          )}
+        />
+      )}
+      <button
+        type="button"
+        onClick={onExport}
+        disabled={exporting || !playable}
+        className="inline-flex items-center gap-1 rounded-md 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"
+      >
+        {exporting ? (
+          <Loader2 className="size-3 animate-spin" />
+        ) : (
+          <Files className="size-3" />
+        )}
+        {exporting ? "WAV..." : "EXPORT SESSION"}
+      </button>
+    </div>
+  );
+}