From 2ff4cddf9dcc50ee469916d9459bd97349548724 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Mon, 3 Aug 2026 18:29:08 +0200
Subject: [PATCH] =?UTF-8?q?frontend:=20hive-warn=20=E2=80=94=20replace=20s?=
 =?UTF-8?q?everity+pulse=20with=20info/warning/error=20levels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

mara, PR review: "i dont like that they still have different styling.
if anything, there should be distinction between info,warning,error
(semantics). all warnings should be styled identically."

Replaces the severity ('amber'|'red') + standalone pulse boolean with
a single level ('info'|'warning'|'error') attribute -- a fixed
three-tier ladder instead of an open combination. Colours reuse
theme.css's own already-documented semantics rather than inventing new
ones: --cyan is already "info accents", --amber already "warnings",
--red already "errors, fail state". Pulse is now baked into `error`
specifically rather than a separate opt-in knob, since the one call
site that wanted attention-grabbing (an active incident) is also the
one that's semantically error -- tying the two together removes a
combination that shouldn't exist independently of the tier.

Reclassified the three call sites explicitly (no implicit default
relied on): credentials.html's GitHub PAT advisory and core.js's K3PT
ST4T3 caveat are both `level="warning"` (same as before, and now
identical to each other by construction, not by coincidence);
swarm.js's port-collision banner is `level="error"` (an active
incident needing operator action now, not a standing caveat).

npm run build clean both packages, grepped for leftover
severity/pulse references (only prose mentions describing what this
replaces).
---
 frontend/packages/dashboard/src/core.js       |  2 +-
 .../packages/dashboard/src/credentials.html   |  2 +-
 frontend/packages/dashboard/src/swarm.js      |  2 +-
 .../shared/src/hive-warn/hive-warn.css        | 44 ++++++++++---------
 .../shared/src/hive-warn/hive-warn.js         | 20 +++++----
 5 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/frontend/packages/dashboard/src/core.js b/frontend/packages/dashboard/src/core.js
