inspector/clients/web/src/components/elements
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Cliff Hall dbda70e83b
Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662)
* feat(web): single header MonitoringToggle + Prompts-style Tools results (#1661)

Consolidate the monitoring column's open/close affordances into one header
toggle, and align the Tools/Prompts result panes and the sidebar log layout.

- Add a single `MonitoringToggle` in the header, to the right of the theme
  icon. It opens/closes the monitoring column and only shows when a server is
  connected OR a connect attempt failed (wide viewport + a monitor tab
  available) — the same availability rule the column uses.
- Remove the scattered pin/close icons: delete `PinColumnButton`; drop `onPin`
  from the Logs/Protocol/Network/Console screens and their stream panels; drop
  `onOpenMonitor` from the server list; remove the close button from
  `MonitoringControls`/`MonitoringScreen`.
- Tools screen: remove the "Results will appear here" placeholder pane. Results
  now replace the input form in a single content pane (the Prompts pattern),
  with a top-left X (ToolResultPanel) that dismisses them back to the form;
  form values are preserved for a re-run.
- Prompts screen: the argument form fills the content pane width (drop the 40%
  cap), matching the Tools input.
- LogEntry: add a `compact` two-line layout (time/level/logger on line one,
  message wrapping below) used by the embedded monitoring-column Logs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015sMW1YZXkM7fDkdPtHpE95

* polish(web): tooltips on icon buttons + rename "monitoring column" → "monitoring sidebar" (#1661)

- Add Mantine `Tooltip`s to the icon-only controls: Client settings, Theme
  (dynamic light/dark label), the monitoring-sidebar toggle, the list-level and
  per-entry Expand/Collapse toggles, the Pin/Unpin toggle, and the Replay
  button. Labels mirror each control's existing aria-label.
- Rename the feature term "monitoring column" → "monitoring sidebar" across the
  user-facing labels (Open/Close/Resize), comments, and tests, so the UI calls
  it a sidebar consistently.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015sMW1YZXkM7fDkdPtHpE95

* review: consistent sidebar wording + reuse MonitoringToggleProps (#1661)

Address the two optional notes from the PR #1662 review:
- Make the MonitoringToggle JSDoc voice consistent ("sidebar" throughout,
  no lingering "column").
- Drop ViewHeader's duplicate `MonitorToggleProps` and reuse the element's
  exported `MonitoringToggleProps` as the single source of truth.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015sMW1YZXkM7fDkdPtHpE95

* feat(web): slide-in/out animation for the monitoring-sidebar toggle (#1661)

The header MonitoringToggle now animates in/out via a Mantine Transition whose
in/out styles drive width + margin-left (plus opacity/translateX): as its slot
grows from 0 → the 36px icon, the flex-end header row reflows and pushes the
theme + client-settings buttons one slot to the left; the exit reverses and they
slide back over. A negative margin-left while collapsed cancels the row gap so
the theme icon stays flush-right when the toggle is absent. Only appearance/
disappearance (connect / disconnect / narrow viewport) animates — opening or
closing the sidebar leaves the toggle in place.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015sMW1YZXkM7fDkdPtHpE95

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 17:30:16 -04:00
..
AnnotationBadge test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269) 2026-05-01 15:15:32 -04:00
AppRenderer feat(web): extract hostContext utilities for the Apps host (closes #1559) 2026-07-01 18:22:46 -04:00
CapabilityItem test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269) 2026-05-01 15:15:32 -04:00
ClearButton fix(web): section-header hover outline + clear buttons out of tab order (#1487) (#1488) 2026-06-14 22:27:46 -04:00
CodeHighlight feat(web): expand ContentViewer to render PDF, CSV, HTML, XML, JSON, CSS (closes #1329) (#1551) 2026-06-30 09:18:43 -04:00
ConnectionToggle test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269) 2026-05-01 15:15:32 -04:00
ContentViewer feat(web): expand ContentViewer to render PDF, CSV, HTML, XML, JSON, CSS (closes #1329) (#1551) 2026-06-30 09:18:43 -04:00
CopyButton Guided-auth removal, OAuth smoke testing, and TUI/CLI support (#1531) 2026-06-29 15:35:51 -04:00
CopyrightBadge feat(web): add copyright notice + footer/toolbar polish (#1639) 2026-07-10 20:11:52 -04:00
EmbeddableScrollArea Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
ExpandToggle Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
FilterToggleButton refactor(web): rename "History" tab/feature to "Protocol" (#1623) 2026-07-09 19:04:54 -04:00
ListChangedIndicator test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269) 2026-05-01 15:15:32 -04:00
ListToggle Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
LogEntry Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
LogLevelBadge test: raise per-file coverage gate to 90 across all clients (closes #1271) (#1532) 2026-06-27 15:26:03 -04:00
MessageBubble Port resource preview UX improvements to PromptsScreen (#1328) (#1331) 2026-05-23 09:20:20 -04:00
MessageDirectionBadge refactor(web): unify message-direction arrows and rename Pinned section (#1623) 2026-07-09 19:45:52 -04:00
MonitoringToggle Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
PinToggle Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
ProgressDisplay test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269) 2026-05-01 15:15:32 -04:00
ReplayButton Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
ResizeHandle Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
ResourceLinkInfo feat(web): expandable resource_link with read-on-demand (#1449) (#1456) 2026-06-13 17:15:25 -04:00
ScreenStage Monitoring sidebar toggle, Prompts-style Tools results, and icon-button UI polish (#1661) (#1662) 2026-07-11 17:30:16 -04:00
ServerStatusIndicator test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269) 2026-05-01 15:15:32 -04:00
SortToggle test: raise per-file coverage gate to 90 across all clients (closes #1271) (#1532) 2026-06-27 15:26:03 -04:00
SubscribeButton test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269) 2026-05-01 15:15:32 -04:00
TaskStatusBadge test: raise per-file coverage gate to 90 across all clients (closes #1271) (#1532) 2026-06-27 15:26:03 -04:00
TransportBadge test(coverage): bootstrap vitest unit infra and add tests at 90%+ per file (#1245) (#1269) 2026-05-01 15:15:32 -04:00
VersionBadge feat(web): add copyright notice + footer/toolbar polish (#1639) 2026-07-10 20:11:52 -04:00