portal-mojo 0.2.10 → 0.2.12

package/docs/ModelTable.md

@@ -1,7 +1,7 @@
 # ModelTable — the server-driven table
 
 ```ts
-import { ModelTable, ExpandingSearch, type Column, type Preset, type BatchAction, type RowId } from 'portal-mojo/ui';
+import { ModelTable, ExpandingSearch, type Column, type Preset, type BatchAction, type RowId, type ModelTableQuery, type ModelTableQueryAdapterProps } from 'portal-mojo/ui';
 ```
 
 ## Row identity
@@ -14,7 +14,7 @@ integer-id table is unaffected; nothing narrows an id back to `number`.
 
 Every sort, filter, search and page is a **wire param the server answers**
 — there is no client-side row work (rule #1). Table state lives in the
-URL-synced params store. All features below are opt-in props; a bare
+params store, synced to the URL by default. All features below are opt-in props; a bare
 `<ModelTable model={M} title columns />` renders the base table.
 
 ```tsx
@@ -37,6 +37,36 @@ URL-synced params store. All features below are opt-in props; a bare
 />
 ```
 
+## Local params for dialogs and multiple tables
+
+`paramsMode?: 'url' | 'local'` defaults to `'url'`. Use `'local'` for a table
+inside a dialog or beside another table on the same route:
+
+```tsx
+<ModelTable model={ScheduleModel} title="Schedule" columns={columns}
+    paramsMode="local" queryAdapter={ScopedRows}
+    fixedParams={{ kiosk: kioskId }} defaultParams={{ size: 5 }} />
+```
+
+A local instance starts on page 1 using its own defaults. It does not inherit
+the page's search, sort, filters or page size, and its controls never change
+the URL or another table's state. It uses the same params store, normalization,
+fixed-scope rules, controls and query adapter contract. No nested router is
+needed; it remains inside the application's existing router. Choose the mode
+at mount; unmount or change the table's React `key` to start fresh.
+
+`persistState` remains **false by default** in both modes. If explicitly enabled
+for a local table, saved state overrides its defaults without URL precedence
+or URL writes. Its default storage key is `local::${endpoint}`; supply a distinct
+`persistKey` for each independent saved view. Fixed params stay excluded from
+saved state. A scope change resets that instance to page 1 and clears selection;
+use a new React `key` when the entire local view should reset too. Local state
+does not itself isolate private rows: the query adapter still owns actor/scope
+checks and stale-data clearing.
+
+Components → **Private table query** includes two independent local tables
+beside the URL-backed table. Hide and reopen them to test fresh mounting.
+
 ## Columns
 
 `Column<T> = { key, label, sortable?, align?: 'start'|'center'|'end',
@@ -89,6 +119,54 @@ filter.
 - **Presets must not carry fixed keys** — their writes are scrubbed from
   filter state, so such a preset never matches as active.
 
+## Controlled query adapter
+
+`queryAdapter?: ComponentType<ModelTableQueryAdapterProps<T>>` replaces the
+built-in list query **entirely**. The default `useModelList` is not mounted:
+there is no generic query observer, fetch, or cache entry. Toolbar, filters,
+params state, persistence, paging, selection and row rendering stay shared.
+
+```tsx
+// Define once, OUTSIDE the page's render; inline component identities remount.
+function ScopedRows({ params, enabled, children }: ModelTableQueryAdapterProps<Row>) {
+    const query = usePrivateRows(params, enabled); // your scoped request hook
+    return children(query);
+}
+<ModelTable model={RowModel} columns={columns} title="Records"
+    queryAdapter={ScopedRows} fixedParams={{ group: groupId }} />
+```
+
+The adapter receives:
+
+- `params: Params`: the selected URL or local params, with model normalization applied and
+  `fixedParams` merged **last**. Do not create a second table-state store.
+- `enabled: boolean`: false until persisted state restores, or while
+  `fixedParams === null`. The adapter must honor this gate.
+- `children(query)`: render it with `{data?: {rows: T[], count: number},
+  status: 'pending' | 'success' | 'error', isFetching: boolean,
+  isPlaceholderData?: boolean, error?: unknown, refetch: () => unknown}`.
+
+The adapter owns sanitization, actor/scope identity, cancellation, final-send
+checks, cache choice and stale-response rejection. Media capability rows can
+stay in component state. Clear `data` synchronously when scope is invalid or
+changes; never return the previous actor's rows as current data. Keeping
+`data` on an ordinary background error preserves its authorized rows and
+shows a Retry alert. Clearing it removes those rows immediately. Pending
+scope hides rows and disables Refresh even if a misbehaving adapter retains data.
+
+Refresh and completed batches call the adapter's `refetch`. `autoRefresh`
+remains opt-in; no timer is introduced by controlled mode. Controlled exports
+require an explicit `exporter`; the generic download path is never used.
+Avoid persisting sensitive URL filter values; `persistState` is an explicit
+host choice. Live demo: Components → **Private table query**.
+
+## Row activation
+
+With `onRowClick`, the whole row is focusable and responds to click, Enter and
+Space. Native nested links, buttons, inputs and other interactive controls
+keep their own action; their click/key events do not also activate the row.
+The table retains native row/cell semantics.
+
 ## Filters (see also forms.md dialog types)
 
 `FilterDef` types: `text` (`__icontains`), `select`, `multiselect`
@@ -189,7 +267,10 @@ bounded, immediately sanitized, allowlisted client exports.
 Uncached loads (cold, page/sort/filter changes — `isPlaceholderData`)
 render the column-matched skeleton silhouette; cached pages render
 instantly; background refetches never blank the table. Errors render the
-server's message with a Retry. Empty-with-filters offers Clear filters.
+server's message with a Retry and replace the rows for default callers. Only
+a controlled adapter may retain authorized current data on a background error,
+showing an alert alongside those rows; clearing its data shows the full error
+state. Empty-with-filters offers Clear filters.
 
 ## Search
 

package/docs/account.md

@@ -163,6 +163,16 @@ wrong domain, cancelled; server text as written).
   `is_dob_verified`, `requires_password_change`, secrets, `has_password`,
   `has_passkey`, ….
 
+Profile actions retain their initiating account through auth refresh and fresh-auth
+retry. A caller change rejects before the final send and before publishing a
+response; returning to the original account does not revive an old action.
+This covers personal autosave, photo attachment, email/phone request and
+confirmation, verification, and linked-sign-in unlink. Email confirmation
+also checks before adopting its replacement session, including any wait for an
+in-flight refresh. `MeSaveModel` accepts a null id for the current caller;
+a supplied id must match that caller. Profile dialogs retain the opening
+account across their request/confirmation steps.
+
 So never post the `me` row back as-is — `MeSaveModel` posts only the changed
 fields. `has_password` is in the `me` graph; passwordless users set a first
 password through `/api/auth/forgot`.

package/docs/params.md

@@ -8,11 +8,11 @@ import {
 ```
 
 **THE architecture rule:** one flat params object owns search, sort,
-filters and paging for a table. It is URL-synced (real search string, hash
-router safe), drives the server query, the pills, preset matching, and
+filters and paging for a table. It is URL-synced by default (real search string,
+hash router safe), drives the server query, the pills, preset matching, and
 persistence. Components read it; nothing else holds table state.
 
-## `useTableParams(defaults?) → TableParamsApi`
+## `useTableParams(defaults?, defaultFilters?, excludeKeys?, mode?) → TableParamsApi`
 
 State: `search`, `sort` (`'field' | '-field' | ''`, default `'-created'`
 unless `defaults.sort`), `page` (1-based), `size`.
@@ -31,8 +31,22 @@ unless `defaults.sort`), `page` (1-based), `size`.
 | `setPage(n)` / `setSize(n)` | paging (`PAGE_SIZES = [5,10,25,50,100]`) |
 | `applySaved(saved)` | one-shot rehydrate from a persistence blob (below) |
 
