portal-mojo 0.2.7 → 0.2.9

package/src/account/index.ts

@@ -0,0 +1,16 @@
+// portal-mojo/account — the signed-in user's self-service account surface:
+// AccountModal (+ openAccountModal), its six sections, the shared credential
+// models (PasskeyModel / ApiKeyModel / OAuthConnectionModel — re-exported by
+// portal-mojo/admin unchanged), MeSaveModel, and the self-service wire
+// functions. A page bundle bound to django-mojo contracts like an admin
+// domain, but it never imports the admin barrel and runs no setup at import.
+// Its styles ship in portal-mojo/styles.css: account.css, plus user-admin.css
+// and group-admin.css for the reused API-key rows and secret reveal.
+export * from './AccountModal';
+export * from './AccountSections';
+export * from './api';
+export * from './dialogs';
+export * from './models';
+export * from './NotificationPreferences';
+export * from './PasskeyList';
+export * from './sections/ApiKeysSection';

package/src/account/models.ts

@@ -0,0 +1,76 @@
+// account/models — the caller-owned credential models shared by the
+// self-service AccountModal and the admin User detail (defined in
+// credential-models.ts, re-exported here and by admin/identity/users/models
+// unchanged) so portal-mojo/account never imports an admin domain. ONE
+// defineModel per endpoint: both surfaces share these cache keys.
+//
+// Plus MeSaveModel — the `/api/user/me` save the account forms autosave
+// through — and the account-only query keys.
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+    mojoSave, sanitizeMe, useAuthSnapshot, withFreshAuth,
+    type Me, type SaveVars,
+} from '../client/runtime';
+import { getNotificationPreferences, getRecoveryCodeStatus, type NotificationPreferencesResponse, type RecoveryCodeStatus } from './api';
+
+// ── /api/user/me ──────────────────────────────────────────────────────
+
+/**
+ * FormView-compatible save for the signed-in user's own row: POSTs ONLY the
+ * changed fields to `/api/user/me` (never the `me` row back — the server
+ * 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.
+ */
+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);
+                void qc.invalidateQueries({ queryKey: ['/api/user'] });
+            },
+        });
+    },
+};
+
+/** Refresh `me` (e.g. after a verify/change flow that the server committed). */
+export function invalidateMe(qc: ReturnType<typeof useQueryClient>): Promise<void> {
+    return qc.invalidateQueries({ queryKey: ['me'] });
+}
+
+// ── Credential models (credential-models.ts) ───────────────────────────
+
+export {
+    ApiKeyModel, OAuthConnectionModel, PasskeyModel, useGenerateUserApiKey,
+    type ApiKeyRow, type GeneratedKeyReceipt, type GenerateUserApiKeyVariables,
+    type OAuthConnectionRow, type PasskeyRow,
+} from './credential-models';
+
+// ── Account-only queries ──────────────────────────────────────────────
+
+export const accountKeys = {
+    /** `{enrolled, remaining}` ONLY — never the masked hints (4 of 12 hex chars each). */
+    recoveryStatus: (uid: number | string | null) => ['/api/account/totp/recovery-codes', 'status', uid] as const,
+    /** Shared with the admin User detail's Notifications section. */
+    notificationPreferences: (uid: number | string | null) => ['/api/account/notification/preferences', uid] as const,
+};
+
+export function useRecoveryCodeStatus(uid: number | null) {
+    return useQuery<RecoveryCodeStatus>({
+        queryKey: accountKeys.recoveryStatus(uid),
+        queryFn: getRecoveryCodeStatus,
+        enabled: uid != null,
+    });
+}
+
+export function useNotificationPreferences(uid: number | null, enabled = true) {
+    return useQuery<NotificationPreferencesResponse>({
+        queryKey: accountKeys.notificationPreferences(uid),
+        queryFn: getNotificationPreferences,
+        enabled: uid != null && enabled,
+    });
+}

package/src/account/sections/ApiKeysSection.tsx

