Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661)

[cliffhall]

Closes #1661

What & why

Consolidates the monitoring sidebar's scattered open/close icons into one header toggle, aligns the Tools/Prompts result panes and the sidebar log layout, and adds tooltips across the icon-only controls.

Monitoring sidebar toggle

• New MonitoringToggle element in the header, immediately to the right of the theme icon. One control opens or closes the monitoring sidebar on demand — the glyph, tooltip, and accessible label reflect the state (Open monitoring sidebar / Close monitoring sidebar).
• Visibility rule: hidden when there is no connected server, unless the last connection attempt failed — the same availability rule the sidebar already uses (connected or a failed connect attempt, wide viewport, ≥1 monitor tab available).
• Removed the old affordances it replaces: the per-screen "Pin as column" buttons on Logs/Protocol/Network/Console, the server-list open-sidebar button, and the close button inside MonitoringControls. Deleted the now-unused PinColumnButton.

Tools screen results (Prompts pattern)

• Removed the "Results will appear here" placeholder pane. Results now replace the input form in a single content pane; the result panel's top-left ✕ dismisses them and restores the form (form values preserved for a re-run). A call in flight keeps the executing form (progress + cancel) until the result lands.

Layout consistency

• Prompts argument form now fills the content pane width (dropped the 40% cap), matching the Tools input.
• LogEntry gains a compact two-line layout (time/level/logger on line one, message wrapping below) used by the embedded monitoring-sidebar Logs, so long messages aren't clipped by the narrow sidebar.

Icon-button tooltips

• Added Mantine Tooltips to the icon-only controls: Client settings, Theme (dynamic "Switch to light/dark theme"), the monitoring-sidebar toggle, the list-level and per-entry Expand/Collapse toggles, the Pin/Unpin toggle, and the Replay button. Each tooltip mirrors the control's existing aria-label.

Naming

• Renamed the feature term "monitoring column" → "monitoring sidebar" across user-facing labels (Open/Close/Resize), comments, and tests.

Testing

• npm run ci green locally: validate (all clients) + the per-file ≥90% coverage gate + smokes (launcher/cli/tui/web) + Storybook play tests.
• Updated/added unit tests and stories for MonitoringToggle, ViewHeader, InspectorView, ToolResultPanel, ToolsScreen, LogEntry, and the tooltip-wrapped toggles.

🤖 Generated with Claude Code

[cliffhall]

@claude review

[claude]

Claude finished @cliffhall's task in 3m 2s —— View job

---

Code Review — PR #1662

• Gather context (diff vs origin/v2/main)
• Review MonitoringToggle + ViewHeader + InspectorView
• Review Tools results pane changes
• Review LogEntry compact layout
• Review icon-button tooltip changes + deletions
• Post review feedback

---

Overall this is a clean, well-scoped refactor. The consolidation of the scattered open/close affordances into a single header toggle is a genuine simplification — the diff removes more than it adds in the interaction layer, deletes a now-dead component (PinColumnButton) along with its tests/stories, and leaves no dangling onPin / onOpenMonitor / onClose references (verified by grep). Documentation comments are excellent throughout, and test coverage for the new behavior is comprehensive. Nothing blocking.

Correctness — verified, no issues

• Single-pane result swap is safe. My first concern was that showing ToolResultPanel whenever callState?.result is truthy (ToolsScreen.tsx:165) — regardless of selectedTool — could leave a stale result rendered under a newly-selected tool. This is correctly handled upstream: App.tsx onToolsUiChange (lines 2662–2670) clears toolCallState whenever selectedToolName changes, so selecting a different tool drops the previous result. The inline comment there documents exactly this. 👍
• Toggle visibility rule is consistent. monitorColumnAvailable = isWide && (connected || failed) && monitorAvailable.length > 0 (InspectorView.tsx:812) gates both effectivePinned and the header monitorToggle, so the toggle can never appear with nothing to toggle, and narrowing the viewport collapses the column and hides the toggle together. The auto-open effect (lines 684–694) still only sets the preference; actual visibility flows through the same gate.
• Theme tooltip label matches the icon. ViewHeader.tsx:413 derives the label from the same colorScheme that drives ThemeIcon (line 211), so glyph and tooltip stay in sync.
• Tooltip wrapping is ref-safe. ClientSettingsToggle/ThemeToggle are ActionIcon.withProps(...), which forward refs, so Mantine's Tooltip clone works correctly.
• Error states unchanged. An error status carries no result, so the form (not the result panel) shows — matching the pre-PR behavior where errors surfaced via toast, with the bonus that the form now stays put for a retry.

Minor observations (non-blocking, optional)

1. Mixed "column" / "sidebar" terminology. The rename was applied to user-facing strings and many comments, but code identifiers deliberately stayed as "column" (monitorColumnAvailable, MonitoringColumn, closeMonitorColumn, monitorColumnAnimation.ts). That's a reasonable scope boundary, but the new MonitoringToggle.tsx JSDoc mixes both within one comment ("the monitoring sidebar… opens or closes the column on demand"). Purely cosmetic — worth a quick pass only if you want the doc voice consistent.

2. Two near-identical prop interfaces. ViewHeader.MonitorToggleProps and MonitoringToggle.MonitoringToggleProps are both { open, onToggle }. This is fine as-is (different layers), but ViewHeader could import and reuse MonitoringToggleProps if you'd rather have one source of truth. Not worth churning.

Tests & docs

• New MonitoringToggle unit tests + story; ToolResultPanel test updated for the CloseButton ("Close results"); InspectorView.test.tsx covers open/close/connect/failed-attempt/toggle paths (30+ assertions on the new labels).
• No README/AGENTS structural changes needed — this is UI-internal.

Nice work — I'd approve this if I could. (I can't submit formal GitHub approvals for security reasons.)
· 1661-v2-monitoring-toggle

[cliffhall]

Thanks for the thorough review! Both non-blocking notes are addressed in 126dcef:

1. Mixed "column" / "sidebar" terminology — cleaned up the MonitoringToggle JSDoc so its voice is consistently "sidebar" (removed the lingering "opens or closes the column on demand" / "the column's own close button"). Left the internal code identifiers (monitorColumnAvailable, MonitoringColumn, closeMonitorColumn, monitorColumnAnimation.ts) as-is — as you noted, that's the intended scope boundary and renaming them is churn without user-facing value.

2. Two near-identical prop interfaces — went with the single-source-of-truth option: ViewHeader now imports and reuses the element's exported MonitoringToggleProps and its local MonitorToggleProps is gone.

npm run ci is green (validate + per-file ≥90% coverage + smokes + Storybook). Appreciate the careful correctness pass on the single-pane result swap and the toggle visibility gate.