portal-mojo 0.2.8 → 0.2.9

package/docs/menus-and-access.md

@@ -140,7 +140,7 @@ converging it onto flat sections is a named follow-up.
 ## Group context (A3)
 
 Product portals place `<GroupProvider>` at the app root. `useActiveGroup() → {group, member,
-loading, setActiveGroup, clearActiveGroup}`. The active group id rides the
+loading, accessDenied, setActiveGroup, clearActiveGroup}`. The active group id rides the
 REAL `?group=` search param (hash-safe, deep-linkable) with localStorage
 fallback; activating a group fetches the caller's member record
 (`/api/group/<id>/member`) whose permissions feed `useCan`.
@@ -148,3 +148,23 @@ fallback; activating a group fetches the caller's member record
 embedded-parent rows, kind chips); `RequiresGroup` wraps pages that need a
 group and shows the pick-a-group state otherwise. Do not install these in the
 standalone Admin shell; they belong to group-scoped product navigation.
+
+A cached group and membership remain resolved during network errors and server
+5xx responses. The URL, stored selection and active-group signal stay in place.
+An unresolved initial group still follows the URL/stored fallback chain.
+Group 401/403/404 suppress the cached group immediately and run that fallback;
+membership 401/403/404 keep the group identity but expose `member: null` and
+`accessDenied: true`. These definitive denials do not retry.
+Once denied, a later network failure or selecting an old switcher row cannot
+restore cached grants. Recovery requires successful guarded group and member
+reads; membership-only denial requires a successful member read.
+
+A private workspace must treat `accessDenied === true` as a boundary: cancel
+pending work, hide cached private results and remove temporary preview URLs.
+Removing `member` only removes member-derived grants; user/system grants may
+still satisfy `useCan`. This flag is not a loading state. Global Admin clears
+it along with the group/member context. The server checks every request.
+Provider requests check their candidate group, selection generation and authenticated actor both
+before dispatch and after resolving, and consume TanStack's cancellation signal.
+Provider teardown invalidates pending request closures even if another query
+observer keeps their cache key alive.

package/docs/multiselect-dropdown.md

@@ -107,7 +107,7 @@ element the user just clicked.
    construction.
 3. `null`/`undefined` are the only "nothing selected" — `0` and `''` are
    selections.
-4. Both themes, tokens only: `apps/portal/src/theme/multiselect-dropdown.css`
+4. Both themes, tokens only: `packages/portal-mojo/src/styles/components/multiselect-dropdown.css`
    (reuses `.tbl-check`, `.btn`, `.field-*`; the popover shell supplies the
    surface/border/shadow).
 

package/docs/popover.md

@@ -101,7 +101,7 @@ it (source parity).
 
 ## Styling
 
-`.mojo-popover` lives in `apps/portal/src/theme/popover.css` — tokens
+`.mojo-popover` lives in `packages/portal-mojo/src/styles/components/popover.css` — tokens
 only, both themes. It neutralizes the UA `[popover]` stylesheet
 (`inset: 0` centering, `margin: auto`, border, padding, Canvas colors)
 and restores the mission-control look (`.filter-menu` family: `--surface`

package/docs/record-feed.md

@@ -221,8 +221,8 @@ surfaces local rejection through the same alert region.
 
 ## Styling
 
-Import `theme/record-feed.css` after the token declarations (the portal and
-showcase theme aggregators already do). It uses only the mission-control
+`src/styles/components/record-feed.css` ships in `portal-mojo/styles.css`;
+the app declares the tokens. It uses only the mission-control
 tokens and supports both `data-theme` values. Override the default bounded
 height with `--record-feed-height` on a wrapper/component class.
 

package/docs/taginput.md

@@ -99,7 +99,8 @@ containing commas that would re-split on the next load.
 
 ## Styling
 
-Classes are styled by the consuming app (`apps/portal/src/theme/taginput.css`,
+Classes are styled by the package stylesheet
+(`packages/portal-mojo/src/styles/components/taginput.css`,
 tokens only, light + dark): `.tag-input`, `.tag-input-wrap` (wears the `.input`
 field look, accent ring on `:focus-within`), `.tag-chip` / `.tag-chip-text` /
 `.tag-chip-x`, `.tag-input-field`, `.tag-input-foot` / `.tag-input-count` /

package/docs/timepicker.md

@@ -150,7 +150,7 @@ zone (`Intl.DateTimeFormat().resolvedOptions().timeZone`, `'UTC'` on failure)
 
 ## Styling
 
-`apps/portal/src/theme/timepicker.css` — `mojo-time-*` anatomy only
+`packages/portal-mojo/src/styles/components/timepicker.css` — `mojo-time-*` anatomy only
 (`trigger` / `trigger-text` / `trigger-clear` / `popover-inner` /
 `picker-inline` / `stepper*` / `ampm*` / `tz-host` / `foot`), tokens only,
 both themes. The trigger wears the house `.input` look so it lines up in a

package/docs/timezone-select.md

@@ -140,8 +140,9 @@ be rendering a plain `<select>` fallback in that slot; swapping it for
   reachable on engines without `Intl.supportedValuesOf`.
 - An empty `timezones={[]}` means "no override" (source parity), not "no
   zones".
-- No stylesheet ships: the wrapper `.tz-select` is an unstyled hook and every
-  pixel comes from `apps/portal/src/theme/combobox.css`, which consuming apps
-  must include.
+- No stylesheet of its own: the wrapper `.tz-select` is an unstyled hook and
+  every pixel comes from
+  `packages/portal-mojo/src/styles/components/combobox.css`, which ships in
+  `portal-mojo/styles.css`.
 - The dropdown is ComboBox's locally-positioned list — inside
   `overflow:hidden` containers it clips (MERGE-WIRE: Popover primitive #1271).

package/docs/user-menu.md

@@ -90,8 +90,8 @@ interface UserMenuItem {
   (state is keyed by avatar id).
 - No avatar request while signed out or when `avatar` is null.
 - Popover is controlled; outside-mousedown closes without moving focus.
-- Tokens only — `apps/portal/src/theme/user-menu.css`; both themes from the
-  token swap. Reuses `.seg`/`.seg-btn`, `.chip-primary`, `.spin`,
+- Tokens only — `src/styles/components/user-menu.css`, shipped in
+  `portal-mojo/styles.css`; both themes from the token swap. Reuses `.seg`/`.seg-btn`, `.chip-primary`, `.spin`,
   `.btn-primary`/`.btn-compact`, `.chip-muted`.
 
 ## Signed-out matrix
@@ -128,4 +128,5 @@ menu. Theme picks apply immediately and keep the menu open.
   `ThemeProvider` for the theme control; `ToastHost` for the failure toast.
 - Don't also render a theme toggle button in the same bar — the menu owns it.
 - `onSignOut` that never settles leaves Sign out pending; resolve or reject.
-- Apps must ship `theme/user-menu.css` (the package ships no CSS).
+- Apps must import `portal-mojo/styles.css` and declare the tokens; the
+  UserMenu styles ship in it.

package/docs/worldmap.md

@@ -298,5 +298,5 @@ round-trip, clamping, fitting, antimeridian splitting), the centroid table
 (244 unique keys, coordinate ranges, `ES` = Spain), the binding helpers
 (slug parsing, sizing, sorting/top-N/drops), tone fallbacks and their warns,
 the land normalizer, and the source invariants above (no network, no map
-library, no HTML-string tooltips, tokens-only CSS, and the two theme copies
-staying byte-identical).
+library, no HTML-string tooltips, tokens-only CSS, and the package
+stylesheet importing `worldmap.css`).

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "portal-mojo",
-    "version": "0.2.8",
+    "version": "0.2.9",
     "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",
@@ -42,7 +42,8 @@
         "./admin/infrastructure": "./src/admin/public/infrastructure.ts",
         "./admin/communications": "./src/admin/public/communications.ts",
         "./admin/assistant": "./src/admin/public/assistant.ts",
-        "./admin/assistant/launcher": "./src/admin/public/assistant-launcher.ts"
+        "./admin/assistant/launcher": "./src/admin/public/assistant-launcher.ts",
+        "./styles.css": "./src/styles/index.css"
     },
     "scripts": {
         "typecheck": "tsc --noEmit"

package/src/account/AccountModal.tsx

@@ -11,8 +11,9 @@
 //
 // Every focused flow (add passkey, authenticator, recovery codes, password,
 // email/phone change, verify, photo) stacks its own dialog over this one;
-// fresh-auth step-ups come from the app's FreshAuthHost. Styles: the app's
-// theme/account.css (tokens only, both themes).
+// fresh-auth step-ups come from the app's FreshAuthHost. Styles:
+// styles/components/account.css, shipped in portal-mojo/styles.css (tokens
+// only, both themes).
 import { useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
 import { hostedAuthUrl, logout, onAuth, redirectToHostedAuth, useAuthSnapshot, useMe, type Me } from '../client/runtime';
 import { fmt, modal, toast, useAvatarUrl, type UserMenuAuthMode } from '../ui';

package/src/account/index.ts

@@ -4,8 +4,8 @@
 // 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.
-// Apps ship theme/account.css (plus user-admin.css and group-admin.css for
-// the reused API-key rows and secret reveal).
+// 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';

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/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() } : {})}
+    />;
+}