Refactor ServerCard stack to use id-based callbacks

Distinguishes server `id` (the unique map key in MCPConfig.mcpServers)
from `name` (display label) so containers can dispatch by id without
relying on display strings. ServerCard, ConnectionToggle, ServerListScreen,
and supporting stories all updated.

- ServerCard: add `id` prop; all action callbacks now `(id: string) => void`
- ConnectionToggle: collapse `onConnect`/`onDisconnect` into single `onToggle`
- ServerListScreen: lift `activeServer` to a prop; combine `onSetActive` +
  `onToggleConnection` into a single `onToggleConnection(id)` callback
- Stories: use UUIDs for server ids so callbacks visibly carry ids, not names

Removes the "Direct"/"Via Proxy" connection mode concept, which is no
longer planned. ServerSettingsForm drops the section, ServerCard drops
the badge, InspectorServerSettings drops the field.

Removes the "Test Client Features" dropdown from ServerCard along with
its four handlers; that surface will live elsewhere.

TransportBadge now collapses `sse` and `streamable-http` into a single
"HTTP" label; ServerCard adds a grey transport descriptor next to the
badge ("Standard I/O", "SSE (Server Sent Events) [deprecated]",
"Streamable HTTP"). The version badge moves from the header row to sit
beside the transport badge.

ServerCard header no longer wraps; long server names truncate with
ellipsis.

Specification docs (`v2_scope.md`, `v2_screenshots.md`,
`v2_ux_interfaces.md`, `v2_ux_storybook.md`) updated to match.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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

@@ -9,7 +9,6 @@ import {
 } from "./ServerSettingsModal";
 
 const initialSettings: InspectorServerSettings = {
-  connectionMode: "proxy",
   headers: [
     { key: "Authorization", value: "Bearer token-abc-123" },
     { key: "X-Request-Id", value: "req-456" },
@@ -64,7 +63,6 @@ export const FullyConfigured: Story = {
 export const EmptySettings: Story = {
   args: {
     settings: {
-      connectionMode: "proxy",
       headers: [],
       metadata: [],
       connectionTimeout: 30000,

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

@@ -1,15 +1,16 @@
 import { useState } from "react";
-import { CloseButton, Group, Modal, Title } from "@mantine/core";
-import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
+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,
-  type OAuthSettings,
 } from "../ServerSettingsForm/ServerSettingsForm";
 
 const ALL_SECTIONS: ServerSettingsSection[] = [
-  "connectionMode",
   "headers",
   "metadata",
   "timeouts",
@@ -31,7 +32,7 @@ export function ServerSettingsModal({
 }: ServerSettingsModalProps) {
   const [expandedSections, setExpandedSections] = useState<
     ServerSettingsSection[]
-  >(["connectionMode"]);
+  >(["headers"]);
 
   const allExpanded = expandedSections.length === ALL_SECTIONS.length;
 
@@ -39,10 +40,6 @@ export function ServerSettingsModal({
     setExpandedSections(allExpanded ? [] : ALL_SECTIONS);
   }
 
-  function handleConnectionModeChange(mode: "proxy" | "direct") {
-    onSettingsChange({ ...settings, connectionMode: mode });
-  }
-
   function handleAddHeader() {
     onSettingsChange({
       ...settings,
@@ -85,7 +82,10 @@ export function ServerSettingsModal({
     onSettingsChange({ ...settings, metadata });
   }
 
-  function handleTimeoutChange(field: string, value: number) {
+  function handleTimeoutChange(
+    field: "connectionTimeout" | "requestTimeout",
+    value: number,
+  ) {
     onSettingsChange({ ...settings, [field]: value });
   }
 
@@ -103,37 +103,35 @@ export function ServerSettingsModal({
       opened={opened}
       onClose={onClose}
       withCloseButton={false}
-      title={
-        <Group justify="space-between" wrap="nowrap" w="100%">
+      size="lg"
+      centered
+    >
+      <Stack gap="md">
+        <Group justify="space-between" wrap="nowrap">
           <ListToggle
             compact={allExpanded}
             variant="subtle"
             onToggle={handleToggleAll}
           />
-          <Title order={4} ta="center" style={{ flex: 1 }}>
+          <Title order={4} ta="center" flex={1}>
             Server Settings
           </Title>
           <CloseButton onClick={onClose} />
         </Group>
-      }
-      size="lg"
-      centered
-      styles={{ title: { flex: 1 } }}
-    >
-      <ServerSettingsForm
-        settings={settings}
-        expandedSections={expandedSections}
-        onExpandedSectionsChange={setExpandedSections}
-        onConnectionModeChange={handleConnectionModeChange}
-        onAddHeader={handleAddHeader}
-        onRemoveHeader={handleRemoveHeader}
-        onHeaderChange={handleHeaderChange}
-        onAddMetadata={handleAddMetadata}
-        onRemoveMetadata={handleRemoveMetadata}
-        onMetadataChange={handleMetadataChange}
-        onTimeoutChange={handleTimeoutChange}
-        onOAuthChange={handleOAuthChange}
-      />
+        <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>
   );
 }