portal-mojo 0.2.20 → 0.2.21

package/src/admin/deployments/ApiDeploymentDetail.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMe } from '../../client/runtime';
+import { Tabs } from '../../ui/Tabs';
+import { datetime } from '../../ui/format';
+import { modal } from '../../ui/modal';
+import { canReadApi, canRecoverApi, isInteractive, assertOwner } from './permissions';
+import { getPlatform, recoverApi } from './api';
+import { apiActions, platformProof } from './deployment-state';
+import { makeReceipt, settleReceipt } from './receipts';
+import { useDeploymentObservation, useDeploymentOwner } from './useDeploymentObservation';
+import { DeploymentHelp, ErrorNotice, Facts, Status, useCloseOnOwnerChange, useWrite } from './shared';
+import type { ApiAction } from './types';
+export function ApiDeploymentDetail({ id, onClose }: {
+    id: string;
+    onClose: () => void;
+}) {
+    const me = useMe(), s = useDeploymentOwner(), queryClient = useQueryClient();
+    const [tracking, setTracking] = useState<string | null>(null);
+    useCloseOnOwnerChange(s.key, onClose);
+    const q = useQuery({
+        queryKey: ['deployments', s.key, 'api-detail', id], queryFn: ({ signal }) => getPlatform(s.owner, signal), enabled: canReadApi(me.data) && isInteractive(), retry: false
+    });
+    const selected = q.data?.deployments.data?.items.find(x => x.id === id);
+    const identity = tracking ?? (selected && ['requested', 'queued', 'canary', 'fleet', 'deploying'].includes(selected.status) ? id : null);
+    const observed = useDeploymentObservation(s.owner, identity, async (signal) => { const p = await getPlatform(s.owner, signal); const a = p.deployments.data?.items.find(x => x.id === identity); if (!a)
+        throw new Error('Tracked deployment not observed'); return a; }, a => ['converged', 'failed', 'superseded', 'verified', 'partial', 'unknown'].includes(a.status));
+    const row = observed.value ?? selected, latest = q.data?.deployments.data?.items[0]?.id === row?.id, can = canRecoverApi(me.data) && isInteractive();
+    useEffect(() => { if (observed.state === 'terminal') void queryClient.invalidateQueries({ queryKey: ['deployments', s.key] }); }, [observed.state, observed.value?.id, observed.value?.status, queryClient, s.key]);
+    const openRecovery = async (action: ApiAction) => { let busy = false; await modal.open(close => <ApiRecoveryDialog id={row!.id} action={action} onBusy={value => { busy = value; }} onClose={() => close(null)} onResult={result => { setTracking(result); void q.refetch(); }}/>, { signal: s.signal, canDismiss: () => !busy }); };
+    if (!canReadApi(me.data) || !isInteractive())
+        return <div className="modal-pad"><p>API authority is no longer available.</p><button className="btn" onClick={onClose}>Close</button></div>;
+    return <div className="modal-pad admin-deployments deployment-dialog"><header className="deployment-dialog-header"><div><h2 className="modal-title">API deployment {row && <DeploymentHelp label="API attempt information"><Facts rows={[["Attempt", row.id], ["Source", row.source], ["Actor", row.actor], ["Retry of", row.retry_of]]}/><p>Reported success and restart proof are separate. Recovery applies to the latest attempt and does not accept an arbitrary commit.</p></DeploymentHelp>}</h2><p className="dim mono">{row?.sha.slice(0, 12) || 'Attempt details'}</p></div><div className="deployment-actions"><button className="btn" disabled={q.isFetching} onClick={() => { void q.refetch(); observed.refresh(); }}>Refresh evidence</button><button className="btn" aria-label="Close API deployment" onClick={onClose}>Close</button></div></header>
+        {q.isError && <ErrorNotice>Deployment observation unavailable. {q.data ? 'Previous evidence is shown.' : 'Refresh to try again.'}</ErrorNotice>}
+        {row && <div className="deployment-toolbar"><Status value={row.status}/>{can && latest && <div className="deployment-actions">{apiActions(row.status).map(action => <button key={action} className="btn" onClick={() => void openRecovery(action)}>{action === 'retry' ? 'Retry same commit' : action === 'verify' ? 'Verify nodes' : 'Converge fleet'}</button>)}</div>}</div>}
+        <Tabs ariaLabel="API deployment details" items={[
+            {key:'overview',label:'Overview',panel:<div className="deployment-tab-content">{row ? <><Facts rows={[["Commit", <code>{row.sha}</code>], ['Evidence', platformProof(row)], ['Started', row.started ? datetime(row.started) : row.created ? datetime(row.created) : 'Time unavailable'], ['Finished', row.finished ? datetime(row.finished) : 'Not finished']]}/>{row.detail && <p>{row.detail}</p>}</> : <p>{q.isPending ? 'Loading attempt…' : q.data?.deployments.data ? 'Attempt unavailable in the latest 50 records.' : 'The collector did not return deployment evidence.'}</p>}</div>},
+            {key:'nodes',label:'Nodes',panel:<div className="deployment-tab-content">{row?.node_evidence.length ? row.node_evidence.map((n,i)=><article className="deployment-evidence" key={i}><strong>{n.runner}</strong><Status value={n.status}/>{n.sha && <p className="mono">{n.sha}</p>}{n.detail && <p>{n.detail}</p>}</article>) : <p>No node proof observed.</p>}</div>},
+            {key:'activity',label:'Activity',panel:<div className="deployment-tab-content">{row?.diagnosis.length ? <><h3>Failure diagnosis</h3>{row.diagnosis.map((d,i)=><article className="deployment-evidence" key={i}><strong>{d.runner}</strong><Status value={d.status}/><p>{d.detail}</p>{d.stderr_tail && <pre className="deployment-code">{d.stderr_tail}</pre>}</article>)}</> : <p>No failure diagnosis recorded.</p>}{!!row?.transitions.length && <><h3>Activity</h3>{row.transitions.map((t,i)=><p key={i}>{t.runner} · {t.status}{t.detail && ` · ${t.detail}`}</p>)}</>}</div>}
+        ]}/>
+        {identity && <p className="dim" role="status">{observed.state === 'observing' ? 'Observing this attempt…' : observed.state === 'terminal' ? 'Observation complete.' : 'Observation stopped; outcome may be unknown. Refresh to observe again.'}</p>}
+    </div>;
+}
+function ApiRecoveryDialog({ id, action, onClose, onBusy, onResult }: {
+    id: string;
+    action: ApiAction;
+    onClose: () => void;
+    onBusy: (v: boolean) => void;
+    onResult: (id: string) => void;
+}) {
+    const me = useMe(), s = useDeploymentOwner(), w = useWrite(s.owner, s.signal, onBusy);
+    const execute = () => w.run(async () => { if (!canRecoverApi(me.data) || !isInteractive())
+        throw new Error('API recovery authority unavailable'); const fresh = await getPlatform(s.owner, s.signal), source = fresh.deployments.data?.items.find(x => x.id === id); if (!source || !apiActions(source.status).includes(action) || fresh.deployments.data?.items[0]?.id !== id)
+        throw new Error('Attempt was replaced or changed. Refresh and review again.'); assertOwner(s.owner, s.signal); const receipt = makeReceipt(s.owner, 'api', `${id}:${action}`, 0, id); const result = await recoverApi(s.owner, receipt, id, action, s.signal); if (action === 'retry' && result.sha !== source.sha)
+        throw new Error('Retry did not preserve source SHA'); settleReceipt(receipt); onResult(result.id); onClose(); });
+    const label = { retry: 'Retry same commit', verify: 'Verify nodes', converge: 'Converge fleet' }[action];
+    return <div className="modal-pad admin-deployments"><h2 className="modal-title">{label} <DeploymentHelp label="API recovery target">Attempt <code>{id}</code>. The latest attempt and authority are checked before sending. A retry preserves its commit and tracks a new attempt.</DeploymentHelp></h2><p className="modal-message">{action === 'retry' ? 'Deploy the same commit as a new attempt.' : action === 'verify' ? 'Refresh runtime proof from the nodes in this attempt.' : 'Apply the current desired serving configuration across the fleet, then verify it.'}</p>{w.error && <ErrorNotice>{w.error}</ErrorNotice>}<div className="modal-actions"><button className="btn" disabled={w.busy} onClick={onClose}>Cancel</button><button className="btn btn-primary" disabled={w.busy} onClick={() => void execute()}>{label}</button></div></div>;
+}

