From cab6910cbbba73c78e035949070c54318d551be2 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Sun, 13 Sep 2026 22:13:07 +0200
Subject: [PATCH] swarm-ui: make the shell header sticky and frosted glass

---
 .../packages/swarm-ui/src/shell/Shell.css     | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/frontend/packages/swarm-ui/src/shell/Shell.css b/frontend/packages/swarm-ui/src/shell/Shell.css
index 6f7a46b7..fe1fd3e6 100644
--- a/frontend/packages/swarm-ui/src/shell/Shell.css
+++ b/frontend/packages/swarm-ui/src/shell/Shell.css
@@ -19,6 +19,11 @@
    specificity as the media rule, so source order after it wins), then
    `:root[data-motion='allow']` last to re-enable despite an OS-level
    reduce preference. */
+/* Sticky + frosted glass (mara: "sticky header bar ... frosted glass")
+   — same `color-mix` + `backdrop-filter` recipe `.terminal-wrap`/
+   `.ui-badge` (@hive/shared) already use, dark-only same as those (a
+   light bg behind glass washes out). `z-index` keeps it above
+   `.shell-body` once content scrolls underneath. */
 .shell-header {
   display: flex;
   align-items: center;
@@ -26,7 +31,29 @@
   gap: 1.5em;
   padding: 0.75em 1.25em;
   border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
+  -webkit-backdrop-filter: blur(8px) saturate(120%);
+  backdrop-filter: blur(8px) saturate(120%);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+@media (prefers-color-scheme: light) {
+  .shell-header {
+    background: var(--bg-elev);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+:root[data-theme="light"] .shell-header {
   background: var(--bg-elev);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+:root[data-theme="dark"] .shell-header {
+  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
+  -webkit-backdrop-filter: blur(8px) saturate(120%);
+  backdrop-filter: blur(8px) saturate(120%);
 }
 .shell-brand {
   font-weight: 600;