From a1263a9ed64fe89a67981e09d7688a9f56089890 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Mon, 27 Jul 2026 18:32:54 +0200
Subject: [PATCH] frontend: move shared spinner CSS out of dashboard.css into
 shared/base.css

asyncBtn() (shared/src/forms.js) is used by both the dashboard and the
per-agent UI, but its .spinner class + @keyframes spin animation only
lived in dashboard.css. The agent UI's loading spinner rendered as a
static unstyled glyph instead of the animated amber spinner the
dashboard gets. Moved the rule to shared/base.css, which both
common.css (dashboard) and agent.css already @import.
---
 frontend/packages/dashboard/src/dashboard.css |  6 ------
 frontend/packages/shared/src/base.css         | 13 +++++++++++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index ea2a096b..916518a6 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -650,12 +650,6 @@ ul form.inline { display: inline-block; }
   text-transform: uppercase;
 }
 .kind-spawn { color: var(--amber); border-color: var(--amber); }
-.spinner {
-  display: inline-block;
-  animation: spin 1s linear infinite;
-  color: var(--amber);
-}
-@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 details { margin-top: 0.5em; }
 summary {
   cursor: pointer;
diff --git a/frontend/packages/shared/src/base.css b/frontend/packages/shared/src/base.css
index 7136b8eb..47c908da 100644
--- a/frontend/packages/shared/src/base.css
+++ b/frontend/packages/shared/src/base.css
@@ -11,3 +11,16 @@ body {
   font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
   line-height: 1.6;
 }
+
+/* Loading spinner used by the shared `asyncBtn()` helper (forms.js) —
+   swapped into a button's content while its async action is in flight.
+   Lives here (not in a per-page stylesheet) because asyncBtn itself is
+   shared between the dashboard and the per-agent UI; keeping the CSS
+   with the JS component it styles avoids one consumer rendering an
+   unstyled, unanimated glyph. */
+.spinner {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+  color: var(--amber);
+}
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }