feat(ui): rebuild proving progress as a stat panel, drop the estimate

Progress is now a panel of stat tiles rather than dim 11px lines, and a
custom prover's extra fields render in the same grid.

Author: buffrr

subs/src/background.rs

@@ -207,10 +207,13 @@ async fn proving_loop(state: AppState) {
                     }
                 }
             } else {
-                // Only fetch and store the estimate; proving is user-initiated via the UI
-                if let Err(e) = fetch_and_store_estimate(&state, &prover_endpoint, prover_auth_token.as_deref(), space, commitment_id, &request).await {
-                    tracing::debug!("[{}] Could not fetch estimate: {}", space, e);
-                }
+                // Estimate fetching is disabled along with its UI. It ran on
+                // every pass — unguarded — and /estimate executes the guest to
+                // count cycles, so an unproven commitment re-executed it every
+                // 10s indefinitely, for a figure nothing renders and that read
+                // ~43% low anyway (calibration measures composite(), real jobs
+                // run succinct()). Re-enable together with the display.
+                let _ = &request;
             }
         }
 
@@ -220,6 +223,11 @@ async fn proving_loop(state: AppState) {
 }
 
 /// Fetch a proving estimate from the prover and store it on the commitment.
+///
+/// Currently unused: see the call site in the proving loop for why estimates
+/// are off. Kept so re-enabling is a one-line change once calibration measures
+/// the phase real jobs actually run.
+#[allow(dead_code)]
 async fn fetch_and_store_estimate(
     state: &AppState,
     prover_endpoint: &str,

subs/templates/base.html

@@ -756,6 +756,73 @@
 .animate-pulse { animation: pulse 2s ease-in-out infinite; }
 @keyframes shimmer { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
 .shimmer { animation: shimmer 2s ease-in-out infinite; }
+/* === PROVING PROGRESS === */
+.prove-panel {
+  margin-top: 12px; padding: 14px;
+  background: var(--bg-base); border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+}
+.prove-head {
+  display: flex; align-items: baseline; justify-content: space-between;
+  gap: 12px; margin-bottom: 10px;
+}
+.prove-phase { font-size: 13px; color: var(--text-primary); font-weight: 500; }
+.prove-phase-num {
+  font-family: var(--mono); font-size: 10px; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.04em;
+}
+/* Taller than a hairline: this is the primary indicator on the panel, and at
+   6px it read as a divider rather than a progress bar. */
+.prove-track {
+  height: 10px; background: var(--bg-raised);
+  border-radius: 5px; overflow: hidden; position: relative;
+}
+.prove-fill {
+  height: 100%; background: var(--accent); border-radius: 5px;
+  transition: width 1s linear;
+}
+/* Indeterminate: work is happening but its duration is unknowable. Used for
+   proving phase 2, where risc0 exposes no hook to measure against. Travels the
+   full track rather than parking at one end, so it reads as "still working". */
+.prove-fill-indeterminate {
+  position: absolute; top: 0; left: 0; height: 100%; width: 42%;
+  border-radius: 5px;
+  background: linear-gradient(90deg,
+    transparent, var(--accent) 18%, var(--accent) 82%, transparent);
+  animation: indeterminate 1.8s ease-in-out infinite;
+}
+/* Travel is kept just short of fully clearing the track at each end, so the
+   stripe is visible at essentially every frame rather than spending part of
+   each cycle off-screen looking like a stalled bar. */
+@keyframes indeterminate {
+  0%   { transform: translateX(-75%); }
+  100% { transform: translateX(240%); }
+}
+/* Auto-fit so a custom prover's extra fields flow into the same grid without
+   the layout needing to know how many there will be. */
+.prove-stats {
+  margin-top: 12px; display: grid; gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
+}
+.prove-stat {
+  background: var(--bg-surface); border: 1px solid var(--border-subtle);
+  border-radius: 7px; padding: 8px 10px;
+  display: flex; flex-direction: column; gap: 3px; min-width: 0;
+}
+.prove-stat-label {
+  font-family: var(--mono); font-size: 9px; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.05em;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.prove-stat-value {
+  font-family: var(--mono); font-size: 14px; color: var(--text-primary);
+  line-height: 1.25; overflow-wrap: anywhere;
+}
+/* The one number people are actually waiting on. */
+.prove-stat-accent .prove-stat-value { color: var(--accent); }
+.prove-stat-note {
+  font-size: 10px; color: var(--text-muted); line-height: 1.3;
+}
 
 /* === SCROLLBAR === */
 .scrollbar-thin::-webkit-scrollbar { width: 4px; }

subs/templates/space.html

@@ -244,10 +244,16 @@ <h3>Handles</h3>
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
+// Escapes for text *and* attribute contexts. The previous version round-tripped
+// through div.textContent/innerHTML, which escapes only & < > — leaving quotes
+// intact, so anything interpolated into title="…" or onclick="…('…')" could
+// break out of the attribute. Values reaching here include field names chosen
+// by whichever prover is configured. Entities still render as the literal
+// characters in text contexts, so this is safe everywhere.
 function esc(t) {
-    const d = document.createElement('div');
-    d.textContent = t;
-    return d.innerHTML;
+    return String(t == null ? '' : t).replace(/[&<>"']/g, c => ({
+        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+    })[c]);
 }
 
 function $(id) { return document.getElementById(id); }
@@ -419,6 +425,31 @@ <h3>Handles</h3>
     $('pipelineStepper').innerHTML = h;
 }
 
+// Cycle counts run to millions, where exact digits are noise.
+function fmtCycles(n) {
+    if (n == null) return null;
+    if (n >= 1e9) return `${(n / 1e9).toFixed(1)}B`;
+    if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+    if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+    return `${n}`;
+}
+
+// Compact form for stat tiles, where "1 minute 32 seconds" wraps to two lines
+// and buries the number. Prose elsewhere still uses fmtDuration.
+function fmtDurationShort(sec) {
+    if (sec == null) return null;
+    const total = Math.max(0, Math.round(sec));
+    if (total < 60) return `${total}s`;
+    const mins = Math.floor(total / 60);
+    if (mins < 60) {
+        const secs = total % 60;
+        return secs === 0 ? `${mins}m` : `${mins}m ${secs}s`;
+    }
+    const hours = Math.floor(mins / 60);
+    const remMins = mins % 60;
+    return remMins === 0 ? `${hours}h` : `${hours}h ${remMins}m`;
+}
+
 function fmtDuration(sec) {
     if (sec == null) return null;
     const total = Math.max(0, Math.round(sec));
@@ -457,51 +488,86 @@ <h3>Handles</h3>
     // executor is still running before the first segment is proven.
     if (!p || !p.segments) return idRow;
 
-    const pct = Math.min(100, Math.round((p.segments_done / p.segments) * 100));
-    const elapsed = fmtDuration(p.elapsed_seconds);
-    const remaining = p.estimated_total_seconds != null
-        ? fmtDuration(Math.max(0, p.estimated_total_seconds - p.elapsed_seconds))
-        : null;
+    // `title` carries any explanation, so the tiles stay uniform instead of
+    // growing a line of prose underneath.
+    const stat = (label, value, opts = {}) => `
+        <div class="prove-stat${opts.accent ? ' prove-stat-accent' : ''}"${opts.title ? ` title="${esc(opts.title)}"` : ''}>
+            <span class="prove-stat-label">${esc(label)}</span>
+            <span class="prove-stat-value">${esc(value)}</span>
+        </div>`;
+
+    const elapsed = fmtDurationShort(p.elapsed_seconds);
+    const phaseTotal = p.phase_total || 1;
+    // Phase 2 is lift/join/resolve. risc0 fires no hook during it, so there is
+    // nothing to measure and nothing to extrapolate — it gets a moving bar
+    // with no percentage rather than a full one that sits there. On a measured
+    // single-segment proof this phase was 28.1s of 38.8s, so a bar pinned at
+    // 100% for its duration was the most misleading thing on the page.
+    const inPhaseTwo = phaseTotal > 1 && p.phase >= 2;
+    // An indeterminate bar is also right for the first segment: nothing has
+    // been timed yet, so there is no honest position to draw.
+    const indeterminate = inPhaseTwo || p.phase_one_fraction == null;
+    // Just the counter — the phase's description is the panel heading.
+    const phaseLabel = phaseTotal > 1 ? `Phase ${p.phase} of ${phaseTotal}` : null;
 
-    let meta = `${p.segments_done}/${p.segments} segments · ${elapsed} elapsed`;
     // No ETA until a segment lands — there is nothing to extrapolate from.
-    if (remaining) meta += ` · ~${remaining} remaining`;
+    // Absent for all of phase 2, by design. Its absence is not annotated: it is
+    // the normal case here, and saying so reads as a fault.
+    const remaining = p.estimated_total_seconds != null
+        ? fmtDurationShort(Math.max(0, p.estimated_total_seconds - p.elapsed_seconds))
+        : null;
 
-    let h = `<div style="margin-top:10px">
-        <div style="height:6px;background:var(--bg-base);border-radius:3px;overflow:hidden">
-            <div style="height:100%;width:${pct}%;background:var(--accent);transition:width .4s ease"></div>
+    // Driven by the prover's interpolated fraction, which advances within the
+    // segment being proven. A bar keyed on segments_done alone would sit still
+    // for the minute-plus each segment takes, then jump.
+    const bar = indeterminate
+        ? `<div class="prove-fill-indeterminate"></div>`
+        : `<div class="prove-fill" style="width:${Math.min(100, Math.round(p.phase_one_fraction * 100))}%"></div>`;
+
+    let h = `<div class="prove-panel">
+        <div class="prove-head">
+            <span class="prove-phase">${esc(inPhaseTwo ? 'Producing succinct receipt' : 'Proving segments')}</span>
+            ${phaseLabel ? `<span class="prove-phase-num">${esc(phaseLabel)}</span>` : ''}
         </div>
-        <div style="margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--text-muted)">
-            ${esc(meta)}
-        </div>`;
-
-    // The first segment carries GPU warm-up and any PTX JIT, so it is called
-    // out rather than averaged into the rate.
-    if (p.first_segment_seconds != null && p.segments_done > 1) {
-        h += `<div style="font-family:var(--mono);font-size:11px;color:var(--text-muted)">
-            first segment ${esc(fmtDuration(p.first_segment_seconds))} (includes warm-up)
-        </div>`;
+        <div class="prove-track">${bar}</div>
+        <div class="prove-stats">`;
+
+    // Ordered by what someone watching a proof actually wants: how much longer,
+    // then how long so far, then the work being done.
+    if (remaining) h += stat('remaining', `~${remaining}`, { accent: true });
+    h += stat('elapsed', elapsed);
+    if (!inPhaseTwo) h += stat('segments', `${p.segments_done}/${p.segments}`);
+    // Collected by the prover and forwarded all along, but previously listed in
+    // KNOWN (so skipped by the extras block) without being rendered anywhere —
+    // so cycle counts never reached the page at all.
+    if (p.total_cycles) h += stat('cycles', fmtCycles(p.total_cycles));
+    // Gated on `segments_done > 1` before, which a single-segment job never
+    // reaches — so on the proofs this actually produces it never rendered. It
+    // is the only number separating warm-up (PTX JIT) from steady-state rate.
+    if (p.first_segment_seconds != null && p.segments_done >= 1) {
+        h += stat('first segment', fmtDurationShort(p.first_segment_seconds), {
+            title: 'The first segment includes GPU warm-up and any PTX JIT, so it runs slower than the ones after it.',
+        });
     }
 
     // Whatever else the prover chose to report. A custom prover — the runpod
     // proxy, say — knows things this UI cannot anticipate: the GPU it rented,
-    // the pod's hourly rate, queue position. Rendered generically so no subs
-    // change is needed to surface a new one.
+    // the pod's hourly rate, queue position. They flow into the same grid as
+    // the built-in stats, so a new field looks native without a subs change.
     const KNOWN = new Set([
         'total_cycles', 'proving_cycles_done', 'segments', 'segments_done',
         'elapsed_seconds', 'estimated_total_seconds', 'first_segment_seconds',
+        'phase', 'phase_total', 'phase_one_fraction',
     ]);
-    const extras = Object.entries(p).filter(([k, v]) =>
-        !KNOWN.has(k) && v != null && typeof v !== 'object');
-
-    for (const [k, v] of extras) {
+    for (const [k, v] of Object.entries(p)) {
+        if (KNOWN.has(k) || v == null || typeof v === 'object') continue;
         const label = k.replace(/_/g, ' ');
-        const val = typeof v === 'number' ? v.toLocaleString() : String(v);
-        h += `<div style="font-family:var(--mono);font-size:11px;color:var(--text-muted)">
-            ${esc(label)}: <span style="color:var(--text-secondary)">${esc(val)}</span>
-        </div>`;
+        // Labels are ellipsized to keep tiles uniform, so the full name has to
+        // stay reachable — a custom prover can name a field anything.
+        h += stat(label, typeof v === 'number' ? v.toLocaleString() : String(v), { title: label });
     }
 
+    h += '</div>';
     return h + '</div>' + idRow;
 }
 
@@ -537,17 +603,13 @@ <h3>Handles</h3>
                         <span style="color:var(--text-muted)">(${total} pending)</span></span></div>`;
                 h += renderProvingProgress(r.proving_progress, r.proving_job_id);
             }
-            if (r.estimate) {
-                h += '<div style="margin-top:10px;padding:12px;background:var(--bg-base);border:1px solid var(--border-subtle);border-radius:8px">';
-                for (const [k, v] of Object.entries(r.estimate)) {
-                    if (v == null || typeof v === 'object') continue;
-                    const label = k.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-                    const val = typeof v === 'number' ? v.toLocaleString() : String(v);
-                    h += `<div style="font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-bottom:2px">
-                        <span>${esc(label)}:</span> <span style="color:var(--text-secondary)">${esc(val)}</span></div>`;
-                }
-                h += '</div>';
-            }
+            // The pre-prove estimate is not rendered. It is persisted on the
+            // commitment when fetched, so it outlives the prover that produced
+            // it and kept showing after calibration was turned off. Its timings
+            // are also wrong: calibration measures ProverOpts::composite(),
+            // which skips lift/join, while real jobs run succinct() — so it
+            // read ~43% low against a measured proof. The live progress in
+            // renderProvingProgress supersedes it.
             if (!r.proving_job_active) {
                 h += `<div class="flex gap-3" style="margin-top:10px">
                     <button onclick="startProving()" class="btn-primary">Prove${proofLabel ? ' ' + proofLabel.trim() : ''}</button>