diff --git a/clients/web/src/App.css b/clients/web/src/App.css
index 3c4e03bf9..a5d50ba28 100644
--- a/clients/web/src/App.css
+++ b/clients/web/src/App.css
@@ -31,10 +31,16 @@
      otherwise defaults to pure white. */
   --inspector-surface-body: var(--mantine-color-gray-1);
   --inspector-surface-card: var(--mantine-color-white);
-  /* Recessed list-item surface (Protocol/Network message cards): light-grey in
-     light mode so the entries read as sunk into their white panel; keeps the
-     standard card tone in dark (overridden below). */
-  --inspector-surface-inset: var(--mantine-color-gray-1);
+  /* Server-card fill: a hair lighter than the grey app background (`gray-0` vs
+     the body's `gray-1`) so the cards read as faintly raised on the white
+     Servers box. Light mode only; dark tracks the standard card surface. */
+  --inspector-surface-card-server: var(--mantine-color-gray-0);
+  /* Entry-card surface (Protocol / Network / Task message cards): the faint
+     `gray-0` grey — a hair lighter than the `gray-1` app background and matching
+     the server cards — so the entries read as soft cards on their white panel
+     (their inner Code blocks are raised to white via the `inset` variant). Keeps
+     the standard card tone in dark (overridden below). */
+  --inspector-surface-inset: var(--mantine-color-gray-0);
   /* Code/content surfaces match the light-grey body so they stay distinct
      against the white cards (the Code block has no border of its own). Dark
      mode keeps the darker `dark-9` inset below. */
@@ -125,6 +131,9 @@
      tab bar share `gray-1`. Cards (`gray-9`) still sit a step above it. */
   --inspector-surface-body: var(--mantine-color-dark-8);
   --inspector-surface-card: var(--mantine-color-gray-9);
+  /* Dark keeps server cards at the standard card surface (the lighter grey is a
+     light-mode-only treatment). */
+  --inspector-surface-card-server: var(--inspector-surface-card);
   /* Dark keeps the message cards at the standard card tone (they already
      contrast against the darker panel/body), so only light mode goes grey. */
   --inspector-surface-inset: var(--mantine-color-gray-9);
@@ -225,6 +234,21 @@ body {
   background-color: var(--inspector-surface-body);
 }
 
+/* Floor the app at 1280px so the header, split panes, and footer never reflow
+   into a broken layout; below this the whole app scrolls horizontally instead.
+   Scoped to the app mount (#root) rather than `body` so it doesn't leak into
+   Storybook, which shares App.css but renders stories into its own root.
+
+   The `transform` makes #root the containing block for the AppShell's
+   position:fixed header + footer, so they honor the 1280px floor too — spanning
+   the full 1280 and scrolling horizontally with the content — instead of staying
+   pinned to a narrower viewport. Body-portalled overlays (modals, tooltips,
+   dropdowns) render outside #root, so they stay viewport-fixed as intended. */
+#root {
+  min-width: 1280px;
+  transform: translateZ(0);
+}
+
 /* ── Animations ──────────────────────────────────────────── */
 
 @keyframes inspector-pulse {
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 350213f4c..0dd217cf8 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -101,8 +101,6 @@ import { useServerListWritable } from "@inspector/core/react/useServerListWritab
 import { useInspectorVersion } from "@inspector/core/react/useInspectorVersion.js";
 import { usePendingClientRequests } from "@inspector/core/react/usePendingClientRequests.js";
 import { InspectorView } from "./components/views/InspectorView/InspectorView";
-import { VersionBadge } from "./components/elements/VersionBadge/VersionBadge";
-import { CopyrightBadge } from "./components/elements/CopyrightBadge/CopyrightBadge";
 import type {
   ToolCallState,
   ToolsUiState,
@@ -654,6 +652,14 @@ function App() {
     undefined,
   );
 
+  // Id of the server that just connected successfully (#1682) — the success
+  // mirror of `failedServerId`. Drives the green highlight + scroll-into-view on
+  // that ServerCard. Set on the →connected transition, cleared when a new
+  // connection attempt starts or the session disconnects.
+  const [connectedServerId, setConnectedServerId] = useState<
+    string | undefined
+  >(undefined);
+
   // InspectorClient + per-primitive state managers. All recreated together
   // whenever the user switches active servers, then destroyed when the
   // next switch happens (or when the component unmounts).
@@ -993,6 +999,18 @@ function App() {
     }
   }, [connectionStatus]);
 
+  // Track the just-connected server so its card gets the green highlight +
+  // scroll-into-view (#1682). Unlike `failedServerId` (which must survive the
+  // `disconnect` event a failed connect fires), "connected" is a stable status,
+  // so a status-driven effect can both set and clear it: set on connect, clear
+  // whenever the session isn't connected (disconnect, a new attempt's
+  // "connecting", or an error).
+  useEffect(() => {
+    setConnectedServerId(
+      connectionStatus === "connected" ? activeServerId : undefined,
+    );
+  }, [connectionStatus, activeServerId]);
+
   // Disconnect the previous InspectorClient when it's replaced (server
   // switch) or when App unmounts (HMR, tests). Without this the prior
   // session's transport — a spawned stdio subprocess, an SSE stream, or
