Fix things around processing pipeline

Author: vdavid

src/app.css

@@ -805,6 +805,21 @@ body::before {
     font-weight: 500;
 }
 
+.phase-info-estimate {
+    margin: 8px 0;
+    padding: 6px 10px;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.01em;
+    line-height: 1.6;
+    color: var(--color-foreground-secondary);
+    background-color: var(--color-canvas-secondary);
+    border: 1px solid var(--color-border);
+    border-left: 2px solid var(--color-accent);
+    border-radius: 4px;
+}
+
 /* Footer total time */
 .phase-footer-time {
     display: inline-flex;

src/lib/components/PipelineProgress.svelte

@@ -12,6 +12,7 @@
         processTotal: number
         processDate: string
         processElapsedMs: number
+        repoSizeBytes?: number | null
         oncancel: () => void
     }
 
@@ -26,6 +27,7 @@
         processTotal,
         processDate,
         processElapsedMs,
+        repoSizeBytes,
         oncancel,
     }: Props = $props()
 
@@ -94,10 +96,37 @@ ${statBlock}`
                             : ''
                     statBlock = `<span class="phase-info-stat"><span class="phase-info-stat-value">${formatBytes(snap.loaded)}</span> received${speed}</span>`
                 }
+
+                // Size estimate block — when we know the repo size, estimate compressed download range
+                const packRatioLow = 0.1
+                const packRatioHigh = 0.8
+                let sizeEstimateBlock = ''
+                if (repoSizeBytes != null && repoSizeBytes > 0) {
+                    const repoMb = formatMb(repoSizeBytes)
+                    const lowBytes = repoSizeBytes * packRatioLow
+                    const highBytes = repoSizeBytes * packRatioHigh
+                    const lowMb = formatMb(lowBytes)
+                    const highMb = formatMb(highBytes)
+                    const lowPctLabel = Math.round(packRatioLow * 100)
+                    const highPctLabel = Math.round(packRatioHigh * 100)
+
+                    const loaded = snap?.loaded ?? 0
+                    const progressLine =
+                        loaded > 0
+                            ? (() => {
+                                  const lowPct = Math.min(Math.round((loaded / lowBytes) * 100), 100)
+                                  const highPct = Math.min(Math.round((loaded / highBytes) * 100), 100)
+                                  return ` With <span class="phase-info-stat-value">${formatMb(loaded)} MB</span> downloaded, that\u2019s somewhere between <span class="phase-info-stat-value">${highPct}%</span> and <span class="phase-info-stat-value">${lowPct}%</span> done. That's all we know.`
+                              })()
+                            : ''
+
+                    sizeEstimateBlock = `<p class="phase-info-estimate">The repo is <span class="phase-info-stat-value">${repoMb} MB</span> uncompressed. Git packs are typically <span class="phase-info-stat-value">${lowPctLabel}\u2013${highPctLabel}%</span> of that, so expect roughly <span class="phase-info-stat-value">${lowMb}\u2013${highMb} MB</span> to download.${progressLine}</p>`
+                }
+
                 return `<p>This is the actual download \u2014 bytes flowing from the server through a CORS proxy into the browser. Everything runs in a Web Worker so the page stays responsive while data streams in.</p>
 <p>The pack file contains all the compressed objects from the previous step. Once it arrives, the objects still need to be unpacked and reconstructed.</p>
 <p>GitHub and other hosts often send data in bursts with long pauses between them \u2014 sometimes several minutes of silence. This is normal server behavior, not a connection problem.</p>
-${statBlock}`
+${sizeEstimateBlock}${statBlock}`
             }
 
             case 'resolve':
@@ -335,6 +364,11 @@ ${statBlock}`
 
     const formatNumber = (n: number): string => n.toLocaleString()
 
+    const formatMb = (bytes: number): string => {
+        const mb = bytes / (1024 * 1024)
+        return mb >= 100 ? Math.round(mb).toLocaleString() : mb.toFixed(1)
+    }
+
     const getPhaseDetail = (phaseDef: PhaseDefinition, state: PhaseState): string => {
         const snap = snapshots[phaseDef.id]
         if (!snap) return ''

src/routes/+page.svelte

@@ -113,15 +113,22 @@
         return parsed ? parsed.url : ''
     })
 
