fix: review round 2 — a signed-out tab acts as nobody, honest share-page failures

Deep-review round 2 over main..improvement/watch-background-audio.

Account resolution (server)
- A request naming an account that is no longer signed in to this browser
  (X-Siftlode-Account or ?account=) now acts as nobody instead of the
  session's default account. A tab still pinned to an account signed out in
  another tab went on acting as the default: its player checkpoints and
  preference saves landed in that account, the messages socket and Plex
  playback ran as it, and its Sign out signed THAT account out. A hidden tab
  never polls /api/me, so a tab playing in the background kept doing it.
  The /api/me bootstrap probe alone keeps the fallback, which is how such a
  tab learns who it now is: the app's 401 handler reloads, and BootGate
  re-pins the tab.

BootGate
- On an identity change the tab reloads without moving its pin first. The
  tree being torn down still runs its unmount saves before the page goes,
  and with the pin already moved they wrote into the new account's local
  keys (a player volume still pending). The reloaded page corrects the pin.

Share page (/watch)
- Only a 404 says the link is gone. A 5xx, a dropped connection, and the
  unlock's own rate limit all rendered "no longer available ... expired or
  revoked" to a viewer with a valid link, with no way to try again. A load
  failure now offers Retry; too many password tries says so and keeps the
  form; an unlock that gets no answer says so instead of doing nothing.
  Strings in en/hu/de.

Downloads
- A cookie-authed asset is recognised under the current signature version
  and the one before it, so a job queued before a deploy that bumps the
  version still downloads with its cookie instead of failing on the login
  wall with an error that says no cookie was used.

The app chunk is preloaded through lazyWithPreload, so a failed fetch no
longer leaves an unhandled rejection beside the ErrorBoundary. The panel
layout seed is one helper (seedLayout).

Tests: the stale-tab refusal, its harmless Sign out and the probe fallback;
the pre-bump authed asset; BootGate keeping the pin on reload and staying
mounted through a same-account change; the reveal clock's later-commit
hand-off; the prefs, panel layout and demo-scope seeds from the me cache;
the share page's failure states. Each mutation-checked RED for its own
reason.

frontend/src/App.tsx

@@ -8,10 +8,9 @@ import { setLanguage, type LangCode } from "./i18n";
 import { clearParams } from "./lib/urlState";
 import type { Page } from "./lib/urlState";
 import {
-  loadLayout,
-  normalizeLayout,
   PREF_KEY,
   saveLayoutLocal,
+  seedLayout,
   type PanelId,
   type PanelLayout,
 } from "./lib/panelLayout";
@@ -88,11 +87,11 @@ export default function App() {
   // has never stored.
   const [panelLayouts, setPanelLayouts] = useState<Record<PanelId, PanelLayout>>(() => {
     const prefs = queryClient.getQueryData<Me | null>(qk.me())?.preferences;
-    const seed = (p: PanelId) => {
-      const raw = prefs?.[PREF_KEY[p]];
-      return raw ? normalizeLayout(p, raw) : loadLayout(p);
+    return {
+      feed: seedLayout("feed", prefs),
+      plex: seedLayout("plex", prefs),
+      playlists: seedLayout("playlists", prefs),
     };
-    return { feed: seed("feed"), plex: seed("plex"), playlists: seed("playlists") };
   });
   const [aboutOpen, setAboutOpen] = useState(false);
   const [notesOpen, setNotesOpen] = useState(false);

frontend/src/components/BootGate.dom.test.tsx

@@ -173,4 +173,36 @@ describe("BootGate", () => {
 
     await waitFor(() => expect(reload).toHaveBeenCalled());
   });
+
+  it("an identity change reloads without moving the pin first", async () => {
+    // The tree being torn down still runs its unmount saves before the page goes; with the pin already
+    // moved they would land under the NEW account's local keys (a player volume still pending, say).
+    const me = vi.spyOn(api, "me").mockResolvedValue(account());
+    const qc = mount();
+    await screen.findByTestId("app");
+    const reload = vi.fn();
+    vi.stubGlobal("location", { ...window.location, reload });
+
+    me.mockResolvedValue(account({ id: 6 })); // 5 was signed out elsewhere: the server answers as 6
+    await act(() => qc.refetchQueries({ queryKey: qk.me() }));
+
+    await waitFor(() => expect(reload).toHaveBeenCalled());
+    expect(sessionStorage.getItem(ACTIVE_ACCOUNT_KEY)).toBe("5");
+  });
+
+  it("a change to the account's data, not its identity, leaves the app as it is", async () => {
+    vi.spyOn(api, "me").mockResolvedValue(account());
+    const qc = mount();
+    await screen.findByTestId("app");
+    const reload = vi.fn();
+    vi.stubGlobal("location", { ...window.location, reload });
+
+    // What every pref save does to the cache (usePref's mergePrefsCache): a new `me` for the same account.
+    act(() => qc.setQueryData(qk.me(), account({ preferences: { language: "hu" } })));
+    await act(() => new Promise((r) => setTimeout(r, 20)));
+
+    expect(reload).not.toHaveBeenCalled();
+    expect(mounts).toBe(1);
+    expect(i18n.language).toBe("en"); // the language is adopted once, never over the user's own choice
+  });
 });

