Automate host preparation and speed up game file downloads

src/lib/ui/components/HostPreparation.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { Host } from '$lib/hosts.js';
+    import { formatGameBytes } from '$lib/game-files.js';
+    let { host }: { host: Host } = $props();
+</script>
+
+<div class="preparation" aria-live="polite">
+    <p>The default runtime and the latest published version of each game library are prepared automatically on active hosts. New versions leave running servers on their selected files.</p>
+    {#if host.preparation}
+        <p class="status" class:blocked={host.preparation.state === 'blocked'}>Automatic setup: {host.preparation.state === 'ready' ? 'Ready' : host.preparation.state === 'preparing' ? 'In progress' : host.preparation.state === 'blocked' ? 'Needs attention' : 'Waiting'}</p>
+        <ul>
+            {#each host.preparation.items as item}
+                <li>
+                    <div class="row"><strong>{item.label}</strong><span>{item.state === 'blocked' ? 'Needs attention' : item.state}</span></div>
+                    <p class:blocked={item.state === 'blocked'}>{item.detail}</p>
+                    {#if item.bytesTotal && item.bytesDownloaded !== undefined && item.state === 'preparing'}
+                        <progress max={item.bytesTotal} value={item.bytesDownloaded} aria-label={`${item.label} download progress`}></progress>
+                        <small>{formatGameBytes(item.bytesDownloaded)} / {formatGameBytes(item.bytesTotal)}</small>
+                    {/if}
+                </li>
+            {/each}
+        </ul>
+    {:else}<p>Setup progress will appear after the host connects.</p>{/if}
+    <p><a href="/game-files">Upload and view game-file libraries →</a></p>
+</div>
+
+<style>
+    .preparation { display:grid; gap:12px; } p { margin:0; color:var(--text-secondary); font-size:var(--text-sm); line-height:1.6; } .status { color:var(--text-primary); }
+    ul { list-style:none; padding:0; margin:0; display:grid; gap:16px; } li { min-width:0; } .row { display:flex; justify-content:space-between; gap:12px; font-size:var(--text-sm); } strong { overflow-wrap:anywhere; } span { text-transform:capitalize; color:var(--text-secondary); }
+    li p { margin-top:4px; } .blocked { color:var(--state-danger); } progress { width:100%; margin-top:8px; accent-color:var(--accent-primary); } small { display:block; color:var(--text-secondary); font-size:var(--text-xs); } a { color:var(--accent-primary-hover); }
+</style>