Simplify beta lists and combine server test details

src/routes/betas/+page.svelte

@@ -9,10 +9,9 @@
     import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
     import Button from '$ui/components/primitives/Button.svelte';
     import Tabs from '$ui/components/primitives/Tabs.svelte';
-    import StatusBadge from '$ui/components/primitives/StatusBadge.svelte';
+    import Badge from '$ui/components/primitives/Badge.svelte';
+    import { betaStatus } from '$ui/betas.js';
     import EmptyState from '$ui/components/primitives/EmptyState.svelte';
-    import { statusPresentation } from '$lib/ui/status.js';
-    import { serverTitle } from '$ui/server-labels.js';
     type ArtifactKind = 'script' | 'config' | 'plugin' | 'baseline';
     interface BetaListRow {
         id: number;
@@ -29,7 +28,7 @@
             id: number; name: string; target_rel_path: string; kind: ArtifactKind;
             version: { id: number; version: number; release_version: string | null; sha256: string } | null;
         }>;
-        servers: Array<{ server: string; stage: string; error: string | null }>;
+        servers: Array<{ server: string; server_deleted_at?: string | null; stage: string; error: string | null }>;
     }
 
     let betas = $state<BetaListRow[]>([]);
@@ -37,6 +36,7 @@
     let error = $state('');
     let tab = $state('active');
     let search = $state('');
+    let status = $state('');
     let pageNumber = $state(1), totalPages = $state(1), total = $state(0);
     let counts = $state({ active: 0, history: 0 });
     let request = 0;
@@ -45,20 +45,16 @@
     let now = $state(Date.now());
 
     function age(date:string) { const minutes=Math.max(0,Math.floor((now-Date.parse(date))/60000));return minutes<60?`${minutes}m ago`:minutes<1440?`${Math.floor(minutes/60)}h ago`:`${Math.floor(minutes/1440)}d ago`; }
