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}