portal-mojo 0.2.20 → 0.2.21

package/src/admin/edge/VhostWizard.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { useMe } from '../../client/runtime';
-import { CollectionSelect, FormWizard, modal, type FormWizardSection } from '../../ui';
+import { getAuthSessionRevision, getAuthSnapshot, MojoError, useAuthSnapshot, useCan, useMe } from '../../client/runtime';
+import { CollectionSelect, Tabs, modal } from '../../ui';
+import { EdgeHelp } from './EdgeHelp';
 import { CertificateModel, DomainModel, type CertificateRow, type DomainRow } from '../dns/models';
 import { listVhostRoutes, saveVhostRoute, saveVhost } from './api';
 import {
-    EdgeRouteModel, EdgeUpstreamModel, EdgeVhostModel, VHOST_KIND_CARDS,
+    EDGE_MANAGE_PERMS, EdgeRouteModel, EdgeUpstreamModel, EdgeVhostModel, VHOST_KIND_CARDS,
     buildVhostPayload, certificateCovers, deriveServerName, quietPathUncovered,
     validateBodySizeMb, validatePoolName, validateRedirectTarget, validateRequestPath,
     validateRouteDrafts, validateVhostLabel, vhostKindTitle,
@@ -18,6 +19,18 @@ function reason(error: unknown): string {
 
 interface RouteRowDraft extends RouteDraft { key: number; upstreamName?: string }
 
+const submittedFieldNames: Record<string, string> = { label: 'Label', kind: 'Serving type', certificate: 'Certificate', pool: 'Pool', is_enabled: 'Enabled', upstream: 'Upstream', redirect_to: 'Redirect destination', spa: 'Single-page app', serve_static: 'Static files', quiet_paths: 'Quiet paths', body_size_mb: 'Maximum request body' };
+function observedDifferences(submitted: Record<string, unknown>, row: EdgeVhostRow): string[] {
+    const fields = row as unknown as Record<string, unknown>;
+    const relation = (key: string, value: unknown) => ['domain', 'certificate', 'upstream'].includes(key) && value != null && typeof value === 'object' ? (value as { id?: unknown }).id : value;
+    const display = (value: unknown) => value === undefined ? 'unknown' : JSON.stringify(value).slice(0, 120);
+    return Object.entries(submitted).flatMap(([key, expected]) => {
+        const observed = relation(key, fields[key]);
+        return JSON.stringify(observed) === JSON.stringify(expected) ? [] : [`${submittedFieldNames[key] ?? key}: expected ${display(expected)}, observed ${display(observed)}`];
+    });
+}
+
+
 /** One path per row; the server takes a list of exact request paths. */
 function PathListEditor({ label, help, paths, onChange, disabled }: { label: string; help: string; paths: string[]; onChange: (paths: string[]) => void; disabled: boolean }) {
     return <div className="field edge-path-list">
@@ -32,16 +45,28 @@ function PathListEditor({ label, help, paths, onChange, disabled }: { label: str
 }
 
 export interface VhostWizardProps {
+    initialTab?: string;
+    signal?: AbortSignal;
     /** Omit to create; pass the `default` graph row to edit. */
     row?: EdgeVhostRow | null;
     onDone: (saved: EdgeVhostRow | null) => void;
     onBusyChange?: (busy: boolean) => void;
 }
 
-export function VhostWizard({ row = null, onDone, onBusyChange }: VhostWizardProps) {
+export function VhostWizard({ row = null, onDone, onBusyChange, initialTab = 'hostname', signal }: VhostWizardProps) {
     const queryClient = useQueryClient();
     const { data: me } = useMe();
     const superuser = me?.is_superuser === true;
+    const canManage = useCan(EDGE_MANAGE_PERMS).can;
+    const authority = useRef(canManage); authority.current = canManage;
+    const auth = useAuthSnapshot();
+    const scope = `${auth.uid}:${getAuthSessionRevision()}`;
+    const openedScope = useRef(scope);
+    const mounted = useRef(true);
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
+    const current = () => mounted.current && !signal?.aborted && `${getAuthSnapshot().uid}:${getAuthSessionRevision()}` === openedScope.current;
+    const guard = () => { if (!current() || !authority.current) throw new MojoError('Session or permission changed. Reopen Serving before changing this hostname.', 403); };
+
     const editing = row != null;
 
     const [kind, setKind] = useState<VhostKind | null>((row?.kind as VhostKind | undefined) ?? null);
@@ -61,10 +86,67 @@ export function VhostWizard({ row = null, onDone, onBusyChange }: VhostWizardPro
     const [storedRoutes, setStoredRoutes] = useState<string[] | null>(editing ? null : []);
     const [routesUnread, setRoutesUnread] = useState(false);
     const nextRouteKey = useRef(1);
-    // Finish reruns whole on every retry, so what already landed is recorded
+    // Explicit continuation retains acknowledged steps rather than duplicating them
     // here and skipped: never a second vhost, never a duplicate route.
     const progress = useRef<{ vhostId: number | null; routes: Map<string, number> }>({ vhostId: null, routes: new Map() });
     const [createdId, setCreatedId] = useState<number | null>(null);
+    // Keep older callers' focused entry points compatible with the combined task.
+    const [active, setActive] = useState(['address', 'routing'].includes(initialTab) ? 'hostname' : initialTab);
+    const [busy, setBusy] = useState(false);
+    const pending = useRef(false);
+    const body = useRef<HTMLDivElement>(null);
+    const [error, setError] = useState('');
+    const [domainOwner, setDomainOwner] = useState<{ id: number; group: number | null } | null>(null);
+    const [ownerError, setOwnerError] = useState('');
+    const submitted = useRef<Record<string, unknown> | null>(null);
+    const uncertain = useRef<{ step: 'create' | 'route' | 'finish' | 'edit'; prefix?: string } | null>(null);
+    const [unconfirmed, setUnconfirmed] = useState('');
+    const reveal = (message: string, tab = 'settings', selector = 'input:not(:disabled):not([readonly]):not([type=radio]):not([type=checkbox]),select:not(:disabled),textarea:not(:disabled)'): never => {
+        setActive(['address', 'routing'].includes(tab) ? 'hostname' : tab);
+        setTimeout(() => body.current?.querySelector<HTMLElement>(selector)?.focus(), 0);
+        throw new Error(message);
+    };
+    // A server 4xx / explicit envelope rejection proves refusal. Network,
+    // malformed responses and 5xx responses cannot prove the write did not land.
+    const refused = (error: unknown) => error instanceof MojoError && (error.status === 200 || (error.status >= 400 && error.status < 500));
+    const unknown = (step: 'create' | 'route' | 'finish' | 'edit', prefix?: string): never => {
+        uncertain.current = { step, prefix };
+        const text = step === 'create'
+            ? 'Create outcome unconfirmed. The hostname may already exist. Close this wizard and inspect Serving before starting another create; this wizard will not replay it.'
+            : `Hostname #${progress.current.vhostId ?? row?.id}: ${step === 'route' ? `route ${prefix}` : 'final save / enablement'} outcome unconfirmed. Observe the saved configuration before continuing. It may already have applied.`;
+        setUnconfirmed(text);
+        throw new Error(text);
+    };
+    const observe = async () => {
+        const pending = uncertain.current;
+        if (!pending || pending.step === 'create') return;
+        const observedId = progress.current.vhostId ?? row?.id;
+        if (observedId == null) return;
+        try {
+            // Observe outcome shares the submit lifecycle and never sends a write.
+            if (pending.step === 'route') {
+                const observed = await listVhostRoutes(observedId);
+                const expected = routes.find(route => route.path_prefix === pending.prefix);
+                const match = observed.find(route => route.path_prefix === pending.prefix && route.upstream?.id === expected?.upstream);
+                if (!match) throw new Error('The submitted route was not found in this bounded observation. Inspect the hostname’s routes before starting another create; no route is replayed here.');
+                progress.current.routes.set(match.path_prefix, match.id);
+            } else {
+                await EdgeVhostModel.invalidate(queryClient);
+                const observed = await EdgeVhostModel.fetchOne(queryClient, observedId);
+                if (!current()) return;
+                const differences = submitted.current ? observedDifferences(submitted.current, observed) : ['The submitted configuration receipt is missing.'];
+                if (observed.id !== observedId) differences.unshift(`Hostname ID: expected ${observedId}, observed ${observed.id ?? 'unknown'}`);
+                if (differences.length) {
+                    setUnconfirmed(`Outcome still unconfirmed. ${differences.slice(0, 3).join('; ')}${differences.length > 3 ? `; ${differences.length - 3} more differences` : ''}. No write was replayed.`);
+                    return;
+                }
+                setUnconfirmed(`The exact submitted configuration was observed. Select ${editing ? 'Save changes' : 'Add hostname'} again to continue. Fleet application remains unverified.`);
+            }
+            if (!current()) return;
+            uncertain.current = null;
+            if (pending.step === 'route') setUnconfirmed('Route observed. Select Add hostname again to continue from acknowledged progress.');
+        } catch (error) { throw new Error(`Observation unavailable: ${reason(error)}. No write was replayed.`); }
+    };
 
     // The row embeds `certificate: basic`, which has no `sans`; the coverage
     // check needs the certificate's own graph.
@@ -93,181 +175,188 @@ export function VhostWizard({ row = null, onDone, onBusyChange }: VhostWizardPro
     });
 
     const checkShape = () => {
-        if (!kind) throw new Error('Choose what this address serves.');
+        if (!kind) reveal('Choose what this address serves.', 'routing', 'input[type=radio]');
         if (editing && row.kind === 'site_api' && kind !== 'site_api' && (storedRoutes?.length ?? 0) > 0) {
-            throw new Error(`This vhost has ${storedRoutes!.length} route${storedRoutes!.length === 1 ? '' : 's'}. Delete them in the detail view before changing what it serves.`);
+            reveal(`This hostname has ${storedRoutes!.length} route${storedRoutes!.length === 1 ? '' : 's'}. Delete them in the detail view before changing what it serves.`, 'routing', 'input[type=radio]');
         }
     };
     const checkName = () => {
-        if (!domain) throw new Error('Choose a domain.');
+        if (!domain) reveal('Choose a domain.', 'address', 'input[role=combobox]');
         const refusal = validateVhostLabel(label);
-        if (refusal) throw new Error(refusal);
+        if (refusal) reveal(refusal, 'address', '[aria-label="Hostname label"]');
     };
     const checkKnobs = () => {
         if (kind === 'redirect') {
             const refusal = validateRedirectTarget(redirectTo.trim().toLowerCase());
-            if (refusal) throw new Error(refusal);
+            if (refusal) reveal(refusal, 'routing', '[placeholder="www.example.com"]');
             return;
         }
         const size = validateBodySizeMb(/^\d+$/.test(bodySize) ? Number(bodySize) : bodySize);
-        if (size) throw new Error(size);
-        if (kind === 'api' && upstream == null) throw new Error('Choose the upstream this host proxies to.');
+        if (size) reveal(size, 'settings', '[aria-label="Maximum request body (MB)"]');
+        if (kind === 'api' && upstream == null) reveal('Choose an upstream.', 'routing', '[placeholder="Search enabled upstreams…"]');
         if (kind === 'site_api' && !editing) {
             const refusal = validateRouteDrafts(routes);
-            if (refusal) throw new Error(refusal);
+            if (refusal) reveal(refusal, 'routing', '.edge-route-list [aria-label="Path prefix"],.edge-route-list input[role=combobox]');
         }
         if (kind === 'api' || kind === 'site_api') {
             for (const path of cleanQuietPaths) {
                 const refusal = validateRequestPath(path, 'A quiet path');
-                if (refusal) throw new Error(refusal);
+                if (refusal) reveal(refusal, 'settings', '[aria-label^="Quiet paths"]');
             }
-            if (new Set(cleanQuietPaths).size !== cleanQuietPaths.length) throw new Error('A quiet path is listed twice.');
+            if (new Set(cleanQuietPaths).size !== cleanQuietPaths.length) reveal('A quiet path is listed twice.', 'settings', '[aria-label^="Quiet paths"]');
             // Stored routes not read yet, or unreadable: the server checks.
             if (kind === 'site_api' && !(editing && storedRoutes == null)) {
                 const uncovered = quietPathUncovered(cleanQuietPaths, routePrefixes);
-                if (uncovered) throw new Error(`Quiet path ${uncovered} is not under any route prefix.`);
+                if (uncovered) reveal(`Quiet path ${uncovered} is not under any route prefix.`, 'settings', '[aria-label^="Quiet paths"]');
             }
         }
     };
     const checkCertificate = () => {
-        if (certificateId == null) throw new Error('Choose a certificate.');
+        if (certificateId == null) reveal('Choose a certificate.', 'certificate', 'input[role=combobox]');
         const refusal = validatePoolName(pool.trim());
-        if (refusal) throw new Error(refusal);
+        if (refusal) reveal(refusal, 'settings', '[aria-label="Fleet pool"]');
     };
     const checkAll = () => { checkShape(); checkName(); checkKnobs(); checkCertificate(); };
 
     const finish = async (): Promise<void> => {
+        if (uncertain.current) {
+            if (uncertain.current.step === 'create') throw new Error(unconfirmed);
+            await observe();
+            return;
+        }
+        guard();
         checkAll();
         const values = draft();
         if (editing) {
-            const saved = await saveVhost(row.id, buildVhostPayload(values, { create: false }));
+            let saved: EdgeVhostRow;
+            submitted.current = buildVhostPayload(values, { create: false });
+            try { saved = await saveVhost(row.id, submitted.current, guard); }
+            catch (error) { if (!refused(error)) unknown('edit'); throw error; }
+            if (saved.id !== row.id || saved.kind !== values.kind || saved.is_enabled !== values.is_enabled) unknown('edit');
             await EdgeVhostModel.invalidate(queryClient);
-            onDone(saved);
+            if (current()) onDone(saved);
             return;
         }
         const state = progress.current;
         let saved: EdgeVhostRow | null = null;
         if (values.kind !== 'site_api') {
-            saved = await saveVhost(null, buildVhostPayload(values, { create: true }));
+            try { saved = await saveVhost(null, buildVhostPayload(values, { create: true }), guard); }
+            catch (error) { if (!refused(error)) unknown('create'); throw error; }
+            if (!Number.isSafeInteger(saved.id) || saved.id <= 0 || saved.kind !== values.kind || saved.is_enabled !== values.is_enabled) unknown('create');
         } else {
             // The server checks a quiet path against the routes of a STORED
             // row, and an enabled row is live at once. So: create disabled
             // and without quiet paths, land the routes, then one update that
             // carries the quiet paths and the real enablement.
             if (state.vhostId == null) {
-                const created = await saveVhost(null, buildVhostPayload({ ...values, quiet_paths: [], is_enabled: false }, { create: true }));
+                let created: EdgeVhostRow;
+                try { created = await saveVhost(null, buildVhostPayload({ ...values, quiet_paths: [], is_enabled: false }, { create: true }), guard); }
+                catch (error) { if (!refused(error)) unknown('create'); throw error; }
+                if (!Number.isSafeInteger(created.id) || created.id <= 0 || created.kind !== 'site_api' || created.is_enabled !== false) unknown('create');
+                guard();
                 state.vhostId = created.id;
                 setCreatedId(created.id);
             }
             for (const route of routes) {
                 if (state.routes.has(route.path_prefix)) continue;
                 try {
-                    const stored = await saveVhostRoute(null, { vhost: state.vhostId, path_prefix: route.path_prefix, upstream: route.upstream! });
+                    const stored = await saveVhostRoute(null, { vhost: state.vhostId, path_prefix: route.path_prefix, upstream: route.upstream! }, guard);
+                    if (!Number.isSafeInteger(stored.id) || stored.id <= 0 || stored.path_prefix !== route.path_prefix || stored.upstream?.id !== route.upstream) unknown('route', route.path_prefix);
+                    guard();
                     state.routes.set(route.path_prefix, stored.id);
                 } catch (error) {
                     await Promise.allSettled([EdgeVhostModel.invalidate(queryClient), EdgeRouteModel.invalidate(queryClient)]);
-                    throw new Error(`Vhost #${state.vhostId} was created disabled, but the route ${route.path_prefix} was refused: ${reason(error)}. Fix it and finish again; nothing is created twice.`);
+                    if (!refused(error)) unknown('route', route.path_prefix);
+                    throw new Error(`Hostname #${state.vhostId} was created disabled, but the route ${route.path_prefix} was refused: ${reason(error)}. Fix it and finish again; nothing is created twice.`);
                 }
             }
+            submitted.current = buildVhostPayload(values, { create: false });
             try {
-                saved = await saveVhost(state.vhostId, buildVhostPayload(values, { create: false }));
+                saved = await saveVhost(state.vhostId, submitted.current, guard);
+                if (saved.id !== state.vhostId || saved.kind !== values.kind || saved.is_enabled !== values.is_enabled) unknown('finish');
             } catch (error) {
                 await Promise.allSettled([EdgeVhostModel.invalidate(queryClient), EdgeRouteModel.invalidate(queryClient)]);
-                throw new Error(`Vhost #${state.vhostId} and its routes were created, and it is still disabled. The last step was refused: ${reason(error)}. Fix it and finish again; nothing is created twice.`);
+                if (!refused(error)) unknown('finish');
+                throw new Error(`Hostname #${state.vhostId} and its routes were created disabled. The last step was refused: ${reason(error)}. Fix it and finish again; nothing is created twice.`);
             }
         }
         await Promise.allSettled([EdgeVhostModel.invalidate(queryClient), EdgeRouteModel.invalidate(queryClient)]);
-        onDone(saved);
+        if (current()) onDone(saved);
     };
 
-    const locked = createdId != null;
-    const sections = useMemo<FormWizardSection[]>(() => {
-        const shape: FormWizardSection = {
-            key: 'shape', label: 'Shape', fields: [], description: 'What should this address do? Each choice shows only the settings it uses.',
-            content: ({ busy }) => <div className="edge-kind-cards" role="radiogroup" aria-label="What this address serves">
-                {VHOST_KIND_CARDS.map((card) => <label key={card.value} className={`edge-kind-card${kind === card.value ? ' is-selected' : ''}`}>
-                    <input type="radio" name="edge-vhost-kind" checked={kind === card.value} disabled={busy || locked} onChange={() => setKind(card.value)} />
-                    <i className={`bi ${card.icon}`} />
-                    <b>{card.title}</b>
-                    <span>{card.description}</span>
-                </label>)}
-            </div>,
-            onNext: checkShape,
-        };
-        const name: FormWizardSection = {
-            key: 'name', label: 'Name', fields: [], description: 'The address is the label joined to a domain you hold. It is never typed whole.',
-            content: ({ busy }) => <div className="edge-form-grid">
-                <CollectionSelect<DomainRow> model={DomainModel} value={domain} onChange={(_id, picked) => { setDomain(picked ? { id: picked.id, name: picked.name } : null); setCertificate(null); setCertificateId(null); }} label="Domain" required readOnly={editing || locked} disabled={busy} placeholder="Search active domains…"
-                    // A house domain would dead-end at the server's platform gate for anyone else.
-                    defaultParams={{ status: 'active', sort: 'name', ...(superuser ? {} : { group__isnull: false }) }}
-                    help={editing ? 'A vhost cannot be moved to another domain.' : undefined} />
-                <label className="field"><span className="field-label">Label</span><input className="input" value={label} disabled={busy} onChange={(event) => setLabel(event.target.value.trim().toLowerCase())} placeholder="www" autoComplete="off" /><span className="field-help">Empty serves the bare domain. * serves every one-label subdomain.</span></label>
-                <div className="edge-server-name" aria-live="polite"><span>Address</span><code>{serverName || '—'}</code></div>
-            </div>,
-            onNext: checkName,
-        };
-        const knobs: FormWizardSection = {
-            key: 'knobs', label: 'Settings', fields: [], description: kind ? `Settings for: ${vhostKindTitle(kind)}.` : undefined,
-            content: ({ busy }) => <div className="edge-form-grid">
-                {kind === 'api' && <CollectionSelect<EdgeUpstreamRow> model={EdgeUpstreamModel} value={upstream} onChange={(id) => setUpstream(id == null ? null : Number(id))} label="Upstream" required disabled={busy} placeholder="Search enabled upstreams…" defaultParams={{ is_enabled: true, sort: 'name' }} help="Every request on this address goes here. Upstreams are declared by a platform administrator." />}
-                {kind === 'redirect' && <label className="field"><span className="field-label">Redirect to <em>*</em></span><input className="input" value={redirectTo} disabled={busy} onChange={(event) => setRedirectTo(event.target.value)} placeholder="www.example.com" autoComplete="off" /><span className="field-help">A host name only: no https://, path or port.</span></label>}
-                {(kind === 'site' || kind === 'site_api') && <label className="field switch-field"><input type="checkbox" checked={spa} disabled={busy} onChange={(event) => setSpa(event.target.checked)} /> Single-page app: unknown paths return index.html instead of a 404</label>}
-                {kind === 'site_api' && (editing
-                    ? <div className="edge-note"><b>Routes</b><span>{storedRoutes == null ? (routesUnread ? 'Could not be read.' : 'Loading…') : storedRoutes.length ? storedRoutes.join(', ') : 'None yet.'} Manage routes in the detail view.</span></div>
-                    : <div className="field edge-route-list">
-                        <span className="field-label">Routes <em>*</em></span>
-                        {routes.map((route) => <div className="edge-route-row" key={route.key}>
-                            <input className="input" value={route.path_prefix} disabled={busy || progress.current.routes.has(route.path_prefix)} placeholder="/api" aria-label="Path prefix" onChange={(event) => setRoutes((rows) => rows.map((item) => item.key === route.key ? { ...item, path_prefix: event.target.value.trim() } : item))} />
-                            <CollectionSelect<EdgeUpstreamRow> model={EdgeUpstreamModel} value={route.upstream == null ? null : { id: route.upstream, name: route.upstreamName ?? '' }} onChange={(id, picked) => setRoutes((rows) => rows.map((item) => item.key === route.key ? { ...item, upstream: id == null ? null : Number(id), upstreamName: picked?.name } : item))} disabled={busy || progress.current.routes.has(route.path_prefix)} placeholder="Upstream…" defaultParams={{ is_enabled: true, sort: 'name' }} />
-                            <button type="button" className="btn btn-compact" disabled={busy || progress.current.routes.has(route.path_prefix)} aria-label={`Remove route ${route.path_prefix}`} onClick={() => setRoutes((rows) => rows.filter((item) => item.key !== route.key))}><i className="bi bi-x-lg" /></button>
-                        </div>)}
-                        <div><button type="button" className="btn btn-compact" disabled={busy} onClick={() => setRoutes((rows) => [...rows, { key: nextRouteKey.current++, path_prefix: '', upstream: null }])}><i className="bi bi-plus-lg" /> Add route</button></div>
-                        <span className="field-help">Requests under each prefix go to its upstream; everything else is served from the site. At least one is required.</span>
-                    </div>)}
-                {(kind === 'api' || kind === 'site_api') && <label className="field switch-field"><input type="checkbox" checked={serveStatic} disabled={busy} onChange={(event) => setServeStatic(event.target.checked)} /> Serve the fleet's static files at /static/ instead of proxying them</label>}
-                {(kind === 'api' || kind === 'site_api') && <PathListEditor label="Quiet paths" help={kind === 'site_api' ? 'Exact paths kept out of the access log, such as health checks. Each must sit under a route prefix.' : 'Exact paths kept out of the access log, such as health checks.'} paths={quietPaths} onChange={setQuietPaths} disabled={busy} />}
-                {kind !== 'redirect' && <label className="field"><span className="field-label">Largest request body (MB)</span><input className="input" inputMode="numeric" value={bodySize} disabled={busy} onChange={(event) => setBodySize(event.target.value.trim())} /><span className="field-help">1 to 4096. The default is 50.</span></label>}
-            </div>,
-            onNext: checkKnobs,
-        };
-        const serving: FormWizardSection = {
-            key: 'certificate', label: 'Certificate', fields: [],
-            content: ({ busy }) => <div className="edge-form-grid">
-                <CollectionSelect<CertificateRow> key={domain?.id ?? 'none'} model={CertificateModel} labelField="common_name" value={certificateId == null ? null : { id: certificateId, common_name: certificate?.id === certificateId ? certificate.common_name : row?.certificate?.common_name ?? '' }} onChange={(id, picked) => { setCertificateId(id == null ? null : Number(id)); setCertificate(picked ?? null); }} label="Certificate" required disabled={busy || !domain} placeholder={domain ? 'Search this domain’s certificates…' : 'Choose a domain first'} defaultParams={domain ? { domain__exact: domain.id } : {}} />
-                {covered === false && <div className="edge-warning" role="status"><i className="bi bi-exclamation-triangle" /> This certificate does not cover <code>{serverName}</code>. The vhost will not enable until it does. Save it disabled to stage it.</div>}
-                <label className="field"><span className="field-label">Pool</span><input className="input" value={pool} disabled={busy} onChange={(event) => setPool(event.target.value)} autoComplete="off" /><span className="field-help">Which group of edge nodes serves this address. It must be a pool this deployment declares; most have only “default”.</span></label>
-                <label className="field switch-field"><input type="checkbox" checked={enabled} disabled={busy} onChange={(event) => setEnabled(event.target.checked)} /> Enabled: start serving once saved</label>
-            </div>,
-            onNext: checkCertificate,
-        };
-        const review: FormWizardSection = {
-            key: 'review', label: 'Review', fields: [],
-            content: <dl className="edge-review">
-                <dt>Address</dt><dd><code>{serverName || '—'}</code></dd>
-                <dt>Serves</dt><dd>{kind ? vhostKindTitle(kind) : '—'}</dd>
-                {kind === 'redirect' && <><dt>Redirects to</dt><dd><code>{redirectTo || '—'}</code></dd></>}
-                {kind === 'site_api' && !editing && <><dt>Routes</dt><dd>{routes.length ? routes.map((route) => `${route.path_prefix} → ${route.upstreamName ?? `#${route.upstream}`}`).join(', ') : 'None'}</dd></>}
-                {(kind === 'site' || kind === 'site_api') && <><dt>Single-page app</dt><dd>{spa ? 'Yes' : 'No'}</dd></>}
-                {(kind === 'api' || kind === 'site_api') && <><dt>Static files</dt><dd>{serveStatic ? 'Served at /static/' : 'Not served here'}</dd><dt>Quiet paths</dt><dd>{cleanQuietPaths.length ? cleanQuietPaths.join(', ') : 'None'}</dd></>}
-                {kind !== 'redirect' && <><dt>Largest body</dt><dd>{bodySize} MB</dd></>}
-                <dt>Pool</dt><dd>{pool}</dd>
-                <dt>State</dt><dd>{enabled ? 'Enabled' : 'Disabled'}{covered === false && enabled ? ' — the certificate does not cover this address, so the save will be refused' : ''}</dd>
-                {locked && <><dt>Progress</dt><dd>Vhost #{createdId} already exists, disabled. Finishing again continues from there.</dd></>}
-            </dl>,
-        };
-        return editing ? [shape, name, knobs, serving] : [shape, name, knobs, serving, review];
-        // The check* closures read the same state listed here.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [bodySize, certificate, certificateId, covered, createdId, domain, editing, enabled, kind, label, locked, pool, quietPaths, redirectTo, routes, routesUnread, serveStatic, serverName, spa, storedRoutes, superuser, upstream]);
-
-    return <FormWizard mode={editing ? 'tabs' : 'wizard'} sections={sections} onBusyChange={onBusyChange} onCancel={() => onDone(null)} onFinish={finish} finishText="Create vhost" saveText="Save changes" busyText="Saving…" />;
+    useEffect(() => {
+        if (!domain) { setDomainOwner(null); return; }
+        let live = true;
+        setDomainOwner(null); setOwnerError('');
+        DomainModel.fetchOne(queryClient, domain.id).then(full => {
+            if (!live) return;
+            const group = typeof full.group === 'number' ? full.group : full.group?.id ?? null;
+            setDomainOwner({ id: full.id, group });
+        }).catch(cause => { if (live) setOwnerError(reason(cause)); });
+        return () => { live = false; };
+    }, [domain?.id, queryClient]);
+    const ownerReady = domainOwner?.id === domain?.id;
+    const upstreamParams = { is_enabled: true, sort: 'name', ...(domainOwner?.group != null ? { group: domainOwner.group } : { group__isnull: true }) };
+    const locked = createdId != null || !!uncertain.current;
+    const disabled = busy || !!uncertain.current || !canManage || scope !== openedScope.current;
+    const proxies = kind === 'api' || kind === 'site_api';
+    const tabs = editing ? ['hostname', 'certificate', 'settings'] : ['hostname', 'certificate', 'review'];
+    const titles: Record<string, string> = { hostname: 'Hostname', certificate: 'Certificate', settings: 'Settings', review: 'Review' };
+    const submit = async () => {
+        if (pending.current || !current()) return;
+        pending.current = true; setBusy(true); onBusyChange?.(true); setError('');
+        try { await finish(); }
+        catch (cause) { if (current()) setError(cause instanceof Error ? cause.message : 'The configuration could not be saved.'); }
+        finally { pending.current = false; if (mounted.current) { setBusy(false); onBusyChange?.(false); } }
+    };
+    const next = () => {
+        try {
+            if (active === 'hostname') { checkName(); checkShape(); checkKnobs(); }
+            if (active === 'certificate') checkCertificate();
+            setError(''); setActive(tabs[tabs.indexOf(active) + 1]!);
+        } catch (cause) { setError(cause instanceof Error ? cause.message : 'Check these fields.'); }
+    };
+    const settings = <div className="edge-form-grid">
+        <label className="field"><span className="field-label">Pool <EdgeHelp label="About fleet pools">The server must declare this pool. The default is <code>default</code>.</EdgeHelp></span><input className="input" aria-label="Fleet pool" value={pool} disabled={disabled} onChange={event => setPool(event.target.value)} autoComplete="off" /></label>
+        {kind !== 'redirect' && <label className="field"><span className="field-label">Maximum request body (MB)</span><input className="input" aria-label="Maximum request body (MB)" inputMode="numeric" value={bodySize} disabled={disabled} onChange={event => setBodySize(event.target.value.trim())} /><span className="field-help">1–4096 MB</span></label>}
+        {proxies && <><label className="field switch-field"><input type="checkbox" checked={serveStatic} disabled={disabled} onChange={event => setServeStatic(event.target.checked)} /> Serve static files <EdgeHelp label="About static files">Serve the fleet's files at /static/ rather than proxying them.</EdgeHelp></label><PathListEditor label="Quiet paths" help={kind === 'site_api' ? 'Each exact path must be under a route prefix.' : 'Exact paths omitted from the access log.'} paths={quietPaths} onChange={setQuietPaths} disabled={disabled} /></>}
+    </div>;
+    const panels: Record<string, ReactNode> = {
+        hostname: <div className="edge-form-grid">
+            <CollectionSelect<DomainRow> model={DomainModel} value={domain} onChange={(_id, picked) => { setDomain(picked ? { id: picked.id, name: picked.name } : null); setCertificate(null); setCertificateId(null); setUpstream(null); setRoutes([]); }} label="Domain" required readOnly={editing || locked} disabled={disabled} placeholder="Search active domains…" defaultParams={{ status: 'active', sort: 'name', ...(superuser ? {} : { group__isnull: false }) }} />
+            <label className="field"><span className="field-label">Label <EdgeHelp label="About hostname labels">Leave empty for the bare domain. Use * for every one-label subdomain.</EdgeHelp></span><input className="input" aria-label="Hostname label" value={label} disabled={disabled || locked} onChange={event => setLabel(event.target.value.trim().toLowerCase())} placeholder="www" autoComplete="off" /></label>
+            <div className="edge-server-name" aria-live="polite"><span>Hostname</span><code>{serverName || 'Choose a domain'}</code></div>
+            <fieldset className="edge-kind-picker" disabled={disabled || locked}><legend className="field-label">Serves <EdgeHelp label="About serving types">API proxies every request. Site serves published files. Site + API proxies chosen prefixes. Redirect sends requests to another hostname.</EdgeHelp></legend><div className="edge-kind-options">{VHOST_KIND_CARDS.map(card => <label key={card.value} className={`edge-kind-option${kind === card.value ? ' is-selected' : ''}`}><input type="radio" name="edge-vhost-kind" checked={kind === card.value} onChange={() => setKind(card.value)} /><i className={`bi ${card.icon}`} aria-hidden="true" />{card.title}</label>)}</div></fieldset>
+            {ownerError && proxies && <div className="form-alert" role="alert">Could not load the domain's upstream scope: {ownerError}</div>}
+            {kind === 'api' && <CollectionSelect<EdgeUpstreamRow> model={EdgeUpstreamModel} value={upstream} onChange={id => setUpstream(id == null ? null : Number(id))} label="Upstream" required disabled={disabled || !ownerReady} placeholder="Search enabled upstreams…" defaultParams={upstreamParams} />}
+            {kind === 'redirect' && <label className="field"><span className="field-label">Redirect to <em>*</em> <EdgeHelp label="About redirect destinations">Enter a hostname only, without https://, a path or port. The redirect preserves the request path.</EdgeHelp></span><input className="input" value={redirectTo} disabled={disabled} onChange={event => setRedirectTo(event.target.value)} placeholder="www.example.com" autoComplete="off" /></label>}
+            {kind === 'site_api' && (editing ? <div className="edge-note"><b>API routes</b><span>{storedRoutes == null ? routesUnread ? 'Unavailable. The server will validate existing routes.' : 'Loading…' : storedRoutes.length ? storedRoutes.join(', ') : 'No routes yet.'} Add or change routes from the hostname's Routes tab after saving.</span></div> : <div className="field edge-route-list"><span className="field-label">API routes <em>*</em></span>{routes.map(route => <div className="edge-route-row" key={route.key}><input className="input" value={route.path_prefix} disabled={disabled || progress.current.routes.has(route.path_prefix)} placeholder="/api" aria-label="Path prefix" onChange={event => setRoutes(rows => rows.map(item => item.key === route.key ? { ...item, path_prefix: event.target.value.trim() } : item))} /><CollectionSelect<EdgeUpstreamRow> model={EdgeUpstreamModel} value={route.upstream == null ? null : { id: route.upstream, name: route.upstreamName ?? '' }} onChange={(id, picked) => setRoutes(rows => rows.map(item => item.key === route.key ? { ...item, upstream: id == null ? null : Number(id), upstreamName: picked?.name } : item))} disabled={disabled || !ownerReady || progress.current.routes.has(route.path_prefix)} label="Upstream" placeholder="Upstream…" defaultParams={upstreamParams} /><button type="button" className="btn btn-compact" disabled={disabled || progress.current.routes.has(route.path_prefix)} aria-label={`Remove route ${route.path_prefix}`} onClick={() => setRoutes(rows => rows.filter(item => item.key !== route.key))}><i className="bi bi-x-lg" /></button></div>)}<div><button type="button" className="btn btn-compact" disabled={disabled} onClick={() => setRoutes(rows => [...rows, { key: nextRouteKey.current++, path_prefix: '', upstream: null }])}><i className="bi bi-plus-lg" /> Add route</button></div></div>)}
+            {(kind === 'site' || kind === 'site_api') && <label className="field switch-field"><input type="checkbox" checked={spa} disabled={disabled} onChange={event => setSpa(event.target.checked)} /> Single-page app <EdgeHelp label="About single-page apps">Unknown paths return index.html instead of a 404.</EdgeHelp></label>}
+        </div>,
+        certificate: <div className="edge-form-grid"><CollectionSelect<CertificateRow> key={domain?.id ?? 'none'} model={CertificateModel} labelField="common_name" value={certificateId == null ? null : { id: certificateId, common_name: certificate?.id === certificateId ? certificate.common_name : row?.certificate?.common_name ?? '' }} onChange={(id, picked) => { setCertificateId(id == null ? null : Number(id)); setCertificate(picked ?? null); }} label="Certificate" required disabled={disabled || !domain} placeholder={domain ? 'Search this domain’s certificates…' : 'Choose a domain first'} defaultParams={domain ? { domain__exact: domain.id } : {}} />
+            <p className={covered === false ? 'text-warn' : 'dim'} role="status">{covered == null ? 'Certificate coverage unknown.' : covered ? 'Certificate covers this hostname.' : 'This certificate does not cover the hostname. Save disabled to stage it.'}</p>
+            <label className="field switch-field"><input type="checkbox" checked={enabled} disabled={disabled} onChange={event => setEnabled(event.target.checked)} /> Enabled <EdgeHelp label="About enabled configuration">Enabled is saved intent. It does not prove that the fleet has applied this configuration.</EdgeHelp></label>
+        </div>,
+        settings,
+        review: <div className="edge-form-grid"><dl className="edge-review"><dt>Hostname</dt><dd><code>{serverName}</code></dd><dt>Serves</dt><dd>{kind ? vhostKindTitle(kind) : '—'}</dd>{kind === 'redirect' && <><dt>Destination</dt><dd>{redirectTo}</dd></>}{kind === 'api' && <><dt>Upstream</dt><dd>{upstream == null ? 'None' : `#${upstream}`}</dd></>}{kind === 'site_api' && <><dt>Routes</dt><dd>{routes.map(route => `${route.path_prefix} → ${route.upstreamName ?? `#${route.upstream}`}`).join(', ')}</dd></>}<dt>Certificate</dt><dd>{certificate?.common_name ?? row?.certificate?.common_name ?? 'Unknown'}</dd><dt>State</dt><dd>{enabled ? 'Enabled intent' : 'Disabled'}</dd></dl><button type="button" className="btn edge-settings-button" disabled={busy} onClick={() => setActive('settings')}>Other settings <i className="bi bi-sliders" /></button></div>,
+    };
+    const inspect = async () => {
+        if (pending.current || createdId == null) return;
+        pending.current = true; setBusy(true); onBusyChange?.(true);
+        try { await EdgeVhostModel.invalidate(queryClient); const observed = await EdgeVhostModel.fetchOne(queryClient, createdId); if (current()) onDone(observed); }
+        catch (cause) { setError(`Could not inspect saved hostname #${createdId}: ${reason(cause)}`); }
+        finally { pending.current = false; if (mounted.current) { setBusy(false); onBusyChange?.(false); } }
+    };
+    return <div className="edge-vhost-editor" aria-busy={busy || undefined}>
+        {error && <div className="form-alert" role="alert">{error}</div>}
+        {unconfirmed && <div className="edge-warning" role="status">{unconfirmed}</div>}
+        {editing ? <Tabs ariaLabel="Hostname settings" activeKey={active} onActiveKeyChange={key => { if (!busy) { setActive(key); setError(''); } }} items={tabs.map(key => ({ key, label: titles[key], disabled: busy && key !== active, panel: <div className="edge-editor-panel" ref={body}>{panels[key]}</div> }))} /> : <><ol className="edge-create-progress" aria-label="Setup progress">{tabs.map((key, index) => <li key={key} aria-current={key === (active === 'settings' ? 'review' : active) ? 'step' : undefined}><span>{index + 1}</span>{titles[key]}</li>)}</ol><div className="edge-editor-panel" ref={body}>{panels[active]}</div></>}
+        <div className="modal-actions edge-editor-actions"><button type="button" className="btn" disabled={busy} onClick={() => onDone(null)}>Cancel</button>{createdId != null && <button type="button" className="btn" disabled={busy} onClick={() => void inspect()}>Inspect saved hostname</button>}{!editing && tabs.indexOf(active) > 0 && <button type="button" className="btn" disabled={busy} onClick={() => { setError(''); setActive(tabs[tabs.indexOf(active) - 1]!); }}>Back</button>}{!editing && active !== 'review' && active !== 'settings' && !uncertain.current ? <button type="button" className="btn btn-primary" disabled={busy} onClick={next}>Next</button> : <button type="button" className="btn btn-primary" disabled={busy || uncertain.current?.step === 'create'} onClick={() => { if (active === 'settings' && !editing && !uncertain.current) { try { checkKnobs(); checkCertificate(); setActive('review'); } catch (cause) { setError(reason(cause)); } } else void submit(); }}>{busy ? 'Saving…' : uncertain.current ? 'Observe outcome' : editing ? 'Save changes' : active === 'settings' ? 'Back to review' : 'Add hostname'}</button>}</div>
+    </div>;
 }
 
-/** Opens the wizard in a modal; resolves with the saved row, or null when cancelled. */
-export function openVhostWizard(row: EdgeVhostRow | null = null): Promise<EdgeVhostRow | null> {
+/** Native focused editor; no generic record rail. */
+export function openVhostWizard(row: EdgeVhostRow | null = null, options: { initialTab?: string; signal?: AbortSignal } = {}): Promise<EdgeVhostRow | null> {
     let pending = false;
-    return modal.open<EdgeVhostRow | null>((close) => <div className="modal-pad edge-vhost-wizard">
-        <h2 className="modal-title">{row ? `Edit ${row.server_name ?? 'vhost'}` : 'New vhost'}</h2>
-        <VhostWizard row={row} onBusyChange={(busy) => { pending = busy; }} onDone={(saved) => close(saved)} />
-    </div>, { size: 'lg', canDismiss: () => !pending }).then((value) => value ?? null);
+    return modal.open<EdgeVhostRow | null>(close => <div className="modal-pad edge-vhost-wizard"><h2 className="modal-title">{row ? `Edit ${row.server_name ?? 'hostname'}` : 'Add hostname'}</h2><VhostWizard row={row} initialTab={options.initialTab} signal={options.signal} onBusyChange={value => { pending = value; }} onDone={saved => { if (!pending) close(saved); else if (saved) close(saved); }} /></div>, { size: 'md', canDismiss: () => !pending, signal: options.signal }).then(value => value ?? null);
 }

package/src/admin/edge/VhostsPage.tsx

@@ -1,47 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { Badge, ModelTable, fmt, modal, toast, type Column, type FilterDef } from '../../ui';
-import { useCan } from '../../client/runtime';
+import { Badge, CollectionSelect, ModelTable, modal, toast, type Column, type FilterDef } from '../../ui';
+import { getAuthSessionRevision, useAuthSnapshot, useCan, useTableParams } from '../../client/runtime';
+import { DomainModel, type DomainRow } from '../dns/models';
 import { EDGE_MANAGE_PERMS, EdgeVhostModel, VHOST_KIND_CARDS, vhostKindTitle, type EdgeVhostRow } from './models';
 import { VhostDetail } from './VhostDetail';
+import { ServingReadiness } from './ServingReadiness';
 import { openVhostWizard } from './VhostWizard';
 
 const COLUMNS: Column<EdgeVhostRow>[] = [
-    { key: 'server_name', label: 'Address', sortable: false, hideable: false, render: (row) => <code>{row.server_name ?? '—'}</code> },
-    { key: 'kind', label: 'Serves', sortable: true, render: (row) => <Badge tone="info">{vhostKindTitle(row.kind)}</Badge> },
-    { key: 'pool', label: 'Pool', sortable: true },
-    { key: 'is_enabled', label: 'State', sortable: true, render: (row) => row.is_enabled ? <Badge tone="success">Enabled</Badge> : <Badge tone="muted">Disabled</Badge> },
-    { key: 'domain', label: 'Domain', sortable: false, render: (row) => row.domain?.name ?? '—' },
-    { key: 'created', label: 'Created', sortable: true, render: (row) => fmt.date(row.created) },
+    { key: 'server_name', label: 'Hostname', sortable: false, hideable: false, render: row => <span className="ops-cell"><strong>{row.server_name ?? '—'}</strong><small>{row.domain?.name}</small></span> },
+    { key: 'kind', label: 'Serves', sortable: true, render: row => <Badge tone="info">{vhostKindTitle(row.kind)}</Badge> },
+    { key: 'is_enabled', label: 'State', sortable: true, render: row => <Badge tone={row.is_enabled ? 'info' : 'muted'}>{row.is_enabled ? 'Enabled' : 'Disabled'}</Badge> },
 ];
-
 const FILTERS: FilterDef[] = [
-    { key: 'kind', label: 'Serves', type: 'select', options: VHOST_KIND_CARDS.map((card) => ({ value: card.value, label: card.title })) },
+    { key: 'kind', label: 'Serves', type: 'select', options: VHOST_KIND_CARDS.map(card => ({ value: card.value, label: card.title })) },
     { key: 'is_enabled', label: 'State', type: 'boolean', trueLabel: 'Enabled', falseLabel: 'Disabled' },
-    { key: 'pool', label: 'Pool', type: 'text' },
 ];
 
 export function VhostsPage() {
     const queryClient = useQueryClient();
+    const [revision, setRevision] = useState(0);
+    const changed = () => setRevision(value => value + 1);
     const canManage = useCan(EDGE_MANAGE_PERMS).can;
+    const auth = useAuthSnapshot();
+    const scope = `${auth.uid}:${getAuthSessionRevision()}`;
+    const lifetime = useRef<AbortController | null>(null);
+    useEffect(() => { const controller = new AbortController(); lifetime.current = controller; return () => controller.abort(); }, [scope, canManage]);
+    const params = useTableParams({ sort: 'label' });
+    const domain = params.filterValue('domain');
     const open = async (row: EdgeVhostRow) => {
-        try {
-            await EdgeVhostModel.fetchOne(queryClient, row.id);
-        } catch (error) {
-            toast.error(error instanceof Error ? error.message : 'Could not open the vhost');
-            return;
-        }
-        await modal.detail((close) => <VhostDetail id={row.id} onClose={() => close(null)} />);
+        const signal = lifetime.current?.signal;
+        try { await EdgeVhostModel.fetchOne(queryClient, row.id); }
+        catch (error) { if (!signal?.aborted) toast.error(error instanceof Error ? error.message : 'Could not open the hostname'); return; }
+        let pending = false;
+        await modal.open(close => <VhostDetail id={row.id} onChanged={changed} onBusyChange={value => { pending = value; }} onClose={() => { if (!pending) close(null); }} />, { size: 'lg', signal, canDismiss: () => !pending });
     };
     const create = async () => {
-        const saved = await openVhostWizard();
-        if (saved) toast.success(`${saved.server_name ?? 'Vhost'} created${saved.is_enabled ? '' : ', disabled'}.`);
+        if (!canManage) return;
+        const signal = lifetime.current?.signal;
+        const saved = await openVhostWizard(null, { signal });
+        if (saved && !signal?.aborted) { changed(); toast.success(`${saved.server_name ?? 'Hostname'} configuration saved${saved.is_enabled ? ', enabled intent' : ', disabled'}.`); await open(saved); }
     };
-    return <ModelTable<EdgeVhostRow>
-        model={EdgeVhostModel} eyebrow="Infrastructure · Edge" title="Vhosts"
-        searchable searchPlaceholder="Search label, kind or pool"
-        columns={COLUMNS} filters={FILTERS} defaultSort="label"
-        columnChooser persistState persistKey="admin:edge:vhosts"
-        onRowClick={(row) => void open(row)}
-        {...(canManage ? { addLabel: 'New vhost', onAdd: () => void create() } : {})}
-    />;
+    return <div className="edge-serving-page"><header className="page-header edge-serving-heading"><div><div className="eyebrow">Network &amp; hosting</div><h1>Serving</h1><ServingReadiness refreshRevision={revision} /></div>{canManage && <button type="button" className="btn btn-primary" onClick={() => void create()}><i className="bi bi-plus-lg" /> Add hostname</button>}</header><div className="edge-domain-filter"><CollectionSelect<DomainRow> model={DomainModel} value={domain ? Number(domain) : null} label="Domain" placeholder="All domains" defaultParams={{ sort: 'name' }} onChange={id => params.setFilter('domain', id == null ? null : String(id))} /></div><ModelTable<EdgeVhostRow> model={EdgeVhostModel} title="Hostnames" searchable searchPlaceholder="Search label, type or pool" columns={COLUMNS} filters={FILTERS} defaultSort="label" columnChooser persistState persistKey="admin:edge:vhosts" onRowClick={row => void open(row)} /></div>;
 }