diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index a1a313e7..7d64073c 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -1,41 +1,59 @@
 import {
-  Title,
-  Text,
-  Container,
-  Stack,
-  useMantineColorScheme,
-  useComputedColorScheme,
   ActionIcon,
+  Container,
   Group,
+  Stack,
+  Text,
+  Title,
+  useComputedColorScheme,
+  useMantineColorScheme,
 } from "@mantine/core";
+import { MdDarkMode, MdLightMode } from "react-icons/md";
+
+const PageContainer = Container.withProps({
+  size: "sm",
+  py: "xl",
+});
+
+const PageStack = Stack.withProps({
+  align: "center",
+  gap: "md",
+});
+
+const ThemeToggle = ActionIcon.withProps({
+  variant: "default",
+  size: "lg",
+  "aria-label": "Toggle color scheme",
+});
+
+const SubtitleText = Text.withProps({
+  c: "var(--inspector-text-secondary)",
+});
 
 function App() {
   const { setColorScheme } = useMantineColorScheme();
   const computedColorScheme = useComputedColorScheme("light");
+  const isDark = computedColorScheme === "dark";
+  const ThemeIcon = isDark ? MdLightMode : MdDarkMode;
 
-  const toggleColorScheme = () => {
-    setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
-  };
+  function toggleColorScheme() {
+    setColorScheme(isDark ? "light" : "dark");
+  }
 
   return (
-    <Container size="sm" py="xl">
-      <Stack align="center" gap="md">
+    <PageContainer>
+      <PageStack>
         <Group>
           <Title order={1}>MCP Inspector</Title>
-          <ActionIcon
-            onClick={toggleColorScheme}
-            variant="default"
-            size="lg"
-            aria-label="Toggle color scheme"
-          >
-            {computedColorScheme === "dark" ? "\u2600" : "\u263E"}
-          </ActionIcon>
+          <ThemeToggle onClick={toggleColorScheme}>
+            <ThemeIcon size={20} />
+          </ThemeToggle>
         </Group>
-        <Text c="var(--inspector-text-secondary)">
+        <SubtitleText>
           Web client for the Model Context Protocol Inspector
-        </Text>
-      </Stack>
-    </Container>
+        </SubtitleText>
+      </PageStack>
+    </PageContainer>
   );
 }
 
diff --git a/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx b/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx
index faa765db..2ed0b159 100644
--- a/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx
+++ b/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx
@@ -6,8 +6,7 @@ const meta: Meta<typeof ConnectionToggle> = {
   title: "Elements/ConnectionToggle",
   component: ConnectionToggle,
   args: {
-    onConnect: fn(),
-    onDisconnect: fn(),
+    onToggle: fn(),
   },
 };
 
