frontend: hive-warn — replace severity+pulse with info/warning/error levels

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).
This commit is contained in:
iris 2026-08-03 18:29:08 +02:00 committed by mara
commit 2ff4cddf9d
5 changed files with 39 additions and 31 deletions

View file

@ -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 ' +

View file

@ -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> +

View file

@ -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('; ');

View file

@ -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;
}

View file

@ -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';