@@ -0,0 +1,138 @@
+// API Keys — UserApiKeysSection port (read in full 2026-08-05): the user's
+// key list + caller-only "Generate key" reveal + revoke.
+//
+// Wire (live-measured):
+//   · list — GET /api/account/api_keys?user=<id> (label/allowed_ips/expires/
+//     is_active/last_used/created; the owner FK filters but never serializes)
+//   · generate — caller-only POST /api/auth/generate_api_key. Another user's
+//     detail renders no Generate action because no admin-targetable route exists.
+//   · revoke — the `revoke` POST_SAVE_ACTION (POST <id> {revoke:{}} → its
+//     own {status:true} payload). Deviation from web-mojo's DELETE: the live
+//     model is CAN_DELETE=false (DELETE answers 403, measured) — the action
+//     IS the kill switch.
+//
+// Shared by the admin User detail (re-exported from
+// admin/identity/users/sections/ApiKeysSection) and the self-service
+// AccountModal (user = me, isSelf). Styled by the app's user-admin.css.
+import { Badge, Eyebrow, fmt, formModal, modal, showSecretDialog, toast } from '../../ui';
+import { ApiKeyModel, useGenerateUserApiKey } from '../credential-models';
+
+/** The identity fields the section names a key's owner by. */
+export interface ApiKeysOwner {
+    id: number;
+    display_name?: string | null;
+    email?: string | null;
+    username?: string | null;
+}
+
+export interface ApiKeysSectionProps {
+    user: ApiKeysOwner;
+    /** Offer Revoke on active keys. */
+    canManage: boolean;
+    /** Offer Generate — the generate route is caller-only. */
+    isSelf: boolean;
+}
+
+export function ApiKeysSection({ user, canManage, isSelf }: ApiKeysSectionProps) {
+    const { data, isPending } = ApiKeyModel.useList({ user: user.id, size: 25, sort: '-id' });
+    const revoke = ApiKeyModel.useAction('revoke');
+    const generateKey = useGenerateUserApiKey();
+    const rows = data?.rows ?? [];
+
+    const generate = async () => {
+        const form = ApiKeyModel.forms.generate!;
+        const dataIn = await formModal({
+            ...form,
+            title: isSelf ? 'Generate API key' : `Generate API key for ${user.display_name || user.email || user.username}`,
+        });
+        if (!dataIn) return;
+        const body: Record<string, unknown> = {
+            label: dataIn.label,
+            expire_days: parseInt(String(dataIn.expire_days || '90'), 10),
+        };
+        const ips = String(dataIn.allowed_ips ?? '').trim();
+        if (ips) body.allowed_ips = ips.split(',').map((s) => s.trim()).filter(Boolean);
+        try {
+            await generateKey.mutateAsync({
+                changes: body,
+                onToken: async (token) => {
+                    await showSecretDialog({
+                        title: 'API key created',
+                        intro: <><b>{String(dataIn.label || 'Unlabeled key')}</b> is ready.</>,
+                        warning: 'Save this token now. It will not be shown again.',
+                        secret: token,
+                        ariaLabel: 'Generated API key',
+                    });
+                },
+            });
+            toast.success('API key generated');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to generate API key');
+        }
+    };
+
+    const revokeKey = async (id: number, label: string) => {
+        const ok = await modal.confirm({
+            title: 'Revoke API key',
+            message: <>Revoke <b>{label || 'this API key'}</b>? Any applications using it will lose access immediately.</>,
+            confirmText: 'Revoke',
+            danger: true,
+        });
+        if (!ok) return;
+        try {
+            await revoke.mutateAsync({ id });
+            toast.success('API key revoked');
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Failed to revoke API key');
+        }
+    };
+
+    const nowSec = Math.floor(Date.now() / 1000);
+
+    return (
+        <>
+            <Eyebrow>
+                API keys
+                {isSelf && (
+                    <button className="btn btn-primary btn-compact us-eyebrow-action" onClick={() => void generate()}>
+                        <i className="bi bi-plus-lg" /> Generate key
+                    </button>
+                )}
+            </Eyebrow>
+
+            {isPending && <p className="dim">Loading…</p>}
+            {!isPending && rows.length === 0 && (
+                <div className="us-empty">
+                    <i className="bi bi-key" />
+                    <div>{isSelf ? 'You have no API keys.' : 'No API keys for this user.'}</div>
+                </div>
+            )}
+            {rows.map((k) => {
+                const expired = k.expires != null && k.expires < nowSec;
+                return (
+                    <div key={k.id} className="us-key-row">
+                        <div className="us-row-icon"><i className="bi bi-key" /></div>
+                        <div className="us-row-info">
+                            <div className="us-row-title">{k.label || 'Unlabeled key'}</div>
+                            <div className="us-row-meta">
+                                Created {fmt.date(k.created)} · Expires {fmt.date(k.expires, 'never')} · Last used {fmt.relative(k.last_used, 'never')}
+                                {' · '}
+                                {k.allowed_ips.length > 0 ? <>IPs <code>{k.allowed_ips.join(', ')}</code></> : 'Any IP'}
+                            </div>
+                        </div>
+                        <div className="us-row-actions">
+                            <Badge tone={!k.is_active ? 'muted' : expired ? 'warning' : 'success'}>
+                                {!k.is_active ? 'Revoked' : expired ? 'Expired' : 'Active'}
+                            </Badge>
+                            {canManage && k.is_active && (
+                                <button className="btn btn-compact us-danger" onClick={() => void revokeKey(k.id, k.label)}>
+                                    Revoke
+                                </button>
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </>
+    );
+}

package/src/admin/core/index.ts

@@ -146,7 +146,7 @@ function guardedElement(section: AdminSection, route: AdminRoute, sections: read
 export function AdminGlobalScope({ children }: { children: ReactNode }) {
     const outer = useContext(GroupContext);
     if (!outer) return children;
-    return createElement(GroupContext.Provider, { value: { ...outer, group: null, member: null, loading: false }, children });
+    return createElement(GroupContext.Provider, { value: { ...outer, group: null, member: null, loading: false, accessDenied: false }, children });
 }
 
 function routeVisible(section: AdminSection, route: AdminRoute, me: ReturnType<typeof useMe>['data']): boolean {

package/src/admin/credentials/secret-dialog.tsx

@@ -1,77 +1,3 @@
-import { useState, type ReactNode } from 'react';
-import { modal } from '../../ui';
-
-async function copyText(value: string): Promise<boolean> {
-    try {
-        if (navigator.clipboard?.writeText) {
-            await navigator.clipboard.writeText(value);
-            return true;
-        }
-    } catch {
-        // Fall through for insecure contexts.
-    }
-    try {
-        const input = document.createElement('textarea');
-        input.value = value;
-        input.style.position = 'fixed';
-        input.style.opacity = '0';
-        document.body.appendChild(input);
-        input.select();
-        const copied = document.execCommand('copy');
-        input.remove();
-        return copied;
-    } catch {
-        return false;
-    }
-}
-
-export function SecretBox({ secret, ariaLabel }: { secret: string; ariaLabel: string }) {
-    const [copied, setCopied] = useState(false);
-    return (
-        <div className="ga-secret-box">
-            <code className="ga-secret-value" aria-label={ariaLabel}>{secret}</code>
-            <button
-                type="button"
-                className="btn btn-compact"
-                title="Copy to clipboard"
-                aria-label="Copy to clipboard"
-                onClick={() => {
-                    void copyText(secret).then((ok) => {
-                        if (!ok) return;
-                        setCopied(true);
-                        setTimeout(() => setCopied(false), 1600);
-                    });
-                }}
-            >
-                <i className={`bi ${copied ? 'bi-check-lg' : 'bi-clipboard'}`} /> {copied ? 'Copied' : 'Copy'}
-            </button>
-        </div>
-    );
-}
-
-export interface SecretDialogOptions {
-    title: string;
-    warning: ReactNode;
-    intro?: ReactNode;
-    secret: string;
-    ariaLabel: string;
-    footer?: ReactNode;
-}
-
-export function showSecretDialog(options: SecretDialogOptions): Promise<unknown> {
-    return modal.open((close) => (
-        <div className="modal-pad">
-            <h2 className="modal-title">{options.title}</h2>
-            {options.intro && <div className="ga-secret-intro">{options.intro}</div>}
-            <div className="ga-secret-warning" role="alert">
-                <i className="bi bi-exclamation-triangle-fill" />
-                <span>{options.warning}</span>
-            </div>
-            <SecretBox secret={options.secret} ariaLabel={options.ariaLabel} />
-            {options.footer}
-            <div className="modal-actions">
-                <button className="btn" onClick={() => close(null)}>Close</button>
-            </div>
-        </div>
-    ), { size: 'lg' });
-}
+// Moved to ui/secret-dialog.tsx (shared with portal-mojo/account); the admin
+// credentials surface keeps its import path and export names unchanged.
+export { SecretBox, showSecretDialog, type SecretDialogOptions } from '../../ui/secret-dialog';

package/src/admin/dns/models.ts

@@ -355,7 +355,7 @@ export function normalizeCredentialListParams(params: Params): Params {
 export function normalizeDomainListParams(params: Params): Params {
     return normalizeListParams(
         params,
-        new Set(['group', 'provider', 'status']),
+        new Set(['group', 'group__isnull', 'provider', 'status']),
         new Set(['name', 'provider', 'status', 'expires', 'created']),
         'list',
     );

package/src/admin/domains/infrastructure.ts

@@ -1,6 +1,7 @@
 import type { AdminSection } from '../core';
 import { DNS_MANAGE_PERMISSIONS, DNS_VIEW_PERMISSIONS } from '../dns/models';
 import { BUCKET_MANAGE_PERMS, STORAGE_VIEW_PERMS } from '../storage/permissions';
+import { SETTINGS_PERMISSIONS } from '../settings/model';
 
 export const DNS_ADMIN_SECTION: AdminSection = {
     id: 'dns', title: 'DNS', icon: 'bi-globe2', navigationGroup: 'infrastructure', basePath: 'dns', permissions: DNS_VIEW_PERMISSIONS,
@@ -14,11 +15,20 @@ export const DNS_ADMIN_SECTION: AdminSection = {
     ],
 };
 export const STORAGE_ADMIN_SECTION: AdminSection = {
-    id: 'storage', basePath: 'storage', title: 'Storage', icon: 'bi-hdd-stack', navigationGroup: 'infrastructure', permissions: ['sys.view_fileman', 'sys.manage_files', 'sys.manage_aws', 'sys.files'],
+    id: 'storage', basePath: 'storage', title: 'Storage', icon: 'bi-hdd-stack', navigationGroup: 'infrastructure', permissions: ['sys.view_fileman', 'sys.manage_files', 'sys.manage_aws', 'sys.files', ...SETTINGS_PERMISSIONS],
     routes: [
         { path: 'buckets', label: 'Buckets', loadComponent: () => import('../storage/BucketsPage').then(({ BucketsPage }) => ({ default: BucketsPage })), permissions: BUCKET_MANAGE_PERMS },
         { path: 'backends', label: 'Backends', loadComponent: () => import('../storage/BackendsPage').then(({ BackendsPage }) => ({ default: BackendsPage })), permissions: STORAGE_VIEW_PERMS },
         { path: 'files', label: 'Files', loadComponent: () => import('../storage/FilesPage').then(({ FilesPage }) => ({ default: FilesPage })), permissions: STORAGE_VIEW_PERMS },
+        // Media rendering edits three Setting rows, so it carries the Settings page's gate, not the storage one.
+        { path: 'rendering', label: 'Media rendering', loadComponent: () => import('../storage/MediaRenderingPage').then(({ MediaRenderingPage }) => ({ default: MediaRenderingPage })), permissions: SETTINGS_PERMISSIONS },
     ],
 };
-export const INFRASTRUCTURE_ADMIN_SECTIONS = [DNS_ADMIN_SECTION, STORAGE_ADMIN_SECTION] as const;
+export const EDGE_ADMIN_SECTION: AdminSection = {
+    id: 'edge', basePath: 'edge', title: 'Edge', icon: 'bi-hdd-network', navigationGroup: 'infrastructure', permissions: DNS_VIEW_PERMISSIONS,
+    routes: [
+        { path: 'vhosts', label: 'Vhosts', loadComponent: () => import('../edge/VhostsPage').then(({ VhostsPage }) => ({ default: VhostsPage })), permissions: DNS_VIEW_PERMISSIONS },
+        { path: 'upstreams', label: 'Upstreams', loadComponent: () => import('../edge/UpstreamsPage').then(({ UpstreamsPage }) => ({ default: UpstreamsPage })), permissions: DNS_VIEW_PERMISSIONS },
+    ],
+};
+export const INFRASTRUCTURE_ADMIN_SECTIONS = [DNS_ADMIN_SECTION, STORAGE_ADMIN_SECTION, EDGE_ADMIN_SECTION] as const;

package/src/admin/domains/security.ts

@@ -1,5 +1,6 @@
 import type { AdminRoute, AdminSection } from '../core';
 import { BOUNCER_VIEW_PERMS } from '../bouncer/models';
+import { EDGE_BLOCKLIST_VIEW_PERMS } from '../edge/permissions';
 import { LOGS_ADMIN_PERMISSIONS } from '../monitoring/models';
 import { GEOIP_VIEW_PERMS } from '../security/geoip/models';
 import { LOGIN_EVENT_VIEW_PERMS, USER_DEVICE_VIEW_PERMS } from '../security/devices/models';
@@ -43,12 +44,13 @@ export const GEOIP_ADMIN_SECTION: AdminSection = {
 };
 export const NETWORK_SECURITY_ADMIN_SECTION: AdminSection = {
     id: 'network-security', basePath: 'security/network', title: 'Network Security', icon: 'bi-hdd-network', navigationGroup: 'security',
-    permissions: [...new Set([...GEOIP_VIEW_PERMS, ...LOGS_ADMIN_PERMISSIONS, ...IPSET_VIEW_PERMS, ...GEOFENCE_VIEW_PERMS])],
+    permissions: [...new Set([...GEOIP_VIEW_PERMS, ...LOGS_ADMIN_PERMISSIONS, ...IPSET_VIEW_PERMS, ...GEOFENCE_VIEW_PERMS, ...EDGE_BLOCKLIST_VIEW_PERMS])],
     routes: [
         { path: 'blocked-ips', label: 'Blocked IPs', loadComponent: () => import('../network/BlockedIPsPage').then(({ BlockedIPsPage }) => ({ default: BlockedIPsPage })), permissions: GEOIP_VIEW_PERMS },
         { path: 'firewall-log', label: 'Firewall Log', loadComponent: () => import('../network/FirewallLogPage').then(({ FirewallLogPage }) => ({ default: FirewallLogPage })), permissions: LOGS_ADMIN_PERMISSIONS },
         { path: 'ip-sets', label: 'IP Sets', loadComponent: () => import('../network/IPSetsPage').then(({ IPSetsPage }) => ({ default: IPSetsPage })), permissions: IPSET_VIEW_PERMS },
         { path: 'geofencing', label: 'Geofencing', loadComponent: () => import('../network/geofence/GeofencingPage').then(({ GeofencingPage }) => ({ default: GeofencingPage })), permissions: GEOFENCE_VIEW_PERMS },
+        { path: 'edge-blocklist', label: 'Edge Blocklist', loadComponent: () => import('../edge/BlocklistPage').then(({ BlocklistPage }) => ({ default: BlocklistPage })), permissions: EDGE_BLOCKLIST_VIEW_PERMS },
     ],
 };
 

package/src/admin/edge/BlocklistPage.tsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { mojoDelete, mojoSave, useCan, withFreshAuth } from '../../client/runtime';
+import { ArmedButton, Badge, ModelTable, fmt, modal, toast, type Column, type FilterDef, type Tone } from '../../ui';
+import { EdgeBlocklistModel, sanitizeEdgeBlocklistRow, validateBlocklistValue, type EdgeBlocklistRow } from './models';
+import { EDGE_BLOCKLIST_MANAGE_PERMS } from './permissions';
+
+export const BLOCKLIST_MODES: readonly { value: string; label: string; tone: Tone; help: string }[] = [
+    { value: 'log', label: 'Log', tone: 'info', help: 'Matches are recorded and still served. Start here.' },
+    { value: 'enforce', label: 'Enforce', tone: 'danger', help: 'Matches are refused at the edge.' },
+    { value: 'allow', label: 'Allow', tone: 'success', help: 'An exemption: a match is never blocked by another entry.' },
+    { value: 'off', label: 'Off', tone: 'muted', help: 'Kept on file, does nothing.' },
+];
+const KIND_LABELS: Record<string, string> = { ip: 'IP or network', ua: 'User agent' };
+
+function modeMeta(mode: string) {
+    return BLOCKLIST_MODES.find((entry) => entry.value === mode) ?? { value: mode, label: mode, tone: 'muted' as Tone, help: '' };
+}
+
+function BlocklistEditor({ row, pending, close }: { row: EdgeBlocklistRow | null; pending: { current: boolean }; close: (result: 'saved' | 'deleted' | null) => void }) {
+    const queryClient = useQueryClient();
+    const [kind, setKind] = useState(row?.kind ?? 'ip');
+    const [value, setValue] = useState(row?.value ?? '');
+    const [mode, setMode] = useState(row?.mode ?? 'log');
+    const [note, setNote] = useState(row?.note ?? '');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+
+    const submit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        if (busy) return;
+        const refusal = validateBlocklistValue(kind, value.trim());
+        if (refusal) { setError(refusal); return; }
+        setBusy(true); setError(''); pending.current = true;
+        try {
+            // The response row is authoritative: an address comes back as its network.
+            const saved = sanitizeEdgeBlocklistRow(await withFreshAuth(() => mojoSave<EdgeBlocklistRow>(EdgeBlocklistModel.endpoint, row?.id ?? null, { kind, value: value.trim(), mode, note: note.trim() })));
+            await EdgeBlocklistModel.invalidate(queryClient);
+            toast.success(saved.value === value.trim() ? `${saved.value} saved as ${modeMeta(saved.mode).label.toLowerCase()}.` : `Saved as ${saved.value} (${modeMeta(saved.mode).label.toLowerCase()}): the address was stored as its network.`);
+            close('saved');
+        } catch (cause) {
+            setError(cause instanceof Error ? cause.message : 'The entry was not saved');
+        } finally {
+            pending.current = false; setBusy(false);
+        }
+    };
+    const remove = async () => {
+        if (!row || busy) return;
+        // One pending state for save and delete: neither can start over the other.
+        setBusy(true); setError(''); pending.current = true;
+        try {
+            await withFreshAuth(() => mojoDelete(EdgeBlocklistModel.endpoint, row.id));
+            await EdgeBlocklistModel.invalidate(queryClient);
+            toast.success(`${row.value} removed from the blocklist.`);
+            close('deleted');
+        } catch (cause) {
+            setError(cause instanceof Error ? cause.message : 'The entry was not deleted');
+        } finally {
+            pending.current = false; setBusy(false);
+        }
+    };
+
+    return <div className="modal-pad edge-blocklist-editor"><h2 className="modal-title">{row ? 'Edit blocklist entry' : 'New blocklist entry'}</h2>
+        {error && <div className="form-alert" role="alert">{error}</div>}
+        <form onSubmit={(event) => void submit(event)}><div className="form-grid">
+            <label className="field"><span className="field-label">Matches on</span><select className="input" value={kind} disabled={busy} onChange={(event) => setKind(event.target.value)}><option value="ip">IP address or network</option><option value="ua">User agent pattern</option></select></label>
+            <label className="field"><span className="field-label">Value <em>*</em></span><input className="input mono" value={value} disabled={busy} onChange={(event) => setValue(event.target.value)} required autoComplete="off" placeholder={kind === 'ip' ? '203.0.113.0/24' : 'sqlmap'} /><span className="field-help">{kind === 'ip' ? 'One address or a CIDR network. An address inside a network is stored as the network.' : 'A pattern matched anywhere in the user agent, ignoring case. No spaces or quotes.'}</span></label>
+            <div className="field edge-mode-field"><span className="field-label">Mode</span>
+                <div className="edge-mode-control" role="radiogroup" aria-label="Mode">{BLOCKLIST_MODES.map((entry) => <label key={entry.value} className={`edge-mode-option${mode === entry.value ? ' is-selected' : ''}`}><input type="radio" name="edge-blocklist-mode" checked={mode === entry.value} disabled={busy} onChange={() => setMode(entry.value)} /> {entry.label}</label>)}</div>
+                <span className="field-help">{modeMeta(mode).help} Log first, watch the edge watch log for this entry, then switch to Enforce. A change reaches the whole fleet in about 10 minutes.</span>
+            </div>
+            <label className="field"><span className="field-label">Note</span><input className="input" value={note} disabled={busy} maxLength={255} onChange={(event) => setNote(event.target.value)} placeholder="Why this entry exists" /></label>
+        </div>
+        <div className="modal-actions">
+            {row && <ArmedButton icon="bi-trash" label="Delete" armedLabel="Click again to remove this entry from every node" disabled={busy} onConfirm={remove} />}
+            <button type="button" className="btn" disabled={busy} onClick={() => close(null)}>Cancel</button>
+            <button className="btn btn-primary" disabled={busy}>{busy ? 'Saving…' : 'Save'}</button>
+        </div></form>
+    </div>;
+}
+
+export function openBlocklistEditor(row: EdgeBlocklistRow | null = null): Promise<'saved' | 'deleted' | null> {
+    // Escape and the backdrop are refused while a save or delete is in flight.
+    const pending = { current: false };
+    return modal.open<'saved' | 'deleted' | null>((close) => <BlocklistEditor row={row} pending={pending} close={close} />, { canDismiss: () => !pending.current }).then((value) => value ?? null);
+}
+
+const COLUMNS: Column<EdgeBlocklistRow>[] = [
+    { key: 'kind', label: 'Matches on', sortable: true, render: (row) => KIND_LABELS[row.kind] ?? row.kind },
+    { key: 'value', label: 'Value', sortable: true, hideable: false, render: (row) => <code>{row.value}</code> },
+    { key: 'mode', label: 'Mode', sortable: true, render: (row) => <Badge tone={modeMeta(row.mode).tone}>{modeMeta(row.mode).label}</Badge> },
+    { key: 'note', label: 'Note', sortable: false, render: (row) => row.note ? <span title={row.note}>{fmt.truncate(row.note, 60)}</span> : <span className="dim">—</span> },
+    { key: 'created', label: 'Created', sortable: true, render: (row) => fmt.date(row.created) },
+];
+
+const FILTERS: FilterDef[] = [
+    { key: 'kind', label: 'Matches on', type: 'select', options: [{ value: 'ip', label: 'IP or network' }, { value: 'ua', label: 'User agent' }] },
+    { key: 'mode', label: 'Mode', type: 'select', options: BLOCKLIST_MODES.map((entry) => ({ value: entry.value, label: entry.label })) },
+];
+
+export function BlocklistPage() {
+    const canManage = useCan(EDGE_BLOCKLIST_MANAGE_PERMS).can;
+    return <ModelTable<EdgeBlocklistRow>
+        model={EdgeBlocklistModel} eyebrow="Security · Network" title="Edge Blocklist"
+        searchable searchPlaceholder="Search value or note"
+        columns={COLUMNS} filters={FILTERS} defaultSort="kind"
+        columnChooser persistState persistKey="admin:edge:blocklist"
+        {...(canManage ? { addLabel: 'New entry', onAdd: () => void openBlocklistEditor(), onRowClick: (row: EdgeBlocklistRow) => void openBlocklistEditor(row) } : {})}
+    />;
+}

package/src/admin/edge/UpstreamsPage.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCan } from '../../client/runtime';
+import { ArmedButton, Badge, CollectionSelect, ModelTable, fmt, modal, toast, type Column, type FilterDef } from '../../ui';
+import { declareUpstream, retireUpstream, setUpstreamEnabled, type DeclareUpstreamInput } from './api';
+import { EDGE_MANAGE_PERMS, EdgeUpstreamModel, upstreamTarget, type EdgeUpstreamRow } from './models';
+
+const RETIRE_CONSEQUENCE = 'Vhosts and routes that reach this upstream stop being served. They are not repointed. The upstream stays listed, disabled, so its history is kept.';
+
+function DeclareUpstreamDialog({ pending, close }: { pending: { current: boolean }; close: (row: EdgeUpstreamRow | null) => void }) {
+    const [name, setName] = useState('');
+    const [kind, setKind] = useState<'http' | 'unix'>('http');
+    const [host, setHost] = useState('');
+    const [port, setPort] = useState('');
+    const [socketPath, setSocketPath] = useState('');
+    const [group, setGroup] = useState<number | null>(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState('');
+
+    const submit = async (event: React.FormEvent) => {
+        event.preventDefault();
+        if (busy) return;
+        if (kind === 'http' && !/^\d+$/.test(port)) { setError('Enter the port as a number.'); return; }
+        // Only the chosen kind's destination is sent; the other branch's values vanish.
+        const input: DeclareUpstreamInput = kind === 'http'
+            ? { name: name.trim(), kind, host: host.trim().toLowerCase(), port: Number(port), group }
+            : { name: name.trim(), kind, socket_path: socketPath.trim(), group };
+        setBusy(true); setError(''); pending.current = true;
+        try {
+            close(await declareUpstream(input));
+        } catch (cause) {
+            setError(cause instanceof Error ? cause.message : 'The upstream was not declared');
+        } finally {
+            pending.current = false; setBusy(false);
+        }
+    };
+
+    return <div className="modal-pad edge-upstream-dialog"><h2 className="modal-title">Declare upstream</h2>
+        <p className="dim">An upstream is a destination vhosts may proxy to. Only platform administrators can declare one, and its destination cannot be changed afterwards.</p>
+        {error && <div className="form-alert" role="alert">{error}</div>}
+        <form onSubmit={(event) => void submit(event)}><div className="form-grid">
+            <label className="field"><span className="field-label">Name <em>*</em></span><input className="input" value={name} disabled={busy} onChange={(event) => setName(event.target.value)} required autoComplete="off" placeholder="orders-api" /><span className="field-help">Lowercase letters, digits, '-' or '_'.</span></label>
+            <label className="field"><span className="field-label">Reached over</span><select className="input" value={kind} disabled={busy} onChange={(event) => setKind(event.target.value === 'unix' ? 'unix' : 'http')}><option value="http">HTTP: host and port</option><option value="unix">Unix socket</option></select></label>
+            {kind === 'http' && <label className="field"><span className="field-label">Host <em>*</em></span><input className="input" value={host} disabled={busy} onChange={(event) => setHost(event.target.value)} required autoComplete="off" placeholder="10.0.4.12" /></label>}
+            {kind === 'http' && <label className="field"><span className="field-label">Port <em>*</em></span><input className="input" inputMode="numeric" value={port} disabled={busy} onChange={(event) => setPort(event.target.value.trim())} required placeholder="8080" /></label>}
+            {kind === 'unix' && <label className="field"><span className="field-label">Socket path <em>*</em></span><input className="input" value={socketPath} disabled={busy} onChange={(event) => setSocketPath(event.target.value)} required autoComplete="off" placeholder="/run/mojo/app.sock" /><span className="field-help">Must sit under the deployment's socket directory.</span></label>}
+            <CollectionSelect<{ id: number; name: string }> endpoint="/api/group" value={group} onChange={(id) => setGroup(id == null ? null : Number(id))} label="Owning group" disabled={busy} placeholder="Shared with every group" help="Leave empty for a shared upstream. Choose a group to keep it to that group's vhosts." />
+        </div>
+        <div className="modal-actions"><button type="button" className="btn" disabled={busy} onClick={() => close(null)}>Cancel</button><button className="btn btn-primary" disabled={busy}>{busy ? 'Declaring…' : 'Declare upstream'}</button></div></form>
+    </div>;
+}
+
+export function openDeclareUpstream(): Promise<EdgeUpstreamRow | null> {
+    // Escape and the backdrop are refused while the declare is in flight.
+    const pending = { current: false };
+    return modal.open<EdgeUpstreamRow | null>((close) => <DeclareUpstreamDialog pending={pending} close={close} />, { canDismiss: () => !pending.current }).then((value) => value ?? null);
+}
+
+const FILTERS: FilterDef[] = [
+    { key: 'is_enabled', label: 'State', type: 'boolean', trueLabel: 'Enabled', falseLabel: 'Disabled' },
+    { key: 'kind', label: 'Reached over', type: 'select', options: [{ value: 'http', label: 'HTTP' }, { value: 'unix', label: 'Unix socket' }] },
+];
+
+export function UpstreamsPage() {
+    const queryClient = useQueryClient();
+    const { can: canManage, me } = useCan(EDGE_MANAGE_PERMS);
+    // Declare and retire are `require_platform_admin` on the server.
+    const superuser = me?.is_superuser === true;
+
+    const run = async (work: () => Promise<EdgeUpstreamRow>, done: (row: EdgeUpstreamRow) => string) => {
+        try {
+            toast.success(done(await work()));
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'The change was refused');
+        } finally {
+            await EdgeUpstreamModel.invalidate(queryClient);
+        }
+    };
+    const retire = async (row: EdgeUpstreamRow) => {
+        const ok = await modal.confirm({ title: `Retire ${row.name}?`, message: RETIRE_CONSEQUENCE, confirmText: 'Retire upstream', danger: true });
+        if (ok) await run(() => retireUpstream(row.id), (saved) => `${saved.name} retired.`);
+    };
+    const declare = async () => {
+        const row = await openDeclareUpstream();
+        if (!row) return;
+        await EdgeUpstreamModel.invalidate(queryClient);
+        toast.success(`${row.name} declared.`);
+    };
+
+    const columns: Column<EdgeUpstreamRow>[] = [
+        { key: 'name', label: 'Name', sortable: true, hideable: false, render: (row) => <code>{row.name}</code> },
+        { key: 'kind', label: 'Reached over', sortable: true, render: (row) => row.kind === 'unix' ? 'Unix socket' : 'HTTP' },
+        { key: 'target', label: 'Destination', sortable: false, render: (row) => <code>{upstreamTarget(row)}</code> },
+        { key: 'group', label: 'Scope', sortable: false, render: (row) => row.group ? <Badge tone="info">{row.group.name}</Badge> : <Badge tone="primary">Shared</Badge> },
+        { key: 'is_enabled', label: 'State', sortable: true, render: (row) => row.is_enabled ? <Badge tone="success">Enabled</Badge> : <Badge tone="muted">Disabled</Badge> },
+        { key: 'created', label: 'Declared', sortable: true, render: (row) => fmt.date(row.created) },
+        ...(canManage ? [{
+            key: 'actions', label: '', sortable: false, hideable: false, align: 'end' as const,
+            render: (row: EdgeUpstreamRow) => <span className="edge-row-actions" onClick={(event) => event.stopPropagation()}>
+                <button type="button" className="btn btn-compact" onClick={() => void run(() => setUpstreamEnabled(row.id, !row.is_enabled), (saved) => `${saved.name} ${saved.is_enabled ? 'enabled' : 'disabled'}.`)}>{row.is_enabled ? 'Disable' : 'Enable'}</button>
+                {superuser && row.is_enabled && <ArmedButton className="btn-compact" label="Retire" armedLabel="Click again to review" onConfirm={() => retire(row)} />}
+            </span>,
+        }] : []),
+    ];
+
+    return <ModelTable<EdgeUpstreamRow>
+        model={EdgeUpstreamModel} eyebrow="Infrastructure · Edge" title="Upstreams"
+        searchable searchPlaceholder="Search name or kind"
+        columns={columns} filters={FILTERS} defaultSort="name"
+        columnChooser persistState persistKey="admin:edge:upstreams"
+        {...(superuser ? { addLabel: 'Declare upstream', onAdd: () => void declare() } : {})}
+    />;
+}