-    function blocker(beta:BetaListRow) {
-        if(beta.state==='promoted')return 'Version promoted; check its campaign for remaining activation.';
-        if(beta.state==='rolled-back')return 'Rolled back. The files and plan can be reused for another attempt.';
-        if(beta.state==='ready-promote')return 'Ready for promotion review.';
-        if(beta.testReason)return beta.testReason;
-        const problem=beta.servers.find(server=>server.error);
-        if(problem)return `${serverTitle(problem.server)}: ${problem.error}`;
-        const waiting=beta.servers.find(server=>server.stage!=='ready');
-        return waiting?`${serverTitle(waiting.server)}: ${statusPresentation(waiting.stage).label.toLowerCase()}.`:'Waiting for test evaluation.';
+    function deadlineLabel(beta: BetaListRow) {
+        if (!beta.deadlineAt || !active(beta) || beta.testOutcome === 'passed') return '';
+        const minutes = Math.ceil((Date.parse(beta.deadlineAt) - now) / 60000);
+        return minutes <= 0 ? 'Testing window ended' : minutes <= 120 ? `${minutes}m remaining` : '';
     }
     $effect(() => {
         const params = $page.url.searchParams;
         tab = params.get('view') === 'history' ? 'history' : 'active';
         search = params.get('q') ?? '';
+        status = params.get('status') ?? '';
         pageNumber = Math.max(1, Number(params.get('page')) || 1);
         void load(params);
     });
@@ -66,6 +62,7 @@
         const url = new URL($page.url);
         if (tab === 'history') url.searchParams.set('view', tab); else url.searchParams.delete('view');
         if (search) url.searchParams.set('q', search); else url.searchParams.delete('q');
+        if (status) url.searchParams.set('status', status); else url.searchParams.delete('status');
         url.searchParams.delete('limit');
         if (pageNumber > 1) url.searchParams.set('page', String(pageNumber)); else url.searchParams.delete('page');
         void goto(url, { replaceState: true, noScroll: true, keepFocus: true });
@@ -95,29 +92,62 @@
 </script>
 <svelte:head><title>Betas · Electric Cherry</title></svelte:head>
 <div class="page">
-    <SectionHeader title="Betas" subtitle="Test selected versions before promoting them to the fleet.">
+    <SectionHeader title="Betas">
         {#snippet actions()}<Button variant="primary" href="/betas/new">New beta</Button>{/snippet}
     </SectionHeader>
-    <Tabs {tabs} bind:value={tab} onchange={() => { pageNumber = 1; saveContext(); }} idPrefix="beta-tabs" panelId="beta-list" ariaLabel="Beta views" />
-    <div class="ui-toolbar"><input type="search" bind:value={search} oninput={event => { search = event.currentTarget.value; pageNumber = 1; saveContext(); }} aria-label="Search betas" placeholder="Search betas or files…" /></div>
+    <div class="toolbar">
+        <div class="view-tabs"><Tabs {tabs} bind:value={tab} onchange={() => { pageNumber = 1; status = ''; saveContext(); }} idPrefix="beta-tabs" panelId="beta-list" ariaLabel="Beta views" /></div>
+        <label class="search">Search<input type="search" bind:value={search} oninput={() => { pageNumber = 1; saveContext(); }} placeholder="Name, beta number, file, or server" maxlength="200" /></label>
+        <label>Status<select bind:value={status} onchange={() => { pageNumber = 1; saveContext(); }}>
+            <option value="">All statuses</option>
+            {#if tab === 'active'}<option value="ready">Ready to promote</option><option value="testing">Testing</option><option value="attention">Needs attention</option><option value="paused">Paused</option>
+            {:else}<option value="promoted">Promoted</option><option value="rolled-back">Rolled back</option>{/if}
+        </select></label>
+        {#if search || status}<Button variant="ghost" onclick={() => { search = ''; status = ''; pageNumber = 1; saveContext(); }}>Clear filters</Button>{/if}
+    </div>
     {#if error}<div class="ui-error" role="alert">{error} {betas.length ? 'Showing the last loaded results.' : ''}<Button size="sm" onclick={() => load()}>Retry</Button></div>{/if}
     <div id="beta-list" role="tabpanel" aria-labelledby={'beta-tabs-' + tab}>
         {#if loading}<EmptyState title="Loading betas…" />
-        {:else if !betas.length && !error}<EmptyState title={search ? 'No matching betas' : tab === 'active' ? 'No active betas' : 'No beta history'} description={tab === 'active' && !search ? 'Start a beta when you have a version ready to test.' : undefined} />
-        {:else}<div class="rows">{#each betas as beta (beta.id)}
-            <a href={contextHref('/betas/' + beta.id, $page.url)} class="row">
-                <div class="identity"><strong>{beta.notes || `Beta #${beta.id}`}</strong>{#if beta.notes}<span class="beta-id"> · #{beta.id}</span>{/if}<span class="files">{beta.scripts.map(s => s.name + ' · ' + artifactVersionLabel(s.version)).join(', ')}</span><span class="blocker">{blocker(beta)}</span><span class="timing"><time datetime={beta.opened_at} title={$timeFormat.dateTime(beta.opened_at)}>Opened {age(beta.opened_at)}</time>{#if beta.deadlineAt && active(beta)} · Ends {$timeFormat.dateTime(beta.deadlineAt)}{:else if beta.closed_at} · Finished {$timeFormat.dateTime(beta.closed_at)}{/if}</span></div>
-                <div class="meta"><StatusBadge state={beta.state} />{#if beta.testOutcome && beta.testOutcome !== 'active'}<StatusBadge state={beta.testOutcome} />{/if}<span>{beta.servers.filter(server=>server.stage==='ready').length} / {beta.servers.length} servers passed</span></div>
-            </a>
-        {/each}</div><div class="ui-toolbar" aria-label="Beta pagination"><span>{total} betas · Page {pageNumber} of {totalPages}</span><Button size="sm" disabled={pageNumber <= 1} onclick={() => { pageNumber--; saveContext(); }}>Previous</Button><Button size="sm" disabled={pageNumber >= totalPages} onclick={() => { pageNumber++; saveContext(); }}>Next</Button></div>{/if}
+        {:else if !betas.length && !error}<EmptyState title={search || status ? 'No matching betas' : tab === 'active' ? 'No active betas' : 'No beta history'} description={search || status ? 'Try another search or clear the filters.' : tab === 'active' ? 'Start a beta when you have a version ready to test.' : undefined} />
+        {:else}
+            <div class="table-scroll"><table>
+                <thead><tr><th scope="col">Beta</th><th scope="col">Files</th><th scope="col">Status</th><th scope="col" class="started">Started</th></tr></thead>
+                <tbody>{#each betas as beta (beta.id)}
+                    {@const presentation = betaStatus(beta)}
+                    {@const expiry = deadlineLabel(beta)}
+                    <tr>
+                        <td><a class="beta-link" href={contextHref('/betas/' + beta.id, $page.url)}>{beta.notes || `Beta #${beta.id}`}</a>{#if beta.notes}<span class="beta-id">#{beta.id}</span>{/if}</td>
+                        <td class="files">{#if beta.scripts.length === 1}{beta.scripts[0].name} <span>{artifactVersionLabel(beta.scripts[0].version)}</span>{:else}{beta.scripts.length} files{/if}</td>
+                        <td><Badge variant={presentation.tone} size="md">{presentation.label}</Badge>{#if expiry}<span class="expiry">{expiry}</span>{/if}</td>
+                        <td class="started"><button type="button" class="timestamp" aria-label={`Started ${$timeFormat.dateTime(beta.opened_at)}`}><time datetime={beta.opened_at}>{age(beta.opened_at)}</time><span class="exact-time" aria-hidden="true">{$timeFormat.dateTime(beta.opened_at)}</span></button></td>
+                    </tr>
+                {/each}</tbody>
+            </table></div>
+            {#if totalPages > 1}<div class="pagination" aria-label="Beta pagination"><span>{total} betas · Page {pageNumber} of {totalPages}</span><div><Button size="sm" disabled={pageNumber <= 1} onclick={() => { pageNumber--; saveContext(); }}>Previous</Button><Button size="sm" disabled={pageNumber >= totalPages} onclick={() => { pageNumber++; saveContext(); }}>Next</Button></div></div>{/if}
+        {/if}
     </div>
 </div>
 <style>
-    .page { display:grid; gap:24px; }
-    .rows { display:grid; gap:8px; }
-    .row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding:16px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); color:var(--text-primary); text-decoration:none; }
-    .row:hover { border-color:var(--border-strong); }
-    .files { display:block; margin-top:6px; font-size:13px; color:var(--text-secondary); overflow-wrap:anywhere; }
-    .meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--text-secondary); }
-    .identity { flex:1 1 320px; min-width:0; } .blocker,.timing { display:block; margin-top:8px; line-height:1.5; font-size:13px; overflow-wrap:anywhere; } .timing,.beta-id { color:var(--text-secondary); font-size:12px; }
+    .page { display:grid; gap:24px; min-width:0; }
+    .toolbar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
+    .view-tabs { align-self:flex-end; max-width:100%; }
+    label { display:grid; gap:6px; font-size:var(--text-xs); color:var(--text-secondary); }
+    .search { flex:1; min-width:240px; }
+    input,select { padding:10px 12px; min-height:40px; background:var(--surface-sunken); color:var(--text-primary); border:1px solid var(--border-control); border-radius:var(--radius-sm); font:inherit; font-size:var(--text-sm); }
+    .table-scroll { overflow-x:auto; }
+    table { width:100%; border-collapse:collapse; font-size:var(--text-sm); text-align:left; }
+    th { padding:10px 16px; border-bottom:1px solid var(--border-strong); color:var(--text-tertiary); font-size:var(--text-xs); font-weight:var(--weight-medium); }
+    td { padding:16px; border-bottom:1px solid var(--border-subtle); }
+    tbody tr:hover { background:var(--surface); }
+    .beta-link { font-weight:var(--weight-semibold); color:var(--text-primary); text-decoration:none; overflow-wrap:anywhere; }
+    .beta-link:hover { color:var(--accent-primary-hover); text-decoration:underline; }
+    .beta-id { margin-left:8px; font-size:var(--text-xs); color:var(--text-tertiary); }
+    .files { color:var(--text-secondary); overflow-wrap:anywhere; }.files span { white-space:nowrap; }
+    .expiry { display:block; margin-top:6px; font-size:var(--text-xs); color:var(--state-warning); }
+    .started { text-align:right; color:var(--text-secondary); }
+    .timestamp { position:relative; display:inline-block; white-space:nowrap; cursor:help; background:transparent; border:0; color:inherit; font:inherit; padding:0; }
+    .exact-time { display:none; position:absolute; right:0; bottom:100%; z-index:1; background:var(--surface-overlay); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:6px 10px; font-size:var(--text-xs); }
+    .timestamp:hover .exact-time,.timestamp:focus .exact-time { display:block; }
+    .pagination,.pagination > div { display:flex; align-items:center; gap:12px; }.pagination { justify-content:space-between; margin-top:16px; font-size:var(--text-sm); color:var(--text-secondary); }
+    @media(max-width:720px) { table { min-width:620px; } th,td { padding:12px 8px; }.search { flex-basis:100%; }.pagination { flex-wrap:wrap; } }
 </style>