portal-mojo 0.2.19 → 0.2.21

package/src/admin/deployments/WebAppDeploySetup.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { modal } from '../../ui/modal';
+import { assertOwner } from './permissions';
+import { Tabs } from '../../ui/Tabs';
+import { downloadBlob, useMe } from '../../client/runtime';
+import { getWorkflow, getKeyStatus, resolveAppAuthority, getWebApp } from './api';
+import { isInteractive } from './permissions';
+import { useDeploymentOwner } from './useDeploymentObservation';
+import { ErrorNotice, useWrite } from './shared';
+import type { WebAppObject } from './types';
+export function WebAppDeploySetup({ app, workflowAllowed, releaseAllowed, keyAllowed, deploymentKey, onKey, onChanged }: {
+    app: WebAppObject;
+    workflowAllowed: boolean;
+    releaseAllowed: boolean;
+    keyAllowed: boolean;
+    deploymentKey?: { linked: boolean; active: boolean };
+    onKey: (action: 'mint' | 'rotate' | 'revoke') => void;
+    onChanged?: () => void;
+}) {
+    const s = useDeploymentOwner(), me = useMe(), w = useWrite(s.owner, s.signal);
+    const [key, setKey] = useState(deploymentKey), [keyError, setKeyError] = useState('');
+    useEffect(() => { setKey(deploymentKey); setKeyError(''); }, [deploymentKey?.linked, deploymentKey?.active, s.key]);
+    const refreshKey = () => w.run(async () => { const next = await getKeyStatus(s.owner, app.id, app.group.id, s.signal); setKey(next); setKeyError(''); });
+    useEffect(() => { if (!keyAllowed || deploymentKey) return; let disposed = false; void getKeyStatus(s.owner, app.id, app.group.id, s.signal).then(next => { if (!disposed) setKey(next); }).catch(() => { if (!disposed && !s.signal.aborted) setKeyError('Key status unavailable. Refresh before choosing a key action.'); }); return () => { disposed = true; }; }, [s.key, s.signal, keyAllowed, app.id, app.group.id, !!deploymentKey]);
+    const generate = () => w.run(async () => {
+        const object = await getWebApp(s.owner, app.id, s.signal), authority = await resolveAppAuthority(s.owner, me.data, object, 'workflow', s.signal);
+        if (!isInteractive() || !authority.workflow) throw new Error('Workflow authority unavailable');
+        const workflow = await getWorkflow(s.owner, app.id, object.group.id, s.signal);
+        assertOwner(s.owner, s.signal);
+        void modal.open(close => <WorkflowDialog workflow={workflow} onClose={() => close(null)}/>, { signal: s.signal, size: 'lg' });
+    });
+    const loadUpload = async () => { const { WebAppUploadPanel } = await import('./WebAppUploadPanel'); assertOwner(s.owner, s.signal); let busy = false; await modal.open(close => <UploadDialog app={app} Upload={WebAppUploadPanel} onChanged={onChanged} onClose={() => close(null)} onBusy={value => { busy = value; }}/>, { signal: s.signal, canDismiss: () => !busy, size: 'lg' }); };
+    const showIntegration = () => { void modal.open(close => <div className="modal-pad admin-deployments"><h2 className="modal-title">Other CI integration</h2><ol className="deployment-instructions"><li>Store this app’s deployment key in your CI secret store.</li><li>Register <code>POST /api/edge/release</code> with webapp <code>{app.id}</code>, a unique version and a SHA-256/size manifest.</li><li>PUT each file to its returned signed URL using the exact checksum header. Send no API bearer credentials or cookies to storage.</li><li>Call <code>POST /api/edge/release/complete</code> with the release ID, then read <code>/api/edge/release/deployment/ID</code> until terminal.</li></ol><p>Only <code>live</code> is a successful rollout. Registration and completion alone are not proof.</p><div className="modal-actions"><button className="btn" onClick={() => close(null)}>Close</button></div></div>, { signal: s.signal, size: 'md' }); };
+    const keyControls = <section className="deployment-key-setup"><h3>Deployment key</h3><p className="dim">{key ? key.active ? 'Active key linked. Its value cannot be retrieved.' : key.linked ? 'The linked key is inactive. Rotate it to reconnect CI.' : 'Create a key for this app, then save it as a CI secret.' : 'Key status not observed.'}</p>{keyAllowed && <div className="deployment-actions">{key && (!key.linked ? <button className="btn" disabled={w.busy} onClick={() => onKey('mint')}>Create deployment key…</button> : <><button className="btn" disabled={w.busy} onClick={() => onKey('rotate')}>Rotate key…</button>{key.active && <button className="btn" disabled={w.busy} onClick={() => onKey('revoke')}>Revoke key…</button>}</>)}<button className="btn" disabled={w.busy} onClick={() => void refreshKey()}>Refresh key status</button></div>}{keyError && <ErrorNotice>{keyError}</ErrorNotice>}</section>;
+    return <div className="deployment-setup"><Tabs ariaLabel="Deployment method" items={[
+        { key: 'github', label: 'GitHub', panel: <div className="deployment-stack"><p>Deploy automatically when you push to your repository.</p><ol className="deployment-instructions"><li>Save the generated workflow in your repository.</li><li>Save the deployment key as the Actions secret <code>MOJO_DEPLOY_KEY</code>.</li></ol><div><button className="btn btn-primary" disabled={!workflowAllowed || w.busy} onClick={() => void generate()}>View GitHub workflow</button></div>{keyControls}</div> },
+        { key: 'upload', label: 'Upload', panel: <div className="deployment-stack"><p>Deploy an already built site from a folder or selected files.</p><div><button className="btn btn-primary" disabled={!releaseAllowed} onClick={() => void loadUpload()}>Choose built artifact</button></div></div> },
+        { key: 'other-ci', label: 'Other CI', panel: <div className="deployment-stack"><p>Connect another CI service using this app’s deployment key and release API.</p><div><button className="btn" onClick={showIntegration}>View integration steps</button></div>{keyControls}</div> },
+    ]}/>{w.error && <ErrorNotice>{w.error}</ErrorNotice>}</div>;
+}
+function WorkflowDialog({ workflow, onClose }: { workflow: { filename: string; yaml: string }; onClose: () => void }) {
+    const [message, setMessage] = useState('');
+    return <div className="modal-pad admin-deployments"><h2 className="modal-title">GitHub workflow</h2><p>Save this file at <code>{workflow.filename}</code>.</p><pre className="deployment-code">{workflow.yaml}</pre>{message && <p role="status">{message}</p>}<div className="modal-actions"><button className="btn" onClick={onClose}>Close</button><button className="btn" onClick={() => void navigator.clipboard.writeText(workflow.yaml).then(() => setMessage('Workflow copied')).catch(() => setMessage('Clipboard unavailable; download the workflow'))}>Copy workflow</button><button className="btn btn-primary" onClick={() => downloadBlob(new Blob([workflow.yaml], { type: 'text/yaml' }), 'deploy-webapp.yml')}>Download workflow</button></div></div>;
+}
+
+function UploadDialog({ app, Upload, onClose, onBusy, onChanged }: { app: WebAppObject; Upload: typeof import('./WebAppUploadPanel').WebAppUploadPanel; onClose: () => void; onBusy: (value: boolean) => void; onChanged?: () => void }) {
+    const [busy, setBusy] = useState(false);
+    return <div className="modal-pad admin-deployments"><header className="deployment-dialog-header"><h2 className="modal-title">Upload built files · {app.display_name || app.slug}</h2><button type="button" className="btn btn-icon" aria-label="Close upload" disabled={busy} onClick={onClose}><i className="bi bi-x-lg" aria-hidden="true"/></button></header><Upload app={app} onChanged={onChanged} onBusy={value => { setBusy(value); onBusy(value); }}/></div>;
+}

