modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

feat(web): add an open-monitoring-column button to the server list

Browse source 
When a server is connected, has monitor screens to show, and the monitoring
column isn't open, show an "open monitoring column" button to the right of the
list expand/collapse toggle on the server list. It reuses PinColumnButton (the
same right-sidebar affordance the monitor screens use, now with an optional
label), so opening the column is reachable from the server list — not only from
a monitor screen's pin button. InspectorView gates it on
`canPin && monitorAvailable.length > 0 && !effectivePinned`.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw
This commit is contained in:
cliffhall 2026-07-10 20:23:27 -04:00
commit 0c6fafbf60
2 changed files with 76 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

10
clients/web/src/components/elements/PinColumnButton/PinColumnButton.test.tsx
View file

@ -18,4 +18,14 @@ describe("PinColumnButton", () => {
await user.click(screen.getByRole("button", { name: "Pin as column" }));
expect(onPin).toHaveBeenCalledTimes(1);
});
it("uses a custom accessible label when provided", () => {
renderWithMantine(
<PinColumnButton onPin={vi.fn()} label="Open monitoring column" />,
);
expect(
screen.getByRole("button", { name: "Open monitoring column" }),
).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Pin as column" })).toBeNull();
});
});

25
clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx
View file

@ -4,23 +4,24 @@ import { TbLayoutSidebarRightExpand } from "react-icons/tb";
export interface PinColumnButtonProps {
/** Pin this screen into the monitoring column to the right. */
onPin: () => void;
/** Accessible label. Defaults to "Pin as column" (its monitor-screen use). */
label?: string;
}
/**
* Toolbar button that pins the owning monitor screen (Logs / Protocol / Network)
* into the resizable column on the right of the InspectorView (#1616). Distinct
* from `PinToggle` (which pins individual history entries) — this one opens a
* side column, so it uses a right-sidebar glyph and an "as column" label. Styled
* to match the panel's expand/collapse `ListToggle` (subtle icon button).
* Toolbar button that opens the resizable monitoring column on the right of the
* InspectorView (#1616). On a monitor screen (Logs / Protocol / Network) it pins
* that screen in as a column; on the server list it just opens the column (a
* different `label`). Distinct from `PinToggle` (which pins individual history
* entries) — this one opens a side column, so it uses a right-sidebar glyph.
* Styled to match the panel's expand/collapse `ListToggle` (subtle icon button).
*/
export function PinColumnButton({ onPin }: PinColumnButtonProps) {
export function PinColumnButton({
onPin,
label = "Pin as column",
}: PinColumnButtonProps) {
return (
<Button
size="sm"
variant="subtle"
aria-label="Pin as column"
onClick={onPin}
>
<Button size="sm" variant="subtle" aria-label={label} onClick={onPin}>
<TbLayoutSidebarRightExpand size={20} />
</Button>
);