portal-mojo 0.2.20 → 0.2.21

package/src/admin/edge/ServingReadiness.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react';
+import { getAuthSessionRevision, getAuthSnapshot, useAuthSnapshot, useMe } from '../../client/runtime';
+import { Badge, FlatRow, modal } from '../../ui';
+import { EdgeHelp } from './EdgeHelp';
+import { datetime } from '../../ui/format';
+import { backendGlobalCan, FLEET_DASHBOARD_GRANTS } from '../fleet/access';
+import { readHostingReadiness, readServingBootstrap, type HostingReadiness, type ServingBootstrap } from './serving-data';
+
+/** Read-only evidence, deliberately outside Query: raw bootstrap never enters a cache. */
+export function ServingReadiness({ refreshRevision = 0 }: { refreshRevision?: number }) {
+    const auth = useAuthSnapshot(), { data: me } = useMe();
+    const scope = auth.authenticated && auth.uid && me?.id === Number(auth.uid) ? `${auth.uid}:${getAuthSessionRevision()}` : null;
+    const admitted = !!scope && backendGlobalCan(me, ['view_dns', 'manage_dns', 'security']);
+    const bootstrapAllowed = admitted && backendGlobalCan(me, FLEET_DASHBOARD_GRANTS);
+    const [refresh, setRefresh] = useState(0);
+    const [state, setState] = useState<{ scope: string | null; busy: boolean; bootstrap?: ServingBootstrap; report?: HostingReadiness; error?: string; reportError?: string }>({ scope: null, busy: false });
+    const flight = useRef(0);
+    const owner = useRef<AbortController | null>(null);
+    const evidenceAuthority = `${scope}:${admitted}:${bootstrapAllowed}:${me?.is_superuser === true}:${state.scope === scope && state.bootstrap?.user.is_superuser === true}:${state.scope === scope && state.bootstrap?.capabilities.setup === true}`;
+    useEffect(() => { const controller = new AbortController(); owner.current = controller; return () => controller.abort(); }, [evidenceAuthority]);
+    useEffect(() => {
+        const serial = ++flight.current, controller = new AbortController();
+        const current = () => !controller.signal.aborted && flight.current === serial && getAuthSnapshot().authenticated && `${getAuthSnapshot().uid}:${getAuthSessionRevision()}` === scope;
+        setState({ scope, busy: bootstrapAllowed });
+        if (!bootstrapAllowed || !me || !scope) return () => controller.abort();
+        const userId = me.id, superuser = me.is_superuser === true;
+        void (async () => {
+            try {
+                const bootstrap = await readServingBootstrap(userId, controller.signal);
+                if (!current()) return;
+                setState({ scope, busy: superuser && bootstrap.user.is_superuser && bootstrap.capabilities.setup, bootstrap });
+                if (superuser && bootstrap.user.is_superuser && bootstrap.capabilities.setup === true) {
+                    try {
+                        const report = await readHostingReadiness(controller.signal);
+                        if (current()) setState({ scope, busy: false, bootstrap, report });
+                    } catch (error) {
+                        if (current()) setState({ scope, busy: false, bootstrap, reportError: error instanceof Error ? error.message : 'Readiness observation failed.' });
+                    }
+                }
+            } catch (error) {
+                if (current()) setState({ scope, busy: false, error: error instanceof Error ? error.message : 'Node posture observation failed.' });
+            }
+        })();
+        return () => controller.abort();
+    }, [scope, bootstrapAllowed, me?.id, me?.is_superuser, refresh, refreshRevision]);
+    if (!bootstrapAllowed) return null;
+    const visible: typeof state = state.scope === scope ? state : { scope, busy: false };
+    const edge = visible.bootstrap?.edge, report = visible.report, selected = report?.sections.find(section => section.code === 'hosting_vhosts');
+    const unavailable = visible.error;
+    const showDetails = () => modal.open(close => <div className="modal-pad edge-check-dialog"><h2 className="modal-title">Serving configuration checks</h2><div className="edge-check-body"><FlatRow label="Public HTTP">{edge?.available && edge.http_enabled !== null ? edge.http_enabled ? 'Enabled' : 'Disabled' : 'Unknown'}</FlatRow><FlatRow label="Certificate issuance">{edge?.available && edge.dnsman_issuance === 'dns-01' ? 'DNS-01' : 'Unknown'}</FlatRow>{unavailable && <p role="status">Unavailable: {unavailable}</p>}
+        {selected && report ? <><FlatRow label="Generated"><time dateTime={report.generated_at}>{datetime(report.generated_at)}</time></FlatRow><FlatRow label="Coverage">{selected.coverage.returned} of {selected.coverage.total} checks · {selected.coverage.omitted} omitted</FlatRow><FlatRow label="Report status">{report.overall} · {report.summary.pass} pass · {report.summary.warn} warn · {report.summary.fail} fail · {report.summary.pending} pending</FlatRow>{(report.truncated || selected.coverage.omitted > 0 || report.coverage.checks.omitted > 0 || report.coverage.sections.omitted > 0) && <p className="text-warn">Partial report · some checks are omitted.</p>}{selected.checks.map((check, index) => <div key={`${check.code}:${index}`} className="edge-serving-check"><b>{check.status} · {check.code}</b><p>{check.explanation}</p>{check.remediation && <p>{check.remediation}</p>}{check.details && Object.entries(check.details).map(([key, value]) => <p key={key}>{key}: {String(value)}</p>)}</div>)}</> : <p role="status">{visible.busy ? 'Loading observation…' : `Unavailable: ${visible.reportError ?? unavailable ?? 'Requires a literal superuser and successful same-identity bootstrap with setup capability.'}`}</p>}
+        <p className="dim">These checks inspect domain and certificate configuration. They do not prove certificate expiry, coverage, installed material, fleet convergence, expected nodes or the running generation. HTTP is a file rendering setting; DNS-01 identifies the issuance method. A hostname absent from this bounded report has no individual verdict.</p></div><div className="modal-actions"><button type="button" className="btn" onClick={() => close(null)}>Close</button></div></div>, { size: 'md', signal: owner.current?.signal });
+    return <section className="edge-serving-evidence" aria-label="Serving evidence"><div className="edge-check-summary"><div className="edge-check-status"><i className="bi bi-shield-check" aria-hidden="true" /><strong>Configuration checks</strong><Badge tone={selected?.status === 'fail' ? 'danger' : 'muted'}>{visible.busy ? 'Checking…' : selected?.status ?? 'Unavailable'}</Badge><EdgeHelp label="About configuration checks">Checks saved domain and certificate configuration. Fleet application and live serving remain unverified.</EdgeHelp></div><div className="edge-row-actions"><button type="button" className="btn btn-compact" onClick={() => void showDetails()}>Check details</button><button type="button" className="btn-icon" aria-label="Refresh serving evidence" title="Refresh" disabled={visible.busy} onClick={() => setRefresh(value => value + 1)}><i className={`bi bi-arrow-repeat${visible.busy ? ' spin' : ''}`} /></button></div></div>{report && <small className="dim">As of <time dateTime={report.generated_at}>{datetime(report.generated_at)}</time>{report.truncated || selected?.coverage.omitted || report.coverage.checks.omitted || report.coverage.sections.omitted ? ' · Partial report' : ''}</small>}{(visible.error || visible.reportError) && <p className="text-warn" role="status">Configuration check unavailable. Open Check details for the reason.</p>}</section>;
+}