frontend/src/components/BootGate.tsx

@@ -85,11 +85,14 @@ export default function BootGate({ children }: { children: ReactNode }) {
   const [readyFor, setReadyFor] = useState<number | null | undefined>(undefined);
   useLayoutEffect(() => {
     if (identity === undefined) return;
-    if (me && getActiveAccount() !== me.id) setActiveAccount(me.id);
     if (readyFor !== undefined) {
-      location.reload(); // the tree was built for another identity — see the header
+      // The tree was built for another identity — see the header. The pin stays as it is: the tree
+      // being torn down still runs its unmount saves before the page goes, and with the pin moved they
+      // would land under the new account's local keys. The reloaded page's first probe corrects it.
+      location.reload();
       return;
     }
+    if (me && getActiveAccount() !== me.id) setActiveAccount(me.id);
     const lang = me?.preferences?.language;
     if (typeof lang === "string" && isSupported(lang) && lang !== i18n.language) setLanguage(lang);
     setReadyFor(identity);

frontend/src/components/FeedFiltersProvider.seed.dom.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+//
+// The shared demo account has no subscriptions, so its feed opens on the whole library. The filters are
+// seeded from the `me` cache at mount — BootGate mounts the tree only once it is there. The adopt effect
+// this replaced applied the demo default after mounting; with it gone, a seed that did not read `me`
+// would open the demo account on its empty subscriptions scope.
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { NavigationProvider } from "./NavigationProvider";
+import { FeedFiltersProvider, useFeedFilters } from "./FeedFiltersProvider";
+import { ACTIVE_ACCOUNT_KEY } from "../lib/activeAccount";
+import { qk } from "../lib/queryKeys";
+import type { Me } from "../lib/api";
+
+const scopes: string[] = [];
+function Probe() {
+  scopes.push(useFeedFilters().scope);
+  return null;
+}
+
+function mount(me: Partial<Me>) {
+  const qc = new QueryClient();
+  qc.setQueryData(qk.me(), { id: 5, preferences: {}, ...me });
+  render(
+    <QueryClientProvider client={qc}>
+      <NavigationProvider>
+        <FeedFiltersProvider>
+          <Probe />
+        </FeedFiltersProvider>
+      </NavigationProvider>
+    </QueryClientProvider>,
+  );
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  sessionStorage.setItem(ACTIVE_ACCOUNT_KEY, "5");
+  scopes.length = 0;
+  window.history.replaceState(null, "", "/");
+});
+afterEach(() => {
+  cleanup();
+  window.history.replaceState(null, "", "/");
+});
+
+describe("FeedFiltersProvider seed", () => {
+  it("opens the shared demo account on the whole library from its first render", () => {
+    mount({ is_demo: true });
+    expect(scopes.length).toBeGreaterThan(0);
+    expect(scopes).toEqual(scopes.map(() => "all"));
+  });
+
+  it("opens any other account on its own scope", () => {
+    mount({ is_demo: false });
+    expect(scopes[0]).toBe("my");
+  });
+});

frontend/src/components/PrefsProvider.dom.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+//
+// The Settings prefs are seeded from the account's server prefs in the `me` cache — BootGate mounts the
+// tree only once it is there. The adopt effect this replaced corrected them AFTER mounting; with it
+// gone, a seed that read only this browser's copy would never show a performance mode or hints setting
+// changed on another device. And the seed is not an edit: it must not be saved straight back.
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, cleanup, render } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { PrefsProvider, usePrefs } from "./PrefsProvider";
+import { api } from "../lib/api";
+import { ACTIVE_ACCOUNT_KEY } from "../lib/activeAccount";
+import { accountKey, LS } from "../lib/storage";
+import { qk } from "../lib/queryKeys";
+
+const seen: { perf: boolean; hints: boolean }[] = [];
+function Probe() {
+  const { perf, hints } = usePrefs();
+  seen.push({ perf, hints });
+  return null;
+}
+
+beforeEach(() => {
+  localStorage.clear();
+  sessionStorage.setItem(ACTIVE_ACCOUNT_KEY, "5");
+  seen.length = 0;
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.restoreAllMocks();
+});
+
+describe("PrefsProvider seed", () => {
+  it("renders the account's server prefs from the first render, and does not save them back", () => {
+    localStorage.setItem(accountKey(LS.perfMode, 5)!, "0"); // this browser last had it off
+    localStorage.setItem(accountKey(LS.hints, 5)!, "1");
+    const save = vi.spyOn(api, "savePrefs").mockResolvedValue(undefined as never);
+    const qc = new QueryClient();
+    qc.setQueryData(qk.me(), { id: 5, preferences: { performanceMode: true, hints: false } });
+    render(
+      <QueryClientProvider client={qc}>
+        <PrefsProvider>
+          <Probe />
+        </PrefsProvider>
+      </QueryClientProvider>,
+    );
+
+    expect(seen[0]).toEqual({ perf: true, hints: false });
+    act(() => vi.advanceTimersByTime(1000)); // past the auto-save debounce
+    expect(save).not.toHaveBeenCalled();
+  });
+});

frontend/src/components/WatchPage.dom.test.tsx

@@ -121,3 +121,79 @@ describe("WatchPage media element (S3 · 5a)", () => {
     expect(container.querySelector('a[href="/f.zip"]')).toBeNull();
   });
 });
