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

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

clients/web/src/components/elements/PinColumnButton/PinColumnButton.test.tsx

@@ -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();
+  });
 });

clients/web/src/components/elements/PinColumnButton/PinColumnButton.tsx

@@ -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)
+ * Toolbar button that opens the resizable monitoring column on the right of the
- * into the resizable column on the right of the InspectorView (#1616). Distinct
+ * InspectorView (#1616). On a monitor screen (Logs / Protocol / Network) it pins
- * from `PinToggle` (which pins individual history entries) — this one opens a
+ * that screen in as a column; on the server list it just opens the column (a
- * side column, so it uses a right-sidebar glyph and an "as column" label. Styled
+ * different `label`). Distinct from `PinToggle` (which pins individual history
- * to match the panel's expand/collapse `ListToggle` (subtle icon button).
+ * 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
+    <Button size="sm" variant="subtle" aria-label={label} onClick={onPin}>
-      size="sm"
-      variant="subtle"
-      aria-label="Pin as column"
-      onClick={onPin}
-    >
       <TbLayoutSidebarRightExpand size={20} />
     </Button>
   );

clients/web/src/components/groups/ServerListControls/ServerListControls.test.tsx

@@ -24,6 +24,31 @@ describe("ServerListControls", () => {
     ).toBeInTheDocument();
   });
 
+  it("hides the open-monitor button unless onOpenMonitor is provided", () => {
+    renderWithMantine(<ServerListControls {...baseProps} serverCount={2} />);
+    expect(
+      screen.queryByRole("button", { name: "Open monitoring column" }),
+    ).toBeNull();
+  });
+
+  it("shows and wires the open-monitor button when onOpenMonitor is provided", async () => {
+    const user = userEvent.setup();
+    const onOpenMonitor = vi.fn();
+    renderWithMantine(
+      <ServerListControls
+        {...baseProps}
+        serverCount={2}
+        onOpenMonitor={onOpenMonitor}
+      />,
+    );
+    const openBtn = screen.getByRole("button", {
+      name: "Open monitoring column",
+    });
+    expect(openBtn).toBeInTheDocument();
+    await user.click(openBtn);
+    expect(onOpenMonitor).toHaveBeenCalledTimes(1);
+  });
+
   it("shows the list toggle alongside Export + Add Servers when servers exist", () => {
     renderWithMantine(<ServerListControls {...baseProps} serverCount={2} />);
     expect(screen.getAllByRole("button")).toHaveLength(3);

clients/web/src/components/groups/ServerListControls/ServerListControls.tsx

@@ -1,5 +1,6 @@
 import { Button, Group } from "@mantine/core";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
+import { PinColumnButton } from "../../elements/PinColumnButton/PinColumnButton";
 import {
   ServerAddMenu,
   type AddServerMenuProps,
@@ -13,6 +14,12 @@ export interface ServerListControlsProps extends AddServerMenuProps {
   onExport: () => void;
   /** When false (read-only session), the Add menu is hidden. Defaults to true. */
   writable?: boolean;
+  /**
+   * Open the monitoring column. Provided (by the caller) only when a server is
+   * connected, the column can open, and it isn't already shown — otherwise
+   * omitted so the open-sidebar affordance is hidden.
+   */
+  onOpenMonitor?: () => void;
 }
 
 export function ServerListControls({
@@ -24,6 +31,7 @@ export function ServerListControls({
   onImportServerJson,
   onExport,
   writable = true,
+  onOpenMonitor,
 }: ServerListControlsProps) {
   return (
     <Group justify="flex-end">
@@ -40,6 +48,9 @@ export function ServerListControls({
       {serverCount > 0 && (
         <ListToggle compact={compact} onToggle={onToggleList} />
       )}
+      {onOpenMonitor && (
+        <PinColumnButton onPin={onOpenMonitor} label="Open monitoring column" />
+      )}
     </Group>
   );
 }

clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx

@@ -67,6 +67,12 @@ export interface ServerListScreenProps {
   onClearHighlight?: (id: string) => void;
   compact: boolean;
   onToggleCompact: () => void;
+  /**
+   * Open the monitoring column. Provided only when a server is connected, the
+   * column can open, and it isn't already shown; forwarded to the controls to
+   * reveal an open-sidebar button beside the list toggle.
+   */
+  onOpenMonitor?: () => void;
 }
 
 const PageContainer = Stack.withProps({
@@ -99,6 +105,7 @@ export function ServerListScreen({
   onClearHighlight,
   compact,
   onToggleCompact,
+  onOpenMonitor,
 }: ServerListScreenProps) {
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -196,6 +203,7 @@ export function ServerListScreen({
         onImportConfig={onImportConfig}
         onImportServerJson={onImportServerJson}
         onExport={onExport}
+        onOpenMonitor={onOpenMonitor}
       />
 
       <ScrollArea.Autosize

clients/web/src/components/views/InspectorView/InspectorView.tsx

@@ -850,6 +850,10 @@ export function InspectorView({
   // column. Gated by `canPin` so the pin affordance only appears when a click
   // would actually take effect (wide + connected).
   const canPin = !!isWide && connected;
+  // Offer an "open monitoring column" affordance on the server list when a
+  // connected server has monitor screens to show but the column isn't open yet.
+  const canOpenMonitor =
+    canPin && monitorAvailable.length > 0 && !effectivePinned;
   function pinMonitor(tab: MonitorTab) {
     setMonitorTab(tab);
     setMonitorPinned(true);
@@ -1068,6 +1072,11 @@ export function InspectorView({
                 onClearHighlight={onClearHighlight}
                 compact={serversCompact}
                 onToggleCompact={() => setServersCompact((c) => !c)}
+                onOpenMonitor={
+                  canOpenMonitor
+                    ? () => pinMonitor(effectiveMonitorTab)
+                    : undefined
+                }
               />
             </ScreenStage>
             <ScreenStage active={activeTab === "Tools"}>