package/src/admin/edge/VhostDetail.tsx

@@ -1,166 +1,172 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { useCan } from '../../client/runtime';
-import { ArmedButton, CollectionSelect, DetailView, Eyebrow, FlatRow, fmt, modal, toast } from '../../ui';
-import { deleteVhostRoute, deleteVhost, saveVhostRoute, saveVhost } from './api';
-import {
-    EDGE_MANAGE_PERMS, EdgeRouteModel, EdgeUpstreamModel, EdgeVhostModel, validateRoutePrefix, vhostKindTitle,
-    type EdgeRouteRow, type EdgeUpstreamRow, type EdgeVhostRow,
-} from './models';
+import { getAuthSessionRevision, getAuthSnapshot, MojoError, useAuthSnapshot, useCan } from '../../client/runtime';
+import { Badge, CollectionSelect, FlatRow, ModelTable, Popover, Tabs, fmt, modal, toast, type Column } from '../../ui';
+import { DomainModel } from '../dns/models';
+import { deleteVhostRoute, deleteVhost, listVhostRoutes, saveVhostRoute, saveVhost } from './api';
+import { EDGE_MANAGE_PERMS, EdgeRouteModel, EdgeUpstreamModel, EdgeVhostModel, quietPathUncovered, validateRoutePrefix, vhostKindTitle, type EdgeRouteRow, type EdgeUpstreamRow, type EdgeVhostRow } from './models';
+import { EdgeHelp } from './EdgeHelp';
 import { openVhostWizard } from './VhostWizard';
 