-Every write goes through the URL (`replace`), so table state deep-links and
-survives reloads by construction.
+With the default `mode: 'url'`, every write goes through the URL (`replace`), so table state deep-links and
+survives reloads by construction. A size equal to the caller's effective
+`defaults.size` (10 when omitted) can be omitted from the URL; every other size
+is explicit. Thus choosing or restoring 10 with a caller default of 25 writes
+`size=10`, and the next render continues to show 10 rows.
+
+`mode: 'local'` selects an empty per-instance `URLSearchParams` held in React
+state. All state/filter/wire transformations above remain the same. Local
+instances start on page 1 with the supplied defaults, ignore route params,
+and never write the URL. Multiple instances on the same route are independent;
+changing the outer URL cannot change them. Choose the mode at mount and remount
+(or change the owner component's React `key`) to reset. The hook still runs
+inside the application's existing router. `TableParamsMode` is exported from
+both `portal-mojo/client` and `portal-mojo/client/runtime`.
+Unknown runtime mode values fall back to `'url'` with one console warning per
+mounted instance; valid and omitted modes do not warn.
 
 ## `excludeKeys` — the fixedParams scrub
 
@@ -74,6 +88,10 @@ Do not register a name that is also a model field.
 
 Precedence on restore: **URL > saved > defaults** per key — except `size`,
 a per-user viewing preference the URL merely echoes, where **saved wins**.
+Local instances start with no explicit params, so saved values override
+defaults without reading or changing the route. Persistence is still opt-in
+through ModelTable's `persistState` (default false); use distinct `persistKey`
+values for independent saved views. Fixed keys are excluded in either mode.
 Corrupt or other-version blobs are discarded AND cleared. `sort: ''`
 (deliberately un-sorted) is not persisted — the default sort returns.
 
@@ -81,5 +99,5 @@ Corrupt or other-version blobs are discarded AND cleared. `sort: ''`
 
 - Values are strings on the wire — booleans as `'true'/'false'`.
 - Never mutate `wire`; it's derived.
-- Don't store table state anywhere else (component state, context, redux
+- Don't create a second table-state store (component state, context, redux
   patterns) — that's the exact drift this store exists to prevent.

package/docs/realtime.md

@@ -17,7 +17,8 @@ disable this shared provider.
 - An open socket is not ready. The client waits for `auth_required`, then sends
   `{type:'authenticate',token,prefix:'bearer'}` and becomes ready only after
   `auth_success`. An auth error closes and suspends the connection until the
-  token value changes.
+  token value changes. The exact direct admission-capacity error described
+  below is a transport refusal, not an authentication failure.
 - Heartbeat is a `ping` every 20 seconds with a 10-second `pong` deadline.
   A server-initiated `{type:'ping'}` (django-mojo 1.32+ sends one every 20
   seconds and culls a socket silent for 90) is answered at once with
@@ -25,7 +26,11 @@ disable this shared provider.
   dispatched to consumers. Answering from the message handler keeps the socket
   alive while a background tab throttles the client's own ping timer.
   Reconnect uses capped jittered backoff. Pre-accept close code 4429 enforces at
-  least 60 seconds, and focus/visibility cannot bypass that deadline.
+  least 60 seconds. The direct `{type:'error',message:'Too many connections'}`
+  admission refusal while authenticating or ready uses the same delay, even
+  when followed by a normal server close. Focus/visibility, token replacement,
+  and provider remount cannot bypass the deadline on that client. Queued frames
+  from the refused socket are ignored; recovery still requires authentication.
 - Desired topics are refcounted and replay after authentication. Operations are
   serialized because acknowledgements carry only the topic and denial is a
   generic uncorrelated `error`. Denial yields topic status `denied`; it does not
@@ -42,6 +47,12 @@ disable this shared provider.
 
 A top-level `{type:'error'}` frame is attributed in order:
 
+0. **Exact admission capacity refusal** — `message === 'Too many connections'`
+   while authenticating or ready: close and enter bounded `backoff`, without
+   dispatching an application error or declaring account access revoked.
+   Substrings, the `error` field, and wrapped application events do not match.
+   Consumers retain their independent HTTP authorization checks.
+
 1. **During authentication** — auth failure: the client closes and suspends
    until the token value changes. Surfaces through the lifecycle status only;
    no `error` event is dispatched.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.10",
+    "version": "0.2.12",
     "description": "React portal toolkit for django-mojo — typed client + params store, mission-control UI, dependency-free SVG charts, admin section bundles.",
     "type": "module",
     "license": "Apache-2.0",

package/src/account/AccountSections.tsx

@@ -3,11 +3,11 @@
 // Each takes the signed-in `me` row and renders on its own — an app can
 // mount any of them outside the modal (e.g. a settings page).
 import { useQueryClient } from '@tanstack/react-query';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { forgotPassword, getDuid, isPasskeyRegistrationSupported, revokeOtherSessions, type Me } from '../client/runtime';
 import { Badge, FormView, fmt, modal, toast, useAvatarUrl } from '../ui';
 import type { Field } from '../client/runtime';
