Hide unrecoverable P2P tracks after reload and fix queue titles.

Prune playlist entries missing IndexedDB blobs on session restore, enrich names from local metadata, and stop showing raw track ids in the UI.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: lmangani

apps/client/src/components/QueueSortableItem.tsx

@@ -1,4 +1,5 @@
-import { cn, extractFileNameFromUrl, formatTime, trimFileName } from "@/lib/utils";
+import { getAudioSourceDisplayName } from "@/lib/audioDisplay";
+import { cn, formatTime } from "@/lib/utils";
 import { AudioSourceState, useGlobalStore } from "@/store/global";
 import { sendWSRequest } from "@/utils/ws";
 import { ClientActionEnum } from "@beatsync/shared";
@@ -237,9 +238,7 @@ export const QueueSortableItem = ({
               isLoading && "opacity-60"
             )}
           >
-            {sourceState.source.name
-              ? trimFileName(sourceState.source.name)
-              : extractFileNameFromUrl(sourceState.source.url)}
+            {getAudioSourceDisplayName(sourceState.source)}
             {isError && sourceState.error && <span className="text-xs text-red-400 ml-2">({sourceState.error})</span>}
           </div>
         </div>

apps/client/src/hooks/useDocumentTitle.ts

@@ -1,4 +1,4 @@
-import { extractFileNameFromUrl } from "@/lib/utils";
+import { getAudioSourceDisplayName } from "@/lib/audioDisplay";
 import { useGlobalStore } from "@/store/global";
 import { useEffect } from "react";
 
