portal-mojo 0.2.19 → 0.2.21

package/src/admin/edge/api.ts

@@ -8,25 +8,39 @@ import {
 // Every call goes through the one client boundary; a refused write rejects
 // with the server's own message.
 
-export async function saveVhost(id: number | null, changes: Record<string, unknown>): Promise<EdgeVhostRow> {
-    return sanitizeEdgeVhostRow(await withFreshAuth(() => mojoSave<EdgeVhostRow>(EdgeVhostModel.endpoint, id, changes)));
+export async function saveVhost(id: number | null, changes: Record<string, unknown>, beforeWrite?: () => void): Promise<EdgeVhostRow> {
+    return sanitizeEdgeVhostRow(await withFreshAuth(() => { beforeWrite?.(); return mojoSave<EdgeVhostRow>(EdgeVhostModel.endpoint, id, changes); }));
 }
 
-export async function deleteVhost(id: number): Promise<void> {
-    await withFreshAuth(() => mojoDelete(EdgeVhostModel.endpoint, id));
+export async function deleteVhost(id: number, beforeWrite?: () => void): Promise<void> {
+    await withFreshAuth(() => { beforeWrite?.(); return mojoDelete(EdgeVhostModel.endpoint, id); });
 }
 
 export async function listVhostRoutes(vhost: number): Promise<EdgeRouteRow[]> {
-    const page = await mojoList<EdgeRouteRow>(EdgeRouteModel.endpoint, normalizeRouteListParams({ vhost, sort: 'path_prefix', size: 200 }));
-    return page.rows.map(sanitizeEdgeRouteRow);
+    const rows: EdgeRouteRow[] = [];
+    const seen = new Set<number>();
+    let total: number | null = null;
+    while (rows.length < 2000) {
+        const page = await mojoList<EdgeRouteRow>(EdgeRouteModel.endpoint, normalizeRouteListParams({ vhost, sort: 'path_prefix', start: rows.length, size: 200 }));
+        if (!Number.isSafeInteger(page.count) || page.count < rows.length + page.rows.length || total != null && total !== page.count) throw new Error('The route inventory changed or was incomplete. Refresh before changing routes.');
+        total = page.count;
+        for (const raw of page.rows) {
+            const row = sanitizeEdgeRouteRow(raw);
+            if (!Number.isSafeInteger(row.id) || row.id <= 0 || seen.has(row.id)) throw new Error('The route list changed or was incomplete. Refresh before changing routes.');
+            seen.add(row.id); rows.push(row);
+        }
+        if (rows.length === total) return rows;
+        if (!page.rows.length) throw new Error('The route inventory was incomplete. No route was changed.');
+    }
+    throw new Error('The route list exceeds the safe inspection limit. No route was changed.');
 }
 
-export async function saveVhostRoute(id: number | null, changes: { vhost?: number; path_prefix?: string; upstream?: number }): Promise<EdgeRouteRow> {
-    return sanitizeEdgeRouteRow(await withFreshAuth(() => mojoSave<EdgeRouteRow>(EdgeRouteModel.endpoint, id, changes)));
+export async function saveVhostRoute(id: number | null, changes: { vhost?: number; path_prefix?: string; upstream?: number }, beforeWrite?: () => void): Promise<EdgeRouteRow> {
+    return sanitizeEdgeRouteRow(await withFreshAuth(() => { beforeWrite?.(); return mojoSave<EdgeRouteRow>(EdgeRouteModel.endpoint, id, changes); }));
 }
 
-export async function deleteVhostRoute(id: number): Promise<void> {
-    await withFreshAuth(() => mojoDelete(EdgeRouteModel.endpoint, id));
+export async function deleteVhostRoute(id: number, beforeWrite?: () => void): Promise<void> {
+    await withFreshAuth(() => { beforeWrite?.(); return mojoDelete(EdgeRouteModel.endpoint, id); });
 }
 
 /** The only field a `manage_dns` holder can write on an upstream. */

package/src/admin/edge/models.ts

@@ -16,9 +16,9 @@ export const VHOST_KINDS: readonly VhostKind[] = ['api', 'site', 'site_api', 're
 export interface VhostKindCard { value: VhostKind; title: string; description: string; icon: string }
 /** The wizard's first step: a product shape in plain words, never a raw enum. */
 export const VHOST_KIND_CARDS: readonly VhostKindCard[] = [
-    { value: 'api', title: 'API host', description: 'Every request on this name goes to one declared upstream.', icon: 'bi-hdd-rack' },
-    { value: 'site', title: 'Static site or SPA', description: 'Serves a published site. Nothing is proxied.', icon: 'bi-window' },
-    { value: 'site_api', title: 'Site + API paths', description: 'Serves a site, and sends chosen path prefixes to upstreams.', icon: 'bi-diagram-3' },
+    { value: 'api', title: 'API', description: 'Every request on this name goes to one declared upstream.', icon: 'bi-hdd-rack' },
+    { value: 'site', title: 'Site', description: 'Serves a published site. Nothing is proxied.', icon: 'bi-window' },
+    { value: 'site_api', title: 'Site + API', description: 'Serves a site, and sends chosen path prefixes to upstreams.', icon: 'bi-diagram-3' },
     { value: 'redirect', title: 'Redirect', description: 'Sends every request to another host, permanently.', icon: 'bi-arrow-return-right' },
 ];
 
@@ -198,7 +198,7 @@ export function normalizeRouteListParams(params: Params): Params {
 }
 
 export function normalizeUpstreamListParams(params: Params): Params {
-    return normalizeListParams(params, new Set(['is_enabled', 'kind']), new Set(['name', 'kind', 'created', 'is_enabled']), 'default');
+    return normalizeListParams(params, new Set(['is_enabled', 'kind', 'group', 'group__isnull']), new Set(['name', 'kind', 'created', 'is_enabled']), 'default');
 }
 
 export function normalizeBlocklistListParams(params: Params): Params {

package/src/admin/edge/serving-data.ts

@@ -0,0 +1,78 @@
+import { mojoCall } from '../../client/runtime';
+
+export type ServingStatus = 'pass' | 'warn' | 'fail' | 'pending';
+export interface ServingBootstrap {
+    user: { id: number; is_superuser: boolean };
+    capabilities: { setup: boolean };
+    edge: { available: boolean; http_enabled: boolean | null; dnsman_issuance: 'dns-01' | null };
+}
+export interface ServingCheck {
+    code: string; status: ServingStatus; explanation: string; remediation: string;
+    details?: Record<string, string | number | boolean | null>;
+}
+export interface ServingCoverage { total: number; returned: number; omitted: number }
+export interface HostingReadiness {
+    schema_version: 1; generated_at: string; overall: ServingStatus;
+    summary: Record<ServingStatus, number>;
+    sections: Array<{ code: 'hosting_vhosts'; label: string; status: ServingStatus; checks: ServingCheck[]; coverage: ServingCoverage }>;
+    coverage: { sections: ServingCoverage; checks: ServingCoverage }; truncated?: boolean;
+}
+const invalid = (): never => { throw new Error('Serving evidence unavailable: incompatible or missing response fields.'); };
+function object(value: unknown): Record<string, unknown> {
+    return value && typeof value === 'object' && !Array.isArray(value) ? value as Record<string, unknown> : invalid();
+}
+function bool(value: unknown): boolean { return typeof value === 'boolean' ? value : invalid(); }
+function text(value: unknown, limit = 4096): string { return typeof value === 'string' && value.length <= limit ? value : invalid(); }
+function count(value: unknown): number { return typeof value === 'number' && Number.isSafeInteger(value) && value >= 0 ? value : invalid(); }
+function status(value: unknown): ServingStatus { return typeof value === 'string' && ['pass', 'warn', 'fail', 'pending'].includes(value) ? value as ServingStatus : invalid(); }
+function coverage(value: unknown): ServingCoverage {
+    const row = object(value), total = count(row.total), returned = count(row.returned), omitted = count(row.omitted);
+    if (returned > total || omitted !== total - returned) invalid();
+    return { total, returned, omitted };
+}
+/** Positive projection only. Bootstrap carries unrelated private fields. */
+export function parseServingBootstrap(value: unknown, userId: number): ServingBootstrap {
+    const row = object(value), user = object(row.user), capabilities = object(row.capabilities), edge = object(row.edge);
+    if (!Number.isSafeInteger(user.id) || Number(user.id) <= 0 || user.id !== userId) invalid();
+    if (!Object.hasOwn(edge, 'dnsman_issuance') || !(edge.dnsman_issuance === null || typeof edge.dnsman_issuance === 'string')) invalid();
+    const available = bool(edge.available);
+    const http = edge.http_enabled === null && !available ? null : bool(edge.http_enabled);
+    return { user: { id: userId, is_superuser: bool(user.is_superuser) }, capabilities: { setup: bool(capabilities.setup) }, edge: {
+        available, http_enabled: http, dnsman_issuance: edge.dnsman_issuance === 'dns-01' ? 'dns-01' : null,
+    } };
+}
+export function parseHostingReadiness(value: unknown): HostingReadiness {
+    const row = object(value);
+    if (row.schema_version !== 1) invalid();
+    const generated_at = text(row.generated_at, 64);
+    if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})$/.test(generated_at) || !Number.isFinite(Date.parse(generated_at))) invalid();
+    const sections: unknown[] = Array.isArray(row.sections) && row.sections.length <= 64 ? row.sections : invalid();
+    const selected = sections.map(object).filter(section => section.code === 'hosting_vhosts');
+    if (selected.length !== 1) invalid();
+    const section = selected[0]!;
+    const wireChecks: unknown[] = Array.isArray(section.checks) && section.checks.length <= 64 ? section.checks : invalid();
+    const checks = wireChecks.map(value => {
+        const check = object(value);
+        const out: ServingCheck = { code: text(check.code, 256), status: status(check.status), explanation: text(check.explanation), remediation: text(check.remediation) };
+        if (check.details != null) {
+            const entries = Object.entries(object(check.details));
+            out.details = {};
+            for (const [key, value] of entries.slice(0, 16)) {
+                if (key.length <= 128 && (value === null || typeof value === 'boolean' || (typeof value === 'number' && Number.isFinite(value)) || (typeof value === 'string' && value.length <= 1024))) out.details[key] = value;
+            }
+        }
+        return out;
+    });
+    const summary = object(row.summary), wireCoverage = object(row.coverage);
+    const result: HostingReadiness = { schema_version: 1, generated_at, overall: status(row.overall), summary: {
+        pass: count(summary.pass), warn: count(summary.warn), fail: count(summary.fail), pending: count(summary.pending),
+    }, sections: [{ code: 'hosting_vhosts', label: text(section.label, 256), status: status(section.status), checks, coverage: coverage(section.coverage) }], coverage: { sections: coverage(wireCoverage.sections), checks: coverage(wireCoverage.checks) } };
+    if (row.truncated !== undefined) result.truncated = bool(row.truncated);
+    return result;
+}
+export async function readServingBootstrap(userId: number, signal?: AbortSignal): Promise<ServingBootstrap> {
+    return parseServingBootstrap((await mojoCall('/api/account/admin/bootstrap', { signal })).data, userId);
+}
+export async function readHostingReadiness(signal?: AbortSignal): Promise<HostingReadiness> {
+    return parseHostingReadiness((await mojoCall('/api/account/admin/setup/readiness', { params: { section: 'hosting_vhosts' }, signal })).data);
+}

package/src/admin/fleet/CapacityEditor.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { isReauthRequired, requestFreshAuth, useMe } from '../../client/runtime';
+import { Tabs } from '../../ui/Tabs';
+import { modal } from '../../ui/modal';
+import { datetime } from '../../ui/format';
+import { readCapacity, requestCapacityPlan } from './api';
+import { actionReason, drainedNodeReason, monthlyPrice, nodeRemovalReason, offered } from './data';
+import { fleetOperations } from './operations';
+import { FleetHelp } from './FleetHelp';
+import { compileCapacityDraft, newCapacityDraft, type CapacityDraft } from './standalone-data';
+import type { CapacityPlan, CapacityReport, CapacitySize } from './types';
+/** Review only the stored server plan. Never substitute draft intent or arbitrary provider facts. */
+function reviewedParameters(params: CapacityPlan['steps'][number]['params']): string[] {
+    const fields = [['source_instance', 'Source node'], ['subnet_id', 'Subnet'], ['size', 'Target size'], ['count', 'Count'], ['apply_immediately', 'Apply immediately']] as const;
+    return fields.flatMap(([key, label]) => {
+        const value = params[key];
+        if (typeof value !== 'string' && !(typeof value === 'number' && Number.isFinite(value))) return [];
+        const text = String(value).trim();
+        return text ? [`${label}: ${text.length > 240 ? `${text.slice(0, 240)}…` : text}`] : [];
+    });
+}
+function SizeChoice({ id, current, value, sizes, disabled, onChange }: { id: string; current: string | null; value: string; sizes: CapacitySize[]; disabled?: boolean; onChange: (v: string) => void }) {
+    return <label className="field"><span className="field-label">Size for {id}</span><select className="input" value={value} disabled={disabled} onChange={e => onChange(e.target.value)}><option value="">Keep {current ?? 'current class'}</option>{sizes.map(s => <option key={s.size} value={s.size}>{s.label} · {s.type} · {s.monthly_usd == null ? 'price unknown' : `$${s.monthly_usd.toFixed(2)}/mo`}</option>)}</select></label>;
+}
+function Placement({ report, source, initial, close, assertActive }: { report: CapacityReport; source: string; initial: string; close: (v: string | null) => void; assertActive: () => void }) {
+    const [subnet, setSubnet] = useState(initial), [error, setError] = useState('');
+    const node = report.nodes.instances.find(n => n.id === source);
+    return <div className="modal-pad fleet-standalone-dialog"><h2 className="modal-title">Change subnet</h2><p className="modal-message">{node?.name ?? 'Choose a healthy source first'} · {node?.zone ?? 'Zone unknown'}</p><label className="field"><span className="field-label">Subnet override</span><input className="input" value={subnet} placeholder={node?.subnet_id ?? 'subnet-…'} onChange={e => setSubnet(e.target.value)}/><span className="field-help">Leave empty to inherit the source subnet. AWS verifies VPC and availability zone.</span></label>{error && <p role="alert" className="form-alert">{error}</p>}<div className="modal-actions"><button className="btn" onClick={() => close(null)}>Cancel</button><button className="btn btn-primary" onClick={() => { try { assertActive(); if (subnet && !/^subnet-[A-Za-z0-9]+$/.test(subnet)) throw new Error('Enter a subnet-… identifier.'); close(subnet); } catch (reason) { setError(reason instanceof Error ? reason.message : 'Placement unavailable.'); } }}>Use subnet</button></div></div>;
+}
+export function CapacityEditor({ scope, initialReport, close, setBusy, assertActive, signal, onRefresh, onProgress }: { scope: string; initialReport: CapacityReport; close: () => void; setBusy: (v: boolean) => void; assertActive: () => void; signal: AbortSignal; onRefresh: (report: CapacityReport) => void; onProgress: () => void }) {
+    const { data: me } = useMe();
+    const [report, setReport] = useState(initialReport), [draft, setDraft] = useState(() => newCapacityDraft(initialReport)), [tab, setTab] = useState('nodes'), [nodeTask, setNodeTask] = useState('add');
+    const [plan, setPlan] = useState<CapacityPlan | null>(null), [consent, setConsent] = useState(false), [error, setError] = useState(''), [busy, busyState] = useState(false), [fresh, setFresh] = useState(false), [tick, setTick] = useState(Date.now());
+    const lock = useRef(false), generation = useRef(0), alive = useRef(false), request = useRef<AbortController | null>(null), needsRefresh = useRef(false);
+    const operation = useSyncExternalStore(fn => fleetOperations.subscribe(scope, fn), () => fleetOperations.get(scope), () => fleetOperations.get(scope));
+    const blocked = ['submitting', 'running', 'unknown'].includes(operation.status);
+    const pending = (value: boolean) => { lock.current = value; busyState(value); setBusy(value); };
+    const invalidate = () => { generation.current++; request.current?.abort(); setPlan(null); setConsent(false); setError(''); };
+    const edit = (change: (d: CapacityDraft) => CapacityDraft) => { if (lock.current || blocked) return; invalidate(); setDraft(change); };
+    const refresh = async () => {
+        if (lock.current || blocked) return;
+        invalidate(); setDraft(newCapacityDraft(report)); pending(true); setFresh(false); const gen = generation.current, controller = new AbortController(); request.current = controller;
+        try { assertActive(); const next = await readCapacity(true, { signal: controller.signal, beforeSend: assertActive }); assertActive(); if (!alive.current || gen !== generation.current) return; if (next.mode !== 'managed') throw new Error('Infrastructure is managed externally. Close this editor and inspect capacity.'); setReport(next); setDraft(newCapacityDraft(next)); needsRefresh.current = false; setFresh(true); onRefresh(next); }
+        catch (reason) { if (alive.current && gen === generation.current) setError(reason instanceof Error ? reason.message : 'Inventory unavailable.'); }
+        finally { if (alive.current && gen === generation.current) pending(false); }
+    };
+    useEffect(() => { alive.current = true; const timer = setTimeout(() => void refresh(), 0); const clock = setInterval(() => setTick(Date.now()), 1000); return () => { alive.current = false; generation.current++; request.current?.abort(); setBusy(false); clearTimeout(timer); clearInterval(clock); }; }, []);
+    const compiled = useMemo(() => { try { return { steps: compileCapacityDraft(report, draft), error: '' }; } catch (reason) { return { steps: [], error: reason instanceof Error ? reason.message : 'Invalid draft.' }; } }, [report, draft]);
+    const review = async () => {
+        if (lock.current || blocked || !fresh || needsRefresh.current || compiled.error || !compiled.steps.length) return;
+        invalidate(); pending(true); const gen = generation.current, controller = new AbortController(); request.current = controller;
+        try { assertActive(); const next = await requestCapacityPlan(compiled.steps, { signal: controller.signal, beforeSend: () => { assertActive(); if (gen !== generation.current) throw new Error('Draft changed.'); } }); assertActive(); if (!alive.current || gen !== generation.current) return; if (next.actor !== me?.id) throw new Error('Plan actor does not match your account.'); setPlan(next); setConsent(false); }
+        catch (reason) { if (alive.current && gen === generation.current) { setError(isReauthRequired(reason) ? 'Authenticate again, refresh inventory and review a new plan.' : reason instanceof Error ? reason.message : 'Plan unavailable.'); setFresh(false); if (isReauthRequired(reason)) await requestFreshAuth(); } }
+        finally { if (alive.current && gen === generation.current) pending(false); }
+    };
+    const apply = async () => {
+        if (lock.current || blocked || !plan || !consent || Date.parse(plan.expires_at) <= Date.now()) return;
+        const reviewed = plan; setConsent(false); pending(true); needsRefresh.current = true;
+        try { assertActive(); if (reviewed.actor !== me?.id) throw new Error('Plan actor changed.'); await fleetOperations.submit(scope, reviewed); assertActive(); if (alive.current) { setPlan(null); setFresh(false); pending(false); if (fleetOperations.get(scope).status !== 'idle') { close(); onProgress(); } } }
+        catch (reason) { if (alive.current) { setPlan(null); setFresh(false); setError(reason instanceof Error ? reason.message : 'Apply refused. Refresh and review again.'); } }
+        finally { if (alive.current) pending(false); }
+    };
+    const placement = async () => { if (lock.current || blocked) return; assertActive(); const value = await modal.open<string | null>(done => <Placement report={report} source={draft.source} initial={draft.subnet} close={done} assertActive={assertActive}/>, { size: 'sm', signal }); if (value !== null && alive.current) { assertActive(); edit(d => ({ ...d, subnet: value })); } };
+    const db = (id: string, change: (d: CapacityDraft['databases'][string]) => CapacityDraft['databases'][string]) => edit(d => ({ ...d, databases: { ...d.databases, [id]: change(d.databases[id]!) } }));
+    const cache = (id: string, patch: Partial<CapacityDraft['caches'][string]>) => edit(d => ({ ...d, caches: { ...d.caches, [id]: { ...d.caches[id]!, ...patch } } }));
+    const toggle = (key: 'removeNodes' | 'terminateNodes', id: string) => edit(d => ({ ...d, [key]: d[key].includes(id) ? d[key].filter(v => v !== id) : [...d[key], id] }));
+    const sources = report.nodes.instances.filter(n => n.healthy && n.registered && n.instance_state === 'running' && n.lifecycle_state === 'available'), source = sources.find(n => n.id === draft.source);
+    const expired = !!plan && Date.parse(plan.expires_at) <= tick;
+    useEffect(() => { if (expired) setConsent(false); }, [expired]);
+    return <div className="modal-pad fleet-standalone-dialog" aria-label={plan ? 'Review capacity plan' : 'Change capacity'}><h2 className="modal-title">{plan ? 'Review capacity changes' : 'Change capacity'}</h2><p className="modal-message">{plan ? 'Authoritative server plan. Apply this exact plan once.' : `${report.region} · ${datetime(report.generated_at)}`}</p><div className="fleet-standalone-body">
+        {plan ? <section className="fp-stack" aria-label="Review capacity plan"><p className="text-warn">Creates billable resources. Removals cannot be undone; completed steps remain applied if a later step fails.</p><p>{plan.order_note}</p><ol className="fp-plan">{plan.steps.map(step => <li key={step.index}><strong>{step.description}</strong><p className="dim">{step.resource || step.action.replaceAll('_', ' ')} · {monthlyPrice(step.monthly_delta_usd)}</p>{reviewedParameters(step.params).map(value => <p className="dim" key={value}>{value}</p>)}{step.warnings.map((warning, index) => <p className="text-warn" key={index}>{warning}</p>)}</li>)}</ol><p><strong>{plan.estimate_complete ? 'Estimated monthly change' : 'Partial monthly estimate'}: {monthlyPrice(plan.total_monthly_delta_usd)}</strong>{!plan.estimate_complete && ' · some prices are unknown'}</p><p className="dim">Plan {plan.id} · expires {datetime(plan.expires_at)}</p>{expired ? <p className="text-warn" role="alert">Plan expired. Go back, refresh and review again.</p> : <label className="fp-check"><input type="checkbox" checked={consent} disabled={busy || blocked} onChange={e => setConsent(e.target.checked)}/>I reviewed this exact plan, its cost and interruptions, and understand removals cannot be undone.</label>}</section> : <><div className="fp-row fp-toolbar"><span className="dim">{busy ? 'Observing or preparing plan…' : fresh ? 'Fresh inventory' : 'Fresh observation required'}</span><button className="btn" disabled={busy || blocked} onClick={() => void refresh()}>Refresh and clear changes</button></div><fieldset disabled={busy || blocked || !fresh}><Tabs ariaLabel="Capacity tasks" activeKey={tab} onActiveKeyChange={setTab} items={[
+        { key: 'nodes', label: 'App nodes', panel: <div className="fp-stack"><Tabs ariaLabel="Node tasks" variant="segmented" activeKey={nodeTask} onActiveKeyChange={setNodeTask} items={[
+            { key: 'add', label: 'Add nodes', panel: <div className="fp-stack"><div className="fp-fields"><label className="field"><span className="field-label">Add app nodes</span><input className="input" type="number" min={0} max={20} value={draft.addNodes} disabled={!offered(report, 'add_node')} onChange={e => edit(d => ({ ...d, addNodes: Number(e.target.value) }))}/></label><label className="field"><span className="field-label">Healthy source</span><select className="input" value={draft.source} onChange={e => edit(d => ({ ...d, source: e.target.value, subnet: '' }))}><option value="">Choose source node</option>{sources.map(n => <option key={n.id} value={n.id}>{n.name} · {n.id} · {n.instance_type} · {n.zone}</option>)}</select></label></div>{!offered(report, 'add_node') && <p className="text-warn">{actionReason(report, 'add_node')}</p>}{source && <div className="fp-resource"><strong>Inherit {source.instance_type ?? 'unknown size'}</strong><p className="dim">Target groups: {source.groups.join(', ') || 'None reported'}</p><div className="fp-row"><span>{draft.subnet || source.subnet_id || 'Subnet unknown'} · {source.zone ?? 'Zone unknown'}</span><button className="btn" onClick={() => void placement()}>Change subnet</button></div></div>}<p className="dim">New nodes clone the selected healthy source. <FleetHelp label="app additions">Source selection is explicit because automatic selection can differ between quote and execution. Size, target groups and default subnet are inherited. AWS revalidates ownership and placement.</FleetHelp></p></div> },
+            { key: 'remove', label: 'Remove nodes', panel: <div className="fp-stack">{report.nodes.instances.map(n => { const registered = n.registered, key = registered ? 'removeNodes' : 'terminateNodes', selected = draft[key].includes(n.id), reason = registered ? nodeRemovalReason(report, n, draft.removeNodes.filter(id => id !== n.id)) : drainedNodeReason(report, n); return <article className="fp-resource" key={n.id}><div className="fp-row"><div><strong>{n.name}</strong><p className="dim">{n.id} · {n.instance_type ?? 'Size unknown'}{n.self ? ' · serving this request' : ''}</p></div><label className="fp-check"><input type="checkbox" checked={selected} disabled={!!reason && !selected} onChange={() => toggle(key, n.id)}/>{registered ? `Remove node ${n.id}` : `Terminate drained node ${n.id}`}</label></div>{reason && <small className="dim">{reason}</small>}</article>})}<p className="dim">Removal drains, then terminates. One currently healthy target must remain. <FleetHelp label="node removal">The serving node is protected. New additions cannot count toward the healthy floor before fresh observation. A proven drained node can be terminated separately. The server also revalidates the healthy floor for each target group before applying.</FleetHelp></p></div> },
+        ]}/></div> },
+        { key: 'database', label: 'Database', panel: <div className="fp-stack">{!report.databases_available && <p>Database inventory unavailable.</p>}{report.databases_available && !report.databases.length && <p>No database resources reported.</p>}{report.databases.map(row => { const d = draft.databases[row.identifier]!; return <section className="fp-resource fp-stack" key={row.identifier}><div className="fp-row"><h3>{row.identifier}</h3><FleetHelp label={`database ${row.identifier}`}>Writer resizing causes minutes offline. Each existing member is selected by its exact ID and current class. New readers inherit the current source class; refresh their new IDs and resize separately.</FleetHelp></div>{row.blocked_reason && <p className="text-warn">{row.blocked_reason}</p>}{row.members.map(member => <div className="fp-member" key={member.id}><strong>{member.id} · {member.role}</strong><small className="dim">{member.instance_class ?? 'Class unknown'} · {member.status ?? 'Status unknown'} / {member.lifecycle_state}</small><div className="fp-fields"><SizeChoice id={member.id} current={member.instance_class} value={d.sizes[member.id] ?? ''} sizes={report.sizes.database} disabled={!report.databases_available || !!row.blocked_reason || !member.can_resize || !offered(report, 'resize_database') || d.removeReaders.includes(member.id)} onChange={size => db(row.identifier, value => ({ ...value, sizes: { ...value.sizes, [member.id]: size } }))}/>{row.readers.includes(member.id) && <label className="fp-check"><input type="checkbox" checked={d.removeReaders.includes(member.id)} disabled={!report.databases_available || !!row.blocked_reason || !member.can_remove || !offered(report, 'remove_reader') || !!d.sizes[member.id]} onChange={() => db(row.identifier, value => ({ ...value, removeReaders: value.removeReaders.includes(member.id) ? value.removeReaders.filter(id => id !== member.id) : [...value.removeReaders, member.id] }))}/>Remove reader {member.id}</label>}</div></div>)}<label className="field"><span className="field-label">Add readers for {row.identifier}</span><input className="input" type="number" min={0} max={20} value={d.addReaders} disabled={!report.databases_available || !!row.blocked_reason || !offered(report, 'add_reader')} onChange={e => db(row.identifier, value => ({ ...value, addReaders: Number(e.target.value) }))}/><span className="field-help">New readers inherit current source class {row.writer_instance_class ?? row.instance_class ?? 'unknown'}. Refresh after creation, then resize their exact IDs separately.</span></label></section>; })}</div> },
+        { key: 'redis', label: 'Redis', panel: <div className="fp-stack">{!report.caches_available && <p>Redis inventory unavailable.</p>}{report.caches_available && !report.caches.length && <p>No Redis groups reported.</p>}{report.caches.map(row => { const d = draft.caches[row.identifier]!; const sizeChanging = !!d.size && report.sizes.cache.find(s => s.size === d.size)?.type !== row.node_type, countChanging = d.replicas !== row.replica_count; return <section className="fp-resource fp-stack" key={row.identifier}><div className="fp-row"><h3>{row.identifier}</h3><FleetHelp label={`Redis ${row.identifier}`}>Change the group size or replica count in one plan. Apply and refresh before changing the other; the current server cannot cumulatively quote both for one group. Downsizing can evict data when the working set no longer fits.</FleetHelp></div><p>{row.node_type} · {row.replica_count} replicas · {row.status}</p>{row.blocked_reason && <p className="text-warn">{row.blocked_reason}</p>}<div className="fp-fields"><label className="field"><span className="field-label">Replicas for {row.identifier}</span><input className="input" type="number" min={row.min_replicas} max={100} value={d.replicas} disabled={!report.caches_available || !!row.blocked_reason || !offered(report, 'set_cache_replicas') || sizeChanging} onChange={e => cache(row.identifier, { replicas: Number(e.target.value) })}/><span className="field-help">Minimum {row.min_replicas}{sizeChanging ? ' · clear the size change to edit replicas' : ''}</span></label><SizeChoice id={row.identifier} current={row.node_type} value={d.size} sizes={report.sizes.cache} disabled={!report.caches_available || !!row.blocked_reason || !offered(report, 'resize_cache') || countChanging} onChange={size => cache(row.identifier, { size })}/></div><p className="dim">{countChanging ? 'Restore the current replica count to edit group size.' : 'Change one dimension per group, then apply and refresh.'}</p><p className="text-warn">{row.resize_impact === 'rolling' ? 'Rolling resize with a brief primary failover interruption.' : 'Downtime: Redis is unavailable while its node is replaced.'}</p></section>; })}</div> },
+        ]}/></fieldset>{compiled.error && <p className="form-alert" role="alert">{compiled.error}</p>}{!compiled.steps.length && !compiled.error && <p className="dim fp-empty">Choose a capacity change to review.</p>}</>}
+        {blocked && <p className="text-warn">A capacity operation is unresolved. View progress before starting another change.</p>}{error && <p className="form-alert" role="alert">{error}</p>}
+    </div><div className="modal-actions"><button className="btn" disabled={busy} onClick={plan ? () => { invalidate(); } : close}>{plan ? 'Back to changes' : 'Cancel'}</button>{plan ? <button className="btn btn-primary" disabled={busy || blocked || !consent || expired} onClick={() => void apply()}>Apply reviewed plan</button> : <button className="btn btn-primary" disabled={busy || blocked || !fresh || !!compiled.error || !compiled.steps.length} onClick={() => void review()}>Review changes ({compiled.steps.length})</button>}</div></div>;
+}

package/src/admin/fleet/CapacityInspector.tsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import { Tabs } from '../../ui/Tabs';
+import { datetime } from '../../ui/format';
+import { FleetHelp } from './FleetHelp';
+import { completeAllowlist } from './standalone-data';
+import type { CapacityReport, FleetSource } from './types';
+export function CapacityInspector({ report: r, ingress, close }: { report: CapacityReport; ingress?: FleetSource; close: () => void }) {
+    const [copied, setCopied] = useState('');
+    const e = r.egress, proof = completeAllowlist(r);
+    const balancer = ingress?.data.balancer;
+    const ingressIPs = balancer && typeof balancer === 'object' && 'elastic_ips' in balancer && Array.isArray(balancer.elastic_ips) ? balancer.elastic_ips.filter((ip): ip is string => typeof ip === 'string') : [];
+    const copy = async () => { try { await navigator.clipboard.writeText(e.addresses.join('\n')); setCopied('Allowlist copied'); } catch { setCopied('Copy unavailable. Select the addresses below.'); } };
+    return <div className="modal-pad fleet-standalone-dialog" aria-label="Capacity and addressing"><h2 className="modal-title">Capacity and addressing</h2><p className="modal-message">{r.region} · {r.mode} · {datetime(r.generated_at)}</p><div className="fleet-standalone-body"><Tabs ariaLabel="Capacity inspection" items={[
+        { key: 'nodes', label: 'App nodes', panel: <div className="fp-stack"><p className="dim">{r.nodes.inventory_available ? `${r.nodes.instances.length} owned nodes` : 'Owned inventory unavailable'} · {r.nodes.serving_available ? 'Serving evidence available' : 'Serving evidence unavailable'} <FleetHelp label="node evidence">Serving identity: {r.nodes.self_check}. Inventory counts do not prove healthy load-balancer targets.</FleetHelp></p>{r.nodes.instances.map(n => <article className="fp-resource" key={n.id}><div className="fp-row"><strong>{n.name}</strong><span className="fp-state">{n.healthy ? 'Healthy target' : n.state}</span></div><p>{n.instance_type ?? 'Size unknown'} · {n.zone ?? 'Zone unknown'}{n.self ? ' · serving this request' : ''}</p><small className="dim">{n.id} · {n.instance_state ?? 'Provider state unknown'} / {n.lifecycle_state}</small><p className="dim">Target groups: {n.groups.join(', ') || 'None reported'}</p></article>)}</div> },
+        { key: 'database', label: 'Database', panel: <div className="fp-stack">{!r.databases_available && <p>Database inventory unavailable.</p>}{r.databases_available && !r.databases.length && <p>No database resources reported.</p>}{r.databases.map(d => <article className="fp-resource" key={d.identifier}><h3>{d.identifier}</h3><p>{d.engine} · {d.status}</p>{d.blocked_reason && <p className="text-warn">{d.blocked_reason}</p>}{d.members.map(m => <div className="fp-member" key={m.id}><strong>{m.id}</strong><span>{m.role} · {m.instance_class ?? 'Class unknown'}</span><small className="dim">{m.status ?? 'Status unknown'} / {m.lifecycle_state}</small></div>)}</article>)}<p className="dim">This process’s reader routing: {r.reader_routing.database.active ? 'Active' : 'Inactive'} · {r.reader_routing.database.host ?? 'Host not reported'} <FleetHelp label="database routing">{r.reader_routing.database.skip_reason ?? 'No skip reason reported.'} Reader endpoint match: {r.reader_routing.database.matches_reader_endpoint == null ? 'Unknown' : r.reader_routing.database.matches_reader_endpoint ? 'Yes' : 'No'}. This describes the serving process, not every node.</FleetHelp></p></div> },
+        { key: 'redis', label: 'Redis', panel: <div className="fp-stack">{!r.caches_available && <p>Redis inventory unavailable.</p>}{r.caches_available && !r.caches.length && <p>No Redis groups reported.</p>}{r.caches.map(c => <article className="fp-resource" key={c.identifier}><h3>{c.identifier}</h3><p>{c.node_type} · {c.replica_count} replicas · {c.status}</p>{c.blocked_reason && <p className="text-warn">{c.blocked_reason}</p>}{c.members.map(m => <div className="fp-member" key={m.id}><strong>{m.id}</strong><span>{m.role} · {m.status} / {m.lifecycle_state}</span></div>)}</article>)}<p className="dim">This process’s reader routing: {r.reader_routing.redis.active ? 'Active' : 'Inactive'} <FleetHelp label="Redis routing">Routing is a serving-process observation. Replicas alone do not prove that every app node uses a reader.</FleetHelp></p></div> },
+        { key: 'addresses', label: 'Addresses', panel: <div className="fp-stack"><section className="fp-resource"><div className="fp-row"><h3>Fleet outbound allowlist</h3><FleetHelp label="outbound allowlist">Only a complete, enabled policy observation with no pending nodes can be copied as an allowlist. Fallback attachments and reservations are separate evidence.</FleetHelp></div><p>{proof ? 'Complete observation' : 'Incomplete observation — do not use as a complete allowlist'}</p><p className="dim">Policy: {e.policy_available ? e.enabled ? 'Enabled' : 'Disabled' : 'Unavailable'}</p>{e.fleet_available && e.addresses_available ? <pre>{e.addresses.join('\n') || 'No attached fleet addresses reported'}</pre> : <p>Fleet addresses unavailable.</p>}<button className="btn" disabled={!proof || !e.addresses.length} onClick={() => void copy()}>Copy allowlist</button>{copied && <p role="status">{copied}</p>}{e.attached.map(a => <p key={`${a.instance}:${a.public_ip}`}>{a.instance} · {a.public_ip} · {a.managed ? 'Portal managed' : 'Externally managed'}</p>)}<p className="dim">Pending nodes: {e.fleet_available ? e.pending_nodes.join(', ') || 'None' : 'Unavailable'}</p></section><section className="fp-resource"><h3>Fallback outbound attachments</h3>{e.fleet_available && e.addresses_available ? e.fallback_attached.length ? e.fallback_attached.map(a => <p key={`${a.instance}:${a.public_ip}`}>{a.instance} · {a.public_ip} · outside the fleet allowlist</p>) : <p>None reported</p> : <p>Unavailable</p>}</section><section className="fp-resource"><h3>Reserved addresses</h3><p>{e.addresses_available ? e.reserved.map(a => a.public_ip).join(', ') || 'None' : 'Unavailable'}</p></section><section className="fp-resource"><h3>Fixed ingress addresses</h3><p>{ingressIPs.join(', ') || (ingress?.data.elastic_ip_missing === true ? 'No fixed ingress allocation reported' : 'Unavailable')}</p><p className="dim">Load-balancer ingress is separate from outbound node addresses.</p></section></div> },
+    ]}/>{r.warnings.map((w, index) => <p className="text-warn" key={index}>{w.message}{w.iam_action ? ` (${w.iam_action})` : ''}</p>)}</div><div className="modal-actions"><button className="btn" onClick={close}>Close</button></div></div>;
+}

package/src/admin/fleet/CapacityProgress.tsx

@@ -0,0 +1,9 @@
+import { useRef, useState, useSyncExternalStore } from 'react';
+import { fleetOperations } from './operations';
+export function CapacityProgress({ scope, close, setBusy, assertActive }: { scope: string; close: () => void; setBusy: (v: boolean) => void; assertActive: () => void }) {
+    const operation = useSyncExternalStore(fn => fleetOperations.subscribe(scope, fn), () => fleetOperations.get(scope), () => fleetOperations.get(scope));
+    const [batch, setBatch] = useState(''), [error, setError] = useState(''), [reading, setReading] = useState(false), lock = useRef(false);
+    const observe = async () => { if (lock.current) return; lock.current = true; setBusy(true); setReading(true); setError(''); try { assertActive(); await fleetOperations.observe(scope, batch); assertActive(); } catch (reason) { setError(reason instanceof Error ? reason.message : 'Observation unavailable.'); } finally { lock.current = false; setBusy(false); setReading(false); } };
+    const pending = reading || operation.status === 'submitting';
+    return <div className="modal-pad fleet-standalone-dialog" aria-label="Capacity progress"><h2 className="modal-title">Capacity progress</h2><div className="fleet-standalone-body fp-stack"><p className="fp-state">{operation.status === 'unknown' ? 'Progress unknown' : operation.status === 'done' ? 'Batch completed' : operation.status === 'failed' ? 'Batch failed' : operation.status === 'idle' ? 'No capacity batch in this session' : 'Capacity change in progress'}</p><p role="status">{operation.message}</p>{operation.planId && <p className="dim">Plan {operation.planId}<br/>Batch {operation.batchId ?? 'Not acknowledged'}</p>}{operation.status !== 'idle' && <p className="dim">Completed steps remain applied. Closing this window does not cancel the batch.</p>}{operation.batch?.steps.map(step => <article className="fp-resource" key={step.index}><strong>{step.index + 1}. {step.description}</strong><p>{step.state}{step.phase ? ` · ${step.phase}` : ''}</p>{step.message && <p>{step.message}</p>}{step.error_code && <p className="text-warn">{step.error_code}</p>}{step.operation && <small className="dim">Operation {step.operation}</small>}</article>)}{operation.status === 'unknown' && !operation.batchId && <label className="field"><span className="field-label">Batch ID from server logs</span><input className="input" value={batch} onChange={e => setBatch(e.target.value)}/><span className="field-help">Use the exact batch for plan {operation.planId}. Only matching terminal evidence resolves this guard. Never replay an unacknowledged apply.</span></label>}{error && <p className="form-alert" role="alert">{error}</p>}</div><div className="modal-actions"><button className="btn" disabled={pending} onClick={close}>Close progress</button>{operation.planId && <button className="btn btn-primary" disabled={pending || !operation.batchId && !batch.trim()} onClick={() => void observe()}>{reading ? 'Observing…' : 'Refresh observation'}</button>}</div></div>;
+}

package/src/admin/fleet/FleetHelp.tsx

@@ -0,0 +1,7 @@
+import { useId, useRef, useState, type ReactNode } from 'react';
+import { Popover } from '../../ui/Popover';
+export function FleetHelp({ label, children }: { label: string; children: ReactNode }) {
+    const anchor = useRef<HTMLButtonElement>(null), id = useId();
+    const [open, setOpen] = useState(false);
+    return <><button ref={anchor} type="button" className="ops-help" aria-label={`About ${label}`} aria-expanded={open} aria-controls={open ? id : undefined} onClick={() => setOpen(value => !value)}><i className="bi bi-info-circle" aria-hidden="true" /></button><Popover anchorRef={anchor} open={open} onClose={() => setOpen(false)} id={id} aria-label={`About ${label}`} className="ops-help-content">{children}</Popover></>;
+}

package/src/admin/fleet/FleetOverview.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link, useLocation } from 'react-router-dom';
+import { decodeJwt, getAccessToken, getAuthSessionRevision, useAuthSnapshot, useMe } from '../../client/runtime';
+import { modal } from '../../ui/modal';
+import { datetime } from '../../ui/format';
+import { useAdminRouteContext } from '../core/route-context';
+import { backendGlobalCan, FLEET_CAPACITY_GRANTS, FLEET_DASHBOARD_GRANTS, type BackendGlobalUser } from './access';
+import { readCapacity, readFleetDashboard } from './api';
+import { fleetOperations, fleetSessionScope } from './operations';
+import type { CapacityReport, FleetFacts, FleetSource } from './types';
+export type FleetLinks = Record<string, {
+    to: string;
+    grants: readonly string[];
+    superuser?: boolean;
+} | null>;
+export interface FleetOverviewProps {
+    mount?: string;
+    links?: FleetLinks;
+    showConfigurationLink?: boolean;
+    headingLevel?: 1 | 2;
+    capacityDetails?: 'inline' | 'modal';
+}
+const defaultLinks: FleetLinks = { last_deployment: { to: 'deployments', grants: ['view_platform', 'manage_platform', 'admin', 'view_dns', 'manage_dns', 'security'] }, framework: { to: 'maintenance', grants: ['manage_aws', 'view_platform', 'manage_platform', 'admin'] }, certificates: { to: 'dns/certificates', grants: ['view_dns', 'manage_dns', 'security'] }, incidents: { to: 'security/incidents?status=open', grants: ['view_security', 'manage_security', 'security'] }, tickets: { to: 'security/tickets', grants: ['view_security', 'manage_security', 'security'] }, jobs: { to: 'jobs/list', grants: ['view_jobs', 'manage_jobs', 'jobs'] }, email: { to: 'email/domains', grants: ['manage_aws', 'comms'] }, sms: { to: 'phonehub', grants: ['view_phone_config', 'manage_phone_config', 'view_sms', 'manage_sms', 'comms'] } };
+export function fleetMount(pathname: string, explicit?: string): string { return (explicit ?? pathname.replace(/\/fleet\/?$/, '').replace(/\/$/, '')).replace(/\/$/, ''); }
+const fact = (v: unknown, fallback = 'Unknown') => typeof v === 'string' || typeof v === 'number' ? String(v) : fallback;
+const obj = (v: unknown): FleetFacts => v && typeof v === 'object' && !Array.isArray(v) ? v as FleetFacts : {};
+const list = (v: unknown): unknown[] => Array.isArray(v) ? v : [];
+const count = (v: unknown) => typeof v === 'number' && Number.isFinite(v) ? String(v) : 'Unknown';
+function summary(name: string, d: FleetFacts): string {
+    switch (name) {
+        case 'load_balancer': return d.configured === false ? 'No load balancer configured' : `${count(d.healthy)} / ${count(d.registered)} healthy targets · ${fact(obj(d.balancer).name)}`;
+        case 'compute': return `${count(d.up)} / ${count(d.total)} up · ${d.source === 'target_group' ? 'Load-balancer target evidence' : d.source === 'ec2' ? 'EC2 inventory (serving health unknown)' : 'Evidence source unknown'}`;
+        case 'database':
+        case 'cache': return `${d.reachable === true ? 'Reachable' : d.reachable === false ? 'Unreachable' : 'Reachability unknown'} · ${fact(d.engine)} ${fact(d.version, 'version unknown')}${name === 'cache' ? ` · memory ${fact(d.memory_used)}` : ''}`;
+        case 'certificates': return `${count(d.active)} active · ${count(d.failing)} failing · ${count(d.expiring_within_30_days)} expiring within 30 days${d.soonest_expiry ? ` · next expiry ${fact(d.soonest_expiry)}` : ''}`;
+        case 'public_api': return d.configured === false ? 'Public proof not configured' : `Node ${fact(d.node_version)} · public proof ${fact(obj(d.probe).version, 'version unknown')} · HTTP ${fact(obj(d.probe).http_status)} · ${obj(d.probe).ok === true ? 'Passed' : obj(d.probe).ok === false ? 'Failed' : 'Unknown'}`;
+        case 'framework': return `${fact(d.installed)} installed · ${fact(d.latest)} latest${d.update_available === true ? ' · update available' : ''} · pin ${fact(obj(d.pin).mode)}`;
+        case 'last_deployment': {
+            const r = obj(list(d.items)[0]);
+            return `${fact(r.sha, 'No deployment').slice(0, 12)} · ${fact(r.status)} · ${fact(r.finished ?? r.created)}`;
+        }
+        case 'jobs': return `Scheduler ${d.scheduler_active === true ? 'active' : d.scheduler_active === false ? 'inactive' : 'unknown'} · ${count(obj(d.jobs).pending)} pending · ${count(obj(d.jobs).running)} running · ${count(d.failed_recent)} recent failures`;
+        case 'sanity': {
+            const checks = list(d.checks);
+            return checks.length ? checks.map(r => `${fact(obj(r).name)}: ${obj(r).ok === true ? 'passed' : obj(r).ok === false ? 'failed' : 'unknown'}`).join(' · ') : 'Check evidence unavailable';
+        }
+        case 'incidents':
+        case 'tickets': return `${count(d.open)} open${d.oldest_age_days != null ? ` · oldest ${count(d.oldest_age_days)} days` : ''}`;
+        case 'sms': return `${fact(d.provider)} · ${d.test_mode === true ? 'test mode' : 'live mode'} · verification ${obj(d.verified).ok === true ? 'passed' : obj(d.verified).ok === false ? 'failed' : 'unknown'}`;
+        case 'email': return `${count(d.domains)} domains · ${fact(d.message, 'Inspect email configuration')}`;
+        default: return 'Evidence available';
+    }
+}
+const labels: Record<string, string> = { load_balancer: 'Load balancer', compute: 'App nodes', database: 'Database', cache: 'Redis', certificates: 'Certificates', public_api: 'Public API', framework: 'Django-MOJO', last_deployment: 'Last deployment', jobs: 'Jobs', sanity: 'Node checks', incidents: 'Incidents', tickets: 'Tickets', sms: 'SMS', email: 'Email' };
+function EvidenceRow({ name, source, link }: {
+    name: string;
+    source: FleetSource;
+    link?: string;
+}) {
+    const restricted = source.status === 'permission_denied';
+    const details = () => modal.open(close => <div className="modal-pad fleet-source-detail"><h2 className="modal-title">{labels[name] ?? name}</h2><p>{restricted ? 'Your account cannot read this source.' : summary(name, source.data)}</p>{source.reason && <p>{source.reason.replaceAll('_', ' ')}</p>}{name === 'load_balancer' && <p>Fixed ingress addresses: {list(obj(source.data.balancer).elastic_ips).map(v => fact(v)).join(', ') || (source.data.elastic_ip_missing === true ? 'No fixed ingress allocation reported' : 'Unavailable')}. These are separate from node outbound addresses.</p>}{name === 'database' && !!source.data.drift && <p className="text-warn">Engine update {fact(obj(source.data.drift).available_major)} · {fact(obj(source.data.drift).note)} · deadline {fact(obj(source.data.drift).deadline)}</p>}<p className="dim">Observed {source.observed_at ? <time dateTime={source.observed_at}>{datetime(source.observed_at)}</time> : 'time unavailable'}{source.stale_after ? ` · stale after ${datetime(source.stale_after)}` : ''}</p>{link && <p><Link to={link} onClick={() => close(null)}>Open {labels[name]?.toLowerCase() ?? name} →</Link></p>}<div className="modal-actions"><button className="btn" onClick={() => close(null)}>Close</button></div></div>, {size: 'md'});
+    const d = source.data;
+    const concise = restricted ? 'Restricted' : name === 'compute' ? `${count(d.up)} / ${count(d.total)} up` : name === 'load_balancer' ? d.configured === false ? 'Not configured' : `${count(d.healthy)} / ${count(d.registered)} targets healthy` : name === 'database' || name === 'cache' ? `${d.reachable === true ? 'Reachable' : d.reachable === false ? 'Unreachable' : 'Unknown'} · ${fact(d.engine)} ${fact(d.version, '')}` : name === 'framework' ? `${fact(d.installed)}${d.update_available === true ? ' · update available' : ''}` : name === 'public_api' ? d.configured === false ? 'Not configured' : `HTTP ${fact(obj(d.probe).http_status)} · ${obj(d.probe).ok === true ? 'passed' : obj(d.probe).ok === false ? 'failed' : 'unknown'}` : name === 'certificates' ? `${count(d.active)} active · ${count(d.expiring_within_30_days)} expiring soon${d.failing ? ` · ${count(d.failing)} failing` : ''}` : name === 'jobs' && d.scheduler_active == null ? summary(name, d) : name === 'jobs' ? `${count(obj(d.jobs).pending)} pending · ${count(obj(d.jobs).running)} running` : name === 'last_deployment' ? `${fact(obj(list(d.items)[0]).sha, 'No deployment').slice(0, 12)} · ${fact(obj(list(d.items)[0]).status)}` : name === 'email' ? `${count(d.domains)} domains` : name === 'sanity' && !list(d.checks).length ? 'Check evidence unavailable' : name === 'sanity' ? `${list(d.checks).filter(v => obj(v).ok === true).length} / ${list(d.checks).length} checks passed` : summary(name, d);
+    return <div className="fleet-evidence-row"><strong>{labels[name] ?? name}</strong><span className="fleet-row-value">{concise}</span><span className={`fleet-source-status fleet-status-${source.status}`}>{restricted ? 'Restricted' : source.status.replaceAll('_', ' ')}</span>{!restricted && <button type="button" className="fleet-detail-button" aria-label={`Details for ${labels[name] ?? name}`} onClick={() => void details()}>Details</button>}</div>;
+}
+function EvidenceSection({ title, names, sources, links, mount, user }: {
+    title: string;
+    names: string[];
+    sources: Record<string, FleetSource>;
+    links: FleetLinks;
+    mount: string;
+    user: BackendGlobalUser;
+}) {
+    const visible = names.filter(name => { const s = sources[name]; return s && !(['sms', 'email'].includes(name) && (s.status === 'unconfigured' || s.data.configured === false)) && !(name === 'tickets' && s.data.open === 0); });
+    if (!visible.length)
+        return null;
+    return <section className="panel fleet-evidence"><h3>{title}</h3>{visible.every(name => sources[name]?.status === 'permission_denied') ? <div className="fleet-evidence-row"><strong>Restricted</strong><p>Your account cannot read these sources.</p></div> : visible.map(name => { const link = links[name]; const can = link && (!link.superuser || user.is_superuser === true) && backendGlobalCan(user, link.grants); return <EvidenceRow key={name} name={name} source={sources[name]!} link={can ? `${mount}/${link.to.replace(/^\//, '')}` : undefined}/>; })}</section>;
+}
+function CapacityFactsContent({ report }: {
+    report: CapacityReport;
+}) {
+    const e = report.egress, r = report.reader_routing;
+    return <><p className="dim">Observed {report.generated_at} · {report.identity ? `${report.identity.project} / ${report.identity.environment}` : 'Ownership identity unavailable'}</p>
+        <div className="fleet-fact-grid"><section><h4>App nodes</h4><p>{report.nodes.inventory_available ? `${report.nodes.instances.length} owned inventory rows` : 'Instance inventory unavailable'} · {report.nodes.serving_available ? 'Serving evidence available' : 'Serving evidence unavailable'}</p><p>Serving-node identity: {report.nodes.self_check}</p>{report.nodes.instances.map(n => <p key={n.id}><b>{n.name}</b> · {n.id} · {n.instance_type ?? 'size unknown'} · {n.instance_state ?? 'provider state unknown'} / {n.state} · {n.lifecycle_state}{n.self ? ' · serving this request' : ''}</p>)}</section>
+        <section><h4>Stable outbound addresses</h4><p>Policy: {e.policy_available ? (e.enabled ? 'Enabled' : 'Disabled') : 'Unavailable'}</p>{e.available && e.fleet_available && e.addresses_available ? <><p>Fleet allowlist: {e.addresses.length ? e.addresses.join(', ') : 'No attached fleet addresses'}</p>{e.attached.map(a => <p key={`${a.instance}:${a.public_ip}`}>{a.instance} · {a.public_ip} · {a.managed ? 'portal managed' : 'managed outside this portal'}</p>)}</> : <p>Fleet allowlist unavailable. An empty list would not prove there are no addresses.</p>}{e.fallback_attached.map(a => <p key={`${a.instance}:${a.public_ip}`}>{a.instance} · {a.public_ip} · managed outside this portal; not part of the fleet allowlist.</p>)}<p>Reserved addresses: {e.addresses_available ? e.reserved.map(a => a.public_ip).join(', ') || 'None' : 'Unavailable'}</p><p>Pending node addresses: {e.fleet_available ? e.pending_nodes.join(', ') || 'None' : 'Unavailable'}</p></section>
+        <section><h4>Data services</h4><p>Database inventory: {report.databases_available ? `${report.databases.length} resources` : 'Unavailable'}</p>{report.databases.map(d => <p key={d.identifier}>{d.identifier} · {d.engine} · {d.status}{d.blocked_reason ? ` · ${d.blocked_reason}` : ''}{d.members.map(m => <small key={m.id} className="fleet-member">{m.id} · {m.role} · {m.status ?? 'status unknown'} / {m.lifecycle_state} · {m.instance_class ?? 'class unknown'}</small>)}</p>)}<p>Redis inventory: {report.caches_available ? `${report.caches.length} groups` : 'Unavailable'}</p>{report.caches.map(c => <p key={c.identifier}>{c.identifier} · {c.node_type} · {c.replica_count} replicas · {c.status}{c.blocked_reason ? ` · ${c.blocked_reason}` : ''}{c.members.map(m => <small key={m.id} className="fleet-member">{m.id} · {m.role} · {m.status ?? 'status unknown'} / {m.lifecycle_state}</small>)}</p>)}</section>
+        <section><h4>This serving process’s reader routing</h4><p>Database: {r.database.active ? 'Active' : 'Inactive'} · {r.database.host ?? 'Host not reported'}</p>{r.database.skip_reason && <p>{r.database.skip_reason}</p>}<p>Matches reader endpoint: {r.database.matches_reader_endpoint === null ? 'Unknown' : r.database.matches_reader_endpoint ? 'Yes' : 'No'}</p><p>Redis: {r.redis.active ? 'Active' : 'Inactive'}. These observations describe this process, not every fleet node.</p></section></div>{report.warnings.map((w, i) => <p className="text-warn" key={i}>{w.code}: {w.message}{w.iam_action ? ` (${w.iam_action})` : ''}</p>)}</>;
+}
+export function CapacityFacts({ report }: { report: CapacityReport }) {
+    return <details className="panel panel-pad fleet-capacity-facts"><summary>Capacity and addressing · {report.region} · {report.mode}</summary><CapacityFactsContent report={report}/></details>;
+}
+export function FleetOverview({ mount: explicitMount, links: customLinks, showConfigurationLink = true, headingLevel = 2, capacityDetails = 'inline' }: FleetOverviewProps = {}) {
+    const Heading = headingLevel === 1 ? 'h1' : 'h2';
+    const queryClient = useQueryClient(), fresh = useRef(false);
+    const routeContext = useAdminRouteContext();
+    const location = useLocation(), mount = fleetMount(location.pathname, explicitMount ?? routeContext?.mount), auth = useAuthSnapshot(), { data: me } = useMe();
+    const scope = auth.authenticated && auth.uid ? `${auth.uid}:${getAuthSessionRevision()}` : null;
+    const canDashboard = !!scope && backendGlobalCan(me, FLEET_DASHBOARD_GRANTS), canCapacity = !!scope && backendGlobalCan(me, FLEET_CAPACITY_GRANTS);
+    const dashboard = useQuery({ queryKey: ['operational-fleet', 'dashboard', scope], queryFn: ({ signal }) => readFleetDashboard(fresh.current, { signal }), enabled: canDashboard, retry: false, refetchOnWindowFocus: false });
+    const capacity = useQuery({ queryKey: ['operational-fleet', 'capacity', scope], queryFn: ({ signal }) => readCapacity(fresh.current, { signal }), enabled: canCapacity, retry: false, refetchOnWindowFocus: false });
+    const operation = useSyncExternalStore(fn => scope ? fleetOperations.subscribe(scope, fn) : () => { }, () => scope ? fleetOperations.get(scope) : null, () => null);
+    const owner = useRef<AbortController | null>(null), [refreshing, setRefreshing] = useState(false), [error, setError] = useState('');
+    const links = { ...defaultLinks, ...customLinks };
+    if (routeContext) for (const [name, link] of Object.entries(links)) {
+        if (link && !routeContext.paths.includes(`${mount}/${link.to.replace(/^\//, '').split('?')[0]}`)) links[name] = null;
+    }
+    const configurationMounted = !routeContext || routeContext.paths.includes(`${mount}/fleet-configuration`);
+    useEffect(() => () => { owner.current?.abort(); }, [scope]);
+    useEffect(() => { if (!scope || !canCapacity || !operation || !['done', 'failed', 'unknown'].includes(operation.status))
+        return; const expected = scope; void readCapacity(true).then(next => { if (fleetSessionScope() === expected)
+        queryClient.setQueryData(['operational-fleet', 'capacity', expected], next); }).catch(() => { }); }, [scope, canCapacity, operation?.status, operation?.planId, queryClient]);
+    const jwt = decodeJwt(getAccessToken());
+    const interactive = !!jwt && !['api_key', 'group_scoped_token'].includes(String(jwt.credential_kind ?? ''));
+    const eligible = canCapacity && me?.is_superuser === true && interactive && capacity.data?.mode === 'managed';
+    const refresh = async () => { owner.current?.abort(); setRefreshing(true); setError(''); fresh.current = true; try {
+        await Promise.all([...(canDashboard ? [dashboard.refetch()] : []), ...(canCapacity ? [capacity.refetch()] : [])]);
+    }
+    finally {
+        fresh.current = false;
+        setRefreshing(false);
+    } };
+    const openCapacity = () => {
+        if (!scope || fleetSessionScope() !== scope || !canCapacity || !capacity.data) return;
+        owner.current?.abort(); const controller = new AbortController(); owner.current = controller;
+        const report = capacity.data;
+        return modal.open(close => <div className="modal-pad fleet-capacity-dialog"><h2 className="modal-title">Capacity and addressing</h2><p className="dim">{report.region} · {report.mode}</p><div className="fleet-capacity-body"><CapacityFactsContent report={report}/></div><div className="modal-actions"><button className="btn" onClick={() => close(null)}>Close</button></div></div>, { size: 'lg', signal: controller.signal });
+    };
+    useEffect(() => { if (capacityDetails === 'modal' && !canCapacity) owner.current?.abort(); }, [capacityDetails, canCapacity]);
+    const openScale = async () => { if (!scope || fleetSessionScope() !== scope || !eligible || !capacity.data)
+        return; owner.current?.abort(); const controller = new AbortController(); owner.current = controller; try {
+        const { ScaleFleetDialog } = await import('./ScaleFleetDialog');
+        if (controller.signal.aborted || fleetSessionScope() !== scope)
+            return;
+        await modal.open(close => <ScaleFleetDialog scope={scope} initialReport={capacity.data!} close={() => close(null)} onRefresh={() => void capacity.refetch()}/>, { size: 'lg', signal: controller.signal, canDismiss: () => fleetOperations.get(scope).status !== 'submitting' });
+    }
+    catch (reason) {
+        setError(reason instanceof Error ? reason.message : 'Capacity editor could not load.');
+    } };
+    if (!canDashboard && !canCapacity)
+        return null;
+    const data = dashboard.data;
+    return <section className="operational-fleet" aria-label="Fleet overview"><header className="fleet-heading"><div><div className="eyebrow">Operations</div><Heading>Fleet overview</Heading></div><div className="fleet-buttons"><button className="btn" disabled={refreshing || dashboard.isFetching || capacity.isFetching || operation?.status === 'submitting'} onClick={() => void refresh()}>Refresh fleet</button>{eligible && <button className="btn btn-primary" onClick={() => void openScale()}>{operation && ['submitting', 'running', 'unknown'].includes(operation.status) ? 'View capacity progress' : 'Scale fleet'}</button>}{showConfigurationLink && configurationMounted && me?.is_superuser === true && <Link className="btn" to={`${mount}/fleet-configuration`}>Configuration</Link>}</div></header>
+        {canDashboard && !data && <div className="panel panel-pad" role={dashboard.error ? 'alert' : 'status'}>{dashboard.error?.message ?? 'Loading fleet health…'}</div>}
+        {data && <><div className={`panel panel-pad fleet-availability fleet-availability-${data.availability.state}`}><strong>{data.availability.message}</strong><p className="dim">Observed <time dateTime={data.observed_at} title={data.observed_at}>{datetime(data.observed_at)}</time></p>{dashboard.error && <p className="text-warn">Latest observation failed: {dashboard.error.message}. The prior report is retained with its original timestamps.</p>}</div><div className="fleet-evidence-grid"><EvidenceSection title="Infrastructure" names={['load_balancer', 'compute', 'database', 'cache', 'certificates', 'public_api']} sources={data.sources} links={links} mount={mount} user={me!}/><EvidenceSection title="Software" names={['framework', 'last_deployment', 'sms', 'email']} sources={data.sources} links={links} mount={mount} user={me!}/><EvidenceSection title="Needs attention" names={['jobs', 'sanity', 'incidents', 'tickets']} sources={data.sources} links={links} mount={mount} user={me!}/></div>{data.attention.message && <p>{data.attention.message}</p>}</>}
+        {canCapacity && capacity.error && <p className="form-alert" role="alert">Capacity observation unavailable: {capacity.error.message}</p>}{canCapacity && capacity.data && (capacityDetails === 'modal' ? <div className="fleet-buttons"><button className="btn" onClick={() => void openCapacity()}>Capacity and addressing</button><span className="dim">{capacity.data.region} · {capacity.data.mode}</span></div> : <CapacityFacts report={capacity.data}/>)}
+        {!eligible && <p className="dim">{!canCapacity ? 'Capacity details require the global manage_aws grant.' : me?.is_superuser !== true ? 'Scaling requires a literal superuser account.' : !interactive ? 'Scaling requires an interactive user session.' : capacity.data?.mode === 'external' ? 'Infrastructure is managed externally. Capacity is read-only here.' : 'Loading capacity authority…'}</p>}
+        {operation && operation.status !== 'idle' && <div className="panel panel-pad" role="status"><strong>{operation.status === 'done' ? 'Capacity batch completed' : operation.status === 'failed' ? 'Capacity batch failed' : operation.status === 'unknown' ? 'Capacity progress unknown' : 'Capacity change in progress'}</strong><p>{operation.message}</p><p className="dim">Plan {operation.planId} · batch {operation.batchId ?? 'not acknowledged'}</p>{operation.status === 'failed' && <p>Completed steps remain applied. Nothing rolls back.</p>}</div>}{error && <p className="form-alert" role="alert">{error}</p>}
+    </section>;
+}

package/src/admin/fleet/FleetPage.tsx

@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react';
+import { useAuthSnapshot, useMe } from '../../client/runtime';
+import { backendGlobalCan, FLEET_CAPACITY_GRANTS, FLEET_DASHBOARD_GRANTS } from './access';
+import type { FleetOverviewProps } from './FleetOverview';
+const Workspace = lazy(() => import('./FleetWorkspace').then(module => ({ default: module.FleetWorkspace })));
+export function FleetPage(props: FleetOverviewProps = {}) {
+    const auth = useAuthSnapshot(), { data: me, isLoading } = useMe();
+    if (isLoading) return <p>Checking fleet access…</p>;
+    if (!auth.authenticated || !backendGlobalCan(me, [...FLEET_DASHBOARD_GRANTS, ...FLEET_CAPACITY_GRANTS])) return <div className="panel panel-pad">Fleet requires dashboard or capacity access.</div>;
+    return <div className="page fleet-page"><Suspense fallback={<p role="status">Loading fleet…</p>}><Workspace {...props}/></Suspense></div>;
+}