-import { disableTotp, type NotificationKind } from './api';
+import { disableTotp, unlinkOwnOAuthConnection, type NotificationKind } from './api';
 import {
     LoginEventModel, UserDeviceModel, browserLabel, deviceIcon,
     type LoginEventRow, type UserDeviceRow,
@@ -17,6 +17,7 @@ import {
     openEmailChangeDialog, openPhoneChangeDialog, openRecoveryCodesView, openRegenerateRecoveryCodes,
     openTotpEnrolDialog, openVerifyDialog,
 } from './dialogs';
+import { captureAccountActor } from './actor';
 import { MeSaveModel, OAuthConnectionModel, accountKeys, invalidateMe, useRecoveryCodeStatus } from './models';
 import { NotificationPreferences } from './NotificationPreferences';
 import { PasskeyList } from './PasskeyList';
@@ -138,24 +139,33 @@ const provider = (name: string) => PROVIDERS[name.toLowerCase()] ?? { label: nam
 /** The linked Google/Apple/… sign-ins, one row each, with Unlink. */
 export function LinkedSignIns({ userId }: { userId: number }) {
     const { data } = OAuthConnectionModel.useList({ user: userId, size: 10, sort: '-created' });
-    const del = OAuthConnectionModel.useDelete();
+    const qc = useQueryClient();
+    const [pending, setPending] = useState(false);
     const rows = data?.rows ?? [];
     if (rows.length === 0) return null;
 
     const unlink = async (id: number, label: string) => {
-        const ok = await modal.confirm({
-            title: `Unlink ${label}?`,
-            message: <>You won&rsquo;t be able to sign in with <b>{label}</b> until you sign in with it again from the sign-in page. Your {label} account itself is untouched.</>,
-            confirmText: 'Unlink',
-            danger: true,
-        });
-        if (!ok) return;
+        const actor = captureAccountActor(userId);
         try {
-            await del.mutateAsync({ id });
+            const ok = await modal.confirm({
+                title: `Unlink ${label}?`,
+                message: <>You won&rsquo;t be able to sign in with <b>{label}</b> until you sign in with it again from the sign-in page. Your {label} account itself is untouched.</>,
+                confirmText: 'Unlink',
+                danger: true,
+            });
+            if (!ok) return;
+            actor.check();
+            setPending(true);
+            await unlinkOwnOAuthConnection(id, actor.check);
+            actor.check();
+            void qc.invalidateQueries({ queryKey: [OAuthConnectionModel.endpoint] });
             toast.success(`${label} unlinked`);
         } catch (err) {
             // e.g. 400 "Cannot unlink your only login method. Set a password first." — as written.
             toast.error(accountErrorMessage(err));
+        } finally {
+            actor.dispose();
+            setPending(false);
         }
     };
 
@@ -170,7 +180,7 @@ export function LinkedSignIns({ userId }: { userId: number }) {
                             <span>Signed in with {p.label}{row.email && <> · <span className="dim">{row.email}</span></>}</span>
                         </div>
                         <div className="acct-row-actions">
-                            <button type="button" className="btn btn-compact" disabled={del.isPending} onClick={() => void unlink(row.id, p.label)}>Unlink</button>
+                            <button type="button" className="btn btn-compact" disabled={pending} onClick={() => void unlink(row.id, p.label)}>Unlink</button>
                         </div>
                     </div>
                 );

package/src/account/actor.ts

@@ -0,0 +1,40 @@
+// A pending profile action belongs to the account that started it, including
+// time spent waiting for auth refresh or a fresh-auth dialog. Same-account
+// token rotation remains valid; leaving that account invalidates the action
+// permanently, even if the operator switches back before the response arrives.
+import { getAuthSnapshot, subscribeAuth } from '../client/auth';
+
+export interface AccountActor {
+    uid: string | null;
+    check: () => void;
+    dispose: () => void;
+}
+
+export function captureAccountActor(expectedUid: string | number | null = getAuthSnapshot().uid): AccountActor {
+    const uid = expectedUid == null ? null : String(expectedUid);
+    const matches = () => {
+        const current = getAuthSnapshot();
+        return uid !== null && current.authenticated && current.uid === uid;
+    };
+    let invalid = !matches();
+    const off = subscribeAuth(() => { if (!matches()) invalid = true; });
+    return {
+        uid,
+        check: () => {
+            if (invalid || !matches()) throw new Error('Your account changed. Reopen your profile to make this change.');
+        },
+        dispose: () => { invalid = true; off(); },
+    };
+}
+
+export async function withAccountActor<T>(run: (actor: AccountActor) => Promise<T>, expectedUid?: string | number | null): Promise<T> {
+    const actor = captureAccountActor(expectedUid);
+    try {
+        actor.check();
+        const value = await run(actor);
+        actor.check();
+        return value;
+    } finally {
+        actor.dispose();
+    }
+}

package/src/account/api.ts

@@ -12,11 +12,11 @@
 // Wire authority: django-mojo account/rest/totp.py, rest/user.py,
 // rest/verify.py, rest/notification_prefs.py (read 2026-10-07).
 import { MojoError } from '../client/errors';
-import { mojoCall } from '../client/client';
-import { withFreshAuth } from '../client/auth';
+import { mojoCall, type FetchOpts } from '../client/client';
+import { withFreshAuth, confirmEmailChange as confirmEmailChangeAuth } from '../client/auth';
+import { withAccountActor } from './actor';
 
 export {
-    confirmEmailChange,
     isPasskeyRegistrationSupported,
     passkeyErrorMessage,
     registerPasskey,
@@ -132,15 +132,42 @@ export async function changePassword(currentPassword: string, newPassword: strin
 
 // ── Email / phone changes and verification ────────────────────────────
 
+// Profile dialogs may pass their opening actor's check, covering time between
+// the request and confirmation steps as well as each request's auth wait.
+async function profileCall(path: string, options: FetchOpts, check?: () => void, fresh = false) {
+    return withAccountActor(async (actor) => {
+        const beforeSend = () => { actor.check(); check?.(); };
+        beforeSend();
+        const send = () => mojoCall(path, { ...options, beforeSend });
+        const body = await (fresh ? withFreshAuth(send) : send());
+        beforeSend();
+        return body;
+    });
+}
+
+/** Caller-owned provider unlink. The opening account guard remains required. */
+export async function unlinkOwnOAuthConnection(id: number, check: () => void): Promise<void> {
+    await profileCall(`/api/account/oauth_connection/${id}`, { method: 'DELETE', unscoped: true }, check);
+}
+
+/** Confirm and adopt an email change only while its initiating account is current. */
+export async function confirmEmailChange(code: string, check?: () => void) {
+    return withAccountActor(async (actor) => {
+        const beforeSend = () => { actor.check(); check?.(); };
+        beforeSend();
+        return confirmEmailChangeAuth(code, beforeSend);
+    });
+}
+
 /**
  * `POST /api/auth/email/change/request {email, method:'code'}` (fresh auth).
  * A 6-digit code goes to the NEW address; finish with confirmEmailChange().
  */
-export async function requestEmailChange(email: string): Promise<string> {
-    const body = await withFreshAuth(() => mojoCall('/api/auth/email/change/request', {
+export async function requestEmailChange(email: string, check?: () => void): Promise<string> {
+    const body = await profileCall('/api/auth/email/change/request', {
         method: 'POST',
         body: { email, method: 'code' },
-    }));
+    }, check, true);
     return message(body, 'A verification code has been sent to your new email address.');
 }
 
@@ -154,37 +181,37 @@ export interface PhoneChangeTicket {
  * `POST /api/auth/phone/change/request {phone_number}` (fresh auth). The
  * session_token rides at the envelope's TOP level, not under `data`.
  */
-export async function requestPhoneChange(phoneNumber: string): Promise<PhoneChangeTicket> {
-    const body = await withFreshAuth(() => mojoCall('/api/auth/phone/change/request', {
+export async function requestPhoneChange(phoneNumber: string, check?: () => void): Promise<PhoneChangeTicket> {
+    const body = await profileCall('/api/auth/phone/change/request', {
         method: 'POST',
         body: { phone_number: phoneNumber },
-    }));
+    }, check, true);
     const token = (body as { session_token?: unknown }).session_token;
     if (typeof token !== 'string' || !token) throw new MojoError('The server did not return a phone change session', 0);
     return { sessionToken: token, message: message(body, 'A verification code has been sent to your new phone number.') };
 }
 
 /** `POST /api/auth/phone/change/confirm {session_token, code}` — commits + verifies the number. */
-export async function confirmPhoneChange(sessionToken: string, code: string): Promise<string> {
-    const body = await mojoCall('/api/auth/phone/change/confirm', {
+export async function confirmPhoneChange(sessionToken: string, code: string, check?: () => void): Promise<string> {
+    const body = await profileCall('/api/auth/phone/change/confirm', {
         method: 'POST',
         body: { session_token: sessionToken, code },
-    });
+    }, check);
     return message(body, 'Phone number updated successfully.');
 }
 
 /** `POST /api/auth/verify/{email|phone}/send` — a code (email asks for `method:'code'`). */
-export async function sendVerificationCode(channel: 'email' | 'phone'): Promise<string> {
-    const body = await mojoCall(`/api/auth/verify/${channel}/send`, {
+export async function sendVerificationCode(channel: 'email' | 'phone', check?: () => void): Promise<string> {
+    const body = await profileCall(`/api/auth/verify/${channel}/send`, {
         method: 'POST',
         body: channel === 'email' ? { method: 'code' } : {},
-    });
+    }, check);
     return message(body, 'Verification code sent');
 }
 
 /** `POST /api/auth/verify/{email|phone}/confirm {code}`. */
-export async function confirmVerificationCode(channel: 'email' | 'phone', code: string): Promise<string> {
-    const body = await mojoCall(`/api/auth/verify/${channel}/confirm`, { method: 'POST', body: { code } });
+export async function confirmVerificationCode(channel: 'email' | 'phone', code: string, check?: () => void): Promise<string> {
+    const body = await profileCall(`/api/auth/verify/${channel}/confirm`, { method: 'POST', body: { code } }, check);
     return message(body, channel === 'email' ? 'Email verified' : 'Phone verified');
 }
 

package/src/account/dialogs.tsx

@@ -30,6 +30,7 @@ import {
     requestEmailChange, requestPhoneChange, revokeOtherSessions, safeQrDataUrl, sendVerificationCode, startTotpSetup,
     suggestPasskeyName,
 } from './api';
+import { captureAccountActor, type AccountActor } from './actor';
 import { MeSaveModel, PasskeyModel, accountKeys, invalidateMe } from './models';
 
 export const FRESH_AUTH_COPY = 'For your security, sign in again to make this change.';
@@ -517,11 +518,12 @@ function ChangePasswordDialog({ lock, close }: { lock: DismissLock; close: (valu
 
 export function openEmailChangeDialog(): Promise<boolean> {
     const lock = newLock();
-    return modal.open<boolean | null>((close) => <EmailChangeDialog lock={lock} close={close} />, { size: 'sm', canDismiss: () => !lock.locked })
-        .then((v) => v === true);
+    const actor = captureAccountActor();
+    return modal.open<boolean | null>((close) => <EmailChangeDialog actor={actor} lock={lock} close={close} />, { size: 'sm', canDismiss: () => !lock.locked })
+        .then((v) => v === true).finally(actor.dispose);
 }
 
-function EmailChangeDialog({ lock, close }: { lock: DismissLock; close: (value: boolean | null) => void }) {
+function EmailChangeDialog({ actor, lock, close }: { actor: AccountActor; lock: DismissLock; close: (value: boolean | null) => void }) {
     const qc = useQueryClient();
     const me = useMe().data;
     const [email, setEmail] = useState('');
@@ -540,7 +542,7 @@ function EmailChangeDialog({ lock, close }: { lock: DismissLock; close: (value:
         setBusy(true);
         setError('');
         try {
-            setNotice(await requestEmailChange(target));
+            setNotice(await requestEmailChange(target, actor.check));
             setSentTo(target);
         } catch (err) {
             setError(accountErrorMessage(err));
@@ -554,7 +556,7 @@ function EmailChangeDialog({ lock, close }: { lock: DismissLock; close: (value:
         setBusy(true);
         setError('');
         try {
-            await confirmEmailChange(code);
+            await confirmEmailChange(code, actor.check);
             await invalidateMe(qc);
             toast.success('Email changed');
             close(true);
@@ -607,11 +609,12 @@ function EmailChangeDialog({ lock, close }: { lock: DismissLock; close: (value:
 
 export function openPhoneChangeDialog(): Promise<boolean> {
     const lock = newLock();
-    return modal.open<boolean | null>((close) => <PhoneChangeDialog lock={lock} close={close} />, { size: 'sm', canDismiss: () => !lock.locked })
-        .then((v) => v === true);
+    const actor = captureAccountActor();
+    return modal.open<boolean | null>((close) => <PhoneChangeDialog actor={actor} lock={lock} close={close} />, { size: 'sm', canDismiss: () => !lock.locked })
+        .then((v) => v === true).finally(actor.dispose);
 }
 
-function PhoneChangeDialog({ lock, close }: { lock: DismissLock; close: (value: boolean | null) => void }) {
+function PhoneChangeDialog({ actor, lock, close }: { actor: AccountActor; lock: DismissLock; close: (value: boolean | null) => void }) {
     const qc = useQueryClient();
     const me = useMe().data;
     const current = typeof me?.phone_number === 'string' && me.phone_number ? me.phone_number : null;
@@ -632,7 +635,7 @@ function PhoneChangeDialog({ lock, close }: { lock: DismissLock; close: (value:
         setBusy(true);
         setError('');
         try {
-            const result = await requestPhoneChange(target);
+            const result = await requestPhoneChange(target, actor.check);
             setTicket({ token: result.sessionToken, to: target, message: result.message });
             setCode('');
         } catch (err) {
@@ -648,7 +651,7 @@ function PhoneChangeDialog({ lock, close }: { lock: DismissLock; close: (value:
         setBusy(true);
         setError('');
         try {
-            await confirmPhoneChange(ticket.token, code);
+            await confirmPhoneChange(ticket.token, code, actor.check);
             await invalidateMe(qc);
             toast.success(current ? 'Phone number changed' : 'Phone number added');
             close(true);
@@ -703,11 +706,12 @@ function PhoneChangeDialog({ lock, close }: { lock: DismissLock; close: (value:
 
 export function openVerifyDialog(channel: 'email' | 'phone'): Promise<boolean> {
     const lock = newLock();
-    return modal.open<boolean | null>((close) => <VerifyDialog channel={channel} lock={lock} close={close} />, { size: 'sm', canDismiss: () => !lock.locked })
-        .then((v) => v === true);
+    const actor = captureAccountActor();
+    return modal.open<boolean | null>((close) => <VerifyDialog channel={channel} actor={actor} lock={lock} close={close} />, { size: 'sm', canDismiss: () => !lock.locked })
+        .then((v) => v === true).finally(actor.dispose);
 }
 
-function VerifyDialog({ channel, lock, close }: { channel: 'email' | 'phone'; lock: DismissLock; close: (value: boolean | null) => void }) {
+function VerifyDialog({ actor, channel, lock, close }: { actor: AccountActor; channel: 'email' | 'phone'; lock: DismissLock; close: (value: boolean | null) => void }) {
     const qc = useQueryClient();
     const me = useMe().data;
     const target = String((channel === 'email' ? me?.email : me?.phone_number) ?? '');
@@ -722,7 +726,7 @@ function VerifyDialog({ channel, lock, close }: { channel: 'email' | 'phone'; lo
         setBusy(true);
         setError('');
         try {
-            setSent(await sendVerificationCode(channel));
+            setSent(await sendVerificationCode(channel, actor.check));
         } catch (err) {
             setError(accountErrorMessage(err));
         } finally {
@@ -735,7 +739,7 @@ function VerifyDialog({ channel, lock, close }: { channel: 'email' | 'phone'; lo
         setBusy(true);
         setError('');
         try {
-            const message = await confirmVerificationCode(channel, code);
+            const message = await confirmVerificationCode(channel, code, actor.check);
             await invalidateMe(qc);
             toast.success(message);
             close(true);
@@ -770,11 +774,12 @@ function VerifyDialog({ channel, lock, close }: { channel: 'email' | 'phone'; lo
 
 export function openAvatarDialog(): Promise<unknown> {
     const lock = newLock();
-    return modal.open((close) => <AvatarDialog lock={lock} close={() => close(null)} />, { size: 'md', canDismiss: () => !lock.locked });
+    const actor = captureAccountActor();
+    return modal.open((close) => <AvatarDialog actor={actor} lock={lock} close={() => close(null)} />, { size: 'md', canDismiss: () => !lock.locked }).finally(actor.dispose);
 }
 
 /** Personal-scope upload → `POST /api/user/me {avatar: <File id> | null}` (MeSaveModel). */
-function AvatarDialog({ lock, close }: { lock: DismissLock; close: () => void }) {
+function AvatarDialog({ actor, lock, close }: { actor: AccountActor; lock: DismissLock; close: () => void }) {
     const me = useMe().data as Me | undefined;
     const save = MeSaveModel.useSave();
     const [busy, setBusy] = useState(false);
@@ -787,7 +792,9 @@ function AvatarDialog({ lock, close }: { lock: DismissLock; close: () => void })
     const attach = async (avatar: number | null) => {
         setBusy(true);
         try {
-            const saved = await save.mutateAsync({ id: me?.id ?? null, changes: { avatar } });
+            actor.check();
+            const saved = await save.mutateAsync({ id: actor.uid, changes: { avatar } });
+            actor.check();
             setOwnerResult({ generation: ++generation.current, status: 'success', requestedValue: avatar, authoritativeValue: saved.avatar ?? null });
             if ((saved.avatar?.id ?? null) !== avatar) throw new Error('The server did not confirm the new photo');
             toast.success(avatar == null ? 'Photo removed' : 'Photo updated');

package/src/account/models.ts

@@ -8,9 +8,10 @@
 // through — and the account-only query keys.
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
-    mojoSave, sanitizeMe, useAuthSnapshot, withFreshAuth,
+    mojoCall, sanitizeMe, useAuthSnapshot, withFreshAuth,
     type Me, type SaveVars,
 } from '../client/runtime';
+import { withAccountActor } from './actor';
 import { getNotificationPreferences, getRecoveryCodeStatus, type NotificationPreferencesResponse, type RecoveryCodeStatus } from './api';
 
 // ── /api/user/me ──────────────────────────────────────────────────────
@@ -21,18 +22,24 @@ import { getNotificationPreferences, getRecoveryCodeStatus, type NotificationPre
  * 403s email/username/is_superuser/permissions even unchanged), sanitizes
  * the answer with sanitizeMe, writes `['me', uid]` and refreshes every
  * `/api/user` cache (UserModel.useSave never touches `me`, and vice versa).
- * The `id` in SaveVars is ignored: the endpoint is always the caller.
+ * The endpoint is always the caller. A supplied id must match that caller;
+ * actor checks fence the final send, fresh-auth retry, and cache publication.
  */
 export const MeSaveModel = {
     useSave: () => {
         const qc = useQueryClient();
         const { uid } = useAuthSnapshot();
         return useMutation<Me, Error, SaveVars>({
-            mutationFn: async ({ changes }: SaveVars) => sanitizeMe(await withFreshAuth(() => mojoSave<Me>('/api/user/me', null, changes))),
-            onSuccess: (row) => {
-                qc.setQueryData(['me', uid], row);
+            mutationFn: ({ id, changes }: SaveVars) => withAccountActor(async (actor) => {
+                const body = await withFreshAuth(() => mojoCall('/api/user/me', {
+                    method: 'POST', body: changes, beforeSend: actor.check,
+                }));
+                actor.check();
+                const row = sanitizeMe(body.data as Me);
+                qc.setQueryData(['me', actor.uid], row);
                 void qc.invalidateQueries({ queryKey: ['/api/user'] });
-            },
+                return row;
+            }, id ?? uid),
         });
     },
 };

package/src/client/auth.ts

@@ -330,12 +330,13 @@ export const GRANT_SIGN_IN_AGAIN = 'Sign in again to continue';
  * access + refresh pair. Serialised behind any in-flight refresh so a
  * refresh that started on the old session can never land on top of it.
  */
-async function adoptGrant(data: TokenGrant | null | undefined, remember = true, event: 'login' | 'rotated' = 'login'): Promise<AuthUser> {
+async function adoptGrant(data: TokenGrant | null | undefined, remember = true, event: 'login' | 'rotated' = 'login', check?: () => void): Promise<AuthUser> {
     if (!data || typeof data.access_token !== 'string' || !data.access_token
         || typeof data.refresh_token !== 'string' || !data.refresh_token) {
         throw new Error(GRANT_SIGN_IN_AGAIN);
     }
     if (refreshPromise) await refreshPromise;
+    check?.();
     setTokens(data.access_token, data.refresh_token, remember);
     startAutoRefresh();
     const user = data.user ?? {};
@@ -686,9 +687,11 @@ export function passkeyErrorMessage(error: unknown): string {
  * adopted here into the storage this session already uses. Emits 'rotated'
  * (never 'login': no explicit sign-in happened).
  */
-export async function confirmEmailChange(code: string): Promise<AuthUser> {
-    const body = await mojoCall('/api/auth/email/change/confirm', { method: 'POST', body: { code } });
-    return adoptGrant(body.data as TokenGrant, sessionIsPersistent(), 'rotated');
+export async function confirmEmailChange(code: string, check?: () => void): Promise<AuthUser> {
+    const body = await mojoCall('/api/auth/email/change/confirm', { method: 'POST', body: { code }, beforeSend: check });
+    // Account dialogs fence both dispatch and adoption of the returned login.
+    check?.();
+    return adoptGrant(body.data as TokenGrant, sessionIsPersistent(), 'rotated', check);
 }
 
 /**

package/src/client/params.ts

@@ -7,7 +7,7 @@
 //   · multi-value filters collapse to `field__in=a,b` (single value → `field`)
 //   · a daterange is the TRIPLE `dr_field` / `dr_start` / `dr_end`, so only
 //     one range can be active at a time — by construction, not by convention.
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import type { Params } from './types';
 
@@ -27,6 +27,8 @@ export interface TableParams {
     size: number;
 }
 
+export type TableParamsMode = 'url' | 'local';
+
 export interface TableParamsApi extends TableParams {
     wire: Params;
     activeFilters: ActiveFilter[];
@@ -139,8 +141,19 @@ export function useTableParams(
     // resurface as a removable pill. Pass a render-stable Set — it is a
     // memo dependency.
     excludeKeys?: ReadonlySet<string>,
+    // Select once per mount. Local tables use this same store/transforms,
+    // with an empty per-instance source instead of the route's query string.
+    mode: TableParamsMode = 'url',
 ): TableParamsApi {
-    const [sp, setSp] = useSearchParams();
+    const warnedMode = useRef(false);
+    const resolvedMode = mode === 'local' ? 'local' : 'url';
+    if (mode !== 'url' && mode !== 'local' && !warnedMode.current) {
+        warnedMode.current = true;
+        console.warn(`[portal-mojo] useTableParams: unknown mode "${String(mode)}" — falling back to 'url'`);
+    }
+    const [urlParams, setUrlParams] = useSearchParams();
+    const [localParams, setLocalParams] = useState(() => new URLSearchParams());
+    const sp = resolvedMode === 'local' ? localParams : urlParams;
     // Defaults seed only the untouched route. Once this table writes params,
     // an intentionally empty filter set must stay empty ("Clear all" must
     // not immediately resurrect a route default).
@@ -175,7 +188,9 @@ export function useTableParams(
         if (next.search) out.set('search', next.search);
         if (next.sort) out.set('sort', next.sort);
         if (next.page > 1) out.set('page', String(next.page));
-        if (next.size !== DEFAULT_SIZE) out.set('size', String(next.size));
+        // Omit only the effective default. Omitting the global default (10)
+        // would resurrect a caller's different default on the next render.
+        if (next.size !== (defaults.size ?? DEFAULT_SIZE)) out.set('size', String(next.size));
         for (const [key, value] of Object.entries(nextFilters)) {
             if (value !== '') out.set(key, value);
         }
@@ -185,8 +200,9 @@ export function useTableParams(
             const carried = sp.get(key);
             if (carried != null) out.set(key, carried);
         }
-        setSp(out, { replace: true });
-    }, [setSp, sp]);
+        if (resolvedMode === 'local') setLocalParams(out);
+        else setUrlParams(out, { replace: true });
+    }, [resolvedMode, setUrlParams, sp, defaults.size]);
 
     const wire = useMemo<Params>(() => ({
         start: (state.page - 1) * state.size,

package/src/client/realtime.ts

@@ -241,6 +241,12 @@ export class RealtimeClient {
     private open(): void {
         if (!this.enabled || !this.token || this.suspended || this.socket) return;
         const run = this.generation;
+        // Token refresh and provider remount use this same entry point; neither
+        // may bypass a server admission deadline.
+        if (this.clock.now() < this.extendedBackoffUntil) {
+            this.scheduleReconnect(run, 0);
+            return;
+        }
         this.setLifecycle('connecting');
         let socket: RealtimeSocket;
         try {
@@ -312,6 +318,21 @@ export class RealtimeClient {
             if (typeof frame.topic === 'string') this.completeTopic(frame.type, frame.topic);
             return;
         }
+        if (frame.type === 'error' && frame.message === 'Too many connections'
+            && (this.lifecycle === 'authenticating' || this.lifecycle === 'ready')) {
+            // django-mojo's admission refusal also arrives after the challenge
+            // (or a ready-state capacity check), followed by a normal close.
+            // Fence queued frames before closing: late auth_success must not
+            // clear the deadline or make this refused socket ready.
+            this.extendedBackoffUntil = this.clock.now() + 60_000;
+            this.socket = null;
+            this.clearHeartbeat();
+            this.resetTopicConnectionState();
+            this.automaticUserTopic = null;
+            this.scheduleReconnect(run, 4429);
+            socket.close(4429, 'Connection limit');
+            return;
+        }
         if (frame.type === 'error') {
             if (this.lifecycle === 'authenticating') {
                 this.suspend('auth-failed', 4003, 'Authentication failed');

package/src/ui/ModelTable.tsx

@@ -17,9 +17,9 @@
 //   · groupBy — synthetic header rows interleaved on key change; falsy key
 //     = ungrouped tail (see ui/grouping.ts helpers)
 //   · exportFormats — server-side export via download_format (csv/json)
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type ComponentType, type Dispatch, type SetStateAction } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { PAGE_SIZES, useTableParams, readTableState, writeTableState, clearTableState, type PersistedTableState } from '../client/params';
+import { PAGE_SIZES, useTableParams, readTableState, writeTableState, clearTableState, type PersistedTableState, type TableParamsMode } from '../client/params';
 import { useModelList } from '../client/hooks';
 import { mojoDownload } from '../client/client';
 import type { ModelDef } from '../client/model';
@@ -100,6 +100,12 @@ function defaultCell(value: unknown, key: string): string {
     return String(value);
 }
 
+/** Nested controls retain their own action; plain cells activate the row. */
+function isRowControl(target: EventTarget, row: HTMLTableRowElement): boolean {
+    return target instanceof Element && target !== row
+        && target.closest('button, a, input, select, textarea, summary, [role="button"], [role="link"], [contenteditable="true"]') !== null;
+}
+
 /** Page-number window: {1, total, current±1} with … for the gaps. */
 function pageWindow(current: number, total: number): (number | '…')[] {
     const keep = new Set<number>([1, total]);
@@ -221,16 +227,30 @@ function MenuDropdown({ button, children, align = 'end' }: {
  */
 export type RowId = number | string;
 
-export function ModelTable<T extends { id: RowId }>({
-    model, endpoint, columns, filters = [], presets = [], eyebrow, title,
-    searchable = true, searchPlaceholder = 'Search…', onRowClick, addLabel, onAdd, defaultSort, defaultParams, fixedParams,
-    selectable = false, batchActions = [],
-    columnChooser = false, persistState = false, persistKey,
-    autoRefresh = 0,
-    rowExpand, rowExpandMultiple = false,
-    groupBy, groupHeaderLabel, groupHeaderStyle = 'banner',
-    exportFormats = [], exporter, rowTone,
-}: {
+/** Controlled query result. An omitted data value clears previously rendered rows. */
+export interface ModelTableQuery<T> {
+    data?: { rows: T[]; count: number };
+    status: 'pending' | 'success' | 'error';
+    isFetching: boolean;
+    isPlaceholderData?: boolean;
+    error?: unknown;
+    refetch: () => unknown;
+}
+
+/** A stable component that owns fetching/caching and renders the shared table. */
+export interface ModelTableQueryAdapterProps<T> {
+    /** Model-normalized table state, with fixedParams applied last. */
+    params: Params;
+    /** False until persistence is hydrated or while fixedParams is null. */
+    enabled: boolean;
+    children: (query: ModelTableQuery<T>) => ReactNode;
+}
+
+export interface ModelTableProps<T extends { id: RowId }> {
+    /** Replaces the default query entirely. Define the component outside render. */
+    queryAdapter?: ComponentType<ModelTableQueryAdapterProps<T>>;
+    /** Default 'url'. 'local' starts fresh per mount, without reading/writing route params. */
+    paramsMode?: TableParamsMode;
     /** A defineModel definition — supplies the endpoint (and, later, schema). */
     model?: ModelDef<T>;
     /** Bare endpoint, for tables without a model definition. */
@@ -246,10 +266,10 @@ export function ModelTable<T extends { id: RowId }>({
     onRowClick?: (row: T) => void;
     addLabel?: string;
     onAdd?: () => void;
-    /** Initial sort when the URL doesn't carry one (default '-created'). */
+    /** Initial sort when the params store doesn't carry one (default '-created'). */
     defaultSort?: string;
     /**
-     * Initial URL-backed query state. URL keys win; persisted state wins over
+     * Initial query state. URL keys win in URL mode; persisted state wins over
      * these defaults. `defaultSort` remains as the backwards-compatible
      * shorthand and wins over `defaultParams.sort` when both are supplied.
      */
@@ -269,7 +289,7 @@ export function ModelTable<T extends { id: RowId }>({
     batchActions?: BatchAction<T>[];
     columnChooser?: boolean;
     persistState?: boolean;
-    /** Storage identity; default derives from route + endpoint. */
+    /** Storage identity; defaults to route + endpoint, or local::endpoint in local mode. */
     persistKey?: string;
     /** Interval refetch in SECONDS (5s floor). 0/absent = off. */
     autoRefresh?: number;
@@ -286,15 +306,12 @@ export function ModelTable<T extends { id: RowId }>({
     exporter?: (format: 'csv' | 'json', normalizedParams: Params) => Promise<void>;
     /** Semantic queue emphasis without coupling callers to table CSS. */
     rowTone?: (row: T) => RowTone | null;
-}) {
+}
+
+export function ModelTable<T extends { id: RowId }>(props: ModelTableProps<T>) {
+    const { model, endpoint, columns, defaultSort, defaultParams, fixedParams, searchable = true, persistState = false, persistKey, queryAdapter: Adapter, paramsMode = 'url' } = props;
     const resolvedEndpoint = model?.endpoint ?? endpoint;
     if (!resolvedEndpoint) throw new Error('ModelTable: pass `model` or `endpoint`');
-    if (!GROUP_HEADER_STYLES.includes(groupHeaderStyle)) {
-        console.warn(`ModelTable: unknown groupHeaderStyle "${groupHeaderStyle}" — falling back to 'banner'`);
-        groupHeaderStyle = 'banner';
-    }
-
-    const qc = useQueryClient();
     const paramDefaults = useMemo(() => ({
         ...(defaultParams?.search != null ? { search: String(defaultParams.search) } : {}),
         ...(defaultParams?.size != null ? { size: Number(defaultParams.size) } : {}),
@@ -319,10 +336,10 @@ export function ModelTable<T extends { id: RowId }>({
             warnOnce(`ModelTable: "${key}" is in both fixedParams and defaultParams — the defaultParams copy is dead (fixed wins on the wire); remove it`);
         }
     }
-    const p = useTableParams(paramDefaults, defaultFilters, fixedKeys);
+    const p = useTableParams(paramDefaults, defaultFilters, fixedKeys, paramsMode);
 
     // ── View persistence (WM-035): restore once BEFORE the first fetch ──
-    const storageKey = persistKey ?? `${(typeof location !== 'undefined' ? location.hash.split('?')[0] : '') || '#/'}::${resolvedEndpoint}`;
+    const storageKey = persistKey ?? (paramsMode === 'local' ? `local::${resolvedEndpoint}` : `${(typeof location !== 'undefined' ? location.hash.split('?')[0] : '') || '#/'}::${resolvedEndpoint}`);
     const [hiddenCols, setHiddenCols] = useState<Set<string>>(() => new Set());
     const [hydrated, setHydrated] = useState(!persistState);
     const restoreRan = useRef(false);
@@ -355,14 +372,57 @@ export function ModelTable<T extends { id: RowId }>({
         model?.normalizeListParams ? model.normalizeListParams(tableParams) : tableParams,
         fixedParams,
     );
-    // fixedParams === null means "scope pending" — hold the query so no
-    // unscoped request is ever fired or cached. undefined = unscoped table.
-    const query = useModelList<T>(resolvedEndpoint, listParams, {
-        enabled: hydrated && fixedParams !== null,
-        sanitizeRow: model?.sanitizeRow,
-    });
-    const rows = useMemo(() => query.data?.rows ?? [], [query.data]);
-    const count = query.data?.count ?? 0;
+    const enabled = hydrated && fixedParams !== null;
+    const render = (query: ModelTableQuery<T>) => (
+        <ModelTableView {...props} query={query} context={{ p, hydrated, hiddenCols, setHiddenCols, storageKey, listParams, fixedSignature, resolvedEndpoint, enabled }} />
+    );
+    return Adapter
+        ? <Adapter params={listParams} enabled={enabled}>{render}</Adapter>
+        : <DefaultTableQuery endpoint={resolvedEndpoint} params={listParams} enabled={enabled} sanitizeRow={model?.sanitizeRow}>{render}</DefaultTableQuery>;
+}
+
+function DefaultTableQuery<T>({ endpoint, params, enabled, sanitizeRow, children }: ModelTableQueryAdapterProps<T> & {
+    endpoint: string;
+    sanitizeRow?: (row: T) => T;
+}) {
+    const query = useModelList<T>(endpoint, params, { enabled, sanitizeRow });
+    return children(query);
+}
+
+interface ModelTableContext {
+    p: ReturnType<typeof useTableParams>;
+    hydrated: boolean;
+    hiddenCols: Set<string>;
+    setHiddenCols: Dispatch<SetStateAction<Set<string>>>;
+    storageKey: string;
+    listParams: Params;
+    fixedSignature: string;
+    resolvedEndpoint: string;
+    enabled: boolean;
+}
+
+function ModelTableView<T extends { id: RowId }>(props: ModelTableProps<T> & {
+    query: ModelTableQuery<T>;
+    context: ModelTableContext;
+}) {
+    const {
+        columns, filters = [], presets = [], eyebrow, title,
+        searchable = true, searchPlaceholder = 'Search…', onRowClick, addLabel, onAdd,
+        selectable = false, batchActions = [],
+        columnChooser = false, persistState = false,
+        autoRefresh = 0,
+        rowExpand, rowExpandMultiple = false,
+        groupBy, groupHeaderLabel, groupHeaderStyle: requestedGroupHeaderStyle = 'banner',
+        exportFormats = [], exporter, rowTone,
+    } = props;
+    const { query, context: { p, hydrated, hiddenCols, setHiddenCols, storageKey, listParams, fixedSignature, resolvedEndpoint, enabled } } = props;
+    const qc = useQueryClient();
+    const groupHeaderStyle = GROUP_HEADER_STYLES.includes(requestedGroupHeaderStyle) ? requestedGroupHeaderStyle : 'banner';
+    if (groupHeaderStyle !== requestedGroupHeaderStyle) {
+        warnOnce(`ModelTable: unknown groupHeaderStyle "${requestedGroupHeaderStyle}" — falling back to 'banner'`);
+    }
+    const rows = useMemo(() => enabled ? query.data?.rows ?? [] : [], [query.data, enabled]);
+    const count = enabled ? query.data?.count ?? 0 : 0;
     const totalPages = Math.max(1, Math.ceil(count / p.size));
     const firstRow = count === 0 ? 0 : (p.page - 1) * p.size + 1;
     const lastRow = Math.min(count, (p.page - 1) * p.size + rows.length);
@@ -479,7 +539,8 @@ export function ModelTable<T extends { id: RowId }>({
                 toast.error(err instanceof Error ? err.message : `${action.label} failed`);
             }
             setSelected(new Set());
-            void qc.invalidateQueries({ queryKey: [resolvedEndpoint] });
+            if (props.queryAdapter) void query.refetch();
+            else void qc.invalidateQueries({ queryKey: [resolvedEndpoint] });
             return;
         }
         const results = await Promise.allSettled(targets.map((row) => action.run!(row, prepared)));
@@ -491,7 +552,8 @@ export function ModelTable<T extends { id: RowId }>({
         // Always clear + refetch on a non-cancel path so the user sees the
         // partial state after failures.
         setSelected(new Set());
-        void qc.invalidateQueries({ queryKey: [resolvedEndpoint] });
+        if (props.queryAdapter) void query.refetch();
+        else void qc.invalidateQueries({ queryKey: [resolvedEndpoint] });
     };
 
     // ── Row expand ───────────────────────────────────────────────────────
@@ -526,7 +588,7 @@ export function ModelTable<T extends { id: RowId }>({
     refetchRef.current = query.refetch;
     const selectedRef = useRef(selected);
     selectedRef.current = selected;
-    const autoRefreshMs = autoRefresh > 0 ? Math.max(5, autoRefresh) * 1000 : 0;
+    const autoRefreshMs = enabled && autoRefresh > 0 ? Math.max(5, autoRefresh) * 1000 : 0;
     useEffect(() => {
         if (!autoRefreshMs) return;
         const skip = () =>
@@ -610,7 +672,17 @@ export function ModelTable<T extends { id: RowId }>({
                         isExpanded ? 'row-expanded' : '',
                         tone ? `row-tone-${tone}` : '',
                     ].filter(Boolean).join(' ') || undefined}
-                    onClick={onRowClick ? () => onRowClick(row) : undefined}
+                    tabIndex={onRowClick ? 0 : undefined}
+                    onClick={onRowClick ? (event) => {
+                        if (event.defaultPrevented || isRowControl(event.target, event.currentTarget)) return;
+                        onRowClick(row);
+                    } : undefined}
+                    onKeyDown={onRowClick ? (event) => {
+                        if (event.target !== event.currentTarget || event.defaultPrevented || event.repeat) return;
+                        if (event.key !== 'Enter' && event.key !== ' ') return;
+                        event.preventDefault();
+                        onRowClick(row);
+                    } : undefined}
                 >
                     {expandEnabled && (
                         <td className="col-expand" onClick={(e) => e.stopPropagation()}>
@@ -710,9 +782,9 @@ export function ModelTable<T extends { id: RowId }>({
                                 )}
                             </MenuDropdown>
                         )}
-                        {exportFormats.length > 0 && (
+                        {exportFormats.length > 0 && (!props.queryAdapter || exporter) && (
                             <MenuDropdown button={(open, toggle) => (
-                                <button className="btn btn-compact" onClick={toggle} aria-expanded={open} title="Export">
+                                <button className="btn btn-compact" disabled={!enabled} onClick={toggle} aria-expanded={open} title="Export">
                                     <i className="bi bi-download" /> <span className="btn-label">Export</span>
                                 </button>
                             )}>
@@ -729,6 +801,7 @@ export function ModelTable<T extends { id: RowId }>({
                         <button
                             className="btn-icon"
                             title={autoRefreshMs > 0 ? `Refresh · auto every ${Math.round(autoRefreshMs / 1000)}s` : 'Refresh'}
+                            disabled={!enabled}
                             onClick={() => query.refetch()}
                         >
                             <i className={`bi bi-arrow-repeat${query.isFetching ? ' spin' : ''}`} />
@@ -786,6 +859,13 @@ export function ModelTable<T extends { id: RowId }>({
                 </div>
             )}
 
+            {props.queryAdapter && enabled && query.status === 'error' && query.data && (
+                <div className="form-alert" role="alert">
+                    {query.error instanceof Error ? query.error.message : 'Could not refresh records'}{' '}
+                    <button className="btn btn-compact" onClick={() => query.refetch()}>Retry</button>
+                </div>
+            )}
+
             <div className="tbl-scroll">
                 <table className="tbl">
                     <thead>
@@ -820,7 +900,7 @@ export function ModelTable<T extends { id: RowId }>({
                             change still serving the previous key's rows
                             (isPlaceholderData). Background refetches of the
                             SAME key (autoRefresh) keep the live rows. */}
-                        {query.isPending || query.isPlaceholderData || !hydrated ? (
+                        {query.status === 'pending' || query.isPlaceholderData || !enabled ? (
                             Array.from({ length: Math.min(p.size, 8) }).map((_, i) => (
                                 <tr key={i} className="skel-row" aria-hidden="true">
                                     {expandEnabled && <td className="col-expand" />}
@@ -842,7 +922,7 @@ export function ModelTable<T extends { id: RowId }>({
                                     ))}
                                 </tr>
                             ))
-                        ) : query.isError ? (
+                        ) : query.status === 'error' && (!props.queryAdapter || !query.data) ? (
                             <tr><td colSpan={totalCols}>
                                 <div className="empty-state">
                                     <i className="bi bi-exclamation-triangle" />