index f0bc9e8f..457f2236 100644
--- a/frontend/packages/dashboard/src/core.js
+++ b/frontend/packages/dashboard/src/core.js
@@ -50,7 +50,7 @@ function renderTombstones(s) {
   // Wording is deliberately about what the list *is* rather than what it
   // isn't: nothing records a destroy, so "container absent" is the only thing
   // the backend can actually tell.
-  const warn = el('hive-warn', {});
+  const warn = el('hive-warn', { level: 'warning' });
   warn.append(
     el('strong', {}, 'shows every agent whose container is absent'),
     ' — not only destroyed ones. An agent part-way through being spawned ' +
diff --git a/frontend/packages/dashboard/src/credentials.html b/frontend/packages/dashboard/src/credentials.html
index 98042d12..d4d14f26 100644
--- a/frontend/packages/dashboard/src/credentials.html
+++ b/frontend/packages/dashboard/src/credentials.html
@@ -90,7 +90,7 @@
          Security-warning banner + a link to generate a PAT. -->
     <section class="cred-pane" id="cred-pane-github" data-tab-pane="github"
              role="tabpanel" aria-labelledby="cred-tab-github" hidden>
-      <hive-warn>
+      <hive-warn level="warning">
         ⚠ use a <strong>dedicated bot account</strong>, not a human's &mdash;
         and a <strong>minimally-scoped</strong> personal access token (only
         the repos/scopes the agent actually needs, e.g. <code>repo</code> +
diff --git a/frontend/packages/dashboard/src/swarm.js b/frontend/packages/dashboard/src/swarm.js
index 6dbcf1a9..4e827807 100644
--- a/frontend/packages/dashboard/src/swarm.js
+++ b/frontend/packages/dashboard/src/swarm.js
@@ -582,7 +582,7 @@ export function renderContainers(s) {
   // rebuild. The banner sits above the agent list so it's the
   // first thing the operator sees when something's wedged.
   if (portConflicts.length) {
-    const banner = el('hive-warn', { severity: 'red', pulse: '' },
+    const banner = el('hive-warn', { level: 'error' },
       el('strong', {}, '⚠  port collision'), ' — ');
     const groups = portConflicts.map((c) =>
       `:${c.port} (${c.agents.join(' + ')})`).join('; ');
diff --git a/frontend/packages/shared/src/hive-warn/hive-warn.css b/frontend/packages/shared/src/hive-warn/hive-warn.css
index 74952b2e..45ad0e64 100644
--- a/frontend/packages/shared/src/hive-warn/hive-warn.css
+++ b/frontend/packages/shared/src/hive-warn/hive-warn.css
@@ -1,15 +1,20 @@
 /* hive-warn.css — shadow-DOM stylesheet for the <hive-warn> autonomous
-   custom element (hive-warn.js). `severity` is an attribute on the HOST
+   custom element (hive-warn.js). `level` is an attribute on the HOST
    (how callers set it, `hive-warn.js`'s own header explains why) —
-   `:host([severity="…"])` sets `color`/`border-color`/`background`,
-   which the shadow content then inherits/reads via `currentColor`, same
-   pattern as hive-btn.css's `[variant]`. Default (no `severity` set) is
-   amber — the more common case among the three call sites this replaces.
+   `:host([level="…"])` sets `color`/`border-color`/`background`/
+   whether it pulses, same pattern as hive-btn.css's `[variant]`.
 
-   Tint is a single canonical 8% for both severities — `.cred-warning`
-   (the amber call site) was independently written at 10%, `.tombstone-warn`
-   at 8%; picking one number is the whole point of this component
-   existing (mara, on review: "so they are all themed consistently"). */
+   Three levels, not an open-ended severity+modifier combination (mara,
+   on review: "there should be distinction between info, warning, error
+   — all warnings should be styled identically"). Colours reuse
+   theme.css's own documented semantics rather than inventing new
+   ones: --cyan is already "info accents", --amber already "warnings",
+   --red already "errors, fail state" (see theme.css's :root comments).
+   Pulse is baked into `error` specifically, not a separate opt-in
+   knob — the one call site that wants attention-grabbing (an active
+   incident) is also the one call site that's semantically `error`, so
+   tying the two together removes a combination that shouldn't exist
+   independently of the tier. */
 
 :host {
   display: block;
@@ -20,20 +25,19 @@
   color: var(--amber);
   background: color-mix(in srgb, var(--amber) 8%, transparent);
 }
-:host([severity="red"]) {
+:host([level="info"]) {
+  border-color: var(--cyan);
+  color: var(--cyan);
+  background: color-mix(in srgb, var(--cyan) 8%, transparent);
+}
+:host([level="error"]) {
   border-color: var(--red);
   color: var(--red);
   background: color-mix(in srgb, var(--red) 8%, transparent);
-}
-
-/* `pulse`: opt-in, for "something is wrong right now" rather than a
-   standing caveat — deliberately not the default. A banner that's
-   always present and always pulsing just trains you to stop seeing it
-   (the reasoning on the original `.tombstone-warn`, which stays
-   non-pulsing; `.port-conflict → severity="red" pulse` is the one
-   call site that wants it). `currentColor` throughout so the glow
-   matches whichever severity is active without a second color switch. */
-:host([pulse]) {
+  /* Only `error` pulses — an active incident, not a standing caveat.
+     A banner that's always present and always pulsing just trains you
+     to stop seeing it, so `info`/`warning` deliberately stay still.
+     `currentColor` so the glow matches without a second colour switch. */
   text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
   animation: hive-warn-pulse 2.4s ease-in-out infinite;
 }
diff --git a/frontend/packages/shared/src/hive-warn/hive-warn.js b/frontend/packages/shared/src/hive-warn/hive-warn.js
index 7fbf9aa2..0cc62375 100644
--- a/frontend/packages/shared/src/hive-warn/hive-warn.js
+++ b/frontend/packages/shared/src/hive-warn/hive-warn.js
@@ -7,11 +7,15 @@
 // not three genuinely different needs.
 //
 // Purely presentational — no internal state, no lifecycle beyond
-// attaching its shadow root once. `severity` ('amber' | 'red', default
-// amber) and `pulse` (boolean) are read directly by hive-warn.css's
-// `:host([...])` selectors; unlike `<hive-btn>`'s `variant`/`disabled`
-// there's no inner native element that needs the attribute mirrored
-// onto it, so no `attributeChangedCallback` is needed at all.
+// attaching its shadow root once. `level` ('info' | 'warning' | 'error',
+// default 'warning') is read directly by hive-warn.css's
+// `:host([level="…"])` selectors — a fixed three-tier semantic ladder,
+// not an open severity+modifier combination (mara, on review: "there
+// should be distinction between info, warning, error — all warnings
+// should be styled identically"). Unlike `<hive-btn>`'s
+// `variant`/`disabled` there's no inner native element that needs the
+// attribute mirrored onto it, so no `attributeChangedCallback` is
+// needed at all — the CSS reads the host attribute directly.
 //
 // Content is arbitrary light-DOM children through the shadow tree's
 // single default `<slot>` — same reuse of the existing `<strong>`/
@@ -19,9 +23,9 @@
 // rewrite of their message content needed.
 //
 // Usage:
-//   `<hive-warn>...</hive-warn>`                    (amber, static HTML)
-//   `el('hive-warn', {}, ...)`                       (amber, JS-built)
-//   `el('hive-warn', { severity: 'red', pulse: '' }, ...)` (urgent)
+//   `<hive-warn level="warning">...</hive-warn>`     (static HTML)
+//   `el('hive-warn', { level: 'warning' }, ...)`      (JS-built)
+//   `el('hive-warn', { level: 'error' }, ...)`         (active incident, pulses)
 
 import { attachShadowCss } from '../shadow-css.js';
 import hiveWarnCss from './hive-warn.css';