frontend: shared <hive-warn> component for inline warning banners

Consolidates three independently-written instances of the same thing:
.cred-warning (credentials.html, static markup), .tombstone-warn
(core.js, JS-built), .port-conflict (swarm.js, JS-built) -- the first
two differed only by an undeliberate 10% vs 8% tint, the strongest
argument this was drift rather than three genuinely different needs.

New autonomous custom element, frontend/packages/shared/src/hive-warn/,
matching the established one-component-one-dir shadow-DOM pattern
(hive-btn, hive-toast, hive-dialog). Purely presentational -- no
lifecycle beyond attaching its shadow root once, no
attributeChangedCallback needed since severity/pulse are read directly
by :host([...]) CSS selectors rather than mirrored onto an inner
element. Content passes through via a single default <slot>, so every
call site keeps writing its existing <strong>/<code> markup unchanged.

API: <hive-warn> (amber, default) / <hive-warn severity="red"> for an
active incident vs a standing caveat, plus an opt-in pulse boolean
modifier (only the port-collision banner wants it -- a banner that's
always present and always pulsing just trains you to stop seeing it).
Tint is a single canonical 8% for both severities now, replacing the
10%/8% split.

Registered once in dashboard's common.js (same side-effect-import
pattern as <hive-side-panel>) so every dashboard page picks it up
without a per-file import, since all three call sites (core.js,
swarm.js, credentials.js) already transitively import it.

Verified: npm run build clean for both dashboard and agent packages,
grepped source for leftover cred-warning/tombstone-warn/port-conflict
references (none), confirmed hive-warn/HiveWarn/hive-warn-pulse present
in every affected dist bundle, confirmed the still-live
questions-pulse keyframe (.questions) untouched.

frontend/packages/dashboard/src/common.js

@@ -6,6 +6,7 @@
 import { linkify as termLinkify } from '@hive/shared/terminal.js';
 import { el } from '@hive/shared/dom.js';
 import '@hive/shared/side-panel.js'; // registers <hive-side-panel> — side-effect import
+import '@hive/shared/hive-warn.js'; // registers <hive-warn> — side-effect import
 import DOMPurify from 'dompurify';
 
 // ─── helpers ────────────────────────────────────────────────────────────

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('p', { class: 'tombstone-warn' });
+  const warn = el('hive-warn', {});
   warn.append(
     el('strong', {}, 'shows every agent whose container is absent'),
     ' — not only destroyed ones. An agent part-way through being spawned ' +

frontend/packages/dashboard/src/credentials.css

@@ -27,15 +27,6 @@ body.cred-shell {
 
 .cred-pane[hidden] { display: none; }
 
-.cred-warning {
-  border: 1px solid var(--amber);
-  border-radius: 4px;
-  padding: 0.7rem 0.9rem;
-  margin: 0.6rem 0 1.1rem;
-  font-size: 0.9rem;
-  background: color-mix(in srgb, var(--amber) 10%, transparent);
-}
-
 .gh-status { margin: 0.5rem 0 1.2rem; }
 .gh-status-line {
   display: flex;

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>
-      <div class="cred-warning">
+      <hive-warn>
         ⚠ 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> +
@@ -98,7 +98,7 @@
         anything within the token's scopes is reachable if the agent is
         ever compromised. the token is injected into the agent's state dir
         and is <strong>never displayed back</strong> on this page.
-      </div>
+      </hive-warn>
 
       <h3>◇ status</h3>
       <div id="gh-status" class="gh-status"><p class="meta">select an agent to see its github credential status.</p></div>

frontend/packages/dashboard/src/dashboard.css

@@ -444,33 +444,14 @@ hive-agent-menu {
 }
 .container-row.tombstone .name { color: var(--muted); }
 
-/* K3PT ST4T3 caveat. Amber, not red like `.port-conflict`, and no pulse: this
-   is a standing "read the list this way" note, not an incident — a pulsing
-   banner that is always present just teaches you to stop seeing it.
-   Nothing records a destroy, so this list is every agent whose container is
-   absent — which includes one being spawned right now. */
-.tombstone-warn {
-  background: color-mix(in srgb, var(--amber) 8%, transparent);
-  border: 1px solid var(--amber);
-  color: var(--amber);
-  padding: 0.5em 0.8em;
-  margin-bottom: 0.6em;
-  border-radius: 4px;
-}
-.tombstone-warn strong { color: var(--amber); }
+/* K3PT ST4T3 caveat and the port-collision banner both moved to the
+   shared <hive-warn> component — amber/no-pulse for
+   the standing caveat (a pulsing banner that's always present just
+   teaches you to stop seeing it), `severity="red" pulse` for the port
+   collision (an incident, not a caveat). See core.js/swarm.js and
+   hive-warn.css for the actual styling now.
 
-/* Notification controls — sit between the banner and the containers. */
-.port-conflict {
-  background: color-mix(in srgb, var(--red) 8%, transparent);
-  border: 1px solid var(--red);
-  color: var(--red);
-  padding: 0.5em 0.8em;
-  margin-bottom: 0.6em;
-  border-radius: 4px;
-  text-shadow: 0 0 6px color-mix(in srgb, var(--red) 40%, transparent);
-  animation: questions-pulse 2.4s ease-in-out infinite;
-}
-.port-conflict strong { color: var(--red); }
+   Notification controls below sit between the banner and the containers. */
 
 /* Build-queue summary banner on the SW4RM tab: one compact line
    when the rebuild queue has active work, with a link to the full queue on

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('div', { class: 'port-conflict' },
+    const banner = el('hive-warn', { severity: 'red', pulse: '' },
       el('strong', {}, '⚠  port collision'), ' — ');
     const groups = portConflicts.map((c) =>
       `:${c.port} (${c.agents.join(' + ')})`).join('; ');