From a5e59df624a5c23b49d4b6bca3a43d089793b880 Mon Sep 17 00:00:00 2001 From: Vlad Doloman Date: Fri, 26 Jun 2026 18:29:45 +0300 Subject: [PATCH] feat: show loading stage name, count, and overall progress Progress bar now fills to overall completion across all stages. Label shows e.g. "text model 1/3 23%" and stats panel shows "text model (1/3)". Label bumped to 8px full amber for readability. Co-Authored-By: Claude Sonnet 4.6 --- frontend/app.js | 18 ++++++++++++++---- frontend/style.css | 4 ++-- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/frontend/app.js b/frontend/app.js index a8762cb..9eee482 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -58,10 +58,20 @@ // Progress bar: model loading or prompt processing if (loading) { - const pct = Math.round((loading.progress ?? 0) * 100); - progressFill.style.width = pct + '%'; - progressLabel.textContent = loading.current + ' ' + pct + '%'; - svLoadStage.textContent = loading.current; + const stageName = (loading.current ?? '').replace(/_/g, ' '); + const stageIdx = (loading.stages ?? []).indexOf(loading.current); + const totalStages = (loading.stages ?? []).length; + const stagePct = Math.round((loading.progress ?? 0) * 100); + const overallPct = totalStages > 0 + ? Math.round(((stageIdx + (loading.progress ?? 0)) / totalStages) * 100) + : stagePct; + progressFill.style.width = overallPct + '%'; + progressLabel.textContent = stageName + + (totalStages > 1 ? ' ' + (stageIdx + 1) + '/' + totalStages : '') + + ' ' + stagePct + '%'; + svLoadStage.textContent = totalStages > 1 + ? stageName + ' (' + (stageIdx + 1) + '/' + totalStages + ')' + : stageName; } else if (state === 'processing_prompt' && metrics && metrics.prompt_progress != null) { const pct = Math.round(metrics.prompt_progress * 100); progressFill.style.width = pct + '%'; diff --git a/frontend/style.css b/frontend/style.css index 5258967..22e990e 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -245,8 +245,8 @@ body.state-error #llama { animation: error-flash 1s ease-in-out infinite; } transition: width 0.4s ease; } #progress-label { - font-size: 7px; - color: var(--amber-dim); + font-size: 8px; + color: var(--amber); } /* ── Resize handle ───────────────────────────────────────────────────────── */