Watch
0
0
Fork
You've already forked hyperhive
0

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.
This commit is contained in:
iris 2026-10-12 20:15:56 +02:00 • committed by mara
commit be6036b216
9 changed files with 88 additions and 36 deletions

View file

@ -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>