diff --git a/frontend/packages/agent/src/Root.tsx b/frontend/packages/agent/src/Root.tsx
index b586c428..3a34ebdb 100644
--- a/frontend/packages/agent/src/Root.tsx
+++ b/frontend/packages/agent/src/Root.tsx
@@ -113,7 +113,7 @@ export function Root() {
dashboardBase={resolveDashboardBase(state.dashboard_port)}
/>
) : null}
-
+
>
);
// Kept mounted regardless of `openPanel` (open/closed toggles just the
diff --git a/frontend/packages/agent/src/lib/classifyEvent.ts b/frontend/packages/agent/src/lib/classifyEvent.ts
index 07aa5784..48d49544 100644
--- a/frontend/packages/agent/src/lib/classifyEvent.ts
+++ b/frontend/packages/agent/src/lib/classifyEvent.ts
@@ -15,6 +15,7 @@
// text loses its client-side tick. Revisit if that's missed in practice.
import type { StreamRow, StreamRowMeta } from './streamRow.js';
import { fmtAge, fmtClock } from './format.js';
+import { getExpandDetailsPref } from '@hive/shared/prefs.js';
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- stream-json
// content is dynamically-shaped JSON, same as app.js's untyped handling.
@@ -171,15 +172,23 @@ function classifyStream(v: AnyEvent, fromHistory: boolean, ctx: ClassifyCtx): St
}
// `_category === 'rich'` tools get an expandable row: diff body (Edit),
-// default-open markdown body (send/ask/answer/recv-shaped), or a plain
-// collapsed body — all pre-computed server-side, no per-tool JS needed.
+// default-open markdown body (send/ask/answer/recv-shaped, always open
+// regardless of the preference below — matches app.js), or a plain
+// body (collapsed unless the operator's "expand tool output" preference
+// says otherwise — @hive/shared/prefs.js's getExpandDetailsPref(), read
+// fresh per row so a mid-session preference change applies going
+// forward without a reload) — all pre-computed server-side, no per-tool
+// JS needed.
function classifyToolUse(c: AnyEvent, fromHistory: boolean, ctx: ClassifyCtx): StreamRow {
const icon = c._icon || '🔧';
const name = c.name || '';
if (c._category === 'rich' && c._body != null) {
const summary = c._summary || name || '?';
if (c._body_type === 'diff') {
- return { key: nextKey(ctx), cssClass: 'tool-use', fromHistory, details: true, icon, text: summary, diffBody: c._body };
+ return {
+ key: nextKey(ctx), cssClass: 'tool-use', fromHistory, details: true, defaultOpen: getExpandDetailsPref(),
+ icon, text: summary, diffBody: c._body,
+ };
}
if (c._body_type === 'markdown') {
return {
@@ -187,7 +196,10 @@ function classifyToolUse(c: AnyEvent, fromHistory: boolean, ctx: ClassifyCtx): S
icon, text: summary, markdownBody: c._body,
};
}
- return { key: nextKey(ctx), cssClass: 'tool-use', fromHistory, details: true, icon, text: summary, plainBody: c._body };
+ return {
+ key: nextKey(ctx), cssClass: 'tool-use', fromHistory, details: true, defaultOpen: getExpandDetailsPref(),
+ icon, text: summary, plainBody: c._body,
+ };
}
return { key: nextKey(ctx), cssClass: 'tool-use', fromHistory, icon, text: c._summary || name || '?' };
}
@@ -214,7 +226,10 @@ function classifyToolResult(c: AnyEvent, fromHistory: boolean, ctx: ClassifyCtx)
if (!txt.trim() || txt.length <= 120) {
return { key: nextKey(ctx), cssClass: 'tool-result error', fromHistory, text: '✗ ' + summaryBody };
}
- return { key: nextKey(ctx), cssClass: 'tool-result-block error', fromHistory, details: true, text: summaryBody, plainBody: txt };
+ return {
+ key: nextKey(ctx), cssClass: 'tool-result-block error', fromHistory, details: true,
+ defaultOpen: getExpandDetailsPref(), text: summaryBody, plainBody: txt,
+ };
}
if (isMessageBearing && txt.trim()) {
return {
@@ -225,7 +240,10 @@ function classifyToolResult(c: AnyEvent, fromHistory: boolean, ctx: ClassifyCtx)
if (!txt.trim() || txt.length <= 120) {
return { key: nextKey(ctx), cssClass: 'tool-result', fromHistory, text: '← ' + summaryBody };
}
- return { key: nextKey(ctx), cssClass: 'tool-result-block', fromHistory, details: true, text: summaryBody, plainBody: txt };
+ return {
+ key: nextKey(ctx), cssClass: 'tool-result-block', fromHistory, details: true,
+ defaultOpen: getExpandDetailsPref(), text: summaryBody, plainBody: txt,
+ };
}
// Subagent (claude `Task`-tool) activity — dead path for agents today
diff --git a/frontend/packages/dashboard/src/settings.html b/frontend/packages/dashboard/src/settings.html
index d1fd0fbd..a7ea4da1 100644
--- a/frontend/packages/dashboard/src/settings.html
+++ b/frontend/packages/dashboard/src/settings.html
@@ -32,11 +32,6 @@
-
◇ agent terminal
-
applies to every agent's terminal viewed in this browser — whether otherwise-collapsed tool-output panels (long results, Write/Edit diffs, …) default open. rows that already default open (send/ask/answer/recv) are unaffected either way.
-
-
-
diff --git a/frontend/packages/dashboard/src/settings.js b/frontend/packages/dashboard/src/settings.js
index aad5c1e6..298378d1 100644
--- a/frontend/packages/dashboard/src/settings.js
+++ b/frontend/packages/dashboard/src/settings.js
@@ -7,31 +7,9 @@
// browser-level permission, so firing still works from the dashboard
// even though the toggle UI now lives on its own page.
//
-// The agent-terminal-verbosity toggle below is a second, unrelated
-// browser-local preference — @hive/shared/prefs.js owns the key name +
-// get/set so this page and every per-agent page's app.js agree on it
-// without a backend field. Both preferences are per-origin localStorage,
-// so they only apply within this browser (per the page's own copy).
-//
// initServerWarnings() renders the shared top-of-page warnings banner,
// matching the other stand-alone pages (FL0W / L0GS / H0M3).
import { NOTIF, initServerWarnings } from './common.js';
-import { getExpandDetailsPref, setExpandDetailsPref } from '@hive/shared/prefs.js';
initServerWarnings();
NOTIF.bind();
-
-(function bindExpandDetailsToggle() {
- const btn = document.getElementById('expand-details-toggle');
- if (!btn) return;
- function render() {
- const on = getExpandDetailsPref();
- btn.textContent = on ? '☑ expand tool output panels' : '☐ expand tool output panels';
- btn.setAttribute('aria-checked', String(on));
- }
- btn.addEventListener('click', () => {
- setExpandDetailsPref(!getExpandDetailsPref());
- render();
- });
- render();
-})();
diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
index 69b3859d..6f157263 100644
--- a/frontend/packages/shared/package.json
+++ b/frontend/packages/shared/package.json
@@ -21,7 +21,7 @@
"./chrome.css": "./src/chrome.css",
"./pill.css": "./src/pill.css",
"./forms.js": "./src/forms.js",
- "./prefs.js": "./src/prefs.js",
+ "./prefs.js": "./src/prefs.ts",
"./dom.js": "./src/dom.js",
"./modal.js": "./src/modal.js",
"./shadow-css.js": "./src/shadow-css.js",
diff --git a/frontend/packages/shared/src/prefs.js b/frontend/packages/shared/src/prefs.ts
similarity index 71%
rename from frontend/packages/shared/src/prefs.js
rename to frontend/packages/shared/src/prefs.ts
index f73fb005..de4fa5bf 100644
--- a/frontend/packages/shared/src/prefs.js
+++ b/frontend/packages/shared/src/prefs.ts
@@ -13,15 +13,20 @@ const EXPAND_DETAILS_KEY = 'hive-agent-expand-details';
// client-side — no backend field, nothing round-trips through
// `/api/*`. Read live (not cached) by the shared terminal factory's
// `expandDetails` option — see docs/web-ui/shape.md::Shared terminal
-// pane — so a preference change on /settings.html applies to the next
-// rendered row in any already-open agent tab without a reload.
-export function getExpandDetailsPref() {
- try { return localStorage.getItem(EXPAND_DETAILS_KEY) === '1'; }
- catch { return false; }
+// pane — so a preference change applies to the next rendered row in
+// any already-open agent tab without a reload.
+export function getExpandDetailsPref(): boolean {
+ try {
+ return localStorage.getItem(EXPAND_DETAILS_KEY) === '1';
+ } catch {
+ return false;
+ }
}
-export function setExpandDetailsPref(v) {
+export function setExpandDetailsPref(v: boolean): void {
try {
if (v) localStorage.setItem(EXPAND_DETAILS_KEY, '1');
else localStorage.removeItem(EXPAND_DETAILS_KEY);
- } catch { /* localStorage unavailable — preference is session-only */ }
+ } catch {
+ /* localStorage unavailable — preference is session-only */
+ }
}
diff --git a/frontend/packages/shared/src/settings/SettingsMenu.tsx b/frontend/packages/shared/src/settings/SettingsMenu.tsx
index ac643132..c5711e67 100644
--- a/frontend/packages/shared/src/settings/SettingsMenu.tsx
+++ b/frontend/packages/shared/src/settings/SettingsMenu.tsx
@@ -28,6 +28,7 @@ import { Badge } from '../badge/Badge.js';
import { GearIcon } from '../icons.js';
import { useThemeOverride, type ThemeOverride } from './theme-apply.js';
import { useMotionOverride, type MotionOverride } from './motion-apply.js';
+import { getExpandDetailsPref, setExpandDetailsPref } from '../prefs.js';
import './SettingsMenu.css';
const THEME_OPTIONS: ThemeOverride[] = ['system', 'light', 'dark'];
@@ -36,13 +37,29 @@ const MOTION_OPTIONS: MotionOverride[] = ['system', 'allow', 'reduce'];
export interface SettingsMenuProps {
themeKey: string;
motionKey: string;
+ /**
+ * Show the "expand tool output panels" toggle — agent-terminal-only,
+ * formerly its own section on the (separate) hive dashboard's
+ * `/settings.html`. `SettingsMenu` is shared with swarm-ui too, which
+ * has no terminal to apply this to (mara: "settigs dropdown is
+ * shared component, but the setting is only in the agent term") — so
+ * it's opt-in per consumer rather than always rendered. Only the
+ * agent page passes this; swarm-ui's `Shell` doesn't.
+ */
+ showExpandDetails?: boolean;
}
-export function SettingsMenu({ themeKey, motionKey }: SettingsMenuProps) {
+export function SettingsMenu({ themeKey, motionKey, showExpandDetails }: SettingsMenuProps) {
const [open, setOpen] = useState(false);
const rootRef = useRef(null);
const [theme, setTheme] = useThemeOverride(themeKey);
const [motion, setMotion] = useMotionOverride(motionKey);
+ // Plain localStorage read, not a hook-managed override like theme/motion
+ // above — `getExpandDetailsPref`/`setExpandDetailsPref` (`../prefs.js`)
+ // are the existing shared-storage-key pair the terminal itself already
+ // reads live (no round-trip needed here beyond re-rendering this menu's
+ // own checkbox state on toggle).
+ const [expandDetails, setExpandDetailsState] = useState(() => getExpandDetailsPref());
// Close on an outside click or Escape — only listens while open.
useEffect(() => {
@@ -98,6 +115,20 @@ export function SettingsMenu({ themeKey, motionKey }: SettingsMenuProps) {
))}
+ {showExpandDetails ? (
+
+ ) : null}
) : null}