From fefeaecbbf606457741d028db1cb4796ecd1e756 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Sun, 13 Sep 2026 18:59:22 +0200
Subject: [PATCH] swarm-ui: neon glow on panel titles + the active nav tab

Ports the subtle text-shadow glow @hive/agent's and the dashboard's own
headline rule already use (both independently converged on
`text-shadow: 0 0 Npx color-mix(color, transparent)`), not their whole
uppercase+letter-spacing headline typography -- that's those UIs' own
look, swarm-ui never adopted it and this issue only asked for the glow.

- Panel titles: `currentColor`-based, since a panel title has no one
  fixed accent (some are dynamic, e.g. an agent's own name) -- a fixed
  --purple glow on plain --fg text would read as a mismatched halo.
- Active nav tab: each item's own `accent` (NAV_ITEMS), the same value
  its underline already uses, so the glow and the underline read as
  one accent rather than two that happen to agree.
---
 frontend/packages/swarm-ui/src/shell/Shell.tsx    | 14 ++++++++++++++
 frontend/packages/swarm-ui/src/ui/panel/Panel.css | 10 ++++++++++
 2 files changed, 24 insertions(+)

diff --git a/frontend/packages/swarm-ui/src/shell/Shell.tsx b/frontend/packages/swarm-ui/src/shell/Shell.tsx
index c975985d..a493ee66 100644
--- a/frontend/packages/swarm-ui/src/shell/Shell.tsx
+++ b/frontend/packages/swarm-ui/src/shell/Shell.tsx
@@ -98,11 +98,13 @@ function NavLink({
   href,
   label,
   active,
+  accent,
   textRef,
 }: {
   href: string;
   label: string;
   active: boolean;
+  accent: string;
   textRef: (el: HTMLSpanElement | null) => void;
 }) {
   return (
@@ -115,6 +117,17 @@ function NavLink({
       <span
         ref={textRef}
         class={"shell-nav-link-text" + (active ? " shell-nav-link-active" : "")}
+        // Inline, not a CSS rule: the glow colour is this item's own
+        // `accent` (NAV_ITEMS), a different value per nav item, the
+        // same reason `.shell-nav-indicator`'s own colour is set this
+        // way rather than in Shell.css.
+        style={
+          active
+            ? {
+                textShadow: `0 0 8px color-mix(in srgb, ${accent} 45%, transparent)`,
+              }
+            : undefined
+        }
       >
         {label}
       </span>
@@ -277,6 +290,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
               href={item.href}
               label={item.label}
               active={item.href === location}
+              accent={item.accent}
               textRef={(el) => {
                 textRefs.current[item.href] = el;
               }}
diff --git a/frontend/packages/swarm-ui/src/ui/panel/Panel.css b/frontend/packages/swarm-ui/src/ui/panel/Panel.css
index ebd739be..8adc34ed 100644
--- a/frontend/packages/swarm-ui/src/ui/panel/Panel.css
+++ b/frontend/packages/swarm-ui/src/ui/panel/Panel.css
@@ -14,6 +14,16 @@
   margin: 0;
   font-size: 1em;
   font-weight: 600;
+  /* Same subtle neon-glow recipe agent.css/dashboard's own headline
+     rules use (`text-shadow: 0 0 Npx color-mix(color, transparent)`) —
+     `currentColor`, not a fixed `--purple` like those two, since panel
+     titles don't carry one fixed accent (some are dynamic, e.g. an
+     agent's own name) and forcing one on plain `--fg` text would read
+     as a stray mismatched halo rather than a glow. Deliberately not
+     porting those UIs' uppercase+letter-spacing headline treatment
+     alongside it — that's their own typographic language, not part of
+     "the glow effect" itself. */
+  text-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
 }
 .ui-panel-icon {
   font-size: 1.2em;