From d1dcb131f27f05b6d8636321663c194a2d9b0a2e Mon Sep 17 00:00:00 2001
From: Mathias <mthbqv@gmail.com>
Date: Fri, 2 Oct 2026 09:00:23 +0200
Subject: [PATCH] feat(web): progress styles in tapir's own tokens -- a mono
 step log, a CSS spinner that respects reduced motion (ADR-035)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 internal/web/view.go | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/internal/web/view.go b/internal/web/view.go
index 32f808e..af81ffd 100644
--- a/internal/web/view.go
+++ b/internal/web/view.go
@@ -765,6 +765,30 @@ a.btn, a.btn:visited { color: var(--accent-fg); }
 .flash-success { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }
 .flash-error { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-line); }
 
+/* upload progress (ADR-035): a log of phases that fills in as the job runs */
+.steps { list-style: none; margin: var(--s3) 0; padding: 0; font-family: var(--mono); font-size: .86rem; }
+.step { display: flex; align-items: baseline; gap: var(--s2); padding: .2rem 0; color: var(--muted); flex-wrap: wrap; }
+.step-mark { flex: none; width: 1.1rem; text-align: center; }
+.step-label { flex: 1 1 auto; }
+.step-time { margin-left: auto; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
+.step-done { color: var(--fg); }
+.step-done .step-mark { color: var(--mint); }
+.step-running { color: var(--fg); font-weight: 600; }
+.step-running .step-mark { color: var(--accent); }
+.step-failed { color: var(--err-fg); }
+.step-skipped, .step-pending { color: var(--muted); }
+.step-skipped { opacity: .7; }
+.step-pending { opacity: .75; }
+.step-bar { flex: 1 0 100%; margin: 0 0 0 1.6rem; height: .5rem; accent-color: var(--accent); }
+.step-count { flex: 1 0 100%; margin-left: 1.6rem; font-weight: 400; color: var(--muted); }
+.spinner { display: inline-block; width: .8rem; height: .8rem; box-sizing: border-box; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: tapir-spin 1s linear infinite; }
+@keyframes tapir-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-color: var(--accent); } }
+.step-health { margin: var(--s2) 0; padding: var(--s2) var(--s3); border-radius: var(--radius); font-size: .9rem; border: 1px solid var(--line); }
+.step-health-lost { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-line); }
+.step-health-quiet { background: var(--accent-weak); color: var(--fg); border-color: var(--accent); }
+.what-was-done summary { cursor: pointer; color: var(--muted); }
+
 /* htmx loading feedback */
 .htmx-indicator { opacity: 0; transition: opacity .2s; color: var(--muted); font-size: .8rem; }
 .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }