Unify UI workflows and streamline fleet management

src/routes/campaigns/+page.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
+    import { onMount } from 'svelte';
+    import { pollVisible } from '$ui/poll.js';
+    import { confirmAction } from '$ui/confirm.js';
+    import { serverTitle } from '$ui/server-labels.js';
+    import ServerIdentity from '$ui/components/ServerIdentity.svelte';
+    import StatusBadge from '$ui/components/primitives/StatusBadge.svelte';
+    import ListFooter from '$ui/components/primitives/ListFooter.svelte';
     import Card from '$ui/components/primitives/Card.svelte';
     import Badge from '$ui/components/primitives/Badge.svelte';
     import Button from '$ui/components/primitives/Button.svelte';
@@ -47,6 +53,10 @@
     interface DriftServer { server: string; files: DriftFile[] }
     interface DriftPreview { totalDrift: number; servers: DriftServer[] }
 
+    let loadError = $state('');
+    let limit = $state(25);
+    let driftLimit = $state(25);
+    $effect(() => { driftFilter; driftLimit = 25; });
     let deployments = $state<Deployment[]>([]);
     let loading = $state(true);
     let drift = $state<DriftPreview | null>(null);
@@ -54,20 +64,28 @@
     let running = $state(false);
     let rollingBack = $state<string | null>(null);
     let flash = $state<string | null>(null);
