agent term: add a setting to hide debug-level output

hyperhive#4008, mara: 'add a setting to not display verbose output...
like the grey colored debug stuff.'

Same shape as the existing expand-tool-output preference
(ExpandDetailsSetting.tsx): a new shared/src/prefs.ts key pair
(getHideDebugPref/setHideDebugPref), a new settings-menu-row component
owning its own state (HideDebugSetting.tsx, not a prop threaded through
the shared SettingsMenu component — per mara's earlier review on the
first one, more per-page options as props there is how that component
accumulates cruft), mounted next to ExpandDetailsSetting in Root.tsx.

Row.tsx skips (returns null for, not CSS display:none) any TermMsg
whose level is 'debug' when the pref is set — matches the muted 'debug'
row this issue is about (see docs/web-ui/terminal-rendering.md's Levels
table). Read live per-row, same as expand-details, so toggling applies
to newly streamed rows in an already-open tab without a reload; already
-rendered rows are unaffected either way, same non-retroactive
precedent the existing preference already sets.

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

@@ -10,7 +10,7 @@ import { useEffect, useRef } from "preact/hooks";
 import type { TermRow } from "../lib/termMsg.js";
 import { linkifyToNodes } from "../lib/linkify.js";
 import { renderMarkdown } from "../lib/markdown.js";
-import { getExpandDetailsPref } from "@hive/shared/prefs.js";
+import { getExpandDetailsPref, getHideDebugPref } from "@hive/shared/prefs.js";
 
 function MarkdownBody({ text }: { text: string }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -51,6 +51,12 @@ function DiffBody({ text }: { text: string }) {
 }
 
 export function Row({ row }: { row: TermRow }) {
+  // "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;
+
   const cssClass = "level-" + row.level;
   const icon = row.icon != null && row.icon !== "" && (
     <span className="row-glyph">{row.icon}</span>