package/src/admin/deployments/WebAppDeploymentDetail.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import { useMe } from '../../client/runtime';
+import { Tabs } from '../../ui/Tabs';
+import { datetime } from '../../ui/format';
+import { getAttempt, getDeployment, resolveAppAuthority } from './api';
+import { assertOwner, canReadWebApps, isInteractive } from './permissions';
+import { useDeploymentObservation, useDeploymentOwner } from './useDeploymentObservation';
+import { DeploymentHelp, ErrorNotice, Facts, Status, useCloseOnOwnerChange } from './shared';
+import type { Attempt, DeploymentStatus, WebAppObject } from './types';
+
+const terminal = (status: string) => ['live', 'failed', 'rolled_back', 'superseded'].includes(status);
+const active = (status: string) => ['requested', 'queued', 'deploying', 'canary', 'fleet', 'verifying'].includes(status);
+interface Evidence { attempt: Attempt; rollout: DeploymentStatus | null }
+
+/** Ordinary CI attempts are inspectable through viewer-safe model history. */
+export function WebAppDeploymentDetail({ app, attempt, detailedAllowed, onClose, onChanged }: {
+    app: WebAppObject;
+    attempt: Attempt;
+    detailedAllowed: boolean;
+    onClose: () => void;
+    onChanged: () => void;
+}) {
+    const s = useDeploymentOwner(), me = useMe(), notified = useRef('');
+    const admitted = canReadWebApps(me.data) && isInteractive();
+    useCloseOnOwnerChange(s.key, onClose);
+    const observation = useDeploymentObservation<Evidence>(s.owner, admitted ? `${app.id}:${attempt.id}:${detailedAllowed}` : null, async signal => {
+        const current = await getAttempt(s.owner, attempt.id, app.id, signal);
+        let rollout: DeploymentStatus | null = null;
+        if (detailedAllowed && current.release) {
+            const authority = await resolveAppAuthority(s.owner, me.data, app, 'release', signal);
+            if (authority.release) rollout = await getDeployment(s.owner, current.id, app.id, current.release.id, signal);
+        }
+        assertOwner(s.owner, signal);
+        return { attempt: current, rollout };
+    }, evidence => terminal(evidence.attempt.status), evidence => active(evidence.attempt.status));
+    const current = observation.value?.attempt ?? attempt, rollout = observation.value?.rollout;
+    useEffect(() => {
+        if (observation.state !== 'terminal' || !observation.value) return;
+        const key = `${s.key}:${observation.value.attempt.id}:${observation.value.attempt.status}`;
+        if (notified.current !== key) { notified.current = key; onChanged(); }
+    }, [observation.state, observation.value, s.key, onChanged]);
+    if (!admitted) return <div className="modal-pad admin-deployments"><ErrorNotice>Deployment read authority is unavailable.</ErrorNotice><button className="btn" onClick={onClose}>Close</button></div>;
+    const overview = <div>
+        <Facts rows={[["Attempted version", current.release?.version || 'Not reported'], ["Outcome", <Status value={current.status}/>], ["Started", current.started || current.created ? datetime(current.started || current.created) : 'Not reported'], ["Finished", current.finished ? datetime(current.finished) : 'Not reported']]}/>
+        {current.detail && <p>{current.detail}</p>}
+        <p className="dim"><DeploymentHelp label="deployment outcome">Only live is a successful rollout. Rolled back, failed and superseded attempts are unsuccessful. The app's desired version is a separate saved pointer, and nodes can be mixed after a failed rollout.</DeploymentHelp> {observation.observedAt ? `Observed ${new Date(observation.observedAt).toLocaleTimeString()}` : 'Refreshing saved evidence…'}</p>
+        {observation.state === 'observing' && <p role="status">Observing deployment progress…</p>}
+        {observation.state === 'error' && <ErrorNotice>Latest observation unavailable. The displayed evidence may be stale; the outcome is unconfirmed.</ErrorNotice>}
+        {observation.state === 'stopped' && <p role="status" className="text-warn">Automatic observation stopped. Refresh only reads this deployment.</p>}
+    </div>;
+    const nodePanel = rollout && (rollout.targets.length > 0 || rollout.rollback_targets.length > 0) ? <div>{[['Deployment nodes', rollout.targets], ['Rollback nodes', rollout.rollback_targets]].map(([title, nodes]) => {
+        const entries = nodes as DeploymentStatus['targets'];
+        return <section key={String(title)}><h3>{String(title)}</h3>{entries.length ? entries.map((node, index) => <div className="deployment-evidence" key={`${node.runner}:${index}`}><strong>{node.runner || 'Unnamed node'}</strong><p><Status value={node.status}/></p>{node.detail && <p>{node.detail}</p>}{node.sha && <p className="mono">{node.sha}</p>}</div>) : <p className="dim">No node evidence was returned.</p>}</section>;
+    })}</div> : null;
+    return <div className="modal-pad admin-deployments deployment-dialog"><header className="deployment-dialog-header"><div className="deployment-dialog-heading"><h2 className="modal-title">Deployment {current.release?.version || `#${current.id}`}</h2><p className="dim">{app.display_name || app.slug}</p></div><button className="btn" aria-label="Close deployment" onClick={onClose}><i className="bi bi-x-lg" aria-hidden="true"/></button></header>
+        {nodePanel ? <Tabs ariaLabel="Deployment evidence" items={[{ key: 'overview', label: 'Overview', panel: overview }, { key: 'nodes', label: 'Nodes', panel: nodePanel }]}/> : overview}
+        <div className="modal-actions"><button className="btn" onClick={onClose}>Close</button><button className="btn" disabled={observation.state === 'observing'} onClick={observation.refresh}>Refresh deployment</button></div>
+    </div>;
+}

package/src/admin/deployments/WebAppDetail.tsx