-function message(error: unknown, fallback: string): string {
-    return error instanceof Error ? error.message : fallback;
+const reason = (error: unknown) => error instanceof Error ? error.message : 'The request could not be completed.';
+const refused = (error: unknown) => error instanceof MojoError && (error.status === 200 || error.status >= 400 && error.status < 500);
+const identity = () => `${getAuthSnapshot().uid}:${getAuthSessionRevision()}`;
+type Operation = { label: string; observe: () => Promise<boolean> };
+type Run = (write: () => Promise<void>, operation: Operation) => Promise<boolean>;
+
+function confirmRemoval({ title, message, confirmText, signal }: { title: string; message: string; confirmText: string; danger: boolean; signal?: AbortSignal }) {
+    return modal.open<boolean>(close => <div className="modal-pad"><h2 className="modal-title">{title}</h2><p className="modal-message">{message}</p><div className="modal-actions"><button type="button" className="btn" onClick={() => close(false)}>Cancel</button><button type="button" className="btn btn-danger" onClick={() => close(true)}>{confirmText}</button></div></div>, { size: 'sm', signal });
 }
 
-/** Route CRUD lives here: the wizard creates routes, the detail owns them after. */
-function VhostRoutes({ vhost, canManage }: { vhost: EdgeVhostRow; canManage: boolean }) {
+
+function RouteEditor({ route, vhost, run, onDone, signal, beforeWrite }: { route: EdgeRouteRow | null; vhost: EdgeVhostRow; run: Run; onDone: () => void; signal: AbortSignal; beforeWrite: () => void }) {
     const queryClient = useQueryClient();
-    const query = EdgeRouteModel.useList({ vhost: vhost.id, sort: 'path_prefix', size: 200 });
-    const [editing, setEditing] = useState<number | 'new' | null>(null);
-    const [prefix, setPrefix] = useState('');
-    const [upstream, setUpstream] = useState<{ id: number; name: string } | null>(null);
+    const [prefix, setPrefix] = useState(route?.path_prefix ?? '');
+    const [upstream, setUpstream] = useState<{ id: number; name: string } | null>(route?.upstream ? { id: route.upstream.id, name: route.upstream.name } : null);
+    const [owner, setOwner] = useState<{ group: number | null } | null>(null);
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState('');
-    const rows = query.data?.rows ?? [];
-
-    const begin = (route: EdgeRouteRow | null) => {
-        setEditing(route ? route.id : 'new');
-        setPrefix(route?.path_prefix ?? '');
-        setUpstream(route?.upstream ? { id: route.upstream.id, name: route.upstream.name } : null);
-        setError('');
-    };
-    const refresh = () => Promise.allSettled([EdgeRouteModel.invalidate(queryClient), EdgeVhostModel.invalidate(queryClient)]);
+    const [unknown, setUnknown] = useState(false);
+    const pending = useRef(false);
+    useEffect(() => {
+        let live = true;
+        if (vhost.domain) DomainModel.fetchOne(queryClient, vhost.domain.id).then(domain => { if (live) setOwner({ group: typeof domain.group === 'number' ? domain.group : domain.group?.id ?? null }); }).catch(cause => { if (live) setError(`Upstream choices unavailable: ${reason(cause)}`); });
+        return () => { live = false; };
+    }, [queryClient, vhost.domain?.id]);
     const submit = async () => {
-        const refusal = validateRoutePrefix(prefix) ?? (upstream ? null : 'Choose an upstream.');
-        if (refusal) { setError(refusal); return; }
-        setBusy(true); setError('');
-        try {
-            await saveVhostRoute(editing === 'new' ? null : editing, { ...(editing === 'new' ? { vhost: vhost.id } : {}), path_prefix: prefix, upstream: upstream!.id });
-            setEditing(null);
-        } catch (cause) {
-            setError(message(cause, 'The route was not saved'));
-        } finally {
-            await refresh();
-            setBusy(false);
-        }
-    };
-    const remove = async (route: EdgeRouteRow) => {
+        if (pending.current || unknown || signal.aborted) return;
+        const validation = validateRoutePrefix(prefix) ?? (upstream ? null : 'Choose an upstream.');
+        if (validation) { setError(validation); return; }
+        pending.current = true; setBusy(true); setError('');
         try {
-            await deleteVhostRoute(route.id);
-            toast.success(`Route ${route.path_prefix} deleted.`);
-        } catch (cause) {
-            toast.error(message(cause, 'The route was not deleted'));
-        } finally {
-            await refresh();
-        }
+            const target = { path_prefix: prefix, upstream: upstream!.id };
+            const routeGuard = () => { beforeWrite(); if (signal.aborted) throw new MojoError('Session or permission changed. Reopen the hostname.', 403); };
+            const ok = await run(async () => {
+                let current: EdgeRouteRow[], currentVhost: EdgeVhostRow;
+                try { current = await listVhostRoutes(vhost.id); await EdgeVhostModel.invalidate(queryClient); currentVhost = await EdgeVhostModel.fetchOne(queryClient, vhost.id); }
+                catch (cause) { throw new MojoError(`Could not inspect current routes: ${reason(cause)}`, 400); }
+                routeGuard();
+                const prefixes = current.filter(item => item.id !== route?.id).map(item => item.path_prefix).concat(prefix);
+                const orphan = quietPathUncovered(currentVhost.quiet_paths ?? [], prefixes);
+                if (orphan) throw new MojoError(`This change would leave quiet path ${orphan} without a route. Update Quiet paths in the hostname’s Settings first.`, 400);
+                const saved = await saveVhostRoute(route?.id ?? null, { ...(route ? {} : { vhost: vhost.id }), ...target }, routeGuard);
+                if (!Number.isSafeInteger(saved.id) || saved.id <= 0 || route && saved.id !== route.id || saved.path_prefix !== target.path_prefix || saved.upstream?.id !== target.upstream) throw new TypeError('The route response did not confirm the submitted configuration.');
+            }, { label: `Route ${prefix}`, observe: async () => (await listVhostRoutes(vhost.id)).some(item => (!route || item.id === route.id) && item.path_prefix === target.path_prefix && item.upstream?.id === target.upstream) });
+            if (ok) onDone(); else setUnknown(true);
+        } catch (cause) { setError(reason(cause)); }
+        finally { pending.current = false; setBusy(false); }
     };
-
-    return <div className="edge-routes">
-        <Eyebrow>Proxied paths</Eyebrow>
-        <p className="dim">Requests under each prefix go to its upstream. Everything else is served from the site.</p>
-        {query.isPending && <div className="dim">Loading routes…</div>}
-        {query.error && <div className="text-bad">{query.error.message}</div>}
-        {!query.isPending && !query.error && rows.length === 0 && <div className="edge-warning"><i className="bi bi-exclamation-triangle" /> No routes. This address proxies nothing until one is added.</div>}
-        {rows.map((route) => <div className="edge-route-item" key={route.id}>
-            <code>{route.path_prefix}</code>
-            <span><i className="bi bi-arrow-right" /> {route.upstream?.name ?? '—'}</span>
-            {canManage && <span className="edge-route-actions">
-                <button type="button" className="btn btn-compact" disabled={busy} onClick={() => begin(route)}>Edit</button>
-                <ArmedButton className="btn-compact" label="Delete" armedLabel={`Click again to stop proxying ${route.path_prefix}`} disabled={busy} onConfirm={() => remove(route)} />
-            </span>}
-        </div>)}
-        {canManage && editing == null && <div><button type="button" className="btn" onClick={() => begin(null)}><i className="bi bi-plus-lg" /> Add route</button></div>}
-        {canManage && editing != null && <div className="edge-route-editor">
-            {error && <div className="form-alert" role="alert">{error}</div>}
-            <label className="field"><span className="field-label">Path prefix <em>*</em></span><input className="input" value={prefix} disabled={busy} onChange={(event) => setPrefix(event.target.value.trim())} placeholder="/api" autoComplete="off" /></label>
-            <CollectionSelect<EdgeUpstreamRow> model={EdgeUpstreamModel} value={upstream} onChange={(id, picked) => setUpstream(id == null ? null : { id: Number(id), name: picked?.name ?? '' })} label="Upstream" required disabled={busy} placeholder="Search enabled upstreams…" defaultParams={{ is_enabled: true, sort: 'name' }} />
-            <div className="modal-actions"><button type="button" className="btn" disabled={busy} onClick={() => setEditing(null)}>Cancel</button><button type="button" className="btn btn-primary" disabled={busy} onClick={() => void submit()}>{busy ? 'Saving…' : editing === 'new' ? 'Add route' : 'Save route'}</button></div>
-        </div>}
-    </div>;
+    // run() owns the parent pending state and the native editor's guard.
+    return <div className="modal-pad edge-route-dialog"><h2 className="modal-title">{route ? 'Edit route' : 'Add route'}</h2>{error && <div className="form-alert" role="alert">{error}</div>}{unknown && <p className="text-warn" role="status">Outcome unconfirmed. Close this editor and use Observe outcome in the hostname dialog. This route will not be resubmitted here.</p>}<div className="edge-form-grid"><label className="field"><span className="field-label">Path prefix <em>*</em><EdgeHelp label="About route prefixes">Requests under this prefix go to the chosen upstream. Everything else stays on the site.</EdgeHelp></span><input className="input" aria-label="Path prefix" value={prefix} disabled={busy || unknown} onChange={event => setPrefix(event.target.value.trim())} placeholder="/api" /></label><CollectionSelect<EdgeUpstreamRow> model={EdgeUpstreamModel} value={upstream} onChange={(id, picked) => setUpstream(id == null ? null : { id: Number(id), name: picked?.name ?? '' })} label="Upstream" required disabled={busy || unknown || !owner} defaultParams={{ is_enabled: true, sort: 'name', ...(owner?.group != null ? { group: owner.group } : { group__isnull: true }) }} /></div><div className="modal-actions"><button type="button" className="btn" disabled={busy} onClick={onDone}>{unknown ? 'Close' : 'Cancel'}</button><button type="button" className="btn btn-primary" disabled={busy || unknown || !owner} onClick={() => void submit()}>{busy ? 'Saving…' : route ? 'Save route' : 'Add route'}</button></div></div>;
 }
 
-export function VhostDetail({ id, onClose }: { id: number; onClose: () => void }) {
+export function VhostDetail({ id, onClose, onChanged, onBusyChange }: { id: number; onClose: () => void; onChanged?: () => void; onBusyChange?: (busy: boolean) => void }) {
     const queryClient = useQueryClient();
     const query = EdgeVhostModel.useOne(id);
     const canManage = useCan(EDGE_MANAGE_PERMS).can;
+    const auth = useAuthSnapshot();
+    const scope = `${auth.uid}:${getAuthSessionRevision()}`;
+    const openedScope = useRef(scope);
+    const openedManage = useRef(canManage);
+    const authority = useRef(canManage); authority.current = canManage;
+    const owner = useRef<AbortController | null>(null);
     const [busy, setBusy] = useState(false);
+    const pending = useRef(false);
     const [error, setError] = useState('');
-    const vhost = query.data;
-    if (query.isPending) return <div className="modal-pad dim">Loading vhost…</div>;
-    if (!vhost || query.error) return <div className="modal-pad text-bad">{query.error?.message ?? 'Vhost not found'}</div>;
-
-    const setEnabled = async (next: boolean) => {
-        setBusy(true); setError('');
+    const [active, setActive] = useState('overview');
+    const [unknown, setUnknown] = useState<Operation | null>(null);
+    const [menu, setMenu] = useState(false);
+    const menuAnchor = useRef<HTMLButtonElement>(null);
+    useEffect(() => {
+        const controller = new AbortController(); owner.current = controller;
+        if (scope !== openedScope.current) onClose();
+        return () => { controller.abort(); onBusyChange?.(false); };
+    }, [scope]);
+    useEffect(() => { if (openedManage.current && !canManage) { owner.current?.abort(); onClose(); } }, [canManage]);
+    const current = () => !owner.current?.signal.aborted && identity() === openedScope.current;
+    const lock = (value: boolean) => { pending.current = value; setBusy(value); onBusyChange?.(value); };
+    const guard = () => { if (!authority.current || !current()) throw new MojoError('Session or permission changed. Reopen Serving.', 403); };
+    const refresh = async () => { await Promise.allSettled([EdgeVhostModel.invalidate(queryClient), EdgeRouteModel.invalidate(queryClient)]); if (current()) onChanged?.(); };
+    const run: Run = async (write, operation) => {
+        if (pending.current || unknown || !authority.current || !current()) return false;
+        lock(true); setError('');
+        try { await write(); if (current()) toast.success(`${operation.label} saved.`); return true; }
+        catch (cause) {
+            if (!current()) return false;
+            if (refused(cause)) { setError(reason(cause)); throw cause; }
+            setUnknown(operation); setError(`${operation.label}: outcome unconfirmed. Observe before making another change.`); return false;
+        } finally { await refresh(); if (current()) lock(false); }
+    };
+    const observe = async () => {
+        if (!unknown || pending.current || !current()) return;
+        lock(true);
         try {
-            const saved = await saveVhost(vhost.id, { is_enabled: next });
-            queryClient.setQueryData(EdgeVhostModel.keys.one(vhost.id), saved);
-            toast.success(`${saved.server_name ?? 'Vhost'} ${next ? 'enabled' : 'disabled'}.`);
-        } catch (cause) {
-            // The server's own words: coverage, a duplicate name, an orphaned quiet path.
-            setError(message(cause, 'The change was refused'));
-        } finally {
-            await EdgeVhostModel.invalidate(queryClient);
-            setBusy(false);
-        }
+            const confirmed = await unknown.observe();
+            if (!current()) return;
+            if (confirmed) { setUnknown(null); setError(''); toast.success(`${unknown.label}: submitted result observed.`); }
+            else setError('The submitted result was not observed. The outcome remains unconfirmed; no write was replayed.');
+        } catch (cause) { if (current()) setError(`Observation unavailable: ${reason(cause)}. No write was replayed.`); }
+        finally { await refresh(); if (current()) lock(false); }
     };
-    const edit = async () => {
-        const saved = await openVhostWizard(vhost);
-        if (saved) { queryClient.setQueryData(EdgeVhostModel.keys.one(vhost.id), saved); toast.success(`${saved.server_name ?? 'Vhost'} saved.`); }
+    const vhost = query.data;
+    if (query.isPending) return <div className="modal-pad"><p className="dim">Loading hostname…</p><button type="button" className="btn" onClick={onClose}>Close</button></div>;
+    if (!vhost || query.error) return <div className="modal-pad"><div className="form-alert" role="alert">{query.error?.message ?? 'Hostname unavailable.'}</div><div className="modal-actions"><button type="button" className="btn" onClick={onClose}>Close</button><button type="button" className="btn" onClick={() => void query.refetch()}>Retry</button></div></div>;
+    const edit = async (initialTab = 'address') => {
+        if (pending.current || unknown || !canManage || !current()) return;
+        setMenu(false); lock(true);
+        try { const saved = await openVhostWizard(vhost, { initialTab, signal: owner.current?.signal }); if (saved && current()) { queryClient.setQueryData(EdgeVhostModel.keys.one(id), saved); onChanged?.(); } }
+        finally { if (current()) lock(false); }
+    };
+    const setEnabled = async (next: boolean) => {
+        try { await run(async () => { const saved = await saveVhost(id, { is_enabled: next }, guard); if (saved.id !== id || saved.is_enabled !== next) throw new TypeError('Enablement was not confirmed.'); }, { label: `${vhost.server_name} configuration`, observe: async () => { await EdgeVhostModel.invalidate(queryClient); return (await EdgeVhostModel.fetchOne(queryClient, id)).is_enabled === next; } }); } catch { /* run exposes the authoritative refusal. */ }
     };
     const remove = async () => {
-        const name = vhost.server_name ?? 'this address';
-        const ok = await modal.confirm({
-            title: `Delete ${name}?`,
-            message: `${name} stops being served and its routes are deleted with it. This cannot be undone. To take it out of service and keep it, disable it instead.`,
-            confirmText: 'Delete vhost', danger: true,
-        });
-        if (!ok) return;
+        if (pending.current || unknown || !canManage || !current()) return;
+        setMenu(false); lock(true);
+        const ok = await confirmRemoval({ title: `Delete ${vhost.server_name}?`, message: 'This stops serving the hostname and deletes its routes. Linked sites can stop serving. The domain and certificate remain. Disable it instead to keep the configuration.', confirmText: 'Delete hostname', danger: true, signal: owner.current?.signal });
+        lock(false);
+        if (!ok || !current()) return;
+        try { if (await run(() => deleteVhost(id, guard), { label: 'Hostname deletion', observe: async () => { try { await EdgeVhostModel.invalidate(queryClient); await EdgeVhostModel.fetchOne(queryClient, id); return false; } catch (cause) { if (cause instanceof MojoError && cause.status === 404) { onClose(); return true; } throw cause; } } })) onClose(); } catch { /* shown above */ }
+    };
+    const openRoute = async (route: EdgeRouteRow | null) => {
+        if (pending.current || unknown || !canManage || !current()) return;
+        let childBusy = false;
+        await modal.open(close => <RouteEditor route={route} vhost={vhost} beforeWrite={guard} run={async (write, operation) => { childBusy = true; try { return await run(write, operation); } finally { childBusy = false; } }} signal={owner.current!.signal} onDone={() => { if (!childBusy) close(null); }} />, { size: 'md', canDismiss: () => !childBusy, signal: owner.current?.signal });
+    };
+    const removeRoute = async (route: EdgeRouteRow) => {
+        if (pending.current || unknown || !current()) return;
+        lock(true); setError('');
         try {
-            await deleteVhost(vhost.id);
-            await Promise.allSettled([EdgeVhostModel.invalidate(queryClient), EdgeRouteModel.invalidate(queryClient)]);
-            toast.success(`${vhost.server_name ?? 'Vhost'} deleted.`);
-            onClose();
-        } catch (cause) {
-            setError(message(cause, 'The vhost was not deleted'));
-        }
+            const routes = await listVhostRoutes(id);
+            await EdgeVhostModel.invalidate(queryClient);
+            const observed = await EdgeVhostModel.fetchOne(queryClient, id);
+            guard();
+            const orphan = quietPathUncovered(observed.quiet_paths ?? [], routes.filter(item => item.id !== route.id).map(item => item.path_prefix));
+            if (orphan) { setError(`Removing ${route.path_prefix} would leave quiet path ${orphan} without a route. Edit Quiet paths in Settings first.`); return; }
+            const ok = await confirmRemoval({ title: `Remove ${route.path_prefix}?`, message: 'Requests under this prefix will stop being proxied. The site handles them instead.', confirmText: 'Remove route', danger: true, signal: owner.current?.signal });
+            lock(false);
+            if (!ok || !current()) return;
+            await run(() => deleteVhostRoute(route.id, guard), { label: `Removal of ${route.path_prefix}`, observe: async () => !(await listVhostRoutes(id)).some(item => item.id === route.id) });
+        } catch (cause) { if (current()) setError(reason(cause)); }
+        finally { if (current()) lock(false); }
     };
     const proxies = vhost.kind === 'api' || vhost.kind === 'site_api';
-    const policy = vhost.mojosec_policy && Object.keys(vhost.mojosec_policy).length ? vhost.mojosec_policy : null;
+    const frozen = busy || unknown != null;
+    return <div className="modal-pad edge-hostname-detail"><header className="edge-detail-header"><div className="edge-detail-identity"><h2 className="modal-title">{vhost.server_name ?? `Hostname #${id}`}</h2><div className="edge-detail-subtitle"><span>{vhostKindTitle(vhost.kind)}</span><Badge tone={vhost.is_enabled ? 'info' : 'muted'}>{vhost.is_enabled ? 'Enabled' : 'Disabled'}</Badge><EdgeHelp label="About hostname status">Enabled is saved configuration intent. Fleet application and live serving are not verified by this record.</EdgeHelp></div></div><div className="edge-detail-actions">{canManage && <><label className="edge-enabled-switch"><input aria-label="Hostname enabled" type="checkbox" checked={vhost.is_enabled} disabled={frozen} onChange={event => void setEnabled(event.target.checked)} /><span>Enabled</span></label><button type="button" className="btn btn-compact" disabled={frozen} onClick={() => void edit()}>Edit</button><button type="button" ref={menuAnchor} className="btn-icon" aria-label="Hostname actions" aria-expanded={menu} disabled={frozen} onClick={() => setMenu(value => !value)}><i className="bi bi-three-dots-vertical" /></button><Popover anchorRef={menuAnchor} open={menu} onClose={() => setMenu(false)} className="edge-action-menu"><button type="button" className="btn text-bad" onClick={() => void remove()}><i className="bi bi-trash" /> Delete hostname</button></Popover></>}<button type="button" className="btn-icon" aria-label="Close hostname" disabled={busy} onClick={onClose}><i className="bi bi-x-lg" /></button></div></header>
+        {error && <div className="form-alert" role="alert">{error}{unknown && <button type="button" className="btn btn-compact" disabled={busy} onClick={() => void observe()}>{busy ? 'Observing…' : 'Observe outcome'}</button>}</div>}
+        <Tabs ariaLabel="Hostname details" activeKey={active} onActiveKeyChange={setActive} items={[
+            { key: 'overview', label: 'Overview', panel: <div className="edge-detail-panel">{vhost.kind === 'api' && <FlatRow label="Upstream">{vhost.upstream?.name ?? 'Missing upstream'}</FlatRow>}{vhost.kind === 'redirect' && <FlatRow label="Redirects to"><code>{vhost.redirect_to ?? 'Missing destination'}</code></FlatRow>}{(vhost.kind === 'site' || vhost.kind === 'site_api') && <FlatRow label="Single-page app">{vhost.spa ? 'Yes' : 'No'}</FlatRow>}<FlatRow label="Domain">{vhost.domain?.name ?? 'Unknown'}</FlatRow><FlatRow label="Certificate"><div className="edge-certificate-summary"><span>{vhost.certificate?.common_name ?? 'Not configured'} <EdgeHelp label="About certificate status">Stored certificate status and expiry do not prove installation or live serving.</EdgeHelp></span><small className="dim">{vhost.certificate?.status ?? 'Unknown status'} · Expires {vhost.certificate?.not_after ? fmt.datetime(vhost.certificate.not_after) : 'unknown'}</small>{canManage && <button type="button" className="btn btn-compact" disabled={frozen} onClick={() => void edit('certificate')}>Change certificate</button>}</div></FlatRow>{vhost.kind === 'site_api' && <button type="button" className="btn" onClick={() => setActive('routes')}>View API routes</button>}</div> },
+            ...(vhost.kind === 'site_api' ? [{ key: 'routes', label: 'Routes', panel: <RoutesContent id={id} canManage={canManage} disabled={frozen} onEdit={route => void openRoute(route)} onRemove={route => void removeRoute(route)} /> }] : []),
+            { key: 'settings', label: 'Settings', panel: <div className="edge-detail-panel"><FlatRow label="Pool">{vhost.pool}</FlatRow>{vhost.kind !== 'redirect' && <FlatRow label="Maximum body">{vhost.body_size_mb} MB</FlatRow>}{proxies && <><FlatRow label="Static files">{vhost.serve_static ? 'Served at /static/' : 'Not served here'}</FlatRow><FlatRow label="Quiet paths">{vhost.quiet_paths?.length ? vhost.quiet_paths.join(', ') : 'None'}</FlatRow></>}<FlatRow label="Created">{fmt.datetime(vhost.created)}</FlatRow><FlatRow label="Changed">{fmt.datetime(vhost.modified)}</FlatRow>{vhost.mojosec_policy && Object.keys(vhost.mojosec_policy).length > 0 && <FlatRow label="Evidence policy">Platform-managed <EdgeHelp label="About the evidence policy">Version {String(vhost.mojosec_policy.version)} · {String(vhost.mojosec_policy.response_class)}. Not editable here.</EdgeHelp></FlatRow>}{canManage && <div><button type="button" className="btn" disabled={frozen} onClick={() => void edit('settings')}>Edit settings</button></div>}</div> },
+        ]} />
+    </div>;
+}
 
-    return <DetailView
-        icon="bi-hdd-network" title={vhost.server_name ?? `Vhost #${vhost.id}`} subtitle={`${vhostKindTitle(vhost.kind)} · ${vhost.domain?.name ?? ''}`}
-        chips={[{ text: vhost.is_enabled ? 'Enabled' : 'Disabled', tone: vhost.is_enabled ? 'success' : 'muted' }]}
-        {...(canManage ? { active: { value: vhost.is_enabled, onChange: (next: boolean) => void setEnabled(next), disabled: busy } } : {})}
-        contextMenu={[
-            { label: 'Edit vhost', icon: 'bi-pencil', permissions: EDGE_MANAGE_PERMS, disabled: busy, onSelect: () => void edit() },
-            { divider: true },
-            { label: 'Delete vhost', icon: 'bi-trash', permissions: EDGE_MANAGE_PERMS, danger: true, disabled: busy, onSelect: () => void remove() },
-        ]}
-        sections={[
-            { key: 'overview', label: 'Overview', icon: 'bi-grid-1x2', render: () => <div className="edge-vhost-overview">
-                {error && <div className="form-alert" role="alert">{error}</div>}
-                <Eyebrow>Address</Eyebrow>
-                <FlatRow label="Server name"><code>{vhost.server_name ?? '—'}</code></FlatRow>
-                <FlatRow label="Domain">{vhost.domain?.name ?? '—'}</FlatRow>
-                <FlatRow label="Label">{vhost.label === '' ? 'Apex (bare domain)' : vhost.label === '*' ? 'Wildcard (*)' : <code>{vhost.label}</code>}</FlatRow>
-                <FlatRow label="Serves">{vhostKindTitle(vhost.kind)}</FlatRow>
-                <Eyebrow>Settings</Eyebrow>
-                {vhost.kind === 'api' && <FlatRow label="Upstream">{vhost.upstream?.name ?? '—'}</FlatRow>}
-                {vhost.kind === 'redirect' && <FlatRow label="Redirects to"><code>{vhost.redirect_to ?? '—'}</code></FlatRow>}
-                {(vhost.kind === 'site' || vhost.kind === 'site_api') && <FlatRow label="Single-page app">{vhost.spa ? 'Yes: unknown paths return index.html' : 'No'}</FlatRow>}
-                {proxies && <FlatRow label="Static files">{vhost.serve_static ? 'Served at /static/' : 'Not served here'}</FlatRow>}
-                {proxies && <FlatRow label="Quiet paths">{vhost.quiet_paths?.length ? vhost.quiet_paths.map((path) => <code key={path} className="edge-inline-code">{path}</code>) : 'None'}</FlatRow>}
-                {vhost.kind !== 'redirect' && <FlatRow label="Largest request body">{vhost.body_size_mb} MB</FlatRow>}
-                {policy && <FlatRow label="Edge evidence policy"><span title="Set by the platform. Not editable here.">Version {String(policy.version)} · {String(policy.response_class)} · {Array.isArray(policy.impossible_path_families) && policy.impossible_path_families.length ? policy.impossible_path_families.join(', ') : 'no path families'}</span></FlatRow>}
-                <Eyebrow>Serving</Eyebrow>
-                <FlatRow label="Certificate">{vhost.certificate ? <>{vhost.certificate.common_name} · {vhost.certificate.status}{vhost.certificate.not_after ? ` · expires ${fmt.date(vhost.certificate.not_after)}` : ''}</> : '—'}</FlatRow>
-                <FlatRow label="Pool">{vhost.pool}</FlatRow>
-                <FlatRow label="Created">{fmt.datetime(vhost.created)}</FlatRow>
-                <FlatRow label="Changed">{fmt.datetime(vhost.modified)}</FlatRow>
-            </div> },
-            ...(vhost.kind === 'site_api' ? [{ key: 'routes', label: 'Routes', icon: 'bi-diagram-3', render: () => <VhostRoutes vhost={vhost} canManage={canManage} /> }] : []),
-        ]}
-        initialSection="overview" onClose={onClose}
-    />;
+function RoutesContent({ id, canManage, disabled, onEdit, onRemove }: { id: number; canManage: boolean; disabled: boolean; onEdit: (route: EdgeRouteRow | null) => void; onRemove: (route: EdgeRouteRow) => void }) {
+    const columns: Column<EdgeRouteRow>[] = [
+        { key: 'path_prefix', label: 'Path prefix', sortable: true, hideable: false, render: row => <code>{row.path_prefix}</code> },
+        { key: 'upstream', label: 'Upstream', sortable: false, render: row => row.upstream?.name ?? 'Missing upstream' },
+        ...(canManage ? [{ key: 'actions', label: '', sortable: false, render: (row: EdgeRouteRow) => <span className="edge-route-actions"><button type="button" className="btn btn-compact" disabled={disabled} onClick={() => onEdit(row)}>Edit</button><button type="button" className="btn btn-compact" disabled={disabled} onClick={() => onRemove(row)}>Remove</button></span> }] : []),
+    ];
+    return <div className="edge-detail-panel edge-routes"><div className="edge-serving-heading"><span>Requests under each prefix go to its upstream.</span>{canManage && <button type="button" className="btn btn-primary btn-compact" disabled={disabled} onClick={() => onEdit(null)}><i className="bi bi-plus-lg" /> Add route</button>}</div><ModelTable<EdgeRouteRow> model={EdgeRouteModel} paramsMode="local" fixedParams={{ vhost: id }} title="API routes" searchable={false} columns={columns} defaultSort="path_prefix" /></div>;
 }