Job status classes get an s- prefix: .done was the celebration card

"resolve: done" rendered <span class="done"> — which is the review
page's all-done celebration card class, so the status line became a
floating bordered card squatting on the Activity heading. Status
spans are now s-idle/s-running/s-done/s-failed, scoped under
#jobstate, and done earns its green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016jXZFSTZQKzAC8fqpWSz9g
This commit is contained in:
Eric Wagoner
2026-08-05 19:02:39 -04:00
co-authored by Claude Fable 5
parent e187ed4f3f
commit 7b6ea90934
5 changed files with 20 additions and 9 deletions
+3 -2
View File
@@ -411,8 +411,9 @@ button.danger { color: var(--stop-ink); border-color: var(--stop); background: #
max-height: 20rem; overflow-y: auto; white-space: pre-wrap;
}
#jobstate { font-size: .85rem; color: var(--ink); margin-bottom: .4rem; }
#jobstate .running { color: var(--accent-ink); font-weight: 600; }
#jobstate .failed { color: var(--stop-ink); font-weight: 600; }
#jobstate .s-running { color: var(--accent-ink); font-weight: 600; }
#jobstate .s-done { color: var(--go-ink); font-weight: 600; }
#jobstate .s-failed { color: var(--stop-ink); font-weight: 600; }
/* (phone-width rules live in the responsive section at the end) */
+3 -1
View File
@@ -75,7 +75,9 @@ function render() {
const job = P.job;
const state = document.getElementById("jobstate");
if (job.status === "idle") state.textContent = "idle";
else state.innerHTML = `<span class="${esc(job.status)}">${esc(job.stage)}: ${esc(job.status)}</span>` +
// s- prefix: a bare status class collides with page classes (.done is
// the review celebration card)
else state.innerHTML = `<span class="s-${esc(job.status)}">${esc(job.stage)}: ${esc(job.status)}</span>` +
(job.error ? `${esc(job.error)}` : "");
const logEl = document.getElementById("joblog");
const atBottom = logEl.scrollTop + logEl.clientHeight >= logEl.scrollHeight - 4;