+    let driftError = $state('');
     // Drift panel opens automatically when there's a problem; collapses when clean.
     let driftOpen = $state(false);
     let driftFilter = $state('');
 
     async function loadCampaigns(): Promise<void> {
-        const res = await fetch('/api/campaigns');
-        const body = (await res.json()) as { deployments: Deployment[] };
-        deployments = body.deployments;
+        try {
+            const res = await fetch('/api/campaigns');
+            if (!res.ok) throw new Error('Could not refresh rollouts.');
+            deployments = (await res.json()).deployments; loadError = '';
+        } catch (error) { loadError = (error as Error).message; }
+        finally { loading = false; }
     }
     async function scanDrift(): Promise<void> {
+        if (scanning) return;
         scanning = true;
         try {
             const res = await fetch('/api/drift');
+            if (!res.ok) throw new Error('Could not scan drift.');
             drift = (await res.json()) as DriftPreview;
+            driftError = '';
+        } catch (error) { driftError = (error as Error).message;
         } finally {
             scanning = false;
         }
@@ -97,7 +115,7 @@
         if (driftCounts.untracked > 0) parts.push(`delete ${driftCounts.untracked} untracked file(s)`);
         if (driftCounts.missing > 0) parts.push(`restore ${driftCounts.missing} missing artifact(s)`);
         if (driftCounts.replace > 0) parts.push(`replace ${driftCounts.replace} existing artifact(s)`);
-        if (!confirm(`Reconcile drift on ${drift.servers.length} server(s)? Will ${parts.join(' and ')}.`)) return;
+        if (!await confirmAction({ title:'Reconcile drift?', message:`This will ${parts.join(' and ')} across ${drift.servers.length} servers.`, confirmLabel:'Reconcile', danger:true })) return;
         running = true; flash = null;
         try {
             const res = await fetch('/api/drift', {
@@ -117,20 +135,12 @@
             if (restored > 0) parts2.push(`installed ${restored}`);
             flash = `${parts2.join(', ') || 'no'} file(s) across ${body.result?.totalServers ?? 0} server(s)`;
             await Promise.all([loadCampaigns(), scanDrift()]);
-        } finally {
+        } catch (error) { flash = (error as Error).message; } finally {
             running = false;
         }
     }
 
-    let poll: ReturnType<typeof setInterval> | null = null;
-    onMount(async () => {
-        await Promise.all([loadCampaigns(), scanDrift()]);
-        loading = false;
-        poll = setInterval(loadCampaigns, 5000);
-    });
-    onDestroy(() => {
-        if (poll) clearInterval(poll);
-    });
+    onMount(() => { void scanDrift(); return pollVisible(loadCampaigns, 5000); });
 
     function isActive(d: Deployment): boolean {
         return d.servers.some((s) => s.restart_state === 'pending' || s.restart_state === 'failed');
@@ -142,13 +152,6 @@
         if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h ago`;
         return `${Math.floor(d / 86_400_000)}d ago`;
     }
-    function stateBadgeVariant(s: string): 'online' | 'danger' | 'warning' | 'info' | 'neutral' {
-        return s === 'done'    ? 'online' :
-               s === 'failed'  ? 'danger' :
-               s === 'pending' ? 'warning' :
-               s === 'held'    ? 'info' :
-                                 'neutral';
-    }
 
     let active = $derived(deployments.filter(isActive));
     let history = $derived(deployments.filter((d) => !isActive(d)));
@@ -169,16 +172,16 @@
         ev.preventDefault();
         ev.stopPropagation();
         const summary = scriptSummary(d) || 'this promote';
-        if (!confirm(`Rollback ${summary} on ${d.servers.length} server(s)?`)) return;
+        if (!await confirmAction({ title:'Roll back promotion?', message:`Restore the previous version of ${summary} on ${d.servers.length} servers.`, confirmLabel:'Roll back', danger:true })) return;
         rollingBack = d.id;
         flash = null;
         try {
             const res = await fetch(`/api/campaigns/${d.id}/rollback`, { method: 'POST' });
             const body = (await res.json()) as { ok: boolean; error?: string };
             if (!body.ok) { flash = body.error ?? 'rollback failed'; return; }
-            flash = 'Rollback campaign opened';
+            flash = 'Rollback started';
             await loadCampaigns();
-        } finally {
+        } catch (error) { flash = (error as Error).message; } finally {
             rollingBack = null;
         }
     }
@@ -186,7 +189,7 @@
     // History grouped by day for a nice timeline read.
     let historyByDay = $derived.by(() => {
         const groups = new Map<string, Deployment[]>();
-        for (const d of history) {
+        for (const d of history.slice(0,limit)) {
             const key = new Date(d.started_at).toDateString();
             if (!groups.has(key)) groups.set(key, []);
             groups.get(key)!.push(d);
@@ -197,29 +200,27 @@
     // Drift filtering — spare the operator's eyes on huge fleets.
     let filteredDriftServers = $derived(
         drift?.servers.filter((s) =>
-            !driftFilter || s.server.toLowerCase().includes(driftFilter.toLowerCase())
+            !driftFilter || (s.server + ' ' + serverTitle(s.server)).toLowerCase().includes(driftFilter.toLowerCase())
         ) ?? []
     );
 </script>
 
 <div class="page">
     <SectionHeader
-        title="Campaigns"
-        subtitle="Fleet campaigns, drift reconciliation, and rollbacks. Servers restart in stages as earlier servers recover."
+        title="Rollouts"
+        subtitle="Track file rollouts, reconcile drift, and review rollbacks."
     />
 
+    {#if loadError}<div class="ui-error" role="alert">{loadError}<Button size="sm" onclick={loadCampaigns}>Retry</Button></div>{/if}
     {#if loading}
         <div class="loading">Loading…</div>
     {:else}
         <!-- Drift summary — collapsed by default when there's no problem. -->
         <Card padding="lg">
-            <button
-                type="button"
-                class="drift-summary"
-                aria-expanded={driftOpen}
-                onclick={() => (driftOpen = !driftOpen)}
-            >
-                <div class="drift-summary-l">
+            {#if driftError}<div class="ui-error" role="alert">{driftError}<Button size="sm" onclick={scanDrift} disabled={scanning}>Retry scan</Button></div>{/if}
+            <div class="drift-summary">
+                <button class="drift-summary-l" aria-expanded={driftOpen} aria-controls="drift-body" onclick={() => driftOpen = !driftOpen}>
+
                     <span class="chev" class:open={driftOpen} aria-hidden="true">›</span>
                     <span class="drift-title">Drift</span>
                     {#if drift === null}
@@ -240,8 +241,8 @@
                             across {drift.servers.length} server{drift.servers.length === 1 ? '' : 's'}
                         </span>
                     {/if}
-                </div>
-                <div class="drift-summary-r" onclick={(e) => e.stopPropagation()} role="none">
+                </button>
+                <div class="drift-summary-r">
                     <Button variant="ghost" size="sm" onclick={scanDrift} disabled={scanning || running} loading={scanning}>
                         Rescan
                     </Button>
@@ -255,21 +256,21 @@
                         Reconcile
                     </Button>
                 </div>
-            </button>
+            </div>
 
             {#if driftOpen}
-                <div class="drift-body">
+                <div class="drift-body" id="drift-body">
                     {#if drift && drift.totalDrift > 0}
                         <input
-                            class="drift-filter"
+                            class="drift-filter" aria-label="Filter drift by server"
                             type="search"
                             placeholder="Filter by server name…"
                             bind:value={driftFilter}
                         />
-                        {#each filteredDriftServers as s (s.server)}
+                        {#each filteredDriftServers.slice(0,driftLimit) as s (s.server)}
                             <div class="drift-server">
                                 <div class="drift-server-head">
-                                    <span class="server-name">{s.server}</span>
+                                    <span class="server-name"><ServerIdentity name={s.server} /></span>
                                     <span class="server-count">{s.files.length} entr{s.files.length === 1 ? 'y' : 'ies'}</span>
                                 </div>
                                 <div class="drift-files">
@@ -286,6 +287,7 @@
                                 </div>
                             </div>
                         {/each}
+                        <ListFooter total={filteredDriftServers.length} bind:limit={driftLimit} label="servers" />
                     {:else if drift?.totalDrift === 0}
                         <EmptyState title="Inventory matches disk" description="Nothing to reconcile." />
                     {:else}
@@ -308,7 +310,7 @@
             {#if active.length === 0}
                 <EmptyState
                     title="Nothing in flight"
-                    description="Push scripts or open a beta to see campaigns here."
+                    description="Promote a beta to roll out tested files to the fleet."
                 />
             {:else}
                 <div class="deploy-list">
@@ -327,7 +329,7 @@
             </div>
             {#if history.length === 0}
                 <EmptyState
-                    title="No completed campaigns in the retention window"
+                    title="No completed rollouts in the retention window"
                     description="Retention is 7 days by default."
                 />
             {:else}
@@ -343,14 +345,15 @@
                 {/each}
             {/if}
         </section>
+        <ListFooter total={history.length} bind:limit label="rollouts" />
     {/if}
 </div>
 
 {#snippet deployRow(d: Deployment)}
-    <a class="deploy-row" href="/campaigns/{d.id}">
+    <article class="deploy-row">
         <div class="row-head">
             <div class="row-head-l">
-                <span class="action">{d.action}</span>
+                <a class="action" href="/campaigns/{d.id}">{d.action} rollout <span class="sr-only">{d.id}</span></a>
                 {#if d.action === 'promote' || d.action === 'rollback'}
                     <span class="target">{scriptSummary(d)}</span>
                 {/if}
@@ -381,7 +384,7 @@
                     title="{s.server}: {s.restart_state}{s.error ? ' — ' + s.error : ''}"
                 >
                     <span class="dot"></span>
-                    <span class="node-label">{s.server}{s.players !== null && s.players > 0 ? ` (${s.players}p)` : ''}</span>
+                    <span class="node-label">{serverTitle(s.server)}{s.players !== null && s.players > 0 ? ` (${s.players}p)` : ''}</span>
                 </span>
             {/each}
         </div>
@@ -391,12 +394,12 @@
                 {#each ['done','pending','failed','held','manual'] as state}
                     {@const n = d.servers.filter((s) => s.restart_state === state).length}
                     {#if n > 0}
-                        <Badge variant={stateBadgeVariant(state)} size="sm">{n} {state}</Badge>
+                        <span class="state-count">{n} <StatusBadge {state} size="sm" /></span>
                     {/if}
                 {/each}
             </div>
         </div>
-    </a>
+    </article>
 {/snippet}
 
 <style>
@@ -664,4 +667,7 @@
         .drift-summary { flex-direction: column; align-items: flex-start; }
         .drift-summary-r { width: 100%; justify-content: flex-end; }
     }
+    .drift-summary-l { padding:0; background:transparent; border:0; color:inherit; text-align:left; cursor:pointer; }
+    .state-count { display:inline-flex; align-items:center; gap:5px; }
+    .action { color:var(--text-primary); text-decoration:underline; text-underline-offset:4px; }
 </style>