@@ -0,0 +1,104 @@
+import { createContext, lazy, Suspense, useContext, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMe } from '../../client/runtime';
+import { modal } from '../../ui/modal';
+import { Tabs } from '../../ui/Tabs';
+import { datetime } from '../../ui/format';
+import { ModelTable, type ModelTableQueryAdapterProps } from '../../ui/ModelTable';
+import { backendGlobalCan } from '../fleet/access';
+import { getAttempt, getDeployment, getHealth, getHistory, getMember, getSummary, getWebApp } from './api';
+import { assertOwner, canReadWebApps, isInteractive, webAppAuthority, type DeploymentOwner } from './permissions';
+import { rollbackEligible } from './deployment-state';
+import { useDeploymentOwner } from './useDeploymentObservation';
+import { DeploymentHelp, ErrorNotice, Facts, Status, useCloseOnOwnerChange } from './shared';
+import { useAppActionsRefused } from './authority-state';
+import { appUnsettled, receiptsFor, settleReceipt } from './receipts';
+import type { Attempt, Release, DeploymentsDestinations } from './types';
+
+const DeploySetup = lazy(() => import('./WebAppDeploySetup').then(module => ({ default: module.WebAppDeploySetup })));
+
+export function WebAppDetail({ id, onClose, destinations }: {
+    id: number;
+    onClose: () => void;
+    destinations?: DeploymentsDestinations;
+}) {
+    const me = useMe(), s = useDeploymentOwner(), client = useQueryClient();
+    const [health, setHealth] = useState(''), [healthBusy, setHealthBusy] = useState(false);
+    const read = canReadWebApps(me.data) && isInteractive();
+    useCloseOnOwnerChange(s.key, onClose);
+    const summary = useQuery({ queryKey: ['deployments', s.key, id, 'summary'], queryFn: ({ signal }) => getSummary(s.owner, id, signal), enabled: read, retry: false });
+    const object = useQuery({ queryKey: ['deployments', s.key, id, 'default'], queryFn: ({ signal }) => getWebApp(s.owner, id, signal), enabled: read, retry: false });
+    const globalAuthority = backendGlobalCan(me.data, ['manage_webapp']) && backendGlobalCan(me.data, ['manage_dns', 'security']);
+    const member = useQuery({ queryKey: ['deployments', s.key, id, 'member', object.data?.group.id], queryFn: ({ signal }) => getMember(s.owner, object.data!.group.id, signal), enabled: read && !!object.data && !globalAuthority, retry: false });
+    const actionsRefused = useAppActionsRefused(s.owner, id);
+    const authority = object.data ? webAppAuthority(me.data, object.data, member.data) : { read: false, custom: false, release: false, workflow: false };
+    if (actionsRefused) { authority.custom = false; authority.release = false; authority.workflow = false; }
+    const app = summary.data, group = object.data?.group.id ?? 0;
+    const latest = useQuery({ queryKey: ['deployments', s.key, id, 'latest-attempt', app?.latest_deployment?.id], queryFn: ({ signal }) => getAttempt(s.owner, app!.latest_deployment!.id, id, signal), enabled: read && !!app?.latest_deployment && !app.latest_deployment.release, retry: false });
+    const refresh = async () => { await client.invalidateQueries({ queryKey: ['deployments', s.key] }); };
+    useEffect(() => {
+        const receipt = appUnsettled(s.owner, id);
+        if (authority.release && receipt?.deployment && receipt.release) void getDeployment(s.owner, receipt.deployment, id, receipt.release, s.signal).then(result => { if (result.terminal) settleReceipt(receipt); }).catch(() => {});
+    }, [s.key, id, summary.dataUpdatedAt, authority.release]);
+    const inspectAttempt = async (attempt: Attempt) => {
+        if (!object.data) return;
+        const { WebAppDeploymentDetail } = await import('./WebAppDeploymentDetail'); assertOwner(s.owner, s.signal);
+        await modal.open(close => <WebAppDeploymentDetail app={object.data!} attempt={attempt} detailedAllowed={authority.release} onChanged={() => void refresh()} onClose={() => close(null)}/>, { signal: s.signal, size: 'lg' });
+    };
+    const launchRollback = async (release: Release) => {
+        if (!object.data || !authority.custom) return;
+        const { WebAppRollbackDialog } = await import('./WebAppRollbackDialog'); assertOwner(s.owner, s.signal); let busy = false;
+        await modal.open(close => <WebAppRollbackDialog app={object.data!} release={release} onChanged={() => void refresh()} onClose={() => close(null)} onBusy={value => { busy = value; }}/>, { signal: s.signal, canDismiss: () => !busy, size: 'lg' });
+    };
+    const launchKey = async (action: 'mint' | 'rotate' | 'revoke') => {
+        if (!object.data || !authority.custom) return;
+        const { WebAppKeyDialog } = await import('./WebAppKeyDialog'); assertOwner(s.owner, s.signal); let busy = false;
+        await modal.open(close => <WebAppKeyDialog app={object.data!} action={action} onChanged={() => void refresh()} onClose={() => close(null)} onBusy={value => { busy = value; }}/>, { signal: s.signal, canDismiss: () => !busy });
+    };
+    const edit = async () => {
+        if (!object.data || !authority.release) return;
+        const { WebAppEditDialog } = await import('./WebAppEditDialog'); assertOwner(s.owner, s.signal); let busy = false;
+        await modal.open(close => <WebAppEditDialog app={object.data!} onChanged={() => void refresh()} onClose={() => close(null)} onBusy={value => { busy = value; }}/>, { signal: s.signal, canDismiss: () => !busy, size: 'md' });
+    };
+    const resume = async () => {
+        const { WebAppOnboardingDialog } = await import('./WebAppOnboardingDialog'); assertOwner(s.owner, s.signal); let busy = false;
+        await modal.open(close => <WebAppOnboardingDialog destinations={destinations} resume={receiptsFor(s.owner).find(receipt => receipt.kind === 'create' && receipt.app === id)} onChanged={() => void refresh()} onClose={() => close(null)} onBusy={value => { busy = value; }}/>, { signal: s.signal, canDismiss: () => !busy, size: 'lg' });
+    };
+    const checkHealth = async () => {
+        if (healthBusy || !group) return;
+        setHealthBusy(true);
+        try { const result = await getHealth(s.owner, id, group, s.signal); assertOwner(s.owner, s.signal); setHealth(`${result.status}: ${result.detail}${result.checked ? ` · ${datetime(result.checked)}` : ''}`); }
+        catch { if (!s.signal.aborted) setHealth('Observation unavailable. Reachability is unconfirmed.'); }
+        finally { if (!s.signal.aborted) setHealthBusy(false); }
+    };
+    if (!read || summary.isError || object.isError) return <div className="modal-pad admin-deployments"><h2 className="modal-title">WebApp unavailable</h2><ErrorNotice>App evidence could not be read. No app actions are available.</ErrorNotice><div className="modal-actions"><button className="btn" onClick={onClose}>Close</button>{read && <button className="btn" onClick={() => void refresh()}>Refresh app</button>}</div></div>;
+    if (!app || !object.data) return <div className="modal-pad admin-deployments"><p role="status">Loading WebApp…</p><button className="btn" onClick={onClose}>Close</button></div>;
+    const attempted = app.latest_deployment?.release ?? latest.data?.release;
+    const historyContext = { owner: s.owner, scopeKey: s.key, app: id };
+    const setupIncomplete = app.onboarding.status !== 'succeeded', pending = appUnsettled(s.owner, id);
+    return <div className="modal-pad admin-deployments deployment-dialog">
+        <header className="deployment-dialog-header"><div className="deployment-dialog-heading"><h2 className="modal-title">{app.webapp.display_name || app.webapp.slug}</h2><p className="dim">{app.address?.hostname || 'No public address'}</p></div><div className="deployment-row-actions"><button className="btn" disabled={summary.isFetching || object.isFetching} onClick={() => void refresh()}>Refresh app</button><button className="btn" aria-label="Close WebApp" onClick={onClose}><i className="bi bi-x-lg" aria-hidden="true"/></button></div></header>
+        <Tabs ariaLabel="WebApp tasks" items={[
+            { key: 'overview', label: 'Overview', panel: <div>
+                <div className="deployment-summary-grid"><section><h3>Desired version <DeploymentHelp label="desired version">The saved release pointer describes desired content. It does not prove that every node is serving it.</DeploymentHelp></h3><strong className="mono">{app.current_release?.version || 'No release'}</strong></section><section><h3>Latest deployment</h3>{app.latest_deployment ? <><strong className="mono">{attempted?.version || (latest.isError ? 'Version unavailable' : 'Loading version…')}</strong><p><Status value={app.latest_deployment.status}/></p><button className="btn" onClick={() => void inspectAttempt(latest.data ?? app.latest_deployment!)}>Inspect deployment</button></> : <p className="dim">No deployment attempts.</p>}</section></div>
+                {setupIncomplete && <section className="deployment-confirm"><h3>Setup {app.onboarding.status}</h3>{receiptsFor(s.owner).some(receipt => receipt.kind === 'create' && receipt.app === id) ? <button className="btn" onClick={() => void resume()}>Resume saved setup</button> : <p className="dim">No matching saved setup receipt is available in this browser. Existing resources are preserved.</p>}</section>}
+                {pending && <p role="status" className="text-warn">{pending.kind === 'create' ? 'Finish or cancel saved setup before starting another change.' : 'A submitted operation has an unconfirmed outcome. Inspect its deployment before starting another change.'}</p>}
+                <Facts rows={[["Environment", app.webapp.environment], ["HTTPS certificate", app.address?.certificate?.status || 'Not configured']]}/>
+            </div> },
+            { key: 'deployments', label: 'Deployments', panel: <HistoryContext.Provider value={historyContext}><ModelTable<Release | Attempt> endpoint="/api/edge/deployment" title="Deployment attempts" paramsMode="local" searchable={false} defaultParams={{ size: 15 }} fixedParams={{ webapp: id, graph: 'list' }} queryAdapter={AttemptRows} onRowClick={row => void inspectAttempt(row as Attempt)} columns={[{ key: 'release', label: 'Version', render: row => (row as Attempt).release?.version || 'Unobserved' }, { key: 'status', label: 'Outcome', render: row => <Status value={row.status}/> }, { key: 'created', label: 'Started', render: row => datetime(row.created) }]}/></HistoryContext.Provider> },
+            { key: 'releases', label: 'Releases', panel: <div className="deployment-release-history"><HistoryContext.Provider value={historyContext}><ModelTable<Release | Attempt> endpoint="/api/edge/release" title="Registered releases" paramsMode="local" searchable={false} defaultParams={{ size: 25 }} fixedParams={{ webapp: id, graph: 'list' }} queryAdapter={ReleaseRows} columns={[{ key: 'version', label: 'Version', render: row => <span className="mono">{(row as Release).version}{row.id === app.current_release?.id && <small className="dim"> · desired</small>}</span> }, { key: 'status', label: 'Verification', render: row => <Status value={row.status}/> }, { key: 'created', label: 'Registered', render: row => datetime(row.created) }, ...(authority.custom ? [{ key: 'action', label: '', render: (row: Release | Attempt) => rollbackEligible(row as Release, app.current_release) ? <button className="btn" disabled={!!appUnsettled(s.owner, id)} onClick={() => void launchRollback(row as Release)}>Roll back</button> : null }] : [])]}/></HistoryContext.Provider></div> },
+            ...(authority.workflow || authority.release || authority.custom ? [{ key: 'deploy', label: 'Deploy', panel: <Suspense fallback={<p role="status">Loading deployment methods…</p>}><DeploySetup app={object.data} workflowAllowed={authority.workflow} releaseAllowed={authority.release} keyAllowed={authority.custom} deploymentKey={app.deployment_key} onChanged={() => void refresh()} onKey={action => void launchKey(action)}/></Suspense> }] : []),
+            { key: 'settings', label: 'Settings', panel: <div><div className="deployment-toolbar"><h3>App profile</h3>{authority.release && <button className="btn" onClick={() => void edit()}>Edit app</button>}</div><Facts rows={[["Name", app.webapp.display_name], ["Environment", app.webapp.environment], ["Repository", app.webapp.repository || 'Not configured'], ["Branch", app.webapp.deployment_ref], ["Build output", app.webapp.build_output]]}/><h3>Address & HTTPS</h3><Facts rows={[["Address", app.address?.hostname || 'Not configured'], ["Certificate", app.address?.certificate?.status || 'Not configured'], ["Expires", app.address?.certificate?.not_after ? datetime(app.address.certificate.not_after) : 'Unknown']]}/><div className="deployment-row-actions">{(['domains', 'serving'] as const).map(key => { const path = destinations?.[key]; return path && /^\/[a-z0-9/_-]+$/i.test(path) ? <Link key={key} className="btn" to={path} onClick={onClose}>{key === 'domains' ? 'Open Domains' : 'Open Serving'}</Link> : null; })}{authority.read && <button className="btn" disabled={!group || healthBusy} onClick={() => void checkHealth()}>{healthBusy ? 'Checking HTTPS…' : 'Check HTTPS'}</button>}</div>{health && <p role="status">{health}</p>}{member.isError && !globalAuthority && <p className="dim">Workspace action authority could not be confirmed. Read-only app evidence remains available.</p>}</div> },
+        ]}/>
+    </div>;
+}
+
+const HistoryContext = createContext<{ owner: DeploymentOwner; scopeKey: string; app: number } | null>(null);
+function HistoryRows({ params, enabled, children, kind }: { kind: 'release' | 'deployment' } & ModelTableQueryAdapterProps<Release | Attempt>) {
+    const context = useContext(HistoryContext)!;
+    const query = useQuery({ queryKey: ['deployments', context.scopeKey, context.app, kind, params.start, params.size], queryFn: ({ signal }) => getHistory(context.owner, context.app, kind, Number(params.start) || 0, signal, Number(params.size) || (kind === 'release' ? 25 : 15)), enabled, retry: false });
+    return children({ data: query.data ? { rows: query.data.items, count: query.data.count } : undefined, status: query.status, isFetching: query.isFetching, error: query.error, refetch: query.refetch });
+}
+function ReleaseRows(props: ModelTableQueryAdapterProps<Release | Attempt>) { return <HistoryRows {...props} kind="release"/>; }
+function AttemptRows(props: ModelTableQueryAdapterProps<Release | Attempt>) { return <HistoryRows {...props} kind="deployment"/>; }