+
+// Only a 404 means a link is gone. Every other failure used to render the permanent "no longer
+// available" state too: a server restart, a dropped connection, and the unlock's own rate limit told a
+// viewer with a valid link that it had expired or been revoked, with no way to try again.
+describe("WatchPage honest failures", () => {
+  const res = (status: number, body: unknown = {}) => ({
+    ok: status < 400,
+    status,
+    json: async () => body,
+  });
+  const GONE = "This link is no longer available.";
+
+  it("a server error is a failure with a retry, not a dead link", async () => {
+    window.history.replaceState({}, "", "/watch/tok-5xx");
+    vi.stubGlobal(
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(res(503))
+        .mockResolvedValue(
+          res(200, { needs_password: false, file_url: "/f.mp4", title: "A clip" }),
+        ),
+    );
+    const page = render(<WatchPage />);
+    const retry = await page.findByRole("button", { name: "Try again" });
+    expect(page.queryByText(GONE)).toBeNull();
+
+    fireEvent.click(retry);
+    await waitFor(() => expect(page.container.querySelector("video")).not.toBeNull());
+  });
+
+  it("a dropped connection is a failure with a retry too", async () => {
+    window.history.replaceState({}, "", "/watch/tok-offline");
+    vi.stubGlobal("fetch", vi.fn().mockRejectedValue(new TypeError("Failed to fetch")));
+    const page = render(<WatchPage />);
+    await page.findByRole("button", { name: "Try again" });
+    expect(page.queryByText(GONE)).toBeNull();
+  });
+
+  it("a 404 says the link is gone", async () => {
+    window.history.replaceState({}, "", "/watch/tok-404");
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(res(404)));
+    const page = render(<WatchPage />);
+    await page.findByText(GONE);
+    expect(page.queryByRole("button", { name: "Try again" })).toBeNull();
+  });
+
+  async function tryPassword(second: () => Promise<unknown>) {
+    vi.stubGlobal(
+      "fetch",
+      vi
+        .fn()
+        .mockResolvedValueOnce(res(200, { needs_password: true }))
+        .mockImplementationOnce(second),
+    );
+    const page = render(<WatchPage />);
+    fireEvent.change(await page.findByPlaceholderText("Enter password"), {
+      target: { value: "guess" },
+    });
+    fireEvent.click(page.getByRole("button", { name: "Watch" }));
+    return page;
+  }
+
+  it("too many password tries says so, and keeps the form", async () => {
+    window.history.replaceState({}, "", "/watch/tok-429");
+    const page = await tryPassword(async () => res(429));
+    await page.findByText("Too many attempts. Try again in a few minutes.");
+    expect(page.getByPlaceholderText("Enter password")).toBeTruthy();
+  });
+
+  it("an unlock that gets no answer says so instead of doing nothing", async () => {
+    window.history.replaceState({}, "", "/watch/tok-unlock-offline");
+    const page = await tryPassword(() => Promise.reject(new TypeError("Failed to fetch")));
+    await page.findByText("Couldn't check the password. Try again.");
+  });
+});

