swarm-ui: a hide debug output toggle in the header's settings menu

The row moves from the per-agent page into @hive/shared so both pages mount
the same one. The terminal's debug rows now follow the preference as it
changes, so rows already on screen hide or show at once instead of only the
rows that arrive after the toggle.

frontend/packages/agent/src/Root.tsx

@@ -12,7 +12,7 @@ import { useApplyMotionOverride } from "@hive/shared/motion-apply.js";
 import { Header } from "./components/Header.js";
 import { MetaNav } from "./components/MetaNav.js";
 import { ExpandDetailsSetting } from "./components/ExpandDetailsSetting.js";
-import { HideDebugSetting } from "./components/HideDebugSetting.js";
+import { HideDebugSetting } from "@hive/shared/hide-debug-setting.js";
 import { StatusChips } from "./components/StatusChips.js";
 import { LiveStream, type LiveStreamHandle } from "./components/LiveStream.js";
 import { HeaderPill } from "./components/HeaderPill.js";

frontend/packages/agent/src/components/HideDebugSetting.tsx

@@ -1,25 +0,0 @@
-// Agent-terminal-only settings-menu row: "hide debug output". Same shape
-// as `ExpandDetailsSetting` (its own file's header comment explains why
-// this lives here rather than as a `SettingsMenu` prop) — mara: "add a
-// setting to not display verbose output... like the grey colored debug
-// stuff."
-import { useState } from "preact/hooks";
-import { getHideDebugPref, setHideDebugPref } from "@hive/shared/prefs.js";
-
-export function HideDebugSetting() {
-  const [hideDebug, setHideDebugState] = useState(() => getHideDebugPref());
-  return (
-    <label class="settings-menu-row">
-      <span>hide debug output</span>
-      <input
-        type="checkbox"
-        checked={hideDebug}
-        onChange={(e) => {
-          const v = (e.target as HTMLInputElement).checked;
-          setHideDebugPref(v);
-          setHideDebugState(v);
-        }}
-      />
-    </label>
-  );
-}

frontend/packages/shared/package.json

@@ -52,6 +52,7 @@
     "./theme-apply.js": "./src/settings/theme-apply.ts",
     "./motion-apply.js": "./src/settings/motion-apply.ts",
     "./settings-menu.js": "./src/settings/SettingsMenu.tsx",
+    "./hide-debug-setting.js": "./src/settings/HideDebugSetting.tsx",
     "./settings-menu.css": "./src/settings/SettingsMenu.css"
   },
   "files": [

frontend/packages/shared/src/prefs.ts

@@ -2,9 +2,9 @@
 // so a future second consumer (e.g. swarm-ui's own terminal) gets the
 // exact same key name for free via the browser's shared per-origin
 // storage, rather than an independent copy that could drift.
-// `ExpandDetailsSetting` / `HideDebugSetting` (the per-agent page's own
-// settings popover rows) are the only writers today; `Row.tsx` is the
-// only reader of either.
+// `ExpandDetailsSetting` / `HideDebugSetting` (the settings popover rows
+// of the per-agent page and of the swarm UI) are the only writers today;
+// `Row.tsx` is the only reader of either.
 
 const EXPAND_DETAILS_KEY = "hive-agent-expand-details";
 
@@ -53,4 +53,24 @@ export function setHideDebugPref(v: boolean): void {
   } catch {
     /* localStorage unavailable — preference is session-only */
   }
+  for (const listener of hideDebugListeners) listener();
+}
+
+const hideDebugListeners = new Set<() => void>();
+
+// Calls `listener` whenever the preference changes: in this tab through
+// `setHideDebugPref`, in another tab of the same origin through the
+// browser's `storage` event. Returns the unsubscribe. This is what lets a
+// terminal that is already showing rows follow the toggle, instead of only
+// the rows that arrive after it.
+export function subscribeHideDebugPref(listener: () => void): () => void {
+  hideDebugListeners.add(listener);
+  const onStorage = (e: StorageEvent) => {
+    if (e.key === HIDE_DEBUG_KEY || e.key === null) listener();
+  };
+  window.addEventListener("storage", onStorage);
+  return () => {
+    hideDebugListeners.delete(listener);
+    window.removeEventListener("storage", onStorage);
+  };
 }

frontend/packages/shared/src/settings/HideDebugSetting.tsx

