fix: review round 4 — an account switch unloads as the old account, a share link's lockout costs five networks

Deep-review round 4, targeted at round 3's changes (f569b19c..e7f38396).

Accounts
- Switching, adding or signing out an account moved the tab's pin before
  the page unloaded, so the players' resume beacons fired on the way out
  under the NEW account: one account's playback position saved into the
  other. The pin is now handed to the next page (pinOnNextPage) and taken
  over at import; clearActiveAccount is gone.
- Switching to a suspended account was refused but left it in the
  switcher, refused on every click; a deactivated one was not refused at
  all, and made the default it signed every account in the browser out on
  the next request. Every account _session_user would refuse — gone,
  deactivated, suspended, revoked — is refused and dropped from the list.

Share page (/watch)
- An IPv6 client is limited by its /64 (client_ip becomes client_key, for
  every limiter): keyed on the full address, one subscriber could rotate
  through endless identities. The comments now state what the per-link
  ceiling costs: guessing from five networks can keep a link shut for its
  window, and guesses already running when it fills are still checked.
- The link is looked up before the limiter records the attempt, so made-up
  tokens no longer grow it by an entry each.

Forms
- Failing the same way twice is announced again: the sign-in, passphrase
  and setup errors are keyed on the attempt (a clear and a set in one
  handler left the alert node untouched).
- The install wizard's own validation showed the generic error — it threw
  plain objects its catch did not read. It sets the step's message.

Tests: a re-pin leaving the previous account's notices behind; the pin
hand-over; switching to an ended account; the /64 viewer; made-up tokens;
the repeated alerts. Each mutation-checked RED for its own reason.

frontend/src/components/KeyGate.tsx

@@ -32,9 +32,13 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
   const [confirm, setConfirm] = useState("");
   const [curPass, setCurPass] = useState("");
   const [err, setErr] = useState<string | null>(null);
+  // Keys the error: failing the same way twice is a new node, so a screen reader announces it again (a clear
+  // and a set in one handler commit together, leaving the node untouched).
+  const [attempt, setAttempt] = useState(0);
   const [busy, setBusy] = useState(false);
 
   async function submit() {
+    setAttempt((n) => n + 1);
     setErr(null);
     if (pass.length < 6) return setErr(t("messages.passTooShort"));
     if (!configured && pass !== confirm) return setErr(t("messages.passMismatch"));
@@ -67,6 +71,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
   }
 
   async function doReset() {
+    setAttempt((n) => n + 1);
     setErr(null);
     if (hasPassword && !curPass) return setErr(t("messages.resetNeedPass"));
     setBusy(true);
@@ -107,7 +112,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
           />
         )}
         {err && (
-          <div role="alert" className="text-sm text-danger">
+          <div key={attempt} role="alert" className="text-sm text-danger">
             {err}
           </div>
         )}
@@ -158,7 +163,7 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
         />
       )}
       {err && (
-        <div role="alert" className="text-sm text-danger">
+        <div key={attempt} role="alert" className="text-sm text-danger">
           {err}
         </div>
       )}

frontend/src/components/NavSidebar.tsx

@@ -4,7 +4,8 @@ import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigation, useNavigationActions } from "./NavigationProvider";
 import { Info, LogOut, Settings, Shield, UserPlus, type LucideIcon } from "lucide-react";
-import { api, clearActiveAccount, setActiveAccount, type Me } from "../lib/api";
+import { api, type Me } from "../lib/api";
+import { pinOnNextPage } from "../lib/activeAccount";
 import * as e2ee from "../lib/e2ee";
 import { useLiveQuery } from "../lib/useLiveQuery";
 import { getUnreadCount, subscribe } from "../lib/notifications";
@@ -71,7 +72,7 @@ export default function NavSidebar({
     } catch {
       /* IndexedDB unavailable (e.g. private mode) — never let it block the logout + reload */
     }
-    clearActiveAccount();
+    pinOnNextPage(null);
     location.reload();
   }
 
