@freqhole/playlistz 0.0.1

package/e2e/all-playlists.spec.ts

@@ -0,0 +1,220 @@
+// e2e: all-playlists panel - hamburger button, row interactions, keyboard nav.
+
+import { test, expect } from "@playwright/test";
+import {
+  resetAppState,
+  createPlaylistViaUI,
+  addSongs,
+} from "./helpers.js";
+
+test.beforeEach(async ({ page }) => {
+  await resetAppState(page);
+});
+
+// --- panel open / close ---
+
+test("hamburger opens the all-playlists panel", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  // rename so we can identify it
+  await page.getByTestId("input-playlist-title").fill("alpha");
+  await page.getByTestId("input-playlist-title").blur();
+
+  // create a second playlist so the panel has something to show
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("btn-new-playlist").click();
+  await page.getByTestId("btn-edit-playlist").waitFor({ timeout: 5000 });
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("new playlist");
+  await page.getByTestId("input-playlist-title").fill("beta");
+  await page.getByTestId("input-playlist-title").blur();
+
+  // open panel again - should see the panel
+  await page.getByTestId("btn-all-playlists").click();
+  await expect(page.getByTestId("all-playlists-panel")).toBeVisible();
+});
+
+test("escape closes the all-playlists panel", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await page.getByTestId("btn-all-playlists").click();
+  await expect(page.getByTestId("all-playlists-panel")).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(page.getByTestId("all-playlists-panel")).not.toBeVisible();
+});
+
+test("hamburger button closes the all-playlists panel when open", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await page.getByTestId("btn-all-playlists").click();
+  await expect(page.getByTestId("all-playlists-panel")).toBeVisible();
+  await page.getByTestId("btn-all-playlists").click();
+  await expect(page.getByTestId("all-playlists-panel")).not.toBeVisible();
+});
+
+// --- row contents ---
+
+test("selected playlist is not shown in panel rows", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await page.getByTestId("input-playlist-title").fill("selected one");
+  await page.getByTestId("input-playlist-title").blur();
+  await page.waitForTimeout(300);
+
+  // create a second playlist so panel has rows to show
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("btn-new-playlist").click();
+  await page.getByTestId("btn-edit-playlist").waitFor();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("new playlist");
+  await page.getByTestId("input-playlist-title").fill("other one");
+  await page.getByTestId("input-playlist-title").blur();
+  await page.waitForTimeout(300);
+
+  // go back to selected one
+  await page.getByTestId("btn-all-playlists").click();
+  // find and click "selected one" row
+  await page.getByText("selected one").first().click();
+  await page.waitForTimeout(300);
+
+  // open panel - "selected one" should NOT appear in the row list
+  await page.getByTestId("btn-all-playlists").click();
+  // the mini header shows the current playlist title ("selected one")
+  // but it should NOT appear as a clickable row
+  const rows = page.locator("[title*='play selected one']");
+  await expect(rows).toHaveCount(0);
+  // "other one" should be present as a row
+  await expect(page.getByText("other one").first()).toBeVisible();
+});
+
+test("all other playlists are shown in panel rows", async ({ page }) => {
+  // create three playlists
+  await createPlaylistViaUI(page);
+  await page.getByTestId("input-playlist-title").fill("playlist a");
+  await page.getByTestId("input-playlist-title").blur();
+
+  for (const name of ["playlist b", "playlist c"]) {
+    await page.getByTestId("btn-all-playlists").click();
+    await page.getByTestId("btn-new-playlist").click();
+    await page.getByTestId("btn-edit-playlist").waitFor();
+    await expect(page.getByTestId("input-playlist-title")).toHaveValue("new playlist");
+    await page.getByTestId("input-playlist-title").fill(name);
+    await page.getByTestId("input-playlist-title").blur();
+    // wait for the doc to reflect the new title before navigating away
+    await expect(page.getByTestId("input-playlist-title")).toHaveValue(name);
+  }
+
+  // currently selected is "playlist c" - panel should show a and b
+  await page.getByTestId("btn-all-playlists").click();
+  await expect(page.getByText("playlist a")).toBeVisible();
+  await expect(page.getByText("playlist b")).toBeVisible();
+});
+
+// --- row navigation ---
+
+test("clicking a row selects the playlist and closes the panel", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await page.getByTestId("input-playlist-title").fill("first");
+  await page.getByTestId("input-playlist-title").blur();
+  await page.waitForTimeout(300);
+
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("btn-new-playlist").click();
+  await page.getByTestId("btn-edit-playlist").waitFor();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("new playlist");
+  await page.getByTestId("input-playlist-title").fill("second");
+  await page.getByTestId("input-playlist-title").blur();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("second");
+
+  // open panel and click "first"
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByText("first").first().click();
+
+  // panel should close
+  await expect(page.getByTestId("all-playlists-panel")).not.toBeVisible();
+  // "first" should now be the selected playlist shown in the title area
+  await expect(page.getByTestId("input-playlist-title").or(page.getByText("first").first())).toBeVisible();
+});
+
+test("edit button in row opens edit panel for that playlist", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await page.getByTestId("input-playlist-title").fill("edit me");
+  await page.getByTestId("input-playlist-title").blur();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("edit me");
+
+  // create a second playlist as the "currently selected" one
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("btn-new-playlist").click();
+  await page.getByTestId("btn-edit-playlist").waitFor();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("new playlist");
+  await page.getByTestId("input-playlist-title").fill("currently selected");
+  await page.getByTestId("input-playlist-title").blur();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("currently selected");
+
+  // open panel, hover over "edit me" row and click its edit button
+  await page.getByTestId("btn-all-playlists").click();
+  // wait for panel rows to appear
+  const panel = page.getByTestId("all-playlists-panel");
+  await panel.waitFor({ timeout: 3000 });
+  const row = panel.getByText("edit me").first();
+  await row.hover();
+  await panel.getByTestId("btn-edit-playlist-row").click();
+
+  // panel closes, edit panel opens for "edit me"
+  await expect(page.getByTestId("all-playlists-panel")).not.toBeVisible();
+  // the edit input should show "edit me"
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("edit me");
+});
+
+test("share button in row opens share panel for that playlist", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await page.getByTestId("input-playlist-title").fill("share me");
+  await page.getByTestId("input-playlist-title").blur();
+  await page.waitForTimeout(300);
+
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("btn-new-playlist").click();
+  await page.getByTestId("btn-edit-playlist").waitFor();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("new playlist");
+  await page.getByTestId("input-playlist-title").fill("currently selected");
+  await page.getByTestId("input-playlist-title").blur();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("currently selected");
+
+  await page.getByTestId("btn-all-playlists").click();
+  const panel = page.getByTestId("all-playlists-panel");
+  await panel.waitFor({ timeout: 3000 });
+  const row = panel.getByText("share me").first();
+  await row.hover();
+  await panel.getByTestId("btn-share-playlist-row").click();
+
+  // share panel should be open
+  await expect(page.getByTestId("share-panel")).toBeVisible();
+});
+
+// --- new playlist ---
+
+test("new playlist row creates a playlist and closes the panel", async ({ page }) => {
+  await createPlaylistViaUI(page);
+
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("btn-new-playlist").click();
+
+  // panel should close and new playlist edit mode should be open
+  await expect(page.getByTestId("all-playlists-panel")).not.toBeVisible();
+  await expect(page.getByTestId("btn-edit-playlist")).toBeVisible();
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("new playlist");
+});
+
+// --- song count / panel with songs ---
+
+test("row shows song count for playlists with songs", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await addSongs(page, 3);
+  await page.getByTestId("input-playlist-title").fill("has songs");
+  await page.getByTestId("input-playlist-title").blur();
+  await page.waitForTimeout(300);
+
+  // create a second (selected) playlist
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("btn-new-playlist").click();
+  await page.getByTestId("btn-edit-playlist").waitFor();
+  await page.waitForTimeout(300);
+
+  // open panel - "has songs" row should show "3 songz"
+  await page.getByTestId("btn-all-playlists").click();
+  await expect(page.getByTestId("row-song-count").first()).toContainText("3");
+});