frontend/src/components/WatchPage.tsx

@@ -83,6 +83,11 @@ const STR = {
     links: "Links",
     brand: "Shared via Siftlode",
     repeat: "Repeat",
+    failed: "Couldn't load this link.",
+    failedHint: "Check your connection and try again.",
+    retry: "Try again",
+    tooMany: "Too many attempts. Try again in a few minutes.",
+    unlockFailed: "Couldn't check the password. Try again.",
   },
   hu: {
     loading: "Betöltés…",
@@ -97,6 +102,11 @@ const STR = {
     links: "Linkek",
     brand: "Megosztva a Siftlode-dal",
     repeat: "Ismétlés",
+    failed: "Nem sikerült betölteni a linket.",
+    failedHint: "Ellenőrizd a kapcsolatot, és próbáld újra.",
+    retry: "Újrapróbálás",
+    tooMany: "Túl sok próbálkozás. Próbáld újra pár perc múlva.",
+    unlockFailed: "Nem sikerült ellenőrizni a jelszót. Próbáld újra.",
   },
   de: {
     loading: "Wird geladen…",
@@ -111,6 +121,11 @@ const STR = {
     links: "Links",
     brand: "Geteilt über Siftlode",
     repeat: "Wiederholen",
+    failed: "Der Link konnte nicht geladen werden.",
+    failedHint: "Prüfe deine Verbindung und versuche es erneut.",
+    retry: "Erneut versuchen",
+    tooMany: "Zu viele Versuche. Versuche es in ein paar Minuten erneut.",
+    unlockFailed: "Das Passwort konnte nicht geprüft werden. Versuche es erneut.",
   },
 } as const;
 
@@ -122,7 +137,9 @@ const T = STR[lang];
 
 export default function WatchPage() {
   const token = window.location.pathname.split("/watch/")[1]?.split(/[/?#]/)[0] ?? "";
-  const [status, setStatus] = useState<"loading" | "ready" | "password" | "gone">("loading");
+  const [status, setStatus] = useState<"loading" | "ready" | "password" | "gone" | "error">(
+    "loading",
+  );
   const [meta, setMeta] = useState<Meta | null>(null);
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -144,22 +161,36 @@ export default function WatchPage() {
     writeJSON(LS.watchRepeat, next);
   };
 
+  // Bumped by Retry, which asks again.
+  const [attempt, setAttempt] = useState(0);
   useEffect(() => {
     if (!token) {
       setStatus("gone");
       return;
     }
     fetch(`/api/public/watch/${encodeURIComponent(token)}`)
-      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
-      .then((m: Meta) => {
-        if (m.needs_password) setStatus("password");
+      .then((r) => {
+        // Only a 404 says the link is gone (unknown, expired, revoked, or its file removed). Anything
+        // else — a 5xx while the server restarts, a dropped connection — is a failure worth retrying,
+        // not a dead link.
+        if (r.status === 404) return null;
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json() as Promise<Meta>;
+      })
+      .then((m) => {
+        if (!m) setStatus("gone");
+        else if (m.needs_password) setStatus("password");
         else {
           setMeta(m);
           setStatus("ready");
         }
       })
-      .catch(() => setStatus("gone"));
-  }, [token]);
+      .catch(() => setStatus("error"));
+  }, [token, attempt]);
+  const retry = () => {
+    setStatus("loading");
+    setAttempt((n) => n + 1);
+  };
 
   const unlock = async () => {
     setUnlocking(true);
@@ -174,12 +205,20 @@ export default function WatchPage() {
         setError(T.wrong);
         return;
       }
-      if (!r.ok) {
+      // Unlocking is rate-limited per link: too many tries is not a dead link either.
+      if (r.status === 429) {
+        setError(T.tooMany);
+        return;
+      }
+      if (r.status === 404) {
         setStatus("gone");
         return;
       }
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
       setMeta(await r.json());
       setStatus("ready");
+    } catch {
+      setError(T.unlockFailed);
     } finally {
       setUnlocking(false);
     }
@@ -206,6 +245,18 @@ export default function WatchPage() {
           </div>
         )}
 
+        {status === "error" && (
+          <div className="flex-1 grid place-items-center text-center">
+            <div>
+              <div className="text-lg font-semibold">{T.failed}</div>
+              <div className="text-sm text-muted mt-1">{T.failedHint}</div>
+              <Button variant="primary" size="md" onClick={retry} className="mt-4">
+                {T.retry}
+              </Button>
+            </div>
+          </div>
+        )}
+
         {status === "password" && (
           <div className="flex-1 grid place-items-center">
             <div className="w-full max-w-sm rounded-2xl glass p-6">

frontend/src/components/ui/QueryState.dom.test.tsx

@@ -56,6 +56,16 @@ describe("LoadingState reveal", () => {
     expect(revealDelay(container)).toBe(300);
   });
 
+  it("one that mounts just after another left, in a later commit, keeps that one's clock", () => {
+    now = 45_000;
+    const first = render(<LoadingState />);
+    now = 45_050;
+    first.unmount(); // a Suspense fallback leaves a commit before the page's own loading state mounts
+    now = 45_080;
+    const { container } = render(<LoadingState />);
+    expect(revealDelay(container)).toBe(220);
+  });
+
   it("`since` counts the wait from an earlier start (the boot screen: navigation start)", () => {
     now = 50_250;
     const { container } = render(<LoadingState since={50_000} delayMs={400} />);

frontend/src/lib/panelLayout.dom.test.ts

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+//
+// A panel's layout is seeded from the account's server prefs when the app mounts. The adopt effect this
+// replaced corrected it after mounting; with it gone, a seed that read only this browser's copy would
+// never show a layout changed on another device.
+import { beforeEach, describe, expect, it } from "vitest";
+import { seedLayout } from "./panelLayout";
+import { ACTIVE_ACCOUNT_KEY } from "./activeAccount";
+import { accountKey, LS } from "./storage";
+
+const local = { order: [], collapsed: { genre: true }, hidden: {} };
+
+beforeEach(() => {
+  localStorage.clear();
+  sessionStorage.setItem(ACTIVE_ACCOUNT_KEY, "5");
+  localStorage.setItem(accountKey(LS.plexLayout, 5)!, JSON.stringify(local));
+});
+
+describe("seedLayout", () => {
+  it("takes the account's server layout over this browser's copy", () => {
+    const l = seedLayout("plex", {
+      plexLayout: { order: [], collapsed: {}, hidden: { year: true } },
+    });
+    expect(l.hidden).toEqual({ year: true });
+    expect(l.collapsed).toEqual({});
+  });
+
+  it("uses this browser's copy for a layout the server has never stored", () => {
+    expect(seedLayout("plex", {}).collapsed).toEqual({ genre: true });
+    expect(seedLayout("plex", undefined).collapsed).toEqual({ genre: true });
+  });
+});

frontend/src/lib/panelLayout.ts

@@ -50,7 +50,7 @@ export function defaultLayout(panel: PanelId): PanelLayout {
   return { order: [...PANEL_ORDER[panel]], collapsed: {}, hidden: {} };
 }
 
-export function normalizeLayout(panel: PanelId, raw: unknown): PanelLayout {
+function normalizeLayout(panel: PanelId, raw: unknown): PanelLayout {
   const all = PANEL_ORDER[panel];
   const r = (raw ?? {}) as Partial<PanelLayout>;
   const order = Array.isArray(r.order) ? r.order.filter((x) => all.includes(x)) : [];
@@ -62,10 +62,20 @@ export function normalizeLayout(panel: PanelId, raw: unknown): PanelLayout {
   };
 }
 
-export function loadLayout(panel: PanelId): PanelLayout {
+function loadLayout(panel: PanelId): PanelLayout {
   return normalizeLayout(panel, readAccount<unknown>(LS_KEY[panel], {}));
 }
 
+// A panel's layout when the app mounts: the account's server copy (the `me` cache's preferences) when
+// it has one — so a layout changed on another device is right on the first paint — else this browser's.
+export function seedLayout(
+  panel: PanelId,
+  prefs: Record<string, unknown> | undefined,
+): PanelLayout {
+  const raw = prefs?.[PREF_KEY[panel]];
+  return raw ? normalizeLayout(panel, raw) : loadLayout(panel);
+}
+
 export function saveLayoutLocal(panel: PanelId, l: PanelLayout): void {
   writeAccount(LS_KEY[panel], l);
 }

frontend/src/main.tsx

@@ -19,14 +19,14 @@ import { WizardProvider } from "./components/WizardProvider";
 import "./i18n";
 import "./index.css";
 import "flag-icons/css/flag-icons.min.css";
+import { lazyWithPreload } from "./lib/lazyWithPreload";
 
 // Split by top-level route so each entry point is its own chunk: a public /watch share link or a
 // legal page never downloads the authenticated app bundle, and the app never carries them either.
 // The legal pages live outside the App tree (no /api/me) so Google's consent screen and reviewers
 // can fetch them directly; the watch page is a login-free public player. Reached by full-page
 // navigation (plain <a href>), so a simple pathname switch is enough — no router needed.
-const loadApp = () => import("./App");
-const App = lazy(loadApp);
+const App = lazyWithPreload(() => import("./App"));
 const PrivacyPolicy = lazy(() => import("./components/legal/PrivacyPolicy"));
 const Terms = lazy(() => import("./components/legal/Terms"));
 const WatchPage = lazy(() => import("./components/WatchPage"));
@@ -43,8 +43,9 @@ de.scheme ||= "midnight";
 const path = window.location.pathname;
 const isPublicPage = path === "/privacy" || path === "/terms" || path.startsWith("/watch/");
 // Fetch the app chunk NOW, alongside BootGate's identity probe, instead of only once the gate opens:
-// the two waits then overlap rather than queue, and the gate usually opens straight onto the app.
-if (!isPublicPage) void loadApp();
+// the two waits then overlap rather than queue, and the gate usually opens straight onto the app. A
+// failed fetch is left to the render's own load, which retries it and reports to the ErrorBoundary.
+if (!isPublicPage) App.preload().catch(() => {});
 const root =
   path === "/privacy" ? (
     <PrivacyPolicy />