diff --git a/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx b/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx
index 5dcb6265..9ab70e2b 100644
--- a/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx
+++ b/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx
@@ -4,15 +4,13 @@ import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 export interface ConnectionToggleProps {
   status: ConnectionStatus;
   disabled?: boolean;
-  onConnect: () => void;
-  onDisconnect: () => void;
+  onToggle: () => void;
 }
 
 export function ConnectionToggle({
   status,
   disabled = false,
-  onConnect,
-  onDisconnect,
+  onToggle,
 }: ConnectionToggleProps) {
   const isConnected = status === "connected";
   const isConnecting = status === "connecting";
@@ -22,13 +20,7 @@ export function ConnectionToggle({
       size="lg"
       checked={isConnected || isConnecting}
       disabled={disabled || isConnecting}
-      onChange={(event) => {
-        if (event.currentTarget.checked) {
-          onConnect();
-        } else {
-          onDisconnect();
-        }
-      }}
+      onChange={onToggle}
     />
   );
 }
diff --git a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
index 58f65cfc..fc4858e2 100644
--- a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
+++ b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
@@ -1,10 +1,15 @@
 import { Group, Paper, Text } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
 import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 
 export interface ServerStatusIndicatorProps {
   status: ConnectionStatus;
   latencyMs?: number;
   retryCount?: number;
+  // 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.
+  showLabel?: boolean;
 }
 
 const statusColorVar: Record<ConnectionStatus, string> = {
@@ -41,14 +46,19 @@ export function ServerStatusIndicator({
   status,
   latencyMs,
   retryCount,
+  showLabel: showLabelProp,
 }: ServerStatusIndicatorProps) {
+  const wideViewport = useMediaQuery("(min-width: 1200px)");
+  const showLabel = showLabelProp ?? wideViewport;
+  const label = getLabel(status, latencyMs, retryCount);
   return (
     <Group gap="xs">
       <Dot
         bg={statusColorVar[status]}
         className={status === "connecting" ? "inspector-pulse" : undefined}
+        title={showLabel ? undefined : label}
       />
-      <Text size="sm">{getLabel(status, latencyMs, retryCount)}</Text>
+      {showLabel && <Text size="sm">{label}</Text>}
     </Group>
   );
 }
diff --git a/clients/web/src/components/elements/TransportBadge/TransportBadge.tsx b/clients/web/src/components/elements/TransportBadge/TransportBadge.tsx
index 129d88e1..2a553967 100644
--- a/clients/web/src/components/elements/TransportBadge/TransportBadge.tsx
+++ b/clients/web/src/components/elements/TransportBadge/TransportBadge.tsx
@@ -7,7 +7,7 @@ export interface TransportBadgeProps {
 
 const transportLabel: Record<ServerType, string> = {
   stdio: "STDIO",
-  sse: "SSE",
+  sse: "HTTP",
   "streamable-http": "HTTP",
 };
 
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
index 63acd629..1b84e316 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
@@ -1,7 +1,13 @@
+import type { InspectorServerJsonDraft } from "@inspector/core/mcp/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { ImportServerJsonPanel } from "./ImportServerJsonPanel";
 
+const emptyDraft: InspectorServerJsonDraft = {
+  rawText: "",
+  envOverrides: {},
+};
+
 const meta: Meta<typeof ImportServerJsonPanel> = {
   title: "Groups/ImportServerJsonPanel",
   component: ImportServerJsonPanel,
@@ -13,10 +19,8 @@ const meta: Meta<typeof ImportServerJsonPanel> = {
     onServerNameChange: fn(),
     onAddServer: fn(),
     onCancel: fn(),
-    selectedPackageIndex: 0,
     envVars: [],
-    serverName: "",
-    validationResults: [],
+    validation: [],
   },
 };
 
@@ -25,28 +29,31 @@ type Story = StoryObj<typeof ImportServerJsonPanel>;
 
 export const Empty: Story = {
   args: {
-    jsonContent: "",
+    draft: emptyDraft,
   },
 };
 
 export const ValidJson: Story = {
   args: {
-    jsonContent: JSON.stringify(
-      {
-        name: "my-mcp-server",
-        version: "1.0.0",
-        packages: [
-          {
-            registryType: "npm",
-            identifier: "my-mcp-server",
-            runtimeHint: "node",
-          },
-        ],
-      },
-      null,
-      2,
-    ),
-    validationResults: [
+    draft: {
+      rawText: JSON.stringify(
+        {
+          name: "my-mcp-server",
+          version: "1.0.0",
+          packages: [
+            {
+              registryType: "npm",
+              identifier: "my-mcp-server",
+              runtimeHint: "node",
+            },
+          ],
+        },
+        null,
+        2,
+      ),
+      envOverrides: {},
+    },
+    validation: [
       { type: "success", message: "Valid server.json format detected" },
       { type: "success", message: "Package configuration is valid" },
       { type: "info", message: "1 package found" },
@@ -56,31 +63,38 @@ export const ValidJson: Story = {
 
 export const MultiplePackages: Story = {
   args: {
-    jsonContent: JSON.stringify(
-      {
-        name: "multi-server",
-        packages: [
-          {
-            registryType: "npm",
-            identifier: "@scope/server",
-            runtimeHint: "node",
-          },
-          {
-            registryType: "pip",
-            identifier: "server-python",
-            runtimeHint: "python3",
-          },
-        ],
-      },
-      null,
-      2,
-    ),
-    validationResults: [
+    draft: {
+      rawText: JSON.stringify(
+        {
+          name: "multi-server",
+          packages: [
+            {
+              registryType: "npm",
+              identifier: "@scope/server",
+              runtimeHint: "node",
+            },
+            {
+              registryType: "pip",
+              identifier: "server-python",
+              runtimeHint: "python3",
+            },
+          ],
+        },
+        null,
+        2,
+      ),
+      envOverrides: {},
+    },
+    validation: [
       { type: "success", message: "Valid server.json format detected" },
       { type: "info", message: "2 packages found - select one to install" },
     ],
     packages: [
-      { registryType: "npm", identifier: "@scope/server", runtimeHint: "node" },
+      {
+        registryType: "npm",
+        identifier: "@scope/server",
+        runtimeHint: "node",
+      },
       {
         registryType: "pip",
         identifier: "server-python",
@@ -92,25 +106,28 @@ export const MultiplePackages: Story = {
 
 export const WithEnvVars: Story = {
   args: {
-    jsonContent: JSON.stringify(
-      {
-        name: "api-server",
-        packages: [
-          {
-            registryType: "npm",
-            identifier: "api-server",
-            runtimeHint: "node",
-          },
-        ],
-        envVars: [
-          { name: "API_KEY", required: true },
-          { name: "API_URL", required: false },
-        ],
-      },
-      null,
-      2,
-    ),
-    validationResults: [
+    draft: {
+      rawText: JSON.stringify(
+        {
+          name: "api-server",
+          packages: [
+            {
+              registryType: "npm",
+              identifier: "api-server",
+              runtimeHint: "node",
+            },
+          ],
+          envVars: [
+            { name: "API_KEY", required: true },
+            { name: "API_URL", required: false },
+          ],
+        },
+        null,
+        2,
+      ),
+      envOverrides: {},
+    },
+    validation: [
       { type: "success", message: "Valid server.json format detected" },
       {
         type: "warning",
@@ -136,31 +153,36 @@ export const WithEnvVars: Story = {
 
 export const FullyConfigured: Story = {
   args: {
-    jsonContent: JSON.stringify(
-      {
-        name: "full-server",
-        version: "2.1.0",
-        packages: [
-          {
-            registryType: "npm",
-            identifier: "@org/full-server",
-            runtimeHint: "node",
-          },
-          {
-            registryType: "docker",
-            identifier: "org/full-server:latest",
-            runtimeHint: "docker",
-          },
-        ],
-        envVars: [
-          { name: "TOKEN", required: true },
-          { name: "DEBUG", required: false },
-        ],
-      },
-      null,
-      2,
-    ),
-    validationResults: [
+    draft: {
+      rawText: JSON.stringify(
+        {
+          name: "full-server",
+          version: "2.1.0",
+          packages: [
+            {
+              registryType: "npm",
+              identifier: "@org/full-server",
+              runtimeHint: "node",
+            },
+            {
+              registryType: "docker",
+              identifier: "org/full-server:latest",
+              runtimeHint: "docker",
+            },
+          ],
+          envVars: [
+            { name: "TOKEN", required: true },
+            { name: "DEBUG", required: false },
+          ],
+        },
+        null,
+        2,
+      ),
+      selectedPackageIndex: 1,
+      envOverrides: { TOKEN: "sk-abc123", DEBUG: "true" },
+      nameOverride: "My Custom Server",
+    },
+    validation: [
       { type: "success", message: "Valid server.json format detected" },
       { type: "success", message: "All required fields present" },
       { type: "info", message: "2 packages found" },
@@ -181,7 +203,6 @@ export const FullyConfigured: Story = {
         runtimeHint: "docker",
       },
     ],
-    selectedPackageIndex: 1,
     envVars: [
       {
         name: "TOKEN",
@@ -196,6 +217,5 @@ export const FullyConfigured: Story = {
         value: "true",
       },
     ],
-    serverName: "My Custom Server",
   },
 };
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index da19f528..68dd8e1e 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -9,6 +9,7 @@ import {
   Textarea,
   Title,
 } from "@mantine/core";
+import type { InspectorServerJsonDraft } from "@inspector/core/mcp/types.js";
 
 export interface ValidationResult {
   type: "success" | "warning" | "info" | "error";
@@ -29,12 +30,10 @@ export interface EnvVarInfo {
 }
 
 export interface ImportServerJsonPanelProps {
-  jsonContent: string;
-  validationResults: ValidationResult[];
+  draft: InspectorServerJsonDraft;
+  validation: ValidationResult[];
   packages?: PackageInfo[];
-  selectedPackageIndex: number;
   envVars: EnvVarInfo[];
-  serverName: string;
   onJsonChange: (content: string) => void;
   onValidate: () => void;
   onSelectPackage: (index: number) => void;
@@ -64,12 +63,10 @@ function formatPackageLabel(pkg: PackageInfo): string {
 }
 
 export function ImportServerJsonPanel({
-  jsonContent,
-  validationResults,
+  draft,
+  validation,
   packages,
-  selectedPackageIndex,
   envVars,
-  serverName,
   onJsonChange,
   onValidate,
   onSelectPackage,
@@ -85,7 +82,7 @@ export function ImportServerJsonPanel({
       <HintText>Paste server.json content or drag and drop a file:</HintText>
 
       <Textarea
-        value={jsonContent}
+        value={draft.rawText}
         onChange={(e) => onJsonChange(e.currentTarget.value)}
         ff="monospace"
         autosize
@@ -97,7 +94,7 @@ export function ImportServerJsonPanel({
 
       <Title order={5}>Validation Results:</Title>
 
-      {validationResults.map((result, index) => {
+      {validation.map((result, index) => {
         const { icon, color } = validationIcons[result.type];
         return (
           <Group key={index} gap="xs">
@@ -112,7 +109,7 @@ export function ImportServerJsonPanel({
           <Divider />
           <Title order={5}>Package Selection:</Title>
           <Radio.Group
-            value={String(selectedPackageIndex)}
+            value={String(draft.selectedPackageIndex ?? 0)}
             onChange={(value) => onSelectPackage(Number(value))}
           >
             <Stack gap="xs">
@@ -151,7 +148,7 @@ export function ImportServerJsonPanel({
 
       <TextInput
         label="Server Name (optional override)"
-        value={serverName}
+        value={draft.nameOverride ?? ""}
         onChange={(e) => onServerNameChange(e.currentTarget.value)}
       />
 
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
index 678bb6e5..64ff1273 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
@@ -1,22 +1,43 @@
+import type {
+  ConnectionState,
+  MCPServerConfig,
+} from "@inspector/core/mcp/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { ServerCard } from "./ServerCard";
 
+const stdioConfig: MCPServerConfig = {
+  command: "npx -y @modelcontextprotocol/server-everything",
+};
+
+const httpConfig: MCPServerConfig = {
+  type: "streamable-http",
+  url: "https://api.example.com/mcp",
+};
+
+const connected: ConnectionState = { status: "connected" };
+const disconnected: ConnectionState = { status: "disconnected" };
+const connecting: ConnectionState = { status: "connecting" };
+const failed: ConnectionState = {
+  status: "error",
+  retryCount: 3,
+  error: {
+    message: "Connection refused",
+    details:
+      "ECONNREFUSED 127.0.0.1:3000 - The server process exited unexpectedly.",
+  },
+};
+
 const meta: Meta<typeof ServerCard> = {
   title: "Groups/ServerCard",
   component: ServerCard,
   args: {
     onToggleConnection: fn(),
-    onSetActiveServer: fn(),
     onServerInfo: fn(),
     onSettings: fn(),
     onEdit: fn(),
     onClone: fn(),
     onRemove: fn(),
-    onTestSampling: fn(),
-    onTestElicitationForm: fn(),
-    onTestElicitationUrl: fn(),
-    onConfigureRoots: fn(),
   },
 };
 
@@ -25,117 +46,88 @@ type Story = StoryObj<typeof ServerCard>;
 
 export const Connected: Story = {
   args: {
+    id: "7f3b2a8e-1c4d-4e5f-9a0b-3c2d1e4f5a6b",
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
-    connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "connected",
-    canTestClientFeatures: false,
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: connected,
   },
 };
 
 export const Disconnected: Story = {
   args: {
+    id: "7f3b2a8e-1c4d-4e5f-9a0b-3c2d1e4f5a6b",
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
-    connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "disconnected",
-    canTestClientFeatures: false,
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: disconnected,
   },
 };
 
 export const Connecting: Story = {
   args: {
+    id: "7f3b2a8e-1c4d-4e5f-9a0b-3c2d1e4f5a6b",
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
-    connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "connecting",
-    canTestClientFeatures: false,
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: connecting,
   },
 };
 
 export const Failed: Story = {
   args: {
+    id: "7f3b2a8e-1c4d-4e5f-9a0b-3c2d1e4f5a6b",
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
-    connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "error",
-    retryCount: 3,
-    error: {
-      message: "Connection refused",
-      details:
-        "ECONNREFUSED 127.0.0.1:3000 - The server process exited unexpectedly.",
-    },
-    canTestClientFeatures: false,
-  },
-};
-
-export const WithClientFeatures: Story = {
-  args: {
-    name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
-    connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "connected",
-    canTestClientFeatures: true,
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: failed,
   },
 };
 
 export const LongServerName: Story = {
   args: {
+    id: "a1b2c3d4-e5f6-4789-9abc-def012345678",
     name: "my-organization-super-long-experimental-mcp-server-with-many-features-v2",
-    version: "1.0.0-beta.42",
-    transport: "stdio",
-    connectionMode: "Subprocess",
-    command:
-      "npx -y @my-organization/super-long-experimental-mcp-server-with-many-features-v2",
-    status: "connected",
-    canTestClientFeatures: true,
+    config: {
+      command:
+        "npx -y @my-organization/super-long-experimental-mcp-server-with-many-features-v2",
+    },
+    info: {
+      name: "my-organization-super-long-experimental-mcp-server-with-many-features-v2",
+      version: "1.0.0-beta.42",
+    },
+    connection: connected,
   },
 };
 
 export const HttpDirect: Story = {
   args: {
+    id: "9e8d7c6b-5a4f-4321-bdc6-fedcba098765",
     name: "Remote API Server",
-    version: "2.0.0",
-    transport: "streamable-http",
-    connectionMode: "Direct",
-    command: "https://api.example.com/mcp",
-    status: "connected",
-    canTestClientFeatures: false,
+    config: httpConfig,
+    info: { name: "Remote API Server", version: "2.0.0" },
+    connection: connected,
   },
 };
 
 export const CompactConnected: Story = {
   args: {
+    id: "7f3b2a8e-1c4d-4e5f-9a0b-3c2d1e4f5a6b",
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
-    connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "connected",
-    canTestClientFeatures: false,
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: connected,
     compact: true,
   },
 };
 
 export const CompactDisconnected: Story = {
   args: {
+    id: "7f3b2a8e-1c4d-4e5f-9a0b-3c2d1e4f5a6b",
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
-    connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "disconnected",
-    canTestClientFeatures: false,
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: disconnected,
     compact: true,
   },
 };
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index 20db7895..14804548 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@@ -1,7 +1,8 @@
-import { useEffect } from "react";
-import { Badge, Button, Card, Group, Menu, Stack, Text } from "@mantine/core";
+import { Badge, Button, Card, Group, Stack, Text } from "@mantine/core";
+import type { Implementation } from "@modelcontextprotocol/sdk/types.js";
 import type {
-  ConnectionStatus,
+  ConnectionState,
+  MCPServerConfig,
   ServerType,
 } from "@inspector/core/mcp/types.js";
 import { ServerStatusIndicator } from "../../elements/ServerStatusIndicator/ServerStatusIndicator";
@@ -11,36 +12,33 @@ import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
 import { InlineError } from "../../elements/InlineError/InlineError";
 
 export interface ServerCardProps {
+  /** Stable unique identifier — the MCPConfig.mcpServers map key. */
+  id: string;
+  /** Display label shown in the card header. May or may not equal id. */
   name: string;
-  version?: string;
-  transport: ServerType;
-  connectionMode: string;
-  command: string;
-  status: ConnectionStatus;
-  retryCount?: number;
-  error?: { message: string; details?: string };
-  canTestClientFeatures: boolean;
+  config: MCPServerConfig;
+  info?: Implementation;
+  connection: ConnectionState;
   activeServer?: string;
-  onSetActiveServer?: (name: string | undefined) => void;
-  onToggleConnection: (connect: boolean) => void;
-  onServerInfo: () => void;
-  onSettings: () => void;
-  onEdit: () => void;
-  onClone: () => void;
-  onRemove: () => void;
-  onTestSampling?: () => void;
-  onTestElicitationForm?: () => void;
-  onTestElicitationUrl?: () => void;
-  onConfigureRoots?: () => void;
+  onToggleConnection: (id: string) => void;
+  onServerInfo: (id: string) => void;
+  onSettings: (id: string) => void;
+  onEdit: (id: string) => void;
+  onClone: (id: string) => void;
+  onRemove: (id: string) => void;
   compact?: boolean;
 }
 
 const HeaderLeft = Group.withProps({
   gap: "sm",
+  wrap: "nowrap",
+  miw: 0,
+  flex: 1,
 });
 
 const HeaderRight = Group.withProps({
   gap: "sm",
+  wrap: "nowrap",
 });
 
 const ActionsRow = Group.withProps({
@@ -50,6 +48,9 @@ const ActionsRow = Group.withProps({
 const ServerName = Text.withProps({
   fw: 600,
   size: "lg",
+  truncate: "end",
+  miw: 0,
+  flex: 1,
 });
 
 const ModeText = Text.withProps({
@@ -68,48 +69,42 @@ const RemoveButton = Button.withProps({
   color: "red.6",
 });
 
+function getTransport(config: MCPServerConfig): ServerType {
+  return config.type ?? "stdio";
+}
+
+const TRANSPORT_DESCRIPTION: Record<ServerType, string> = {
+  stdio: "Standard I/O",
+  sse: "SSE (Server Sent Events) [deprecated]",
+  "streamable-http": "Streamable HTTP",
+};
+
+function getCommandOrUrl(config: MCPServerConfig): string {
+  if (config.type === "sse" || config.type === "streamable-http") {
+    return config.url;
+  }
+  return config.command;
+}
+
 export function ServerCard({
+  id,
   name,
-  version,
-  transport,
-  connectionMode,
-  command,
-  status,
-  retryCount,
-  error,
-  canTestClientFeatures,
+  config,
+  info,
+  connection,
   activeServer,
-  onSetActiveServer,
   onToggleConnection,
   onServerInfo,
   onSettings,
   onEdit,
   onClone,
   onRemove,
-  onTestSampling,
-  onTestElicitationForm,
-  onTestElicitationUrl,
-  onConfigureRoots,
   compact = false,
 }: ServerCardProps) {
-  const isThisConnecting = activeServer === name;
-  const isDimmed = activeServer !== undefined && activeServer !== name;
-  const displayStatus = isThisConnecting ? "connecting" : status;
-
-  useEffect(() => {
-    if (isThisConnecting) {
-      onToggleConnection(true);
-    }
-  }, [isThisConnecting, onToggleConnection]);
-
-  function handleToggle(connect: boolean) {
-    if (connect && !activeServer) {
-      onSetActiveServer?.(name);
-    } else if (!connect && activeServer && activeServer === name) {
-      onSetActiveServer?.(undefined);
-      onToggleConnection(false);
-    }
-  }
+  const isDimmed = activeServer !== undefined && activeServer !== id;
+  const transport = getTransport(config);
+  const commandOrUrl = getCommandOrUrl(config);
+  const version = info?.version;
 
   return (
     <Card
@@ -119,76 +114,59 @@ export function ServerCard({
       {...(isDimmed ? { "aria-disabled": true, inert: true } : {})}
     >
       <Stack gap="sm">
-        <Group justify="space-between" wrap="wrap">
+        <Group justify="space-between" wrap="nowrap">
           <HeaderLeft>
             <ServerName>{name}</ServerName>
-            {version && <Badge variant="outline">{version}</Badge>}
           </HeaderLeft>
           <HeaderRight>
             <ServerStatusIndicator
-              status={displayStatus}
-              retryCount={retryCount}
+              status={connection.status}
+              retryCount={connection.retryCount}
             />
             <ConnectionToggle
-              status={displayStatus}
+              status={connection.status}
               disabled={isDimmed}
-              onConnect={() => handleToggle(true)}
-              onDisconnect={() => handleToggle(false)}
+              onToggle={() => onToggleConnection(id)}
             />
           </HeaderRight>
         </Group>
 
         {!compact && (
           <>
-            <Group justify="space-between" mih={30}>
-              <Group gap="sm">
-                <TransportBadge transport={transport} />
-                <ModeText>{connectionMode}</ModeText>
-              </Group>
-              {canTestClientFeatures && (
-                <Menu>
-                  <Menu.Target>
-                    <SubtleButton>Test Client Features &#x25BE;</SubtleButton>
-                  </Menu.Target>
-                  <Menu.Dropdown>
-                    <Menu.Item onClick={onTestSampling}>
-                      Simulate Sampling Request
-                    </Menu.Item>
-                    <Menu.Item onClick={onTestElicitationForm}>
-                      Simulate Elicitation (Form)
-                    </Menu.Item>
-                    <Menu.Item onClick={onTestElicitationUrl}>
-                      Simulate Elicitation (URL)
-                    </Menu.Item>
-                    <Menu.Item onClick={onConfigureRoots}>
-                      Configure Roots
-                    </Menu.Item>
-                  </Menu.Dropdown>
-                </Menu>
-              )}
+            <Group gap="sm" mih={30}>
+              {version && <Badge variant="outline">{version}</Badge>}
+              <TransportBadge transport={transport} />
+              <ModeText>{TRANSPORT_DESCRIPTION[transport]}</ModeText>
             </Group>
 
-            <ContentViewer block={{ type: "text", text: command }} copyable />
+            <ContentViewer
+              block={{ type: "text", text: commandOrUrl }}
+              copyable
+            />
 
-            {error && (
+            {connection.error && (
               <InlineError
                 error={{
-                  message: error.message,
-                  data: error.details,
+                  message: connection.error.message,
+                  data: connection.error.details,
                 }}
-                retryCount={retryCount}
+                retryCount={connection.retryCount}
               />
             )}
 
             <Group justify="space-between">
               <ActionsRow>
-                <SubtleButton onClick={onClone}>Clone</SubtleButton>
-                <SubtleButton onClick={onEdit}>Edit</SubtleButton>
-                <RemoveButton onClick={onRemove}>Remove</RemoveButton>
+                <SubtleButton onClick={() => onClone(id)}>Clone</SubtleButton>
+                <SubtleButton onClick={() => onEdit(id)}>Edit</SubtleButton>
+                <RemoveButton onClick={() => onRemove(id)}>Remove</RemoveButton>
               </ActionsRow>
               <ActionsRow>
-                <SubtleButton onClick={onServerInfo}>Server Info</SubtleButton>
-                <SubtleButton onClick={onSettings}>Settings</SubtleButton>
+                <SubtleButton onClick={() => onServerInfo(id)}>
+                  Server Info
+                </SubtleButton>
+                <SubtleButton onClick={() => onSettings(id)}>
+                  Settings
+                </SubtleButton>
               </ActionsRow>
             </Group>
           </>
diff --git a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
index d5e07e8a..e6b7e65a 100644
--- a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
+++ b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
@@ -1,6 +1,31 @@
+import type {
+  ClientCapabilities,
+  InitializeResult,
+} from "@modelcontextprotocol/sdk/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ServerInfoContent } from "./ServerInfoContent";
 
+const fullResult: InitializeResult = {
+  protocolVersion: "2025-03-26",
+  serverInfo: { name: "Everything Server", version: "2.1.0" },
+  capabilities: {
+    tools: { listChanged: true },
+    resources: { subscribe: true, listChanged: true },
+    prompts: { listChanged: true },
+    logging: {},
+    completions: {},
+  },
+  instructions:
+    "This server provides access to the project management system. Use the list_projects tool first to discover available projects before querying tasks. Rate limiting applies: max 60 requests per minute.",
+};
+
+const fullClientCaps: ClientCapabilities = {
+  roots: { listChanged: true },
+  sampling: {},
+  elicitation: {},
+  experimental: {},
+};
+
 const meta: Meta<typeof ServerInfoContent> = {
   title: "Groups/ServerInfoContent",
   component: ServerInfoContent,
@@ -11,80 +36,54 @@ type Story = StoryObj<typeof ServerInfoContent>;
 
 export const FullCapabilities: Story = {
   args: {
-    name: "Everything Server",
-    version: "2.1.0",
-    protocolVersion: "2025-03-26",
+    initializeResult: fullResult,
+    clientCapabilities: fullClientCaps,
     transport: "stdio",
-    serverCapabilities: [
-      { capability: "tools", supported: true, count: 12 },
-      { capability: "resources", supported: true, count: 8 },
-      { capability: "prompts", supported: true, count: 5 },
-      { capability: "logging", supported: true },
-      { capability: "completions", supported: true },
-    ],
-    clientCapabilities: [
-      { capability: "roots", supported: true, count: 3 },
-      { capability: "sampling", supported: true },
-      { capability: "elicitation", supported: true },
-      { capability: "experimental", supported: true },
-    ],
   },
 };
 
 export const MinimalCapabilities: Story = {
   args: {
-    name: "Simple Server",
-    version: "1.0.0",
-    protocolVersion: "2025-03-26",
+    initializeResult: {
+      protocolVersion: "2025-03-26",
+      serverInfo: { name: "Simple Server", version: "1.0.0" },
+      capabilities: {
+        tools: { listChanged: false },
+      },
+    },
+    clientCapabilities: {
+      roots: { listChanged: true },
+    },
     transport: "streamable-http",
-    serverCapabilities: [
-      { capability: "tools", supported: true, count: 2 },
-      { capability: "resources", supported: false },
-      { capability: "prompts", supported: false },
-    ],
-    clientCapabilities: [
-      { capability: "roots", supported: true },
-      { capability: "sampling", supported: false },
-      { capability: "elicitation", supported: false },
-    ],
   },
 };
 
 export const WithInstructions: Story = {
   args: {
-    name: "Guided Server",
-    version: "1.5.0",
-    protocolVersion: "2025-03-26",
+    initializeResult: fullResult,
+    clientCapabilities: {
+      roots: { listChanged: true },
+      sampling: {},
+    },
     transport: "stdio",
-    serverCapabilities: [
-      { capability: "tools", supported: true, count: 4 },
-      { capability: "resources", supported: true, count: 2 },
-      { capability: "prompts", supported: true, count: 1 },
-    ],
-    clientCapabilities: [
-      { capability: "roots", supported: true },
-      { capability: "sampling", supported: true },
-    ],
-    instructions:
-      "This server provides access to the project management system. Use the list_projects tool first to discover available projects before querying tasks. Rate limiting applies: max 60 requests per minute.",
   },
 };
 
 export const WithOAuth: Story = {
   args: {
-    name: "Authenticated Server",
-    version: "3.0.0",
-    protocolVersion: "2025-03-26",
+    initializeResult: {
+      protocolVersion: "2025-03-26",
+      serverInfo: { name: "Authenticated Server", version: "3.0.0" },
+      capabilities: {
+        tools: { listChanged: true },
+        resources: { subscribe: true },
+      },
+    },
+    clientCapabilities: {
+      roots: { listChanged: true },
+    },
     transport: "streamable-http",
-    serverCapabilities: [
-      { capability: "tools", supported: true, count: 6 },
-      { capability: "resources", supported: true, count: 3 },
-    ],
-    clientCapabilities: [
-      { capability: "roots", supported: true },
-      { capability: "sampling", supported: false },
-    ],
-    oauthDetails: {
+    oauth: {
       authUrl: "https://auth.example.com/oauth2/authorize",
       scopes: ["read", "write", "admin"],
       accessToken: "eyJhbGciOiJSUzI1NiIs...truncated",
diff --git a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
index 0dce62d5..407e6a78 100644
--- a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
+++ b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
@@ -7,20 +7,27 @@ import {
   Text,
   Title,
 } from "@mantine/core";
+import type {
+  ClientCapabilities,
+  InitializeResult,
+} from "@modelcontextprotocol/sdk/types.js";
+import type { ServerType } from "@inspector/core/mcp/types.js";
 import {
   CapabilityItem,
-  type CapabilityItemProps,
+  type CapabilityKey,
 } from "../../elements/CapabilityItem/CapabilityItem";
 
+export interface OAuthDetails {
+  authUrl?: string;
+  scopes?: string[];
+  accessToken?: string;
+}
+
 export interface ServerInfoContentProps {
-  name: string;
-  version: string;
-  protocolVersion: string;
-  transport: string;
-  serverCapabilities: CapabilityItemProps[];
-  clientCapabilities: CapabilityItemProps[];
-  instructions?: string;
-  oauthDetails?: { authUrl?: string; scopes?: string[]; accessToken?: string };
+  initializeResult: InitializeResult;
+  clientCapabilities: ClientCapabilities;
+  transport: ServerType;
+  oauth?: OAuthDetails;
 }
 
 const ValueText = Text.withProps({
@@ -32,26 +39,58 @@ function formatScopes(scopes: string[]): string {
   return scopes.join(", ");
 }
 
+const SERVER_CAPABILITY_KEYS: CapabilityKey[] = [
+  "tools",
+  "resources",
+  "prompts",
+  "logging",
+  "completions",
+  "tasks",
+  "experimental",
+];
+
+const CLIENT_CAPABILITY_KEYS: CapabilityKey[] = [
+  "roots",
+  "sampling",
+  "elicitation",
+  "experimental",
+];
+
+function getCapabilityEntries(
+  capabilities: Record<string, unknown>,
+  knownKeys: CapabilityKey[],
+): { capability: CapabilityKey; supported: boolean }[] {
+  return knownKeys.map((key) => ({
+    capability: key,
+    supported: key in capabilities && capabilities[key] != null,
+  }));
+}
+
 export function ServerInfoContent({
-  name,
-  version,
-  protocolVersion,
-  transport,
-  serverCapabilities,
+  initializeResult,
   clientCapabilities,
-  instructions,
-  oauthDetails,
+  transport,
+  oauth,
 }: ServerInfoContentProps) {
+  const { serverInfo, protocolVersion, capabilities, instructions } =
+    initializeResult;
+
+  const serverCaps = getCapabilityEntries(capabilities, SERVER_CAPABILITY_KEYS);
+  const clientCaps = getCapabilityEntries(
+    clientCapabilities,
+    CLIENT_CAPABILITY_KEYS,
+  );
+
   return (
     <Stack gap="md">
       <Title order={3}>Server Information</Title>
 
       <SimpleGrid cols={2}>
         <Text size="sm">Name</Text>
-        <ValueText>{name}</ValueText>
+        <ValueText>{serverInfo.name}</ValueText>
 
         <Text size="sm">Version</Text>
-        <ValueText>{version}</ValueText>
+        <ValueText>{serverInfo.version ?? "—"}</ValueText>
 
         <Text size="sm">Protocol</Text>
         <ValueText>{protocolVersion}</ValueText>
@@ -63,23 +102,21 @@ export function ServerInfoContent({
       <SimpleGrid cols={2}>
         <Stack gap="xs">
           <Title order={5}>Server Capabilities</Title>
-          {serverCapabilities.map((cap) => (
+          {serverCaps.map((cap) => (
             <CapabilityItem
               key={cap.capability}
               capability={cap.capability}
               supported={cap.supported}
-              count={cap.count}
             />
           ))}
         </Stack>
         <Stack gap="xs">
           <Title order={5}>Client Capabilities</Title>
-          {clientCapabilities.map((cap) => (
+          {clientCaps.map((cap) => (
             <CapabilityItem
               key={cap.capability}
               capability={cap.capability}
               supported={cap.supported}
-              count={cap.count}
             />
           ))}
         </Stack>
@@ -92,26 +129,26 @@ export function ServerInfoContent({
         </Stack>
       )}
 
-      {oauthDetails && (
+      {oauth && (
         <Stack gap="xs">
           <Title order={5}>OAuth Details</Title>
           <Stack gap="xs">
-            {oauthDetails.authUrl && (
+            {oauth.authUrl && (
               <SimpleGrid cols={2}>
                 <Text size="sm">Auth URL</Text>
-                <Code>{oauthDetails.authUrl}</Code>
+                <Code>{oauth.authUrl}</Code>
               </SimpleGrid>
             )}
-            {oauthDetails.scopes && oauthDetails.scopes.length > 0 && (
+            {oauth.scopes && oauth.scopes.length > 0 && (
               <SimpleGrid cols={2}>
                 <Text size="sm">Scopes</Text>
-                <ValueText>{formatScopes(oauthDetails.scopes)}</ValueText>
+                <ValueText>{formatScopes(oauth.scopes)}</ValueText>
               </SimpleGrid>
             )}
-            {oauthDetails.accessToken && (
+            {oauth.accessToken && (
               <SimpleGrid cols={2}>
                 <Text size="sm">Access Token</Text>
-                <Code>{oauthDetails.accessToken}</Code>
+                <Code>{oauth.accessToken}</Code>
               </SimpleGrid>
             )}
           </Stack>
diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
index d3fdc636..3d82268d 100644
--- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
+++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
@@ -1,14 +1,115 @@
+import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
-import { ServerSettingsForm } from "./ServerSettingsForm";
+import { useArgs } from "storybook/preview-api";
+import {
+  ServerSettingsForm,
+  type ServerSettingsFormProps,
+} from "./ServerSettingsForm";
+
+const defaultSettings: InspectorServerSettings = {
+  headers: [],
+  metadata: [],
+  connectionTimeout: 30000,
+  requestTimeout: 60000,
+};
+
+function InteractiveRender(args: ServerSettingsFormProps) {
+  const [, updateArgs] = useArgs<ServerSettingsFormProps>();
+
+  return (
+    <ServerSettingsForm
+      {...args}
+      onExpandedSectionsChange={(sections) => {
+        args.onExpandedSectionsChange(sections);
+        updateArgs({ expandedSections: sections });
+      }}
+      onAddHeader={() => {
+        args.onAddHeader();
+        updateArgs({
+          settings: {
+            ...args.settings,
+            headers: [...args.settings.headers, { key: "", value: "" }],
+          },
+        });
+      }}
+      onRemoveHeader={(index) => {
+        args.onRemoveHeader(index);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            headers: args.settings.headers.filter((_, i) => i !== index),
+          },
+        });
+      }}
+      onHeaderChange={(index, key, value) => {
+        args.onHeaderChange(index, key, value);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            headers: args.settings.headers.map((h, i) =>
+              i === index ? { key, value } : h,
+            ),
+          },
+        });
+      }}
+      onAddMetadata={() => {
+        args.onAddMetadata();
+        updateArgs({
+          settings: {
+            ...args.settings,
+            metadata: [...args.settings.metadata, { key: "", value: "" }],
+          },
+        });
+      }}
+      onRemoveMetadata={(index) => {
+        args.onRemoveMetadata(index);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            metadata: args.settings.metadata.filter((_, i) => i !== index),
+          },
+        });
+      }}
+      onMetadataChange={(index, key, value) => {
+        args.onMetadataChange(index, key, value);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            metadata: args.settings.metadata.map((m, i) =>
+              i === index ? { key, value } : m,
+            ),
+          },
+        });
+      }}
+      onTimeoutChange={(field, value) => {
+        args.onTimeoutChange(field, value);
+        updateArgs({
+          settings: { ...args.settings, [field]: value },
+        });
+      }}
+      onOAuthChange={(oauth) => {
+        args.onOAuthChange(oauth);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            oauthClientId: oauth.clientId,
+            oauthClientSecret: oauth.clientSecret,
+            oauthScopes: oauth.scopes,
+          },
+        });
+      }}
+    />
+  );
+}
 
 const meta: Meta<typeof ServerSettingsForm> = {
   title: "Groups/ServerSettingsForm",
   component: ServerSettingsForm,
+  render: InteractiveRender,
   args: {
-    expandedSections: ["connectionMode"],
+    expandedSections: ["headers"],
     onExpandedSectionsChange: fn(),
-    onConnectionModeChange: fn(),
     onAddHeader: fn(),
     onRemoveHeader: fn(),
     onHeaderChange: fn(),
@@ -25,55 +126,49 @@ type Story = StoryObj<typeof ServerSettingsForm>;
 
 export const DefaultSettings: Story = {
   args: {
-    connectionMode: "proxy",
-    headers: [],
-    metadata: [],
-    connectionTimeout: 30000,
-    requestTimeout: 60000,
+    settings: defaultSettings,
   },
 };
 
 export const WithHeaders: Story = {
   args: {
-    connectionMode: "proxy",
-    headers: [
-      { key: "Authorization", value: "Bearer token-abc-123" },
-      { key: "X-Custom-Header", value: "custom-value" },
-    ],
-    metadata: [],
-    connectionTimeout: 30000,
-    requestTimeout: 60000,
+    settings: {
+      ...defaultSettings,
+      headers: [
+        { key: "Authorization", value: "Bearer token-abc-123" },
+        { key: "X-Custom-Header", value: "custom-value" },
+      ],
+    },
   },
 };
 
 export const WithOAuth: Story = {
   args: {
-    connectionMode: "direct",
-    headers: [],
-    metadata: [],
-    connectionTimeout: 30000,
-    requestTimeout: 60000,
-    oauthClientId: "my-client-id",
-    oauthClientSecret: "super-secret-value",
-    oauthScopes: "read write admin",
+    settings: {
+      ...defaultSettings,
+      oauthClientId: "my-client-id",
+      oauthClientSecret: "super-secret-value",
+      oauthScopes: "read write admin",
+    },
   },
 };
 
 export const AllConfigured: Story = {
   args: {
-    connectionMode: "proxy",
-    headers: [
-      { key: "Authorization", value: "Bearer token-abc-123" },
-      { key: "X-Request-Id", value: "req-456" },
-    ],
-    metadata: [
-      { key: "userId", value: "user-789" },
-      { key: "sessionId", value: "session-012" },
-    ],
-    connectionTimeout: 15000,
-    requestTimeout: 45000,
-    oauthClientId: "my-client-id",
-    oauthClientSecret: "super-secret-value",
-    oauthScopes: "read write",
+    settings: {
+      headers: [
+        { key: "Authorization", value: "Bearer token-abc-123" },
+        { key: "X-Request-Id", value: "req-456" },
+      ],
+      metadata: [
+        { key: "userId", value: "user-789" },
+        { key: "sessionId", value: "session-012" },
+      ],
+      connectionTimeout: 15000,
+      requestTimeout: 45000,
+      oauthClientId: "my-client-id",
+      oauthClientSecret: "super-secret-value",
+      oauthScopes: "read write",
+    },
   },
 };
diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
index f66c19ba..cf9e451d 100644
--- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
+++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
@@ -4,51 +4,38 @@ import {
   Button,
   Group,
   NumberInput,
-  Select,
   Stack,
   Text,
   TextInput,
 } from "@mantine/core";
-
-export interface KeyValuePair {
-  key: string;
-  value: string;
-}
+import type {
+  InspectorServerSettings,
+  OAuthSettings,
+} from "@inspector/core/mcp/types.js";
 
 export type ServerSettingsSection =
-  | "connectionMode"
   | "headers"
   | "metadata"
   | "timeouts"
   | "oauth";
 
 export interface ServerSettingsFormProps {
-  connectionMode: "proxy" | "direct";
-  headers: KeyValuePair[];
-  metadata: KeyValuePair[];
-  connectionTimeout: number;
-  requestTimeout: number;
-  oauthClientId?: string;
-  oauthClientSecret?: string;
-  oauthScopes?: string;
+  settings: InspectorServerSettings;
   expandedSections: ServerSettingsSection[];
   onExpandedSectionsChange: (sections: ServerSettingsSection[]) => void;
-  onConnectionModeChange: (mode: string) => void;
   onAddHeader: () => void;
   onRemoveHeader: (index: number) => void;
   onHeaderChange: (index: number, key: string, value: string) => void;
   onAddMetadata: () => void;
   onRemoveMetadata: (index: number) => void;
   onMetadataChange: (index: number, key: string, value: string) => void;
-  onTimeoutChange: (field: string, value: number) => void;
-  onOAuthChange: (field: string, value: string) => void;
+  onTimeoutChange: (
+    field: "connectionTimeout" | "requestTimeout",
+    value: number,
+  ) => void;
+  onOAuthChange: (oauth: OAuthSettings) => void;
 }
 
-const CONNECTION_MODE_OPTIONS = [
-  { value: "proxy", label: "Via Proxy" },
-  { value: "direct", label: "Direct" },
-];
-
 const RemoveIcon = ActionIcon.withProps({
   color: "red",
   variant: "subtle",
@@ -75,7 +62,7 @@ function KeyValueRows({
   onChange,
   onRemove,
 }: {
-  items: KeyValuePair[];
+  items: { key: string; value: string }[];
   onChange: (index: number, key: string, value: string) => void;
   onRemove: (index: number) => void;
 }) {
@@ -105,17 +92,9 @@ function KeyValueRows({
 }
 
 export function ServerSettingsForm({
-  connectionMode,
-  headers,
-  metadata,
-  connectionTimeout,
-  requestTimeout,
-  oauthClientId,
-  oauthClientSecret,
-  oauthScopes,
+  settings,
   expandedSections,
   onExpandedSectionsChange,
-  onConnectionModeChange,
   onAddHeader,
   onRemoveHeader,
   onHeaderChange,
@@ -125,11 +104,21 @@ export function ServerSettingsForm({
   onTimeoutChange,
   onOAuthChange,
 }: ServerSettingsFormProps) {
-  const handleTimeoutChange = (field: string) => (value: number | string) => {
-    const numValue =
-      typeof value === "string" ? parseInt(value, 10) || 0 : value;
-    onTimeoutChange(field, numValue);
-  };
+  const handleTimeoutChange =
+    (field: "connectionTimeout" | "requestTimeout") =>
+    (value: number | string) => {
+      const numValue =
+        typeof value === "string" ? parseInt(value, 10) || 0 : value;
+      onTimeoutChange(field, numValue);
+    };
+
+  function currentOAuth(): OAuthSettings {
+    return {
+      clientId: settings.oauthClientId ?? "",
+      clientSecret: settings.oauthClientSecret ?? "",
+      scopes: settings.oauthScopes ?? "",
+    };
+  }
 
   return (
     <Accordion
@@ -140,24 +129,6 @@ export function ServerSettingsForm({
       }
       variant="separated"
     >
-      <Accordion.Item value="connectionMode">
-        <Accordion.Control>Connection Mode</Accordion.Control>
-        <Accordion.Panel>
-          <Select
-            data={CONNECTION_MODE_OPTIONS}
-            value={connectionMode}
-            onChange={(value) => {
-              if (value) onConnectionModeChange(value);
-            }}
-            description={
-              connectionMode === "proxy"
-                ? "Route through inspector proxy (required for STDIO)"
-                : undefined
-            }
-          />
-        </Accordion.Panel>
-      </Accordion.Item>
-
       <Accordion.Item value="headers">
         <Accordion.Control>Custom Headers</Accordion.Control>
         <Accordion.Panel>
@@ -168,11 +139,11 @@ export function ServerSettingsForm({
               </HintText>
               <AddButton onClick={onAddHeader}>+ Add Header</AddButton>
             </Group>
-            {headers.length === 0 ? (
+            {settings.headers.length === 0 ? (
               <EmptyHint>No custom headers configured</EmptyHint>
             ) : (
               <KeyValueRows
-                items={headers}
+                items={settings.headers}
                 onChange={onHeaderChange}
                 onRemove={onRemoveHeader}
               />
@@ -191,11 +162,11 @@ export function ServerSettingsForm({
               </HintText>
               <AddButton onClick={onAddMetadata}>+ Add Metadata</AddButton>
             </Group>
-            {metadata.length === 0 ? (
+            {settings.metadata.length === 0 ? (
               <EmptyHint>No request metadata configured</EmptyHint>
             ) : (
               <KeyValueRows
-                items={metadata}
+                items={settings.metadata}
                 onChange={onMetadataChange}
                 onRemove={onRemoveMetadata}
               />
@@ -211,13 +182,13 @@ export function ServerSettingsForm({
             <NumberInput
               label="Connection Timeout"
               suffix=" ms"
-              value={connectionTimeout}
+              value={settings.connectionTimeout}
               onChange={handleTimeoutChange("connectionTimeout")}
             />
             <NumberInput
               label="Request Timeout"
               suffix=" ms"
-              value={requestTimeout}
+              value={settings.requestTimeout}
               onChange={handleTimeoutChange("requestTimeout")}
             />
           </Group>
@@ -234,21 +205,34 @@ export function ServerSettingsForm({
             </HintText>
             <TextInput
               label="Client ID"
-              value={oauthClientId ?? ""}
-              onChange={(e) => onOAuthChange("clientId", e.currentTarget.value)}
+              value={settings.oauthClientId ?? ""}
+              onChange={(e) =>
+                onOAuthChange({
+                  ...currentOAuth(),
+                  clientId: e.currentTarget.value,
+                })
+              }
             />
             <TextInput
               label="Client Secret"
-              value={oauthClientSecret ?? ""}
+              value={settings.oauthClientSecret ?? ""}
               type="password"
               onChange={(e) =>
-                onOAuthChange("clientSecret", e.currentTarget.value)
+                onOAuthChange({
+                  ...currentOAuth(),
+                  clientSecret: e.currentTarget.value,
+                })
               }
             />
             <TextInput
               label="Scopes"
-              value={oauthScopes ?? ""}
-              onChange={(e) => onOAuthChange("scopes", e.currentTarget.value)}
+              value={settings.oauthScopes ?? ""}
+              onChange={(e) =>
+                onOAuthChange({
+                  ...currentOAuth(),
+                  scopes: e.currentTarget.value,
+                })
+              }
             />
           </Stack>
         </Accordion.Panel>
diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
new file mode 100644
index 00000000..fc73d19f
--- /dev/null
+++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
@@ -0,0 +1,72 @@
+import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
+import { AppShell } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { useArgs } from "storybook/preview-api";
+import {
+  ServerSettingsModal,
+  type ServerSettingsModalProps,
+} from "./ServerSettingsModal";
+
+const initialSettings: InspectorServerSettings = {
+  headers: [
+    { key: "Authorization", value: "Bearer token-abc-123" },
+    { key: "X-Request-Id", value: "req-456" },
+  ],
+  metadata: [{ key: "userId", value: "user-789" }],
+  connectionTimeout: 30000,
+  requestTimeout: 60000,
+  oauthClientId: "my-client-id",
+  oauthClientSecret: "super-secret-value",
+  oauthScopes: "read write",
+};
+
+function InteractiveRender(args: ServerSettingsModalProps) {
+  const [, updateArgs] = useArgs<ServerSettingsModalProps>();
+
+  return (
+    <AppShell>
+      <AppShell.Main>
+        <ServerSettingsModal
+          {...args}
+          onSettingsChange={(settings) => {
+            args.onSettingsChange(settings);
+            updateArgs({ settings });
+          }}
+        />
+      </AppShell.Main>
+    </AppShell>
+  );
+}
+
+const meta: Meta<typeof ServerSettingsModal> = {
+  title: "Groups/ServerSettingsModal",
+  component: ServerSettingsModal,
+  parameters: { layout: "fullscreen" },
+  render: InteractiveRender,
+  args: {
+    opened: true,
+    onClose: fn(),
+    onSettingsChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServerSettingsModal>;
+
+export const FullyConfigured: Story = {
+  args: {
+    settings: initialSettings,
+  },
+};
+
+export const EmptySettings: Story = {
+  args: {
+    settings: {
+      headers: [],
+      metadata: [],
+      connectionTimeout: 30000,
+      requestTimeout: 60000,
+    },
+  },
+};
diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx
new file mode 100644
index 00000000..abc8a05a
--- /dev/null
+++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx
@@ -0,0 +1,137 @@
+import { useState } from "react";
+import { CloseButton, Group, Modal, Stack, Title } from "@mantine/core";
+import type {
+  InspectorServerSettings,
+  OAuthSettings,
+} from "@inspector/core/mcp/types.js";
+import { ListToggle } from "../../elements/ListToggle/ListToggle";
+import {
+  ServerSettingsForm,
+  type ServerSettingsSection,
+} from "../ServerSettingsForm/ServerSettingsForm";
+
+const ALL_SECTIONS: ServerSettingsSection[] = [
+  "headers",
+  "metadata",
+  "timeouts",
+  "oauth",
+];
+
+export interface ServerSettingsModalProps {
+  opened: boolean;
+  settings: InspectorServerSettings;
+  onClose: () => void;
+  onSettingsChange: (settings: InspectorServerSettings) => void;
+}
+
+export function ServerSettingsModal({
+  opened,
+  settings,
+  onClose,
+  onSettingsChange,
+}: ServerSettingsModalProps) {
+  const [expandedSections, setExpandedSections] = useState<
+    ServerSettingsSection[]
+  >(["headers"]);
+
+  const allExpanded = expandedSections.length === ALL_SECTIONS.length;
+
+  function handleToggleAll() {
+    setExpandedSections(allExpanded ? [] : ALL_SECTIONS);
+  }
+
+  function handleAddHeader() {
+    onSettingsChange({
+      ...settings,
+      headers: [...settings.headers, { key: "", value: "" }],
+    });
+  }
+
+  function handleRemoveHeader(index: number) {
+    onSettingsChange({
+      ...settings,
+      headers: settings.headers.filter((_, i) => i !== index),
+    });
+  }
+
+  function handleHeaderChange(index: number, key: string, value: string) {
+    const headers = settings.headers.map((h, i) =>
+      i === index ? { key, value } : h,
+    );
+    onSettingsChange({ ...settings, headers });
+  }
+
+  function handleAddMetadata() {
+    onSettingsChange({
+      ...settings,
+      metadata: [...settings.metadata, { key: "", value: "" }],
+    });
+  }
+
+  function handleRemoveMetadata(index: number) {
+    onSettingsChange({
+      ...settings,
+      metadata: settings.metadata.filter((_, i) => i !== index),
+    });
+  }
+
+  function handleMetadataChange(index: number, key: string, value: string) {
+    const metadata = settings.metadata.map((m, i) =>
+      i === index ? { key, value } : m,
+    );
+    onSettingsChange({ ...settings, metadata });
+  }
+
+  function handleTimeoutChange(
+    field: "connectionTimeout" | "requestTimeout",
+    value: number,
+  ) {
+    onSettingsChange({ ...settings, [field]: value });
+  }
+
+  function handleOAuthChange(oauth: OAuthSettings) {
+    onSettingsChange({
+      ...settings,
+      oauthClientId: oauth.clientId,
+      oauthClientSecret: oauth.clientSecret,
+      oauthScopes: oauth.scopes,
+    });
+  }
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      withCloseButton={false}
+      size="lg"
+      centered
+    >
+      <Stack gap="md">
+        <Group justify="space-between" wrap="nowrap">
+          <ListToggle
+            compact={allExpanded}
+            variant="subtle"
+            onToggle={handleToggleAll}
+          />
+          <Title order={4} ta="center" flex={1}>
+            Server Settings
+          </Title>
+          <CloseButton onClick={onClose} />
+        </Group>
+        <ServerSettingsForm
+          settings={settings}
+          expandedSections={expandedSections}
+          onExpandedSectionsChange={setExpandedSections}
+          onAddHeader={handleAddHeader}
+          onRemoveHeader={handleRemoveHeader}
+          onHeaderChange={handleHeaderChange}
+          onAddMetadata={handleAddMetadata}
+          onRemoveMetadata={handleRemoveMetadata}
+          onMetadataChange={handleMetadataChange}
+          onTimeoutChange={handleTimeoutChange}
+          onOAuthChange={handleOAuthChange}
+        />
+      </Stack>
+    </Modal>
+  );
+}
diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.stories.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.stories.tsx
index bf7b9ffd..e5c1c4a6 100644
--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.stories.tsx
+++ b/clients/web/src/components/groups/ViewHeader/ViewHeader.stories.tsx
@@ -1,6 +1,6 @@
+import { AppShell } from "@mantine/core";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
-import { AppShell } from "@mantine/core";
 import { ViewHeader } from "./ViewHeader";
 
 const meta: Meta<typeof ViewHeader> = {
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof ViewHeader>;
 export const Connected: Story = {
   args: {
     connected: true,
-    serverName: "my-mcp-server",
+    serverInfo: { name: "my-mcp-server", version: "1.2.0" },
     status: "connected",
     latencyMs: 23,
     activeTab: "Tools",
@@ -31,8 +31,8 @@ export const Connected: Story = {
       "Tools",
       "Resources",
       "Prompts",
-      "Logging",
       "Tasks",
+      "Logs",
       "History",
     ],
     onTabChange: fn(),
diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
index 2eddb6fa..94ab4820 100644
--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
+++ b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
@@ -5,19 +5,23 @@ import {
   Group,
   Image,
   SegmentedControl,
+  Select,
   Text,
   Title,
+  useComputedColorScheme,
 } from "@mantine/core";
-import { useComputedColorScheme } from "@mantine/core";
-import { MdLightMode, MdDarkMode } from "react-icons/md";
+import { useMediaQuery } from "@mantine/hooks";
+import type { Implementation } from "@modelcontextprotocol/sdk/types.js";
+import { MdLightMode, MdDarkMode, MdLinkOff } from "react-icons/md";
+import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 import { ServerStatusIndicator } from "../../elements/ServerStatusIndicator/ServerStatusIndicator";
 import mcpLogo from "../../../theme/assets/MCP.svg";
 import mcpLogoDark from "../../../theme/assets/MCP-dark.svg";
 
 interface ConnectedProps {
   connected: true;
-  serverName: string;
-  status: "connected" | "connecting" | "error";
+  serverInfo: Implementation;
+  status: ConnectionStatus;
   latencyMs?: number;
   activeTab: string;
   availableTabs: string[];
@@ -37,13 +41,13 @@ const HeaderBar = Group.withProps({
   h: "100%",
   px: "md",
   wrap: "nowrap",
-  gap: 0,
+  gap: "md",
 });
 
 const LeftSection = Group.withProps({
   gap: "md",
   wrap: "nowrap",
-  w: "33.33%",
+  flex: 1,
   miw: 0,
 });
 
@@ -64,17 +68,20 @@ const ServerName = Text.withProps({
   fw: 600,
   size: "lg",
   truncate: "end",
-  maw: "calc(100% - 40px)",
+  miw: 0,
+  flex: 1,
 });
 
 const CenterSection = Group.withProps({
-  w: "33.33%",
-  justify: "center",
+  wrap: "nowrap",
+  flex: "0 0 auto",
 });
 
 const RightSection = Group.withProps({
   gap: "sm",
-  w: "33.33%",
+  wrap: "nowrap",
+  flex: 1,
+  miw: 0,
   justify: "flex-end",
 });
 
@@ -84,6 +91,13 @@ const DisconnectButton = Button.withProps({
   size: "sm",
 });
 
+const DisconnectIcon = ActionIcon.withProps({
+  variant: "subtle",
+  c: "red",
+  size: 36,
+  "aria-label": "Disconnect",
+});
+
 const ThemeToggle = ActionIcon.withProps({
   variant: "subtle",
   size: 36,
@@ -99,6 +113,8 @@ const UnconnectedBar = Group.withProps({
 export function ViewHeader(props: ViewHeaderProps) {
   const colorScheme = useComputedColorScheme();
   const ThemeIcon = colorScheme === "dark" ? MdLightMode : MdDarkMode;
+  const showSegmented = useMediaQuery("(min-width: 992px)");
+  const showDisconnectLabel = useMediaQuery("(min-width: 768px)");
 
   if (!props.connected) {
     return (
@@ -120,16 +136,29 @@ export function ViewHeader(props: ViewHeaderProps) {
         <LogoLink>
           <LogoImage src={colorScheme === "dark" ? mcpLogoDark : mcpLogo} />
         </LogoLink>
-        <ServerName>{props.serverName}</ServerName>
+        <ServerName>{props.serverInfo.name}</ServerName>
       </LeftSection>
 
       <CenterSection>
-        <SegmentedControl
-          value={props.activeTab}
-          onChange={props.onTabChange}
-          data={props.availableTabs}
-          size="sm"
-        />
+        {showSegmented ? (
+          <SegmentedControl
+            value={props.activeTab}
+            onChange={props.onTabChange}
+            data={props.availableTabs}
+            size="sm"
+          />
+        ) : (
+          <Select
+            value={props.activeTab}
+            onChange={(value) => value && props.onTabChange(value)}
+            data={props.availableTabs}
+            size="sm"
+            allowDeselect={false}
+            // Sized to comfortably fit the longest current tab label
+            // ("Resources"). Revisit if longer tabs are added.
+            w={140}
+          />
+        )}
       </CenterSection>
 
       <RightSection>
@@ -137,9 +166,15 @@ export function ViewHeader(props: ViewHeaderProps) {
           status={props.status}
           latencyMs={props.latencyMs}
         />
-        <DisconnectButton onClick={props.onDisconnect}>
-          Disconnect
-        </DisconnectButton>
+        {showDisconnectLabel ? (
+          <DisconnectButton onClick={props.onDisconnect}>
+            Disconnect
+          </DisconnectButton>
+        ) : (
+          <DisconnectIcon onClick={props.onDisconnect} title="Disconnect">
+            <MdLinkOff size={20} />
+          </DisconnectIcon>
+        )}
         <ThemeToggle onClick={props.onToggleTheme}>
           <ThemeIcon size={20} />
         </ThemeToggle>
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.fixtures.ts b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.fixtures.ts
new file mode 100644
index 00000000..74372e8b
--- /dev/null
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.fixtures.ts
@@ -0,0 +1,140 @@
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
+import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
+
+const logMessages: {
+  level: LoggingLevel;
+  data: string;
+  logger?: string;
+}[] = [
+  { level: "info", data: "Server started on port 3000" },
+  {
+    level: "debug",
+    data: "Loading configuration from /etc/mcp/config.json",
+    logger: "config",
+  },
+  {
+    level: "warning",
+    data: "Deprecated API endpoint called: /v1/tools",
+    logger: "http",
+  },
+  { level: "info", data: "Client connected: inspector-web-ui" },
+  {
+    level: "error",
+    data: "Failed to read resource: file not found at /data/missing.txt",
+    logger: "resources",
+  },
+  {
+    level: "info",
+    data: "Tool execution completed: search_files (245ms)",
+    logger: "tools",
+  },
+  {
+    level: "debug",
+    data: "Parsing JSON-RPC request body",
+    logger: "transport",
+  },
+  {
+    level: "info",
+    data: "Listing available tools for client session",
+    logger: "tools",
+  },
+  {
+    level: "warning",
+    data: "Slow query detected: 1200ms for resource lookup",
+    logger: "db",
+  },
+  {
+    level: "info",
+    data: "Resource subscription added: file:///config.json",
+    logger: "resources",
+  },
+  {
+    level: "debug",
+    data: "Heartbeat ping received from client",
+    logger: "session",
+  },
+  {
+    level: "error",
+    data: "Permission denied reading /etc/secrets.env",
+    logger: "resources",
+  },
+  {
+    level: "info",
+    data: "Prompt 'summarize' resolved with 2 messages",
+    logger: "prompts",
+  },
+  {
+    level: "debug",
+    data: "Cache hit for resource: db://users/42",
+    logger: "cache",
+  },
+  {
+    level: "info",
+    data: "Tool 'create_record' executed successfully in 89ms",
+    logger: "tools",
+  },
+  {
+    level: "warning",
+    data: "Client reconnection attempt #3",
+    logger: "session",
+  },
+  {
+    level: "info",
+    data: "New resource detected: file:///data/output.csv",
+    logger: "resources",
+  },
+  {
+    level: "debug",
+    data: "Serializing response payload (2.4KB)",
+    logger: "transport",
+  },
+  {
+    level: "error",
+    data: "Timeout waiting for tool response after 30s",
+    logger: "tools",
+  },
+  {
+    level: "info",
+    data: "Session initialized with capabilities: tools, resources, prompts",
+  },
+  {
+    level: "debug",
+    data: "Validating input schema for tool 'batch_process'",
+    logger: "tools",
+  },
+  {
+    level: "info",
+    data: "Resource template resolved: db://tables/users/rows/15",
+    logger: "resources",
+  },
+  {
+    level: "warning",
+    data: "Memory usage at 78% — consider increasing limits",
+    logger: "system",
+  },
+  {
+    level: "info",
+    data: "Client disconnected gracefully",
+    logger: "session",
+  },
+  {
+    level: "debug",
+    data: "Flushing log buffer to disk (128 entries)",
+    logger: "logging",
+  },
+];
+
+function pad(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+export const mixedEntries: LogEntryData[] = Array.from(
+  { length: 50 },
+  (_, i) => {
+    const src = logMessages[i % logMessages.length];
+    return {
+      receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`),
+      params: { level: src.level, data: src.data, logger: src.logger },
+    };
+  },
+);
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
index ff771eff..b67d6197 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { fn } from "storybook/test";
 import { LoggingScreen } from "./LoggingScreen";
+import { mixedEntries } from "./LoggingScreen.fixtures";
 import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
 const meta: Meta<typeof LoggingScreen> = {
@@ -28,141 +28,6 @@ export const Empty: Story = {
   },
 };
 
-const logMessages: {
-  level: LoggingLevel;
-  data: string;
-  logger?: string;
-}[] = [
-  { level: "info", data: "Server started on port 3000" },
-  {
-    level: "debug",
-    data: "Loading configuration from /etc/mcp/config.json",
-    logger: "config",
-  },
-  {
-    level: "warning",
-    data: "Deprecated API endpoint called: /v1/tools",
-    logger: "http",
-  },
-  { level: "info", data: "Client connected: inspector-web-ui" },
-  {
-    level: "error",
-    data: "Failed to read resource: file not found at /data/missing.txt",
-    logger: "resources",
-  },
-  {
-    level: "info",
-    data: "Tool execution completed: search_files (245ms)",
-    logger: "tools",
-  },
-  {
-    level: "debug",
-    data: "Parsing JSON-RPC request body",
-    logger: "transport",
-  },
-  {
-    level: "info",
-    data: "Listing available tools for client session",
-    logger: "tools",
-  },
-  {
-    level: "warning",
-    data: "Slow query detected: 1200ms for resource lookup",
-    logger: "db",
-  },
-  {
-    level: "info",
-    data: "Resource subscription added: file:///config.json",
-    logger: "resources",
-  },
-  {
-    level: "debug",
-    data: "Heartbeat ping received from client",
-    logger: "session",
-  },
-  {
-    level: "error",
-    data: "Permission denied reading /etc/secrets.env",
-    logger: "resources",
-  },
-  {
-    level: "info",
-    data: "Prompt 'summarize' resolved with 2 messages",
-    logger: "prompts",
-  },
-  {
-    level: "debug",
-    data: "Cache hit for resource: db://users/42",
-    logger: "cache",
-  },
-  {
-    level: "info",
-    data: "Tool 'create_record' executed successfully in 89ms",
-    logger: "tools",
-  },
-  {
-    level: "warning",
-    data: "Client reconnection attempt #3",
-    logger: "session",
-  },
-  {
-    level: "info",
-    data: "New resource detected: file:///data/output.csv",
-    logger: "resources",
-  },
-  {
-    level: "debug",
-    data: "Serializing response payload (2.4KB)",
-    logger: "transport",
-  },
-  {
-    level: "error",
-    data: "Timeout waiting for tool response after 30s",
-    logger: "tools",
-  },
-  {
-    level: "info",
-    data: "Session initialized with capabilities: tools, resources, prompts",
-  },
-  {
-    level: "debug",
-    data: "Validating input schema for tool 'batch_process'",
-    logger: "tools",
-  },
-  {
-    level: "info",
-    data: "Resource template resolved: db://tables/users/rows/15",
-    logger: "resources",
-  },
-  {
-    level: "warning",
-    data: "Memory usage at 78% — consider increasing limits",
-    logger: "system",
-  },
-  {
-    level: "info",
-    data: "Client disconnected gracefully",
-    logger: "session",
-  },
-  {
-    level: "debug",
-    data: "Flushing log buffer to disk (128 entries)",
-    logger: "logging",
-  },
-];
-
-function pad(n: number): string {
-  return n.toString().padStart(2, "0");
-}
-
-const mixedEntries: LogEntryData[] = Array.from({ length: 50 }, (_, i) => {
-  const src = logMessages[i % logMessages.length];
-  return {
-    receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`),
-    params: { level: src.level, data: src.data, logger: src.logger },
-  };
-});
-
 export const WithEntries: Story = {
   args: {
     entries: mixedEntries,
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
index 7ffd109d..a5177a14 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
-import { ServerListScreen } from "./ServerListScreen";
-import type { ServerCardProps } from "../../groups/ServerCard/ServerCard";
+import { ServerListScreen, type ServerEntry } from "./ServerListScreen";
 
 const meta: Meta<typeof ServerListScreen> = {
   title: "Screens/ServerListScreen",
@@ -11,85 +10,64 @@ const meta: Meta<typeof ServerListScreen> = {
     onAddManually: fn(),
     onImportConfig: fn(),
     onImportServerJson: fn(),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ServerListScreen>;
-
-function makeServerCallbacks(): Pick<
-  ServerCardProps,
-  | "onToggleConnection"
-  | "onServerInfo"
-  | "onSettings"
-  | "onEdit"
-  | "onClone"
-  | "onRemove"
-  | "onTestSampling"
-  | "onTestElicitationForm"
-  | "onTestElicitationUrl"
-  | "onConfigureRoots"
-> {
-  return {
     onToggleConnection: fn(),
     onServerInfo: fn(),
     onSettings: fn(),
     onEdit: fn(),
     onClone: fn(),
     onRemove: fn(),
-    onTestSampling: fn(),
-    onTestElicitationForm: fn(),
-    onTestElicitationUrl: fn(),
-    onConfigureRoots: fn(),
-  };
-}
-
-const connectedStdioServer: ServerCardProps = {
-  name: "Local Dev Server",
-  version: "1.2.0",
-  transport: "stdio",
-  connectionMode: "Direct",
-  command: "npx @modelcontextprotocol/server-filesystem /home/user/projects",
-  status: "connected",
-  canTestClientFeatures: true,
-  ...makeServerCallbacks(),
-};
-
-const disconnectedStdioServer: ServerCardProps = {
-  name: "Database Tools",
-  version: "0.9.1",
-  transport: "stdio",
-  connectionMode: "Direct",
-  command: "python -m mcp_server_sqlite --db-path ./data.db",
-  status: "disconnected",
-  canTestClientFeatures: false,
-  ...makeServerCallbacks(),
-};
-
-const failedHttpServer: ServerCardProps = {
-  name: "Remote API Server",
-  version: "2.0.0",
-  transport: "streamable-http",
-  connectionMode: "Streamable HTTP",
-  command: "https://api.example.com/mcp",
-  status: "error",
-  retryCount: 3,
-  error: {
-    message: "Connection refused",
-    details: "ECONNREFUSED 127.0.0.1:8080 - The server may not be running.",
   },
-  canTestClientFeatures: false,
-  ...makeServerCallbacks(),
 };
 
-const connectingHttpServer: ServerCardProps = {
+export default meta;
+type Story = StoryObj<typeof ServerListScreen>;
+
+const connectedStdioServer: ServerEntry = {
+  id: "5e8c3d1f-2a4b-4c6d-8e7f-1a2b3c4d5e6f",
+  name: "Local Dev Server",
+  config: {
+    command: "npx @modelcontextprotocol/server-filesystem /home/user/projects",
+  },
+  info: { name: "Local Dev Server", version: "1.2.0" },
+  connection: { status: "connected" },
+};
+
+const disconnectedStdioServer: ServerEntry = {
+  id: "b3a7c1d2-9f8e-4a5b-bc6d-7e8f9a0b1c2d",
+  name: "Database Tools",
+  config: {
+    command: "python -m mcp_server_sqlite --db-path ./data.db",
+  },
+  info: { name: "Database Tools", version: "0.9.1" },
+  connection: { status: "disconnected" },
+};
+
+const failedHttpServer: ServerEntry = {
+  id: "c4d5e6f7-8a9b-4c0d-9e1f-2a3b4c5d6e7f",
+  name: "Remote API Server",
+  config: {
+    type: "streamable-http",
+    url: "https://api.example.com/mcp",
+  },
+  info: { name: "Remote API Server", version: "2.0.0" },
+  connection: {
+    status: "error",
+    retryCount: 3,
+    error: {
+      message: "Connection refused",
+      details: "ECONNREFUSED 127.0.0.1:8080 - The server may not be running.",
+    },
+  },
+};
+
+const connectingHttpServer: ServerEntry = {
+  id: "d6e7f8a9-0b1c-4d2e-bf3a-4b5c6d7e8f90",
   name: "Staging Server",
-  transport: "streamable-http",
-  connectionMode: "Streamable HTTP",
-  command: "https://staging.example.com/mcp",
-  status: "connecting",
-  canTestClientFeatures: false,
-  ...makeServerCallbacks(),
+  config: {
+    type: "streamable-http",
+    url: "https://staging.example.com/mcp",
+  },
+  connection: { status: "connecting" },
 };
 
 export const MultipleServers: Story = {
@@ -120,3 +98,10 @@ export const MixedStates: Story = {
     ],
   },
 };
+
+export const WithActiveServer: Story = {
+  args: {
+    servers: [connectedStdioServer, disconnectedStdioServer, failedHttpServer],
+    activeServer: connectedStdioServer.id,
+  },
+};
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
index 5c92493e..c2466790 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
@@ -4,11 +4,24 @@ import { ServerCard } from "../../groups/ServerCard/ServerCard";
 import { ServerListControls } from "../../groups/ServerListControls/ServerListControls";
 import type { ServerCardProps } from "../../groups/ServerCard/ServerCard";
 
+export type ServerEntry = Pick<
+  ServerCardProps,
+  "id" | "name" | "config" | "info" | "connection"
+>;
+
 export interface ServerListScreenProps {
-  servers: ServerCardProps[];
+  servers: ServerEntry[];
+  /** Id of the server the wiring layer treats as active (drives card dimming). */
+  activeServer?: string;
   onAddManually: () => void;
   onImportConfig: () => void;
   onImportServerJson: () => void;
+  onToggleConnection: (id: string) => void;
+  onServerInfo: (id: string) => void;
+  onSettings: (id: string) => void;
+  onEdit: (id: string) => void;
+  onClone: (id: string) => void;
+  onRemove: (id: string) => void;
 }
 
 const PageContainer = Stack.withProps({
@@ -23,15 +36,21 @@ const EmptyState = Text.withProps({
 
 export function ServerListScreen({
   servers,
+  activeServer,
   onAddManually,
   onImportConfig,
   onImportServerJson,
+  onToggleConnection,
+  onServerInfo,
+  onSettings,
+  onEdit,
+  onClone,
+  onRemove,
 }: ServerListScreenProps) {
   const [compact, setCompact] = useState<boolean>(false);
-  const [activeServer, setActiveServer] = useState<string | undefined>();
 
   function handleToggleList() {
-    setCompact((prev) => (prev === true ? false : true));
+    setCompact((prev) => !prev);
   }
 
   return (
@@ -58,10 +77,15 @@ export function ServerListScreen({
           >
             {servers.map((server) => (
               <ServerCard
-                key={server.name}
+                key={server.id}
                 compact={compact}
                 activeServer={activeServer}
-                onSetActiveServer={setActiveServer}
+                onToggleConnection={onToggleConnection}
+                onServerInfo={onServerInfo}
+                onSettings={onSettings}
+                onEdit={onEdit}
+                onClone={onClone}
+                onRemove={onRemove}
                 {...server}
               />
             ))}
diff --git a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
deleted file mode 100644
index 02c28771..00000000
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
+++ /dev/null
@@ -1,711 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-import { Text } from "@mantine/core";
-import { ConnectedView } from "./ConnectedView.js";
-import { ToolsScreen } from "../../screens/ToolsScreen/ToolsScreen";
-import { ResourcesScreen } from "../../screens/ResourcesScreen/ResourcesScreen";
-import { PromptsScreen } from "../../screens/PromptsScreen/PromptsScreen";
-import { LoggingScreen } from "../../screens/LoggingScreen/LoggingScreen";
-import { TasksScreen } from "../../screens/TasksScreen/TasksScreen";
-import { HistoryScreen } from "../../screens/HistoryScreen/HistoryScreen";
-
-import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
-import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
-
-const allTabs = ["Tools", "Resources", "Prompts", "Logs", "Tasks", "History"];
-
-const logMessages: { level: LoggingLevel; data: string; logger?: string }[] = [
-  { level: "info", data: "Server started on port 3000" },
-  {
-    level: "debug",
-    data: "Loading configuration from /etc/mcp/config.json",
-    logger: "config",
-  },
-  {
-    level: "warning",
-    data: "Deprecated API endpoint called: /v1/tools",
-    logger: "http",
-  },
-  { level: "info", data: "Client connected: inspector-web-ui" },
-  {
-    level: "error",
-    data: "Failed to read resource: file not found at /data/missing.txt",
-    logger: "resources",
-  },
-  {
-    level: "info",
-    data: "Tool execution completed: search_files (245ms)",
-    logger: "tools",
-  },
-  {
-    level: "debug",
-    data: "Parsing JSON-RPC request body",
-    logger: "transport",
-  },
-  {
-    level: "info",
-    data: "Listing available tools for client session",
-    logger: "tools",
-  },
-  {
-    level: "warning",
-    data: "Slow query detected: 1200ms for resource lookup",
-    logger: "db",
-  },
-  {
-    level: "info",
-    data: "Resource subscription added: file:///config.json",
-    logger: "resources",
-  },
-  {
-    level: "debug",
-    data: "Heartbeat ping received from client",
-    logger: "session",
-  },
-  {
-    level: "error",
-    data: "Permission denied reading /etc/secrets.env",
-    logger: "resources",
-  },
-  {
-    level: "info",
-    data: "Prompt 'summarize' resolved with 2 messages",
-    logger: "prompts",
-  },
-  {
-    level: "debug",
-    data: "Cache hit for resource: db://users/42",
-    logger: "cache",
-  },
-  {
-    level: "info",
-    data: "Tool 'create_record' executed successfully in 89ms",
-    logger: "tools",
-  },
-  {
-    level: "warning",
-    data: "Client reconnection attempt #3",
-    logger: "session",
-  },
-  {
-    level: "info",
-    data: "New resource detected: file:///data/output.csv",
-    logger: "resources",
-  },
-  {
-    level: "debug",
-    data: "Serializing response payload (2.4KB)",
-    logger: "transport",
-  },
-  {
-    level: "error",
-    data: "Timeout waiting for tool response after 30s",
-    logger: "tools",
-  },
-  {
-    level: "info",
-    data: "Session initialized with capabilities: tools, resources, prompts",
-  },
-  {
-    level: "debug",
-    data: "Validating input schema for tool 'batch_process'",
-    logger: "tools",
-  },
-  {
-    level: "info",
-    data: "Resource template resolved: db://tables/users/rows/15",
-    logger: "resources",
-  },
-  {
-    level: "warning",
-    data: "Memory usage at 78% — consider increasing limits",
-    logger: "system",
-  },
-  {
-    level: "info",
-    data: "Client disconnected gracefully",
-    logger: "session",
-  },
-  {
-    level: "debug",
-    data: "Flushing log buffer to disk (128 entries)",
-    logger: "logging",
-  },
-];
-
-function pad(n: number): string {
-  return n.toString().padStart(2, "0");
-}
-
-const sampleLogEntries: LogEntryData[] = Array.from({ length: 50 }, (_, i) => {
-  const src = logMessages[i % logMessages.length];
-  return {
-    receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`),
-    params: { level: src.level, data: src.data, logger: src.logger },
-  };
-});
-
-const meta: Meta<typeof ConnectedView> = {
-  title: "Views/ConnectedView",
-  component: ConnectedView,
-  parameters: { layout: "fullscreen" },
-  args: {
-    serverName: "my-mcp-server",
-    status: "connected",
-    latencyMs: 23,
-    availableTabs: allTabs,
-    activeTab: "Tools",
-    onTabChange: fn(),
-    onDisconnect: fn(),
-    onToggleTheme: fn(),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ConnectedView>;
-
-export const ToolsActive: Story = {
-  args: {
-    activeTab: "Tools",
-    children: (
-      <ToolsScreen
-        tools={[
-          {
-            name: "send_message",
-            title: "Send Message",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "create_record",
-            title: "Create Record",
-            description: "Creates a new record with the given parameters",
-            inputSchema: {
-              type: "object",
-              properties: {
-                title: { type: "string", description: "Record title" },
-                count: { type: "number", description: "Number of items" },
-                enabled: {
-                  type: "boolean",
-                  description: "Whether the record is active",
-                },
-              },
-              required: ["title"],
-            },
-          },
-          {
-            name: "delete_records",
-            title: "Delete Records",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "list_users",
-            title: "List Users",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "batch_process",
-            title: "Batch Process",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "search_files",
-            title: "Search Files",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "read_file",
-            title: "Read File",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "write_file",
-            title: "Write File",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "get_schema",
-            title: "Get Schema",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "run_query",
-            title: "Run Query",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "create_migration",
-            title: "Create Migration",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "validate_config",
-            title: "Validate Config",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "deploy_service",
-            title: "Deploy Service",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "rollback_deploy",
-            title: "Rollback Deploy",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "check_health",
-            title: "Check Health",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "generate_report",
-            title: "Generate Report",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "export_csv",
-            title: "Export CSV",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "import_data",
-            title: "Import Data",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "send_notification",
-            title: "Send Notification",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "schedule_task",
-            title: "Schedule Task",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "cancel_task",
-            title: "Cancel Task",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "list_connections",
-            title: "List Connections",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "refresh_cache",
-            title: "Refresh Cache",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "purge_logs",
-            title: "Purge Logs",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "encrypt_secret",
-            title: "Encrypt Secret",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "rotate_keys",
-            title: "Rotate Keys",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "sync_resources",
-            title: "Sync Resources",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "compile_template",
-            title: "Compile Template",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "analyze_performance",
-            title: "Analyze Performance",
-            inputSchema: { type: "object" },
-          },
-          {
-            name: "resize_image",
-            title: "Resize Image",
-            inputSchema: { type: "object" },
-          },
-        ]}
-        selectedToolName="create_record"
-        callState={{
-          status: "ok",
-          result: {
-            content: [
-              {
-                type: "text",
-                text: JSON.stringify(
-                  {
-                    id: 42,
-                    title: "New Record",
-                    count: 5,
-                    enabled: true,
-                    createdAt: "2026-03-17T12:00:00Z",
-                  },
-                  null,
-                  2,
-                ),
-              },
-            ],
-          },
-        }}
-        listChanged={true}
-        onRefreshList={fn()}
-        onSelectTool={fn()}
-        onCallTool={fn()}
-        onCancelCall={fn()}
-        onClearResult={fn()}
-      />
-    ),
-  },
-};
-
-export const ResourcesActive: Story = {
-  args: {
-    activeTab: "Resources",
-    children: (
-      <ResourcesScreen
-        resources={[
-          {
-            name: "config.json",
-            uri: "file:///config.json",
-            annotations: { audience: ["user"], priority: 0.8 },
-          },
-          { name: "README.md", uri: "file:///README.md" },
-          {
-            name: "schema.sql",
-            uri: "file:///schema.sql",
-            annotations: { priority: 0.5 },
-          },
-          { name: "package.json", uri: "file:///package.json" },
-          { name: ".env.example", uri: "file:///.env.example" },
-          {
-            name: "docker-compose.yml",
-            uri: "file:///docker-compose.yml",
-            annotations: { priority: 0.6 },
-          },
-          {
-            name: "migrations/001_init.sql",
-            uri: "file:///migrations/001_init.sql",
-          },
-          {
-            name: "logs/error.log",
-            uri: "file:///logs/error.log",
-            annotations: { priority: 0.7 },
-          },
-          { name: "api-spec.yaml", uri: "file:///api-spec.yaml" },
-          { name: "Makefile", uri: "file:///Makefile" },
-        ]}
-        templates={[
-          {
-            name: "User Profile",
-            uriTemplate: "file:///users/{userId}/profile",
-            description: "Fetch a user profile by their unique identifier.",
-          },
-          {
-            name: "Table Row",
-            title: "Database Table Row",
-            uriTemplate: "db://tables/{tableName}/rows/{rowId}",
-          },
-          {
-            name: "Log File",
-            title: "Application Log",
-            uriTemplate: "file:///logs/{service}/{date}.log",
-          },
-        ]}
-        subscriptions={[
-          {
-            resource: { name: "config.json", uri: "file:///config.json" },
-            lastUpdated: new Date("2026-03-17T10:30:00Z"),
-          },
-          {
-            resource: { name: "schema.sql", uri: "file:///schema.sql" },
-            lastUpdated: new Date("2026-03-17T10:28:00Z"),
-          },
-        ]}
-        selectedTemplateUri="file:///users/{userId}/profile"
-        selectedResourceUri="file:///users/42/profile"
-        readState={{
-          status: "ok",
-          uri: "file:///users/42/profile",
-          result: {
-            contents: [
-              {
-                uri: "file:///users/42/profile",
-                mimeType: "application/json",
-                text: JSON.stringify(
-                  { id: 42, name: "Alice", email: "alice@example.com" },
-                  null,
-                  2,
-                ),
-              },
-            ],
-          },
-          lastUpdated: new Date("2026-03-17T11:15:00Z"),
-          isSubscribed: false,
-        }}
-        listChanged={true}
-        onRefreshList={fn()}
-        onSelectUri={fn()}
-        onSelectTemplate={fn()}
-        onReadResource={fn()}
-        onSubscribeResource={fn()}
-        onUnsubscribeResource={fn()}
-      />
-    ),
-  },
-};
-
-export const PromptsActive: Story = {
-  args: {
-    activeTab: "Prompts",
-    children: (
-      <PromptsScreen
-        prompts={[
-          {
-            name: "summarize",
-            description: "Summarize a document",
-          },
-          {
-            name: "translate",
-            description: "Translate text to another language",
-            arguments: [
-              {
-                name: "text",
-                required: true,
-                description: "The text to translate",
-              },
-              {
-                name: "targetLanguage",
-                required: true,
-                description: "Target language code",
-              },
-            ],
-          },
-          {
-            name: "code-review",
-            description: "Review code for issues",
-          },
-        ]}
-        selectedPromptName="translate"
-        getPromptState={{
-          status: "ok",
-          result: {
-            messages: [
-              {
-                role: "user",
-                content: {
-                  type: "text",
-                  text: 'Translate the following text to Spanish: "Hello, how are you?"',
-                },
-              },
-              {
-                role: "assistant",
-                content: { type: "text", text: "Hola, como estas?" },
-              },
-            ],
-          },
-        }}
-        listChanged={true}
-        onRefreshList={fn()}
-        onSelectPrompt={fn()}
-        onGetPrompt={fn()}
-        onCopyMessages={fn()}
-      />
-    ),
-  },
-};
-
-export const LoggingActive: Story = {
-  args: {
-    activeTab: "Logs",
-    children: (
-      <LoggingScreen
-        currentLevel="info"
-        onSetLevel={fn()}
-        onClear={fn()}
-        onExport={fn()}
-        entries={sampleLogEntries}
-        autoScroll={true}
-        onToggleAutoScroll={fn()}
-        onCopyAll={fn()}
-      />
-    ),
-  },
-};
-
-export const TasksActive: Story = {
-  args: {
-    activeTab: "Tasks",
-    children: (
-      <TasksScreen
-        tasks={[
-          {
-            taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
-            status: "working",
-            ttl: 300000,
-            createdAt: "2026-03-29T20:18:20Z",
-            lastUpdatedAt: "2026-03-29T20:18:22Z",
-            statusMessage: "Processing records 650 of 1000...",
-          },
-          {
-            taskId: "4100b5e0b0ed9cd0023330342d1bf647",
-            status: "input_required",
-            ttl: 300000,
-            createdAt: "2026-03-29T20:17:55Z",
-            lastUpdatedAt: "2026-03-29T20:17:55Z",
-          },
-          {
-            taskId: "d487b49aa39023d907b5a2a5b506cb3",
-            status: "completed",
-            ttl: 300000,
-            createdAt: "2026-03-29T20:16:47Z",
-            lastUpdatedAt: "2026-03-29T20:16:49Z",
-          },
-          {
-            taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
-            status: "failed",
-            ttl: 300000,
-            createdAt: "2026-03-29T20:17:27Z",
-            lastUpdatedAt: "2026-03-29T20:17:57Z",
-            statusMessage: "Timeout waiting for tool response after 30s",
-          },
-        ]}
-        progressByTaskId={{
-          d0b22eba71fa36229ce5c4dfadeaa7de: {
-            progress: 650,
-            total: 1000,
-            message: "Processing records 650 of 1000...",
-          },
-        }}
-        onRefresh={fn()}
-        onClearCompleted={fn()}
-        onCancel={fn()}
-      />
-    ),
-  },
-};
-
-export const HistoryActive: Story = {
-  args: {
-    activeTab: "History",
-    children: (
-      <HistoryScreen
-        entries={[
-          {
-            id: "req-1",
-            timestamp: new Date("2026-03-17T10:00:00Z"),
-            direction: "request" as const,
-            message: {
-              jsonrpc: "2.0" as const,
-              id: 1,
-              method: "tools/call",
-              params: {
-                name: "send_message",
-                arguments: { message: "Hello, world!" },
-              },
-            },
-            response: {
-              jsonrpc: "2.0" as const,
-              id: 1,
-              result: {
-                content: [{ type: "text", text: "Message sent successfully" }],
-              },
-            },
-            duration: 120,
-          },
-          {
-            id: "req-2",
-            timestamp: new Date("2026-03-17T10:01:00Z"),
-            direction: "request" as const,
-            message: {
-              jsonrpc: "2.0" as const,
-              id: 2,
-              method: "resources/read",
-              params: { uri: "file:///config.json" },
-            },
-            response: {
-              jsonrpc: "2.0" as const,
-              id: 2,
-              result: {
-                contents: [{ uri: "file:///config.json", text: "{}" }],
-              },
-            },
-            duration: 45,
-          },
-          {
-            id: "req-3",
-            timestamp: new Date("2026-03-17T10:02:00Z"),
-            direction: "request" as const,
-            message: {
-              jsonrpc: "2.0" as const,
-              id: 3,
-              method: "tools/call",
-              params: { name: "delete_records", arguments: { ids: [1, 2, 3] } },
-            },
-            response: {
-              jsonrpc: "2.0" as const,
-              id: 3,
-              error: { code: -32000, message: "Permission denied" },
-            },
-            duration: 350,
-          },
-          {
-            id: "req-4",
-            timestamp: new Date("2026-03-17T09:30:00Z"),
-            direction: "request" as const,
-            message: { jsonrpc: "2.0" as const, id: 4, method: "tools/list" },
-            response: { jsonrpc: "2.0" as const, id: 4, result: { tools: [] } },
-            duration: 80,
-          },
-          {
-            id: "req-5",
-            timestamp: new Date("2026-03-17T09:35:00Z"),
-            direction: "request" as const,
-            message: {
-              jsonrpc: "2.0" as const,
-              id: 5,
-              method: "prompts/get",
-              params: { name: "greeting" },
-            },
-            response: {
-              jsonrpc: "2.0" as const,
-              id: 5,
-              result: {
-                messages: [
-                  { role: "user", content: { type: "text", text: "Hello!" } },
-                ],
-              },
-            },
-            duration: 60,
-          },
-        ]}
-        pinnedIds={new Set(["req-4", "req-5"])}
-        onClearAll={fn()}
-        onExport={fn()}
-        onReplay={fn()}
-        onTogglePin={fn()}
-      />
-    ),
-  },
-};
-
-export const LimitedTabs: Story = {
-  args: {
-    availableTabs: ["Tools", "Resources", "Prompts"],
-    children: <Text>Tools screen content</Text>,
-  },
-};
-
-export const LongServerName: Story = {
-  args: {
-    serverName: "my-very-long-server-name-that-might-overflow-is",
-    children: <Text>Tools screen content</Text>,
-  },
-};
diff --git a/clients/web/src/components/views/ConnectedView/ConnectedView.tsx b/clients/web/src/components/views/ConnectedView/ConnectedView.tsx
deleted file mode 100644
index 22983444..00000000
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { ReactNode } from "react";
-import { AppShell } from "@mantine/core";
-import { ViewHeader } from "../../groups/ViewHeader/ViewHeader";
-
-export interface ConnectedLayoutProps {
-  serverName: string;
-  status: "connected" | "connecting" | "error";
-  latencyMs?: number;
-  activeTab: string;
-  availableTabs: string[];
-  onTabChange: (tab: string) => void;
-  onDisconnect: () => void;
-  onToggleTheme: () => void;
-  children: ReactNode;
-}
-
-export function ConnectedView({
-  serverName,
-  status,
-  latencyMs,
-  activeTab,
-  availableTabs,
-  onTabChange,
-  onDisconnect,
-  onToggleTheme,
-  children,
-}: ConnectedLayoutProps) {
-  return (
-    <AppShell header={{ height: 60 }} padding="md">
-      <AppShell.Header>
-        <ViewHeader
-          connected
-          serverName={serverName}
-          status={status}
-          latencyMs={latencyMs}
-          activeTab={activeTab}
-          availableTabs={availableTabs}
-          onTabChange={onTabChange}
-          onDisconnect={onDisconnect}
-          onToggleTheme={onToggleTheme}
-        />
-      </AppShell.Header>
-      <AppShell.Main>{children}</AppShell.Main>
-    </AppShell>
-  );
-}
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
new file mode 100644
index 00000000..3c070674
--- /dev/null
+++ b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
@@ -0,0 +1,246 @@
+import type {
+  Prompt,
+  Resource,
+  ResourceTemplate,
+  Task,
+  Tool,
+} from "@modelcontextprotocol/sdk/types.js";
+import type {
+  InspectorResourceSubscription,
+  MessageEntry,
+} from "@inspector/core/mcp/types.js";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { InspectorView } from "./InspectorView";
+import type { ServerEntry } from "../../screens/ServerListScreen/ServerListScreen";
+import { mixedEntries as demoLogs } from "../../screens/LoggingScreen/LoggingScreen.fixtures";
+import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
+
+const demoServers: ServerEntry[] = [
+  {
+    id: "5e8c3d1f-2a4b-4c6d-8e7f-1a2b3c4d5e6f",
+    name: "Local Dev Server",
+    config: {
+      command:
+        "npx -y @modelcontextprotocol/server-filesystem /home/user/projects",
+    },
+    info: { name: "Local Dev Server", version: "1.2.0" },
+    connection: { status: "disconnected" },
+  },
+  {
+    id: "b3a7c1d2-9f8e-4a5b-bc6d-7e8f9a0b1c2d",
+    name: "Legacy Events Server",
+    config: { type: "sse", url: "https://legacy-events.example.com/mcp" },
+    info: { name: "Legacy Events Server", version: "0.9.1" },
+    connection: { status: "disconnected" },
+  },
+  {
+    id: "c4d5e6f7-8a9b-4c0d-9e1f-2a3b4c5d6e7f",
+    name: "Remote API Server",
+    config: { type: "streamable-http", url: "https://api.example.com/mcp" },
+    info: { name: "Remote API Server", version: "2.0.0" },
+    connection: { status: "disconnected" },
+  },
+];
+
+const demoTools: Tool[] = [
+  {
+    name: "send_message",
+    title: "Send Message",
+    inputSchema: { type: "object" },
+  },
+  {
+    name: "create_record",
+    title: "Create Record",
+    description: "Creates a new record with the given parameters",
+    inputSchema: {
+      type: "object",
+      properties: {
+        title: { type: "string", description: "Record title" },
+        count: { type: "number", description: "Number of items" },
+        enabled: {
+          type: "boolean",
+          description: "Whether the record is active",
+        },
+      },
+      required: ["title"],
+    },
+  },
+  { name: "delete_records", inputSchema: { type: "object" } },
+  { name: "list_users", inputSchema: { type: "object" } },
+];
+
+const demoPrompts: Prompt[] = [
+  {
+    name: "summarize",
+    description: "Summarize the given text into key points",
+  },
+  {
+    name: "translate",
+    description: "Translate text from one language to another",
+    arguments: [
+      { name: "text", required: true, description: "The text to translate" },
+      {
+        name: "targetLanguage",
+        required: true,
+        description: "Target language code",
+      },
+    ],
+  },
+  { name: "code-review", description: "Review code for issues" },
+  { name: "refactor" },
+];
+
+const demoResources: Resource[] = [
+  {
+    name: "config.json",
+    uri: "file:///config.json",
+    annotations: { audience: ["user"], priority: 0.8 },
+  },
+  { name: "README.md", uri: "file:///README.md" },
+  {
+    name: "schema.sql",
+    uri: "file:///schema.sql",
+    annotations: { priority: 0.5 },
+  },
+  { name: "package.json", uri: "file:///package.json" },
+];
+
+const demoResourceTemplates: ResourceTemplate[] = [
+  { name: "User Profile", uriTemplate: "file:///users/{userId}/profile" },
+  {
+    name: "Table Row",
+    title: "Database Table Row",
+    uriTemplate: "db://tables/{tableName}/rows/{rowId}",
+  },
+];
+
+const demoSubscriptions: InspectorResourceSubscription[] = [
+  {
+    resource: { name: "config.json", uri: "file:///config.json" },
+    lastUpdated: new Date("2026-03-17T10:30:00Z"),
+  },
+];
+
+const demoTasks: Task[] = [
+  {
+    taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
+    status: "working",
+    ttl: 300000,
+    createdAt: "2026-03-29T20:18:20Z",
+    lastUpdatedAt: "2026-03-29T20:18:22Z",
+    statusMessage: "Processing records 650 of 1000...",
+  },
+  {
+    taskId: "d487b49aa39023d907b5a2a5b506cb3",
+    status: "completed",
+    ttl: 300000,
+    createdAt: "2026-03-29T20:16:47Z",
+    lastUpdatedAt: "2026-03-29T20:16:49Z",
+  },
+  {
+    taskId: "e6ebffd9cca84ddd1646d3c579a4d453",
+    status: "failed",
+    ttl: 300000,
+    createdAt: "2026-03-29T20:17:27Z",
+    lastUpdatedAt: "2026-03-29T20:17:57Z",
+    statusMessage: "Timeout waiting for tool response after 30s",
+  },
+];
+
+const demoProgressByTaskId: Record<string, TaskProgress> = {
+  d0b22eba71fa36229ce5c4dfadeaa7de: {
+    progress: 650,
+    total: 1000,
+    message: "Processing records 650 of 1000...",
+  },
+};
+
+const demoHistory: MessageEntry[] = [
+  {
+    id: "req-1",
+    timestamp: new Date("2026-03-17T10:00:00Z"),
+    direction: "request",
+    message: {
+      jsonrpc: "2.0",
+      id: 1,
+      method: "tools/call",
+      params: {
+        name: "send_message",
+        arguments: { message: "Hello, world!" },
+      },
+    },
+    response: {
+      jsonrpc: "2.0",
+      id: 1,
+      result: {
+        content: [{ type: "text", text: "Message sent successfully" }],
+      },
+    },
+    duration: 120,
+  },
+  {
+    id: "req-2",
+    timestamp: new Date("2026-03-17T10:01:00Z"),
+    direction: "request",
+    message: {
+      jsonrpc: "2.0",
+      id: 2,
+      method: "resources/read",
+      params: { uri: "file:///config.json" },
+    },
+    response: {
+      jsonrpc: "2.0",
+      id: 2,
+      result: { contents: [{ uri: "file:///config.json", text: "{}" }] },
+    },
+    duration: 45,
+  },
+  {
+    id: "req-3",
+    timestamp: new Date("2026-03-17T10:02:00Z"),
+    direction: "request",
+    message: {
+      jsonrpc: "2.0",
+      id: 3,
+      method: "tools/call",
+      params: { name: "delete_records", arguments: { ids: [1, 2, 3] } },
+    },
+    response: {
+      jsonrpc: "2.0",
+      id: 3,
+      error: { code: -32000, message: "Permission denied" },
+    },
+    duration: 350,
+  },
+];
+
+const meta: Meta<typeof InspectorView> = {
+  title: "Views/InspectorView",
+  component: InspectorView,
+  parameters: { layout: "fullscreen" },
+  args: {
+    onToggleTheme: fn(),
+    servers: demoServers,
+    tools: demoTools,
+    prompts: demoPrompts,
+    resources: demoResources,
+    resourceTemplates: demoResourceTemplates,
+    subscriptions: demoSubscriptions,
+    logs: demoLogs,
+    tasks: demoTasks,
+    progressByTaskId: demoProgressByTaskId,
+    history: demoHistory,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof InspectorView>;
+
+export const Default: Story = {};
+
+export const NoServers: Story = {
+  args: {
+    servers: [],
+  },
+};
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
new file mode 100644
index 00000000..a15881c1
--- /dev/null
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -0,0 +1,354 @@
+import { useMemo, useRef, useState, type ReactNode } from "react";
+import { AppShell, Box, Stack, Transition } from "@mantine/core";
+import type {
+  InitializeResult,
+  LoggingLevel,
+  Prompt,
+  Resource,
+  ResourceTemplate,
+  Task,
+  Tool,
+} from "@modelcontextprotocol/sdk/types.js";
+import type {
+  ConnectionStatus,
+  InspectorResourceSubscription,
+  MessageEntry,
+} from "@inspector/core/mcp/types.js";
+import { ViewHeader } from "../../groups/ViewHeader/ViewHeader";
+import {
+  ServerListScreen,
+  type ServerEntry,
+} from "../../screens/ServerListScreen/ServerListScreen";
+import { ToolsScreen } from "../../screens/ToolsScreen/ToolsScreen";
+import { PromptsScreen } from "../../screens/PromptsScreen/PromptsScreen";
+import { ResourcesScreen } from "../../screens/ResourcesScreen/ResourcesScreen";
+import { LoggingScreen } from "../../screens/LoggingScreen/LoggingScreen";
+import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
+import { TasksScreen } from "../../screens/TasksScreen/TasksScreen";
+import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
+import { HistoryScreen } from "../../screens/HistoryScreen/HistoryScreen";
+
+const SERVERS_TAB = "Servers";
+
+const ALL_TABS: string[] = [
+  SERVERS_TAB,
+  "Tools",
+  "Prompts",
+  "Resources",
+  "Tasks",
+  "Logs",
+  "History",
+];
+
+const SCREEN_ENTER_MS = 350;
+const SCREEN_EXIT_MS = 250;
+
+// Relative-positioned wrapper for the absolutely-positioned `ScreenStage`
+// children. `mih: "100%"` requires `AppShell.Main` to provide a definite
+// height for the stack itself to fill — the absolute children render
+// regardless, but nested ScrollArea screens need a non-collapsing parent
+// for their scroll containment to work. Revisit if Phase 3 reveals
+// scroll issues in real screens.
+const ScreenStageContainer = Stack.withProps({
+  pos: "relative",
+  gap: 0,
+  flex: 1,
+  mih: "100%",
+});
+
+// Wraps each screen in a Mantine Transition. With Transition's default
+// (`keepMounted={false}`), the outgoing screen unmounts after its exit
+// animation — any local screen state (search filters, scroll position,
+// expanded sections) is reset on tab switch. This matches the previous
+// `{activeTab === "X" && <Screen />}` behavior. If Phase 3 needs state
+// to persist across tab switches, add `keepMounted` to the Transition
+// below.
+function ScreenStage({
+  active,
+  children,
+}: {
+  active: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <Transition
+      mounted={active}
+      transition="fade-up"
+      duration={SCREEN_ENTER_MS}
+      exitDuration={SCREEN_EXIT_MS}
+      timingFunction="ease"
+    >
+      {(styles) => (
+        // `style={styles}` is the runtime transition state from Mantine's
+        // Transition API — these are interpolated values, not static styling.
+        <Box style={styles} pos="absolute" top={0} left={0} right={0}>
+          {children}
+        </Box>
+      )}
+    </Transition>
+  );
+}
+
+// Demo stub: every screen-action callback below resolves to noop. Phase 3
+// wiring will replace each with its real `useManaged*` / `useConnection`
+// hook call. Anything still pointing here in Phase 3 is unfinished.
+const noop = () => undefined;
+
+// Demo stub: simulated handshake delays and a sample of plausible failure
+// reasons. Replace with real handshake telemetry once `useConnection` is wired.
+const STUB_MIN_DELAY_MS = 50;
+const STUB_MAX_DELAY_MS = 500;
+const STUB_SUCCESS_RATE = 0.85;
+const STUB_ERROR_MESSAGES = [
+  "Connection refused",
+  "Handshake timeout",
+  "Protocol version mismatch",
+  "Authentication required",
+  "Server returned invalid response",
+];
+
+export interface InspectorViewProps {
+  servers: ServerEntry[];
+  tools: Tool[];
+  prompts: Prompt[];
+  resources: Resource[];
+  resourceTemplates: ResourceTemplate[];
+  subscriptions: InspectorResourceSubscription[];
+  logs: LogEntryData[];
+  tasks: Task[];
+  progressByTaskId?: Record<string, TaskProgress>;
+  history: MessageEntry[];
+  onToggleTheme: () => void;
+}
+
+export function InspectorView({
+  servers: serversInput,
+  tools,
+  prompts,
+  resources,
+  resourceTemplates,
+  subscriptions,
+  logs,
+  tasks,
+  progressByTaskId,
+  history,
+  onToggleTheme,
+}: InspectorViewProps) {
+  const [activeServer, setActiveServer] = useState<string | undefined>(
+    undefined,
+  );
+  const [initializeResult, setInitializeResult] = useState<
+    InitializeResult | undefined
+  >(undefined);
+  const [connectionStatus, setConnectionStatus] =
+    useState<ConnectionStatus>("disconnected");
+  const [latencyMs, setLatencyMs] = useState<number | undefined>(undefined);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined,
+  );
+  const [activeTab, setActiveTab] = useState<string>(SERVERS_TAB);
+  const [availableTabs, setAvailableTabs] = useState<string[]>([SERVERS_TAB]);
+  const [logLevel, setLogLevel] = useState<LoggingLevel>("info");
+  const [autoScroll, setAutoScroll] = useState<boolean>(true);
+  // Tracks the in-flight stub handshake timer so rapid Connect→Connect
+  // toggles can cancel the previous attempt before it resolves and
+  // overwrites the new server's state.
+  const handshakeTimer = useRef<number | undefined>(undefined);
+
+  // The view is the single source of truth for connection state. Any
+  // `connection` field on incoming `serversInput` items is intentionally
+  // ignored — cards mirror the global `connectionStatus` for the active
+  // server and render as `disconnected` otherwise.
+  const servers = useMemo<ServerEntry[]>(
+    () =>
+      serversInput.map((s) => {
+        if (s.id !== activeServer) {
+          return { ...s, connection: { status: "disconnected" } };
+        }
+        if (connectionStatus === "error" && errorMessage) {
+          return {
+            ...s,
+            connection: {
+              status: "error",
+              error: { message: errorMessage },
+            },
+          };
+        }
+        return { ...s, connection: { status: connectionStatus } };
+      }),
+    [serversInput, activeServer, connectionStatus, errorMessage],
+  );
+
+  function disconnect() {
+    if (handshakeTimer.current !== undefined) {
+      window.clearTimeout(handshakeTimer.current);
+      handshakeTimer.current = undefined;
+    }
+    setActiveServer(undefined);
+    setConnectionStatus("disconnected");
+    setInitializeResult(undefined);
+    setLatencyMs(undefined);
+    setErrorMessage(undefined);
+    setAvailableTabs([SERVERS_TAB]);
+    setActiveTab(SERVERS_TAB);
+  }
+
+  // Demo stub: simulates the full connect → connecting → connected/error
+  // transition with a randomized handshake delay. Real wiring will dispatch
+  // `useConnection.connect(id)` and let the hook drive these state changes.
+  // The `protocolVersion`, `capabilities`, and `serverInfo` populated below
+  // are placeholders until a real `InitializeResult` arrives from the server.
+  function handleToggleConnection(id: string) {
+    if (id === activeServer && connectionStatus === "connected") {
+      disconnect();
+      return;
+    }
+    const target = serversInput.find((s) => s.id === id);
+    if (!target) return;
+
+    // Cancel any in-flight handshake so a rapid switch to a different
+    // server doesn't get overwritten by the previous server's resolver.
+    if (handshakeTimer.current !== undefined) {
+      window.clearTimeout(handshakeTimer.current);
+    }
+
+    // Capture `start` at the "connecting" edge and compute observed
+    // latency at the "connected" edge. Both edges are owned by this
+    // handler so the timing is deterministic — no useEffect chain needed
+    // (which would otherwise trip `react-hooks/set-state-in-effect`).
+    const start = Date.now();
+    setActiveServer(id);
+    setLatencyMs(undefined);
+    setErrorMessage(undefined);
+    setConnectionStatus("connecting");
+
+    const delay =
+      STUB_MIN_DELAY_MS +
+      Math.floor(Math.random() * (STUB_MAX_DELAY_MS - STUB_MIN_DELAY_MS + 1));
+
+    handshakeTimer.current = window.setTimeout(() => {
+      handshakeTimer.current = undefined;
+      if (Math.random() < STUB_SUCCESS_RATE) {
+        setInitializeResult({
+          protocolVersion: "2025-06-18",
+          capabilities: {},
+          serverInfo: target.info ?? { name: target.name, version: "0.0.0" },
+        });
+        setAvailableTabs(ALL_TABS);
+        setLatencyMs(Date.now() - start);
+        setConnectionStatus("connected");
+      } else {
+        setErrorMessage(
+          STUB_ERROR_MESSAGES[
+            Math.floor(Math.random() * STUB_ERROR_MESSAGES.length)
+          ],
+        );
+        setConnectionStatus("error");
+      }
+    }, delay);
+  }
+
+  return (
+    <AppShell header={{ height: 60 }} padding="md">
+      <AppShell.Header>
+        {connectionStatus === "connected" && initializeResult ? (
+          <ViewHeader
+            connected
+            serverInfo={initializeResult.serverInfo}
+            status={connectionStatus}
+            latencyMs={latencyMs}
+            activeTab={activeTab}
+            availableTabs={availableTabs}
+            onTabChange={setActiveTab}
+            onDisconnect={disconnect}
+            onToggleTheme={onToggleTheme}
+          />
+        ) : (
+          <ViewHeader connected={false} onToggleTheme={onToggleTheme} />
+        )}
+      </AppShell.Header>
+      <AppShell.Main>
+        <ScreenStageContainer>
+          <ScreenStage active={activeTab === SERVERS_TAB}>
+            <ServerListScreen
+              servers={servers}
+              activeServer={activeServer}
+              onAddManually={noop}
+              onImportConfig={noop}
+              onImportServerJson={noop}
+              onToggleConnection={handleToggleConnection}
+              onServerInfo={noop}
+              onSettings={noop}
+              onEdit={noop}
+              onClone={noop}
+              onRemove={noop}
+            />
+          </ScreenStage>
+          <ScreenStage active={activeTab === "Tools"}>
+            <ToolsScreen
+              tools={tools}
+              listChanged={false}
+              onRefreshList={noop}
+              onSelectTool={noop}
+              onCallTool={noop}
+            />
+          </ScreenStage>
+          <ScreenStage active={activeTab === "Prompts"}>
+            <PromptsScreen
+              prompts={prompts}
+              listChanged={false}
+              onRefreshList={noop}
+              onSelectPrompt={noop}
+              onGetPrompt={noop}
+            />
+          </ScreenStage>
+          <ScreenStage active={activeTab === "Resources"}>
+            <ResourcesScreen
+              resources={resources}
+              templates={resourceTemplates}
+              subscriptions={subscriptions}
+              listChanged={false}
+              onRefreshList={noop}
+              onSelectUri={noop}
+              onSelectTemplate={noop}
+              onReadResource={noop}
+              onSubscribeResource={noop}
+              onUnsubscribeResource={noop}
+            />
+          </ScreenStage>
+          <ScreenStage active={activeTab === "Tasks"}>
+            <TasksScreen
+              tasks={tasks}
+              progressByTaskId={progressByTaskId}
+              onRefresh={noop}
+              onClearCompleted={noop}
+              onCancel={noop}
+            />
+          </ScreenStage>
+          <ScreenStage active={activeTab === "Logs"}>
+            <LoggingScreen
+              entries={logs}
+              currentLevel={logLevel}
+              onSetLevel={setLogLevel}
+              onClear={noop}
+              onExport={noop}
+              autoScroll={autoScroll}
+              onToggleAutoScroll={() => setAutoScroll((prev) => !prev)}
+              onCopyAll={noop}
+            />
+          </ScreenStage>
+          <ScreenStage active={activeTab === "History"}>
+            <HistoryScreen
+              entries={history}
+              pinnedIds={new Set()}
+              onClearAll={noop}
+              onExport={noop}
+              onReplay={noop}
+              onTogglePin={noop}
+            />
+          </ScreenStage>
+        </ScreenStageContainer>
+      </AppShell.Main>
+    </AppShell>
+  );
+}
diff --git a/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx b/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
deleted file mode 100644
index 511fc148..00000000
--- a/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
+++ /dev/null
@@ -1,326 +0,0 @@
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Box, CloseButton, Group, Modal, Title } from "@mantine/core";
-import { fn } from "storybook/test";
-import { UnconnectedView } from "./UnconnectedView.js";
-import { ServerListScreen } from "../../screens/ServerListScreen/ServerListScreen";
-import {
-  ServerSettingsForm,
-  type ServerSettingsSection,
-} from "../../groups/ServerSettingsForm/ServerSettingsForm";
-
-const ALL_SETTINGS_SECTIONS: ServerSettingsSection[] = [
-  "connectionMode",
-  "headers",
-  "metadata",
-  "timeouts",
-  "oauth",
-];
-import { ListToggle } from "../../elements/ListToggle/ListToggle";
-import type { ServerCardProps } from "../../groups/ServerCard/ServerCard";
-
-const meta: Meta<typeof UnconnectedView> = {
-  title: "Views/UnconnectedView",
-  component: UnconnectedView,
-  parameters: { layout: "fullscreen" },
-  args: {
-    onToggleTheme: fn(),
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof UnconnectedView>;
-
-function makeServerCallbacks(): Pick<
-  ServerCardProps,
-  | "onToggleConnection"
-  | "onServerInfo"
-  | "onSettings"
-  | "onEdit"
-  | "onClone"
-  | "onRemove"
-> {
-  return {
-    onToggleConnection: fn(),
-    onServerInfo: fn(),
-    onSettings: fn(),
-    onEdit: fn(),
-    onClone: fn(),
-    onRemove: fn(),
-  };
-}
-
-export const Empty: Story = {
-  args: {
-    children: (
-      <ServerListScreen
-        servers={[]}
-        onAddManually={fn()}
-        onImportConfig={fn()}
-        onImportServerJson={fn()}
-      />
-    ),
-  },
-};
-
-export const WithServers: Story = {
-  args: {
-    children: (
-      <ServerListScreen
-        servers={[
-          {
-            name: "everything-server",
-            version: "1.0.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-everything",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "filesystem-server",
-            version: "0.6.2",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command:
-              "npx -y @modelcontextprotocol/server-filesystem /home/user",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "remote-server",
-            version: "2.1.0",
-            transport: "streamable-http",
-            connectionMode: "Direct",
-            command: "https://api.example.com/mcp",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-        ]}
-        onAddManually={fn()}
-        onImportConfig={fn()}
-        onImportServerJson={fn()}
-      />
-    ),
-  },
-};
-
-function SettingsModalStory() {
-  const [expandedSections, setExpandedSections] = useState<
-    ServerSettingsSection[]
-  >(["connectionMode"]);
-  const allExpanded = expandedSections.length === ALL_SETTINGS_SECTIONS.length;
-  return (
-    <UnconnectedView onToggleTheme={fn()}>
-      <ServerListScreen
-        servers={[
-          {
-            name: "everything-server",
-            version: "1.0.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-everything",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-        ]}
-        onAddManually={fn()}
-        onImportConfig={fn()}
-        onImportServerJson={fn()}
-      />
-      <Modal
-        opened
-        onClose={fn()}
-        withCloseButton={false}
-        title={
-          <Group justify="space-between" wrap="nowrap" w="100%">
-            <ListToggle
-              compact={allExpanded}
-              variant="subtle"
-              onToggle={() =>
-                setExpandedSections(allExpanded ? [] : ALL_SETTINGS_SECTIONS)
-              }
-            />
-            <Title order={4} ta="center" style={{ flex: 1 }}>
-              Server Settings
-            </Title>
-            <Box>
-              <CloseButton onClick={fn()} />
-            </Box>
-          </Group>
-        }
-        size="lg"
-        centered
-        styles={{ title: { flex: 1 } }}
-      >
-        <ServerSettingsForm
-          connectionMode="proxy"
-          headers={[
-            { key: "Authorization", value: "Bearer token-abc-123" },
-            { key: "X-Request-Id", value: "req-456" },
-          ]}
-          metadata={[{ key: "userId", value: "user-789" }]}
-          connectionTimeout={30000}
-          requestTimeout={60000}
-          oauthClientId="my-client-id"
-          oauthClientSecret="super-secret-value"
-          oauthScopes="read write"
-          expandedSections={expandedSections}
-          onExpandedSectionsChange={setExpandedSections}
-          onConnectionModeChange={fn()}
-          onAddHeader={fn()}
-          onRemoveHeader={fn()}
-          onHeaderChange={fn()}
-          onAddMetadata={fn()}
-          onRemoveMetadata={fn()}
-          onMetadataChange={fn()}
-          onTimeoutChange={fn()}
-          onOAuthChange={fn()}
-        />
-      </Modal>
-    </UnconnectedView>
-  );
-}
-
-export const WithSettingsModal: Story = {
-  render: () => <SettingsModalStory />,
-};
-
-export const ManyServers: Story = {
-  args: {
-    children: (
-      <ServerListScreen
-        servers={[
-          {
-            name: "everything-server",
-            version: "1.0.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-everything",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "filesystem-server",
-            version: "0.6.2",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command:
-              "npx -y @modelcontextprotocol/server-filesystem /home/user",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "remote-api-server",
-            version: "2.1.0",
-            transport: "streamable-http",
-            connectionMode: "Direct",
-            command: "https://api.example.com/mcp",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "postgres-server",
-            version: "1.3.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-postgres",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "github-server",
-            version: "0.9.1",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-github",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "slack-server",
-            version: "1.1.0",
-            transport: "streamable-http",
-            connectionMode: "Direct",
-            command: "https://slack-mcp.example.com/mcp",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "memory-server",
-            version: "0.2.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-memory",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "puppeteer-server",
-            version: "1.0.3",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-puppeteer",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "sqlite-server",
-            version: "0.5.1",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-sqlite ./data.db",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "brave-search-server",
-            version: "1.2.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-brave-search",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "google-maps-server",
-            version: "0.8.0",
-            transport: "streamable-http",
-            connectionMode: "Direct",
-            command: "https://maps-mcp.example.com/mcp",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "sequential-thinking-server",
-            version: "1.4.2",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-sequential-thinking",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-        ]}
-        onAddManually={fn()}
-        onImportConfig={fn()}
-        onImportServerJson={fn()}
-      />
-    ),
-  },
-};
diff --git a/clients/web/src/components/views/UnconnectedView/UnconnectedView.tsx b/clients/web/src/components/views/UnconnectedView/UnconnectedView.tsx
deleted file mode 100644
index b95dfaea..00000000
--- a/clients/web/src/components/views/UnconnectedView/UnconnectedView.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ReactNode } from "react";
-import { AppShell } from "@mantine/core";
-import { ViewHeader } from "../../groups/ViewHeader/ViewHeader";
-
-export interface HomeLayoutProps {
-  children: ReactNode;
-  onToggleTheme: () => void;
-}
-
-export function UnconnectedView({ children, onToggleTheme }: HomeLayoutProps) {
-  return (
-    <AppShell header={{ height: 60 }} padding="md">
-      <AppShell.Header>
-        <ViewHeader connected={false} onToggleTheme={onToggleTheme} />
-      </AppShell.Header>
-      <AppShell.Main>{children}</AppShell.Main>
-    </AppShell>
-  );
-}
diff --git a/core/mcp/types.ts b/core/mcp/types.ts
index 0d058533..6709046b 100644
--- a/core/mcp/types.ts
+++ b/core/mcp/types.ts
@@ -60,6 +60,16 @@ export type ConnectionStatus =
   | "connected"
   | "error";
 
+/**
+ * Snapshot of a server's connection state, used by dumb components
+ * that display status, retry count, and error details.
+ */
+export interface ConnectionState {
+  status: ConnectionStatus;
+  retryCount?: number;
+  error?: { message: string; details?: string };
+}
+
 export interface StderrLogEntry {
   timestamp: Date;
   message: string;
@@ -173,6 +183,32 @@ export interface InspectorResourceSubscription {
   lastUpdated?: Date;
 }
 
+/**
+ * OAuth credentials surfaced by the settings form. The form callback
+ * passes this whole object so callers don't have to thread per-field
+ * dispatches through stringly-typed key arguments.
+ */
+export interface OAuthSettings {
+  clientId: string;
+  clientSecret: string;
+  scopes: string;
+}
+
+/**
+ * Runtime settings for a configured server. A subset of
+ * InspectorClientOptions (v1.5) relevant to the settings form:
+ * headers, metadata, timeouts, and OAuth credentials.
+ */
+export interface InspectorServerSettings {
+  headers: { key: string; value: string }[];
+  metadata: { key: string; value: string }[];
+  connectionTimeout: number;
+  requestTimeout: number;
+  oauthClientId?: string;
+  oauthClientSecret?: string;
+  oauthScopes?: string;
+}
+
 /**
  * Draft state for importing a server from registry JSON. Owned by the
  * ImportServerJsonPanel wiring layer. `parsed` is typed `unknown` until the
diff --git a/specification/v2_scope.md b/specification/v2_scope.md
index abdb3e4b..af7b3624 100644
--- a/specification/v2_scope.md
+++ b/specification/v2_scope.md
@@ -49,10 +49,6 @@
   * SSE  
   * SHTTP  
 
-## Connection Type
-  * Direct   
-  * Via Proxy  
-
 ## Logging Level Control
   * Present and synchronized when connecting to server with logging capability  
 
diff --git a/specification/v2_screenshots.md b/specification/v2_screenshots.md
index 0573c41a..1fc79545 100644
--- a/specification/v2_screenshots.md
+++ b/specification/v2_screenshots.md
@@ -81,11 +81,6 @@ Request history with replay and pin functionality.
 
 ## Client Feature Handlers
 
-### Test Client Features Dropdown
-Menu for testing client capabilities (Sampling, Elicitation, Roots).
-
-![Client Features Dropdown](screenshots/shadcn-clientfeatures-dropdown.png)
-
 ### Sampling Panel
 Handler for `sampling/createMessage` requests with mock response input.
 
diff --git a/specification/v2_ux_interfaces.md b/specification/v2_ux_interfaces.md
index e309f456..049379ab 100644
--- a/specification/v2_ux_interfaces.md
+++ b/specification/v2_ux_interfaces.md
@@ -128,9 +128,9 @@ For each component, the plan records:
 - **Purpose** — Large on/off switch that connects or disconnects a configured server.
 - **Current props** — `checked: boolean`; `loading: boolean`; `disabled: boolean`; `onChange: (checked: boolean) => void`.
 - **MCP schema touch points** — None — purely presentational, but `checked`/`loading` are derived from `ConnectionStatus` application state (not MCP schema).
-- **Target props** — `status: ConnectionStatus` (core-owned enum: `"disconnected" | "connecting" | "connected" | "failed"`); `disabled?: boolean`; `onConnect: () => void`; `onDisconnect: () => void`.
-- **Callbacks → core hook** — `onConnect`, `onDisconnect` → `useConnection` (v1.5 `useConnection` exposes `connect`/`disconnect`).
-- **Internal refactors** — Derive `checked`/`loading` from `status` internally; split the single `onChange` into explicit `onConnect`/`onDisconnect` so the wiring layer can pass hook callbacks directly without a boolean adapter.
+- **Target props** — `status: ConnectionStatus` (core-owned enum: `"disconnected" | "connecting" | "connected" | "error"`); `disabled?: boolean`; `onToggle: () => void`.
+- **Callbacks → core hook** — `onToggle` → wiring layer reads the current `connection.status` for the owning server and dispatches `useConnection`'s `connect` or `disconnect` (v1.5 `useConnection` exposes both).
+- **Internal refactors** — Derive `checked`/`loading` from `status` internally; collapse `onChange(boolean)` to a single `onToggle()` — the wiring layer already has the connection state and decides connect vs disconnect, so a boolean from the toggle adds no information.
 
 ### ContentViewer
 
@@ -238,9 +238,9 @@ For each component, the plan records:
 - **Purpose** — Toggle button to subscribe/unsubscribe from a single MCP resource.
 - **Current props** — `subscribed: boolean`; `onToggle: () => void`.
 - **MCP schema touch points** — `SubscribeRequest.params.uri` and `UnsubscribeRequest.params.uri` — but the URI is held by the parent row; the button itself only needs the current subscription boolean.
-- **Target props** — `subscribed: boolean`; `onSubscribe: () => void`; `onUnsubscribe: () => void` (split for parity with `ConnectionToggle`). Alternatively keep a single `onToggle` if the wiring layer prefers that.
-- **Callbacks → core hook** — `onSubscribe` / `onUnsubscribe` → `useInspectorClient` (wraps `client.subscribeResource` / `client.unsubscribeResource`); `subscribed` derived from a core-owned subscription set.
-- **Internal refactors** — Optional split of `onToggle` into the two explicit callbacks; otherwise none.
+- **Target props** — `subscribed: boolean`; `onToggle: () => void`. (`ConnectionToggle` settled on the same single-callback shape; the wiring layer reads `subscribed` and dispatches subscribe vs unsubscribe.)
+- **Callbacks → core hook** — `onToggle` → wiring layer dispatches `useInspectorClient`'s `client.subscribeResource` or `client.unsubscribeResource` based on the current `subscribed` value; `subscribed` derived from a core-owned subscription set.
+- **Internal refactors** — None.
 
 ### TaskStatusBadge
 
@@ -528,10 +528,10 @@ For each component, the plan records:
 
 - **Location**: `groups/ServerCard/`
 - **Purpose**: Card for a configured server with status, transport, connection toggle, actions, and test-client-features menu.
-- **Current props**: `name`, `version?`, `transport`, `connectionMode`, `command`, `status`, `retryCount?`, `error?`, `canTestClientFeatures`, `activeServer?`, many handlers.
-- **MCP schema touch points**: `Implementation` (server `name`, `version`) from `InitializeResult.serverInfo`. Transport/command/mode/status are Inspector-core-owned (connection lifecycle).
-- **Target props**: `config: InspectorServerConfig`, `info?: Implementation`, `connection: InspectorConnectionState` (`status`, `retryCount`, `error`), `canTestClientFeatures`, `activeServer?`, handlers unchanged.
-- **Callbacks → core hook**: `onToggleConnection`/`onSetActiveServer` from `useConnection`; `onEdit`/`onClone`/`onRemove` from `useServers`; test handlers from `useSampling`/`useElicitation`/`useRoots`.
+- **Current props**: `id`, `name`, `version?`, `transport`, `command`, `status`, `retryCount?`, `error?`, `activeServer?`, action handlers. (The grey transport descriptor next to the `TransportBadge` is derived from `config.type` — "Standard I/O", "SSE (Server Sent Events) [deprecated]", or "Streamable HTTP" — not a separate `connectionMode` prop. The "Test Client Features" dropdown was removed; sampling/elicitation/roots simulators live elsewhere.)
+- **MCP schema touch points**: `Implementation` (server `name`, `version`) from `InitializeResult.serverInfo`. Transport/command/status are Inspector-core-owned (connection lifecycle).
+- **Target props**: `id: string` (the `MCPConfig.mcpServers` map key), `name: string` (display label), `config: InspectorServerConfig`, `info?: Implementation`, `connection: InspectorConnectionState` (`status`, `retryCount`, `error`), `activeServer?` (read-only — set by the wiring layer), action handlers all keyed by `id`.
+- **Callbacks → core hook**: `onToggleConnection(id)` from `useConnection` — the wiring layer reads the current `connection.status` for that id and dispatches connect or disconnect (no separate `onSetActiveServer`; active state is owned by the wiring layer); `onEdit`/`onClone`/`onRemove` from `useServers`.
 - **Internal refactors**: Replace flat scalar props with grouped objects; **move the auto-connect `useEffect` out** — dumb components must not self-dispatch side effects.
 
 ### ServerInfoContent
@@ -557,8 +557,8 @@ For each component, the plan records:
 ### ServerSettingsForm
 
 - **Location**: `groups/ServerSettingsForm/`
-- **Purpose**: Per-server settings — connection mode, headers, metadata, timeouts, OAuth.
-- **Current props**: `connectionMode`, `headers`, `metadata`, `connectionTimeout`, `requestTimeout`, `oauthClient*`, many handlers.
+- **Purpose**: Per-server settings — headers, metadata, timeouts, OAuth. (The connection-mode "Via Proxy"/"Direct" toggle was removed; the inspector picks the right transport from `MCPServerConfig.type`.)
+- **Current props**: `headers`, `metadata`, `connectionTimeout`, `requestTimeout`, `oauthClient*`, many handlers.
 - **MCP schema touch points**: `Request._meta` passthrough is the only schema-level tie-in; the rest is Inspector-core-owned.
 - **Target props**: `settings: InspectorServerSettings`, `onSettingsChange(settings)` (or keep granular setters).
 - **Callbacks → core hook**: `useServers` (v2-only — no v1.5 analog).
@@ -761,13 +761,13 @@ themselves — every callback passed down must originate in a core hook.
 - **Current props**: `servers: ServerCardProps[]`, `onAddManually`, `onImportConfig`, `onImportServerJson`.
 - **MCP schema touch points**: `Implementation` (server `name`/`version`), `ServerCapabilities`, `InitializeResult` — identity and capability surface reported on initialize. Transport config (`command`, `args`, `env`, `url`, `headers`) is **not** MCP schema; it is Inspector core app state.
 - **Target props**:
-  - `servers: ServerEntry[]` where `ServerEntry = { id: string; config: ServerTransportConfig; connection: { status: 'disconnected' | 'connecting' | 'connected' | 'error'; error?: string; initializeResult?: InitializeResult } }`.
-  - `activeServerId?: string` — may be lifted to core if it drives routing; currently screen-local.
-  - `onAddManually`, `onImportConfig`, `onImportServerJson`, `onConnect(id)`, `onDisconnect(id)`, `onSetActiveServer(id)`, `onEditServer(id)`, `onRemoveServer(id)`.
+  - `servers: ServerEntry[]` where `ServerEntry = { id: string; name: string; config: ServerTransportConfig; connection: { status: 'disconnected' | 'connecting' | 'connected' | 'error'; error?: string; initializeResult?: InitializeResult } }`.
+  - `activeServer?: string` — pass-through from the wiring layer; drives card dimming. **Not** local screen state.
+  - `onAddManually`, `onImportConfig`, `onImportServerJson`, `onToggleConnection(id)`, `onEditServer(id)`, `onRemoveServer(id)` — the toggle is consolidated; the wiring layer reads current connection state for that id and decides whether to connect or disconnect.
 - **Callbacks → core hook**: `useServers` (v2-only — no v1.5 analog) owns the persisted config list; `useConnection` (v1.5, `core/react/useConnection.ts`) owns per-server transport lifecycle and exposes `connectionStatus`, `serverCapabilities`, `connect`, `disconnect`. `ServerListScreen` composes both via a parent view.
 - **Internal refactors**:
   - Stop flattening each server into a loose `ServerCardProps`; pass `ServerEntry` and let `ServerCard` read `config` / `connection` fields.
-  - `activeServer` state may migrate to `useServers` once it gates which screen renders; until then, keep `useState` local.
+  - `activeServer` is a prop, not local screen state — the wiring layer tracks which server is connected and passes the id down. `compact` toggle stays as local `useState`.
 
 <!-- /AGENT:SCREENS -->
 
@@ -775,69 +775,49 @@ themselves — every callback passed down must originate in a core hook.
 
 ## Section 4 — Views (`clients/web/src/components/views/`)
 
-> Outer shell components that decide which screen to render based on
-> connection state (`ConnectedView`, `UnconnectedView`). They receive the full
-> Inspector core context and route to the appropriate screen.
+> Outer shell component that holds inspector-level state (active server,
+> connection status, current tab) and renders the appropriate screen.
+> Receives all screen data via props so a single view can drive the whole
+> application.
 
 <!-- AGENT:VIEWS -->
-### ConnectedView
+### InspectorView
 
-- **Location**: `views/ConnectedView/ConnectedView.tsx`
-- **Purpose**: Outer `AppShell` wrapper shown once a server session is live; renders `ViewHeader` in connected mode and slots the active screen into the main region via `children`.
-- **Current props**:
-  - `serverName: string`
-  - `status: "connected" | "connecting" | "failed"`
-  - `latencyMs?: number`
-  - `activeTab: string`
+- **Location**: `views/InspectorView/InspectorView.tsx`
+- **Purpose**: Single state-machine view that owns inspector-level state, switches `ViewHeader` between connected and unconnected modes, and renders the active screen based on the current tab. Replaces the prior `ConnectedView` / `UnconnectedView` pair (which awkwardly took `children`).
+- **Internal state**:
+  - `activeServer: string | undefined`
+  - `connectionStatus: ConnectionStatus`
+  - `initializeResult: InitializeResult | undefined`
+  - `latencyMs: number | undefined`
+  - `activeTab: string` (defaults to `"Servers"`; expands to all tabs once a server is connected)
   - `availableTabs: string[]`
-  - `onTabChange: (tab: string) => void`
-  - `onDisconnect: () => void`
-  - `onToggleTheme: () => void`
-  - `children: ReactNode`
-- **MCP schema touch points**:
-  - `Implementation` (server identity → `serverName`) from `InitializeResult.serverInfo`.
-  - `ServerCapabilities` from `InitializeResult.capabilities` — drives which tabs are available (tools/prompts/resources/logging/completions).
-  - `InitializeResult` as a whole is the natural handshake object to accept instead of loose strings.
-- **Target props**:
-  - `serverInfo: Implementation`
-  - `capabilities: ServerCapabilities`
-  - `connectionStatus: "connected" | "connecting" | "failed"` (app state, owned by core)
-  - `latencyMs?: number` (app state)
-  - `activeTab: InspectorTab` (app state; enum derived from capabilities)
-  - `availableTabs: InspectorTab[]` (app state; derived from `capabilities`)
-  - `onTabChange: (tab: InspectorTab) => void`
-  - `onDisconnect: () => void`
-  - `onToggleTheme: () => void`
-  - `children: ReactNode`
-- **Callbacks → core hook**:
-  - `onDisconnect` → `useConnection` (disconnect action).
-  - `onTabChange` → local UI state in the wiring layer (not an MCP call); wiring-layer `useState` (no dedicated hook yet) or screen-level state.
-  - `onToggleTheme` → app-level theme store, not a core hook.
-  - `connectionStatus`, `latencyMs`, `serverInfo`, `capabilities` → `useConnection` / `useInspectorClient` / `useServerCapabilities`.
-- **Internal refactors**:
-  - Replace flat `serverName` with `serverInfo.name` lookup; forward full `serverInfo` to `ViewHeader` once that group is updated.
-  - Compute/validate `availableTabs` against `capabilities` rather than accepting an arbitrary string list; narrow `activeTab`/`availableTabs` to an `InspectorTab` union.
-  - No transport or fetching logic; remains a pure shell routing children.
-
-### UnconnectedView
-
-- **Location**: `views/UnconnectedView/UnconnectedView.tsx`
-- **Purpose**: Outer `AppShell` wrapper shown when no MCP session is active; renders `ViewHeader` in disconnected mode and slots the server-list / connect screen into the main region via `children`.
+  - `logLevel: LoggingLevel`
+  - `autoScroll: boolean`
 - **Current props**:
-  - `children: ReactNode`
+  - `servers: ServerEntry[]`
+  - `tools: Tool[]`
+  - `prompts: Prompt[]`
+  - `resources: Resource[]`
+  - `resourceTemplates: ResourceTemplate[]`
+  - `subscriptions: InspectorResourceSubscription[]`
+  - `logs: LogEntryData[]`
+  - `tasks: Task[]`
+  - `progressByTaskId?: Record<string, TaskProgress>`
+  - `history: MessageEntry[]`
   - `onToggleTheme: () => void`
 - **MCP schema touch points**:
-  - None directly — no handshake has occurred. The view is intentionally MCP-schema-free and only hosts the connect flow.
-- **Target props**:
-  - `children: ReactNode`
-  - `onToggleTheme: () => void`
-  - (Optional future) `connectionStatus: "disconnected" | "connecting" | "failed"` if the header needs to surface retry state in this shell.
+  - `Implementation` / `InitializeResult` — produced internally on connect and forwarded to `ViewHeader`.
+  - `ServerCapabilities` — will eventually drive `availableTabs` (currently the view exposes all tabs once connected; capability-gating is a follow-up).
+  - All screen-data types (`Tool`, `Prompt`, `Resource`, `ResourceTemplate`, `Task`, `LoggingLevel`) flow straight through to the relevant screen.
 - **Callbacks → core hook**:
+  - Connection toggle (per-card) → `useConnection` (connect / disconnect actions).
   - `onToggleTheme` → app-level theme store, not a core hook.
-  - Any connect action rendered inside `children` (e.g. from `ServerListScreen`) → `useConnection` (connect action), not owned by this view.
-- **Internal refactors**:
-  - None required today; keep the shell minimal and let the embedded `ServerListScreen` own all connect/form state.
-  - Rename internal `HomeLayoutProps` to `UnconnectedViewProps` for consistency with the component name when the refactor lands.
+  - Per-screen handlers (`onCallTool`, `onGetPrompt`, `onReadResource`, `onSetLevel`, `onCancel` …) currently stubbed as `noop`; the wiring layer will replace these with hook calls (`useManagedTools`, `useManagedPrompts`, `useManagedResources`, `useLogging`, `useTasks`, `useHistory`).
+- **Internal refactors / follow-ups**:
+  - Compute `availableTabs` from `initializeResult.capabilities` instead of always exposing all tabs.
+  - Narrow `activeTab` / `availableTabs` to an `InspectorTab` union.
+  - Once core hooks land, the view should accept the hook outputs directly rather than receive bare arrays via props (stories will continue to pass fixtures).
 <!-- /AGENT:VIEWS -->
 
 ---
diff --git a/specification/v2_ux_storybook.md b/specification/v2_ux_storybook.md
index a2c196bd..c1c2ae00 100644
--- a/specification/v2_ux_storybook.md
+++ b/specification/v2_ux_storybook.md
@@ -283,12 +283,10 @@ Server connection card with status, transport, command, and action buttons.
 | `name` | `string` | Server name |
 | `version` | `string?` | Server version |
 | `transport` | `'stdio' \| 'http'` | Transport type |
-| `connectionMode` | `string` | "Via Proxy" or "Direct" |
 | `command` | `string` | Command or URL |
 | `status` | `'connected' \| 'connecting' \| 'disconnected' \| 'failed'` | Connection state |
 | `retryCount` | `number?` | Failed retry count |
 | `error` | `{ message: string; details?: string }?` | Error info |
-| `canTestClientFeatures` | `boolean` | Show "Test Client Features" dropdown |
 | `onToggleConnection` | `(connect: boolean) => void` | Connect/disconnect |
 | `onCopyCommand` | `() => void` | Copy command |
 | `onServerInfo` | `() => void` | View server info |
@@ -296,14 +294,10 @@ Server connection card with status, transport, command, and action buttons.
 | `onEdit` | `() => void` | Edit server |
 | `onClone` | `() => void` | Clone server |
 | `onRemove` | `() => void` | Remove server |
-| `onTestSampling` | `() => void` | Test sampling |
-| `onTestElicitationForm` | `() => void` | Test elicitation (form) |
-| `onTestElicitationUrl` | `() => void` | Test elicitation (URL) |
-| `onConfigureRoots` | `() => void` | Configure roots |
 
-**Mantine:** `Card` with `Card.Section` dividers. Uses StatusIndicator, TransportBadge, ConnectionToggle, CopyButton, InlineError elements. `Menu` for "Test Client Features" dropdown.
+**Mantine:** `Card` with `Card.Section` dividers. Uses StatusIndicator, TransportBadge, ConnectionToggle, CopyButton, InlineError elements.
 
-**Stories:** Connected, Disconnected, Connecting, Failed, FailedWithError, WithClientFeatures, HttpDirect, LongCommand
+**Stories:** Connected, Disconnected, Connecting, Failed, FailedWithError, HttpDirect, LongCommand
 
 ---
 
@@ -679,11 +673,10 @@ Server metadata, capabilities, and instructions display (modal body content).
 
 ### 2.20 ServerSettingsForm
 
-Server settings form with connection mode, headers, metadata, timeouts, and OAuth.
+Server settings form with headers, metadata, timeouts, and OAuth.
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `connectionMode` | `'proxy' \| 'direct'` | Connection mode |
 | `headers` | `Array<{ key: string; value: string }>` | Custom headers |
 | `metadata` | `Array<{ key: string; value: string }>` | Request metadata |
 | `connectionTimeout` | `number` | Connection timeout ms |