package/src/admin/deployments/WebAppEditDialog.tsx

@@ -0,0 +1,70 @@
+import { useRef, useState } from 'react';
+import { useMe } from '../../client/runtime';
+import { getWebApp, resolveAppAuthority, saveWebAppProfile } from './api';
+import { assertOwner, isInteractive } from './permissions';
+import { makeReceipt, receiptsFor, saveReceipt, settleReceipt } from './receipts';
+import { useDeploymentOwner } from './useDeploymentObservation';
+import { DeploymentHelp, ErrorNotice, useCloseOnOwnerChange, useWrite } from './shared';
+import type { WebAppObject } from './types';
+
+type Profile = { display_name: string; environment: string; github_repository: string; deployment_ref: string; build_output: string };
+const profile = (app: WebAppObject): Profile => ({ display_name: app.display_name, environment: app.environment, github_repository: app.repository, deployment_ref: app.deployment_ref, build_output: app.build_output });
+
+export function WebAppEditDialog({ app, onClose, onChanged, onBusy }: {
+    app: WebAppObject;
+    onClose: () => void;
+    onChanged: () => void;
+    onBusy: (busy: boolean) => void;
+}) {
+    const s = useDeploymentOwner(), me = useMe(), write = useWrite(s.owner, s.signal, onBusy);
+    const [base, setBase] = useState(() => profile(app)), [draft, setDraft] = useState(() => profile(app)), [notice, setNotice] = useState(''), [reviewedUnknown, setReviewedUnknown] = useState(''), [acknowledgement, setAcknowledgement] = useState('');
+    const form = useRef<HTMLFormElement>(null);
+    useCloseOnOwnerChange(s.key, onClose);
+    const unknownReceipts = () => receiptsFor(s.owner).filter(receipt => receipt.kind === 'profile' && receipt.app === app.id && receipt.submitted && !receipt.settled);
+    const unknownSignature = () => JSON.stringify(unknownReceipts().map(receipt => [receipt.key, receipt.operation, receipt.submittedAt ?? 0]));
+    const pending = unknownReceipts().length > 0;
+    const canAcknowledge = pending && reviewedUnknown === unknownSignature();
+    const dirty = JSON.stringify(base) !== JSON.stringify(draft);
+    const change = (key: keyof Profile, value: string) => { setNotice(''); setDraft(previous => ({ ...previous, [key]: value })); };
+    const reload = () => write.run(async () => {
+        const before = unknownSignature(); setReviewedUnknown(''); setAcknowledgement('');
+        const current = await getWebApp(s.owner, app.id, s.signal);
+        assertOwner(s.owner, s.signal);
+        if (current.group.id !== app.group.id) throw new Error('App ownership changed. Reopen the app before editing.');
+        setBase(profile(current)); setDraft(profile(current));
+        for (const receipt of receiptsFor(s.owner)) if (receipt.kind === 'profile' && receipt.app === app.id && !receipt.submitted && !receipt.settled) settleReceipt(receipt);
+        const after = unknownSignature();
+        if (unknownReceipts().length && before === after) setReviewedUnknown(after);
+        setNotice(unknownReceipts().length ? 'Current settings loaded. This read does not confirm that the earlier save has finished.' : 'Current saved settings loaded. Review them before making another change.'); onChanged();
+    });
+    const acknowledge = () => write.run(async () => {
+        if (!canAcknowledge || acknowledgement !== `${app.slug}/unknown-save` || reviewedUnknown !== unknownSignature()) return;
+        for (const receipt of unknownReceipts()) saveReceipt({ ...receipt, settled: true, acknowledged: true });
+        setReviewedUnknown(''); setAcknowledgement('');
+        setNotice('Unknown outcome acknowledged. The earlier save may still finish. Review and change the fields, then save separately if you wish to continue.'); onChanged();
+    });
+    const save = () => write.run(async () => {
+        if (!form.current?.reportValidity() || !dirty || pending || !isInteractive()) return;
+        const current = await getWebApp(s.owner, app.id, s.signal);
+        if (current.group.id !== app.group.id) throw new Error('App ownership changed. Reopen the app before editing.');
+        const authority = await resolveAppAuthority(s.owner, me.data, current, 'release', s.signal);
+        if (!authority.release) throw new Error('App edit authority is unavailable.');
+        const fresh = profile(current), patch = { ...draft };
+        if (Object.keys(patch).some(key => fresh[key as keyof Profile] !== base[key as keyof Profile])) throw new Error('Saved settings changed. Reload saved settings and review before saving.');
+        setReviewedUnknown(''); setAcknowledgement('');
+        const receipt = makeReceipt(s.owner, 'profile', `${app.id}:profile`, app.id, 'profile');
+        await saveWebAppProfile(s.owner, receipt, current, patch, s.signal);
+        const observed = await getWebApp(s.owner, app.id, s.signal); assertOwner(s.owner, s.signal);
+        if (observed.group.id !== app.group.id) throw new Error('Saved app ownership changed. Reopen the app.');
+        const saved = profile(observed);
+        if (Object.entries(patch).some(([key, value]) => saved[key as keyof Profile] !== value)) throw new Error('Saved settings do not match this change. Reload saved settings to review.');
+        settleReceipt(receipt); onChanged(); onClose();
+    });
+    return <form ref={form} className="modal-pad admin-deployments" onSubmit={event => { event.preventDefault(); void save(); }}><h2 className="modal-title">Edit {app.display_name || app.slug}</h2>
+        {pending && <p role="status" className="text-warn">A previous save has an unconfirmed outcome. Reload saved settings to review current values. No save will be repeated automatically.</p>}
+        <fieldset disabled={write.busy || pending} className="deployment-fields"><label>Name<input maxLength={120} value={draft.display_name} onChange={event => change('display_name', event.target.value)}/></label><label>Environment<select value={draft.environment} onChange={event => change('environment', event.target.value)}>{!['production', 'staging', 'preview', 'development'].includes(draft.environment) && <option value={draft.environment} disabled>{draft.environment || 'Unknown environment'}</option>}{['production', 'staging', 'preview', 'development'].map(value => <option value={value} key={value}>{value[0]!.toUpperCase() + value.slice(1)}</option>)}</select></label><label>GitHub repository<input maxLength={255} placeholder="owner/repository" value={draft.github_repository} onChange={event => change('github_repository', event.target.value)}/></label><div className="deployment-form"><label>Branch<input required maxLength={255} value={draft.deployment_ref} onChange={event => change('deployment_ref', event.target.value)}/></label><label><span className="field-label">Build output <DeploymentHelp label="build output">The directory CI builds, such as dist. Changing this profile does not deploy a release.</DeploymentHelp></span><input required maxLength={255} value={draft.build_output} onChange={event => change('build_output', event.target.value)}/></label></div></fieldset>
+        {canAcknowledge && <section className="deployment-confirm"><p className="text-warn">The earlier save may still finish and overwrite a new change.</p><label>Type {app.slug}/unknown-save<input aria-label="Unknown save acknowledgement" value={acknowledgement} disabled={write.busy} onChange={event => setAcknowledgement(event.target.value)}/></label><button type="button" className="btn" disabled={write.busy || acknowledgement !== `${app.slug}/unknown-save`} onClick={() => void acknowledge()}>Acknowledge unknown save</button></section>}
+        {write.error && <ErrorNotice>{write.error}</ErrorNotice>}{notice && <p role="status">{notice}</p>}
+        <div className="modal-actions"><button type="button" className="btn" disabled={write.busy} onClick={onClose}>Cancel</button><button type="button" className="btn" disabled={write.busy} onClick={() => void reload()}>Reload saved settings</button><button type="submit" className="btn btn-primary" disabled={write.busy || pending || !dirty}>Save changes</button></div>
+    </form>;
+}