package/e2e/audio-player.spec.ts

@@ -0,0 +1,226 @@
+// e2e: audio player behaviour - autoplay next, errors, blob fetch states.
+//
+// most tests use the dev hook helpers (seekTo, triggerTrackEnd, etc.) from
+// e2e/helpers.ts to drive playback events without waiting for real audio.
+//
+// one "real playthrough" test lets a 2s fixture actually finish to prove
+// autoplay-next works end-to-end.
+//
+// blob-fetch state tests use mockBlobFetch + evictBlob to simulate p2p
+// transfers without a real peer connection.
+
+import { test, expect } from "@playwright/test";
+import { readFileSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  resetAppState,
+  createPlaylistViaUI,
+  addSongs,
+  seekTo,
+  triggerTrackEnd,
+  triggerAudioError,
+  mockBlobFetch,
+  clearMockBlobFetch,
+  evictBlob,
+  currentSong,
+} from "./helpers.js";
+
+const FIXTURES_DIR = join(dirname(fileURLToPath(import.meta.url)), "fixtures");
+
+test.beforeEach(async ({ page }) => {
+  await resetAppState(page);
+});
+
+// --- autoplay / queue advance ---
+
+test("autoplay next: seekTo near end advances to next song", async ({
+  page,
+}) => {
+  await createPlaylistViaUI(page);
+  await addSongs(page, 3, 2);
+
+  await page.getByText("song-00").dblclick();
+  await expect(page.getByTestId("btn-play-playlist")).toHaveAttribute(
+    "aria-pressed",
+    "true",
+    { timeout: 10000 }
+  );
+  await expect
+    .poll(() => currentSong(page), { timeout: 8000 })
+    .toBe("song-00");
+
+  await seekTo(page, 1.9); // 2s song, seek to 0.1s before end
+
+  await expect
+    .poll(() => currentSong(page), { timeout: 8000 })
+    .toBe("song-01");
+});
+
+test("autoplay next: triggerTrackEnd advances queue", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await addSongs(page, 3, 2);
+
+  await page.getByText("song-00").dblclick();
+  await expect
+    .poll(() => currentSong(page), { timeout: 10000 })
+    .toBe("song-00");
+
+  await triggerTrackEnd(page);
+
+  await expect
+    .poll(() => currentSong(page), { timeout: 8000 })
+    .toBe("song-01");
+});
+
+test("end of playlist: last song ends, player stops", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await addSongs(page, 2, 2);
+
+  await page.getByText("song-01").dblclick();
+  await expect(page.getByTestId("btn-play-playlist")).toHaveAttribute(
+    "aria-pressed",
+    "true",
+    { timeout: 10000 }
+  );
+
+  await triggerTrackEnd(page);
+
+  // playback stops - button aria-pressed returns to "false"
+  await expect(page.getByTestId("btn-play-playlist")).toHaveAttribute(
+    "aria-pressed",
+    "false",
+    { timeout: 8000 }
+  );
+});
+
+// --- audio player error states ---
+
+test("real playthrough: 2s fixture autoadvances without hooks", async ({
+  page,
+}) => {
+  test.slow();
+  await createPlaylistViaUI(page);
+  await addSongs(page, 2, 2);
+
+  await page.getByText("song-00").dblclick();
+  await expect
+    .poll(() => currentSong(page), { timeout: 10000 })
+    .toBe("song-00");
+
+  // let it play through naturally
+  await expect
+    .poll(() => currentSong(page), { timeout: 12000 })
+    .toBe("song-01");
+});
+
+// --- audio player error states ---
+
+test("triggerAudioError: player recovers without crash", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await addSongs(page, 2, 2);
+
+  await page.getByText("song-00").dblclick();
+  await expect(page.getByTestId("btn-play-playlist")).toHaveAttribute(
+    "aria-pressed",
+    "true",
+    { timeout: 10000 }
+  );
+
+  await triggerAudioError(page, 4);
+
+  // app must stay responsive
+  await expect(page.getByTestId("btn-play-playlist")).toBeVisible({
+    timeout: 5000,
+  });
+  await expect(page.getByTestId("song-duration").first()).toBeVisible();
+});
+
+// --- blob fetch states (mocked p2p transport) ---
+
+// import a committed fixture file via the __processFiles dev hook
+async function importFixture(
+  page: Parameters<typeof evictBlob>[0],
+  filename: string
+): Promise<void> {
+  const bytes = readFileSync(join(FIXTURES_DIR, filename));
+  const result = await page.evaluate(
+    async ({ b64, name }: { b64: string; name: string }) => {
+      const bin = atob(b64);
+      const arr = new Uint8Array(bin.length);
+      for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+      const file = new File([arr], name, { type: "audio/wav" });
+      const hook = (
+        window as Window & { __processFiles?: (files: File[]) => Promise<void> }
+      ).__processFiles;
+      if (!hook) return "hook-missing";
+      await hook([file]);
+      return "ok";
+    },
+    { b64: Buffer.from(bytes).toString("base64"), name: filename }
+  );
+  if (result !== "ok") throw new Error(`importFixture failed: ${result}`);
+}
+
+test("mockBlobFetch delayed: song row shows downloading state @mock", async ({
+  page,
+}) => {
+  await createPlaylistViaUI(page);
+  await importFixture(page, "tone-440hz-2s.wav");
+  await expect(page.getByText("tone-440hz-2s")).toBeVisible({ timeout: 10000 });
+
+  const durationCell = page.getByTestId("song-duration").first();
+  await durationCell.waitFor({ timeout: 8000 });
+  const sha256 = await durationCell.getAttribute("data-sha256");
+
+  if (sha256) {
+    await evictBlob(page, sha256);
+    await mockBlobFetch(page, { type: "delayed", ms: 2000 });
+  }
+
+  await page.getByText("tone-440hz-2s").dblclick();
+
+  if (sha256) {
+    await expect(durationCell).toHaveAttribute(
+      "data-download-state",
+      "downloading",
+      { timeout: 5000 }
+    );
+    await expect(page.getByTestId("btn-play-playlist")).toHaveAttribute(
+      "aria-busy",
+      "true",
+      { timeout: 5000 }
+    );
+    // after 2s delay resolves, downloading state clears
+    await expect(durationCell).not.toHaveAttribute(
+      "data-download-state",
+      "downloading",
+      { timeout: 8000 }
+    );
+    await clearMockBlobFetch(page);
+  }
+});
+
+test("mockBlobFetch error: song row shows error state @mock", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await importFixture(page, "tone-440hz-2s.wav");
+  await expect(page.getByText("tone-440hz-2s")).toBeVisible({ timeout: 10000 });
+
+  const durationCell = page.getByTestId("song-duration").first();
+  await durationCell.waitFor();
+  const sha256 = await durationCell.getAttribute("data-sha256");
+
+  if (sha256) {
+    await evictBlob(page, sha256);
+    await mockBlobFetch(page, { type: "error", code: "not_found" });
+  }
+
+  await page.getByText("tone-440hz-2s").dblclick();
+
+  if (sha256) {
+    await expect(durationCell).toHaveAttribute("data-download-state", "error", {
+      timeout: 8000,
+    });
+    await clearMockBlobFetch(page);
+  }
+});

