Improve operational UX, recovery flows, and action safety

Implement the approved UX review across Fleet, Betas, Library, deployments, and Settings. Add reviewed promotion and reconciliation plans, atomic queued-removal cancellation, recoverable beta drafts and launch inputs, accessible controls, and mobile improvements.

Validated with 473 tests, a clean typecheck, production build, and isolated desktop/mobile browser walkthroughs. Include the review and implementation coverage notes.

src/lib/ui/components/OperationHistory.svelte

@@ -3,6 +3,11 @@
     import Button from './primitives/Button.svelte';
     let { steps, events, active = false }: { steps: OperationStep[]; events: ActivityEvent[]; active?: boolean } = $props();
     let limit = $state(25);
+    let query = $state('');
+    let newestFirst = $state(true);
+    const latest = $derived(events.at(-1));
+    const matching = $derived(events.filter(event => event.message.toLowerCase().includes(query.toLowerCase())));
+    const visible = $derived(newestFirst ? matching.slice(-limit).reverse() : matching.slice(0, limit));
 </script>
 
 <section>
@@ -17,23 +22,37 @@
     </ol>
 </section>
 <section>
-    <div class="top"><h2>Activity</h2>{#if active}<span class="muted">Updates automatically</span>{/if}</div>
-    {#if events.length}
-        {#if events.length > limit}<Button size="sm" onclick={() => limit += 25}>Show earlier activity ({events.length - limit})</Button>{/if}
+    {#if latest}<p class="latest"><strong>Latest update</strong> {latest.message}<time datetime={latest.created_at}>{new Date(latest.created_at).toLocaleString()}</time></p>{/if}
+    <details>
+        <summary>Activity history · {events.length} events{active ? ' · updates automatically' : ''}</summary>
+        {#if events.length}
+        <div class="tools"><label>Search activity<input type="search" bind:value={query} oninput={() => limit = 25} placeholder="Server, stage, or message" /></label><label>Order<select bind:value={newestFirst}><option value={true}>Newest first</option><option value={false}>Oldest first</option></select></label></div>
         <ol class="timeline">
-            {#each events.slice(-limit) as event (event.id)}
+            {#each visible as event (event.id)}
                 <li><time datetime={event.created_at}>{new Date(event.created_at).toLocaleString()}</time><p>{event.message}</p></li>
             {/each}
         </ol>
+        {#if !matching.length}<p class="muted">No matching activity.</p>{/if}
+        {#if matching.length > limit}<Button size="sm" onclick={() => limit += 25}>Show more activity ({matching.length - limit})</Button>{/if}
     {:else}
         <p class="muted">This operation predates detailed activity tracking. Its recorded status and timestamps are shown on this page.</p>
     {/if}
+    </details>
 </section>
 
 <style>
     section { display: grid; gap: 16px; }
     h2 { font-size: 18px; margin: 0; }
-    .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+    details { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
+    summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
+    details[open] summary { margin-bottom: 16px; }
+    .latest { padding: 12px 16px; background: var(--surface); border-radius: var(--radius-md); font-size: var(--text-sm); }
+    .latest strong { display: block; margin-bottom: 4px; }
+    .latest time { display: block; margin-top: 4px; }
+    .tools { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
+    label { display: grid; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); }
+    label:first-child { flex: 1; min-width: 180px; }
+    input, select { background: var(--surface-sunken); color: var(--text-primary); border: 1px solid var(--border-control); padding: 9px 12px; border-radius: var(--radius-sm); font: inherit; }
     time, .muted { color: var(--text-secondary); font-size: 13px; }
     p { margin: 0; line-height: 1.6; }
     .flow { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; }