web: server-screen, footer, monitoring-sidebar, and responsive-header polish (#1683)

Closes #1682

Server-screen, footer, monitoring-sidebar, and responsive-header polish: connected-card highlight/scroll + Failed status, footer row + MCP-docs tooltip, Servers box, card-surface refresh (gray-0 entry cards + white code), monitoring-sidebar layout, a 1280px responsive floor honored by the header (always-icon Disconnect, always-SegmentedControl tabs, 1500px status text, always-available sidebar), a horizontally-scrollable long resource URI in the compact Protocol entry, and copy buttons beside resource URIs / network URLs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

@@ -25,7 +25,7 @@ export interface AppControlsProps {
 }
 
 const LIST_MAX_HEIGHT =
-  "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 220px)";
+  "calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px) - var(--mantine-spacing-xl) * 2 - 220px)";
 
 const EmptyState = Text.withProps({
   c: "dimmed",

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

@@ -15,11 +15,14 @@ export interface MonitoringControlsProps {
 // The controls row at the top of the pinned monitoring sidebar: a segmented tab
 // switcher on the left and a search box filling the rest. The column is closed
 // from the single header MonitoringToggle (#1661), so there is no close button
-// here.
+// here. `px: xl` matches the `xl` horizontal inset the embedded screen below
+// gives its panel (its `ScreenLayout` padding), so the tabs + search span the
+// same width as the content and line up with its left/right edges.
 const ControlsBar = Group.withProps({
   wrap: "nowrap",
   gap: "sm",
-  p: "sm",
+  px: "xl",
+  py: "sm",
 });
 
 // Search box, styled to match the `*Controls` search fields; `flex:1`/`miw:0`

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { Divider, Stack } from "@mantine/core";
+import { Stack } from "@mantine/core";
 import { MonitoringControls } from "../MonitoringControls/MonitoringControls";
 import { ScreenStage } from "../../elements/ScreenStage/ScreenStage";
 
@@ -22,9 +22,12 @@ export interface MonitoringScreenProps {
 
 // Fills the pinned column: a fixed controls row on top and the selected screen
 // filling the remaining height below (mih:0 lets the inner ScrollArea bound).
+// `pt: md` gives the controls a little breathing room below the header instead
+// of sitting flush against it.
 const ColumnLayout = Stack.withProps({
   h: "100%",
   gap: 0,
+  pt: "md",
 });
 
 // Relative-positioned host so each tab's `ScreenStage` (absolutely positioned)
@@ -59,7 +62,6 @@ export function MonitoringScreen({
         searchValue={searchValue}
         onSearchChange={onSearchChange}
       />
-      <Divider />
       <ScreenSlot>
         {tabs.map((tab) => (
           <ScreenStage key={tab} active={tab === value} fill>

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

@@ -14,6 +14,7 @@ import {
 import type { FetchRequestEntry } from "@inspector/core/mcp/types.js";
 import { isLongLivedStreamResponse } from "@inspector/core/mcp/fetchTracking.js";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
+import { CopyButton } from "../../elements/CopyButton/CopyButton";
 import { ExpandToggle } from "../../elements/ExpandToggle/ExpandToggle";
 import { MethodBadge } from "../../elements/MethodBadge/MethodBadge";
 import { CategoryBadge } from "../../elements/CategoryBadge/CategoryBadge";
@@ -281,6 +282,7 @@ export function NetworkEntry({
               <ControlsCluster>{metaBadges}</ControlsCluster>
             </HeaderRow>
             <Group gap="xs" wrap="nowrap" justify="space-between">
+              <CopyButton value={entry.url} />
               <ScrollArea
                 scrollbarSize={6}
                 flex={1}
@@ -304,6 +306,7 @@ export function NetworkEntry({
                 </TimestampText>
                 <MethodBadge method={entry.method} />
                 <CategoryBadge category={entry.category} />
+                <CopyButton value={entry.url} />
                 <UrlText>{entry.url}</UrlText>
               </Group>
               <Group gap="sm" wrap="nowrap">

clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Box } from "@mantine/core";
 import type { MessageEntry } from "../../../../../../core/mcp/types.js";
 import { fn } from "storybook/test";
 import { ProtocolEntry } from "./ProtocolEntry";
@@ -76,6 +77,36 @@ const resourceReadEntry: MessageEntry = {
   duration: 45,
 };
 
+// A resources/read whose URI overflows the narrow monitoring column, so the
+// embedded header shows it in a horizontal scroll area rather than truncating.
+const longUriResourceEntry: MessageEntry = {
+  id: "req-5",
+  timestamp: new Date("2026-03-17T10:35:00Z"),
+  direction: "request",
+  origin: "client",
+  message: {
+    jsonrpc: "2.0",
+    id: 5,
+    method: "resources/read",
+    params: {
+      uri: "demo://resource/static/document/architecture/overview/system-design-and-data-flow.md",
+    },
+  },
+  response: {
+    jsonrpc: "2.0",
+    id: 5,
+    result: {
+      contents: [
+        {
+          uri: "demo://resource/static/document/architecture/overview/system-design-and-data-flow.md",
+          text: "# Architecture Overview",
+        },
+      ],
+    },
+  },
+  duration: 41,
+};
+
 const pendingEntry: MessageEntry = {
   id: "req-4",
   timestamp: new Date("2026-03-17T10:34:00Z"),
@@ -128,3 +159,22 @@ export const Pending: Story = {
     isListExpanded: false,
   },
 };
+
+// Embedded (monitoring-sidebar) layout with a long resource URI: the target sits
+// in a horizontal scroll area rather than truncating with an ellipsis. Wrapped
+// in the pinned column's width so the overflow is visible.
+export const EmbeddedLongUri: Story = {
+  args: {
+    entry: longUriResourceEntry,
+    isPinned: false,
+    isListExpanded: false,
+    embedded: true,
+  },
+  decorators: [
+    (Story) => (
+      <Box w={340}>
+        <Story />
+      </Box>
+    ),
+  ],
+};

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

@@ -131,6 +131,22 @@ describe("ProtocolEntry", () => {
     expect(screen.getByText("resources/read")).toBeInTheDocument();
   });
 
+  it("adds a Copy button beside a resource URI target, but not a tool name", () => {
+    const { rerender } = renderWithMantine(
+      <ProtocolEntry {...baseProps} entry={successEntry} />,
+    );
+    const withoutResource = screen.queryAllByRole("button", {
+      name: "Copy",
+    }).length;
+    rerender(<ProtocolEntry {...baseProps} entry={resourceReadEntry} />);
+    // The resource entry has exactly one more Copy button — the one beside its
+    // URI target (both entries otherwise carry the same expanded ContentViewer
+    // copy affordances).
+    expect(screen.queryAllByRole("button", { name: "Copy" }).length).toBe(
+      withoutResource + 1,
+    );
+  });
+
   it("renders Error status when response has error", () => {
     renderWithMantine(<ProtocolEntry {...baseProps} entry={errorEntry} />);
     expect(screen.getByText("Error")).toBeInTheDocument();

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

@@ -6,11 +6,13 @@ import {
   Collapse,
   Divider,
   Group,
+  ScrollArea,
   Stack,
   Text,
 } from "@mantine/core";
 import type { MessageEntry } from "../../../../../../core/mcp/types.js";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
+import { CopyButton } from "../../elements/CopyButton/CopyButton";
 import { MessageDirectionBadge } from "../../elements/MessageDirectionBadge/MessageDirectionBadge";
 import { MethodBadge } from "../../elements/MethodBadge/MethodBadge";
 import { ExpandToggle } from "../../elements/ExpandToggle/ExpandToggle";
@@ -67,6 +69,15 @@ const TargetText = Text.withProps({
   fw: 500,
 });
 
+// Compact-header target (e.g. a long resource URI): never wraps, so it scrolls
+// horizontally inside its ScrollArea instead of truncating with an ellipsis
+// (mirrors NetworkEntry's URL).
+const TargetScroll = Text.withProps({
+  size: "sm",
+  fw: 500,
+  variant: "nowrap",
+});
+
 const DurationText = Text.withProps({
   size: "sm",
   c: "dimmed",
@@ -100,6 +111,15 @@ function extractTarget(entry: MessageEntry): string | undefined {
   return undefined;
 }
 
+// The resource URI when the target is one (e.g. `resources/read`), so it can be
+// copied. Tool/prompt targets are plain names, not URIs, and get no copy button.
+function extractResourceUri(entry: MessageEntry): string | undefined {
+  const msg = entry.message;
+  if (!("params" in msg) || !msg.params) return undefined;
+  const params = msg.params as Record<string, unknown>;
+  return typeof params.uri === "string" ? params.uri : undefined;
+}
+
 // The pending → OK/Error lifecycle only applies to requests: messageLogState
 // attaches a `response` to request entries by JSON-RPC id. A notification is
 // fire-and-forget (no id, no response, ever) and an unmatched standalone
@@ -141,6 +161,7 @@ export function ProtocolEntry({
   const [isExpanded, setIsExpanded] = useState(isListExpanded);
   const method = extractMethod(entry);
   const target = extractTarget(entry);
+  const resourceUri = extractResourceUri(entry);
   const status = extractStatus(entry);
   const canReplay = isReplayableProtocolMethod(method);
 
@@ -184,9 +205,21 @@ export function ProtocolEntry({
               <HeaderCluster flex={1}>
                 <MethodBadge method={method} />
                 {target && (
-                  <TargetText truncate="end" miw={0}>
-                    {target}
-                  </TargetText>
+                  <>
+                    {resourceUri && <CopyButton value={resourceUri} />}
+                    <ScrollArea
+                      scrollbarSize={6}
+                      flex={1}
+                      miw={0}
+                      // The target scrolls horizontally but has no focusable
+                      // child, so make the viewport itself keyboard-scrollable
+                      // (WCAG SC 2.1.1). Scrollbar auto-hides via the
+                      // `type="scroll"` theme default.
+                      viewportProps={{ tabIndex: 0 }}
+                    >
+                      <TargetScroll>{target}</TargetScroll>
+                    </ScrollArea>
+                  </>
                 )}
               </HeaderCluster>
               <ControlsCluster>
@@ -208,7 +241,12 @@ export function ProtocolEntry({
                 </TimestampText>
                 {directionBadge}
                 <MethodBadge method={method} />
-                {target && <TargetText>{target}</TargetText>}
+                {target && (
+                  <>
+                    {resourceUri && <CopyButton value={resourceUri} />}
+                    <TargetText>{target}</TargetText>
+                  </>
+                )}
               </Group>
               <Group gap="sm">
                 {durationText}

clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx

@@ -102,6 +102,20 @@ export const ErroredBorder: Story = {
   },
 };
 
+// The green border flagging the server that just connected (#1682) — the
+// success mirror of ErroredBorder. It persists while connected and clears on
+// disconnect or a new connection attempt.
+export const JustConnected: Story = {
+  args: {
+    id: "3d2c1b0a-9f8e-4d6c-8b7a-1a2b3c4d5e6f",
+    name: "My MCP Server",
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: connected,
+    justConnected: true,
+  },
+};
+
 export const LongServerName: Story = {
   args: {
     id: "a1b2c3d4-e5f6-4789-9abc-def012345678",

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

@@ -471,4 +471,107 @@ describe("ServerCard", () => {
       }
     });
   });
+
+  describe("just-connected highlight (#1682)", () => {
+    it("draws the green highlight-variant border when justConnected", () => {
+      const { container } = renderWithMantine(
+        <ServerCard {...baseProps} connection={connected} justConnected />,
+      );
+      expect(
+        container.querySelector('[data-variant="highlighted"]'),
+      ).not.toBeNull();
+    });
+
+    it("does not draw the highlight border when not justConnected", () => {
+      const { container } = renderWithMantine(
+        <ServerCard {...baseProps} connection={connected} />,
+      );
+      expect(
+        container.querySelector('[data-variant="highlighted"]'),
+      ).toBeNull();
+    });
+
+    it("prefers the dimmed (disabled) variant over the just-connected highlight", () => {
+      const { container } = renderWithMantine(
+        <ServerCard
+          {...baseProps}
+          connection={connected}
+          activeServer="other"
+          justConnected
+        />,
+      );
+      expect(
+        container.querySelector('[data-variant="disabled"]'),
+      ).not.toBeNull();
+    });
+
+    it("does not clear on click when justConnected (unlike the freshly-added highlight)", async () => {
+      const user = userEvent.setup();
+      const onClearHighlight = vi.fn();
+      renderWithMantine(
+        <ServerCard
+          {...baseProps}
+          connection={connected}
+          justConnected
+          onClearHighlight={onClearHighlight}
+        />,
+      );
+      await user.click(screen.getByText("My MCP Server"));
+      expect(onClearHighlight).not.toHaveBeenCalled();
+    });
+
+    it("scrolls the card into view on the just-connected transition, deferred past the sidebar", () => {
+      vi.useFakeTimers();
+      const scrollIntoView = vi.fn();
+      const orig = Element.prototype.scrollIntoView;
+      Element.prototype.scrollIntoView = scrollIntoView;
+      try {
+        const { rerender } = renderWithMantine(
+          <ServerCard {...baseProps} connection={connecting} />,
+        );
+        vi.advanceTimersByTime(1000);
+        expect(scrollIntoView).not.toHaveBeenCalled();
+
+        // Becoming connected schedules a deferred scroll (past the column open).
+        rerender(
+          <ServerCard {...baseProps} connection={connected} justConnected />,
+        );
+        expect(scrollIntoView).not.toHaveBeenCalled();
+        vi.advanceTimersByTime(320);
+        expect(scrollIntoView).toHaveBeenCalledTimes(1);
+
+        // A further re-render while still connected does not scroll again.
+        rerender(
+          <ServerCard
+            {...baseProps}
+            name="Renamed"
+            connection={connected}
+            justConnected
+          />,
+        );
+        vi.advanceTimersByTime(1000);
+        expect(scrollIntoView).toHaveBeenCalledTimes(1);
+      } finally {
+        Element.prototype.scrollIntoView = orig;
+        vi.useRealTimers();
+      }
+    });
+
+    it("does not scroll when mounted already connected (no transition)", () => {
+      vi.useFakeTimers();
+      const scrollIntoView = vi.fn();
+      const orig = Element.prototype.scrollIntoView;
+      Element.prototype.scrollIntoView = scrollIntoView;
+      try {
+        renderWithMantine(
+          <ServerCard {...baseProps} connection={connected} justConnected />,
+        );
+        vi.advanceTimersByTime(1000);
+        expect(scrollIntoView).not.toHaveBeenCalled();
+      } finally {
+        Element.prototype.scrollIntoView = orig;
+        vi.useRealTimers();
+      }
+    });
+  });
 });

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

@@ -9,7 +9,7 @@ import { ServerStatusIndicator } from "../../elements/ServerStatusIndicator/Serv
 import { TransportBadge } from "../../elements/TransportBadge/TransportBadge";
 import { ConnectionToggle } from "../../elements/ConnectionToggle/ConnectionToggle";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
-import { FAILED_CARD_SCROLL_DELAY_MS } from "../../views/InspectorView/monitorColumnAnimation";
+import { CARD_SCROLL_DELAY_MS } from "../../views/InspectorView/monitorColumnAnimation";
 
 export interface ServerCardProps extends ServerEntry {
   activeServer?: string;
@@ -45,6 +45,13 @@ export interface ServerCardProps extends ServerEntry {
    * is connected or a new connection is attempted.
    */
   errored?: boolean;
+  /**
+   * When true, this server just connected successfully: the card draws the green
+   * highlight border and scrolls itself into view once the monitoring sidebar
+   * has opened — the success mirror of `errored` (#1682). The parent clears this
+   * on disconnect or a new connection attempt.
+   */
+  justConnected?: boolean;
   /**
    * Whether a highlighted card scrolls itself into view. When several cards are
    * highlighted at once (a batch import) only the first should scroll, so the
@@ -96,6 +103,16 @@ const SubtleButton = Button.withProps({
   size: "xs",
 });
 
+// Raise the card's ContentViewer Code block (the command/URL) to the "on-card"
+// surface — white in light mode — mirroring the Protocol/Network `inset` message
+// cards, so it reads as raised on the card instead of blending with it. Set as a
+// cascade var on the card root; the Code theme reads `--inspector-code-surface`.
+const CARD_STYLES = {
+  root: {
+    "--inspector-code-surface": "var(--inspector-surface-code-oncard)",
+  },
+} as const;
+
 const RemoveButton = Button.withProps({
   variant: "subtle",
   size: "xs",
@@ -146,6 +163,7 @@ export function ServerCard({
   dragHandle,
   highlighted = false,
   errored = false,
+  justConnected = false,
   scrollOnHighlight = true,
   onClearHighlight,
 }: ServerCardProps) {
@@ -173,9 +191,24 @@ export function ServerCard({
     if (!justErrored) return;
     const timer = setTimeout(() => {
       rootRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
-    }, FAILED_CARD_SCROLL_DELAY_MS);
+    }, CARD_SCROLL_DELAY_MS);
     return () => clearTimeout(timer);
   }, [errored]);
+
+  // Success mirror of the errored scroll (#1682): on the →connected transition,
+  // scroll the just-connected card into view, deferred past the monitoring
+  // sidebar's open (same shared delay) so the grid reflow settles first. Edge-
+  // guarded so a re-render while still connected doesn't re-scroll.
+  const wasConnectedRef = useRef(justConnected);
+  useEffect(() => {
+    const justBecameConnected = justConnected && !wasConnectedRef.current;
+    wasConnectedRef.current = justConnected;
+    if (!justBecameConnected) return;
+    const timer = setTimeout(() => {
+      rootRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, CARD_SCROLL_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [justConnected]);
   const transport = getTransport(config);
   const commandOrUrl = getCommandOrUrl(config);
   const version = info?.version;
@@ -184,12 +217,12 @@ export function ServerCard({
 
   // A dimmed card (another server is active) is inert, so the disabled variant
   // wins; otherwise a failed-connection card draws the red error border, then a
-  // freshly-added card draws the highlighted green border.
+  // freshly-added or just-connected card draws the highlighted green border.
   const variant = isDimmed
     ? "disabled"
     : errored
       ? "errored"
-      : highlighted
+      : highlighted || justConnected
         ? "highlighted"
         : undefined;
 
@@ -197,6 +230,7 @@ export function ServerCard({
     <Card
       ref={rootRef}
       variant={variant}
+      styles={CARD_STYLES}
       onClick={highlighted ? onClearHighlight : undefined}
       {...(isDimmed ? { "aria-disabled": true, inert: true } : {})}
     >
@@ -210,6 +244,11 @@ export function ServerCard({
             <ServerStatusIndicator
               status={connection.status}
               retryCount={connection.retryCount}
+              failed={errored}
+              // The card has its own width and isn't subject to the header's
+              // tab-row crowding, so always show the status label rather than
+              // inheriting the header-motivated viewport breakpoint.
+              showLabel
             />
             <ConnectionToggle
               status={connection.status}

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

@@ -70,6 +70,19 @@ describe("ViewHeader", () => {
       ).toBeInTheDocument();
     });
 
+    it("shows an 'MCP Documentation' tooltip on the logo link (#1682)", async () => {
+      const user = userEvent.setup();
+      renderWithMantine(
+        <ViewHeader
+          connected={false}
+          onToggleTheme={vi.fn()}
+          onOpenClientSettings={vi.fn()}
+        />,
+      );
+      await user.hover(screen.getByRole("link"));
+      expect(await screen.findByText("MCP Documentation")).toBeInTheDocument();
+    });
+
     it("invokes onOpenClientSettings when the client settings button is clicked", async () => {
       const user = userEvent.setup();
       const onOpenClientSettings = vi.fn();
@@ -179,10 +192,10 @@ describe("ViewHeader", () => {
       renderWithMantine(
         <ViewHeader {...connectedProps} onDisconnect={onDisconnect} />,
       );
-      // Either label-button "Disconnect" (wide) or icon-only with aria-label
-      const disconnectButton =
-        screen.queryByRole("button", { name: "Disconnect" }) ??
-        screen.getByRole("button", { name: /disconnect/i });
+      // Disconnect is always the icon, labelled by its aria-label / tooltip.
+      const disconnectButton = screen.getByRole("button", {
+        name: "Disconnect from server",
+      });
       await user.click(disconnectButton);
       expect(onDisconnect).toHaveBeenCalledTimes(1);
     });
@@ -193,7 +206,7 @@ describe("ViewHeader", () => {
       expect(screen.getAllByText("Prompts").length).toBeGreaterThan(0);
     });
 
-    it("renders the SegmentedControl and label disconnect button on wide viewports", async () => {
+    it("renders the SegmentedControl and the disconnect icon on wide viewports", async () => {
       mediaQueryMock.value = true;
       const user = userEvent.setup();
       const onTabChange = vi.fn();
@@ -205,8 +218,10 @@ describe("ViewHeader", () => {
           onDisconnect={onDisconnect}
         />,
       );
-      // Disconnect renders as a labelled button on wide viewport.
-      const disconnectBtn = screen.getByRole("button", { name: "Disconnect" });
+      // Disconnect is always the icon (labelled by its tooltip / aria-label).
+      const disconnectBtn = screen.getByRole("button", {
+        name: "Disconnect from server",
+      });
       await user.click(disconnectBtn);
       expect(onDisconnect).toHaveBeenCalledTimes(1);
 
@@ -307,7 +322,7 @@ describe("ViewHeader", () => {
       ).toBe("in");
       expect(
         screen
-          .getByRole("button", { name: "Disconnect" })
+          .getByRole("button", { name: "Disconnect from server" })
           .closest("[data-anim]")
           ?.getAttribute("data-anim"),
       ).toBe("in");
@@ -328,7 +343,7 @@ describe("ViewHeader", () => {
       ).toBe("out");
       expect(
         screen
-          .getByRole("button", { name: "Disconnect" })
+          .getByRole("button", { name: "Disconnect from server" })
           .closest("[data-anim]")
           ?.getAttribute("data-anim"),
       ).toBe("out");
@@ -337,7 +352,7 @@ describe("ViewHeader", () => {
         expect(screen.queryByText("my-mcp-server")).not.toBeInTheDocument(),
       );
       expect(
-        screen.queryByRole("button", { name: "Disconnect" }),
+        screen.queryByRole("button", { name: "Disconnect from server" }),
       ).not.toBeInTheDocument();
     });
 
@@ -415,20 +430,14 @@ describe("ViewHeader", () => {
       }
     });
 
-    it("invokes onTabChange when a different tab is picked from the Select", async () => {
+    it("invokes onTabChange when a different tab is picked", async () => {
       const user = userEvent.setup();
       const onTabChange = vi.fn();
       renderWithMantine(
         <ViewHeader {...connectedProps} onTabChange={onTabChange} />,
       );
-      // On narrow viewport (default mediaQuery=false), tabs use a Select.
-      const select = screen.getByRole("textbox");
-      await user.click(select);
-      const option = await screen.findByRole("option", {
-        name: "Resources",
-        hidden: true,
-      });
-      await user.click(option);
+      // Tabs always render as a SegmentedControl (radios); pick another one.
+      await user.click(screen.getByRole("radio", { name: "Resources" }));
       expect(onTabChange).toHaveBeenCalledWith("Resources");
     });
   });

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

@@ -3,11 +3,9 @@ import {
   ActionIcon,
   Anchor,
   Box,
-  Button,
   Group,
   Image,
   SegmentedControl,
-  Select,
   Text,
   Title,
   Tooltip,
@@ -15,9 +13,9 @@ import {
   useComputedColorScheme,
   type MantineTransition,
 } from "@mantine/core";
-import { useMediaQuery } from "@mantine/hooks";
 import type { Implementation } from "@modelcontextprotocol/sdk/types.js";
-import { MdLightMode, MdDarkMode, MdLinkOff, MdSettings } from "react-icons/md";
+import { MdLightMode, MdDarkMode, MdSettings } from "react-icons/md";
+import { VscDebugDisconnect } from "react-icons/vsc";
 import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 import { ServerStatusIndicator } from "../../elements/ServerStatusIndicator/ServerStatusIndicator";
 import {
@@ -62,8 +60,6 @@ export type ViewHeaderProps = ConnectedProps | UnconnectedProps;
 // duration. The motion itself is CSS (`.header-anim`); keep the 300ms /
 // 150ms-stagger there in sync with this value.
 const HEADER_ANIM_MS = 300;
-// Fixed Select width on narrow viewports (fits the longest tab label).
-const SELECT_WIDTH = 140;
 // Grace window after a connection is established before the new-tab glow arms
 // (#1450). Primitive lists (prompts/resources/tasks) are fetched asynchronously
 // just after the handshake, so their tabs appear a few renders into the
@@ -181,20 +177,10 @@ const RightConnectedGroup = Group.withProps({
   wrap: "nowrap",
 });
 
-const DisconnectButton = Button.withProps({
-  variant: "subtle",
-  // `color` drives the subtle hover/active tint; `c` overrides just the label
-  // to the AA-compliant danger red (red.6 text alone fell under contrast).
-  color: "red.6",
-  size: "sm",
-  c: "var(--inspector-danger-text)",
-});
-
 const DisconnectIcon = ActionIcon.withProps({
   variant: "subtle",
-  c: "red",
   size: 36,
-  "aria-label": "Disconnect",
+  "aria-label": "Disconnect from server",
 });
 
 const ClientSettingsToggle = ActionIcon.withProps({
@@ -249,8 +235,6 @@ export function ViewHeader(props: ViewHeaderProps) {
   }
   const monitorToggleForRender = props.monitorToggle ?? lastMonitorToggle;
   const ThemeIcon = colorScheme === "dark" ? MdLightMode : MdDarkMode;
-  const showSegmented = useMediaQuery("(min-width: 992px)");
-  const showDisconnectLabel = useMediaQuery("(min-width: 768px)");
 
   // Retain the latest connected display data so each region can keep rendering
   // it while animating out after disconnect (#1450). Uses React's "adjust state
@@ -318,9 +302,11 @@ export function ViewHeader(props: ViewHeaderProps) {
   return (
     <HeaderBar>
       <LeftSection>
-        <LogoLink>
-          <LogoImage src={logoSrc} />
-        </LogoLink>
+        <Tooltip label="MCP Documentation">
+          <LogoLink>
+            <LogoImage src={logoSrc} />
+          </LogoLink>
+        </Tooltip>
         <Transition
           mounted={props.connected}
           transition="fade"
@@ -364,26 +350,12 @@ export function ViewHeader(props: ViewHeaderProps) {
                 className="header-anim header-stack-cell"
                 data-anim={connectedAnim}
               >
-                {showSegmented ? (
-                  <SegmentedControl
-                    value={headerData.activeTab}
-                    onChange={handleTabChange}
-                    data={toGlowingTabData(headerData.availableTabs, glowing)}
-                    size="sm"
-                  />
-                ) : (
-                  // Narrow viewport: the new-tab glow doesn't apply to the
-                  // dropdown (a collapsed Select can't pulse a single option),
-                  // so the labels stay plain strings here.
-                  <Select
-                    value={headerData.activeTab}
-                    onChange={(value) => value && handleTabChange?.(value)}
-                    data={headerData.availableTabs}
-                    size="sm"
-                    allowDeselect={false}
-                    w={SELECT_WIDTH}
-                  />
-                )}
+                <SegmentedControl
+                  value={headerData.activeTab}
+                  onChange={handleTabChange}
+                  data={toGlowingTabData(headerData.availableTabs, glowing)}
+                  size="sm"
+                />
               </Box>
             ) : (
               // Unreachable in practice — the Transition only mounts while
@@ -425,15 +397,11 @@ export function ViewHeader(props: ViewHeaderProps) {
                   status={headerData.status}
                   latencyMs={headerData.latencyMs}
                 />
-                {showDisconnectLabel ? (
-                  <DisconnectButton onClick={handleDisconnect}>
-                    Disconnect
-                  </DisconnectButton>
-                ) : (
-                  <DisconnectIcon onClick={handleDisconnect} title="Disconnect">
-                    <MdLinkOff size={20} />
+                <Tooltip label="Disconnect from server">
+                  <DisconnectIcon onClick={handleDisconnect}>
+                    <VscDebugDisconnect size={20} />
                   </DisconnectIcon>
-                )}
+                </Tooltip>
               </RightConnectedGroup>
             ) : (
               /* v8 ignore next -- unreachable: this Transition only mounts