Complete provisioning job detail pages and lifecycle evidence

src/lib/ui/components/LaunchRecipe.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
     import { timeFormat } from '$ui/stores/time-zone.js';
     import type { LaunchRecipeSummary } from '$lib/deployment-plan.js';
-    let { recipe, historical = false }: { recipe: LaunchRecipeSummary; historical?: boolean } = $props();
+    let { recipe, historical = false, selectionStatus = null }: { recipe: LaunchRecipeSummary; historical?: boolean; selectionStatus?: 'queued' | 'attempted' | null } = $props();
 </script>
 
 <div class="recipe">
-    <div class="recipe-heading"><div><span class="eyebrow">{historical ? 'Recorded launch files' : 'Current promoted setup'}</span><h3>{recipe.mapName}</h3></div><span class="game">{recipe.game === 't6' ? 'Black Ops II' : 'Black Ops I'}</span></div>
+    <div class="recipe-heading"><div><span class="eyebrow">{historical ? selectionStatus === 'queued' ? 'Queued setup capture' : selectionStatus === 'attempted' ? 'Selected for this attempt' : 'Recorded launch files' : 'Current promoted setup'}</span><h3>{recipe.mapName}</h3></div><span class="game">{recipe.game === 't6' ? 'Black Ops II' : 'Black Ops I'}</span></div>
     <dl>
         <div><dt>Configuration</dt><dd>{recipe.configSource}</dd></div>
         <div><dt>Container image</dt><dd class="mono">{recipe.image}</dd></div>