@@ -86,8 +87,9 @@ export default function NavSidebar({
   function switchTo(id: number) {
     // Per-tab switch: point THIS tab at the account and reload; other tabs keep their own
     // identity. No server round-trip — req() sends the account header (validated against the
-    // browser wallet server-side), so the cookie's default account is left untouched.
-    setActiveAccount(id);
+    // browser wallet server-side), so the cookie's default account is left untouched. The pin moves with
+    // the reload, not before it: the page going away still unloads as the account it was built for.
+    pinOnNextPage(id);
     // Drop the previous account's in-module sub-view/overlay before the reload (which would
     // otherwise preserve history.state across the swap). Otherwise the new account lands on a
     // stale sub-view — e.g. an open chat thread whose partnerId belongs to the OLD identity
@@ -334,7 +336,7 @@ export default function NavSidebar({
                     // Adding an account switches THIS tab to it: drop the tab's pin so that on
                     // return from Google it adopts the freshly-added account (the new default)
                     // and pins that. Other tabs keep their own pinned account.
-                    clearActiveAccount();
+                    pinOnNextPage(null);
                     window.location.href = "/auth/login";
                   }}
                   className="selectable w-full flex items-center gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"

frontend/src/components/SetupWizard.tsx

@@ -36,6 +36,9 @@ export default function SetupWizard() {
   const [stepIdx, setStepIdx] = useState(0);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
+  // Keys the error: failing the same way twice is a new node, so a screen reader announces it again (a clear
+  // and a set in one handler commit together, leaving the node untouched).
+  const [attempt, setAttempt] = useState(0);
   // Admin account.
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -74,19 +77,21 @@ export default function SetupWizard() {
   };
 
   // Each step's "Next" action persists what it collected, then advances. Optional steps with empty
-  // fields just advance (skip). Errors surface inline (the setup calls use the quiet flag).
+  // fields just advance (skip). Errors surface inline (the setup calls use the quiet flag); a step's own
+  // validation sets its message and stays.
   async function next() {
+    setAttempt((n) => n + 1);
     setError("");
     setBusy(true);
     try {
       if (step === "admin") {
         if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email))
-          throw { detail: t("setup.admin.invalidEmail") };
+          return setError(t("setup.admin.invalidEmail"));
         if (password.length < PASSWORD_MIN)
-          throw { detail: t("setup.admin.shortPassword", { n: PASSWORD_MIN }) };
+          return setError(t("setup.admin.shortPassword", { n: PASSWORD_MIN }));
         await api.setupAdmin(token, email, password);
       } else if (step === "google" && (gid.trim() || gsecret.trim())) {
-        if (!gid.trim() || !gsecret.trim()) throw { detail: t("setup.google.bothRequired") };
+        if (!gid.trim() || !gsecret.trim()) return setError(t("setup.google.bothRequired"));
         await api.setupConfig(token, {
           google_client_id: gid.trim(),
           google_client_secret: gsecret.trim(),
@@ -268,7 +273,7 @@ export default function SetupWizard() {
           )}
 
           {error && (
-            <p role="alert" className="text-sm text-danger mt-3">
+            <p key={attempt} role="alert" className="text-sm text-danger mt-3">
               {error}
             </p>
           )}

frontend/src/components/Welcome.tsx

@@ -398,6 +398,9 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
   const [password, setPassword] = useState("");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
+  // Keys the error: failing the same way twice is a new node, so a screen reader announces it again (a clear
+  // and a set in one handler commit together, leaving the node untouched).
+  const [attempt, setAttempt] = useState(0);
   // Whether to offer "Continue with Google" — hidden when the instance has no Google OAuth
   // configured. Optimistic (most instances have it); the rare Google-less instance just sees it
   // disappear once the config loads.
@@ -481,6 +484,7 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
 
   async function onSubmit(e: React.FormEvent) {
     e.preventDefault();
+    setAttempt((n) => n + 1);
     reset();
     const mail = email.trim().toLowerCase();
     if (
@@ -687,7 +691,7 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
               />
             )}
             {error && (
-              <p role="alert" className="text-xs text-danger">
+              <p key={attempt} role="alert" className="text-xs text-danger">
                 {error}
               </p>
             )}

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

@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+//
+// A form's error is announced (role="alert"), and failing the same way again must be announced again. The
+// clear and the set of a validation failure commit together, so the alert node used to stay untouched on
+// the second attempt and a screen reader said nothing — a press that seemed to do nothing.
+//
+// i18n is mocked to a key-passthrough; the API and the E2EE module are stubbed so nothing reaches out.
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return {
+    ...actual,
+    useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
+  };
+});
+
+vi.mock("../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../lib/api")>();
+  return {
+    ...actual,
+    api: {
+      ...actual.api,
+      authConfig: () => Promise.resolve({ google_enabled: false }),
+      messageMyKey: () => Promise.resolve({ configured: true }),
+      me: () => Promise.resolve({ authenticated: false }),
+      setupInfo: () => Promise.resolve({ secrets_manageable: false }),
+    },
+  };
+});
+
+vi.mock("../lib/e2ee", () => ({ unlock: vi.fn(), setup: vi.fn(), clearDevice: vi.fn() }));
+
+import KeyGate from "./KeyGate";
+import SetupWizard from "./SetupWizard";
+import Welcome from "./Welcome";
+
+afterEach(() => {
+  cleanup();
+  window.history.replaceState(null, "", "/");
+});
+
+// Fails twice the same way; the second alert must be a new node carrying the same message.
+async function failTwice(fail: () => void, message: string) {
+  fail();
+  const first = await screen.findByRole("alert");
+  expect(first.textContent).toBe(message);
+  fail();
+  const second = screen.getByRole("alert");
+  expect(second.textContent).toBe(message);
+  expect(second).not.toBe(first);
+}
+
+describe("a form failing the same way twice announces it twice", () => {
+  it("the message passphrase gate", async () => {
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <KeyGate meId={1} />
+      </QueryClientProvider>,
+    );
+    const unlock = await screen.findByText("messages.unlock");
+    fireEvent.change(screen.getByPlaceholderText("messages.passphrase"), {
+      target: { value: "abc" },
+    });
+    await failTwice(() => fireEvent.click(unlock), "messages.passTooShort");
+  });
+
+  it("the sign-in card", async () => {
+    render(
+      <Welcome verify={{ outcome: null, email: null, resetPending: false, dismiss: () => {} }} />,
+    );
+    const email = await screen.findByPlaceholderText("welcome.auth.email");
+    fireEvent.change(email, { target: { value: "not-an-address" } });
+    await failTwice(() => fireEvent.submit(email.closest("form")!), "welcome.auth.invalidEmail");
+  });
+
+  it("the install wizard, with the step's own message rather than the generic one", async () => {
+    window.history.replaceState(null, "", "/?token=setup-token");
+    render(<SetupWizard />);
+    fireEvent.click(await screen.findByText("setup.nav.next")); // past the intro
+    fireEvent.change(await screen.findByPlaceholderText("setup.admin.email"), {
+      target: { value: "not-an-address" },
+    });
+    await failTwice(
+      () => fireEvent.click(screen.getByText("setup.nav.next")),
+      "setup.admin.invalidEmail",
+    );
+  });
+});

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

@@ -6,6 +6,24 @@
 // nobody's history, and the tab's first notice replaced the account's stored history with it.
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+const entry = (id: number, message: string) => ({
+  id,
+  level: "info",
+  message,
+  ts: 1,
+  read: true,
+  dismissed: true,
+  transient: false,
+  repeat: 1,
+  requiresInteraction: false,
+});
+const storedMessages = (account: number) =>
+  (
+    JSON.parse(localStorage.getItem(`siftlode.notifications.${account}`) ?? "[]") as {
+      message: string;
+    }[]
+  ).map((n) => n.message);
+
 beforeEach(() => {
   localStorage.clear();
   sessionStorage.clear();
@@ -14,18 +32,7 @@ beforeEach(() => {
 
 describe("stores read at import, in a tab not yet pinned", () => {
   it("keep the account's notification history and settings once the tab is pinned", async () => {
-    const older = {
-      id: 7,
-      level: "info",
-      message: "older",
-      ts: 1,
-      read: true,
-      dismissed: true,
-      transient: false,
-      repeat: 1,
-      requiresInteraction: false,
-    };
-    localStorage.setItem("siftlode.notifications.5", JSON.stringify([older]));
+    localStorage.setItem("siftlode.notifications.5", JSON.stringify([entry(7, "older")]));
     localStorage.setItem("siftlode.notifSettings.5", JSON.stringify({ durationMs: 0 }));
     const notifications = await import("./notifications");
     const { setActiveAccount } = await import("./api/core");
@@ -34,10 +41,7 @@ describe("stores read at import, in a tab not yet pinned", () => {
     setActiveAccount(5);
     notifications.notify({ message: "after the pin" });
 
-    const stored = JSON.parse(localStorage.getItem("siftlode.notifications.5") ?? "[]") as {
-      message: string;
-    }[];
-    expect(stored.map((n) => n.message)).toEqual(["older", "before the pin", "after the pin"]);
+    expect(storedMessages(5)).toEqual(["older", "before the pin", "after the pin"]);
     expect(notifications.getNotifSettings().durationMs).toBe(0);
   });
 
@@ -51,3 +55,21 @@ describe("stores read at import, in a tab not yet pinned", () => {
     expect(hints.hintsEnabled()).toBe(false);
   });
 });
+
+describe("a pinned tab pinned to another account", () => {
+  it("leaves the previous account's notices with that account", async () => {
+    // BootGate moves a tab whose account was signed out elsewhere onto the one the server answers as.
+    sessionStorage.setItem("siftlode.activeAccount", "4");
+    localStorage.setItem("siftlode.notifications.4", JSON.stringify([entry(7, "four's")]));
+    localStorage.setItem("siftlode.notifications.5", JSON.stringify([entry(8, "five's")]));
+    const notifications = await import("./notifications");
+    const { setActiveAccount } = await import("./api/core");
+
+    notifications.notify({ message: "as four" });
+    setActiveAccount(5);
+    notifications.notify({ message: "as five" });
+
+    expect(storedMessages(5)).toEqual(["five's", "as five"]);
+    expect(storedMessages(4)).toEqual(["four's", "as four"]);
+  });
+});

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

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+//
+// A switch or sign-out hands the tab's next page its account instead of moving the pin: the page being left
+// still unloads as its own account. The players' resume beacons read the pin as they fire on the way out,
+// and with the pin already moved they saved one account's playback position into the other.
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+beforeEach(() => {
+  sessionStorage.clear();
+  sessionStorage.setItem("siftlode.activeAccount", "3");
+  vi.resetModules(); // the hand-over is taken at import: each import below is a page load
+});
+
+describe("pinOnNextPage", () => {
+  it("leaves the pin alone until the next page, which takes the account over once", async () => {
+    const leaving = await import("./activeAccount");
+    leaving.pinOnNextPage(7);
+    expect(leaving.activeAccountId()).toBe(3); // the unload still acts as 3
+
+    vi.resetModules();
+    const next = await import("./activeAccount");
+    expect(next.activeAccountId()).toBe(7);
+
+    next.pinActiveAccount(9); // BootGate corrects it
+    vi.resetModules(); // and an F5 keeps the correction
+    expect((await import("./activeAccount")).activeAccountId()).toBe(9);
+  });
+
+  it("hands over no account at all, so the next page adopts the session's default", async () => {
+    const leaving = await import("./activeAccount");
+    leaving.pinOnNextPage(null);
+    expect(leaving.activeAccountId()).toBe(3);
+
+    vi.resetModules();
+    expect((await import("./activeAccount")).activeAccountId()).toBeNull();
+  });
+});

frontend/src/lib/activeAccount.ts

@@ -4,7 +4,8 @@
 // helpers that consume it.
 //
 // Deliberately NOT reactive: BootGate pins the account before any provider mounts, and a switch reloads
-// the page, so nothing mounted ever sees the id change underneath it. The one exception is state read at
+// the page (handing the new pin over through `pinOnNextPage`), so nothing mounted ever sees the id change
+// underneath it. The one exception is state read at
 // module import (the notification and hints stores), which in a new tab runs before the pin: it reads
 // again through `onAccountPinned`.
 //
@@ -27,6 +28,33 @@ export function pinActiveAccount(id: number): void {
   pinListeners.forEach((reload) => reload());
 }
 
+// The account the tab's NEXT page is pinned to, handed over by a switch or sign-out that is about to leave.
+// The pin itself stays until the page is gone: the unload still runs as the account the page was built for
+// (the players' resume beacons read the pin as they fire), and with the pin already moved it would save one
+// account's position into the other.
+const NEXT_ACCOUNT_KEY = "siftlode.nextAccount";
+
+/** Pin the tab's next page to `id` — or to none, so it adopts the session's default account. */
+export function pinOnNextPage(id: number | null): void {
+  try {
+    sessionStorage.setItem(NEXT_ACCOUNT_KEY, id == null ? "" : String(id));
+  } catch {
+    /* ignore */
+  }
+}
+
+// Taken over at import, before anything reads the pin.
+try {
+  const next = sessionStorage.getItem(NEXT_ACCOUNT_KEY);
+  if (next != null) {
+    sessionStorage.removeItem(NEXT_ACCOUNT_KEY);
+    if (next) sessionStorage.setItem(ACTIVE_ACCOUNT_KEY, next);
+    else sessionStorage.removeItem(ACTIVE_ACCOUNT_KEY);
+  }
+} catch {
+  /* ignore */
+}
+
 export function activeAccountId(): number | null {
   try {
     const raw = sessionStorage.getItem(ACTIVE_ACCOUNT_KEY);

frontend/src/lib/api.ts

@@ -11,19 +11,11 @@ import {
   getActiveAccount,
   HttpError,
   setActiveAccount,
-  clearActiveAccount,
   setUnauthorizedHandler,
 } from "./api/core";
 
 // Re-export the shared HTTP machinery so consumers keep importing these from "./api" unchanged.
-export {
-  alreadyReported,
-  HttpError,
-  getActiveAccount,
-  setActiveAccount,
-  clearActiveAccount,
-  setUnauthorizedHandler,
-};
+export { alreadyReported, HttpError, getActiveAccount, setActiveAccount, setUnauthorizedHandler };
 
 import { accountApi } from "./api/account";
 export type * from "./api/account";

frontend/src/lib/api/core.ts

@@ -6,7 +6,7 @@ import { getActiveToasts, notify, remove } from "../notifications";
 import i18n from "../../i18n";
 import { formatBytes } from "../format";
 import { reportError } from "../errorDialog";
-import { activeAccountId, ACTIVE_ACCOUNT_KEY, pinActiveAccount } from "../activeAccount";
+import { activeAccountId, pinActiveAccount } from "../activeAccount";
 
 /** The active UI language, as a bare code the server understands ("en"/"hu" — never "en-GB").
  *  Lives here so the request builders can stamp it themselves: a signal that has to be passed in by
@@ -263,13 +263,6 @@ export function beacon(url: string, body: Record<string, unknown>): void {
 }
 
 export const setActiveAccount = pinActiveAccount;
-export function clearActiveAccount(): void {
-  try {
-    sessionStorage.removeItem(ACTIVE_ACCOUNT_KEY);
-  } catch {
-    /* ignore */
-  }
-}
 
 export async function req<T = unknown>(
   url: string,