-    let autoStartedRepo = $state('')
+    // Auto-start from URL on initial page load only (e.g. shared links).
+    // Must not re-trigger on programmatic goto — goto is async, so comparing
+    // the URL-derived initialRepo with a stored string races and can start the wrong repo.
+    let hasAutoStarted = $state(false)
 
     $effect(() => {
-        if (browser && initialRepo && initialRepo !== autoStartedRepo) {
-            autoStartedRepo = initialRepo
+        if (browser && initialRepo && !hasAutoStarted) {
+            hasAutoStarted = true
             void startAnalysis(initialRepo)
         }
     })
 
+    // Generation counter: incremented on each startAnalysis call so stale async
+    // flows (cache lookups, fire-and-forget fetches) bail out when superseded.
+    let analysisGeneration = 0
+
     const startTimer = (kind: 'clone' | 'process') => {
         stopTimer()
         const startTime = Date.now()
@@ -296,19 +303,22 @@
         cancel()
         resetState()
         lastRepoInput = repoInput
+        const generation = ++analysisGeneration
 
         try {
             const parsed = parseRepoUrl(repoInput)
-            autoStartedRepo = repoInput // Prevent the URL-watching effect from re-triggering
+            hasAutoStarted = true // Prevent the URL-watching effect from re-triggering
             updateUrl(repoInput)
 
-            // Fetch repo size for display (fire-and-forget, non-blocking)
+            // Fetch repo size for display (fire-and-forget, non-blocking).
+            // Guarded by generation to avoid setting size for the wrong repo.
             void fetchRepoSizeBytes(parsed.host, parsed.owner, parsed.repo).then((size) => {
-                repoSizeBytes = size
+                if (generation === analysisGeneration) repoSizeBytes = size
             })
 
             // Check local cache first
             const cached = await getResult(parsed.url)
+            if (generation !== analysisGeneration) return
             if (cached) {
                 cachedResult = cached
                 result = cached
@@ -319,6 +329,7 @@
 
             // Check shared server cache on local miss
             const serverEntry = await fetchServerResult(parsed.url)
+            if (generation !== analysisGeneration) return
             if (serverEntry) {
                 cachedResult = serverEntry.result
                 result = serverEntry.result
@@ -332,6 +343,7 @@
             // Pre-clone size gate (GitHub only, skipped on force or API failure)
             if (!force) {
                 const sizeBytes = await fetchRepoSizeBytes(parsed.host, parsed.owner, parsed.repo)
+                if (generation !== analysisGeneration) return
                 if (sizeBytes !== null && sizeBytes > sizeGateThresholdBytes) {
                     sizeGateBytes = sizeBytes
                     return
@@ -343,6 +355,7 @@
                 await cancelCleanup
                 cancelCleanup = undefined
             }
+            if (generation !== analysisGeneration) return
 
             phase = 'cloning'
             startTimer('clone')
@@ -356,6 +369,7 @@
 
             await analyzer.analyze(repoInput, corsProxy, handleProgress)
         } catch (e) {
+            if (generation !== analysisGeneration) return
             stopTimer()
             if (phase !== 'error') {
                 phase = 'error'
@@ -371,6 +385,7 @@
 
     const dismissSizeGate = () => {
         sizeGateBytes = 0
+        updateUrl('')
     }
 
     let cancelCleanup: Promise<void> | undefined
@@ -384,6 +399,12 @@
         phase = 'idle'
     }
 
+    /** User-facing cancel: also resets URL so stale repo path doesn't linger. */
+    const handleUserCancel = () => {
+        cancel()
+        updateUrl('')
+    }
+
     const retry = () => {
         if (pendingRefresh) {
             // Re-attempt the failed refresh
@@ -621,7 +642,8 @@
                     {processTotal}
                     {processDate}
                     processElapsedMs={processElapsed}
-                    oncancel={cancel}
+                    {repoSizeBytes}
+                    oncancel={handleUserCancel}
                 />
             </div>
         {/if}
@@ -655,7 +677,7 @@
                         </p>
                         <div class="mt-3 flex items-center gap-3">
                             <button onclick={dismissSizeWarning} class="btn-primary text-sm"> Continue </button>
-                            <button onclick={cancel} class="btn-link text-sm"> Cancel </button>
+                            <button onclick={handleUserCancel} class="btn-link text-sm"> Cancel </button>
                         </div>
                     </div>
                 </div>