@@ -14,7 +14,7 @@
     <details>
         <summary>{recipe.files.length} managed file{recipe.files.length === 1 ? '' : 's'} {historical ? 'recorded for this deployment' : 'in the current setup'}</summary>
         <ul>{#each recipe.files as file}<li><div><strong>{file.name}</strong><span>{file.version !== null ? `v${file.version}` : 'Generated'} · {file.kind} · {file.size.toLocaleString()} bytes</span></div><code>{file.path}</code><small title={file.sha256}>SHA-256 {file.sha256.slice(0, 12)}</small></li>{/each}</ul>
-        <p>{historical ? 'Recorded' : 'Previewed'} {$timeFormat.dateTime(recipe.capturedAt)}. {historical ? 'This records the files selected for this deployment. Launch again uses the latest promoted setup for this map.' : 'This preview shows the promoted setup at the time above. The deployment history records the files selected when provisioning begins.'}</p>
+        <p>{historical ? 'Recorded' : 'Previewed'} {$timeFormat.dateTime(recipe.capturedAt)}. {historical ? selectionStatus === 'queued' ? 'Versions are selected again when creation begins. This queued capture does not pin them.' : selectionStatus === 'attempted' ? 'These files were selected for this attempt; this does not confirm installation succeeded. Launch again uses the latest promoted setup.' : 'This records the saved setup for this deployment. Launch again uses the latest promoted setup for this map.' : 'This preview shows the promoted setup at the time above. The deployment history records the files selected when provisioning begins.'}</p>
         <small class="fingerprint" title={recipe.fingerprint}>Recipe {recipe.fingerprint.slice(0, 16)}</small>
     </details>
 </div>

src/lib/ui/components/ProvisioningActivity.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+    import { onDestroy } from 'svelte';
+    import type { ProvisioningDetail, ProvisioningEvent } from '$lib/provisioning-detail.js';
+    import { timeFormat } from '$ui/stores/time-zone.js';
+    import { isProvisioningEventPage } from '$ui/provisioning-presentation.js';
+    import Button from './primitives/Button.svelte';
+
+    let { detail }: { detail: ProvisioningDetail } = $props();
+    let open = $state(false);
+    let query = $state('');
+    let order = $state<'newest' | 'oldest'>('newest');
+    let appliedQuery = $state('');
+    let appliedOrder = $state<'newest' | 'oldest'>('newest');
+    let entries = $state<ProvisioningEvent[]>([]);
+    let frozenRecent = $state<ProvisioningEvent[] | null>(null);
+    let total = $state(0);
+    let baselineTotal = $state<number | null>(null);
+    let watermark = $state<number | null>(null);
+    let cursor = $state<number | null>(null);
+    let loaded = $state(false);
+    let loading = $state(false);
+    let error = $state('');
+    let requestNumber = 0;
+    let controller: AbortController | null = null;
+    let disposed = false;
+    const recent = $derived((frozenRecent ?? detail.events).slice().sort((a, b) => b.id - a.id).slice(0, 5));
+    const newEvents = $derived(baselineTotal === null ? 0 : Math.max(0, detail.activity.total - baselineTotal));
+
+    async function load(more = false) {
+        if (more && (loading || cursor === null)) return;
+        controller?.abort();
+        controller = new AbortController();
+        const currentController = controller;
+        const request = ++requestNumber;
+        const id = detail.deployment.id;
+        const current = () => !disposed && request === requestNumber && detail.deployment.id === id;
+        loading = true; error = '';
+        const requestedQuery = more ? appliedQuery : query;
+        const requestedOrder = more ? appliedOrder : order;
+        const params = new URLSearchParams({ order: requestedOrder, limit: '25' });
+        if (requestedQuery) params.set('query', requestedQuery);
+        if (more && cursor !== null && watermark !== null) {
+            params.set('cursor', String(cursor));
+            params.set('watermark', String(watermark));
+        }
+        let timedOut = false;
+        const timeout = setTimeout(() => { timedOut = true; currentController.abort(); }, 15_000);
+        try {
+            const response = await fetch(`/api/provisioning/${encodeURIComponent(id)}/events?${params}`, { signal: currentController.signal, cache: 'no-store' });
+            if (!response.ok) throw new Error('Could not load activity history.');
+            const body: unknown = await response.json();
+            if (!isProvisioningEventPage(body)) throw new Error('The activity response was incomplete.');
+            if (!current()) return;
+            entries = more ? [...entries, ...body.events.filter(event => !entries.some(previous => previous.id === event.id))] : body.events;
+            total = body.total; watermark = body.watermark; cursor = body.nextCursor; loaded = true;
+            if (!more) { baselineTotal = body.totalEvents; appliedQuery = requestedQuery; appliedOrder = requestedOrder; }
+        } catch (reason) {
+            if (current() && (!currentController.signal.aborted || timedOut)) error = timedOut ? 'Activity refresh timed out. Try again.' : reason instanceof Error ? reason.message : 'Could not load activity history.';
+        } finally {
+            clearTimeout(timeout);
+            if (current()) loading = false;
+        }
+    }
+    function toggle(event: Event) {
+        const expanded = (event.currentTarget as HTMLDetailsElement).open;
+        open = expanded;
+        if (expanded) {
+            frozenRecent = detail.events.slice();
+            if (!loaded && !loading) void load();
+        } else frozenRecent = null;
+    }
+    function jumpToLatest() {
+        query = appliedQuery; order = 'newest';
+        frozenRecent = detail.events.slice();
+        void load();
+    }
+    onDestroy(() => { disposed = true; requestNumber++; controller?.abort(); });
+</script>
+
+<section aria-labelledby="activity-title" class="activity">
+    <div class="heading"><div><span class="eyebrow">Activity</span><h2 id="activity-title">Recent updates</h2></div><span class="count">{detail.activity.total} event{detail.activity.total === 1 ? '' : 's'}</span></div>
+    <p class="muted">{open ? 'Recent updates stay in place while you read the full history.' : 'Newest first · updates automatically'}</p>
+    {#if recent.length}<ol class="timeline recent">
+        {#each recent as event (event.id)}<li><time datetime={event.created_at}>{$timeFormat.dateTime(event.created_at)}</time><p>{event.message}</p></li>{/each}
+    </ol>{:else}<p class="empty">No detailed activity was recorded. The recorded outcome and timestamps are preserved above.</p>{/if}
+
+    <details class="history" ontoggle={toggle}>
+        <summary>Full activity history <span>{detail.activity.total} events</span></summary>
+        <div class="history-content">
+            {#if newEvents > 0}<div class="new-events" role="status"><span>{newEvents} new event{newEvents === 1 ? '' : 's'} since this view was loaded.</span><Button size="sm" onclick={jumpToLatest}>Jump to latest</Button></div>{/if}
+            <form class="tools" onsubmit={event => { event.preventDefault(); void load(); }}>
+                <label class="search">Search activity<input type="search" bind:value={query} placeholder="Find a stage or message" /></label>
+                <label>Order<select bind:value={order} onchange={() => { void load(); }}><option value="newest">Newest first</option><option value="oldest">Oldest first</option></select></label>
+                <Button type="submit" disabled={loading}>Search</Button>
+            </form>
+            {#if error}<div class="history-error" role="alert"><p>{error} {loaded ? 'Your previous history view is still shown.' : ''}</p><Button size="sm" onclick={() => load()}>Retry history</Button></div>{/if}
+            {#if loaded}<p class="muted">{appliedOrder === 'newest' ? 'Newest first' : 'Oldest first'}{appliedQuery ? ` · Matching “${appliedQuery}”` : ' · All messages'}</p>{/if}
+            {#if loading && !loaded}<p class="muted" role="status">Loading activity…</p>
+            {:else if loaded && !entries.length}<p class="empty">{appliedQuery ? 'No activity matches this search.' : 'No detailed activity recorded.'}</p>
+            {:else}<ol class="timeline">
+                {#each entries as event (event.id)}<li><time datetime={event.created_at}>{$timeFormat.dateTime(event.created_at)}</time><p>{event.message}</p></li>{/each}
+            </ol>{/if}
+            {#if loaded}<div class="footer"><span>Showing {entries.length} of {total} matching events</span>{#if cursor !== null}<Button size="sm" loading={loading} disabled={loading} onclick={() => load(true)}>Show more activity</Button>{/if}</div>{/if}
+        </div>
+    </details>
+</section>
+
+<style>
+    .activity { display: grid; gap: var(--space-4); min-width: 0; }
+    .heading { display: flex; justify-content: space-between; gap: var(--space-4); align-items: end; flex-wrap: wrap; }
+    .eyebrow { display: block; font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-2); }
+    h2 { margin: 0; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
+    p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; font-size: var(--text-sm); }
+    .muted, .count, time, .footer { font-size: var(--text-xs); color: var(--text-secondary); }
+    .empty { padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-secondary); }
+    .timeline { list-style: none; margin: 0 0 0 var(--space-1); padding: 0 0 0 var(--space-5); border-left: 1px solid var(--border-strong); }
+    .timeline li { padding: 0 0 var(--space-5); position: relative; }.timeline li:last-child { padding-bottom: 0; }
+    .timeline li::before { content: ''; position: absolute; top: 6px; left: -24px; width: 7px; height: 7px; background: var(--border-control); border-radius: var(--radius-pill); }
+    .recent li:first-child::before { background: var(--accent-primary); }.timeline p { margin-top: var(--space-1); }
+    .history { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
+    summary { cursor: pointer; padding: var(--space-5); font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
+    summary span { margin-left: var(--space-2); color: var(--text-tertiary); font-size: var(--text-xs); font-weight: var(--weight-regular); }
+    summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -3px; border-radius: var(--radius-sm); }
+    .history-content { padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-5); }
+    .tools { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }.tools label { display: grid; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }.search { flex: 1 1 160px; }
+    input, select { background: var(--surface-sunken); color: var(--text-primary); border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: 10px; font: inherit; min-height: 40px; width: 100%; }
+    input:focus-visible, select:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
+    .new-events { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); }.new-events span { flex: 1; }
+    .footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; line-height: 1.6; }
+    .history-error { display: grid; justify-items: start; gap: var(--space-3); color: var(--state-danger); }
+    @media (max-width: 600px) { summary { padding: var(--space-4); }.history-content { padding: 0 var(--space-4) var(--space-4); }.tools { align-items: stretch; }.tools .search { flex-basis: 100%; } }
+</style>

src/lib/ui/components/ProvisioningProgress.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+    import type { ProvisioningDetail } from '$lib/provisioning-detail.js';
+    import { provisioningGroups, progressIcons, progressStateLabels } from '$ui/provisioning-presentation.js';
+    import { timeFormat } from '$ui/stores/time-zone.js';
+    import Badge from './primitives/Badge.svelte';
+
+    let { detail }: { detail: ProvisioningDetail } = $props();
+    const groups = $derived(provisioningGroups(detail));
+    const progress = $derived(detail.progress);
+    let expanded = $state<Record<string, boolean>>({});
+    const evidenceLabels = { pass: 'Passed', waiting: 'Waiting', fail: 'Failed', unknown: 'Unknown' };
+    const sources = { komodo: 'Komodo', rcon: 'RCON', telemetry: 'Telemetry', combined: 'RCON and telemetry' };
+</script>
+
+<section class="execution" aria-labelledby="execution-title">
+    <div class="section-heading"><div><span class="eyebrow">Execution</span><h2 id="execution-title">Progress and evidence</h2></div></div>
+    {#if !progress}
+        <div class="legacy"><h3>{detail.deployment.stage}</h3><p>Detailed checkpoints were not recorded for this operation. Its recorded outcome and original activity remain available below.</p></div>
+    {:else}
+        <ol class="phases">
+            {#each groups as group (group.key)}
+                <li class:current={group.state === 'current' || group.state === 'waiting'} class:failed={group.state === 'failed'}>
+                    <details open={expanded[group.key] ?? ['current', 'waiting', 'failed'].includes(group.state)}>
+                        <summary
+                            onclick={event => { event.preventDefault(); expanded[group.key] = !(expanded[group.key] ?? ['current', 'waiting', 'failed'].includes(group.state)); }}
+                            onkeydown={event => {
+                                if (event.key !== 'Enter' && event.key !== ' ') return;
+                                event.preventDefault();
+                                if (!event.repeat) expanded[group.key] = !(expanded[group.key] ?? ['current', 'waiting', 'failed'].includes(group.state));
+                            }}
+                        >
+                            <span class="phase-icon state-{group.state}" aria-hidden="true">{progressIcons[group.state]}</span>
+                            <span class="phase-title">{group.label}</span>
+                            <span class="phase-state state-{group.state}">{progressStateLabels[group.state]}</span>
+                        </summary>
+                        <ol class="steps">
+                            {#each group.steps as step (step.key)}
+                                <li aria-current={step.state === 'current' || step.state === 'waiting' ? 'step' : undefined}>
+                                    <span class="step-icon state-{step.state}" aria-hidden="true">{progressIcons[step.state]}</span>
+                                    <div><strong>{step.label}</strong><span class="step-meta state-{step.state}">{progressStateLabels[step.state]}{#if step.at} · <time datetime={step.at}>{$timeFormat.dateTime(step.at)}</time>{/if}</span></div>
+                                </li>
+                            {/each}
+                        </ol>
+                    </details>
+                </li>
+            {/each}
+        </ol>
+        {#if progress.command}
+            <div class="command" class:uncertain={progress.command.state === 'uncertain'}>
+                <h3>{progress.command.state === 'attempted' ? 'Command submission attempted' : progress.command.state === 'accepted' ? 'Remote request accepted' : progress.command.state === 'rejected' ? 'Remote request rejected' : 'Remote response uncertain'}</h3>
+                <p>{progress.command.message}</p>
+                <time datetime={progress.command.at}>{$timeFormat.dateTime(progress.command.at)}</time>
+            </div>
+        {/if}
+        {#if progress.checkpoints.some(checkpoint => !groups.some(group => group.steps.some(step => step.key === checkpoint.key)))}
+            <details class="milestones"><summary>Recorded checkpoints</summary><ul>
+                {#each progress.checkpoints.filter(checkpoint => !groups.some(group => group.steps.some(step => step.key === checkpoint.key))) as checkpoint (checkpoint.key)}
+                    <li><strong>{checkpoint.label}</strong><time datetime={checkpoint.at}>{$timeFormat.dateTime(checkpoint.at)}</time></li>
+                {/each}
+            </ul></details>
+        {/if}
+        <div class="evidence-heading"><h3>Latest recorded checks</h3>{#if progress.observedAt}<span>Evaluated <time datetime={progress.observedAt}>{$timeFormat.dateTime(progress.observedAt)}</time></span>{/if}</div>
+        {#if progress.checks.length}
+            <div class="checks">
+                {#each progress.checks as check (check.key)}
+                    <article class="check">
+                        <div class="check-heading"><strong>{check.label}</strong><Badge variant={check.result === 'pass' ? 'online' : check.result === 'fail' ? 'danger' : check.result === 'waiting' ? 'warning' : 'neutral'}>{evidenceLabels[check.result]}</Badge></div>
+                        {#if check.expected !== null || check.actual !== null}<dl>
+                            {#if check.expected !== null}<div><dt>Expected</dt><dd>{check.expected}</dd></div>{/if}
+                            <div><dt>Observed</dt><dd>{check.actual ?? 'Unknown'}</dd></div>
+                        </dl>{/if}
+                        {#if check.message}<p>{check.message}</p>{/if}
+                        <div class="evidence-meta"><span>{check.source ? sources[check.source] : 'Source not recorded'}</span><span>Checked <time datetime={check.checkedAt}>{$timeFormat.dateTime(check.checkedAt)}</time></span>{#if check.receivedAt}<span>Evidence received <time datetime={check.receivedAt}>{$timeFormat.dateTime(check.receivedAt)}</time></span>{/if}</div>
+                    </article>
+                {/each}
+            </div>
+        {:else}<p class="empty">No check evidence has been recorded for this operation yet.</p>{/if}
+        {#if detail.deployment.expected_map}<p class="map-note">Selected engine map: <code>{detail.deployment.expected_map}</code>. Engine-map verification does not independently verify a variant or start location.</p>{/if}
+    {/if}
+</section>
+
+<style>
+    .execution { display: grid; gap: var(--space-5); min-width: 0; }
+    h2, h3, p { margin: 0; }
+    h2 { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
+    h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
+    .eyebrow { display: block; margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary); }
+    .phases, .steps, .milestones ul { list-style: none; padding: 0; margin: 0; }
+    .phases { display: grid; gap: var(--space-3); }
+    .phases > li { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
+    .phases > li.current { border-color: color-mix(in srgb, var(--accent-primary) 60%, var(--border-subtle)); }
+    .phases > li.failed { border-color: color-mix(in srgb, var(--state-danger) 60%, var(--border-subtle)); }
+    summary { cursor: pointer; }
+    .phases summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); list-style: none; }
+    .phases summary::-webkit-details-marker { display: none; }
+    .phases summary::after { content: '+'; color: var(--text-tertiary); font-size: 18px; }
+    .phases details[open] > summary::after { content: '−'; }
+    summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -3px; border-radius: var(--radius-sm); }
+    .phase-icon { flex: 0 0 26px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); }
+    .phase-title { flex: 1; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
+    .phase-state { font-size: var(--text-xs); }
+    .steps { border-top: 1px solid var(--border-subtle); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-4); }
+    .steps li { display: flex; align-items: flex-start; gap: var(--space-3); }
+    .step-icon { flex: 0 0 26px; text-align: center; line-height: 1.5; }
+    .steps strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.5; }
+    .step-meta { display: block; font-size: var(--text-xs); margin-top: var(--space-1); line-height: 1.6; }
+    .state-current { color: var(--accent-primary-hover); }.state-waiting { color: var(--state-warning); }.state-failed { color: var(--state-danger); }.state-done { color: var(--state-online); }
+    .state-unknown, .state-pending, .state-cancelled, time { color: var(--text-secondary); }
+    .command, .legacy { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
+    .command.uncertain { border-color: color-mix(in srgb, var(--state-warning) 45%, var(--border-subtle)); }
+    p { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.65; overflow-wrap: anywhere; }
+    time, .evidence-meta, .evidence-heading span, .milestones { font-size: var(--text-xs); }
+    .evidence-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); }
+    .evidence-heading span { color: var(--text-secondary); }
+    .checks { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
+    .check { padding: var(--space-5); display: grid; gap: var(--space-3); }.check + .check { border-top: 1px solid var(--border-subtle); }
+    .check-heading { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }.check-heading strong { font-size: var(--text-sm); }
+    dl { display: flex; gap: var(--space-4) var(--space-8); margin: 0; flex-wrap: wrap; }dt { font-size: var(--text-xs); color: var(--text-tertiary); }dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
+    .evidence-meta { display: flex; gap: var(--space-1) var(--space-4); flex-wrap: wrap; color: var(--text-tertiary); line-height: 1.6; }
+    .milestones { border-block: 1px solid var(--border-subtle); padding: var(--space-3) 0; }.milestones summary { color: var(--text-secondary); }.milestones ul { display: grid; gap: var(--space-3); padding-top: var(--space-4); }.milestones li { display: grid; gap: var(--space-1); }.milestones strong { font-weight: var(--weight-medium); }
+    .map-note { font-size: var(--text-xs); }code { font-family: var(--font-mono); overflow-wrap: anywhere; }
+    @media (max-width: 600px) { .phases summary { padding: var(--space-4); gap: var(--space-2); flex-wrap: wrap; }.phase-title { flex-basis: calc(100% - 70px); }.phase-state { padding-left: 34px; order: 1; flex-basis: 100%; }.phases summary::after { order: 0; }.steps, .check { padding: var(--space-4); } }
+</style>