package/src/admin/deployments/DeploymentsPage.tsx

@@ -0,0 +1,73 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
+import { registerNonFilterParams, useMe } from '../../client/runtime';
+import { Tabs } from '../../ui/Tabs';
+import { datetime } from '../../ui/format';
+import { modal } from '../../ui/modal';
+import { backendGlobalCan } from '../fleet/access';
+import { useAdminRouteContext } from '../core/route-context';
+import { canOnboard, canReadApi, canReadBootstrap, canReadWebApps, isInteractive, assertOwner } from './permissions';
+import { getBootstrap, getPlatform, getWebApps } from './api';
+import { useDeploymentOwner } from './useDeploymentObservation';
+import { DeploymentHelp, ErrorNotice, Facts, Status } from './shared';
+import type { DeploymentsDestinations } from './types';
+import { platformProof } from './deployment-state';
+registerNonFilterParams('deployment_lane', 'deployment_app', 'deployment_tab');
+export function DeploymentsPage({ destinations }: {
+    destinations?: DeploymentsDestinations;
+} = {}) {
+    const me = useMe(), scope = useDeploymentOwner(), queryClient = useQueryClient(), [params, setParams] = useSearchParams();
+    const registered = useAdminRouteContext();
+    const mount = registered?.mount === '/' ? '' : registered?.mount;
+    const candidates = destinations ?? (mount !== undefined ? { domains: `${mount}/dns/domains`, serving: `${mount}/edge/vhosts` } : {});
+    const admittedDestinations: DeploymentsDestinations = {};
+    if (backendGlobalCan(me.data, ['view_dns', 'manage_dns', 'security'])) for (const key of ['domains', 'serving'] as const) {
+        const path = candidates[key];
+        if (path && (!registered || registered.paths.includes(path))) admittedDestinations[key] = path;
+    }
+    const interactive = isInteractive(), api = interactive && canReadApi(me.data), web = interactive && canReadWebApps(me.data);
+    const lane = params.get('deployment_lane') === 'webapps' && web ? 'webapps' : api ? 'api' : 'webapps';
+    const bootstrap = useQuery({
+        queryKey: ['deployments', scope.key, 'bootstrap'], queryFn: ({ signal }) => getBootstrap(scope.owner, signal), enabled: web && lane === 'webapps' && canReadBootstrap(me.data), retry: false
+    });
+    const select = (lane: string) => { setParams({ ...Object.fromEntries([...params].filter(([name]) => name === 'demo')), deployment_lane: lane }, { replace: true }); };
+    const newApp = async () => { const { WebAppOnboardingDialog } = await import('./WebAppOnboardingDialog'); assertOwner(scope.owner, scope.signal); let busy = false; await modal.open(close => <WebAppOnboardingDialog destinations={admittedDestinations} bootstrap={bootstrap.data!} onChanged={() => { void queryClient.invalidateQueries({ queryKey: ['deployments', scope.key] }); }} onClose={() => close(null)} onBusy={value => { busy = value; }}/>, {
+        signal: scope.signal, canDismiss: () => !busy, size: 'lg'
+    }); await queryClient.invalidateQueries({ queryKey: ['deployments', scope.key] }); };
+    if (!api && !web)
+        return <div className="panel panel-pad"><h1>Deployments</h1><p>API or WebApp read authority in this global Admin workspace is required.</p></div>;
+    const items = [...(api ? [{
+                key: 'api', label: 'API', panel: <ApiLane key={scope.key}/>
+            }] : []), ...(web ? [{
+                key: 'webapps', label: 'WebApps', panel: <WebAppsLane key={scope.key} destinations={admittedDestinations}/>
+            }] : [])];
+    return <div className="admin-deployments"><header className="page-header"><div><h1>Deployments</h1><p className="dim">Review releases and deployment progress.</p></div>{lane === 'webapps' && web && canOnboard(bootstrap.data) && <button className="btn btn-primary" onClick={() => void newApp()}>New WebApp</button>}</header>{items.length === 1 ? items[0]!.panel : <Tabs ariaLabel="Deployment type" items={items} activeKey={lane} onActiveKeyChange={select}/>}</div>;
+}
+function ApiLane() {
+    const me = useMe(), s = useDeploymentOwner();
+    const q = useQuery({
+        queryKey: ['deployments', s.key, 'platform', 'deployments,api'], queryFn: ({ signal }) => getPlatform(s.owner, signal), enabled: canReadApi(me.data) && isInteractive(), retry: false
+    });
+    const inspect = async (id: string) => { const { ApiDeploymentDetail } = await import('./ApiDeploymentDetail'); assertOwner(s.owner, s.signal); await modal.open(close => <ApiDeploymentDetail id={id} onClose={() => close(null)}/>, { signal: s.signal, size: 'lg' }); };
+    const d = q.data?.deployments, serving = d?.data?.currently_serving;
+    const stale = d?.status === 'stale' || !!d?.stale_after && Date.parse(d.stale_after) <= Date.now();
+    return <section><div className="deployment-toolbar"><h2>API</h2><button className="btn" disabled={q.isFetching} onClick={() => void q.refetch()}>Refresh API</button></div>
+        {q.isError && <ErrorNotice>API observation unavailable. {q.data ? 'Previous evidence is shown below.' : 'Refresh to try again.'}</ErrorNotice>}
+        {q.isPending ? <p role="status">Loading API evidence…</p> : !d?.data ? <div className="panel panel-pad"><h3>Deployment observation unavailable</h3><p>{d?.reason || 'The collector did not return deployment evidence. Refresh to try again.'}</p><Status value={d?.status ?? 'unknown'}/></div> : <>
+            {stale && <p className="text-warn" role="status">This deployment observation is stale. Refresh before acting.</p>}
+            <div className="deployment-current"><div className="deployment-toolbar"><div className="eyebrow">Last convergence</div><DeploymentHelp label="API convergence"><Facts rows={[["Collector", <Status value={d.status}/>], ["Observed", d.observed_at ? datetime(d.observed_at) : 'Time unavailable'], ['Framework', serving?.framework_version], ['Framework mode', d.data.framework_pin.mode], ['Coordination', d.data.coordination.state]]}/><p>Last convergence is dated evidence, not fresh proof for every current node. Framework changes belong to Maintenance.</p></DeploymentHelp></div><strong className="mono" title={serving?.sha}>{serving?.sha.slice(0, 12) ?? 'No convergence recorded'}</strong><p className="dim">{serving?.converged_at ? datetime(serving.converged_at) : 'Convergence time unknown'}</p></div>
+            <h3>Latest attempts</h3>{d.data.items.map((row, i) => <button className="deployment-record" key={row.id} onClick={() => void inspect(row.id)}><span><strong>{i === 0 ? 'Latest · ' : ''}{row.sha.slice(0, 12)}</strong><small>{platformProof(row)}</small></span><Status value={row.status}/></button>)}{!d.data.items.length && <p>No deployment attempts recorded.</p>}
+            {d.data.items.length >= d.data.limit && d.data.limit > 0 && <p className="dim">Showing the latest {d.data.limit} attempts.</p>}
+        </>}
+    </section>;
+}
+function WebAppsLane({ destinations }: {
+    destinations?: DeploymentsDestinations;
+}) {
+    const me = useMe(), s = useDeploymentOwner();
+    const q = useQuery({
+        queryKey: ['deployments', s.key, 'summaries'], queryFn: ({ signal }) => getWebApps(s.owner, signal), enabled: canReadWebApps(me.data) && isInteractive(), retry: false
+    });
+    const inspect = async (id: number) => { const { WebAppDetail } = await import('./WebAppDetail'); assertOwner(s.owner, s.signal); await modal.open(close => <WebAppDetail id={id} destinations={destinations} onClose={() => close(null)}/>, { signal: s.signal, size: 'lg' }); };
+    return <section><div className="deployment-toolbar"><h2>WebApps</h2><button className="btn" disabled={q.isFetching} onClick={() => void q.refetch()}>Refresh WebApps</button></div>{q.isError ? <ErrorNotice>WebApp summary unavailable. Refresh to try again.</ErrorNotice> : q.isPending ? <p>Loading WebApps…</p> : <>{q.data?.truncated && <p className="text-warn">More apps exist; this list is truncated.</p>}{q.data?.items.map(row => <button className="deployment-record" key={row.webapp.id} onClick={() => void inspect(row.webapp.id)}><span><strong>{row.webapp.display_name || row.webapp.slug}</strong><small>{row.address?.hostname || 'No public address'}</small><small>Desired version: {row.current_release?.version ?? 'No release'}</small></span><span className="deployment-attempt-summary"><small>Latest attempt{row.latest_deployment?.release?.version && row.latest_deployment.release.version !== row.current_release?.version ? ` · ${row.latest_deployment.release.version}` : ''}</small><Status value={row.latest_deployment?.status ?? 'not started'}/></span></button>)}{!q.data?.items.length && <p>No WebApps yet.</p>}</>}</section>;
+}

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>;
+}