feat(auth): per-tab account — different account per browser tab

Two tabs in one browser can now run two different signed-in accounts at once.

- The signed session cookie stays the browser's account WALLET (account_ids). Which account a
  given tab acts as is a per-tab choice held in sessionStorage and sent per-request via the
  X-Siftlode-Account header; current_user honours it only for an account already in the wallet,
  without mutating the cookie's default account. Switching accounts sets the header + reloads
  THIS tab only, instead of the old cookie-wide switch that changed every tab.
- WebSocket can't send headers, so the per-tab account rides in the ?account= query param
  (validated against the wallet).
- Logout is per-tab aware: it signs the requesting tab's active account out of the wallet
  (promoting a new default only if the removed one was the default), and the tab drops its
  override. A stale per-tab header account 401s just that tab instead of clearing the session.
- Serve index.html with Cache-Control: no-cache so a deploy's new hashed bundle is picked up
  immediately instead of the browser running a heuristically-cached stale index.html.

frontend/src/lib/api.ts

@@ -266,6 +266,38 @@ const setupHeaders = (token: string) => ({
   "X-Setup-Token": token,
 });
 
+// --- Per-tab active account --------------------------------------------------------------
+// The signed session cookie is the browser's account "wallet"; which account a given TAB acts
+// as is chosen here and sent per-request, so two tabs can run two accounts at once. Stored in
+// sessionStorage (per-tab, survives F5, not shared across tabs). null = use the session default.
+const ACTIVE_ACCOUNT_HEADER = "X-Siftlode-Account";
+const ACTIVE_ACCOUNT_KEY = "siftlode.activeAccount";
+
+export function getActiveAccount(): number | null {
+  try {
+    const raw = sessionStorage.getItem(ACTIVE_ACCOUNT_KEY);
+    if (!raw) return null;
+    const n = Number(raw);
+    return Number.isFinite(n) ? n : null;
+  } catch {
+    return null;
+  }
+}
+export function setActiveAccount(id: number): void {
+  try {
+    sessionStorage.setItem(ACTIVE_ACCOUNT_KEY, String(id));
+  } catch {
+    /* ignore */
+  }
+}
+export function clearActiveAccount(): void {
+  try {
+    sessionStorage.removeItem(ACTIVE_ACCOUNT_KEY);
+  } catch {
+    /* ignore */
+  }
+}
+
 async function req(url: string, opts: RequestInit = {}, cfg: ReqConfig = {}): Promise<any> {
   const method = opts.method ?? "GET";
   const canRetry = cfg.idempotent ?? method === "GET";
@@ -274,9 +306,15 @@ async function req(url: string, opts: RequestInit = {}, cfg: ReqConfig = {}): Pr
   for (;;) {
     let r: Response;
     try {
+      const active = getActiveAccount();
       r = await fetch(url, {
         credentials: "include",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+          // Per-tab identity override (only setup calls pass their own headers, and those are
+          // pre-auth, so this is safe to put in the defaults that `...opts` may replace).
+          ...(active != null ? { [ACTIVE_ACCOUNT_HEADER]: String(active) } : {}),
+        },
         ...opts,
       });
     } catch (e) {
@@ -600,6 +638,10 @@ export const api = {
     req("/api/me/account", { method: "DELETE" }),
   switchAccount: (userId: number): Promise<{ ok: boolean; user_id: number }> =>
     req("/api/me/switch", { method: "POST", body: JSON.stringify({ user_id: userId }) }),
+  // Signs the current tab's active account out of the browser wallet (per-tab aware via the
+  // X-Siftlode-Account header that req() attaches).
+  logout: (): Promise<{ ok: boolean; switched: boolean }> =>
+    req("/auth/logout", { method: "POST" }),
   version: (): Promise<VersionInfo> => req("/api/version"),
   tags: (): Promise<Tag[]> => req("/api/tags"),
   status: (): Promise<SyncStatus> => req("/api/sync/status"),