Separate game file downloads and verification with progress timing

src/lib/ui/components/HostPreparation.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Host } from '$lib/hosts.js';
     import { formatGameBytes } from '$lib/game-files.js';
+    import GameFileTransferProgress from '$ui/components/GameFileTransferProgress.svelte';
     let { host }: { host: Host } = $props();
 </script>
 
@@ -13,7 +14,9 @@
                 <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'}
+                    {#if item.cache && item.cache.status !== 'missing'}
+                        <div class="transfer"><GameFileTransferProgress cache={item.cache} connected={host.connected} /></div>
+                    {:else 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}
@@ -28,4 +31,5 @@
     .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); }
+    .transfer { margin-top:8px; }
 </style>