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({ {label} @@ -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;