@@ -10,7 +10,7 @@ export const useDocumentTitle = () => {
   useEffect(() => {
     const track = getSelectedTrack();
     if (isPlaying && track) {
-      const songName = extractFileNameFromUrl(track.source.url);
+      const songName = getAudioSourceDisplayName(track.source);
       document.title = `${songName}`;
     } else {
       document.title = "Beatsync";

apps/client/src/lib/audioDisplay.ts

@@ -0,0 +1,17 @@
+import { trimFileName } from "@/lib/utils";
+import { isP2PTrackUrl } from "@/p2p/audio/urls";
+import type { AudioSourceType } from "@beatsync/shared";
+
+/** Human-readable queue / title label — never surface raw P2P track ids. */
+export function getAudioSourceDisplayName(source: AudioSourceType): string {
+  if (source.name) return trimFileName(source.name);
+  if (isP2PTrackUrl(source.url)) return "Track";
+  const parts = source.url.split("/");
+  const last = parts[parts.length - 1];
+  if (!last) return "Track";
+  try {
+    return trimFileName(decodeURIComponent(last));
+  } catch {
+    return trimFileName(last);
+  }
+}

apps/client/src/p2p/__tests__/availableSources.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from "bun:test";
+import { sanitizePlaybackStateForSources } from "../audio/availableSources";
+import type { RoomPlaybackStateCache } from "../roomCache";
+
+describe("sanitizePlaybackStateForSources", () => {
+  const paused: RoomPlaybackStateCache = {
+    type: "paused",
+    audioSource: "p2p://gone",
+    serverTimeToExecute: 0,
+    trackPositionSeconds: 12,
+  };
+
+  test("clears current track when it is not in the playlist", () => {
+    const result = sanitizePlaybackStateForSources(paused, []);
+    expect(result.audioSource).toBe("");
+    expect(result.trackPositionSeconds).toBe(0);
+  });
+
+  test("keeps playback state when the track is still listed", () => {
+    const result = sanitizePlaybackStateForSources(paused, [{ url: "p2p://gone" }]);
+    expect(result.audioSource).toBe("p2p://gone");
+  });
+});

apps/client/src/p2p/audio/availableSources.ts

@@ -0,0 +1,67 @@
+import type { AudioSourceType } from "@beatsync/shared";
+import { getLocalTrack } from "@/p2p/audio/localTracks";
+import type { RoomCacheSnapshot, RoomPlaybackStateCache } from "@/p2p/roomCache";
+import { isP2PTrackUrl, parseP2PTrackId } from "@/p2p/audio/urls";
+
+/** Restore from localStorage / solo reload — require blob in IndexedDB. */
+export type P2PSourceReconcileMode = "local-session" | "room";
+
+/**
+ * Drop P2P entries we cannot play locally. In room mode, keep remote playlist rows
+ * that still carry a display name (peer may send the blob).
+ */
+export async function reconcileP2PAudioSources(
+  sources: AudioSourceType[],
+  mode: P2PSourceReconcileMode
+): Promise<AudioSourceType[]> {
+  const result: AudioSourceType[] = [];
+
+  for (const source of sources) {
+    if (!isP2PTrackUrl(source.url)) {
+      result.push(source);
+      continue;
+    }
+
+    const trackId = parseP2PTrackId(source.url);
+    if (!trackId) continue;
+
+    const record = await getLocalTrack(trackId);
+    if (mode === "local-session" && !record) continue;
+    if (mode === "room" && !record && !source.name) continue;
+
+    result.push({
+      ...source,
+      name: source.name ?? record?.fileName,
+    });
+  }
+
+  return result;
+}
+
+export function sanitizePlaybackStateForSources(
+  playbackState: RoomPlaybackStateCache,
+  sources: AudioSourceType[]
+): RoomPlaybackStateCache {
+  if (!playbackState.audioSource) return playbackState;
+  if (sources.some((s) => s.url === playbackState.audioSource)) {
+    return playbackState;
+  }
+  return {
+    type: "paused",
+    audioSource: "",
+    serverTimeToExecute: 0,
+    trackPositionSeconds: 0,
+  };
+}
+
+export async function prepareRoomCacheSnapshot(
+  snapshot: RoomCacheSnapshot,
+  mode: P2PSourceReconcileMode
+): Promise<RoomCacheSnapshot> {
+  const audioSources = await reconcileP2PAudioSources(snapshot.audioSources, mode);
+  return {
+    ...snapshot,
+    audioSources,
+    playbackState: sanitizePlaybackStateForSources(snapshot.playbackState, audioSources),
+  };
+}

apps/client/src/store/global.tsx

@@ -5,6 +5,7 @@ import { getKickBuffer } from "@/components/dashboard/Metronome";
 import { IS_DEMO_MODE } from "@/lib/demo";
 import { IS_P2P_MODE } from "@/lib/p2p";
 import { getLocalTrack } from "@/p2p/audio/localTracks";
+import { reconcileP2PAudioSources } from "@/p2p/audio/availableSources";
 import { loadP2PTrackArrayBuffer } from "@/p2p/audio/transfer";
 import { isP2PTrackUrl, parseP2PTrackId } from "@/p2p/audio/urls";
 import { getApiUrl } from "@/lib/urls";
@@ -1492,6 +1493,16 @@ export const useGlobalStore = create<GlobalState>((set, get) => {
         await initializationMutex.waitForUnlock();
       }
 
+      let playlistSources = sources;
+      if (IS_P2P_MODE) {
+        playlistSources = await reconcileP2PAudioSources(sources, "room");
+      }
+
+      let activeSource = currentAudioSource;
+      if (activeSource && !playlistSources.some((s) => s.url === activeSource)) {
+        activeSource = undefined;
+      }
+
       const state = get();
 
       // Clean up buffer access queue - remove URLs that are no longer in the playlist
@@ -1504,22 +1515,22 @@ export const useGlobalStore = create<GlobalState>((set, get) => {
       const newQueue: string[] = [];
 
       // Add current/selected track first (highest priority)
-      if (currentAudioSource && sources.some((s) => s.url === currentAudioSource)) {
-        newQueue.push(currentAudioSource);
-      } else if (state.selectedAudioUrl && sources.some((s) => s.url === state.selectedAudioUrl)) {
+      if (activeSource && playlistSources.some((s) => s.url === activeSource)) {
+        newQueue.push(activeSource);
+      } else if (state.selectedAudioUrl && playlistSources.some((s) => s.url === state.selectedAudioUrl)) {
         newQueue.push(state.selectedAudioUrl);
       }
 
       // Add remaining tracks in playlist order
-      sources.forEach((source) => {
+      playlistSources.forEach((source) => {
         if (!newQueue.includes(source.url)) {
           newQueue.push(source.url);
         }
       });
 
       // Create new audioSources array (preserving loaded buffers for tracks still in playlist)
       const existingByUrl = new Map(state.audioSources.map((as) => [as.source.url, as]));
-      const newAudioSources: AudioSourceState[] = sources.map((source) => {
+      const newAudioSources: AudioSourceState[] = playlistSources.map((source) => {
         const existing = existingByUrl.get(source.url);
         if (existing) {
           return existing;
@@ -1534,15 +1545,15 @@ export const useGlobalStore = create<GlobalState>((set, get) => {
       set({ audioSources: newAudioSources, bufferAccessQueue: newQueue });
 
       // If currentAudioSource is provided from server, update selectedAudioUrl and start loading it
-      if (currentAudioSource) {
-        set({ selectedAudioUrl: currentAudioSource });
-        loadAudioSource(currentAudioSource);
+      if (activeSource) {
+        set({ selectedAudioUrl: activeSource });
+        loadAudioSource(activeSource);
       }
 
       // In demo mode, eagerly load remaining sources if sync is done.
       // In prod, sources load on-demand when the user selects them.
       if (IS_DEMO_MODE && get().isSynced) {
-        eagerLoadIdleSources({ skip: currentAudioSource });
+        eagerLoadIdleSources({ skip: activeSource });
       }
 
       // Check if the currently selected/playing track was removed

apps/client/src/store/p2pConnection.ts

@@ -3,6 +3,7 @@
 import { joinRoom } from "trystero";
 
 type TrysteroRoom = ReturnType<typeof joinRoom>;
+import { prepareRoomCacheSnapshot } from "@/p2p/audio/availableSources";
 import { initP2PAudioTransfer, pushLocalTracksToPeer, resetP2PAudioTransfer } from "@/p2p/audio/transfer";
 import { P2PRoomCoordinator } from "@/p2p/host/P2PRoomCoordinator";
 import { parseP2PEnvelope } from "@/p2p/protocol";
@@ -167,11 +168,6 @@ export const useP2PConnectionStore = create<P2PConnectionState>()((set, get) =>
       isAdmin: true,
     });
 
-    const cached = loadRoomCache(roomCode);
-    if (cached) {
-      coordinator.applySnapshot(cached);
-    }
-
     getEnvelopeAction((data) => {
       try {
         get().handleIncomingEnvelope(parseP2PEnvelope(data));
@@ -204,8 +200,18 @@ export const useP2PConnectionStore = create<P2PConnectionState>()((set, get) =>
       isReady: false,
     });
 
-    const finishAttach = () => {
+    const finishAttach = async () => {
       if (attachedRoom !== room) return;
+
+      const cached = loadRoomCache(roomCode);
+      if (cached) {
+        const prepared = await prepareRoomCacheSnapshot(cached, "local-session");
+        coordinator.applySnapshot(prepared);
+        if (prepared.audioSources.length !== cached.audioSources.length) {
+          saveRoomCache(roomCode, prepared);
+        }
+      }
+
       set({ isReady: true });
       const { onServerMessage } = get();
       if (!onServerMessage) return;
@@ -216,7 +222,7 @@ export const useP2PConnectionStore = create<P2PConnectionState>()((set, get) =>
       get().sendRequest({ type: "SYNC" });
     };
 
-    queueMicrotask(finishAttach);
+    void finishAttach();
   },
 
   detachSession: () => {
@@ -290,19 +296,23 @@ export const useP2PConnectionStore = create<P2PConnectionState>()((set, get) =>
       if (roomCode) {
         const local = loadRoomCache(roomCode);
         const { merged, acceptedRemote } = mergeRoomCaches(local, envelope.snapshot as RoomCacheSnapshot);
-        saveRoomCache(roomCode, merged);
 
         if (!acceptedRemote) {
+          saveRoomCache(roomCode, merged);
           if (computeCacheRichness(merged) > envelope.richness && sendEnvelopeImpl) {
             sendEnvelopeImpl(coordinator.buildStateSnapshotEnvelope(selfId), envelope.fromPeerId);
           }
           return;
         }
 
-        coordinator.applySnapshot(merged);
-        if (onServerMessage) {
-          coordinator.hydrateLocalConsumer(onServerMessage);
-        }
+        void prepareRoomCacheSnapshot(merged, "room").then((prepared) => {
+          coordinator.applySnapshot(prepared);
+          if (roomCode) saveRoomCache(roomCode, prepared);
+          if (onServerMessage) {
+            coordinator.hydrateLocalConsumer(onServerMessage);
+          }
+        });
+        return;
       }
       return;
     }