package/src/admin/deployments/WebAppKeyDialog.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+import { useMe } from '../../client/runtime';
+import { changeKey, getKeyStatus, resolveAppAuthority, getWebApp } from './api';
+import { isInteractive } from './permissions';
+import { makeReceipt, settleReceipt } from './receipts';
+import { useDeploymentOwner } from './useDeploymentObservation';
+import { ErrorNotice, useWrite } from './shared';
+import type { WebAppObject } from './types';
+export function WebAppKeyDialog({ app, action, onClose, onBusy, onChanged }: {
+    app: WebAppObject;
+    action: 'mint' | 'rotate' | 'revoke';
+    onClose: () => void;
+    onBusy: (v: boolean) => void;
+    onChanged: () => void;
+}) {
+    const s = useDeploymentOwner(), me = useMe(), w = useWrite(s.owner, s.signal, onBusy), secret = useRef<string | null>(null);
+    const [reveal, setReveal] = useState(false), [done, setDone] = useState(false), [unavailable, setUnavailable] = useState(false), [confirmation, setConfirmation] = useState(''), [copied, setCopied] = useState(false);
+    useEffect(() => () => { secret.current = null; }, [s.key]);
+    const execute = () => w.run(async () => { const object = await getWebApp(s.owner, app.id, s.signal); if (object.group.id !== app.group.id)
+        throw new Error('App ownership changed'); const authority = await resolveAppAuthority(s.owner, me.data, object, 'custom', s.signal); if (!isInteractive() || !authority.custom)
+        throw new Error('Exact app credential authority is unavailable'); await getKeyStatus(s.owner, app.id, app.group.id, s.signal); const r = makeReceipt(s.owner, 'key', `${app.id}:${action}`, app.id, action); const result = await changeKey(s.owner, r, app.id, app.group.id, action, s.signal); secret.current = result.token; setUnavailable(action !== 'revoke' && !result.token); setDone(true); settleReceipt(r); onChanged(); });
+    const close = () => { if (w.busy)
+        return; secret.current = null; onClose(); };
+    return <div className="modal-pad admin-deployments"><h2 className="modal-title">{action === 'mint' ? 'Create' : action === 'rotate' ? 'Rotate' : 'Revoke'} MOJO_DEPLOY_KEY</h2><p className="modal-message">{app.display_name || app.slug}: {action === 'revoke' ? 'Future CI deployments lose this credential. Existing serving content stays.' : 'The key is delivered once. Store it in your CI secrets as MOJO_DEPLOY_KEY. Rotation requires updating CI before its next deployment.'}</p>{!done ? <label>Type {app.slug} to confirm<input value={confirmation} disabled={w.busy} onChange={e => setConfirmation(e.target.value)}/></label> : unavailable ? <p role="status">Secret unavailable. This receipt was already delivered or its response was lost. No token can be recovered from metadata. Close and explicitly start a new rotation.</p> : action === 'revoke' ? <p role="status">Revocation receipt observed. The serving release remains independent.</p> : <><p>The value clears when this dialog closes.</p><input aria-label="One-time deployment key" type={reveal ? 'text' : 'password'} value={secret.current ?? ''} readOnly autoComplete="off"/><button className="btn" onClick={() => setReveal(v => !v)}>{reveal ? 'Hide' : 'Reveal once'}</button><button className="btn" onClick={() => void navigator.clipboard.writeText(secret.current ?? '').then(() => setCopied(true)).catch(() => setCopied(false))}>{copied ? 'Copied' : 'Copy key'}</button></>}{w.error && <ErrorNotice>{w.error}</ErrorNotice>}<div className="modal-actions"><button className="btn" disabled={w.busy} onClick={close}>{done ? 'I saved it · Close' : 'Cancel'}</button>{!done && <button className="btn btn-primary" disabled={w.busy || confirmation !== app.slug} onClick={() => void execute()}>Confirm {action}</button>}</div></div>;
+}

