swarm ui: a solid backgrounds setting turns the frosted surfaces opaque

A gear-menu toggle, off by default: the header bar, badges and terminal
panes lose their see-through fill and blur.

frontend/packages/swarm-ui/src/shell/Shell.tsx

@@ -37,6 +37,10 @@ import { HideDebugSetting } from "@hive/shared/hide-debug-setting.js";
 import { ExpandDetailsSetting } from "@hive/shared/expand-details-setting.js";
 import { useApplyThemeOverride } from "@hive/shared/theme-apply.js";
 import { useApplyMotionOverride } from "@hive/shared/motion-apply.js";
+import {
+  SolidBackgroundsSetting,
+  useApplySolidBackgrounds,
+} from "@hive/shared/solid-backgrounds.js";
 import { isFullBleedRoute, visibleNavItems } from "./routes.js";
 import { useDynamicTabs } from "./useDynamicTabs.js";
 import { useSwarmName } from "./useSwarmName.js";
@@ -49,6 +53,7 @@ import "./Shell.css";
 // not `'system'` — see `@hive/shared/theme-apply.js`'s file comment.
 const THEME_KEY = "swarm-ui:theme-override";
 const MOTION_KEY = "swarm-ui:motion-override";
+const SOLID_KEY = "swarm-ui:solid-backgrounds";
 
 const NAV_ITEMS: { href: string; label: string; accent: string }[] = [
   { href: "/agents", label: "agents", accent: "var(--green)" },
@@ -220,6 +225,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
   // needing a reference to the other.
   useApplyThemeOverride(THEME_KEY);
   useApplyMotionOverride(MOTION_KEY);
+  useApplySolidBackgrounds(SOLID_KEY);
 
   // Measures nav item `index`'s rect relative to `.shell-nav`.
   // `getBoundingClientRect()` on both elements at the same tick keeps
@@ -424,6 +430,7 @@ export function Shell({ children }: { children: ComponentChildren }) {
           <SettingsMenu themeKey={THEME_KEY} motionKey={MOTION_KEY}>
             <HideDebugSetting />
             <ExpandDetailsSetting />
+            <SolidBackgroundsSetting storageKey={SOLID_KEY} />
           </SettingsMenu>
           <LinksMenu />
           <UserMenu />