package/e2e/collaborative-features.spec.ts

@@ -0,0 +1,229 @@
+// e2e: single-browser tests for the collaborative sharing ui.
+//
+// covers: subscribed (read-only) playlist mode, fork flow,
+// edit/share buttons exiting all-playlists view, and remoteName
+// display in playlist rows.
+//
+// all tests here use the __patchDocIndexEntry / __getDocIndexEntries dev hooks
+// to inject remote-source state without needing a real p2p connection.
+
+import { test, expect } from "@playwright/test";
+import {
+  resetAppState,
+  createPlaylistViaUI,
+  addSongs,
+  getDocIndexEntries,
+  patchDocIndexEntry,
+} from "./helpers.js";
+
+test.beforeEach(async ({ page }) => {
+  await resetAppState(page);
+});
+
+// get the docId of the only/first playlist in the docIndex
+async function firstDocId(page: import("@playwright/test").Page): Promise<string> {
+  const entries = await getDocIndexEntries(page);
+  const id = entries[0]?.docId;
+  if (!id) throw new Error("no docIndex entry found");
+  return id;
+}
+
+// patch remoteNodeId onto the current playlist and wait for the reactive
+// docIndex effect to propagate (no reload needed)
+async function makeSubscribed(
+  page: import("@playwright/test").Page,
+  docId: string,
+  opts: { remoteNodeId?: string; remoteName?: string } = {}
+): Promise<void> {
+  await patchDocIndexEntry(page, docId, {
+    remoteNodeId: opts.remoteNodeId ?? "a".repeat(64),
+    remoteName: opts.remoteName,
+  });
+  // give the createLiveQuery broadcast + reactive effect time to propagate
+  await page.waitForTimeout(500);
+}
+
+// --- subscribed (read-only) mode ---
+
+test("subscribed playlist disables title input", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  const docId = await firstDocId(page);
+  await makeSubscribed(page, docId);
+  await expect(page.getByTestId("input-playlist-title")).toBeDisabled({
+    timeout: 5000,
+  });
+  await expect(page.getByTestId("input-playlist-description")).toBeDisabled();
+});
+
+test("subscribed playlist hides remove-song button", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await addSongs(page, 1);
+
+  // the remove button is in the hover overlay - hover the row to reveal it
+  const songRow = page.getByTestId("song-row").first();
+  await songRow.waitFor({ timeout: 10000 });
+  await songRow.hover();
+  await expect(page.getByTestId("btn-remove-song").first()).toBeVisible({
+    timeout: 3000,
+  });
+
+  const docId = await firstDocId(page);
+  await makeSubscribed(page, docId);
+
+  await expect(page.getByTestId("btn-remove-song")).toHaveCount(0, {
+    timeout: 5000,
+  });
+});
+
+test("subscribed playlist shows fork and request-collaboration in edit panel", async ({
+  page,
+}) => {
+  await createPlaylistViaUI(page);
+  const docId = await firstDocId(page);
+  await makeSubscribed(page, docId, { remoteName: "peer-dave" });
+
+  await page.getByTestId("btn-edit-playlist").click();
+  await page.getByTestId("edit-panel").waitFor({ timeout: 5000 });
+
+  await expect(page.getByTestId("btn-fork-playlist")).toBeVisible();
+  await expect(page.getByTestId("btn-request-collaboration")).toBeVisible();
+  // banner should mention the remote name
+  await expect(page.getByTestId("edit-panel")).toContainText("peer-dave");
+});
+
+// --- fork flow ---
+
+test("fork creates a new local playlist and selects it", async ({ page }) => {
+  await createPlaylistViaUI(page);
+
+  const firstTitle = "original-playlist";
+  await page.getByTestId("input-playlist-title").click({ clickCount: 3 });
+  await page.getByTestId("input-playlist-title").fill(firstTitle);
+  await page.getByTestId("input-playlist-title").blur();
+  await page.waitForTimeout(300);
+
+  const docId = await firstDocId(page);
+  await makeSubscribed(page, docId);
+
+  // confirm subscribed - title should be disabled
+  await expect(page.getByTestId("input-playlist-title")).toBeDisabled({
+    timeout: 5000,
+  });
+
+  // open edit panel and fork
+  await page.getByTestId("btn-edit-playlist").click();
+  await page.getByTestId("edit-panel").waitFor({ timeout: 5000 });
+  await page.getByTestId("btn-fork-playlist").click();
+
+  // after fork: a new local playlist is selected.
+  // the subscribed banner (with fork button) should disappear.
+  await expect(page.getByTestId("btn-fork-playlist")).not.toBeVisible({
+    timeout: 8000,
+  });
+
+  // close the edit panel, then verify title is enabled on the forked playlist
+  await page.keyboard.press("Escape");
+  await expect(page.getByTestId("input-playlist-title")).toBeEnabled({
+    timeout: 5000,
+  });
+
+  // open all-playlists - the original (now subscribed/forked) should appear in the list
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("all-playlists-panel").waitFor({ timeout: 5000 });
+  await expect(
+    page.getByTestId("all-playlists-panel").getByText(firstTitle)
+  ).toBeVisible();
+});
+
+test("forked playlist is editable (title input enabled)", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  const docId = await firstDocId(page);
+  await makeSubscribed(page, docId);
+
+  await expect(page.getByTestId("input-playlist-title")).toBeDisabled({
+    timeout: 5000,
+  });
+
+  // fork
+  await page.getByTestId("btn-edit-playlist").click();
+  await page.getByTestId("edit-panel").waitFor({ timeout: 5000 });
+  await page.getByTestId("btn-fork-playlist").click();
+  // fork banner disappears once the new local playlist is selected
+  await expect(page.getByTestId("btn-fork-playlist")).not.toBeVisible({
+    timeout: 8000,
+  });
+  await page.keyboard.press("Escape");
+
+  // fork is now selected - title should be editable
+  await expect(page.getByTestId("input-playlist-title")).toBeEnabled({
+    timeout: 5000,
+  });
+
+  // actually type in it to confirm
+  await page.getByTestId("input-playlist-title").click({ clickCount: 3 });
+  await page.getByTestId("input-playlist-title").fill("my-fork");
+  await page.getByTestId("input-playlist-title").blur();
+  await page.waitForTimeout(300);
+  await expect(page.getByTestId("input-playlist-title")).toHaveValue("my-fork");
+});
+
+// --- edit/share buttons close all-playlists panel ---
+
+test("clicking edit button while all-playlists is open closes it", async ({
+  page,
+}) => {
+  await createPlaylistViaUI(page);
+
+  await page.getByTestId("btn-all-playlists").click();
+  await expect(page.getByTestId("all-playlists-panel")).toBeVisible();
+
+  await page.getByTestId("btn-edit-playlist").click();
+
+  await expect(page.getByTestId("all-playlists-panel")).not.toBeVisible();
+  await expect(page.getByTestId("edit-panel")).toBeVisible();
+});
+
+test("clicking share button while all-playlists is open closes it", async ({
+  page,
+}) => {
+  await createPlaylistViaUI(page);
+
+  await page.getByTestId("btn-all-playlists").click();
+  await expect(page.getByTestId("all-playlists-panel")).toBeVisible();
+
+  await page.getByTestId("btn-share-playlist").click();
+
+  await expect(page.getByTestId("all-playlists-panel")).not.toBeVisible();
+  await expect(page.getByTestId("share-panel")).toBeVisible();
+});
+
+// --- remoteName display in playlist rows ---
+
+test("playlist row shows remoteName when set", async ({ page }) => {
+  // create the subscribed playlist first
+  await createPlaylistViaUI(page);
+  const docId = await firstDocId(page);
+  await makeSubscribed(page, docId, { remoteName: "peer-frank" });
+
+  // create a second playlist so the first appears in the all-playlists panel
+  // (the selected playlist is shown in the header, not in the panel list)
+  await createPlaylistViaUI(page);
+
+  await page.getByTestId("btn-all-playlists").click();
+  await page.getByTestId("all-playlists-panel").waitFor({ timeout: 5000 });
+
+  await expect(page.getByTestId("all-playlists-panel")).toContainText(
+    "peer-frank"
+  );
+});
+
+// --- per-playlist sharing mode ---
+
+test("mode buttons in share panel are visible", async ({ page }) => {
+  await createPlaylistViaUI(page);
+  await page.getByTestId("btn-share-playlist").click();
+  await page.getByTestId("share-panel").waitFor({ timeout: 5000 });
+
+  await expect(page.getByTestId("btn-mode-public")).toBeVisible();
+  await expect(page.getByTestId("btn-mode-knock")).toBeVisible();
+});