@@ -0,0 +1,26 @@
+// Settings-menu row: "hide debug output". Rendered as a `<SettingsMenu>`
+// child (`./SettingsMenu.js`) by each page that has a terminal, the
+// per-agent page and the swarm UI, rather than as a prop on the menu: the
+// caller owns its row. Both read the same preference (`../prefs.js`), which
+// `../terminal/Row.tsx` follows as it changes — mara: "add a setting to not
+// display verbose output... like the grey colored debug stuff."
+import { useState } from "preact/hooks";
+import { getHideDebugPref, setHideDebugPref } from "../prefs.js";
+
+export function HideDebugSetting() {
+  const [hideDebug, setHideDebugState] = useState(() => getHideDebugPref());
+  return (
+    <label class="settings-menu-row">
+      <span>hide debug output</span>
+      <input
+        type="checkbox"
+        checked={hideDebug}
+        onChange={(e) => {
+          const v = (e.target as HTMLInputElement).checked;
+          setHideDebugPref(v);
+          setHideDebugState(v);
+        }}
+      />
+    </label>
+  );
+}

frontend/packages/shared/src/terminal/Row.tsx

@@ -10,11 +10,15 @@
 // Shared between `@hive/agent`'s local stream and `@hive/swarm-ui`'s
 // relay consumer (see `./termMsg.js`'s doc) — both hand this the same
 // `TermRow` shape regardless of which wire framing they read it off of.
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import type { TermRow } from "./termMsg.js";
 import { linkifyToNodes } from "./linkify.js";
 import { renderMarkdown } from "./markdown.js";
-import { getExpandDetailsPref, getHideDebugPref } from "../prefs.js";
+import {
+  getExpandDetailsPref,
+  getHideDebugPref,
+  subscribeHideDebugPref,
+} from "../prefs.js";
 
 function MarkdownBody({ text }: { text: string }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -54,13 +58,27 @@ function DiffBody({ text }: { text: string }) {
   );
 }
 
-export function Row({ row }: { row: TermRow }) {
+// A `debug` row, which follows the "hide debug output" preference as it
+// changes. Only debug rows subscribe, so a long terminal does not hold a
+// listener per row.
+function DebugRow({ row }: { row: TermRow }) {
+  const [hidden, setHidden] = useState(() => getHideDebugPref());
+  useEffect(
+    () => subscribeHideDebugPref(() => setHidden(getHideDebugPref())),
+    [],
+  );
   // "hide debug output" is a skip, not a dimmer — a hidden debug row
   // still occupies no DOM node at all, same as it never streamed, rather
   // than a CSS `display: none` that would keep it in the layout/DOM for
   // no benefit.
-  if (row.level === "debug" && getHideDebugPref()) return null;
+  return hidden ? null : <RowBody row={row} />;
+}
 
+export function Row({ row }: { row: TermRow }) {
+  return row.level === "debug" ? <DebugRow row={row} /> : <RowBody row={row} />;
+}
+
+function RowBody({ row }: { row: TermRow }) {
   const cssClass = "level-" + row.level;
   const icon = row.icon != null && row.icon !== "" && (
     <span className="row-glyph">{row.icon}</span>

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

@@ -32,6 +32,7 @@ import { Link, useLocation } from "wouter-preact";
 import { LinksMenu } from "./LinksMenu.js";
 import { UserMenu } from "./UserMenu.js";
 import { SettingsMenu } from "@hive/shared/settings-menu.js";
+import { HideDebugSetting } from "@hive/shared/hide-debug-setting.js";
 import { useApplyThemeOverride } from "@hive/shared/theme-apply.js";
 import { useApplyMotionOverride } from "@hive/shared/motion-apply.js";
 import { useDynamicTabs } from "./useDynamicTabs.js";
@@ -444,7 +445,9 @@ export function Shell({ children }: { children: ComponentChildren }) {
             `margin-left: auto` split the available space between them
             instead of sitting flush together at the right edge. */}
         <div class="shell-header-actions">
-          <SettingsMenu themeKey={THEME_KEY} motionKey={MOTION_KEY} />
+          <SettingsMenu themeKey={THEME_KEY} motionKey={MOTION_KEY}>
+            <HideDebugSetting />
+          </SettingsMenu>
           <LinksMenu />
           <UserMenu />
         </div>