portal-mojo 0.2.20 → 0.2.21

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

package/src/admin/deployments/WebAppRollbackDialog.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useMe } from '../../client/runtime';
+import { getDeployment, getHistory, getRelease, resolveAppAuthority, getSummary, getWebApp, rollback } from './api';
+import { assertOwner, isInteractive } from './permissions';
+import { rollbackEligible } from './deployment-state';
+import { makeReceipt, receiptsFor, saveReceipt, settleReceipt } from './receipts';
+import { useDeploymentObservation, useDeploymentOwner } from './useDeploymentObservation';
+import { ErrorNotice, Status, useWrite } from './shared';
+import type { DeploymentStatus, Release, WebAppObject } from './types';
+export function WebAppRollbackDialog({ app, release, onClose, onBusy, onChanged }: {
+    app: WebAppObject;
+    release?: Release;
+    onClose: () => void;
+    onBusy: (v: boolean) => void;
+    onChanged: () => void;
+}) {
+    const s = useDeploymentOwner(), me = useMe(), w = useWrite(s.owner, s.signal, onBusy);
+    const pending = receiptsFor(s.owner).find(r => r.kind === 'rollback' && r.app === app.id && r.submitted && !r.settled);
+    const [start, setStart] = useState(0), [selection, setSelection] = useState<Release | undefined>(release), [confirmation, setConfirmation] = useState('');
+    const [tracked, setTracked] = useState<DeploymentStatus | null>(() => pending?.deployment && pending.release ? { deployment: pending.deployment, webapp: app.id, release: pending.release, version: '', status: 'unknown', terminal: false, success: false, detail: '', created: '', started: '', finished: '', targets: [], rollback_targets: [] } : null);
+    const [reconciled, setReconciled] = useState(false), [acknowledgement, setAcknowledgement] = useState('');
+    const q = useQuery({ queryKey: ['deployments', s.key, app.id, 'rollback-targets', start], queryFn: async ({ signal }) => ({ summary: await getSummary(s.owner, app.id, signal), releases: await getHistory(s.owner, app.id, 'release', start, signal) }), retry: false });
+    const selected = selection, target = selected?.id ?? 0;
+    const observation = useDeploymentObservation(s.owner, tracked ? String(tracked.deployment) : null, signal => getDeployment(s.owner, tracked!.deployment, app.id, tracked!.release, signal), d => d.terminal);
+    const execute = () => w.run(async () => {
+        if (!selected || confirmation !== `${app.slug}/${selected.version}` || !q.data || q.isError) return;
+        const [object, summary, fresh] = await Promise.all([getWebApp(s.owner, app.id, s.signal), getSummary(s.owner, app.id, s.signal), getRelease(s.owner, target, 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 authority is unavailable');
+        if (!rollbackEligible(fresh, summary.current_release) || fresh.version !== selected.version) throw new Error('Target changed; refresh and confirm again');
+        assertOwner(s.owner, s.signal);
+        const receipt = makeReceipt(s.owner, 'rollback', `${app.id}:${target}`, app.id, String(target));
+        const result = await rollback(s.owner, receipt, app.id, target, app.group.id, s.signal);
+        saveReceipt({ ...receipt, deployment: result.deployment, release: target });
+        setTracked(result); setConfirmation(''); onChanged();
+    });
+    const uncertain = receiptsFor(s.owner).find(r => r.kind === 'rollback' && r.app === app.id && r.submitted && !r.settled && !r.deployment);
+    const reconcile = () => w.run(async () => {
+        if (!uncertain) return;
+        const summary = await getSummary(s.owner, app.id, s.signal), history = await getHistory(s.owner, app.id, 'deployment', 0, s.signal);
+        const matches = history.items.filter(a => (a as import('./types').Attempt).release?.id === Number(uncertain.target) && Date.parse(a.created) >= (uncertain.submittedAt ?? 0) - 1000) as import('./types').Attempt[];
+        if (matches.length === 1) {
+            const match = matches[0]!, status = await getDeployment(s.owner, match.id, app.id, Number(uncertain.target), s.signal);
+            saveReceipt({ ...uncertain, deployment: status.deployment, release: status.release, settled: status.terminal }); setTracked(status);
+        } else {
+            setConfirmation('');
+            if (summary.current_release?.id === Number(uncertain.target)) throw new Error('The target is already the current desired pointer. Refresh its deployment evidence instead of dispatching another rollback.');
+            setReconciled(true);
+        }
+    });
+    const acknowledge = () => {
+        if (!uncertain || !reconciled || acknowledgement !== `${app.slug}/unknown-outcome`) return;
+        saveReceipt({ ...uncertain, settled: true, acknowledged: true }); setReconciled(false); setAcknowledgement(''); setConfirmation('');
+    };
+    const outcome = observation.value ?? tracked, notified = useRef(new Set<number>());
+    useEffect(() => {
+        if (!outcome?.terminal) return;
+        setTracked(current => current?.deployment === outcome.deployment && current !== outcome ? outcome : current);
+        const receipt = receiptsFor(s.owner).find(r => r.kind === 'rollback' && r.app === app.id && r.deployment === outcome.deployment);
+        if (receipt && !receipt.settled) settleReceipt(receipt);
+        if (!notified.current.has(outcome.deployment)) { notified.current.add(outcome.deployment); onChanged(); }
+    }, [outcome?.deployment, outcome?.terminal, onChanged]);
+    const succeeded = outcome?.terminal === true && outcome.success === true && outcome.status === 'live';
+    const releases = (q.data?.releases.items ?? []) as Release[], eligible = releases.filter(r => rollbackEligible(r, q.data!.summary.current_release));
+    return <div className="modal-pad admin-deployments"><h2 className="modal-title">{succeeded ? 'Rollback complete' : tracked ? 'Rollback progress' : `Roll back ${app.display_name || app.slug}`}</h2>{!tracked && <p className="modal-message">Choose a verified release to deploy. A failed rollout can leave mixed nodes.</p>}
+        {!tracked && <>
+            {q.isError && <ErrorNotice>Release observation unavailable. Refresh before choosing a target.</ErrorNotice>}
+            <label>Verified release<select value={target} disabled={w.busy || q.isFetching} onChange={e => { setSelection(releases.find(r => r.id === Number(e.target.value))); setConfirmation(''); }}><option value={0}>Choose a version</option>{selected && !eligible.some(r => r.id === target) && <option value={target}>{selected.version} · selected</option>}{eligible.map(r => <option key={r.id} value={r.id}>{r.version} · {r.status}</option>)}</select></label>
+            <div className="deployment-pagination" aria-label="Release history pagination"><span className="dim">{q.data ? `${q.data.releases.count ? start + 1 : 0}–${Math.min(start + releases.length, q.data.releases.count)} of ${q.data.releases.count} registered releases` : 'Loading releases…'}</span><div className="deployment-actions"><button className="btn" disabled={w.busy || q.isFetching || start === 0} onClick={() => setStart(value => Math.max(0, value - 25))}>Newer releases</button><button className="btn" disabled={w.busy || q.isFetching || !q.data || start + 25 >= q.data.releases.count} onClick={() => setStart(value => value + 25)}>Older releases</button><button className="btn" disabled={w.busy || q.isFetching} onClick={() => void q.refetch()}>Refresh releases</button></div></div>
+            {q.data && !eligible.length && <p className="dim">No eligible rollback target on this page.</p>}
+            {selected && <label>Type {app.slug}/{selected.version}<input value={confirmation} disabled={w.busy} onChange={e => setConfirmation(e.target.value)}/></label>}
+        </>}
+        {uncertain && <div className="deployment-confirm"><p>A previous rollback may have persisted. Observe it before another decision.</p><button className="btn" disabled={w.busy} onClick={() => void reconcile()}>Observe uncertain rollback</button>{reconciled && <><p>No unique matching attempt was observed in bounded history. A new rollback can overlap the earlier operation. Acknowledge this unknown outcome, then review and type the app/version again to consent to a new operation.</p><label>Type {app.slug}/unknown-outcome<input value={acknowledgement} disabled={w.busy} onChange={e => setAcknowledgement(e.target.value)}/></label><button className="btn" disabled={w.busy || acknowledgement !== `${app.slug}/unknown-outcome`} onClick={acknowledge}>Acknowledge unknown outcome</button></>}</div>}
+        {w.error && <ErrorNotice>{w.error}</ErrorNotice>}
+        {succeeded ? <div className="deployment-result" role="status"><strong>{outcome.version || selected?.version || 'Selected release'}</strong> <Status value="live"/><p>Deployment completed.</p></div> : tracked && <p role="status">Deployment {tracked.deployment}: <Status value={outcome?.status ?? 'unknown'}/></p>}
+        {['error', 'stopped'].includes(observation.state) && <p className="text-warn">{succeeded ? 'Latest refresh unavailable. Showing the last observed result.' : 'Observation unavailable; outcome unconfirmed. Refresh only observes.'}</p>}
+        {!succeeded && outcome?.detail && <p>{outcome.detail}</p>}
+        <div className="modal-actions"><button className="btn" disabled={w.busy} onClick={onClose}>{tracked ? 'Close' : 'Cancel'}</button>{tracked ? <button className="btn" disabled={w.busy || observation.state === 'observing'} onClick={observation.refresh}>Refresh exact deployment</button> : <button className="btn btn-primary" disabled={w.busy || q.isFetching || q.isError || !q.data || !selected || !rollbackEligible(selected, q.data.summary.current_release) || confirmation !== `${app.slug}/${selected.version}`} onClick={() => void execute()}>Confirm rollback</button>}</div>
+    </div>;
+}

package/src/admin/deployments/WebAppUploadPanel.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useRef, useState } from 'react';
+import { usingMockTransport, useMe } from '../../client/runtime';
+import { completeUpload, getDeployment, reconcileUploadCompletion, resolveAppAuthority, getWebApp, registerUpload } from './api';
+import { isInteractive } from './permissions';
+import { buildManifest, manifestEqual, putReleaseFiles } from './upload';
+import { makeReceipt, receiptsFor, saveReceipt, settleReceipt } from './receipts';
+import { useDeploymentObservation, useDeploymentOwner } from './useDeploymentObservation';
+import { DeploymentHelp, ErrorNotice, Status, useWrite } from './shared';
+import type { DeploymentStatus, WebAppObject } from './types';
+
+export function WebAppUploadPanel({ app, onClose, onBusy, onChanged }: {
+    app: WebAppObject;
+    onClose?: () => void;
+    onBusy?: (v: boolean) => void;
+    onChanged?: () => void;
+}) {
+    const s = useDeploymentOwner(), me = useMe(), w = useWrite(s.owner, s.signal, onBusy);
+    const files = useRef<File[]>([]);
+    const existing = receiptsFor(s.owner).find(r => r.kind === 'upload' && r.app === app.id && !r.settled);
+    const [version, setVersion] = useState(existing?.target ?? '');
+    const [fileCount, setFileCount] = useState(0), [progress, setProgress] = useState('');
+    const [tracked, setTracked] = useState<{ deployment: number; release: number } | null>(
+        existing?.deployment && existing.release ? { deployment: existing.deployment, release: existing.release } : null,
+    );
+    const [reconciliation, setReconciliation] = useState<Awaited<ReturnType<typeof reconcileUploadCompletion>> | null>(null);
+    const [consent, setConsent] = useState('');
+    const [lastTerminal, setLastTerminal] = useState<DeploymentStatus | null>(null);
+    const observe = useDeploymentObservation(s.owner, tracked ? String(tracked.deployment) : null,
+        signal => getDeployment(s.owner, tracked!.deployment, app.id, tracked!.release, signal), d => d.terminal);
+    const completionSubmitted = !!existing && ['completion_submitted', 'observing'].includes(existing.uploadPhase ?? '');
+
+    const checkAuthority = async () => {
+        const object = await getWebApp(s.owner, app.id, s.signal);
+        const authority = await resolveAppAuthority(s.owner, me.data, object, 'release', s.signal);
+        if (!isInteractive() || object.group.id !== app.group.id || !authority.release)
+            throw new Error('Exact app release authority unavailable');
+    };
+    const upload = () => w.run(async () => {
+        if (completionSubmitted) throw new Error('Completion was already submitted. Observe its deployment before a new decision.');
+        if (!/^[A-Za-z0-9][A-Za-z0-9._-]{0,127}$/.test(version))
+            throw new Error('Use a version of 1–128 letters, numbers, dots, dashes or underscores');
+        await checkAuthority();
+        setProgress('Hashing selected files…');
+        const manifest = await buildManifest(files.current, s.signal);
+        const receipt = makeReceipt(s.owner, 'upload', `${app.id}:${version}`, app.id, version);
+        if (receipt.manifest && !manifestEqual(receipt.manifest, manifest))
+            throw new Error('Reselect the identical normalized files and checksums for this pending version');
+        const frozen = saveReceipt({ ...receipt, manifest });
+        setProgress('Registering immutable release…');
+        const registration = await registerUpload(s.owner, frozen, app.id, app.group.id, version, manifest, s.signal);
+        const registered = saveReceipt({ ...frozen, release: registration.release, uploadPhase: 'registered' });
+        setProgress('Uploading checksum-bound files…');
+        const put = usingMockTransport() ? (await import('../../client/deployments-mock')).deploymentMockStorageFetch : fetch;
+        await putReleaseFiles(files.current, manifest, registration.uploads, s.signal,
+            n => setProgress(`${n}/${manifest.length} files uploaded`), put);
+        setProgress('Verifying release and starting deployment…');
+        const result = await completeUpload(s.owner, registered, registration.release, app.id, app.group.id, s.signal);
+        setTracked({ deployment: result.deployment, release: registration.release });
+        files.current = []; setFileCount(0);
+        setProgress('Completion accepted; observing exact deployment.');
+    });
+    const reconcile = () => w.run(async () => {
+        const receipt = existing ?? receiptsFor(s.owner).find(r => r.kind === 'upload' && r.app === app.id && r.target === version);
+        if (!receipt) throw new Error('No submitted completion receipt is available');
+        const result = await reconcileUploadCompletion(s.owner, receipt, s.signal);
+        setReconciliation(result); setConsent('');
+        if (result.status) setTracked({ deployment: result.status.deployment, release: result.status.release });
+        setProgress(result.status ? 'Matching exact deployment observed.' : 'No unique matching attempt was established. Completion outcome remains unknown.');
+    });
+    const renewConsent = () => w.run(async () => {
+        if (!reconciliation || consent !== `${app.slug}/${version}`) return;
+        await checkAuthority();
+        const fresh = await reconcileUploadCompletion(s.owner, reconciliation.receipt, s.signal);
+        if (fresh.signature !== reconciliation.signature || (fresh.status && !fresh.status.terminal)) {
+            setReconciliation(fresh); setConsent('');
+            if (fresh.status) setTracked({ deployment: fresh.status.deployment, release: fresh.status.release });
+            throw new Error('Deployment evidence changed or is active. Review it before another deployment decision.');
+        }
+        saveReceipt({ ...fresh.receipt, operation: crypto.randomUUID(), uploadPhase: 'registered',
+            completionSubmittedAt: undefined, completionBaseline: undefined, deployment: undefined,
+            submitted: false, submittedAt: undefined, settled: false });
+        setTracked(null); setReconciliation(null); setLastTerminal(null); setConsent('');
+        files.current = []; setFileCount(0);
+        setProgress('New deployment consent recorded. Reselect the identical artifact and deliberately upload/deploy again.');
+    });
+    const forTracked = (value: DeploymentStatus | null | undefined) => value && tracked && value.deployment === tracked.deployment && value.release === tracked.release && value.webapp === app.id ? value : null;
+    // A later exact terminal observation outranks an earlier reconciliation read.
+    const outcome = forTracked(observe.value) ?? forTracked(lastTerminal) ?? forTracked(reconciliation?.status);
+    const succeeded = outcome?.terminal === true && outcome.success === true && outcome.status === 'live';
+    const notified = useRef(new Set<number>());
+    useEffect(() => { if (observe.value?.terminal) setLastTerminal(observe.value); }, [observe.value]);
+    useEffect(() => {
+        if (!observe.value?.terminal) return;
+        const receipt = receiptsFor(s.owner).find(r => r.kind === 'upload' && r.app === app.id && r.deployment === observe.value?.deployment);
+        if (receipt && !receipt.settled) settleReceipt(receipt);
+        if (!notified.current.has(observe.value.deployment)) {
+            notified.current.add(observe.value.deployment); onChanged?.();
+        }
+    }, [observe.value?.deployment, observe.value?.terminal, onChanged]);
+    const lockedFiles = w.busy || !!tracked || completionSubmitted;
+    const mayRenew = !!reconciliation && (!reconciliation.status ||
+        (reconciliation.status.terminal && !reconciliation.status.success));
+    if (succeeded) return <div className="deployment-stack">
+        <div className="deployment-result" role="status"><strong>{outcome.version || version}</strong> <Status value="live"/><p>Deployment completed.</p></div>
+        {['error', 'stopped'].includes(observe.state) && <p className="text-warn">Latest refresh unavailable. Showing the last observed result.</p>}
+        <div className="modal-actions">{onClose && <button className="btn" disabled={w.busy} onClick={onClose}>Close upload</button>}<button className="btn" disabled={w.busy || observe.state === 'observing'} onClick={observe.refresh}>Refresh exact deployment</button></div>
+    </div>;
+    return <div>
+        <label>Release version<input value={version} disabled={w.busy || !!tracked || !!existing} onChange={e => setVersion(e.target.value)} /></label>
+        <label>Built files<input type="file" multiple disabled={lockedFiles} onChange={e => { files.current = Array.from(e.target.files ?? []); setFileCount(files.current.length); }} /></label>
+        <label>Built folder<input type="file" multiple {...{ webkitdirectory: '', directory: '' }} disabled={lockedFiles} onChange={e => {
+            files.current = Array.from(e.target.files ?? []).map(file => {
+                const copy = new File([file], file.name, { type: file.type, lastModified: file.lastModified });
+                Object.defineProperty(copy, 'webkitRelativePath', { value: (file.webkitRelativePath || file.name).split('/').slice(1).join('/') || file.name });
+                return copy;
+            }); setFileCount(files.current.length);
+        }} /></label>
+        <p>{fileCount} files selected <DeploymentHelp label="Upload limits and resume">Default limits are 5000 files and 1 GiB; this installation may set lower limits. Reselect and rehash the identical files to resume an upload that has not submitted completion.</DeploymentHelp></p>
+        {existing && !tracked && !completionSubmitted && <p>Pending version {existing.target}. Signed URLs were discarded; identical manifest registration remints them.</p>}
+        {completionSubmitted && !tracked && <p role="status">Completion may already have started a deployment. Re-registering or sending completion again can start another rollout. Reconcile the recorded release first.</p>}
+        {w.error && <ErrorNotice>{w.error}</ErrorNotice>}
+        {progress && !tracked && <p role="status">{progress}</p>}
+        {tracked ? <><p>Deployment {tracked.deployment}: <Status value={outcome?.status ?? 'unknown'} />{['error', 'stopped'].includes(observe.state) && ' · Observation unavailable; outcome unconfirmed'}</p><button className="btn" disabled={w.busy} onClick={observe.refresh}>Refresh exact deployment</button></> :
+            !completionSubmitted && <button className="btn btn-primary" disabled={w.busy || !fileCount || !version} onClick={() => void upload()}>Upload and deploy verified release</button>}
+        {(completionSubmitted || tracked) && <button className="btn" disabled={w.busy} onClick={() => void reconcile()}>Reconcile submitted completion</button>}
+        {onClose && <div className="modal-actions"><button className="btn" disabled={w.busy} onClick={onClose}>Close upload</button></div>}
+        {mayRenew && <div className="deployment-confirm"><p>The prior completion may have run. Starting again is a new deployment decision and can overlap an unobserved attempt. This does not erase or retry the earlier operation.</p>
+            <label>New deployment consent: type {app.slug}/{version}<input value={consent} disabled={w.busy} onChange={e => setConsent(e.target.value)} /></label>
+            <button className="btn" disabled={w.busy || consent !== `${app.slug}/${version}`} onClick={() => void renewConsent()}>Consent to a new deployment attempt</button>
+        </div>}
+    </div>;
+}