@@ -3821,6 +3839,8 @@ function App() {
           serverListWritable={serverListWritable}
           activeServer={activeServerId}
           erroredServerId={failedServerId}
+          connectedServerId={connectedServerId}
+          version={inspectorVersion}
           connectionStatus={connectionStatus}
           connectErrorMessage={connectErrorMessage}
           initializeResult={initializeResult}
@@ -3965,8 +3985,6 @@ function App() {
           onRefreshApps={onRefreshTools}
         />
       </Box>
-      <CopyrightBadge />
-      <VersionBadge version={inspectorVersion} />
       <ServerConfigModal
         opened={configModal !== null}
         mode={configModal?.mode ?? "add"}
diff --git a/clients/web/src/components/elements/CopyrightBadge/CopyrightBadge.tsx b/clients/web/src/components/elements/CopyrightBadge/CopyrightBadge.tsx
index 49f1fb7c1..2790c295b 100644
--- a/clients/web/src/components/elements/CopyrightBadge/CopyrightBadge.tsx
+++ b/clients/web/src/components/elements/CopyrightBadge/CopyrightBadge.tsx
@@ -4,14 +4,14 @@ import { Text } from "@mantine/core";
 export const COPYRIGHT_NOTICE =
   "Copyright © Model Context Protocol a Series of LF Projects, LLC.";
 
-// The `copyrightBadge` variant (src/theme/Text.ts) pins it to the lower-right
-// corner in grey, on the same row as the version badge, and non-interactive.
+// The `copyrightBadge` variant (src/theme/Text.ts) styles it as a small grey
+// single-line label; the footer row positions it at the right (#1682).
 const CopyrightText = Text.withProps({ variant: "copyrightBadge" });
 
 /**
- * The project copyright notice, fixed to the lower-right corner of the screen
- * (#1639) — the grey, non-interactive twin of the lower-left version badge,
- * sharing its row.
+ * The project copyright notice, shown at the right of the footer row (#1682,
+ * superseding the fixed lower-right badge of #1639) — the grey twin of the
+ * left-aligned version badge, sharing the footer.
  */
 export function CopyrightBadge() {
   return <CopyrightText>{COPYRIGHT_NOTICE}</CopyrightText>;
diff --git a/clients/web/src/components/elements/EmbeddableScrollArea/EmbeddableScrollArea.tsx b/clients/web/src/components/elements/EmbeddableScrollArea/EmbeddableScrollArea.tsx
index 5927fab69..0ad636754 100644
--- a/clients/web/src/components/elements/EmbeddableScrollArea/EmbeddableScrollArea.tsx
+++ b/clients/web/src/components/elements/EmbeddableScrollArea/EmbeddableScrollArea.tsx
@@ -4,7 +4,7 @@ import { ScrollArea, Stack } from "@mantine/core";
 // Full-size, the monitor stream panels bound their scroll to the viewport
 // minus the header and the panel's own chrome.
 const FULLSIZE_MAH =
-  "calc(100vh - var(--app-shell-header-height, 0px) - 150px)";
+  "calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px) - 150px)";
 
 export interface EmbeddableScrollAreaProps {
   /**
diff --git a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.stories.tsx b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.stories.tsx
index 2a4ef092b..2b5471130 100644
--- a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.stories.tsx
+++ b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.stories.tsx
@@ -28,6 +28,17 @@ export const Disconnected: Story = {
   },
 };
 
+// A failed connection settles the status back to "disconnected", but the
+// `failed` flag surfaces it as a red "Failed" instead of the grey
+// "Disconnected" (#1682).
+export const Failed: Story = {
+  args: {
+    status: "disconnected",
+    failed: true,
+    showLabel: true,
+  },
+};
+
 export const Error: Story = {
   args: {
     status: "error",
diff --git a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.test.tsx b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.test.tsx
index 4eb628945..ce0494559 100644
--- a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.test.tsx
+++ b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.test.tsx
@@ -39,6 +39,27 @@ describe("ServerStatusIndicator", () => {
     expect(screen.getByText("Error")).toBeInTheDocument();
   });
 
+  it("renders 'Failed' with the error color when failed, overriding the disconnected status (#1682)", () => {
+    const { container } = renderWithMantine(
+      <ServerStatusIndicator status="disconnected" failed showLabel />,
+    );
+    expect(screen.getByText("Failed")).toBeInTheDocument();
+    expect(screen.queryByText("Disconnected")).not.toBeInTheDocument();
+    // The dot uses the error color, not the disconnected grey.
+    const dot = container.querySelector(".mantine-Paper-root");
+    expect(dot?.getAttribute("style") ?? "").toContain(
+      "inspector-status-error",
+    );
+  });
+
+  it("does not show 'Failed' when the failed flag is unset (a deliberate disconnect)", () => {
+    renderWithMantine(
+      <ServerStatusIndicator status="disconnected" showLabel />,
+    );
+    expect(screen.getByText("Disconnected")).toBeInTheDocument();
+    expect(screen.queryByText("Failed")).not.toBeInTheDocument();
+  });
+
   it("hides label and uses title when showLabel is false", () => {
     renderWithMantine(
       <ServerStatusIndicator
diff --git a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
index fc4858e2b..0dbe6e489 100644
--- a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
+++ b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
@@ -6,6 +6,13 @@ export interface ServerStatusIndicatorProps {
   status: ConnectionStatus;
   latencyMs?: number;
   retryCount?: number;
+  /**
+   * True when the server's last connection attempt failed (#1682). The
+   * indicator then shows a red dot + "Failed" instead of the settled
+   * grey "Disconnected", so a failed connect reads distinctly from a
+   * deliberate disconnect. Overrides `status` for the label and color.
+   */
+  failed?: boolean;
   // Override for the default viewport-based label visibility. Useful when
   // the indicator renders inside a constrained container (sidebar, card)
   // where the global media query doesn't reflect available space.
@@ -46,16 +53,30 @@ export function ServerStatusIndicator({
   status,
   latencyMs,
   retryCount,
+  failed = false,
   showLabel: showLabelProp,
 }: ServerStatusIndicatorProps) {
-  const wideViewport = useMediaQuery("(min-width: 1200px)");
+  // Drop the text label below 1500px. "Connected (Nms)" is the header's widest
+  // optional element, so shedding it first — earlier than the Disconnect control,
+  // which collapses at the 1280px floor (see ViewHeader) — keeps the tab row from
+  // crowding. Below the breakpoint the indicator is a dot only, with the label
+  // moved to its `title` tooltip.
+  const wideViewport = useMediaQuery("(min-width: 1500px)");
   const showLabel = showLabelProp ?? wideViewport;
-  const label = getLabel(status, latencyMs, retryCount);
+  // A failed connection settles the status back to "disconnected"; the `failed`
+  // flag distinguishes it as a failure (red + "Failed") from a deliberate
+  // disconnect (grey), overriding the status-derived label and color.
+  const label = failed ? "Failed" : getLabel(status, latencyMs, retryCount);
+  const color = failed
+    ? "var(--inspector-status-error)"
+    : statusColorVar[status];
   return (
     <Group gap="xs">
       <Dot
-        bg={statusColorVar[status]}
-        className={status === "connecting" ? "inspector-pulse" : undefined}
+        bg={color}
+        className={
+          !failed && status === "connecting" ? "inspector-pulse" : undefined
+        }
         title={showLabel ? undefined : label}
       />
       {showLabel && <Text size="sm">{label}</Text>}
diff --git a/clients/web/src/components/elements/VersionBadge/VersionBadge.tsx b/clients/web/src/components/elements/VersionBadge/VersionBadge.tsx
index fbb834d73..170db866e 100644
--- a/clients/web/src/components/elements/VersionBadge/VersionBadge.tsx
+++ b/clients/web/src/components/elements/VersionBadge/VersionBadge.tsx
@@ -5,15 +5,15 @@ export interface VersionBadgeProps {
   version?: string;
 }
 
-// The `versionBadge` variant (src/theme/Text.ts) pins it to the lower-left
-// corner in grey and makes it non-interactive.
+// The `versionBadge` variant (src/theme/Text.ts) styles it as a small grey
+// single-line label; the footer row positions it at the left (#1682).
 const VersionText = Text.withProps({ variant: "versionBadge" });
 
 /**
- * A small, unobtrusive build-version label fixed to the lower-left corner of
- * the screen (#1639). Sourced from the root `package.json` via the backend's
- * `GET /api/config`; renders nothing until the version is known (or on a legacy
- * backend that omits it).
+ * A small, unobtrusive build-version label shown at the left of the footer row
+ * (#1682, superseding the fixed lower-left badge of #1639). Sourced from the
+ * root `package.json` via the backend's `GET /api/config`; renders nothing until
+ * the version is known (or on a legacy backend that omits it).
  */
 export function VersionBadge({ version }: VersionBadgeProps) {
   if (!version) return null;
diff --git a/clients/web/src/components/groups/AppControls/AppControls.tsx b/clients/web/src/components/groups/AppControls/AppControls.tsx
index 14d02908b..2389fbdef 100644
--- a/clients/web/src/components/groups/AppControls/AppControls.tsx
+++ b/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",
diff --git a/clients/web/src/components/groups/MonitoringControls/MonitoringControls.tsx b/clients/web/src/components/groups/MonitoringControls/MonitoringControls.tsx
index 5e10a6e1a..b9b14cd0c 100644
--- a/clients/web/src/components/groups/MonitoringControls/MonitoringControls.tsx
+++ b/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`
diff --git a/clients/web/src/components/groups/MonitoringScreen/MonitoringScreen.tsx b/clients/web/src/components/groups/MonitoringScreen/MonitoringScreen.tsx
index ea15a8ff8..4917f5456 100644
--- a/clients/web/src/components/groups/MonitoringScreen/MonitoringScreen.tsx
+++ b/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>
diff --git a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx b/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
index b0e47bc15..f2c7f33fc 100644
--- a/clients/web/src/components/groups/NetworkEntry/NetworkEntry.tsx
+++ b/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">
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.stories.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.stories.tsx
index 54e7ecfd8..3b185eb07 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.stories.tsx
+++ b/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>
+    ),
+  ],
+};
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx
index 165602204..a8bdce1e4 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.test.tsx
+++ b/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();
diff --git a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx b/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
index 0b84193f6..01cb94222 100644
--- a/clients/web/src/components/groups/ProtocolEntry/ProtocolEntry.tsx
+++ b/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}
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
index ac1265e65..74e05e86e 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
+++ b/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",
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx
index 0ad12edc8..49d89ff6f 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.test.tsx
+++ b/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();
+      }
+    });
+  });
 });
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index 5ffd872f8..e3f3c5d07 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/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}
diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.test.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.test.tsx
index d5bd12fb4..705857f6e 100644
--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.test.tsx
+++ b/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");
     });
   });
diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
index 4d7c1eaf6..f4bb44f48 100644
--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
+++ b/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
diff --git a/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx b/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
index 0a38c2eae..5005767a4 100644
--- a/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
+++ b/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
@@ -88,7 +88,7 @@ export interface AppsUiState {
 
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
   align: "flex-start",
diff --git a/clients/web/src/components/screens/ConsoleScreen/ConsoleScreen.tsx b/clients/web/src/components/screens/ConsoleScreen/ConsoleScreen.tsx
index 79c003e26..3529ec023 100644
--- a/clients/web/src/components/screens/ConsoleScreen/ConsoleScreen.tsx
+++ b/clients/web/src/components/screens/ConsoleScreen/ConsoleScreen.tsx
@@ -40,7 +40,7 @@ export interface ConsoleUiState {
 
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
 });
@@ -127,7 +127,7 @@ export function ConsoleScreen({
     // See LoggingScreen: only override `h` when embedded, so the standalone
     // screen keeps ScreenLayout's default full-screen height (a `h={undefined}`
     // would clobber it and collapse an empty screen to its controls' height).
-    <ScreenLayout {...(embedded ? { h: "100%" } : {})}>
+    <ScreenLayout {...(embedded ? { h: "100%", pt: "md" } : {})}>
       {embedded ? null : (
         <Sidebar>
           <SidebarCard>
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
index 755fce30e..58e254dfc 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
@@ -33,7 +33,7 @@ export interface LogsUiState {
 
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
 });
@@ -82,7 +82,9 @@ export function LoggingScreen({
     // ScreenLayout's default full-screen height. Passing `h={undefined}` here
     // would clobber that default (withProps plain-spreads), collapsing an empty
     // screen to its controls' height — so only override `h` when embedded.
-    <ScreenLayout {...(embedded ? { h: "100%" } : {})}>
+    // Embedded also halves the top padding (`pt: md` vs the `xl` default) so the
+    // panel sits closer to the sidebar's tab/search controls above it.
+    <ScreenLayout {...(embedded ? { h: "100%", pt: "md" } : {})}>
       {embedded ? null : (
         <Sidebar>
           <SidebarCard>
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
index 430022e23..ce135227e 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
@@ -34,7 +34,7 @@ export interface NetworkUiState {
 
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
 });
@@ -87,7 +87,7 @@ export function NetworkScreen({
     // See LoggingScreen: only override `h` when embedded, so the standalone
     // screen keeps ScreenLayout's default full-screen height (a `h={undefined}`
     // would clobber it and collapse an empty screen to its controls' height).
-    <ScreenLayout {...(embedded ? { h: "100%" } : {})}>
+    <ScreenLayout {...(embedded ? { h: "100%", pt: "md" } : {})}>
       {embedded ? null : (
         <Sidebar>
           <SidebarCard>
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
index 5225386ab..fb721d6b5 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
@@ -59,7 +59,7 @@ export interface PromptsUiState {
 
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
 });
@@ -108,7 +108,7 @@ const EmptyState = Text.withProps({
 });
 
 const SCROLL_MAX_HEIGHT =
-  "calc(100dvh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)";
+  "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px) - var(--mantine-spacing-xl) * 2)";
 
 function hasArguments(prompt: Prompt): boolean {
   return !!prompt.arguments && prompt.arguments.length > 0;
diff --git a/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx b/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
index cac9f83dc..a707ae637 100644
--- a/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
+++ b/clients/web/src/components/screens/ProtocolScreen/ProtocolScreen.tsx
@@ -41,7 +41,7 @@ export interface ProtocolUiState {
 
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
 });
@@ -107,7 +107,7 @@ export function ProtocolScreen({
     // See LoggingScreen: only override `h` when embedded, so the standalone
     // screen keeps ScreenLayout's default full-screen height (a `h={undefined}`
     // would clobber it and collapse an empty screen to its controls' height).
-    <ScreenLayout {...(embedded ? { h: "100%" } : {})}>
+    <ScreenLayout {...(embedded ? { h: "100%", pt: "md" } : {})}>
       {embedded ? null : (
         <Sidebar>
           <SidebarCard>
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
index 61e6a1745..672d9292e 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
@@ -74,7 +74,7 @@ export interface ResourcesUiState {
 
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
 });
@@ -126,7 +126,7 @@ const EmptyState = Text.withProps({
 });
 
 const SCROLL_MAX_HEIGHT =
-  "calc(100dvh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)";
+  "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px) - var(--mantine-spacing-xl) * 2)";
 
 export function ResourcesScreen({
   resources,
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
index 88c4810e3..2c72927a6 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
@@ -43,6 +43,13 @@ describe("ServerListScreen", () => {
     expect(screen.getByText("Beta")).toBeInTheDocument();
   });
 
+  it("renders the 'Servers' box heading", () => {
+    renderWithMantine(<ServerListScreen {...baseProps} />);
+    expect(
+      screen.getByRole("heading", { name: "Servers" }),
+    ).toBeInTheDocument();
+  });
+
   it("renders the empty state with no servers", () => {
     renderWithMantine(<ServerListScreen {...baseProps} servers={[]} />);
     expect(
@@ -157,6 +164,32 @@ describe("ServerListScreen", () => {
     });
   });
 
+  describe("just-connected highlight (#1682)", () => {
+    it("draws the green highlight border on the just-connected server's card", () => {
+      const { container } = renderWithMantine(
+        <ServerListScreen
+          {...baseProps}
+          activeServer="beta"
+          connectedServerId="beta"
+        />,
+      );
+      const highlighted = container.querySelectorAll(
+        '[data-variant="highlighted"]',
+      );
+      expect(highlighted).toHaveLength(1);
+      expect(highlighted[0]).toHaveTextContent("Beta");
+    });
+
+    it("draws no highlight border when connectedServerId is unset", () => {
+      const { container } = renderWithMantine(
+        <ServerListScreen {...baseProps} activeServer="beta" />,
+      );
+      expect(
+        container.querySelectorAll('[data-variant="highlighted"]'),
+      ).toHaveLength(0);
+    });
+  });
+
   describe("freshly-added highlight", () => {
     it("draws a green highlight border on every highlighted server", () => {
       const { container } = renderWithMantine(
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
index f27b0d33f..43772d920 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
@@ -1,10 +1,14 @@
 import {
   Alert,
   Code,
+  Flex,
+  Group,
+  Paper,
   ScrollArea,
   SimpleGrid,
   Stack,
   Text,
+  Title,
 } from "@mantine/core";
 import {
   DndContext,
@@ -44,6 +48,12 @@ export interface ServerListScreenProps {
    * draws a red border until another server is connected or attempted.
    */
   erroredServerId?: string;
+  /**
+   * Id of the server that just connected successfully (#1682). Its card draws
+   * the green highlight border and scrolls into view — the success mirror of
+   * `erroredServerId`.
+   */
+  connectedServerId?: string;
   onAddManually: () => void;
   onImportConfig: () => void;
   onImportServerJson: () => void;
@@ -69,21 +79,74 @@ export interface ServerListScreenProps {
   onToggleCompact: () => void;
 }
 
-const PageContainer = Stack.withProps({
+// Full-height screen wrapper (matches the Protocol/Logs screens): fills the
+// viewport minus the header and footer, clips overflow, and lays the optional
+// read-only banner above the box in a column.
+const ScreenLayout = Flex.withProps({
+  variant: "screen",
+  direction: "column",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
+  gap: "md",
   p: "xl",
 });
 
+// The bordered box that fills the container (#1682 follow-up), styled like the
+// "Messages" panel: a `panel`-variant Paper (display:flex column) holding the
+// title + controls header and the scrolling card grid.
+const PanelContainer = Paper.withProps({
+  withBorder: true,
+  p: "lg",
+  flex: 1,
+  variant: "panel",
+  // The box takes the same surface as the header and footer (white in light
+  // mode) rather than the grey app background.
+  bg: "var(--mantine-color-body)",
+});
+
+// Header row inside the box: "Servers" title on the left, the Export / Add /
+// collapse controls on the right.
+const PanelHeader = Group.withProps({
+  justify: "space-between",
+  mb: "sm",
+});
+
+// Wraps the scroll region so it fills the box below the header (`flex:1/mih:0`)
+// and the inner ScrollArea can bound against it with `mah:100%`.
+const CardScrollWrap = Stack.withProps({
+  flex: 1,
+  mih: 0,
+  gap: 0,
+});
+
+// Centered in the full-height box so the empty message sits mid-panel rather
+// than clinging to the top (matches the Messages panel's empty state).
+const EmptyCenter = Stack.withProps({
+  flex: 1,
+  align: "center",
+  justify: "center",
+});
+
 const EmptyState = Text.withProps({
   c: "dimmed",
   ta: "center",
-  py: "xl",
 });
 
+// Override the card-surface var for the whole grid so every server card (in any
+// state — the theme's default/highlighted/errored/disabled Card variants all
+// read `--inspector-surface-card`) picks up the faintly-grey server tone,
+// without touching the shared token or the variant logic.
+const GRID_SURFACE_STYLES = {
+  root: {
+    "--inspector-surface-card": "var(--inspector-surface-card-server)",
+  },
+} as const;
+
 export function ServerListScreen({
   servers,
   writable = true,
   activeServer,
   erroredServerId,
+  connectedServerId,
   onAddManually,
   onImportConfig,
   onImportServerJson,
@@ -145,6 +208,7 @@ export function ServerListScreen({
     onRemove,
     highlighted: highlightedServerIds?.includes(server.id) ?? false,
     errored: server.id === erroredServerId,
+    justConnected: server.id === connectedServerId,
     scrollOnHighlight: server.id === firstHighlightedId,
     onClearHighlight: onClearHighlight
       ? () => onClearHighlight(server.id)
@@ -167,6 +231,7 @@ export function ServerListScreen({
       cols={{ base: 1, "1040px": 2, "1560px": 3 }}
       spacing="lg"
       className="grid-align-start"
+      styles={GRID_SURFACE_STYLES}
     >
       {servers.map((server) =>
         reorderable ? (
@@ -179,7 +244,7 @@ export function ServerListScreen({
   );
 
   return (
-    <PageContainer>
+    <ScreenLayout>
       {!writable && (
         <Alert color="gray" variant="light" title="Read-only session">
           This server list was launched with <Code>--config</Code> or an ad-hoc
@@ -187,45 +252,63 @@ export function ServerListScreen({
           <Code>--catalog</Code> (or no flag) to manage a writable catalog.
         </Alert>
       )}
-      <ServerListControls
-        serverCount={servers.length}
-        compact={compact}
-        writable={writable}
-        onToggleList={onToggleCompact}
-        onAddManually={onAddManually}
-        onImportConfig={onImportConfig}
-        onImportServerJson={onImportServerJson}
-        onExport={onExport}
-      />
-
-      <ScrollArea.Autosize
-        mah="calc(100dvh - var(--app-shell-header-height, 60px) - var(--mantine-spacing-xl) * 2 - 60px)"
-        // Same scrollbar treatment as the Protocol/Network/Logging list panels
-        // (#1474): reserve a gutter so the bar never overlays the right edge of
-        // the server cards (occluding their action icons / status badges), and
-        // only show it while actively scrolling rather than popping in on hover.
-        type="scroll"
-        offsetScrollbars
-      >
+      <PanelContainer>
+        <PanelHeader>
+          {/* Semantic h3 (visually h4) so it doesn't skip a level under the
+              disconnected header's h2 "MCP Inspector" (heading-order a11y). The
+              other panels render h4 directly because they only show while
+              connected, when the header carries no heading to skip under. */}
+          <Title order={3} size="h4">
+            Servers
+          </Title>
+          <ServerListControls
+            serverCount={servers.length}
+            compact={compact}
+            writable={writable}
+            onToggleList={onToggleCompact}
+            onAddManually={onAddManually}
+            onImportConfig={onImportConfig}
+            onImportServerJson={onImportServerJson}
+            onExport={onExport}
+          />
+        </PanelHeader>
+
         {servers.length === 0 ? (
-          <EmptyState>
-            No servers configured. Add a server to get started.
-          </EmptyState>
-        ) : reorderable ? (
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragEnd={handleDragEnd}
-            accessibility={{ announcements }}
-          >
-            <SortableContext items={ids} strategy={rectSortingStrategy}>
-              {grid}
-            </SortableContext>
-          </DndContext>
+          <EmptyCenter>
+            <EmptyState>
+              No servers configured. Add a server to get started.
+            </EmptyState>
+          </EmptyCenter>
         ) : (
-          grid
+          <CardScrollWrap>
+            <ScrollArea.Autosize
+              mah="100%"
+              // Same scrollbar treatment as the Protocol/Network/Logging list
+              // panels (#1474): reserve a gutter so the bar never overlays the
+              // right edge of the server cards (occluding their action icons /
+              // status badges), and only show it while actively scrolling
+              // rather than popping in on hover.
+              type="scroll"
+              offsetScrollbars
+            >
+              {reorderable ? (
+                <DndContext
+                  sensors={sensors}
+                  collisionDetection={closestCenter}
+                  onDragEnd={handleDragEnd}
+                  accessibility={{ announcements }}
+                >
+                  <SortableContext items={ids} strategy={rectSortingStrategy}>
+                    {grid}
+                  </SortableContext>
+                </DndContext>
+              ) : (
+                grid
+              )}
+            </ScrollArea.Autosize>
+          </CardScrollWrap>
         )}
-      </ScrollArea.Autosize>
-    </PageContainer>
+      </PanelContainer>
+    </ScreenLayout>
   );
 }
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
index 0a9a1b5e3..a54253a21 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
@@ -29,7 +29,7 @@ export interface TasksUiState {
 
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
 });
@@ -59,7 +59,9 @@ export function TasksScreen({
     // Embedded fills the monitoring sidebar column (100%); standalone keeps the
     // ScreenLayout's default full-screen height. Only override `h` when embedded
     // — passing `h={undefined}` would clobber the default (withProps spreads).
-    <ScreenLayout {...(embedded ? { h: "100%" } : {})}>
+    // Embedded also halves the top padding (`pt: md` vs `xl`) so the panel sits
+    // closer to the sidebar's tab/search controls (see LoggingScreen).
+    <ScreenLayout {...(embedded ? { h: "100%", pt: "md" } : {})}>
       {embedded ? null : (
         <Sidebar>
           <SidebarCard>
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
index 587472e85..aa312e18a 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
@@ -61,7 +61,7 @@ export interface ToolsScreenProps {
 // viewport minus the app-shell header and the screen's top+bottom xl padding,
 // leaving the bottom margin the overflow used to eat.
 const SCROLL_MAX_HEIGHT =
-  "calc(100dvh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)";
+  "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px) - var(--mantine-spacing-xl) * 2)";
 
 // No `align` override: children stretch to the row's full height, giving each
 // column pane a definite height. That definite height is what lets a column's
@@ -69,7 +69,7 @@ const SCROLL_MAX_HEIGHT =
 // see the Prompts/Resources preview panes this mirrors).
 const ScreenLayout = Flex.withProps({
   variant: "screen",
-  h: "calc(100dvh - var(--app-shell-header-height, 0px))",
+  h: "calc(100dvh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))",
   gap: "md",
   p: "xl",
 });
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index 9be90112d..5499d4bb6 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { describe, it, expect, vi, beforeEach } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type {
   InitializeResult,
@@ -20,18 +20,16 @@ import {
 } from "../../../test/renderWithMantine";
 import { InspectorView, type InspectorViewProps } from "./InspectorView";
 
-// The monitoring sidebar (#1616) is gated on a 1040px viewport media query.
-// happy-dom's viewport is 1024px, so that query is really false; make just that
-// gate controllable per test. ViewHeader's own 992/768 queries stay "wide" (as
-// they are in the real 1024px happy-dom viewport), so header rendering — and
-// every existing test below — is unaffected.
-const monitorWide = vi.hoisted(() => ({ value: false }));
+// happy-dom's viewport is 1024px, narrower than the app's 1280px floor, so any
+// viewport media query would read "narrow". Force every `useMediaQuery` "wide"
+// so the connected header renders its full form (the only surviving query is
+// ServerStatusIndicator's 1500px status-text gate — the monitoring sidebar's old
+// 1040px gate was removed when the app gained its 1280px floor).
 vi.mock("@mantine/hooks", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@mantine/hooks")>();
   return {
     ...actual,
-    useMediaQuery: (query: string): boolean =>
-      query === "(min-width: 1040px)" ? monitorWide.value : true,
+    useMediaQuery: (): boolean => true,
   };
 });
 import type { BridgeFactory } from "../../elements/AppRenderer/AppRenderer";
@@ -247,6 +245,16 @@ describe("InspectorView", () => {
     expect(screen.getByText("Alpha")).toBeInTheDocument();
   });
 
+  it("renders the footer row with the version and copyright (#1682)", () => {
+    renderWithMantine(
+      <StatefulInspectorViewHost {...makeProps({ version: "9.9.9" })} />,
+    );
+    expect(screen.getByText("v9.9.9")).toBeInTheDocument();
+    expect(
+      screen.getByText(/Model Context Protocol.*Series of LF Projects, LLC\./),
+    ).toBeInTheDocument();
+  });
+
   it("dispatches onToggleConnection with the server id when the card toggle is clicked", async () => {
     const onToggleConnection = vi.fn();
     const user = userEvent.setup({ delay: null });
@@ -1441,11 +1449,6 @@ describe("InspectorView", () => {
     };
     const httpInit = initWithCapabilities(allCapabilities);
 
-    beforeEach(() => {
-      // Default narrow so a test only pins when it opts in.
-      monitorWide.value = false;
-    });
-
     function connectedHttp(overrides: Partial<InspectorViewProps> = {}) {
       return makeProps({
         servers: [httpServer],
@@ -1464,17 +1467,7 @@ describe("InspectorView", () => {
       return user;
     }
 
-    it("shows the header monitoring toggle only when wide", async () => {
-      monitorWide.value = false;
-      const { unmount } = renderWithMantine(
-        <StatefulInspectorViewHost {...connectedHttp()} />,
-      );
-      expect(
-        screen.queryByRole("button", { name: "Open monitoring sidebar" }),
-      ).not.toBeInTheDocument();
-      unmount();
-
-      monitorWide.value = true;
+    it("shows the header monitoring toggle when connected with monitor tabs", async () => {
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       expect(
         await screen.findByRole("button", { name: "Open monitoring sidebar" }),
@@ -1483,7 +1476,6 @@ describe("InspectorView", () => {
 
     it("hides the header monitoring toggle when there is no connected or failed server", () => {
       // Disconnected, wide viewport: nothing to monitor, so no toggle appears.
-      monitorWide.value = true;
       renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -1502,7 +1494,6 @@ describe("InspectorView", () => {
     });
 
     it("opens the monitoring sidebar when a connection is established", async () => {
-      monitorWide.value = true;
       const { rerender } = renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -1527,7 +1518,6 @@ describe("InspectorView", () => {
     it("does not auto-open on a mount that starts already connected", () => {
       // No disconnected → connected transition, and no stored preference, so the
       // column stays closed (a user who closed it isn't fought on remount).
-      monitorWide.value = true;
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       expect(
         screen.queryByRole("button", { name: "Close monitoring sidebar" }),
@@ -1550,7 +1540,6 @@ describe("InspectorView", () => {
     }
 
     it("opens the monitoring sidebar on a failed connection attempt (#1621)", async () => {
-      monitorWide.value = true;
       const { rerender } = renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -1600,7 +1589,6 @@ describe("InspectorView", () => {
     });
 
     it("surfaces Console (stderr), not Network, in the failure column for a stdio server (#1621)", async () => {
-      monitorWide.value = true;
       const stdioErr: ServerEntry = {
         id: "beta",
         name: "Beta",
@@ -1647,7 +1635,6 @@ describe("InspectorView", () => {
       // was Protocol must still land on the Console diagnostic, not the (empty)
       // Protocol — Protocol is content-gated out of the failure column.
       window.localStorage.setItem("inspector.monitor.tab", "Protocol");
-      monitorWide.value = true;
       const stdioErr: ServerEntry = {
         id: "beta",
         name: "Beta",
@@ -1684,7 +1671,6 @@ describe("InspectorView", () => {
       // A connect failure with nothing captured yet (no stderr, no fetch, and
       // Protocol cleared on the error transition) opens onto nothing — so the
       // column stays closed rather than showing an empty pane.
-      monitorWide.value = true;
       const { rerender } = renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -1707,7 +1693,6 @@ describe("InspectorView", () => {
     it("offers Protocol in the failure column when it has captured content (#1621)", async () => {
       // The failure Protocol tab is content-gated, so when the message log *does*
       // hold entries it's offered alongside the diagnostic (Network here).
-      monitorWide.value = true;
       const { rerender } = renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -1753,7 +1738,6 @@ describe("InspectorView", () => {
     it("does not auto-open on a mount that starts already errored (#1621)", () => {
       // No transition into error, and no stored preference, so the column stays
       // closed — a user who closed it isn't fought on remount.
-      monitorWide.value = true;
       renderWithMantine(<StatefulInspectorViewHost {...failedHttp()} />);
       expect(
         screen.queryByRole("button", { name: "Close monitoring sidebar" }),
@@ -1766,7 +1750,6 @@ describe("InspectorView", () => {
       // attempts). That must NOT reorganize the column into the failure tab set
       // — it closes like any session teardown, so a user who closed the column
       // mid-session isn't reopened onto diagnostics.
-      monitorWide.value = true;
       window.localStorage.setItem("inspector.monitor.pinned", "true");
       const { rerender } = renderWithMantine(
         <StatefulInspectorViewHost {...connectedHttp()} />,
@@ -1803,7 +1786,6 @@ describe("InspectorView", () => {
     };
 
     it("offers Console (not Network) as a monitor tab for a connected stdio server (#1621)", async () => {
-      monitorWide.value = true;
       window.localStorage.setItem("inspector.monitor.pinned", "true");
       renderWithMantine(
         <StatefulInspectorViewHost
@@ -1831,7 +1813,6 @@ describe("InspectorView", () => {
       // Column not pinned, so the monitor group (incl. Console) lives in the
       // header menu — the user can reach the stderr stream during a live
       // session, not only on failure.
-      monitorWide.value = true;
       renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -1853,7 +1834,6 @@ describe("InspectorView", () => {
     });
 
     it("pins the monitor group into the column and removes it from the header", async () => {
-      monitorWide.value = true;
       const user = userEvent.setup();
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       await user.click(
@@ -1892,7 +1872,6 @@ describe("InspectorView", () => {
     });
 
     it("returns the monitor group to the header when the column is closed", async () => {
-      monitorWide.value = true;
       const user = userEvent.setup();
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       await user.click(
@@ -1915,7 +1894,6 @@ describe("InspectorView", () => {
     });
 
     it("keeps the current header screen (not the column's) when closed", async () => {
-      monitorWide.value = true;
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       // Navigate the primary onto a monitor tab (Logs) first, then open the
       // column — which moves the monitor group out of the header, so the primary
@@ -1951,25 +1929,9 @@ describe("InspectorView", () => {
       ).toBeInTheDocument();
     });
 
-    it("persists the pin preference and reopens the column when wide", () => {
-      // Stored preference from a prior wide session.
+    it("reopens the column from the stored pin preference", () => {
+      // A stored preference from a prior session reopens the column on load.
       window.localStorage.setItem("inspector.monitor.pinned", "true");
-
-      // Narrow: the column stays closed and the group is in the header.
-      monitorWide.value = false;
-      const { unmount } = renderWithMantine(
-        <StatefulInspectorViewHost {...connectedHttp()} />,
-      );
-      expect(
-        screen.queryByRole("button", { name: "Close monitoring sidebar" }),
-      ).toBeNull();
-      expect(
-        within(screen.getByRole("banner")).getByRole("radio", { name: "Logs" }),
-      ).toBeInTheDocument();
-      unmount();
-
-      // Wide: the preserved preference reopens the column without re-pinning.
-      monitorWide.value = true;
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       expect(
         screen.getByRole("button", { name: "Close monitoring sidebar" }),
@@ -1978,7 +1940,6 @@ describe("InspectorView", () => {
 
     it("keeps the column closed when the stored preference is explicitly false", () => {
       window.localStorage.setItem("inspector.monitor.pinned", "false");
-      monitorWide.value = true;
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       expect(
         screen.queryByRole("button", { name: "Close monitoring sidebar" }),
@@ -1987,7 +1948,6 @@ describe("InspectorView", () => {
 
     it("hides the column on disconnect but keeps the pin preference", async () => {
       window.localStorage.setItem("inspector.monitor.pinned", "true");
-      monitorWide.value = true;
       const { rerender } = renderWithMantine(
         <StatefulInspectorViewHost {...connectedHttp()} />,
       );
@@ -2018,7 +1978,6 @@ describe("InspectorView", () => {
 
     it("drops Network from the column tabs for a stdio server", () => {
       window.localStorage.setItem("inspector.monitor.pinned", "true");
-      monitorWide.value = true;
       renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -2041,7 +2000,6 @@ describe("InspectorView", () => {
       // Stored tab is Network, but a stdio + logging-only server can't offer it.
       window.localStorage.setItem("inspector.monitor.pinned", "true");
       window.localStorage.setItem("inspector.monitor.tab", "Network");
-      monitorWide.value = true;
       renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -2061,7 +2019,6 @@ describe("InspectorView", () => {
       // stdio + logging only ⇒ availableTabs = [Servers, Logs, Protocol]; pinning
       // moves both monitor tabs out, leaving [Servers] as the only header tab.
       window.localStorage.setItem("inspector.monitor.pinned", "true");
-      monitorWide.value = true;
       renderWithMantine(
         <StatefulInspectorViewHost
           {...makeProps({
@@ -2085,7 +2042,6 @@ describe("InspectorView", () => {
 
     it("persists the selected column tab", async () => {
       window.localStorage.setItem("inspector.monitor.pinned", "true");
-      monitorWide.value = true;
       const user = userEvent.setup();
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       await user.click(await screen.findByRole("radio", { name: "Protocol" }));
@@ -2098,7 +2054,6 @@ describe("InspectorView", () => {
 
     it("keeps the column search across tabs and filters each screen", async () => {
       window.localStorage.setItem("inspector.monitor.pinned", "true");
-      monitorWide.value = true;
       const user = userEvent.setup();
       renderWithMantine(
         <StatefulInspectorViewHost
@@ -2139,7 +2094,6 @@ describe("InspectorView", () => {
     it("resizes and persists the column width from the keyboard", async () => {
       window.localStorage.setItem("inspector.monitor.pinned", "true");
       window.localStorage.setItem("inspector.monitor.width", "420");
-      monitorWide.value = true;
       renderWithMantine(<StatefulInspectorViewHost {...connectedHttp()} />);
       const handle = await screen.findByRole("separator", {
         name: "Resize monitoring sidebar",
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 0e397a268..3a36b519d 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -15,7 +15,7 @@ import {
   Transition,
   type MantineTransition,
 } from "@mantine/core";
-import { useLocalStorage, useMediaQuery } from "@mantine/hooks";
+import { useLocalStorage } from "@mantine/hooks";
 import type {
   InitializeResult,
   LoggingLevel,
@@ -37,6 +37,8 @@ import type {
 import { isTerminalStatus } from "@inspector/core/mcp/types.js";
 import { isAppTool } from "@inspector/core/mcp/apps.js";
 import { ViewHeader } from "../../groups/ViewHeader/ViewHeader";
+import { VersionBadge } from "../../elements/VersionBadge/VersionBadge";
+import { CopyrightBadge } from "../../elements/CopyrightBadge/CopyrightBadge";
 import { ServerListScreen } from "../../screens/ServerListScreen/ServerListScreen";
 import {
   ToolsScreen,
@@ -196,11 +198,6 @@ function isMonitorTab(tab: string): tab is MonitorTab {
   );
 }
 
-// The viewport width below which the split collapses to a single column: matches
-// the point where ServerListScreen drops to one card, so the primary area always
-// has room for at least one full-width card beside the column.
-const MONITOR_WIDE_QUERY = "(min-width: 1040px)";
-
 // Monitoring sidebar width bounds (px). MIN keeps the stream readable; MAX stops
 // the column from crowding out the primary area.
 const MONITOR_WIDTH_MIN = 320;
@@ -273,6 +270,22 @@ const SplitRow = Flex.withProps({
   w: "100%",
 });
 
+// Footer row (#1682): a full-width AppShell.Footer band, styled like the header
+// (Mantine gives AppShell.Footer the same `--mantine-color-body` background and
+// a matching top border by default). Because it's a real AppShell region it
+// reserves its own height (`--app-shell-footer-height`), so the primary screen
+// and the monitoring sidebar both stop above it instead of the old fixed badges
+// overlapping the sidebar. `32` keeps it the same height as the previous badge
+// band (`spacing.xl`). The version sits at the left, the copyright at the right.
+const FOOTER_HEIGHT = 32;
+const FooterRow = Group.withProps({
+  h: "100%",
+  px: "xl",
+  justify: "space-between",
+  align: "center",
+  wrap: "nowrap",
+});
+
 // The pinned monitoring sidebar. Fixed-basis (its width is driven live via the
 // `w` style prop at the call site); `miw: 0` so its inner ScrollArea can bound.
 const MonitoringColumn = Stack.withProps({
@@ -344,6 +357,18 @@ export interface InspectorViewProps {
    * parent clears on the failure's `disconnect` event.
    */
   erroredServerId?: string;
+  /**
+   * Id of the server that just connected successfully (#1682). Its card draws
+   * the green highlight border and scrolls into view once the monitoring
+   * sidebar has opened — the success mirror of `erroredServerId`.
+   */
+  connectedServerId?: string;
+  /**
+   * The Inspector build version (root `package.json`), shown at the left of the
+   * footer row (#1682). Absent on a legacy backend that omits it — the version
+   * label then renders nothing.
+   */
+  version?: string;
   connectionStatus: ConnectionStatus;
   /**
    * Last connection-level error message (handshake failure, OAuth start
@@ -531,6 +556,8 @@ export function InspectorView({
   serverListWritable = true,
   activeServer,
   erroredServerId,
+  connectedServerId,
+  version,
   connectionStatus,
   connectErrorMessage,
   initializeResult,
@@ -687,13 +714,6 @@ export function InspectorView({
   const [dragWidth, setDragWidth] = useState<number | null>(null);
   const columnWidth = dragWidth ?? monitorWidth;
 
-  // The split only exists with enough horizontal room. `true` initial value so
-  // the first synchronous paint assumes wide (the common desktop case) rather
-  // than flashing the collapsed layout.
-  const isWide = useMediaQuery(MONITOR_WIDE_QUERY, true, {
-    getInitialValueInEffect: false,
-  });
-
   // Open the monitoring sidebar when a connection is established (#1616) OR when a
   // connect *attempt* fails (#1621). Gated on the *transition into* the target
   // status (via the ref) rather than the status itself, so it fires once on an
@@ -838,13 +858,13 @@ export function InspectorView({
     }
     return [];
   }, [connected, failed, availableTabs, stderrLogs, network, protocol]);
-  // The column can exist when: the viewport is wide enough, the session is
-  // connected OR a connect attempt failed, and at least one monitor tab is
-  // actually available. This is the same rule the server list used to gate its
-  // open-sidebar button on, and it now also gates the header MonitoringToggle
-  // (#1661) — the toggle is hidden entirely when the column can't exist.
+  // The column can exist when the session is connected OR a connect attempt
+  // failed, and at least one monitor tab is actually available. (The app floors
+  // at a 1280px min-width, so there's always room for the split — no viewport
+  // gate.) This also gates the header MonitoringToggle (#1661) — the toggle is
+  // hidden entirely when the column can't exist.
   const monitorColumnAvailable =
-    !!isWide && (connected || failed) && monitorAvailable.length > 0;
+    (connected || failed) && monitorAvailable.length > 0;
   const effectivePinned = monitorPinned && monitorColumnAvailable;
 
   // The header loses the monitor group while the column is open (its screens
@@ -1132,7 +1152,11 @@ export function InspectorView({
     // past the viewport and made the whole InspectorView scroll — the theme's
     // Main-slot height clamp + overflow:hidden keep that scroll on the inner
     // ScrollArea regions only.
-    <AppShell header={{ height: 60 }} padding={0}>
+    <AppShell
+      header={{ height: 60 }}
+      footer={{ height: FOOTER_HEIGHT }}
+      padding={0}
+    >
       <AppShell.Header
         data-testid="connection-status"
         data-status={connectionStatus}
@@ -1171,6 +1195,7 @@ export function InspectorView({
                 writable={serverListWritable}
                 activeServer={dimCardsAgainst}
                 erroredServerId={erroredServerId}
+                connectedServerId={connectedServerId}
                 onAddManually={onServerAdd}
                 onImportConfig={onServerImportConfig}
                 onImportServerJson={onServerImportJson}
@@ -1305,6 +1330,12 @@ export function InspectorView({
           </Transition>
         </SplitRow>
       </AppShell.Main>
+      <AppShell.Footer>
+        <FooterRow>
+          <VersionBadge version={version} />
+          <CopyrightBadge />
+        </FooterRow>
+      </AppShell.Footer>
     </AppShell>
   );
 }
diff --git a/clients/web/src/components/views/InspectorView/monitorColumnAnimation.ts b/clients/web/src/components/views/InspectorView/monitorColumnAnimation.ts
index 619558b28..db84e021e 100644
--- a/clients/web/src/components/views/InspectorView/monitorColumnAnimation.ts
+++ b/clients/web/src/components/views/InspectorView/monitorColumnAnimation.ts
@@ -2,14 +2,15 @@
  * Duration (ms) of the monitoring sidebar's open/close slide (#1616). Shared so
  * dependent timings can't silently drift from the animation:
  *   - `InspectorView` drives the column's Mantine `Transition` with it.
- *   - `ServerCard` waits just past it before scrolling a newly-failed card into
- *     view (#1621), so the column's open + the resulting grid reflow settle
- *     before `scrollIntoView` measures the card's position.
+ *   - `ServerCard` waits just past it before scrolling a newly-failed (#1621) or
+ *     newly-connected (#1682) card into view, so the column's open + the
+ *     resulting grid reflow settle before `scrollIntoView` measures the card.
  */
 export const MONITOR_COLUMN_ANIM_MS = 300;
 
 /**
- * Delay (ms) before scrolling a newly-failed server card into view — the column
- * animation plus a small buffer for the reflow to commit.
+ * Delay (ms) before scrolling a just-failed or just-connected server card into
+ * view — the column animation plus a small buffer for the reflow to commit.
+ * The sidebar auto-opens on both transitions, so both scrolls wait for it.
  */
-export const FAILED_CARD_SCROLL_DELAY_MS = MONITOR_COLUMN_ANIM_MS + 20;
+export const CARD_SCROLL_DELAY_MS = MONITOR_COLUMN_ANIM_MS + 20;
diff --git a/clients/web/src/theme/Text.ts b/clients/web/src/theme/Text.ts
index 0a84285bd..8ee4f53d2 100644
--- a/clients/web/src/theme/Text.ts
+++ b/clients/web/src/theme/Text.ts
@@ -37,33 +37,20 @@ export const ThemeText = Text.extend({
         },
       };
     }
-    // Two small, unobtrusive labels pinned to the bottom corners of the screen
-    // on the same row (#1639): the build version (bottom-left) and the
-    // copyright notice (bottom-right). Each occupies the full-height `xl` bottom
-    // margin band (`height: xl` + flex centering) so the text sits vertically
-    // centered in it, and insets by `xl` horizontally to line up with the
-    // content's left/right margins. Both are grey, non-interactive (clicks pass
-    // through), and out of the tab/selection flow.
+    // Two small, unobtrusive labels that sit in the footer row (#1682): the
+    // build version (left) and the copyright notice (right), positioned by the
+    // footer's `space-between` Group. Both are grey, single-line, and out of the
+    // text-selection flow. (Superseded the fixed bottom-corner badges of #1639
+    // now that the footer is a real, full-width AppShell row.)
     if (
       props.variant === "versionBadge" ||
       props.variant === "copyrightBadge"
     ) {
-      const horizontal =
-        props.variant === "versionBadge"
-          ? { left: "var(--mantine-spacing-xl)" }
-          : { right: "var(--mantine-spacing-xl)" };
       return {
         root: {
-          position: "fixed",
-          bottom: 0,
-          height: "var(--mantine-spacing-xl)",
-          display: "flex",
-          alignItems: "center",
-          ...horizontal,
-          zIndex: 100,
           color: "var(--inspector-text-secondary)",
           fontSize: "var(--mantine-font-size-xs)",
-          pointerEvents: "none",
+          whiteSpace: "nowrap",
           userSelect: "none",
         },
       };