package/src/admin/deployments/WebAppOnboardingDialog.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Tabs } from '../../ui/Tabs';
+import { modal } from '../../ui/modal';
+import { Link } from 'react-router-dom';
+import { getBootstrap, getOperation, getOptions, precheckAddress, createApp, chooseOnboarding, cancelOnboarding } from './api';
+import { canReadBootstrap, canReadWebApps, canOnboard, isInteractive } from './permissions';
+import { useMe } from '../../client/runtime';
+import { useDeploymentObservation, useDeploymentOwner } from './useDeploymentObservation';
+import { managedChoice, onboardingGeneration, onboardingPollable, onboardingTerminal } from './onboarding-state';
+import { makeReceipt, receiptsFor, saveReceipt, settleReceipt, type ActionReceipt } from './receipts';
+import { ErrorNotice, Facts, Status, useWrite } from './shared';
+import type { AddressPrecheck, Bootstrap, DeploymentsDestinations, OnboardingOperation } from './types';
+
+export function WebAppOnboardingDialog({ bootstrap, resume, destinations, onClose, onBusy, onChanged }: {
+    bootstrap?: Bootstrap;
+    resume?: ActionReceipt;
+    destinations?: DeploymentsDestinations;
+    onClose: () => void;
+    onBusy: (v: boolean) => void;
+    onChanged?: () => void;
+}) {
+    const s = useDeploymentOwner(), me = useMe(), w = useWrite(s.owner, s.signal, onBusy);
+    const initial = resume ?? receiptsFor(s.owner).find(r => r.kind === 'create' && !r.settled);
+    const [receipt, setReceipt] = useState<ActionReceipt | undefined>(initial);
+    const [createTab, setCreateTab] = useState('app');
+    const [operation, setOperation] = useState<OnboardingOperation | null>(null);
+    const [workspace, setWorkspace] = useState(String(initial?.profile?.group ?? bootstrap?.groups[0]?.id ?? 'new'));
+    const [name, setName] = useState(initial?.profile?.display_name ?? ''), [slug, setSlug] = useState(initial?.profile?.slug ?? '');
+    const [address, setAddress] = useState(''), [checked, setChecked] = useState<AddressPrecheck | null>(null);
+    const [repository, setRepository] = useState(initial?.profile?.github_repository ?? '');
+    const [ref, setRef] = useState(initial?.profile?.deployment_ref ?? 'main'), [output, setOutput] = useState(initial?.profile?.build_output ?? 'dist');
+    const [githubMode, setGithubMode] = useState<'skip' | 'verify' | 'attest'>('skip');
+    const [environment, setEnvironment] = useState(initial?.profile?.environment ?? 'production');
+    const intent = workspace === 'new' ? { group_intent: 'new' as const } : { group: Number(workspace) };
+    const eligible = !!bootstrap && (workspace === 'new' ? bootstrap.can_create_webapp_group : bootstrap.groups.some(g => g.id === Number(workspace)));
+    const observer = useDeploymentObservation(s.owner, receipt?.operation ?? null,
+        signal => getOperation(s.owner, receipt!.operation, signal), onboardingTerminal, onboardingPollable);
+    const latest = observer.value ?? operation;
+    const generation = latest ? onboardingGeneration(latest) : '';
+    const choiceSent = useRef(new Set<string>());
+    // The created operation, not a bootstrap guess or local group intent, owns continuation scope.
+    const resolvedIntent = latest?.group.id ? { group: latest.group.id } : intent;
+    const options = useQuery({
+        queryKey: ['deployments', s.key, 'onboarding-options', latest?.group.id ?? workspace],
+        queryFn: ({ signal }) => getOptions(s.owner, resolvedIntent, signal),
+        enabled: isInteractive() && (receipt ? !!latest?.group.id : eligible), retry: false,
+    });
+    const acceptOperation = (value: OnboardingOperation, current: ActionReceipt) => {
+        if (current.onboardingGroup && current.onboardingGroup !== value.group.id)
+            throw new Error('The operation workspace identity changed. Observe the saved operation again.');
+        const next = saveReceipt({ ...current, onboardingGroup: value.group.id,
+            app: value.resources.webapp ?? current.app, settled: onboardingTerminal(value) });
+        setReceipt(next); setOperation(value);
+    };
+    useEffect(() => {
+        if (latest && receipt && (!receipt.onboardingGroup || receipt.app !== latest.resources.webapp || receipt.settled !== onboardingTerminal(latest)))
+            acceptOperation(latest, receipt);
+    }, [generation, latest?.status]);
+    const changed = useRef('');
+    useEffect(() => {
+        if (!latest?.resources.webapp) return;
+        const next = `${latest.resources.webapp}:${onboardingTerminal(latest) ? latest.status : 'created'}`;
+        if (changed.current !== next) { changed.current = next; onChanged?.(); }
+    }, [latest?.resources.webapp, latest?.status, onChanged]);
+    const setupReady = !!options.data?.destination && !!options.data.buckets.length;
+    const newIntent = !receipt && workspace === 'new';
+    const addressReady = checked?.verdict === 'ready' && !!checked.domain;
+    const savedAddress = receipt?.address;
+    const addressChoiceReady = addressReady || (!address.trim() && !!savedAddress);
+    const savedHostname = savedAddress && options.data?.apps_domain?.id === savedAddress.domain ? `${savedAddress.label ? `${savedAddress.label}.` : ''}${options.data.apps_domain.name}` : '';
+    const validSlug = /^[a-z0-9][a-z0-9-]{0,63}$/.test(slug);
+    const creationReady = setupReady && !!name.trim() && validSlug && (newIntent || addressReady);
+    const reviewApp = createTab === 'build' && !creationReady;
+    const domainsPath = destinations?.domains;
+    const domainLink = domainsPath && /^\/[a-z0-9/_-]+$/i.test(domainsPath) && canReadWebApps(me.data)
+        ? <Link className="btn" to={domainsPath} onClick={onClose}>Open Domains to configure this workspace</Link> : null;
+    const verifyAddress = () => w.run(async () => {
+        const value = await precheckAddress(s.owner, resolvedIntent,
+            address || `${slug}.${options.data?.apps_domain?.name ?? ''}`, s.signal);
+        setChecked(value);
+        if (receipt && value.verdict === 'ready' && value.domain) {
+            const next = saveReceipt({ ...receipt, address: { domain: value.domain.id, label: value.label } });
+            setReceipt(next);
+        }
+    });
+    const create = () => w.run(async () => {
+        if (!bootstrap || !eligible || !setupReady || !validSlug || (!newIntent && !addressReady)) return;
+        if (repository && !/^[a-z0-9_.-]+\/[a-z0-9_.-]+$/i.test(repository)) throw new Error('Use a GitHub OWNER/REPOSITORY identifier');
+        if (!/^[a-z0-9_./-]{1,255}$/i.test(ref) || ref.includes('..')) throw new Error('Use a valid branch or tag');
+        if (!/^[a-z0-9_./-]{1,255}$/i.test(output) || output.startsWith('/') || output.split('/').some(p => !p || p === '..' || p === '.'))
+            throw new Error('Use a relative build output directory');
+        const fresh = await getBootstrap(s.owner, s.signal);
+        if (!canOnboard(fresh) || (workspace !== 'new' && !fresh.groups.some(g => g.id === Number(workspace))) ||
+            (workspace === 'new' && !fresh.can_create_webapp_group)) throw new Error('Workspace eligibility changed');
+        const action = makeReceipt(s.owner, 'create', crypto.randomUUID());
+        const profile = { operation_id: action.operation, ...intent, slug, display_name: name, environment,
+            bucket: options.data!.buckets[0]!, github_repository: repository, deployment_ref: ref, build_output: output };
+        const frozen = saveReceipt({ ...action, profile,
+            ...(!newIntent && checked?.domain ? { address: { domain: checked.domain.id, label: checked.label } } : {}) });
+        setReceipt(frozen);
+        acceptOperation(await createApp(s.owner, frozen, profile, s.signal), frozen);
+        observer.refresh();
+    });
+    const retryCreate = () => w.run(async () => {
+        if (!receipt?.profile) return;
+        try { acceptOperation(await getOperation(s.owner, receipt.operation, s.signal), receipt); observer.refresh(); }
+        catch (error) {
+            if (!(error && typeof error === 'object' && 'status' in error && error.status === 404))
+                throw new Error('The operation could not be observed. Refresh before retrying create.');
+            acceptOperation(await createApp(s.owner, receipt, receipt.profile, s.signal), receipt); observer.refresh();
+        }
+    });
+    const choose = () => w.run(async () => {
+        if (!latest || !receipt) return;
+        const fresh = await getOperation(s.owner, latest.operation_id, s.signal);
+        acceptOperation(fresh, receipt);
+        if (onboardingGeneration(fresh) !== generation) throw new Error('Setup changed. Review the observed cursor and choose again.');
+        const selected = addressReady && checked?.domain ? { domain: checked.domain.id, label: checked.label } : !address.trim() ? receipt.address : undefined;
+        let choice = managedChoice(fresh, selected?.domain ?? 0, selected?.label ?? slug);
+        if (fresh.cursor === 'github' && githubMode !== 'skip') {
+            if (!repository.trim()) throw new Error('Enter an OWNER/REPOSITORY before requesting verification');
+            choice = { repository: repository.trim(), ref, output, ...(githubMode === 'attest' ? { attest_unavailable: true } : {}) };
+        }
+        if (!choice) throw new Error('Configure a domain for the operation workspace, refresh options, then check the public address.');
+        if (choiceSent.current.has(generation)) throw new Error('That observed choice was already submitted. Refresh the server operation.');
+        choiceSent.current.add(generation);
+        const action = makeReceipt(s.owner, 'create', `${generation}:choice`);
+        try { acceptOperation(await chooseOnboarding(s.owner, action, fresh, choice, s.signal), receipt); settleReceipt(action); }
+        finally { observer.refresh(); }
+    });
+    const cancel = () => w.run(async () => {
+        if (!latest || !receipt) return;
+        const confirmed = await modal.open<boolean>(close => <div className="modal-pad"><h2 className="modal-title">Cancel server setup?</h2><p className="modal-message">Stop setup for {latest.profile.display_name || latest.profile.slug}. Resources already created may remain.</p><div className="modal-actions"><button className="btn" onClick={() => close(false)}>Keep setup</button><button className="btn btn-danger" onClick={() => close(true)}>Cancel setup</button></div></div>, { signal: s.signal, size: 'md' });
+        if (!confirmed) return;
+        const action = makeReceipt(s.owner, 'create', `${latest.operation_id}:cancel`);
+        acceptOperation(await cancelOnboarding(s.owner, action, latest.operation_id, s.signal), receipt);
+        settleReceipt(action); observer.refresh();
+    });
+    if (!isInteractive() || (!receipt && !canReadBootstrap(me.data)))
+        return <div className="modal-pad"><p>Interactive setup authority unavailable.</p><button className="btn" onClick={onClose}>Close</button></div>;
+    const addressFields = <><label>Public address<input value={address} disabled={w.busy} onChange={e => { setAddress(e.target.value); setChecked(null); }}
+        placeholder={options.data?.apps_domain ? `${slug || 'my-app'}.${options.data.apps_domain.name}` : 'An address under this workspace’s configured domain'} /></label>
+        <button className="btn" disabled={w.busy || !setupReady || (!address && !options.data?.apps_domain) || !validSlug} onClick={() => void verifyAddress()}>Check public address</button>
+        {checked && <p role="status">{checked.verdict}: {checked.hostname} {checked.reason}</p>}</>;
+    const setupDetails = () => { void modal.open(close => <div className="modal-pad admin-deployments"><h2 className="modal-title">{receipt ? 'Setup details' : 'Deployment destination'}</h2>{receipt ? <><Facts rows={[
+        ['Operation', receipt.operation], ['Workspace', latest ? `${latest.group.name} (#${latest.group.id})` : 'Not observed'], ['Revision', latest?.revision], ['Server step', latest?.cursor], ['Observation', observer.state], ['Last observed', observer.observedAt ? new Date(observer.observedAt).toLocaleTimeString() : 'Not observed'],
+    ]}/>{latest?.activity.length ? <><h3>Activity</h3>{latest.activity.map((a, i) => <p key={i}>{a.message}</p>)}</> : <p>No activity observed.</p>}</> : <Facts rows={[
+        ['Environment', environment], ['Release bucket', options.data?.buckets[0]], ['Managed domain', options.data?.apps_domain?.name],
+    ]}/>}<div className="modal-actions"><button className="btn" onClick={() => close(null)}>Close</button></div></div>, { signal: s.signal, size: 'md' }); };
+    const steps = [{ key: 'app', label: 'App' }, { key: 'address', label: 'Address' }, { key: 'github', label: 'Repository' }, { key: 'verify', label: 'HTTPS' }];
+    const currentStep = steps.findIndex(step => step.key === latest?.cursor);
+    return <div className="modal-pad admin-deployments">
+        <h2 className="modal-title">{receipt ? latest?.profile.display_name || 'WebApp setup' : 'New WebApp'}</h2>
+        <p className="modal-message">You can close and resume setup at any time.</p>
+        {!receipt ? <>
+            <Tabs ariaLabel="New WebApp" activeKey={createTab} onActiveKeyChange={setCreateTab} items={[
+                { key: 'app', label: 'App', panel: <><div className="deployment-form">
+                    <label>Workspace<select value={workspace} disabled={w.busy} onChange={e => { setWorkspace(e.target.value); setChecked(null); }}>
+                        {bootstrap?.groups.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}{bootstrap?.can_create_webapp_group && <option value="new">New workspace</option>}
+                    </select></label>
+                    <label>Name<input value={name} maxLength={120} disabled={w.busy} onChange={e => setName(e.target.value)} /></label>
+                    <label>App label<input value={slug} maxLength={64} disabled={w.busy} onChange={e => { setSlug(e.target.value); setChecked(null); }} placeholder="my-app" /></label>
+                    {!newIntent && addressFields}
+                </div>{newIntent && <p className="dim">Create the app first, then connect a domain to its new workspace and resume address setup.</p>}</> },
+                { key: 'build', label: 'Build options', panel: <div className="deployment-form">
+                    <label>GitHub OWNER/REPOSITORY (optional)<input value={repository} disabled={w.busy} onChange={e => setRepository(e.target.value)} /></label>
+                    <label>Branch<input value={ref} disabled={w.busy} onChange={e => setRef(e.target.value)} /></label>
+                    <label>Build output<input value={output} disabled={w.busy} onChange={e => setOutput(e.target.value)} /></label>
+                    <label>Environment<select value={environment} disabled={w.busy} onChange={e => setEnvironment(e.target.value)}>{(options.data?.environments ?? ['production']).map(e => <option key={e}>{e}</option>)}</select></label>
+                </div> },
+            ]}/>
+            {options.isPending ? <p>Resolving deployment destination…</p> : options.isError ? <ErrorNotice>Setup options unavailable.</ErrorNotice> :
+                !setupReady ? <ErrorNotice>{options.data?.destination_error || 'No allowed release bucket. Complete installation setup before creating an app.'}</ErrorNotice> :
+                    <button className="btn" onClick={setupDetails}><i className="bi bi-info-circle" aria-hidden="true"/> Deployment destination</button>}
+        </> : <>
+            <ol className="deployment-setup-progress" aria-label="Setup progress">{steps.map((step, index) => <li key={step.key} aria-current={index === currentStep && !!latest && !onboardingTerminal(latest) ? 'step' : undefined} className={latest?.status === 'succeeded' || index < currentStep ? 'is-complete' : index === currentStep ? 'is-current' : ''}>{step.label}</li>)}</ol>
+            <div className="deployment-toolbar"><h3>{latest && onboardingTerminal(latest) ? latest.status === 'succeeded' ? 'Setup complete' : 'Setup stopped' : steps[currentStep]?.label || 'Observe saved setup'}</h3><Status value={latest?.status ?? 'unknown'}/></div>
+            {latest?.last_error && <ErrorNotice>{latest.last_error}</ErrorNotice>}
+            {(observer.state === 'error' || observer.state === 'stopped' && (!latest || onboardingPollable(latest))) && <p role="status" className="text-warn">Observation unavailable or stopped; outcome is unconfirmed. Refresh to check server setup.</p>}
+            {latest?.cursor === 'address' && !onboardingTerminal(latest) && <section className="deployment-stack">
+                <p>Public address for {latest.group.name}.</p>
+                {savedAddress && !address.trim() && <p role="status">A checked address is saved{savedHostname && <>: <code>{savedHostname}</code></>}. Continue to use it, or check a replacement.</p>}
+                {savedAddress && !!address.trim() && !addressReady && <p role="status" className="dim">Check the replacement address before continuing.</p>}
+                {!options.data?.apps_domain && <p role="status">{options.data?.apps_domain_error || 'No managed apps domain was observed.'} Configure or connect a domain for {latest.group.name}, then refresh and check the public address.</p>}
+                {domainLink}
+                <div><button className="btn" disabled={w.busy || options.isFetching} onClick={() => void options.refetch()}>Refresh workspace address options</button></div>
+                {addressFields}
+            </section>}
+            {latest?.cursor === 'github' && !onboardingTerminal(latest) && <section className="deployment-stack">
+                {latest.evidence.github.status && <p role="status">Repository verification: {latest.evidence.github.status}{latest.evidence.github.reason && ` · ${latest.evidence.github.reason}`}</p>}
+                <label>GitHub verification<select value={githubMode} disabled={w.busy} onChange={e => setGithubMode(e.target.value as 'skip' | 'verify' | 'attest')}>
+                    <option value="skip">Skip optional repository verification</option><option value="verify">Verify the submitted repository</option>
+                    {latest.evidence.github.status === 'unavailable' && <option value="attest">I attest this repository when verification is unavailable</option>}
+                </select>{githubMode !== 'skip' && <input aria-label="Repository to verify" value={repository} disabled={w.busy} onChange={e => setRepository(e.target.value)} />}</label>
+                {latest.evidence.github.status === 'unavailable' && <p className="dim">Unavailable verification does not attest repository ownership.</p>}
+            </section>}
+            {latest?.cursor === 'app' && !onboardingTerminal(latest) && <p>Continue to create the app in {latest.group.name}.</p>}
+            {latest?.cursor === 'verify' && !onboardingTerminal(latest) && <p>Continue to check HTTPS for the configured public address.</p>}
+            {latest?.status === 'waiting' && !latest.next_attempt_at && <p className="dim">Waiting for your choice. Automatic observation has paused.</p>}
+            {!latest && <p>Delivery may be uncertain. Read the saved operation before explicitly retrying its identical create receipt.</p>}
+            {latest && currentStep < 0 && !onboardingTerminal(latest) && <p className="text-warn">This setup step is not supported here. Refresh or inspect Setup details before continuing.</p>}
+            <button className="btn" onClick={setupDetails}><i className="bi bi-info-circle" aria-hidden="true"/> Setup details</button>
+        </>}
+        {!receipt && reviewApp && <p role="status" className="dim">{!name.trim() || !validSlug ? 'Add a name and valid app label on App before creating this WebApp.' : !newIntent && !addressReady ? 'Check the public address on App before creating this WebApp.' : 'Review the app and its deployment destination before creating this WebApp.'}</p>}
+        {w.error && <ErrorNotice>{w.error}</ErrorNotice>}
+        <div className="modal-actions"><button className="btn" disabled={w.busy} onClick={onClose}>Close</button>
+            {receipt ? <><button className="btn" disabled={w.busy} onClick={observer.refresh}>Refresh / Resume observation</button>
+                {!latest && receipt.profile && <button className="btn" disabled={w.busy} onClick={() => void retryCreate()}>Reconcile / retry same create</button>}
+                {latest && !onboardingTerminal(latest) && <><button className="btn" disabled={w.busy} onClick={() => void cancel()}>Cancel server setup</button>
+                    <button className="btn btn-primary" disabled={w.busy || choiceSent.current.has(generation) || !['app', 'address', 'github', 'verify'].includes(latest.cursor) || (latest.cursor === 'address' && !addressChoiceReady)} onClick={() => void choose()}>
+                        {latest.cursor === 'github' ? (githubMode === 'skip' ? 'Skip GitHub verification' : githubMode === 'attest' ? 'Attest unavailable verification' : 'Verify repository') : latest.cursor === 'address' ? 'Apply address' : latest.cursor === 'verify' ? 'Check HTTPS' : 'Create app'}
+                    </button></>}
+            </> : reviewApp ? <button className="btn btn-primary" disabled={w.busy} onClick={() => setCreateTab('app')}>Review app</button> : <button className="btn btn-primary" disabled={w.busy || !creationReady} onClick={() => void create()}>Create WebApp</button>}
+        </div>
+    </div>;
+}