portal-mojo 0.2.11 → 0.2.13

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/charts.md

@@ -69,6 +69,55 @@ Legend entries toggle series; hover shows the crosshair index tooltip;
 ticks are "nice"-rounded; container width is measured (no viewBox
 smearing).
 
+Sparse histories can opt into numeric X positions without changing categorical
+callers:
+
+```tsx
+<SeriesChart
+    labels={['10:01', '10:02', '10:03', '10:12', '10:13']}
+    xValues={[60, 120, 180, 720, 780]}
+    xDomain={[0, 900]}
+    maxGap={180}
+    datasets={[{ label: 'CPU', data: [12, 24, null, 40, 32] }]}
+    minValue={0} maxValue={100}
+    ariaLabel="Kiosk CPU history"
+    valueFormatter={(value) => `${value}%`}
+    onInspect={(index) => { /* selected original sample index, or null */ }}
+/>
+```
+
+- `Dataset.data` accepts `(number | null | undefined)[]`. Null, undefined,
+  `NaN`, and infinities are unavailable: no zero substitution, connecting
+  line, area fill across the gap, bar, or inspection dot. Tooltips say
+  **Unavailable**; incomplete stacked totals do too. A one-point run always
+  has a dot, even above 40 labels or with routine `showDots={false}`.
+- `xValues?: number[]` aligns with the original labels/data indices. Supply
+  ordered timestamps (seconds or milliseconds both work); labels are display
+  strings only. Numeric spacing uses actual values. A missing/nonfinite X
+  breaks the run and cannot be inspected. Reversed X movement breaks the run.
+  With no `xValues`, the existing evenly spaced category centers remain.
+- `xDomain?: [number, number]` fixes the visible window, including empty time
+  before/after the samples. Out-of-window samples are omitted from drawing,
+  inspection, and automatic Y scaling. Omit it to fit the finite X values;
+  a single distinct X is centered. Invalid/reversed domains fall back to fit.
+- `maxGap?: number` breaks line/area runs when the distance between consecutive
+  numeric X values exceeds the limit, in the **same units** as `xValues`.
+  It does not synthesize timestamps or missing buckets. Omit it for no extra
+  distance threshold. Negative/nonfinite limits are ignored.
+- `minValue` and `maxValue` set exact finite Y bounds; omitted ends are
+  automatically scaled. Geometry is clipped at the plot bounds. A reversed
+  pair falls back to automatic bounds. Percentage callers can use `0`/`100`.
+- `ariaLabel` names the focusable SVG. Left/Right inspect adjacent original
+  samples; Home/End inspect the first/last visible timestamp; Escape and blur
+  clear inspection. A live accessible readout announces the label and each
+  visible series value. Pointer movement and touch use that same index and
+  `onInspect(index: number | null)` callback. Touch selection stays after lift;
+  pointer cancellation clears it. Changing series, values, labels, X positions,
+  or domain clears inspection; equivalent new arrays do not.
+
+`npm run verify:series-chart` mounts the real component to cover these
+contracts alongside categorical stacked/grouped bars and container resize.
+
 ## MetricsChart (the django-mojo metrics widget)
 
 ```tsx

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.11",
+    "version": "0.2.13",
     "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');