Unify UI workflows and streamline fleet management

src/lib/ui/components/OperationHistory.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { ActivityEvent, OperationStep } from '$lib/operation-flow.js';
+    import Button from './primitives/Button.svelte';
     let { steps, events, active = false }: { steps: OperationStep[]; events: ActivityEvent[]; active?: boolean } = $props();
+    let limit = $state(25);
 </script>
 
 <section>
@@ -17,8 +19,9 @@
 <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}
         <ol class="timeline">
-            {#each events as event (event.id)}
+            {#each events.slice(-limit) as event (event.id)}
                 <li><time datetime={event.created_at}>{new Date(event.created_at).toLocaleString()}</time><p>{event.message}</p></li>
             {/each}
         </ol>
@@ -34,7 +37,7 @@
     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; }
-    .flow li { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 8px; padding: 12px; font-size: 13px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
+    .flow li { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--radius-md); padding: 12px; font-size: 13px; border: 1px solid var(--border-subtle); color: var(--text-secondary); }
     .flow span { color: var(--accent-primary-hover); font-family: var(--font-mono); }
     .flow .done { color: var(--text-primary); }
     .flow .current { color: var(--text-primary); border-color: var(--accent-primary); }