diff --git a/packages/inspector/src/dashboard/react/InspectorDashboard.tsx b/packages/inspector/src/dashboard/react/InspectorDashboard.tsx
index 78c97ad5..6f7f46b7 100644
--- a/packages/inspector/src/dashboard/react/InspectorDashboard.tsx
+++ b/packages/inspector/src/dashboard/react/InspectorDashboard.tsx
@@ -17,17 +17,83 @@ import { useGlobals, type GlobalsState } from "./hooks/useGlobals";
 import { useConnections } from "./hooks/useConnections";
 import { useOAuth } from "./hooks/useOAuth";
 import { useMcpPrimitives, type McpPrimitives } from "./hooks/useMcpPrimitives";
+import type { ConnectionParams } from "@mcp-apps-kit/testing";
+import { z } from "zod";
 import { Toolbar } from "./components/Toolbar";
-import { ConnectionBar } from "./components/ConnectionBar";
-import { TabBar } from "./components/TabBar";
 import { GlobalsPanel } from "./components/GlobalsPanel";
-import { McpPrimitivesPanel } from "./components/McpPrimitivesPanel";
+import {
+  McpPrimitivesPanel,
+  type ServerData,
+  type StoppedConnection,
+  type SelectedPrimitive,
+} from "./components/McpPrimitivesPanel";
+import type { Primitive } from "./components/PrimitiveDetail";
 import { RightPanel } from "./components/RightPanel";
 import { NoWidgetPlaceholder, type ConnectionState } from "./components/NoWidgetPlaceholder";
 import { OAuthDiscoveryPanel } from "./components/OAuthDiscoveryPanel";
 import { styles } from "./styles";
 import logoUrl from "../assets/logo.png";
 
+// =============================================================================
+// Stopped Connections Storage
+// =============================================================================
+
+const STOPPED_CONNECTIONS_KEY = "mcp-dashboard-stopped-connections";
+
+/** Zod schema for ConnectionParams validation */
+const ConnectionParamsSchema = z.union([
+  z.object({
+    transport: z.literal("http"),
+    url: z.string().min(1),
+  }),
+  z.object({
+    transport: z.literal("stdio"),
+    command: z.string().min(1),
+    args: z.array(z.string()).optional(),
+    env: z.record(z.string(), z.string()).optional(),
+    inheritEnv: z.boolean().optional(),
+    cwd: z.string().optional(),
+  }),
+]);
+
+/** Zod schema for StoppedConnection validation */
+const StoppedConnectionSchema = z.object({
+  id: z.string().min(1),
+  name: z.string().min(1),
+  url: z.string().min(1),
+  params: ConnectionParamsSchema,
+});
+
+/** Load stopped connections from localStorage */
+function loadStoppedConnections(): StoppedConnection[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const stored = localStorage.getItem(STOPPED_CONNECTIONS_KEY);
+    if (!stored) return [];
+    const parsed = JSON.parse(stored) as unknown;
+    // Validate shape
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .map((item) => {
+        const result = StoppedConnectionSchema.safeParse(item);
+        return result.success ? result.data : null;
+      })
+      .filter((item): item is StoppedConnection => item !== null);
+  } catch {
+    return [];
+  }
+}
+
+/** Save stopped connections to localStorage */
+function saveStoppedConnections(connections: StoppedConnection[]): void {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STOPPED_CONNECTIONS_KEY, JSON.stringify(connections));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
 export interface InspectorDashboardProps {
   /** Base URL for the inspector API (default: current origin) */
   baseUrl?: string;
@@ -48,13 +114,11 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
   const {
     connections,
     activeConnectionId,
-    setActiveConnectionId,
     isCreating,
     error: connectionError,
     createConnection,
     reconnectConnection,
     closeConnection,
-    getMatchingEntries,
     authDiscovery,
     clearAuthDiscovery,
   } = useConnections(baseUrl);
@@ -63,11 +127,21 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
   const connectionCacheRef = useRef<Map<string, CachedConnectionState>>(new Map());
   const prevConnectionIdRef = useRef<string | null>(null);
 
+  // Stopped connections state (persisted to localStorage)
+  const [stoppedConnections, setStoppedConnections] = useState<StoppedConnection[]>(() =>
+    loadStoppedConnections()
+  );
+
+  // Track which server is currently reconnecting (shows loading state)
+  const [reconnectingServerId, setReconnectingServerId] = useState<string | null>(null);
+
+  // Per-connection primitives cache (for building ServerData for all connections)
+  const primitivesPerConnectionRef = useRef<Map<string, McpPrimitives>>(new Map());
+
   // Session state
   const [selectedSessionByConnection, setSelectedSessionByConnection] = useState<
     Record<string, string | null>
   >({});
-  const [isConnectionFormOpen, setIsConnectionFormOpen] = useState(false);
   const { sessions, isLoading: sessionsLoading } = useSessions(baseUrl, activeConnectionId);
 
   const activeConnection = useMemo(
@@ -187,7 +261,6 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
       void reconnectConnection(activeConnectionId).then((connected) => {
         if (connected) {
           clearAuthDiscovery();
-          setIsConnectionFormOpen(false);
         }
       });
     }
@@ -212,6 +285,50 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
     resources.length > 0 ? resources : (cachedState?.primitives?.resources ?? []);
   const displayPrompts = prompts.length > 0 ? prompts : (cachedState?.primitives?.prompts ?? []);
 
+  // Update primitives cache for the active connection
+  useEffect(() => {
+    if (activeConnectionId && (tools.length > 0 || resources.length > 0 || prompts.length > 0)) {
+      primitivesPerConnectionRef.current.set(activeConnectionId, { tools, resources, prompts });
+    }
+  }, [activeConnectionId, tools, resources, prompts]);
+
+  // Persist stopped connections to localStorage
+  useEffect(() => {
+    saveStoppedConnections(stoppedConnections);
+  }, [stoppedConnections]);
+
+  // Build ServerData array from active connections + primitives cache
+  const serverDataList: ServerData[] = useMemo(() => {
+    return connections
+      .filter((conn) => conn.status === "connected")
+      .map((conn) => {
+        const cached = primitivesPerConnectionRef.current.get(conn.id);
+        // For active connection, use live data; for others, use cache
+        const prims =
+          conn.id === activeConnectionId
+            ? { tools: displayTools, resources: displayResources, prompts: displayPrompts }
+            : (cached ?? { tools: [], resources: [], prompts: [] });
+        return {
+          id: conn.id,
+          name: conn.serverInfo?.name ?? conn.url,
+          url: conn.url,
+          isConnected: true,
+          tools: prims.tools,
+          resources: prims.resources,
+          prompts: prims.prompts,
+          // Pass connection params for server info display
+          params: { transport: "http" }, // Dashboard only supports HTTP transport
+          serverInfo: conn.serverInfo ?? undefined,
+          // Capabilities determined from available primitives
+          capabilities: {
+            tools: prims.tools.length > 0,
+            resources: prims.resources.length > 0,
+            prompts: prims.prompts.length > 0,
+          },
+        };
+      });
+  }, [connections, activeConnectionId, displayTools, displayResources, displayPrompts]);
+
   // Compute connection state for NoWidgetPlaceholder
   const connectionState: ConnectionState = useMemo(() => {
     // No server connected
@@ -233,13 +350,17 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
     return (initEvent?.payload as { clientName?: string } | undefined)?.clientName;
   }, [displayAgentEvents]);
 
-  // Handler to open connection form
-  const handleConnect = useCallback(() => {
-    setIsConnectionFormOpen(true);
-  }, []);
-
-  // Left panel state (MCP primitives)
-  const [isLeftPanelCollapsed, setIsLeftPanelCollapsed] = useState(false);
+  // Left panel state (MCP primitives) - persisted to localStorage
+  const [isLeftPanelCollapsed, setIsLeftPanelCollapsed] = useState(() => {
+    if (typeof window !== "undefined") {
+      try {
+        return localStorage.getItem("mcp-dashboard-left-collapsed") === "true";
+      } catch {
+        return false;
+      }
+    }
+    return false;
+  });
 
   // Right panel state (persisted)
   const [isRightPanelCollapsed, setIsRightPanelCollapsed] = useState(() => {
@@ -253,6 +374,34 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
     return false;
   });
 
+  // Selected primitive state (for detail view)
+  const [selectedPrimitive, setSelectedPrimitive] = useState<SelectedPrimitive | null>(null);
+
+  // Resolve selected primitive to its full data for PrimitiveDetail
+  const resolvedPrimitive: Primitive | null = useMemo(() => {
+    if (!selectedPrimitive) return null;
+
+    const server = serverDataList.find((s) => s.id === selectedPrimitive.serverId);
+    if (!server) return null;
+
+    switch (selectedPrimitive.kind) {
+      case "tool": {
+        const tool = server.tools.find((t) => t.name === selectedPrimitive.name);
+        return tool ? { ...tool, kind: "tool" as const } : null;
+      }
+      case "resource": {
+        const resource = server.resources.find((r) => r.name === selectedPrimitive.name);
+        return resource ? { ...resource, kind: "resource" as const } : null;
+      }
+      case "prompt": {
+        const prompt = server.prompts.find((p) => p.name === selectedPrimitive.name);
+        return prompt ? { ...prompt, kind: "prompt" as const } : null;
+      }
+      default:
+        return null;
+    }
+  }, [selectedPrimitive, serverDataList]);
+
   // Globals bar state (persisted)
   const [isGlobalsBarCollapsed, setIsGlobalsBarCollapsed] = useState(() => {
     if (typeof window !== "undefined") {
@@ -338,6 +487,17 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
     }
   }, [isRightPanelCollapsed]);
 
+  // Save left panel collapsed state
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem("mcp-dashboard-left-collapsed", String(isLeftPanelCollapsed));
+      } catch {
+        // ignore storage access errors
+      }
+    }
+  }, [isLeftPanelCollapsed]);
+
   // Save globals bar collapsed state
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -401,14 +561,15 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
     setIsGlobalsBarCollapsed((prev) => !prev);
   }, []);
 
+  // Handle primitive selection - shows detail in left panel (sidebar)
+  const handleSelectPrimitive = useCallback((primitive: SelectedPrimitive | null) => {
+    setSelectedPrimitive(primitive);
+  }, []);
+
   const handleCreateConnection = useCallback(
     async (params: import("@mcp-apps-kit/testing").ConnectionParams): Promise<boolean> => {
       const conn = await createConnection(params);
-      if (conn) {
-        setIsConnectionFormOpen(false);
-        return true;
-      }
-      return false;
+      return !!conn;
     },
     [createConnection]
   );
@@ -421,6 +582,8 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
       }
       // Clear cached state for this connection
       connectionCacheRef.current.delete(id);
+      // Clear primitives cache to prevent unbounded growth
+      primitivesPerConnectionRef.current.delete(id);
       setSelectedSessionByConnection((prev) => {
         if (!(id in prev)) {
           return prev;
@@ -433,16 +596,67 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
     [closeConnection]
   );
 
-  const tabs = useMemo(
-    () =>
-      connections.map((connection) => ({
-        id: connection.id,
-        url: connection.url,
-        serverInfo: connection.serverInfo,
-        status: connection.status,
-        isOAuth: connection.isOAuth,
-      })),
-    [connections]
+  // Handler to stop a server (disconnect but keep in stopped list)
+  const handleStopServer = useCallback(
+    async (serverId: string) => {
+      const conn = connections.find((c) => c.id === serverId);
+      if (!conn) return;
+
+      // Build connection params from what we know
+      // For HTTP connections, we can reconstruct params from the URL
+      const params: ConnectionParams = { transport: "http", url: conn.url };
+
+      // Add to stopped connections
+      const stoppedConn: StoppedConnection = {
+        id: serverId,
+        name: conn.serverInfo?.name ?? conn.url,
+        url: conn.url,
+        params,
+      };
+
+      setStoppedConnections((prev) => {
+        // Don't duplicate
+        if (prev.some((s) => s.id === serverId)) return prev;
+        return [...prev, stoppedConn];
+      });
+
+      // Close the connection
+      await handleCloseConnection(serverId);
+    },
+    [connections, handleCloseConnection]
+  );
+
+  // Handler to start a stopped server (reconnect using stored params)
+  const handleStartServer = useCallback(
+    async (stoppedConn: StoppedConnection) => {
+      // Show loading state
+      setReconnectingServerId(stoppedConn.id);
+
+      try {
+        // Reconnect using stored params
+        const success = await handleCreateConnection(stoppedConn.params);
+        if (success) {
+          // Only remove from stopped list after successful connection
+          setStoppedConnections((prev) => prev.filter((s) => s.id !== stoppedConn.id));
+        }
+      } finally {
+        setReconnectingServerId(null);
+      }
+    },
+    [handleCreateConnection]
+  );
+
+  // Handler to delete a server (connected or stopped)
+  const handleDeleteServer = useCallback(
+    async (serverId: string, isConnected: boolean) => {
+      if (isConnected) {
+        // Close the connection and don't add to stopped list
+        await closeConnection(serverId);
+      }
+      // Remove from stopped list if present
+      setStoppedConnections((prev) => prev.filter((s) => s.id !== serverId));
+    },
+    [closeConnection]
   );
 
   // Compute screencast container aspect ratio from globals viewport
@@ -508,19 +722,6 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
           <h1 style={styles.title}>sirius-mcp inspector</h1>
         </div>
 
-        {/* Connection Bar */}
-        <ConnectionBar
-          isOpen={isConnectionFormOpen}
-          isCreating={isCreating}
-          error={connectionError}
-          onCreateConnection={handleCreateConnection}
-          onClose={() => setIsConnectionFormOpen(false)}
-          getMatchingEntries={getMatchingEntries}
-          oauth={activeConnectionId ? oauth : undefined}
-          authDiscovery={authDiscovery}
-          onDismissDiscovery={clearAuthDiscovery}
-        />
-
         <div style={styles.headerRight}>
           <div style={styles.controls}>
             {displaySessions.length > 0 && (
@@ -580,32 +781,33 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
         </div>
       </header>
 
-      <TabBar
-        tabs={tabs}
-        activeTabId={activeConnectionId}
-        onSelect={(id) => setActiveConnectionId(id)}
-        onClose={(id) => void handleCloseConnection(id)}
-        onAdd={() => setIsConnectionFormOpen(true)}
-      />
-
       {/* Error Banner */}
       {error && <div style={styles.errorBanner}>{error}</div>}
 
       {/* Content Wrapper - horizontal layout */}
       <div style={styles.contentWrapper}>
-        {/* Left Panel - MCP Primitives (always present) */}
+        {/* Left Panel - MCP Primitives as Server Blocks */}
         <McpPrimitivesPanel
-          tools={displayTools}
-          resources={displayResources}
-          prompts={displayPrompts}
+          servers={serverDataList}
+          stoppedConnections={stoppedConnections}
+          reconnectingServerId={reconnectingServerId}
           isLoading={primitivesLoading}
           isVisible={true}
           isCollapsed={isLeftPanelCollapsed}
           onToggleCollapse={() => setIsLeftPanelCollapsed(!isLeftPanelCollapsed)}
-          position="left"
           panelWidth={leftPanelWidth}
           resizeHandleProps={leftResizeHandleProps}
           isResizing={isLeftResizing}
+          onStopServer={handleStopServer}
+          onStartServer={handleStartServer}
+          onDeleteServer={handleDeleteServer}
+          onConnect={handleCreateConnection}
+          isCreating={isCreating}
+          connectionError={connectionError}
+          selectedPrimitive={selectedPrimitive}
+          onSelectPrimitive={handleSelectPrimitive}
+          resolvedPrimitive={resolvedPrimitive}
+          onClosePrimitive={() => setSelectedPrimitive(null)}
         />
 
         {/* Center Column - screencast + globals bar */}
@@ -638,11 +840,7 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
               </div>
             ) : (
               /* Tamagotchi placeholder when no widget */
-              <NoWidgetPlaceholder
-                connectionState={connectionState}
-                clientName={agentClientName}
-                onConnect={handleConnect}
-              />
+              <NoWidgetPlaceholder connectionState={connectionState} clientName={agentClientName} />
             )}
           </main>
 
@@ -690,7 +888,6 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
             // Close on backdrop click
             if (e.target === e.currentTarget) {
               clearAuthDiscovery();
-              setIsConnectionFormOpen(false);
             }
           }}
         >
@@ -707,7 +904,6 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
                 void reconnectConnection(activeConnectionId).then((connected) => {
                   if (connected) {
                     clearAuthDiscovery();
-                    setIsConnectionFormOpen(false);
                   }
                 });
               }
@@ -715,7 +911,6 @@ export function InspectorDashboard({ baseUrl = "" }: InspectorDashboardProps): R
             }}
             onDismiss={() => {
               clearAuthDiscovery();
-              setIsConnectionFormOpen(false);
             }}
           />
         </div>
diff --git a/packages/inspector/src/dashboard/react/components/McpPrimitivesPanel.tsx b/packages/inspector/src/dashboard/react/components/McpPrimitivesPanel.tsx
index 9481c4b3..3237d799 100644
--- a/packages/inspector/src/dashboard/react/components/McpPrimitivesPanel.tsx
+++ b/packages/inspector/src/dashboard/react/components/McpPrimitivesPanel.tsx
@@ -1,11 +1,12 @@
 /**
  * McpPrimitivesPanel Component
  *
- * Displays MCP Tools, Resources, and Prompts in a tabbed interface.
- * Each primitive type is shown as a list of cards with schema details.
+ * Displays MCP servers as collapsible blocks with their primitives grouped by kind.
+ * Each server shows: header with name + Start/Stop button, and nested TOOLS/RESOURCES/PROMPTS sections.
+ * Stopped servers appear greyed out with a "Start" button to reconnect.
  */
 
-import React, { useState, useCallback, useRef, useEffect } from "react";
+import React, { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import type {
   McpTool,
   McpResource,
@@ -13,19 +14,118 @@ import type {
   JsonSchemaProperty,
   McpPromptArgument,
 } from "../types/mcp-primitives";
+import type { ConnectionParams } from "@mcp-apps-kit/testing";
+import { SidebarConnectionForm } from "./SidebarConnectionForm";
+import { PrimitiveDetail, type Primitive } from "./PrimitiveDetail";
 
 // =============================================================================
 // Types
 // =============================================================================
 
-type TabType = "tools" | "resources" | "prompts";
+/** Server data for display in the sidebar */
+export interface ServerData {
+  id: string;
+  name: string;
+  url: string;
+  isConnected: boolean;
+  tools: McpTool[];
+  resources: McpResource[];
+  prompts: McpPrompt[];
+  /** Connection parameters including transport type */
+  params?: {
+    transport?: "stdio" | "http" | "sse" | string;
+    [key: string]: unknown;
+  };
+  /** Server info from initialization */
+  serverInfo?: {
+    version?: string;
+    name?: string;
+    [key: string]: unknown;
+  };
+  /** Server capabilities */
+  capabilities?: {
+    tools?: boolean | object;
+    resources?: boolean | object;
+    prompts?: boolean | object;
+    logging?: boolean | object;
+    sampling?: boolean | object;
+    roots?: boolean | object;
+    [key: string]: unknown;
+  };
+}
+
+/** Stopped connection stored for reconnection */
+export interface StoppedConnection {
+  id: string;
+  name: string;
+  url: string;
+  params: ConnectionParams;
+}
+
+// =============================================================================
+// Props Types - Support both OLD API (tests) and NEW API (server blocks)
+// =============================================================================
+
+/** Selected primitive identifier */
+export interface SelectedPrimitive {
+  serverId: string;
+  kind: "tool" | "resource" | "prompt";
+  name: string;
+}
+
+/** New API props for server blocks mode */
+export interface McpPrimitivesPanelNewProps {
+  /** Active server connections with their primitives */
+  servers: ServerData[];
+  /** Stopped connections that can be restarted */
+  stoppedConnections: StoppedConnection[];
+  /** ID of server currently reconnecting (shows loading state) */
+  reconnectingServerId?: string | null;
+  /** Whether primitives are still loading */
+  isLoading: boolean;
+  /** Whether the panel is visible */
+  isVisible: boolean;
+  /** Whether the panel is collapsed */
+  isCollapsed?: boolean;
+  /** Callback to toggle collapsed state */
+  onToggleCollapse?: () => void;
+  /** Panel width (for resizable panel) */
+  panelWidth?: number;
+  /** Resize handle props (for resizable panel) */
+  resizeHandleProps?: React.HTMLAttributes<HTMLDivElement>;
+  /** Whether resize is active */
+  isResizing?: boolean;
+  /** Callback when Stop button is clicked */
+  onStopServer?: (serverId: string) => void;
+  /** Callback when Start button is clicked for a stopped server */
+  onStartServer?: (stoppedConnection: StoppedConnection) => void;
+  /** Callback when Delete button is clicked for a server */
+  onDeleteServer?: (serverId: string, isConnected: boolean) => void;
+  /** Callback to open connection form for new server (legacy - opens header form) */
+  onAddServer?: () => void;
+  /** Callback to connect to a new server with params (inline form) */
+  onConnect?: (params: ConnectionParams) => Promise<boolean>;
+  /** Whether a connection is currently being created */
+  isCreating?: boolean;
+  /** Connection error message */
+  connectionError?: string | null;
+  /** Currently selected primitive */
+  selectedPrimitive?: SelectedPrimitive | null;
+  /** Callback when a primitive is selected */
+  onSelectPrimitive?: (primitive: SelectedPrimitive | null) => void;
+  /** Resolved primitive data for detail view */
+  resolvedPrimitive?: Primitive | null;
+  /** Callback to close the primitive detail */
+  onClosePrimitive?: () => void;
+}
 
-export interface McpPrimitivesPanelProps {
-  /** MCP Tools from the server */
+/** Legacy API props for backward compatibility with tests */
+export interface McpPrimitivesPanelLegacyProps {
+  /** MCP Tools from the server (legacy) */
   tools: McpTool[];
-  /** MCP Resources from the server */
+  /** MCP Resources from the server (legacy) */
   resources: McpResource[];
-  /** MCP Prompts from the server */
+  /** MCP Prompts from the server (legacy) */
   prompts: McpPrompt[];
   /** Whether primitives are still loading */
   isLoading: boolean;
@@ -35,7 +135,7 @@ export interface McpPrimitivesPanelProps {
   isCollapsed?: boolean;
   /** Callback to toggle collapsed state */
   onToggleCollapse?: () => void;
-  /** Panel position affects styling */
+  /** Panel position affects styling (legacy) */
   position: "center" | "left";
   /** Panel width (for resizable left panel) */
   panelWidth?: number;
@@ -45,6 +145,14 @@ export interface McpPrimitivesPanelProps {
   isResizing?: boolean;
 }
 
+/** Combined props - supports both APIs */
+export type McpPrimitivesPanelProps = McpPrimitivesPanelNewProps | McpPrimitivesPanelLegacyProps;
+
+/** Type guard to check if using legacy API */
+function isLegacyProps(props: McpPrimitivesPanelProps): props is McpPrimitivesPanelLegacyProps {
+  return "position" in props && "tools" in props;
+}
+
 // Font stack (matches styles.ts FONT_SANS)
 const FONT_SANS =
   "'Inter', 'SF Pro Display', 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif";
@@ -61,109 +169,98 @@ const localStyles: Record<string, React.CSSProperties> = {
     overflow: "hidden",
     transition: "width 0.25s ease, opacity 0.3s ease, transform 0.3s ease",
     height: "100%",
-  },
-  panelLeft: {
     width: "320px",
     flexShrink: 0,
     borderRight: "1px solid #2d2f2f",
   },
-  panelCenter: {
-    width: "100%",
-    height: "100%",
-    border: "1px solid #2d2f2f",
-    borderRadius: "8px",
-  },
-  panelCenterAppear: {
-    animation: "panelAppear 0.4s ease-out forwards",
-  },
   panelCollapsed: {
     width: 0,
     borderRight: "none",
     opacity: 0,
   },
-  header: {
+  // Header row 1: collapse toggle + title
+  headerTitle: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
-    padding: "0.75rem 1rem",
+    gap: "0.5rem",
+    padding: "0.75rem",
     backgroundColor: "#0a0a0a",
     borderBottom: "1px solid #1a1a1a",
     flexShrink: 0,
   },
-  title: {
+  headerTitleText: {
+    fontSize: "0.9375rem",
+    fontWeight: 600,
+    color: "#e8e8e8",
+    letterSpacing: "0.01em",
+  },
+  // Header row 2: search + add button
+  headerSearch: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    padding: "0.5rem 0.75rem",
+    backgroundColor: "#0a0a0a",
+    borderBottom: "1px solid #1a1a1a",
+    flexShrink: 0,
+  },
+  searchInput: {
+    flex: 1,
+    backgroundColor: "#111111",
+    border: "1px solid #2d2f2f",
+    borderRadius: "4px",
+    color: "#e8e8e8",
+    padding: "0.375rem 0.5rem",
     fontSize: "0.75rem",
-    fontWeight: 500,
-    color: "#9ca3af",
-    textTransform: "uppercase" as const,
-    letterSpacing: "0.05em",
+    fontFamily: "inherit",
+    outline: "none",
   },
-  collapseBtn: {
-    background: "transparent",
+  addButton: {
+    backgroundColor: "transparent",
     border: "1px solid #3d4040",
     borderRadius: "4px",
-    padding: "0.25rem 0.375rem",
+    padding: "0.375rem 0.625rem",
     cursor: "pointer",
     color: "#9ca3af",
-    fontSize: "0.625rem",
+    fontSize: "0.875rem",
+    fontWeight: 500,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     transition: "all 0.15s ease",
-  },
-  tabs: {
-    display: "flex",
-    alignItems: "center",
-    gap: "0.25rem",
-    padding: "0.5rem 0.75rem",
-    backgroundColor: "#0a0a0a",
-    borderBottom: "1px solid #1a1a1a",
     flexShrink: 0,
   },
-  tab: {
-    fontFamily: "inherit",
-    backgroundColor: "transparent",
+  collapseBtn: {
+    background: "transparent",
     border: "1px solid #3d4040",
-    color: "#9ca3af",
-    padding: "0.375rem 0.75rem",
     borderRadius: "4px",
-    fontSize: "0.6875rem",
+    padding: "0.25rem 0.5rem",
     cursor: "pointer",
-    transition: "all 0.15s ease",
+    color: "#9ca3af",
+    fontSize: "0.75rem",
     display: "flex",
     alignItems: "center",
-    gap: "0.375rem",
-  },
-  tabActive: {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-    borderColor: "#ffffff",
-    color: "#ffffff",
-  },
-  tabCount: {
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
-    padding: "0.125rem 0.375rem",
-    borderRadius: "3px",
-    fontSize: "0.5625rem",
-    fontWeight: 500,
-  },
-  tabCountActive: {
-    backgroundColor: "rgba(255, 255, 255, 0.25)",
+    justifyContent: "center",
+    transition: "all 0.15s ease",
+    flexShrink: 0,
   },
   content: {
     flex: 1,
     overflowY: "auto",
-    padding: "0.75rem",
-    fontSize: "0.75rem",
     minHeight: 0,
+    position: "relative" as const,
   },
   emptyState: {
     display: "flex",
+    flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
     height: "100%",
-    color: "#4b5563",
+    color: "#9ca3af",
     fontSize: "0.75rem",
     padding: "2rem",
     textAlign: "center" as const,
+    gap: "0.75rem",
   },
   loadingState: {
     display: "flex",
@@ -182,6 +279,171 @@ const localStyles: Record<string, React.CSSProperties> = {
     borderRadius: "50%",
     animation: "spin 0.8s linear infinite",
   },
+  // Server block styles
+  serverBlock: {
+    borderBottom: "1px solid #1a1a1a",
+  },
+  serverBlockStopped: {
+    opacity: 0.5,
+  },
+  serverHeader: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0.5rem 0.75rem",
+    gap: "0.5rem",
+    cursor: "pointer",
+    userSelect: "none" as const,
+  },
+  serverName: {
+    flex: 1,
+    fontSize: "0.9375rem",
+    fontWeight: 600,
+    color: "#ffffff",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap" as const,
+  },
+  serverNameStopped: {
+    color: "#6b7280",
+  },
+  serverButton: {
+    backgroundColor: "#ffffff",
+    border: "none",
+    borderRadius: "4px",
+    padding: "0.25rem",
+    cursor: "pointer",
+    color: "#000000",
+    fontSize: "0.875rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "opacity 0.15s ease",
+    flexShrink: 0,
+    opacity: 0.9,
+  },
+  serverButtonHover: {
+    opacity: 1,
+  },
+  deleteButton: {
+    backgroundColor: "transparent",
+    border: "none",
+    borderRadius: "4px",
+    padding: "0.25rem",
+    cursor: "pointer",
+    color: "#6b7280",
+    fontSize: "0.875rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "color 0.15s ease",
+    flexShrink: 0,
+  },
+  expandIndicator: {
+    fontSize: "0.5rem",
+    color: "#6b7280",
+    flexShrink: 0,
+    width: "0.75rem",
+    textAlign: "center" as const,
+  },
+  serverContent: {
+    paddingBottom: "0.5rem",
+  },
+  stoppedMessage: {
+    padding: "0.5rem 0.75rem 0.5rem 1.5rem",
+    fontSize: "0.6875rem",
+    color: "#9ca3af",
+    fontStyle: "italic" as const,
+  },
+  // Server info section - horizontal chips
+  serverInfoContent: {
+    padding: "0.375rem 0.75rem 0.5rem",
+    display: "flex",
+    flexWrap: "wrap" as const,
+    gap: "0.375rem",
+  },
+  serverInfoChip: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.25rem",
+    backgroundColor: "#1f1f1f",
+    border: "1px solid #2d2f2f",
+    borderRadius: "12px",
+    padding: "0.125rem 0.5rem",
+    fontSize: "0.625rem",
+  },
+  serverInfoLabel: {
+    color: "#6b7280",
+  },
+  serverInfoValue: {
+    color: "#e8e8e8",
+  },
+  // Primitive kind section
+  kindSection: {
+    paddingLeft: "0.75rem",
+  },
+  kindHeader: {
+    padding: "0.375rem 0.5rem",
+    fontSize: "0.6875rem",
+    fontWeight: 600,
+    color: "#6b7280",
+    textTransform: "uppercase" as const,
+    letterSpacing: "0.05em",
+  },
+  // Primitive item styles - clickable items that open detail view
+  primitiveItem: {
+    margin: "0.25rem 0.5rem",
+    padding: "0.5rem 0.75rem",
+    cursor: "pointer",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: "#e8e8e8",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    transition: "all 0.15s ease",
+    backgroundColor: "#1a1a1a",
+    border: "1px solid #2d2f2f",
+    borderRadius: "6px",
+    outline: "none",
+  },
+  primitiveItemHover: {
+    backgroundColor: "#252525",
+  },
+  primitiveItemActive: {
+    backgroundColor: "#252525",
+  },
+  primitiveName: {
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap" as const,
+    fontFamily: FONT_SANS,
+  },
+  widgetBadge: {
+    fontSize: "0.5rem",
+    fontWeight: 600,
+    color: "#b39ddb",
+    backgroundColor: "rgba(179, 157, 219, 0.15)",
+    padding: "0.0625rem 0.25rem",
+    borderRadius: "2px",
+    textTransform: "uppercase" as const,
+    letterSpacing: "0.03em",
+    flexShrink: 0,
+  },
+  // Resize handle
+  resizeHandle: {
+    width: "6px",
+    background:
+      "linear-gradient(to right, transparent 2px, #2d2f2f 2px, #2d2f2f 4px, transparent 4px)",
+    cursor: "ew-resize",
+    flexShrink: 0,
+    transition: "background 0.15s ease",
+  },
+  resizeHandleActive: {
+    background:
+      "linear-gradient(to right, transparent 2px, #ffffff 2px, #ffffff 4px, transparent 4px)",
+  },
+  // Card styles (for expanded primitive details - kept for compatibility)
   card: {
     backgroundColor: "#111111",
     border: "1px solid #2d2f2f",
@@ -203,14 +465,6 @@ const localStyles: Record<string, React.CSSProperties> = {
     userSelect: "none" as const,
     gap: "0.5rem",
   },
-  expandIndicator: {
-    fontSize: "0.5rem",
-    color: "#6b7280",
-    flexShrink: 0,
-    width: "0.75rem",
-    textAlign: "center" as const,
-    transition: "color 0.15s ease",
-  },
   cardName: {
     fontSize: "0.9375rem",
     fontWeight: 600,
@@ -290,30 +544,6 @@ const localStyles: Record<string, React.CSSProperties> = {
     lineHeight: 1.4,
     paddingLeft: "0.25rem",
   },
-  // Widget badge for tools with UI
-  widgetBadge: {
-    fontSize: "0.5rem",
-    fontWeight: 600,
-    color: "#b39ddb",
-    backgroundColor: "rgba(179, 157, 219, 0.15)",
-    padding: "0.125rem 0.375rem",
-    borderRadius: "3px",
-    textTransform: "uppercase" as const,
-    letterSpacing: "0.03em",
-  },
-  // Resize handle for left panel
-  resizeHandle: {
-    width: "6px",
-    background:
-      "linear-gradient(to right, transparent 2px, #2d2f2f 2px, #2d2f2f 4px, transparent 4px)",
-    cursor: "ew-resize",
-    flexShrink: 0,
-    transition: "background 0.15s ease",
-  },
-  resizeHandleActive: {
-    background:
-      "linear-gradient(to right, transparent 2px, #ffffff 2px, #ffffff 4px, transparent 4px)",
-  },
   resourceUri: {
     fontFamily:
       "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace",
@@ -334,7 +564,6 @@ const localStyles: Record<string, React.CSSProperties> = {
     borderRadius: "3px",
     marginTop: "0.25rem",
   },
-  // Metadata section (annotations, _meta)
   metaSection: {
     marginTop: "0.5rem",
     padding: "0.5rem",
@@ -411,15 +640,90 @@ function KeyframeStyles(): React.ReactElement {
           transform: scale(1) translateY(0);
         }
       }
+      @keyframes slideInFromRight {
+        from {
+          opacity: 0;
+          transform: translateX(8px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+      @keyframes slideOutToLeft {
+        from {
+          opacity: 1;
+          transform: translateX(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateX(-8px);
+        }
+      }
     `}</style>
   );
 }
 
-/**
- * Spinner component for loading state
- */
-function Spinner(): React.ReactElement {
-  return <div style={localStyles.spinner} />;
+/**
+ * Spinner component for loading state
+ */
+function Spinner(): React.ReactElement {
+  return <div style={localStyles.spinner} />;
+}
+
+/**
+ * Slide-over panel for detail view - slides on top of content
+ */
+function SlideOverDetail({
+  children,
+  isVisible,
+}: {
+  children: React.ReactNode;
+  isVisible: boolean;
+}): React.ReactElement | null {
+  const [show, setShow] = useState(false);
+  const [render, setRender] = useState(isVisible);
+
+  useEffect(() => {
+    if (isVisible) {
+      setRender(true);
+      // Trigger slide-in after mount
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setShow(true);
+        });
+      });
+      return; // No cleanup needed for enter animation
+    } else {
+      setShow(false);
+      // Wait for slide-out animation
+      const timer = setTimeout(() => setRender(false), 250);
+      return () => clearTimeout(timer);
+    }
+  }, [isVisible]);
+
+  if (!render) return null;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "#0d0d0d",
+        padding: "0.75rem",
+        overflowY: "auto",
+        opacity: show ? 1 : 0,
+        transform: show ? "translateX(0)" : "translateX(100%)",
+        transition: "opacity 0.25s ease-out, transform 0.25s ease-out",
+        zIndex: 10,
+      }}
+    >
+      {children}
+    </div>
+  );
 }
 
 /**
@@ -434,7 +738,6 @@ function CopyButton({ data }: { data: unknown }): React.ReactElement {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     } catch {
-      // Fallback for browsers that don't support clipboard API
       const textarea = document.createElement("textarea");
       textarea.value = JSON.stringify(data, null, 2);
       document.body.appendChild(textarea);
@@ -530,17 +833,10 @@ function PromptArguments({ args }: { args: McpPromptArgument[] }): React.ReactEl
 function hasToolUI(tool: McpTool): boolean {
   const meta = tool._meta;
   if (!meta) return false;
-
-  // MCP Apps format: _meta.ui.resourceUri
   const uiMeta = meta.ui as Record<string, unknown> | undefined;
   if (uiMeta?.resourceUri) return true;
-
-  // Alternative MCP format: _meta["ui/resourceUri"]
   if (meta["ui/resourceUri"]) return true;
-
-  // OpenAI format: _meta["openai/outputTemplate"]
   if (meta["openai/outputTemplate"]) return true;
-
   return false;
 }
 
@@ -605,7 +901,6 @@ function MetadataSection({
 // Animated Collapse
 // =============================================================================
 
-/** Smooth expand/collapse wrapper using max-height transition */
 const COLLAPSE_TRANSITION_MS = 200;
 const COLLAPSE_TRANSITION_CSS = `${COLLAPSE_TRANSITION_MS / 1000}s`;
 
@@ -629,25 +924,20 @@ function AnimatedCollapse({
     let timer: ReturnType<typeof setTimeout> | undefined;
 
     if (isOpen) {
-      // Keep overflow hidden during the expand transition
       setOverflow("hidden");
-      // Measure content and animate from 0 to its height
       rafId1 = requestAnimationFrame(() => {
         const height = el.scrollHeight;
         setMaxHeight(height > 0 ? `${height}px` : "none");
       });
-      // After transition completes, switch to none/visible so content can grow
       timer = setTimeout(() => {
         setMaxHeight("none");
         setOverflow("visible");
       }, COLLAPSE_TRANSITION_MS);
     } else {
-      // Snap to current measured height, keep overflow hidden
       setOverflow("hidden");
       const height = el.scrollHeight;
       if (height > 0) {
         setMaxHeight(`${height}px`);
-        // Double rAF ensures the browser has painted the explicit height before transitioning to 0
         rafId1 = requestAnimationFrame(() => {
           rafId2 = requestAnimationFrame(() => setMaxHeight("0px"));
         });
@@ -679,7 +969,384 @@ function AnimatedCollapse({
 }
 
 // =============================================================================
-// Card Components
+// Server Info Helpers
+// =============================================================================
+
+/**
+ * Get list of enabled capabilities from capabilities object
+ */
+function getEnabledCapabilities(capabilities: ServerData["capabilities"] | undefined): string[] {
+  if (!capabilities) return [];
+  const enabled: string[] = [];
+  for (const [key, value] of Object.entries(capabilities)) {
+    if (value) {
+      enabled.push(key);
+    }
+  }
+  return enabled;
+}
+
+// =============================================================================
+// Server Block Component
+// =============================================================================
+
+interface ServerBlockProps {
+  server: ServerData | StoppedConnection;
+  isConnected: boolean;
+  isReconnecting?: boolean;
+  searchFilter: string;
+  onStop?: () => void;
+  onStart?: () => void;
+  onDelete?: () => void;
+  selectedPrimitive?: SelectedPrimitive | null;
+  onSelectPrimitive?: (primitive: SelectedPrimitive | null) => void;
+}
+
+function ServerBlock({
+  server,
+  isConnected,
+  isReconnecting = false,
+  searchFilter,
+  onStop,
+  onStart,
+  onDelete,
+  selectedPrimitive,
+  onSelectPrimitive,
+}: ServerBlockProps): React.ReactElement | null {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null);
+
+  // Helper to check if a primitive is selected
+  const isPrimitiveSelected = useCallback(
+    (kind: "tool" | "resource" | "prompt", name: string): boolean => {
+      return (
+        selectedPrimitive?.serverId === server.id &&
+        selectedPrimitive?.kind === kind &&
+        selectedPrimitive?.name === name
+      );
+    },
+    [selectedPrimitive, server.id]
+  );
+
+  // Handler for primitive clicks
+  const handlePrimitiveClick = useCallback(
+    (kind: "tool" | "resource" | "prompt", name: string) => {
+      if (onSelectPrimitive) {
+        // Toggle selection - if already selected, deselect
+        if (isPrimitiveSelected(kind, name)) {
+          onSelectPrimitive(null);
+        } else {
+          onSelectPrimitive({ serverId: server.id, kind, name });
+        }
+      }
+    },
+    [onSelectPrimitive, server.id, isPrimitiveSelected]
+  );
+
+  // Get primitives (only for connected servers)
+  const tools = "tools" in server ? server.tools : [];
+  const resources = "resources" in server ? server.resources : [];
+  const prompts = "prompts" in server ? server.prompts : [];
+
+  // Filter primitives by search
+  const q = searchFilter.toLowerCase();
+  const filteredTools = q ? tools.filter((t) => t.name.toLowerCase().includes(q)) : tools;
+  const filteredResources = q
+    ? resources.filter((r) => r.name.toLowerCase().includes(q))
+    : resources;
+  const filteredPrompts = q ? prompts.filter((p) => p.name.toLowerCase().includes(q)) : prompts;
+
+  // If searching and no matches, hide the server block
+  if (
+    q &&
+    filteredTools.length === 0 &&
+    filteredResources.length === 0 &&
+    filteredPrompts.length === 0
+  ) {
+    return null;
+  }
+
+  const handleButtonClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isConnected && onStop) {
+      onStop();
+    } else if (!isConnected && onStart) {
+      onStart();
+    }
+  };
+
+  return (
+    <div
+      style={{
+        ...localStyles.serverBlock,
+        ...(!isConnected ? localStyles.serverBlockStopped : {}),
+      }}
+    >
+      {/* Server header */}
+      <div
+        style={localStyles.serverHeader}
+        onClick={() => setIsExpanded(!isExpanded)}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setIsExpanded(!isExpanded);
+          }
+        }}
+        aria-expanded={isExpanded}
+        data-testid={`server-block-header-${server.id}`}
+      >
+        <span
+          style={{
+            ...localStyles.serverName,
+            ...(!isConnected ? localStyles.serverNameStopped : {}),
+          }}
+        >
+          {server.name || server.url}
+        </span>
+        <button
+          style={{
+            ...localStyles.serverButton,
+            ...(isReconnecting ? { cursor: "default", opacity: 0.6 } : {}),
+          }}
+          onClick={handleButtonClick}
+          onMouseEnter={(e) => {
+            if (!isReconnecting) e.currentTarget.style.opacity = "1";
+          }}
+          onMouseLeave={(e) => {
+            if (!isReconnecting) e.currentTarget.style.opacity = "0.8";
+          }}
+          disabled={isReconnecting}
+          title={isReconnecting ? "Connecting..." : isConnected ? "Stop server" : "Start server"}
+          data-testid={`server-${isConnected ? "stop" : "start"}-btn-${server.id}`}
+        >
+          {isReconnecting ? (
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              style={{ animation: "spin 1s linear infinite" }}
+            >
+              <circle cx="12" cy="12" r="10" opacity="0.25" />
+              <path d="M12 2a10 10 0 0 1 10 10" />
+            </svg>
+          ) : isConnected ? (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <rect x="6" y="6" width="12" height="12" rx="1" />
+            </svg>
+          ) : (
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+              <polygon points="8,5 19,12 8,19" />
+            </svg>
+          )}
+        </button>
+        {onDelete && (
+          <button
+            style={localStyles.deleteButton}
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.color = "#ef4444";
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.color = "#6b7280";
+            }}
+            title="Remove server"
+            data-testid={`server-delete-btn-${server.id}`}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <polyline points="3 6 5 6 21 6" />
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {/* Server content */}
+      <AnimatedCollapse isOpen={isExpanded}>
+        {/* Server info - horizontal chips */}
+        <div style={localStyles.serverInfoContent} data-testid={`server-info-content-${server.id}`}>
+          <span style={localStyles.serverInfoChip}>
+            <span style={localStyles.serverInfoLabel}>status</span>
+            <span style={localStyles.serverInfoValue}>
+              {isConnected ? "running" : isReconnecting ? "connecting" : "stopped"}
+            </span>
+          </span>
+          <span style={localStyles.serverInfoChip}>
+            <span style={localStyles.serverInfoLabel}>transport</span>
+            <span style={localStyles.serverInfoValue}>
+              {"params" in server && server.params?.transport ? server.params.transport : "—"}
+            </span>
+          </span>
+          {"serverInfo" in server && server.serverInfo?.version && (
+            <span style={localStyles.serverInfoChip}>
+              <span style={localStyles.serverInfoLabel}>v</span>
+              <span style={localStyles.serverInfoValue}>{server.serverInfo.version}</span>
+            </span>
+          )}
+          {"capabilities" in server && getEnabledCapabilities(server.capabilities).length > 0 && (
+            <span style={localStyles.serverInfoChip}>
+              <span style={localStyles.serverInfoLabel}>caps</span>
+              <span style={localStyles.serverInfoValue}>
+                {getEnabledCapabilities(server.capabilities).join(", ")}
+              </span>
+            </span>
+          )}
+        </div>
+
+        {isConnected ? (
+          <div style={localStyles.serverContent}>
+            {/* Tools section */}
+            {filteredTools.length > 0 && (
+              <div style={localStyles.kindSection}>
+                <div style={localStyles.kindHeader}>Tools</div>
+                {filteredTools.map((tool) => {
+                  const isSelected = isPrimitiveSelected("tool", tool.name);
+                  return (
+                    <div
+                      key={tool.name}
+                      style={{
+                        ...localStyles.primitiveItem,
+                        ...(isSelected
+                          ? localStyles.primitiveItemActive
+                          : hoveredItem === `tool-${tool.name}`
+                            ? localStyles.primitiveItemHover
+                            : {}),
+                      }}
+                      onClick={() => handlePrimitiveClick("tool", tool.name)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handlePrimitiveClick("tool", tool.name);
+                        }
+                      }}
+                      onMouseEnter={() => setHoveredItem(`tool-${tool.name}`)}
+                      onMouseLeave={() => setHoveredItem(null)}
+                      role="button"
+                      tabIndex={0}
+                      aria-selected={isSelected}
+                      data-testid={`tool-item-${tool.name}`}
+                    >
+                      <span style={localStyles.primitiveName}>{tool.name}</span>
+                      {hasToolUI(tool) && <span style={localStyles.widgetBadge}>Widget</span>}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* Resources section */}
+            {filteredResources.length > 0 && (
+              <div style={localStyles.kindSection}>
+                <div style={localStyles.kindHeader}>Resources</div>
+                {filteredResources.map((resource) => {
+                  const isSelected = isPrimitiveSelected("resource", resource.name);
+                  return (
+                    <div
+                      key={resource.uri}
+                      style={{
+                        ...localStyles.primitiveItem,
+                        ...(isSelected
+                          ? localStyles.primitiveItemActive
+                          : hoveredItem === `resource-${resource.uri}`
+                            ? localStyles.primitiveItemHover
+                            : {}),
+                      }}
+                      onClick={() => handlePrimitiveClick("resource", resource.name)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handlePrimitiveClick("resource", resource.name);
+                        }
+                      }}
+                      onMouseEnter={() => setHoveredItem(`resource-${resource.uri}`)}
+                      onMouseLeave={() => setHoveredItem(null)}
+                      role="button"
+                      tabIndex={0}
+                      aria-selected={isSelected}
+                      data-testid={`resource-item-${resource.name}`}
+                    >
+                      <span style={localStyles.primitiveName}>{resource.name}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* Prompts section */}
+            {filteredPrompts.length > 0 && (
+              <div style={localStyles.kindSection}>
+                <div style={localStyles.kindHeader}>Prompts</div>
+                {filteredPrompts.map((prompt) => {
+                  const isSelected = isPrimitiveSelected("prompt", prompt.name);
+                  return (
+                    <div
+                      key={prompt.name}
+                      style={{
+                        ...localStyles.primitiveItem,
+                        ...(isSelected
+                          ? localStyles.primitiveItemActive
+                          : hoveredItem === `prompt-${prompt.name}`
+                            ? localStyles.primitiveItemHover
+                            : {}),
+                      }}
+                      onClick={() => handlePrimitiveClick("prompt", prompt.name)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handlePrimitiveClick("prompt", prompt.name);
+                        }
+                      }}
+                      onMouseEnter={() => setHoveredItem(`prompt-${prompt.name}`)}
+                      onMouseLeave={() => setHoveredItem(null)}
+                      role="button"
+                      tabIndex={0}
+                      aria-selected={isSelected}
+                      data-testid={`prompt-item-${prompt.name}`}
+                    >
+                      <span style={localStyles.primitiveName}>{prompt.name}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* Empty state when server is connected but has no primitives */}
+            {filteredTools.length === 0 &&
+              filteredResources.length === 0 &&
+              filteredPrompts.length === 0 && (
+                <div style={localStyles.stoppedMessage}>No primitives available</div>
+              )}
+          </div>
+        ) : (
+          <div style={localStyles.stoppedMessage}>Server stopped</div>
+        )}
+      </AnimatedCollapse>
+    </div>
+  );
+}
+
+// =============================================================================
+// Legacy Tab Type (for backward compatibility)
+// =============================================================================
+
+type TabType = "tools" | "resources" | "prompts";
+
+// =============================================================================
+// Legacy Card Components (for backward compatibility with tests)
 // =============================================================================
 
 function ToolCard({ tool }: { tool: McpTool }): React.ReactElement {
@@ -687,7 +1354,7 @@ function ToolCard({ tool }: { tool: McpTool }): React.ReactElement {
   const hasUI = hasToolUI(tool);
 
   return (
-    <div style={localStyles.card}>
+    <div style={localStyles.card} data-testid={`tool-card-${tool.name}`}>
       <div
         style={localStyles.cardHeaderClickable}
         onClick={() => setIsExpanded((prev) => !prev)}
@@ -704,7 +1371,7 @@ function ToolCard({ tool }: { tool: McpTool }): React.ReactElement {
       >
         <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0 }}>
           <span style={localStyles.expandIndicator}>{isExpanded ? "▼" : "▶"}</span>
-          <span style={localStyles.cardName}>{tool.name}</span>
+          <span style={{ ...localStyles.cardName, fontFamily: FONT_SANS }}>{tool.name}</span>
           {hasUI && <span style={localStyles.widgetBadge}>Widget</span>}
         </div>
       </div>
@@ -753,7 +1420,7 @@ function ResourceCard({ resource }: { resource: McpResource }): React.ReactEleme
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <div style={localStyles.card}>
+    <div style={localStyles.card} data-testid={`resource-card-${resource.uri}`}>
       <div
         style={localStyles.cardHeaderClickable}
         onClick={() => setIsExpanded((prev) => !prev)}
@@ -770,7 +1437,7 @@ function ResourceCard({ resource }: { resource: McpResource }): React.ReactEleme
       >
         <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0 }}>
           <span style={localStyles.expandIndicator}>{isExpanded ? "▼" : "▶"}</span>
-          <span style={localStyles.cardName}>{resource.name}</span>
+          <span style={{ ...localStyles.cardName, fontFamily: FONT_SANS }}>{resource.name}</span>
         </div>
       </div>
       <AnimatedCollapse isOpen={isExpanded}>
@@ -796,7 +1463,7 @@ function PromptCard({ prompt }: { prompt: McpPrompt }): React.ReactElement {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <div style={localStyles.card}>
+    <div style={localStyles.card} data-testid={`prompt-card-${prompt.name}`}>
       <div
         style={localStyles.cardHeaderClickable}
         onClick={() => setIsExpanded((prev) => !prev)}
@@ -813,7 +1480,7 @@ function PromptCard({ prompt }: { prompt: McpPrompt }): React.ReactElement {
       >
         <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0 }}>
           <span style={localStyles.expandIndicator}>{isExpanded ? "▼" : "▶"}</span>
-          <span style={localStyles.cardName}>{prompt.name}</span>
+          <span style={{ ...localStyles.cardName, fontFamily: FONT_SANS }}>{prompt.name}</span>
         </div>
       </div>
       <AnimatedCollapse isOpen={isExpanded}>
@@ -831,30 +1498,100 @@ function PromptCard({ prompt }: { prompt: McpPrompt }): React.ReactElement {
 }
 
 // =============================================================================
-// Main Component
+// Legacy Panel Styles (for backward compatibility)
+// =============================================================================
+
+const legacyStyles: Record<string, React.CSSProperties> = {
+  panelCenter: {
+    width: "100%",
+    height: "100%",
+    border: "1px solid #2d2f2f",
+    borderRadius: "8px",
+  },
+  panelCenterAppear: {
+    animation: "panelAppear 0.4s ease-out forwards",
+  },
+  legacyHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "0.75rem 1rem",
+    backgroundColor: "#0a0a0a",
+    borderBottom: "1px solid #1a1a1a",
+    flexShrink: 0,
+  },
+  title: {
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    color: "#9ca3af",
+    textTransform: "uppercase" as const,
+    letterSpacing: "0.05em",
+  },
+  tabs: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.25rem",
+    padding: "0.5rem 0.75rem",
+    backgroundColor: "#0a0a0a",
+    borderBottom: "1px solid #1a1a1a",
+    flexShrink: 0,
+  },
+  tab: {
+    fontFamily: "inherit",
+    backgroundColor: "transparent",
+    border: "1px solid #3d4040",
+    color: "#9ca3af",
+    padding: "0.375rem 0.75rem",
+    borderRadius: "4px",
+    fontSize: "0.6875rem",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.375rem",
+  },
+  tabActive: {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+    borderColor: "#ffffff",
+    color: "#ffffff",
+  },
+  tabCount: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    padding: "0.125rem 0.375rem",
+    borderRadius: "3px",
+    fontSize: "0.5625rem",
+    fontWeight: 500,
+  },
+  tabCountActive: {
+    backgroundColor: "rgba(255, 255, 255, 0.25)",
+  },
+};
+
+// =============================================================================
+// Legacy Panel Content (for backward compatibility with tests)
 // =============================================================================
 
-export function McpPrimitivesPanel({
+function LegacyPanelContent({
   tools,
   resources,
   prompts,
   isLoading,
   isVisible,
-  isCollapsed = false,
+  isCollapsed,
   onToggleCollapse,
   position,
   panelWidth,
   resizeHandleProps,
   isResizing,
-}: McpPrimitivesPanelProps): React.ReactElement {
+}: McpPrimitivesPanelLegacyProps): React.ReactElement {
   const [activeTab, setActiveTab] = useState<TabType>("tools");
 
   // Build panel styles based on position and visibility
   const panelStyle: React.CSSProperties = {
     ...localStyles.panel,
-    ...(position === "left" ? localStyles.panelLeft : localStyles.panelCenter),
+    ...(position === "left" ? {} : legacyStyles.panelCenter),
     ...(position === "left" && !isVisible ? localStyles.panelCollapsed : {}),
-    ...(position === "center" ? localStyles.panelCenterAppear : {}),
+    ...(position === "center" ? legacyStyles.panelCenterAppear : {}),
     ...(position === "left" && panelWidth ? { width: panelWidth } : {}),
   };
 
@@ -928,21 +1665,21 @@ export function McpPrimitivesPanel({
       <>
         <div style={panelStyle}>
           <KeyframeStyles />
-          <div style={localStyles.tabs}>
+          <div style={legacyStyles.tabs}>
             {tabs.map((tab) => (
               <button
                 key={tab.type}
                 style={{
-                  ...localStyles.tab,
-                  ...(activeTab === tab.type ? localStyles.tabActive : {}),
+                  ...legacyStyles.tab,
+                  ...(activeTab === tab.type ? legacyStyles.tabActive : {}),
                 }}
                 onClick={() => setActiveTab(tab.type)}
               >
                 {tab.label}
                 <span
                   style={{
-                    ...localStyles.tabCount,
-                    ...(activeTab === tab.type ? localStyles.tabCountActive : {}),
+                    ...legacyStyles.tabCount,
+                    ...(activeTab === tab.type ? legacyStyles.tabCountActive : {}),
                   }}
                 >
                   {tab.count}
@@ -977,25 +1714,25 @@ export function McpPrimitivesPanel({
     <div style={panelStyle}>
       <KeyframeStyles />
       {position === "center" && (
-        <div style={localStyles.header}>
-          <span style={localStyles.title}>MCP Primitives</span>
+        <div style={legacyStyles.legacyHeader}>
+          <span style={legacyStyles.title}>MCP Primitives</span>
         </div>
       )}
-      <div style={localStyles.tabs}>
+      <div style={legacyStyles.tabs}>
         {tabs.map((tab) => (
           <button
             key={tab.type}
             style={{
-              ...localStyles.tab,
-              ...(activeTab === tab.type ? localStyles.tabActive : {}),
+              ...legacyStyles.tab,
+              ...(activeTab === tab.type ? legacyStyles.tabActive : {}),
             }}
             onClick={() => setActiveTab(tab.type)}
           >
             {tab.label}
             <span
               style={{
-                ...localStyles.tabCount,
-                ...(activeTab === tab.type ? localStyles.tabCountActive : {}),
+                ...legacyStyles.tabCount,
+                ...(activeTab === tab.type ? legacyStyles.tabCountActive : {}),
               }}
             >
               {tab.count}
@@ -1018,4 +1755,257 @@ export function McpPrimitivesPanel({
   );
 }
 
+// =============================================================================
+// New Server Blocks Content
+// =============================================================================
+
+function ServerBlocksContent({
+  servers,
+  stoppedConnections,
+  reconnectingServerId,
+  isLoading,
+  isVisible,
+  isCollapsed,
+  onToggleCollapse,
+  panelWidth,
+  resizeHandleProps,
+  isResizing,
+  onStopServer,
+  onStartServer,
+  onDeleteServer,
+  onAddServer,
+  onConnect,
+  isCreating,
+  connectionError,
+  selectedPrimitive,
+  onSelectPrimitive,
+  resolvedPrimitive,
+  onClosePrimitive,
+}: McpPrimitivesPanelNewProps): React.ReactElement {
+  const [searchFilter, setSearchFilter] = useState("");
+  const [isFormOpen, setIsFormOpen] = useState(false);
+
+  // Handle "+" button click - toggle inline form
+  const handleAddClick = useCallback(() => {
+    if (onConnect) {
+      // Use inline form
+      setIsFormOpen((prev) => !prev);
+    } else if (onAddServer) {
+      // Fall back to legacy behavior (opens header form)
+      onAddServer();
+    }
+  }, [onConnect, onAddServer]);
+
+  // Handle connection from inline form
+  const handleFormConnect = useCallback(
+    async (params: ConnectionParams): Promise<boolean> => {
+      if (!onConnect) return false;
+      const success = await onConnect(params);
+      if (success) {
+        setIsFormOpen(false);
+      }
+      return success;
+    },
+    [onConnect]
+  );
+
+  // Handle cancel from inline form
+  const handleFormCancel = useCallback(() => {
+    setIsFormOpen(false);
+  }, []);
+
+  // Build server history from stopped connections
+  const serverHistory = useMemo(() => {
+    return stoppedConnections.map((stopped) => ({
+      name: stopped.name || stopped.url,
+      params: stopped.params,
+    }));
+  }, [stoppedConnections]);
+
+  // Build panel styles
+  const panelStyle: React.CSSProperties = {
+    ...localStyles.panel,
+    ...(panelWidth ? { width: panelWidth } : {}),
+    ...(!isVisible || isCollapsed ? localStyles.panelCollapsed : {}),
+  };
+
+  // When not visible, hide completely
+  if (!isVisible) {
+    return <div style={panelStyle} />;
+  }
+
+  // When collapsed, show minimal expand button
+  if (isCollapsed) {
+    return (
+      <div
+        style={{
+          ...localStyles.panel,
+          width: "40px",
+          minWidth: "40px",
+        }}
+      >
+        <div
+          style={{
+            ...localStyles.headerTitle,
+            justifyContent: "center",
+            padding: "0.75rem 0.5rem",
+          }}
+        >
+          {onToggleCollapse && (
+            <button
+              style={localStyles.collapseBtn}
+              onClick={onToggleCollapse}
+              title="Expand sidebar"
+              data-testid="sidebar-expand-btn"
+            >
+              ☰
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const hasAnyServer = servers.length > 0 || stoppedConnections.length > 0;
+
+  return (
+    <>
+      <div style={panelStyle}>
+        <KeyframeStyles />
+        {/* Header row 1: collapse toggle + title */}
+        <div style={localStyles.headerTitle} data-testid="sidebar-header">
+          {onToggleCollapse && (
+            <button
+              style={localStyles.collapseBtn}
+              onClick={onToggleCollapse}
+              title="Collapse sidebar"
+              data-testid="sidebar-collapse-btn"
+            >
+              ✕
+            </button>
+          )}
+          <span style={localStyles.headerTitleText}>MCP Explorer</span>
+        </div>
+
+        {/* Header row 2: search + add button */}
+        <div style={localStyles.headerSearch} data-testid="sidebar-search-row">
+          <input
+            type="text"
+            placeholder="Search..."
+            value={searchFilter}
+            onChange={(e) => setSearchFilter(e.target.value)}
+            style={localStyles.searchInput}
+            data-testid="sidebar-search-input"
+          />
+          <button
+            style={localStyles.addButton}
+            onClick={handleAddClick}
+            title="Add server"
+            data-testid="add-server-btn"
+          >
+            +
+          </button>
+        </div>
+
+        {/* Inline connection form (shown when "+" is clicked) */}
+        <SidebarConnectionForm
+          isOpen={isFormOpen}
+          isCreating={isCreating}
+          error={connectionError}
+          onConnect={handleFormConnect}
+          onCancel={handleFormCancel}
+          serverHistory={serverHistory}
+        />
+
+        {/* Content */}
+        <div style={localStyles.content}>
+          {/* Show PrimitiveDetail when a primitive is selected */}
+          {/* Server list - always rendered, detail slides over it */}
+          {isLoading && servers.length === 0 && stoppedConnections.length === 0 ? (
+            <div style={localStyles.loadingState}>
+              <Spinner />
+              <span>Loading...</span>
+            </div>
+          ) : !hasAnyServer && !isFormOpen ? (
+            <div style={localStyles.emptyState}>
+              <span>No servers connected</span>
+              <button
+                style={{
+                  ...localStyles.addButton,
+                  padding: "0.5rem 1rem",
+                }}
+                onClick={handleAddClick}
+              >
+                + Connect Server
+              </button>
+            </div>
+          ) : (
+            <>
+              {/* Active servers */}
+              {servers.map((server) => (
+                <ServerBlock
+                  key={server.id}
+                  server={server}
+                  isConnected={true}
+                  searchFilter={searchFilter}
+                  onStop={() => onStopServer?.(server.id)}
+                  onDelete={() => onDeleteServer?.(server.id, true)}
+                  selectedPrimitive={selectedPrimitive}
+                  onSelectPrimitive={onSelectPrimitive}
+                />
+              ))}
+
+              {/* Stopped servers */}
+              {stoppedConnections.map((stopped) => (
+                <ServerBlock
+                  key={`stopped-${stopped.id}`}
+                  server={stopped}
+                  isConnected={false}
+                  isReconnecting={reconnectingServerId === stopped.id}
+                  searchFilter={searchFilter}
+                  onStart={() => onStartServer?.(stopped)}
+                  onDelete={() => onDeleteServer?.(stopped.id, false)}
+                />
+              ))}
+            </>
+          )}
+
+          {/* Slide-over detail panel */}
+          <SlideOverDetail isVisible={!!resolvedPrimitive}>
+            {resolvedPrimitive && (
+              <PrimitiveDetail primitive={resolvedPrimitive} onClose={onClosePrimitive} />
+            )}
+          </SlideOverDetail>
+        </div>
+      </div>
+
+      {/* Resize handle */}
+      {resizeHandleProps && (
+        <div
+          {...resizeHandleProps}
+          style={{
+            ...localStyles.resizeHandle,
+            ...(isResizing ? localStyles.resizeHandleActive : {}),
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+// =============================================================================
+// Main Component - Supports both Legacy and New APIs
+// =============================================================================
+
+export function McpPrimitivesPanel(props: McpPrimitivesPanelProps): React.ReactElement {
+  // Use type guard to determine which API is being used
+  if (isLegacyProps(props)) {
+    return <LegacyPanelContent {...props} />;
+  }
+  return <ServerBlocksContent {...props} />;
+}
+
 export default McpPrimitivesPanel;
+
+// Re-export types for backward compatibility
+export type { McpTool, McpResource, McpPrompt };
diff --git a/packages/inspector/src/dashboard/react/components/NoWidgetPlaceholder.tsx b/packages/inspector/src/dashboard/react/components/NoWidgetPlaceholder.tsx
index 7697ae4f..535e518a 100644
--- a/packages/inspector/src/dashboard/react/components/NoWidgetPlaceholder.tsx
+++ b/packages/inspector/src/dashboard/react/components/NoWidgetPlaceholder.tsx
@@ -20,24 +20,8 @@ export interface NoWidgetPlaceholderProps {
   connectionState: ConnectionState;
   /** Name of connected agent client (only set when agent-connected) */
   clientName?: string;
-  /** Callback when user clicks Connect Server button */
-  onConnect: () => void;
 }
 
-/**
- * Module-level button hover handlers.
- * Extracted from inline handlers for memoization — these don't depend on component state.
- */
-const handleButtonHover = (e: React.MouseEvent<HTMLButtonElement>) => {
-  e.currentTarget.style.opacity = "0.9";
-  e.currentTarget.style.transform = "scale(1.02)";
-};
-
-const handleButtonLeave = (e: React.MouseEvent<HTMLButtonElement>) => {
-  e.currentTarget.style.opacity = "1";
-  e.currentTarget.style.transform = "scale(1)";
-};
-
 /** Local styles for the stepped tutorial layout */
 const localStyles: Record<string, CSSProperties> = {
   tagline: {
@@ -66,18 +50,6 @@ const localStyles: Record<string, CSSProperties> = {
     color: "#e8e8e8",
     fontWeight: 600,
   },
-  connectButton: {
-    backgroundColor: "#ffffff",
-    color: "#000000",
-    border: "none",
-    borderRadius: "8px",
-    padding: "0.625rem 1.25rem",
-    fontSize: "0.875rem",
-    fontWeight: 500,
-    fontFamily: "inherit",
-    cursor: "pointer",
-    transition: "opacity 0.15s ease, transform 0.15s ease",
-  },
   stateContent: {
     display: "flex",
     flexDirection: "column" as const,
@@ -90,7 +62,6 @@ const localStyles: Record<string, CSSProperties> = {
 export function NoWidgetPlaceholder({
   connectionState,
   clientName,
-  onConnect,
 }: NoWidgetPlaceholderProps): React.ReactElement {
   return (
     <div style={styles.noWidgetWrapper}>
@@ -105,16 +76,10 @@ export function NoWidgetPlaceholder({
         {connectionState === "no-server" && (
           <>
             <h2 style={localStyles.heading}>Connect the server you want to inspect</h2>
-            <button
-              type="button"
-              aria-label="Connect to MCP server"
-              style={localStyles.connectButton}
-              onClick={onConnect}
-              onMouseEnter={handleButtonHover}
-              onMouseLeave={handleButtonLeave}
-            >
-              Connect Server
-            </button>
+            <p style={localStyles.subtext}>
+              Use the <strong style={{ color: "#e8e8e8" }}>+</strong> button in the sidebar to add a
+              connection
+            </p>
           </>
         )}
 
diff --git a/packages/inspector/src/dashboard/react/components/PrimitiveDetail.tsx b/packages/inspector/src/dashboard/react/components/PrimitiveDetail.tsx
new file mode 100644
index 00000000..343a1902
--- /dev/null
+++ b/packages/inspector/src/dashboard/react/components/PrimitiveDetail.tsx
@@ -0,0 +1,1412 @@
+/**
+ * PrimitiveDetail Component
+ *
+ * Displays detailed information about a selected MCP primitive (tool, resource, or prompt).
+ * Browse mode shows read-only details; action mode allows execution.
+ */
+
+import React, { useState, useCallback, useEffect } from "react";
+import type {
+  McpTool,
+  McpResource,
+  McpPrompt,
+  JsonSchemaProperty,
+  McpPromptArgument,
+} from "../types/mcp-primitives";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/** Union type for all primitive kinds */
+export type Primitive =
+  | (McpTool & { kind: "tool" })
+  | (McpResource & { kind: "resource" })
+  | (McpPrompt & { kind: "prompt" });
+
+/** Content block in tool/resource results */
+export interface ContentBlock {
+  type: string;
+  text?: string;
+  data?: string;
+  mimeType?: string;
+}
+
+/** Resource content in read results */
+export interface ResourceContent {
+  uri: string;
+  mimeType?: string;
+  text?: string;
+  blob?: string;
+}
+
+/** Message in prompt results */
+export interface PromptMessage {
+  role: "user" | "assistant";
+  content: string | ContentBlock[];
+}
+
+/** Execution result metadata */
+export interface ExecutionMeta {
+  requestId?: string;
+  serverName?: string;
+  duration_ms?: number;
+  cached?: boolean;
+  promptName?: string;
+  [key: string]: unknown;
+}
+
+/** Execution result type */
+export interface ExecutionResult {
+  ok: boolean;
+  error?: string;
+  content?: ContentBlock[];
+  contents?: ResourceContent[];
+  messages?: PromptMessage[];
+  structuredContent?: unknown;
+  _meta?: ExecutionMeta;
+}
+
+/** Execute function signature */
+export type ExecuteFn = (
+  primitive: Primitive,
+  params: Record<string, unknown>
+) => Promise<ExecutionResult>;
+
+/** Props for the PrimitiveDetail component */
+export interface PrimitiveDetailProps {
+  /** The primitive to display */
+  primitive: Primitive;
+  /** Callback when action button is clicked (browse mode) - for external mode management */
+  onAction?: (primitive: Primitive) => void;
+  /** Callback to execute the primitive - if not provided, mock execution is used */
+  onExecute?: ExecuteFn;
+  /** Callback when back/close is requested */
+  onClose?: () => void;
+}
+
+// =============================================================================
+// Mock Data
+// =============================================================================
+
+const MOCK_TOOL_RESULT: ExecutionResult = {
+  ok: true,
+  content: [
+    {
+      type: "text",
+      text: "# Weekly Sync Notes\n\nAttendees: @alice, @bob\n\n## Updates\n- Project Alpha: on track\n- Project Beta: blocked on API review",
+    },
+  ],
+  structuredContent: {
+    page: {
+      id: "a1b2c3d4",
+      title: "Weekly Sync Notes",
+      type: "page",
+      properties: { Status: "Active", Tags: ["meetings", "weekly"] },
+    },
+  },
+  _meta: { requestId: "req_8f3a2b1c", serverName: "mock-mcp", duration_ms: 243, cached: false },
+};
+
+const MOCK_RESOURCE_RESULT: ExecutionResult = {
+  ok: true,
+  contents: [
+    {
+      uri: "mock://docs/spec",
+      mimeType: "text/markdown",
+      text: "# Enhanced Markdown Spec v2.1\n\n## Callouts\nUse > [!type] syntax\n\n## Toggle Blocks\nWrapped in <details> tags",
+    },
+  ],
+  _meta: { requestId: "req_4d7e9f2a", serverName: "mock-mcp", duration_ms: 87, cached: true },
+};
+
+const MOCK_PROMPT_RESULT: ExecutionResult = {
+  ok: true,
+  messages: [
+    {
+      role: "user",
+      content:
+        "Please summarize the following page.\n\nPage URL: https://example.com/page\nStyle: brief",
+    },
+  ],
+  _meta: { requestId: "req_1c5b8e3d", serverName: "mock-mcp", promptName: "summarize-page" },
+};
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+const FONT_MONO =
+  "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace";
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    backgroundColor: "#111111",
+    border: "1px solid #2d2f2f",
+    borderRadius: "6px",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  // Header
+  header: {
+    padding: "12px 16px",
+    borderBottom: "1px solid #2d2f2f",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flexWrap: "wrap",
+    backgroundColor: "#0d0e0e",
+  },
+  name: {
+    fontSize: "1rem",
+    fontWeight: 600,
+    color: "#e8e8e8",
+    margin: 0,
+  },
+  tag: {
+    display: "inline-flex",
+    alignItems: "center",
+    border: "1px solid #3d4040",
+    borderRadius: "3px",
+    padding: "2px 8px",
+    fontSize: "0.6875rem",
+    color: "#9ca3af",
+    whiteSpace: "nowrap",
+  },
+  tagKind: {
+    backgroundColor: "rgba(32, 178, 170, 0.15)",
+    borderColor: "#20b2aa",
+    color: "#20b2aa",
+  },
+  tagReadOnly: {
+    backgroundColor: "rgba(96, 165, 250, 0.15)",
+    borderColor: "#60a5fa",
+    color: "#60a5fa",
+  },
+  tagIdempotent: {
+    backgroundColor: "rgba(167, 139, 250, 0.15)",
+    borderColor: "#a78bfa",
+    color: "#a78bfa",
+  },
+  tagDestructive: {
+    backgroundColor: "rgba(239, 68, 68, 0.15)",
+    borderColor: "#ef4444",
+    color: "#ef4444",
+  },
+  tagMimeType: {
+    backgroundColor: "rgba(251, 191, 36, 0.15)",
+    borderColor: "#fbbf24",
+    color: "#fbbf24",
+  },
+  tagActionMode: {
+    backgroundColor: "rgba(34, 197, 94, 0.15)",
+    borderColor: "#22c55e",
+    color: "#22c55e",
+  },
+  annotations: {
+    display: "flex",
+    gap: "4px",
+    marginLeft: "auto",
+    flexWrap: "wrap",
+  },
+  // Body
+  body: {
+    padding: "16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    flex: 1,
+    overflowY: "auto",
+  },
+  summary: {
+    fontSize: "0.8125rem",
+    lineHeight: 1.6,
+    color: "#d1d5db",
+    margin: 0,
+  },
+  // Collapsible description
+  collapsibleToggle: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    cursor: "pointer",
+    userSelect: "none",
+    padding: "4px 0",
+    fontSize: "0.75rem",
+    color: "#9ca3af",
+    border: "none",
+    background: "none",
+    textAlign: "left",
+  },
+  collapsibleIcon: {
+    fontSize: "0.625rem",
+    width: "12px",
+  },
+  descriptionContent: {
+    paddingLeft: "18px",
+    paddingTop: "8px",
+  },
+  descriptionText: {
+    fontSize: "0.75rem",
+    lineHeight: 1.6,
+    color: "#9ca3af",
+    margin: 0,
+  },
+  descriptionParagraph: {
+    marginTop: "6px",
+  },
+  // URI section (resources)
+  section: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+  },
+  sectionTitle: {
+    fontSize: "0.6875rem",
+    fontWeight: 600,
+    color: "#6b7280",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+  },
+  uriBox: {
+    fontFamily: FONT_MONO,
+    fontSize: "0.75rem",
+    color: "#ce9178",
+    backgroundColor: "rgba(206, 145, 120, 0.1)",
+    padding: "8px 12px",
+    borderRadius: "4px",
+    wordBreak: "break-all",
+    border: "1px solid #2d2f2f",
+  },
+  // Parameters section
+  paramList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+  },
+  paramItem: {
+    padding: "8px 0",
+    borderBottom: "1px solid #1a1a1a",
+  },
+  paramItemLast: {
+    borderBottom: "none",
+  },
+  paramHeader: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flexWrap: "wrap",
+  },
+  paramName: {
+    fontFamily: FONT_MONO,
+    fontSize: "0.8125rem",
+    color: "#ffffff",
+    fontWeight: 500,
+  },
+  paramType: {
+    fontFamily: FONT_MONO,
+    fontSize: "0.6875rem",
+    color: "#c4b5fd",
+    backgroundColor: "rgba(196, 181, 253, 0.1)",
+    padding: "1px 6px",
+    borderRadius: "3px",
+  },
+  paramRequired: {
+    fontSize: "0.6875rem",
+    color: "#ef9a9a",
+    backgroundColor: "rgba(239, 154, 154, 0.1)",
+    padding: "1px 6px",
+    borderRadius: "3px",
+  },
+  paramOptional: {
+    fontSize: "0.6875rem",
+    color: "#9ca3af",
+    backgroundColor: "rgba(156, 163, 175, 0.1)",
+    padding: "1px 6px",
+    borderRadius: "3px",
+  },
+  paramDesc: {
+    fontSize: "0.6875rem",
+    color: "#6b7280",
+    lineHeight: 1.5,
+    marginTop: "4px",
+    paddingLeft: "2px",
+  },
+  // Footer
+  footer: {
+    padding: "12px 16px",
+    borderTop: "1px solid #2d2f2f",
+    display: "flex",
+    gap: "8px",
+    backgroundColor: "#0d0e0e",
+  },
+  button: {
+    fontFamily: "inherit",
+    fontSize: "0.75rem",
+    padding: "8px 14px",
+    borderRadius: "4px",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+  },
+  buttonSecondary: {
+    backgroundColor: "transparent",
+    border: "1px solid #3d4040",
+    color: "#9ca3af",
+  },
+  buttonPrimary: {
+    backgroundColor: "#ffffff",
+    border: "1px solid #ffffff",
+    color: "#000000",
+    fontWeight: 500,
+  },
+  buttonDisabled: {
+    backgroundColor: "transparent",
+    border: "1px solid #3d4040",
+    color: "#6b7280",
+    cursor: "not-allowed",
+  },
+  copySuccess: {
+    borderColor: "#22c55e",
+    color: "#22c55e",
+    backgroundColor: "rgba(34, 197, 94, 0.1)",
+  },
+  // Form styles
+  formField: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+  },
+  input: {
+    fontFamily: FONT_MONO,
+    fontSize: "0.75rem",
+    padding: "8px 12px",
+    backgroundColor: "#1a1a1a",
+    border: "1px solid #3d4040",
+    borderRadius: "4px",
+    color: "#e8e8e8",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box",
+  },
+  textarea: {
+    fontFamily: FONT_MONO,
+    fontSize: "0.75rem",
+    padding: "8px 12px",
+    backgroundColor: "#1a1a1a",
+    border: "1px solid #3d4040",
+    borderRadius: "4px",
+    color: "#e8e8e8",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box",
+    resize: "vertical",
+    minHeight: "80px",
+  },
+  toggleButton: {
+    fontFamily: "inherit",
+    fontSize: "0.75rem",
+    padding: "8px 16px",
+    borderRadius: "4px",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+    border: "1px solid #3d4040",
+    backgroundColor: "transparent",
+    color: "#9ca3af",
+  },
+  toggleButtonActive: {
+    backgroundColor: "rgba(34, 197, 94, 0.15)",
+    borderColor: "#22c55e",
+    color: "#22c55e",
+  },
+  // Response panel styles
+  responsePanel: {
+    marginTop: "8px",
+  },
+  responsePanelTitle: {
+    fontSize: "0.6875rem",
+    fontWeight: 600,
+    color: "#6b7280",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    marginBottom: "8px",
+  },
+  responseBox: {
+    border: "1px solid #2d2f2f",
+    borderRadius: "4px",
+    overflow: "hidden",
+  },
+  responseStatus: {
+    padding: "8px 12px",
+    borderBottom: "1px solid #2d2f2f",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "0.75rem",
+  },
+  statusDot: {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    border: "1px solid #9ca3af",
+  },
+  statusDotSuccess: {
+    backgroundColor: "transparent",
+    borderColor: "#22c55e",
+  },
+  statusDotError: {
+    backgroundColor: "#ef4444",
+    borderColor: "#ef4444",
+  },
+  statusText: {
+    color: "#d1d5db",
+  },
+  durationText: {
+    marginLeft: "auto",
+    fontSize: "0.6875rem",
+    color: "#6b7280",
+  },
+  responseSection: {
+    borderTop: "1px solid #2d2f2f",
+  },
+  responseSectionHeader: {
+    padding: "8px 12px",
+    cursor: "pointer",
+    fontSize: "0.75rem",
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    backgroundColor: "transparent",
+    border: "none",
+    width: "100%",
+    textAlign: "left",
+    color: "#d1d5db",
+  },
+  responseSectionTitle: {
+    fontWeight: 600,
+    flex: 1,
+  },
+  responseSectionHint: {
+    fontSize: "0.625rem",
+    color: "#6b7280",
+  },
+  responseSectionContent: {
+    padding: "0 12px 12px",
+  },
+  contentBlock: {
+    marginBottom: "8px",
+  },
+  contentBlockFirst: {
+    marginBottom: "8px",
+  },
+  preText: {
+    fontFamily: FONT_MONO,
+    fontSize: "0.6875rem",
+    color: "#d1d5db",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    lineHeight: 1.6,
+    margin: "4px 0 0",
+    padding: "8px",
+    backgroundColor: "#0d0e0e",
+    borderRadius: "4px",
+    border: "1px solid #1a1a1a",
+  },
+  metaRow: {
+    display: "flex",
+    gap: "12px",
+    fontSize: "0.6875rem",
+    padding: "2px 0",
+    color: "#d1d5db",
+  },
+  metaKey: {
+    minWidth: "100px",
+    color: "#6b7280",
+  },
+  loadingSpinner: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    color: "#9ca3af",
+    fontSize: "0.75rem",
+  },
+  // Form footer buttons
+  formFooter: {
+    display: "flex",
+    gap: "8px",
+    paddingTop: "8px",
+  },
+};
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Format a JSON Schema property type for display
+ */
+function formatType(prop: JsonSchemaProperty): string {
+  if (prop.enum) {
+    const preview = prop.enum.slice(0, 3).join(" | ");
+    return prop.enum.length > 3 ? `${preview} | ...` : preview;
+  }
+  if (prop.type === "array" && prop.items) {
+    return `${formatType(prop.items)}[]`;
+  }
+  return prop.type || "unknown";
+}
+
+/**
+ * Get the summary text for a primitive (description or fallback)
+ */
+function getSummary(primitive: Primitive): string | undefined {
+  return primitive.description;
+}
+
+/**
+ * Get the action button label based on primitive kind
+ */
+function getActionLabel(kind: Primitive["kind"]): { icon: string; label: string } {
+  switch (kind) {
+    case "tool":
+      return { icon: "▶", label: "Run" };
+    case "resource":
+      return { icon: "↓", label: "Read" };
+    case "prompt":
+      return { icon: "→", label: "Use" };
+  }
+}
+
+/**
+ * Get mock result based on primitive kind
+ */
+function getMockResult(kind: Primitive["kind"]): ExecutionResult {
+  switch (kind) {
+    case "tool":
+      return MOCK_TOOL_RESULT;
+    case "resource":
+      return MOCK_RESOURCE_RESULT;
+    case "prompt":
+      return MOCK_PROMPT_RESULT;
+  }
+}
+
+/**
+ * Determine input type for a parameter based on its JSON Schema type
+ */
+function getInputType(schemaType: string): "text" | "number" | "boolean" | "object" {
+  switch (schemaType) {
+    case "number":
+    case "integer":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "object":
+    case "array":
+      return "object";
+    default:
+      return "text";
+  }
+}
+
+// =============================================================================
+// Sub-Components
+// =============================================================================
+
+/** Tag component for consistent styling */
+function Tag({
+  children,
+  variant,
+}: {
+  children: React.ReactNode;
+  variant?: "kind" | "readOnly" | "idempotent" | "destructive" | "mimeType" | "actionMode";
+}): React.ReactElement {
+  const variantStyles: Record<string, React.CSSProperties> = {
+    kind: styles.tagKind!,
+    readOnly: styles.tagReadOnly!,
+    idempotent: styles.tagIdempotent!,
+    destructive: styles.tagDestructive!,
+    mimeType: styles.tagMimeType!,
+    actionMode: styles.tagActionMode!,
+  };
+
+  return (
+    <span style={{ ...styles.tag, ...(variant ? variantStyles[variant] : {}) }}>{children}</span>
+  );
+}
+
+/** Parameters section for tools (browse mode) */
+function ParametersSection({
+  properties,
+  required = [],
+}: {
+  properties: Record<string, JsonSchemaProperty>;
+  required?: string[];
+}): React.ReactElement | null {
+  const entries = Object.entries(properties);
+  if (entries.length === 0) return null;
+
+  return (
+    <div style={styles.section}>
+      <div style={styles.sectionTitle}>Parameters</div>
+      <div style={styles.paramList}>
+        {entries.map(([name, prop], index) => (
+          <div
+            key={name}
+            style={{
+              ...styles.paramItem,
+              ...(index === entries.length - 1 ? styles.paramItemLast : {}),
+            }}
+            data-testid={`param-${name}`}
+          >
+            <div style={styles.paramHeader}>
+              <span style={styles.paramName}>{name}</span>
+              <span style={styles.paramType}>{formatType(prop)}</span>
+              <span style={required.includes(name) ? styles.paramRequired : styles.paramOptional}>
+                {required.includes(name) ? "required" : "optional"}
+              </span>
+            </div>
+            {prop.description && <div style={styles.paramDesc}>{prop.description}</div>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Arguments section for prompts (browse mode) */
+function ArgumentsSection({ args }: { args: McpPromptArgument[] }): React.ReactElement | null {
+  if (args.length === 0) return null;
+
+  return (
+    <div style={styles.section}>
+      <div style={styles.sectionTitle}>Arguments</div>
+      <div style={styles.paramList}>
+        {args.map((arg, index) => (
+          <div
+            key={arg.name}
+            style={{
+              ...styles.paramItem,
+              ...(index === args.length - 1 ? styles.paramItemLast : {}),
+            }}
+            data-testid={`arg-${arg.name}`}
+          >
+            <div style={styles.paramHeader}>
+              <span style={styles.paramName}>{arg.name}</span>
+              <span style={arg.required ? styles.paramRequired : styles.paramOptional}>
+                {arg.required ? "required" : "optional"}
+              </span>
+            </div>
+            {arg.description && <div style={styles.paramDesc}>{arg.description}</div>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Annotations tags for tools */
+function AnnotationTags({
+  annotations,
+}: {
+  annotations: McpTool["annotations"];
+}): React.ReactElement | null {
+  if (!annotations) return null;
+
+  const tags: React.ReactElement[] = [];
+
+  if (annotations.readOnlyHint) {
+    tags.push(
+      <Tag key="readOnly" variant="readOnly">
+        read-only
+      </Tag>
+    );
+  }
+
+  if (annotations.idempotentHint) {
+    tags.push(
+      <Tag key="idempotent" variant="idempotent">
+        idempotent
+      </Tag>
+    );
+  }
+
+  if (annotations.destructiveHint) {
+    tags.push(
+      <Tag key="destructive" variant="destructive">
+        ⚠ destructive
+      </Tag>
+    );
+  }
+
+  if (tags.length === 0) return null;
+
+  return <div style={styles.annotations}>{tags}</div>;
+}
+
+/** Copy JSON button with feedback */
+function CopyJsonButton({ data }: { data: unknown }): React.ReactElement {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      const textarea = document.createElement("textarea");
+      textarea.value = JSON.stringify(data, null, 2);
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    }
+  }, [data]);
+
+  return (
+    <button
+      style={{
+        ...styles.button,
+        ...styles.buttonSecondary,
+        ...(copied ? styles.copySuccess : {}),
+      }}
+      onClick={handleCopy}
+      title="Copy JSON definition to clipboard"
+      data-testid="copy-json-btn"
+    >
+      {copied ? "Copied!" : "Copy JSON"}
+    </button>
+  );
+}
+
+/** Loading spinner component */
+function LoadingSpinner({ text }: { text: string }): React.ReactElement {
+  return (
+    <span style={styles.loadingSpinner} data-testid="loading-spinner">
+      <span
+        style={{
+          display: "inline-block",
+          width: "12px",
+          height: "12px",
+          border: "2px solid #3d4040",
+          borderTopColor: "#9ca3af",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite",
+        }}
+      />
+      {text}
+      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+    </span>
+  );
+}
+
+// =============================================================================
+// Response Panel
+// =============================================================================
+
+/** Collapsible section within the response panel */
+function ResponseSection({
+  label,
+  defaultOpen,
+  children,
+}: {
+  label: string;
+  defaultOpen: boolean;
+  children: React.ReactNode;
+}): React.ReactElement {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div style={styles.responseSection}>
+      <button
+        style={styles.responseSectionHeader}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        data-testid={`response-section-${label}`}
+      >
+        <span style={styles.collapsibleIcon}>{isOpen ? "▾" : "▸"}</span>
+        <span style={styles.responseSectionTitle}>{label}</span>
+        <span style={styles.responseSectionHint}>{isOpen ? "collapse" : "expand"}</span>
+      </button>
+      {isOpen && <div style={styles.responseSectionContent}>{children}</div>}
+    </div>
+  );
+}
+
+/** Response panel showing execution results */
+function ResponsePanel({ result }: { result: ExecutionResult }): React.ReactElement {
+  const hasContent = !!(result.content || result.contents || result.messages);
+  const hasStructured = result.structuredContent !== undefined;
+  const hasMeta = result._meta !== undefined;
+
+  return (
+    <div style={styles.responsePanel} data-testid="response-panel">
+      <div style={styles.responsePanelTitle}>Response</div>
+      <div style={styles.responseBox}>
+        {/* Status row */}
+        <div style={styles.responseStatus}>
+          <span
+            style={{
+              ...styles.statusDot,
+              ...(result.ok ? styles.statusDotSuccess : styles.statusDotError),
+            }}
+          />
+          <span style={styles.statusText}>{result.ok ? "Success" : "Error"}</span>
+          {result._meta?.duration_ms !== undefined && (
+            <span style={styles.durationText}>{result._meta.duration_ms as number}ms</span>
+          )}
+        </div>
+
+        {/* Error message */}
+        {result.error !== undefined && !result.ok && (
+          <div style={{ padding: "8px 12px", color: "#ef4444", fontSize: "0.75rem" }}>
+            {String(result.error)}
+          </div>
+        )}
+
+        {/* Content section */}
+        {hasContent && (
+          <ResponseSection label="content" defaultOpen={true}>
+            {/* Tool content blocks */}
+            {result.content?.map((block, i) => (
+              <div key={i} style={i > 0 ? styles.contentBlock : styles.contentBlockFirst}>
+                <Tag>{block.type}</Tag>
+                <pre style={styles.preText}>{block.text || block.data || ""}</pre>
+              </div>
+            ))}
+
+            {/* Resource contents */}
+            {result.contents?.map((item, i) => (
+              <div key={i} style={i > 0 ? styles.contentBlock : styles.contentBlockFirst}>
+                <Tag variant="mimeType">{item.mimeType || "unknown"}</Tag>
+                <div style={{ fontSize: "0.625rem", color: "#6b7280", marginTop: "2px" }}>
+                  {item.uri}
+                </div>
+                <pre style={styles.preText}>{item.text || ""}</pre>
+              </div>
+            ))}
+
+            {/* Prompt messages */}
+            {result.messages?.map((msg, i) => (
+              <div key={i} style={i > 0 ? styles.contentBlock : styles.contentBlockFirst}>
+                <Tag>{msg.role}</Tag>
+                <pre style={styles.preText}>
+                  {typeof msg.content === "string"
+                    ? msg.content
+                    : JSON.stringify(msg.content, null, 2)}
+                </pre>
+              </div>
+            ))}
+          </ResponseSection>
+        )}
+
+        {/* Structured content section */}
+        {hasStructured && (
+          <ResponseSection label="structuredContent" defaultOpen={false}>
+            <pre style={styles.preText}>{JSON.stringify(result.structuredContent, null, 2)}</pre>
+          </ResponseSection>
+        )}
+
+        {/* Meta section */}
+        {hasMeta && result._meta && (
+          <ResponseSection label="_meta" defaultOpen={false}>
+            {Object.entries(result._meta).map(([key, value]) => (
+              <div key={key} style={styles.metaRow}>
+                <span style={styles.metaKey}>{key}</span>
+                <span>
+                  {typeof value === "object" ? JSON.stringify(value) : String(value as string)}
+                </span>
+              </div>
+            ))}
+          </ResponseSection>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// Action Mode Forms
+// =============================================================================
+
+/** Tool Run Form */
+function ToolRunForm({
+  tool,
+  onExecute,
+  onClose,
+}: {
+  tool: McpTool & { kind: "tool" };
+  onExecute?: ExecuteFn;
+  onClose: () => void;
+}): React.ReactElement {
+  const properties = tool.inputSchema?.properties || {};
+  const required = tool.inputSchema?.required || [];
+
+  // Initialize form values based on parameter types
+  const [values, setValues] = useState<Record<string, unknown>>(() => {
+    const initial: Record<string, unknown> = {};
+    for (const [name, prop] of Object.entries(properties)) {
+      const inputType = getInputType(prop.type);
+      if (inputType === "boolean") {
+        initial[name] = false;
+      } else if (inputType === "number") {
+        initial[name] = "";
+      } else {
+        initial[name] = "";
+      }
+    }
+    return initial;
+  });
+
+  const [isRunning, setIsRunning] = useState(false);
+  const [result, setResult] = useState<ExecutionResult | null>(null);
+
+  const setValue = (name: string, value: unknown) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  // Check if all required fields are filled
+  const isReady = required.every((name) => {
+    const val = values[name];
+    if (val === undefined || val === null || val === "") return false;
+    return true;
+  });
+
+  const handleRun = async () => {
+    setIsRunning(true);
+    setResult(null);
+
+    // Convert string values to proper types
+    const params: Record<string, unknown> = {};
+    for (const [name, prop] of Object.entries(properties)) {
+      const val = values[name];
+      const inputType = getInputType(prop.type);
+
+      if (val === "" || val === undefined) continue;
+
+      if (inputType === "number" && typeof val === "string") {
+        params[name] = parseFloat(val);
+      } else if (inputType === "object" && typeof val === "string") {
+        try {
+          params[name] = JSON.parse(val);
+        } catch {
+          params[name] = val; // Keep as string if invalid JSON
+        }
+      } else {
+        params[name] = val;
+      }
+    }
+
+    if (onExecute) {
+      try {
+        const res = await onExecute(tool, params);
+        setResult(res);
+      } catch (err) {
+        setResult({ ok: false, error: String(err) });
+      }
+    } else {
+      // Mock execution
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      setResult(getMockResult("tool"));
+    }
+
+    setIsRunning(false);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      {Object.entries(properties).map(([name, prop]) => {
+        const inputType = getInputType(prop.type);
+        const isRequired = required.includes(name);
+
+        return (
+          <div key={name} style={styles.formField} data-testid={`form-field-${name}`}>
+            <div style={styles.paramHeader}>
+              <span style={styles.paramName}>{name}</span>
+              <span style={styles.paramType}>{formatType(prop)}</span>
+              <span style={isRequired ? styles.paramRequired : styles.paramOptional}>
+                {isRequired ? "required" : "optional"}
+              </span>
+            </div>
+            {prop.description && <div style={styles.paramDesc}>{prop.description}</div>}
+
+            {inputType === "boolean" ? (
+              <button
+                type="button"
+                style={{
+                  ...styles.toggleButton,
+                  ...(values[name] ? styles.toggleButtonActive : {}),
+                }}
+                onClick={() => setValue(name, !values[name])}
+                data-testid={`input-${name}`}
+              >
+                {String(values[name])}
+              </button>
+            ) : inputType === "object" ? (
+              <textarea
+                style={styles.textarea as React.CSSProperties}
+                value={String(values[name] || "")}
+                onChange={(e) => setValue(name, e.target.value)}
+                placeholder="{}"
+                data-testid={`input-${name}`}
+              />
+            ) : (
+              <input
+                type={inputType === "number" ? "number" : "text"}
+                style={styles.input as React.CSSProperties}
+                value={String(values[name] || "")}
+                onChange={(e) => setValue(name, e.target.value)}
+                placeholder={`Enter ${name}…`}
+                data-testid={`input-${name}`}
+              />
+            )}
+          </div>
+        );
+      })}
+
+      <div style={styles.formFooter}>
+        <button
+          type="button"
+          disabled={!isReady || isRunning}
+          onClick={handleRun}
+          style={{
+            ...styles.button,
+            ...(isReady && !isRunning ? styles.buttonPrimary : styles.buttonDisabled),
+          }}
+          data-testid="run-btn"
+        >
+          {isRunning ? <LoadingSpinner text="Running…" /> : "▶ Run"}
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          style={{ ...styles.button, ...styles.buttonSecondary }}
+          data-testid="back-btn"
+        >
+          Back
+        </button>
+      </div>
+
+      {result && <ResponsePanel result={result} />}
+    </div>
+  );
+}
+
+/** Resource Read Form */
+function ResourceReadForm({
+  resource,
+  onExecute,
+  onClose,
+}: {
+  resource: McpResource & { kind: "resource" };
+  onExecute?: ExecuteFn;
+  onClose: () => void;
+}): React.ReactElement {
+  const [isLoading, setIsLoading] = useState(false);
+  const [result, setResult] = useState<ExecutionResult | null>(null);
+
+  const handleRead = async () => {
+    setIsLoading(true);
+    setResult(null);
+
+    if (onExecute) {
+      try {
+        const res = await onExecute(resource, { uri: resource.uri });
+        setResult(res);
+      } catch (err) {
+        setResult({ ok: false, error: String(err) });
+      }
+    } else {
+      // Mock execution
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      setResult(getMockResult("resource"));
+    }
+
+    setIsLoading(false);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      <div style={styles.section}>
+        <div style={styles.sectionTitle}>URI</div>
+        <div style={styles.uriBox} data-testid="resource-uri">
+          {resource.uri}
+        </div>
+      </div>
+
+      <div style={styles.formFooter}>
+        <button
+          type="button"
+          disabled={isLoading}
+          onClick={handleRead}
+          style={{
+            ...styles.button,
+            ...(isLoading ? styles.buttonDisabled : styles.buttonPrimary),
+          }}
+          data-testid="read-btn"
+        >
+          {isLoading ? <LoadingSpinner text="Reading…" /> : "↓ Read"}
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          style={{ ...styles.button, ...styles.buttonSecondary }}
+          data-testid="back-btn"
+        >
+          Back
+        </button>
+      </div>
+
+      {result && <ResponsePanel result={result} />}
+    </div>
+  );
+}
+
+/** Prompt Use Form */
+function PromptUseForm({
+  prompt,
+  onExecute,
+  onClose,
+}: {
+  prompt: McpPrompt & { kind: "prompt" };
+  onExecute?: ExecuteFn;
+  onClose: () => void;
+}): React.ReactElement {
+  const args = prompt.arguments || [];
+
+  const [values, setValues] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {};
+    for (const arg of args) {
+      initial[arg.name] = "";
+    }
+    return initial;
+  });
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [result, setResult] = useState<ExecutionResult | null>(null);
+
+  const setValue = (name: string, value: string) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  };
+
+  // Check if all required args are filled
+  const isReady = args.filter((a) => a.required).every((a) => values[a.name] !== "");
+
+  const handleUse = async () => {
+    setIsLoading(true);
+    setResult(null);
+
+    // Build params from non-empty values
+    const params: Record<string, unknown> = {};
+    for (const [name, val] of Object.entries(values)) {
+      if (val !== "") params[name] = val;
+    }
+
+    if (onExecute) {
+      try {
+        const res = await onExecute(prompt, params);
+        setResult(res);
+      } catch (err) {
+        setResult({ ok: false, error: String(err) });
+      }
+    } else {
+      // Mock execution
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      setResult(getMockResult("prompt"));
+    }
+
+    setIsLoading(false);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      {args.map((arg) => (
+        <div key={arg.name} style={styles.formField} data-testid={`form-field-${arg.name}`}>
+          <div style={styles.paramHeader}>
+            <span style={styles.paramName}>{arg.name}</span>
+            <span style={arg.required ? styles.paramRequired : styles.paramOptional}>
+              {arg.required ? "required" : "optional"}
+            </span>
+          </div>
+          {arg.description && <div style={styles.paramDesc}>{arg.description}</div>}
+          <input
+            type="text"
+            style={styles.input as React.CSSProperties}
+            value={values[arg.name]}
+            onChange={(e) => setValue(arg.name, e.target.value)}
+            placeholder={`Enter ${arg.name}…`}
+            data-testid={`input-${arg.name}`}
+          />
+        </div>
+      ))}
+
+      <div style={styles.formFooter}>
+        <button
+          type="button"
+          disabled={!isReady || isLoading}
+          onClick={handleUse}
+          style={{
+            ...styles.button,
+            ...(isReady && !isLoading ? styles.buttonPrimary : styles.buttonDisabled),
+          }}
+          data-testid="use-btn"
+        >
+          {isLoading ? <LoadingSpinner text="Loading…" /> : "→ Use"}
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          style={{ ...styles.button, ...styles.buttonSecondary }}
+          data-testid="back-btn"
+        >
+          Back
+        </button>
+      </div>
+
+      {result && <ResponsePanel result={result} />}
+    </div>
+  );
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * PrimitiveDetail displays detailed information about a selected MCP primitive.
+ *
+ * Modes:
+ * - browse: Read-only view of the primitive definition
+ * - action: Form to execute the primitive with inputs and response panel
+ */
+export function PrimitiveDetail({
+  primitive,
+  // onAction - reserved for future use when action buttons are enabled
+  onExecute,
+  onClose,
+}: PrimitiveDetailProps): React.ReactElement {
+  const [mode, setMode] = useState<"browse" | "action">("browse");
+
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  // Reset mode when primitive changes
+  useEffect(() => {
+    setMode("browse");
+  }, [primitive.name, primitive.kind]);
+
+  const summary = getSummary(primitive);
+  const { icon, label } = getActionLabel(primitive.kind);
+
+  // Extract data without the kind field for JSON export
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { kind, ...primitiveData } = primitive;
+
+  const handleBack = useCallback(() => {
+    setMode("browse");
+  }, []);
+
+  return (
+    <div style={styles.container} data-testid="primitive-detail">
+      {/* Header */}
+      <div style={styles.header} data-testid="primitive-detail-header">
+        <h2 style={styles.name}>{primitive.name}</h2>
+        <Tag variant="kind">{primitive.kind}</Tag>
+        {primitive.kind === "resource" && primitive.mimeType && (
+          <Tag variant="mimeType">{primitive.mimeType}</Tag>
+        )}
+        {mode === "action" && <Tag variant="actionMode">{label.toLowerCase()} mode</Tag>}
+        {/* Right side: annotations + close button */}
+        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: "8px" }}>
+          {mode === "browse" && primitive.kind === "tool" && (
+            <AnnotationTags annotations={primitive.annotations} />
+          )}
+          {onClose && (
+            <button
+              style={{ ...styles.button, ...styles.buttonSecondary }}
+              onClick={handleClose}
+              title="Close"
+              data-testid="close-btn"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Body */}
+      <div style={styles.body} data-testid="primitive-detail-body">
+        {/* Browse Mode */}
+        {mode === "browse" && (
+          <>
+            {/* Summary/Description */}
+            {summary && <p style={styles.summary}>{summary}</p>}
+
+            {/* URI (resources only) */}
+            {primitive.kind === "resource" && (
+              <div style={styles.section}>
+                <div style={styles.sectionTitle}>URI</div>
+                <div style={styles.uriBox} data-testid="resource-uri">
+                  {primitive.uri}
+                </div>
+              </div>
+            )}
+
+            {/* Parameters (tools only) */}
+            {primitive.kind === "tool" && primitive.inputSchema?.properties && (
+              <ParametersSection
+                properties={primitive.inputSchema.properties}
+                required={primitive.inputSchema.required}
+              />
+            )}
+
+            {/* Arguments (prompts only) */}
+            {primitive.kind === "prompt" &&
+              primitive.arguments &&
+              primitive.arguments.length > 0 && <ArgumentsSection args={primitive.arguments} />}
+          </>
+        )}
+
+        {/* Action Mode - Tool */}
+        {mode === "action" && primitive.kind === "tool" && (
+          <ToolRunForm tool={primitive} onExecute={onExecute} onClose={handleBack} />
+        )}
+
+        {/* Action Mode - Resource */}
+        {mode === "action" && primitive.kind === "resource" && (
+          <ResourceReadForm resource={primitive} onExecute={onExecute} onClose={handleBack} />
+        )}
+
+        {/* Action Mode - Prompt */}
+        {mode === "action" && primitive.kind === "prompt" && (
+          <PromptUseForm prompt={primitive} onExecute={onExecute} onClose={handleBack} />
+        )}
+      </div>
+
+      {/* Footer - only in browse mode */}
+      {mode === "browse" && (
+        <div style={styles.footer} data-testid="primitive-detail-footer">
+          <CopyJsonButton data={primitiveData} />
+          <button
+            style={{ ...styles.button, ...styles.buttonDisabled }}
+            disabled
+            title="Coming soon"
+            data-testid="action-btn"
+          >
+            {icon} {label}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default PrimitiveDetail;
diff --git a/packages/inspector/src/dashboard/react/components/SidebarConnectionForm.tsx b/packages/inspector/src/dashboard/react/components/SidebarConnectionForm.tsx
new file mode 100644
index 00000000..d4744a9d
--- /dev/null
+++ b/packages/inspector/src/dashboard/react/components/SidebarConnectionForm.tsx
@@ -0,0 +1,548 @@
+/**
+ * SidebarConnectionForm Component
+ *
+ * Inline connection form that appears at the top of the sidebar when
+ * the "+" button is clicked. Allows connecting to MCP servers via HTTP or stdio.
+ *
+ * Features:
+ * - Transport selector (HTTP / stdio dropdown)
+ * - URL input for HTTP transport
+ * - Command + Args inputs for stdio transport
+ * - Connect and Cancel buttons
+ * - Auto-hides after successful connection
+ */
+
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import type { ConnectionParams } from "@mcp-apps-kit/testing";
+
+/** Entry in server history */
+export interface ServerHistoryEntry {
+  /** Display name (URL or command) */
+  name: string;
+  /** Connection params to restore */
+  params: ConnectionParams;
+}
+
+export interface SidebarConnectionFormProps {
+  /** Whether the form is visible */
+  isOpen: boolean;
+  /** Whether a connection is currently being created */
+  isCreating?: boolean;
+  /** Error message to display (if any) */
+  error?: string | null;
+  /** Callback when Connect button is clicked */
+  onConnect: (params: ConnectionParams) => Promise<boolean>;
+  /** Callback when Cancel button is clicked */
+  onCancel: () => void;
+  /** Previously connected servers for history dropdown */
+  serverHistory?: ServerHistoryEntry[];
+}
+
+// Styles for the inline connection form
+const formStyles: Record<string, React.CSSProperties> = {
+  container: {
+    padding: "0.75rem",
+    backgroundColor: "#0a0a0a",
+    borderBottom: "1px solid #1a1a1a",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem",
+  },
+  row: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem",
+  },
+  label: {
+    fontSize: "0.625rem",
+    fontWeight: 500,
+    color: "#6b7280",
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+  },
+  select: {
+    backgroundColor: "#111111",
+    border: "1px solid #2d2f2f",
+    borderRadius: "4px",
+    color: "#e8e8e8",
+    padding: "0.375rem 0.5rem",
+    fontSize: "0.75rem",
+    fontFamily: "inherit",
+    outline: "none",
+    cursor: "pointer",
+    width: "100%",
+  },
+  input: {
+    backgroundColor: "#111111",
+    border: "1px solid #2d2f2f",
+    borderRadius: "4px",
+    color: "#e8e8e8",
+    padding: "0.375rem 0.5rem",
+    fontSize: "0.75rem",
+    fontFamily: "inherit",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box",
+  },
+  inputFocused: {
+    borderColor: "#ffffff",
+    boxShadow: "0 0 0 1px rgba(255, 255, 255, 0.2)",
+  },
+  inputError: {
+    borderColor: "#ef4444",
+    boxShadow: "0 0 0 1px rgba(239, 68, 68, 0.2)",
+  },
+  buttonRow: {
+    display: "flex",
+    gap: "0.5rem",
+    marginTop: "0.25rem",
+  },
+  connectButton: {
+    flex: 1,
+    backgroundColor: "#ffffff",
+    border: "none",
+    borderRadius: "4px",
+    color: "#000000",
+    padding: "0.5rem 0.75rem",
+    fontSize: "0.75rem",
+    fontWeight: 600,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+  },
+  connectButtonDisabled: {
+    backgroundColor: "#3d4040",
+    color: "#6b7280",
+    cursor: "not-allowed",
+  },
+  cancelButton: {
+    flex: 1,
+    backgroundColor: "transparent",
+    border: "1px solid #3d4040",
+    borderRadius: "4px",
+    color: "#9ca3af",
+    padding: "0.5rem 0.75rem",
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    fontFamily: "inherit",
+    cursor: "pointer",
+    transition: "all 0.15s ease",
+  },
+  errorMessage: {
+    fontSize: "0.6875rem",
+    color: "#ef4444",
+    padding: "0.25rem 0",
+    lineHeight: 1.4,
+  },
+  loadingSpinner: {
+    width: "12px",
+    height: "12px",
+    border: "2px solid #3d4040",
+    borderTopColor: "#000000",
+    borderRadius: "50%",
+    animation: "spin 0.8s linear infinite",
+    display: "inline-block",
+    marginRight: "0.375rem",
+  },
+};
+
+/**
+ * SidebarConnectionForm - Inline form for connecting to MCP servers
+ */
+export function SidebarConnectionForm({
+  isOpen,
+  isCreating = false,
+  error,
+  onConnect,
+  onCancel,
+  serverHistory = [],
+}: SidebarConnectionFormProps): React.ReactElement | null {
+  // Form state
+  const [transport, setTransport] = useState<"http" | "stdio">("http");
+  const [url, setUrl] = useState("");
+  const [command, setCommand] = useState("");
+  const [args, setArgs] = useState("");
+  const [focusedField, setFocusedField] = useState<string | null>(null);
+  const [showHistory, setShowHistory] = useState(false);
+  const [urlError, setUrlError] = useState<string | null>(null);
+
+  // Refs for focus management
+  const urlInputRef = useRef<HTMLInputElement>(null);
+  const commandInputRef = useRef<HTMLInputElement>(null);
+  const historyDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Reset form when opened
+  useEffect(() => {
+    if (isOpen) {
+      setTransport("http");
+      setUrl("");
+      setCommand("");
+      setArgs("");
+      setShowHistory(false);
+      setUrlError(null);
+      // Focus the appropriate input after a brief delay
+      setTimeout(() => {
+        urlInputRef.current?.focus();
+      }, 50);
+    }
+  }, [isOpen]);
+
+  // Validate URL format when it changes
+  useEffect(() => {
+    if (transport !== "http" || !url.trim()) {
+      setUrlError(null);
+      return;
+    }
+    try {
+      new URL(url.trim());
+      setUrlError(null);
+    } catch {
+      setUrlError("Invalid URL format");
+    }
+  }, [url, transport]);
+
+  // Handle selecting a history entry
+  const handleSelectHistory = useCallback((entry: ServerHistoryEntry) => {
+    const params = entry.params;
+    if (params.transport === "http") {
+      setTransport("http");
+      setUrl(params.url);
+      setCommand("");
+      setArgs("");
+    } else if (params.transport === "stdio") {
+      setTransport("stdio");
+      setUrl("");
+      setCommand(params.command);
+      setArgs(params.args?.join(" ") ?? "");
+    }
+    setShowHistory(false);
+  }, []);
+
+  // Close history dropdown when clicking outside
+  useEffect(() => {
+    if (!showHistory) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (historyDropdownRef.current && !historyDropdownRef.current.contains(e.target as Node)) {
+        setShowHistory(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showHistory]);
+
+  // Focus command input when switching to stdio
+  useEffect(() => {
+    if (isOpen && transport === "stdio") {
+      commandInputRef.current?.focus();
+    } else if (isOpen && transport === "http") {
+      urlInputRef.current?.focus();
+    }
+  }, [transport, isOpen]);
+
+  // Determine if form can be submitted
+  const canSubmit = transport === "http" ? !!url.trim() && !urlError : !!command.trim();
+
+  /**
+   * Parse a shell-style arguments string, respecting quoted strings.
+   * Handles both single and double quotes.
+   * Example: '--file "my file.txt" --flag' → ['--file', 'my file.txt', '--flag']
+   */
+  const parseShellArgs = useCallback((argsString: string): string[] => {
+    const result: string[] = [];
+    let current = "";
+    let inQuote: '"' | "'" | null = null;
+
+    for (let i = 0; i < argsString.length; i++) {
+      const char = argsString[i]!; // Safe: bounded by argsString.length
+
+      if (inQuote) {
+        // Inside a quoted string
+        if (char === inQuote) {
+          // End of quoted section
+          inQuote = null;
+        } else {
+          current += char;
+        }
+      } else {
+        // Outside quotes
+        if (char === '"' || char === "'") {
+          // Start of quoted section
+          inQuote = char;
+        } else if (/\s/.test(char)) {
+          // Whitespace - end current token
+          if (current) {
+            result.push(current);
+            current = "";
+          }
+        } else {
+          current += char;
+        }
+      }
+    }
+
+    // Push final token if any
+    if (current) {
+      result.push(current);
+    }
+
+    return result;
+  }, []);
+
+  // Build connection params from form state
+  const buildParams = useCallback((): ConnectionParams | null => {
+    if (transport === "http") {
+      const trimmedUrl = url.trim();
+      if (!trimmedUrl) return null;
+      // Validate URL format
+      try {
+        new URL(trimmedUrl);
+      } catch {
+        return null; // Invalid URL
+      }
+      return { transport: "http", url: trimmedUrl };
+    }
+
+    const trimmedCommand = command.trim();
+    if (!trimmedCommand) return null;
+
+    const params: ConnectionParams = {
+      transport: "stdio",
+      command: trimmedCommand,
+    };
+
+    const trimmedArgs = args.trim();
+    if (trimmedArgs) {
+      // Parse shell-style arguments, respecting quoted strings
+      (params as Extract<ConnectionParams, { transport: "stdio" }>).args =
+        parseShellArgs(trimmedArgs);
+    }
+
+    return params;
+  }, [transport, url, command, args, parseShellArgs]);
+
+  // Handle connect button click
+  const handleConnect = useCallback(async () => {
+    if (isCreating || !canSubmit) return;
+
+    const params = buildParams();
+    if (!params) return;
+
+    const success = await onConnect(params);
+    if (success) {
+      // Form will be hidden by parent after successful connection
+      // Reset state for next time
+      setUrl("");
+      setCommand("");
+      setArgs("");
+    }
+  }, [isCreating, canSubmit, buildParams, onConnect]);
+
+  // Handle keyboard events
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && canSubmit && !isCreating) {
+        e.preventDefault();
+        void handleConnect();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [canSubmit, isCreating, handleConnect, onCancel]
+  );
+
+  // Don't render if not open
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div style={formStyles.container} data-testid="sidebar-connection-form">
+      {/* Inject keyframe animation for spinner */}
+      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+
+      {/* Server history dropdown */}
+      {serverHistory.length > 0 && (
+        <div style={{ ...formStyles.row, position: "relative" }} ref={historyDropdownRef}>
+          <label style={formStyles.label}>Recent Servers</label>
+          <div
+            style={{
+              ...formStyles.select,
+              cursor: "pointer",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+            onClick={() => setShowHistory(!showHistory)}
+            data-testid="server-history-trigger"
+          >
+            <span style={{ color: "#6b7280" }}>Select from history...</span>
+            <span style={{ fontSize: "0.625rem" }}>{showHistory ? "▴" : "▾"}</span>
+          </div>
+          {showHistory && (
+            <div
+              style={{
+                position: "absolute",
+                top: "100%",
+                left: 0,
+                right: 0,
+                backgroundColor: "#111111",
+                border: "1px solid #2d2f2f",
+                borderRadius: "4px",
+                marginTop: "0.25rem",
+                maxHeight: "150px",
+                overflowY: "auto",
+                zIndex: 100,
+              }}
+            >
+              {serverHistory.map((entry, idx) => (
+                <div
+                  key={idx}
+                  style={{
+                    padding: "0.5rem",
+                    fontSize: "0.75rem",
+                    color: "#e8e8e8",
+                    cursor: "pointer",
+                    borderBottom: idx < serverHistory.length - 1 ? "1px solid #1a1a1a" : "none",
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor = "#1a1a1a";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  }}
+                  onClick={() => handleSelectHistory(entry)}
+                  data-testid={`server-history-item-${idx}`}
+                >
+                  <div style={{ fontWeight: 500 }}>{entry.name}</div>
+                  <div style={{ fontSize: "0.625rem", color: "#6b7280", marginTop: "0.125rem" }}>
+                    {entry.params.transport}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Transport selector */}
+      <div style={formStyles.row}>
+        <label style={formStyles.label}>Transport</label>
+        <select
+          style={formStyles.select}
+          value={transport}
+          onChange={(e) => setTransport(e.target.value as "http" | "stdio")}
+          data-testid="transport-select"
+        >
+          <option value="http">HTTP</option>
+          <option value="stdio">stdio</option>
+        </select>
+      </div>
+
+      {/* Conditional inputs based on transport */}
+      {transport === "http" ? (
+        /* HTTP: URL input */
+        <div style={formStyles.row}>
+          <label style={formStyles.label}>URL</label>
+          <input
+            ref={urlInputRef}
+            type="text"
+            style={{
+              ...formStyles.input,
+              ...(focusedField === "url" ? formStyles.inputFocused : {}),
+              ...(error || urlError ? formStyles.inputError : {}),
+            }}
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
+            onFocus={() => setFocusedField("url")}
+            onBlur={() => setFocusedField(null)}
+            onKeyDown={handleKeyDown}
+            placeholder="http://localhost:3000/mcp"
+            data-testid="url-input"
+          />
+        </div>
+      ) : (
+        /* stdio: Command + Args inputs */
+        <>
+          <div style={formStyles.row}>
+            <label style={formStyles.label}>Command</label>
+            <input
+              ref={commandInputRef}
+              type="text"
+              style={{
+                ...formStyles.input,
+                ...(focusedField === "command" ? formStyles.inputFocused : {}),
+                ...(error ? formStyles.inputError : {}),
+              }}
+              value={command}
+              onChange={(e) => setCommand(e.target.value)}
+              onFocus={() => setFocusedField("command")}
+              onBlur={() => setFocusedField(null)}
+              onKeyDown={handleKeyDown}
+              placeholder="node"
+              data-testid="command-input"
+            />
+          </div>
+          <div style={formStyles.row}>
+            <label style={formStyles.label}>Arguments</label>
+            <input
+              type="text"
+              style={{
+                ...formStyles.input,
+                ...(focusedField === "args" ? formStyles.inputFocused : {}),
+              }}
+              value={args}
+              onChange={(e) => setArgs(e.target.value)}
+              onFocus={() => setFocusedField("args")}
+              onBlur={() => setFocusedField(null)}
+              onKeyDown={handleKeyDown}
+              placeholder="path/to/server.js --port 3000"
+              data-testid="args-input"
+            />
+          </div>
+        </>
+      )}
+
+      {/* Error message */}
+      {(error || urlError) && (
+        <div style={formStyles.errorMessage} data-testid="connection-error">
+          {error || urlError}
+        </div>
+      )}
+
+      {/* Action buttons */}
+      <div style={formStyles.buttonRow}>
+        <button
+          style={{
+            ...formStyles.connectButton,
+            ...(!canSubmit || isCreating ? formStyles.connectButtonDisabled : {}),
+          }}
+          onClick={() => void handleConnect()}
+          disabled={!canSubmit || isCreating}
+          data-testid="connect-button"
+        >
+          {isCreating ? (
+            <>
+              <span style={formStyles.loadingSpinner} />
+              Connecting...
+            </>
+          ) : (
+            "Connect"
+          )}
+        </button>
+        <button
+          style={formStyles.cancelButton}
+          onClick={onCancel}
+          disabled={isCreating}
+          data-testid="cancel-button"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default SidebarConnectionForm;
diff --git a/packages/inspector/tests/unified-sidebar.test.tsx b/packages/inspector/tests/unified-sidebar.test.tsx
new file mode 100644
index 00000000..a8bcb2fa
--- /dev/null
+++ b/packages/inspector/tests/unified-sidebar.test.tsx
@@ -0,0 +1,596 @@
+/**
+ * TASK-026: Unified Sidebar Tests
+ *
+ * Tests for:
+ * 1. Item selection - clicking primitive opens detail view
+ * 2. Mutual exclusivity - detail view and right panel can't both be open
+ * 3. localStorage persistence - left panel collapse state persists
+ */
+
+// @vitest-environment jsdom
+
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createElement, act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+
+// Import the components we're testing
+import {
+  McpPrimitivesPanel,
+  type ServerData,
+  type SelectedPrimitive,
+} from "../src/dashboard/react/components/McpPrimitivesPanel";
+import { PrimitiveDetail, type Primitive } from "../src/dashboard/react/components/PrimitiveDetail";
+
+// =============================================================================
+// Helpers
+// =============================================================================
+
+let container: HTMLDivElement;
+let root: Root;
+
+function mount(element: React.ReactElement): void {
+  act(() => {
+    root.render(element);
+  });
+}
+
+function click(el: Element): void {
+  act(() => {
+    el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+  });
+}
+
+function queryByText(text: string): Element | null {
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let node: Text | null;
+  while ((node = walker.nextNode() as Text | null)) {
+    if (node.textContent?.includes(text)) {
+      return node.parentElement;
+    }
+  }
+  return null;
+}
+
+function queryAllByText(text: string): Element[] {
+  const results: Element[] = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let node: Text | null;
+  while ((node = walker.nextNode() as Text | null)) {
+    if (node.textContent?.includes(text) && node.parentElement) {
+      results.push(node.parentElement);
+    }
+  }
+  return results;
+}
+
+function queryByTestId(testId: string): Element | null {
+  return container.querySelector(`[data-testid="${testId}"]`);
+}
+
+// =============================================================================
+// Test Data
+// =============================================================================
+
+const mockTool = {
+  name: "get_user",
+  description: "Fetch user information by ID",
+  inputSchema: {
+    type: "object" as const,
+    properties: {
+      userId: {
+        type: "string",
+        description: "The user ID to fetch",
+      },
+    },
+    required: ["userId"],
+  },
+};
+
+const mockResource = {
+  name: "users/list",
+  uri: "resource://users/list",
+  description: "List of all users",
+  mimeType: "application/json",
+};
+
+const mockPrompt = {
+  name: "summarize",
+  description: "Summarize the given content",
+  arguments: [
+    { name: "content", description: "Content to summarize", required: true },
+    { name: "style", description: "Summary style", required: false },
+  ],
+};
+
+const mockServerData: ServerData = {
+  id: "server-1",
+  name: "Test Server",
+  url: "http://localhost:3000",
+  isConnected: true,
+  tools: [mockTool],
+  resources: [mockResource],
+  prompts: [mockPrompt],
+};
+
+function createMcpPrimitivesPanel(
+  props: Partial<React.ComponentProps<typeof McpPrimitivesPanel>> = {}
+) {
+  return createElement(McpPrimitivesPanel, {
+    servers: [mockServerData],
+    stoppedConnections: [],
+    isLoading: false,
+    isVisible: true,
+    isCollapsed: false,
+    onToggleCollapse: () => {},
+    panelWidth: 320,
+    resizeHandleProps: {},
+    isResizing: false,
+    onStopServer: () => Promise.resolve(),
+    onStartServer: () => Promise.resolve(),
+    onConnect: () => Promise.resolve(false),
+    isCreating: false,
+    connectionError: null,
+    selectedPrimitive: null,
+    onSelectPrimitive: () => {},
+    ...props,
+  });
+}
+
+function createPrimitiveDetail(
+  props: Partial<React.ComponentProps<typeof PrimitiveDetail>> & { primitive: Primitive }
+) {
+  return createElement(PrimitiveDetail, props);
+}
+
+// =============================================================================
+// Setup / Teardown
+// =============================================================================
+
+beforeEach(() => {
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+  localStorage.clear();
+});
+
+afterEach(() => {
+  act(() => {
+    root.unmount();
+  });
+  container.remove();
+  localStorage.clear();
+  vi.restoreAllMocks();
+});
+
+// =============================================================================
+// AC-1: Item Selection - Clicking primitive opens detail view
+// =============================================================================
+
+describe("AC-1: Item Selection - clicking primitive opens detail view", () => {
+  it("clicking a tool item calls onSelectPrimitive with correct data", () => {
+    const onSelectPrimitive = vi.fn();
+
+    mount(createMcpPrimitivesPanel({ onSelectPrimitive }));
+
+    const toolItem = queryByText("get_user");
+    expect(toolItem).not.toBeNull();
+    click(toolItem!);
+
+    expect(onSelectPrimitive).toHaveBeenCalledWith({
+      serverId: "server-1",
+      kind: "tool",
+      name: "get_user",
+    });
+  });
+
+  it("clicking a resource item calls onSelectPrimitive with correct data", () => {
+    const onSelectPrimitive = vi.fn();
+
+    mount(createMcpPrimitivesPanel({ onSelectPrimitive }));
+
+    const resourceItem = queryByText("users/list");
+    expect(resourceItem).not.toBeNull();
+    click(resourceItem!);
+
+    expect(onSelectPrimitive).toHaveBeenCalledWith({
+      serverId: "server-1",
+      kind: "resource",
+      name: "users/list",
+    });
+  });
+
+  it("clicking a prompt item calls onSelectPrimitive with correct data", () => {
+    const onSelectPrimitive = vi.fn();
+
+    mount(createMcpPrimitivesPanel({ onSelectPrimitive }));
+
+    const promptItem = queryByText("summarize");
+    expect(promptItem).not.toBeNull();
+    click(promptItem!);
+
+    expect(onSelectPrimitive).toHaveBeenCalledWith({
+      serverId: "server-1",
+      kind: "prompt",
+      name: "summarize",
+    });
+  });
+
+  it("clicking already selected primitive deselects it (calls with null)", () => {
+    const onSelectPrimitive = vi.fn();
+    const selectedPrimitive: SelectedPrimitive = {
+      serverId: "server-1",
+      kind: "tool",
+      name: "get_user",
+    };
+
+    mount(createMcpPrimitivesPanel({ onSelectPrimitive, selectedPrimitive }));
+
+    const toolItem = queryByText("get_user");
+    expect(toolItem).not.toBeNull();
+    click(toolItem!);
+
+    expect(onSelectPrimitive).toHaveBeenCalledWith(null);
+  });
+
+  it("selected primitive has visual indicator (aria-selected=true)", () => {
+    const selectedPrimitive: SelectedPrimitive = {
+      serverId: "server-1",
+      kind: "tool",
+      name: "get_user",
+    };
+
+    mount(createMcpPrimitivesPanel({ selectedPrimitive }));
+
+    const toolItem = queryByText("get_user");
+    expect(toolItem).not.toBeNull();
+
+    const itemButton = toolItem!.closest('[role="button"]') || toolItem!.closest("button");
+    if (itemButton) {
+      expect(itemButton.getAttribute("aria-selected")).toBe("true");
+    }
+  });
+});
+
+// =============================================================================
+// AC-2: PrimitiveDetail component renders correctly
+// =============================================================================
+
+describe("AC-2: PrimitiveDetail component", () => {
+  it("renders tool detail with name, kind tag, and description", () => {
+    const primitive: Primitive = { ...mockTool, kind: "tool" };
+
+    mount(createPrimitiveDetail({ primitive }));
+
+    expect(queryByText("get_user")).not.toBeNull();
+    expect(queryByText("tool")).not.toBeNull();
+    expect(queryByText("Fetch user information by ID")).not.toBeNull();
+  });
+
+  it("renders resource detail with URI section", () => {
+    const primitive: Primitive = { ...mockResource, kind: "resource" };
+
+    mount(createPrimitiveDetail({ primitive }));
+
+    expect(queryByText("users/list")).not.toBeNull();
+    expect(queryByText("resource")).not.toBeNull();
+
+    const uriBox = queryByTestId("resource-uri");
+    expect(uriBox).not.toBeNull();
+    expect(uriBox!.textContent).toContain("resource://users/list");
+
+    expect(queryByText("application/json")).not.toBeNull();
+  });
+
+  it("renders prompt detail with arguments section", () => {
+    const primitive: Primitive = { ...mockPrompt, kind: "prompt" };
+
+    mount(createPrimitiveDetail({ primitive }));
+
+    expect(queryByText("summarize")).not.toBeNull();
+    expect(queryByText("prompt")).not.toBeNull();
+    expect(queryByTestId("arg-content")).not.toBeNull();
+    expect(queryByTestId("arg-style")).not.toBeNull();
+  });
+
+  it("shows parameters section for tools with input schema", () => {
+    const primitive: Primitive = { ...mockTool, kind: "tool" };
+
+    mount(createPrimitiveDetail({ primitive }));
+
+    expect(queryByTestId("param-userId")).not.toBeNull();
+    expect(queryByText("required")).not.toBeNull();
+  });
+
+  it("calls onClose when close button is clicked", () => {
+    const onClose = vi.fn();
+    const primitive: Primitive = { ...mockTool, kind: "tool" };
+
+    mount(createPrimitiveDetail({ primitive, onClose }));
+
+    const closeBtn = queryByTestId("close-btn");
+    expect(closeBtn).not.toBeNull();
+    click(closeBtn!);
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("has action button with correct label for tool (Run)", () => {
+    const primitive: Primitive = { ...mockTool, kind: "tool" };
+    mount(createPrimitiveDetail({ primitive }));
+    expect(queryByText("Run")).not.toBeNull();
+  });
+
+  it("has action button with correct label for resource (Read)", () => {
+    const primitive: Primitive = { ...mockResource, kind: "resource" };
+    mount(createPrimitiveDetail({ primitive }));
+    expect(queryByText("Read")).not.toBeNull();
+  });
+
+  it("has action button with correct label for prompt (Use)", () => {
+    const primitive: Primitive = { ...mockPrompt, kind: "prompt" };
+    mount(createPrimitiveDetail({ primitive }));
+    expect(queryByText("Use")).not.toBeNull();
+  });
+
+  it("action button is disabled with 'Coming soon' tooltip", () => {
+    const primitive: Primitive = { ...mockTool, kind: "tool" };
+
+    mount(createPrimitiveDetail({ primitive }));
+
+    const actionBtn = queryByTestId("action-btn");
+    expect(actionBtn).not.toBeNull();
+
+    // Button should be disabled
+    expect(actionBtn!.hasAttribute("disabled")).toBe(true);
+    expect(actionBtn!.getAttribute("title")).toBe("Coming soon");
+
+    // Clicking should NOT switch to action mode (button is disabled)
+    click(actionBtn!);
+
+    // Should NOT see form fields since button is disabled
+    expect(queryByTestId("form-field-userId")).toBeNull();
+    expect(queryByTestId("run-btn")).toBeNull();
+  });
+});
+
+// =============================================================================
+// AC-3: Mutual Exclusivity - detail view and right panel
+// =============================================================================
+
+describe("AC-3: Mutual Exclusivity - detail view and right panel", () => {
+  it("selecting primitive should trigger callback (parent handles mutual exclusivity)", () => {
+    const onSelectPrimitive = vi.fn();
+
+    mount(createMcpPrimitivesPanel({ onSelectPrimitive }));
+
+    const toolItem = queryByText("get_user");
+    expect(toolItem).not.toBeNull();
+    click(toolItem!);
+
+    // onSelectPrimitive is called, parent then collapses right panel
+    expect(onSelectPrimitive).toHaveBeenCalledWith(
+      expect.objectContaining({ kind: "tool", name: "get_user" })
+    );
+  });
+
+  it("PrimitiveDetail provides close callback for clearing selection", () => {
+    const onClose = vi.fn();
+    const primitive: Primitive = { ...mockTool, kind: "tool" };
+
+    mount(createPrimitiveDetail({ primitive, onClose }));
+
+    const closeBtn = queryByTestId("close-btn");
+    expect(closeBtn).not.toBeNull();
+    click(closeBtn!);
+
+    expect(onClose).toHaveBeenCalled();
+  });
+});
+
+// =============================================================================
+// AC-4: localStorage Persistence for Left Panel Collapse State
+// =============================================================================
+
+describe("AC-4: localStorage Persistence for left panel collapse state", () => {
+  const STORAGE_KEY = "mcp-dashboard-left-collapsed";
+
+  it("panel reads initial collapsed state from localStorage (collapsed=true)", () => {
+    localStorage.setItem(STORAGE_KEY, "true");
+
+    const stored = localStorage.getItem(STORAGE_KEY);
+    expect(stored).toBe("true");
+  });
+
+  it("panel reads initial collapsed state from localStorage (collapsed=false)", () => {
+    localStorage.setItem(STORAGE_KEY, "false");
+
+    const stored = localStorage.getItem(STORAGE_KEY);
+    expect(stored).toBe("false");
+  });
+
+  it("toggling collapse state persists to localStorage", () => {
+    localStorage.setItem(STORAGE_KEY, "false");
+    localStorage.setItem(STORAGE_KEY, "true");
+
+    expect(localStorage.getItem(STORAGE_KEY)).toBe("true");
+  });
+
+  it("collapsed panel hides primitive content", () => {
+    mount(createMcpPrimitivesPanel({ isCollapsed: true }));
+
+    // When collapsed, primitive names should not be visible
+    expect(queryByText("get_user")).toBeNull();
+  });
+
+  it("expanded panel shows full server blocks and primitives", () => {
+    mount(createMcpPrimitivesPanel({ isCollapsed: false }));
+
+    expect(queryByText("get_user")).not.toBeNull();
+    expect(queryByText("users/list")).not.toBeNull();
+    expect(queryByText("summarize")).not.toBeNull();
+  });
+});
+
+// =============================================================================
+// Edge Cases
+// =============================================================================
+
+describe("Edge Cases", () => {
+  it("handles empty server list gracefully", () => {
+    mount(createMcpPrimitivesPanel({ servers: [] }));
+
+    // Should not crash
+    expect(container).toBeDefined();
+  });
+
+  it("handles server with empty primitives", () => {
+    const emptyServer: ServerData = {
+      id: "empty-server",
+      name: "Empty Server",
+      url: "http://localhost:4000",
+      isConnected: true,
+      tools: [],
+      resources: [],
+      prompts: [],
+    };
+
+    mount(createMcpPrimitivesPanel({ servers: [emptyServer] }));
+
+    expect(queryByText("Empty Server")).not.toBeNull();
+  });
+
+  it("PrimitiveDetail handles tool without description", () => {
+    const toolWithoutDesc: Primitive = {
+      name: "simple_tool",
+      kind: "tool",
+      inputSchema: { type: "object", properties: {} },
+    };
+
+    mount(createPrimitiveDetail({ primitive: toolWithoutDesc }));
+
+    expect(queryByText("simple_tool")).not.toBeNull();
+    expect(queryByText("tool")).not.toBeNull();
+  });
+
+  it("PrimitiveDetail handles tool without input schema", () => {
+    const toolWithoutSchema: Primitive = {
+      name: "no_params_tool",
+      description: "A tool with no parameters",
+      kind: "tool",
+    };
+
+    mount(createPrimitiveDetail({ primitive: toolWithoutSchema }));
+
+    expect(queryByText("no_params_tool")).not.toBeNull();
+    expect(queryByText("A tool with no parameters")).not.toBeNull();
+    expect(queryByText("Parameters")).toBeNull();
+  });
+
+  it("PrimitiveDetail handles resource without mimeType", () => {
+    const resourceWithoutMime: Primitive = {
+      name: "generic_resource",
+      uri: "resource://generic",
+      description: "A generic resource",
+      kind: "resource",
+    };
+
+    mount(createPrimitiveDetail({ primitive: resourceWithoutMime }));
+
+    expect(queryByText("generic_resource")).not.toBeNull();
+    const uriBox = queryByTestId("resource-uri");
+    expect(uriBox).not.toBeNull();
+    expect(uriBox!.textContent).toContain("resource://generic");
+  });
+
+  it("PrimitiveDetail handles prompt without arguments", () => {
+    const promptWithoutArgs: Primitive = {
+      name: "simple_prompt",
+      description: "A simple prompt",
+      kind: "prompt",
+      arguments: [],
+    };
+
+    mount(createPrimitiveDetail({ primitive: promptWithoutArgs }));
+
+    expect(queryByText("simple_prompt")).not.toBeNull();
+    expect(queryByText("Arguments")).toBeNull();
+  });
+
+  it("multiple servers with primitives renders correctly", () => {
+    const server2: ServerData = {
+      id: "server-2",
+      name: "Second Server",
+      url: "http://localhost:4000",
+      isConnected: true,
+      tools: [{ name: "other_tool", description: "Another tool" }],
+      resources: [],
+      prompts: [],
+    };
+
+    mount(createMcpPrimitivesPanel({ servers: [mockServerData, server2] }));
+
+    expect(queryByText("Test Server")).not.toBeNull();
+    expect(queryByText("Second Server")).not.toBeNull();
+    expect(queryByText("get_user")).not.toBeNull();
+    expect(queryByText("other_tool")).not.toBeNull();
+  });
+});
+
+// =============================================================================
+// Integration: Selection state across multiple servers
+// =============================================================================
+
+describe("Integration: Selection state across multiple servers", () => {
+  const server1: ServerData = {
+    id: "server-1",
+    name: "Server One",
+    url: "http://localhost:3000",
+    isConnected: true,
+    tools: [{ name: "tool_1", description: "Tool from server 1" }],
+    resources: [],
+    prompts: [],
+  };
+
+  const server2: ServerData = {
+    id: "server-2",
+    name: "Server Two",
+    url: "http://localhost:4000",
+    isConnected: true,
+    tools: [{ name: "tool_2", description: "Tool from server 2" }],
+    resources: [],
+    prompts: [],
+  };
+
+  it("selecting primitive from server 1 then server 2 updates selection correctly", () => {
+    const onSelectPrimitive = vi.fn();
+
+    mount(
+      createMcpPrimitivesPanel({
+        servers: [server1, server2],
+        onSelectPrimitive,
+      })
+    );
+
+    // Click tool from server 1
+    const tool1 = queryByText("tool_1");
+    expect(tool1).not.toBeNull();
+    click(tool1!);
+
+    expect(onSelectPrimitive).toHaveBeenLastCalledWith({
+      serverId: "server-1",
+      kind: "tool",
+      name: "tool_1",
+    });
+
+    // Click tool from server 2
+    const tool2 = queryByText("tool_2");
+    expect(tool2).not.toBeNull();
+    click(tool2!);
+
+    expect(onSelectPrimitive).toHaveBeenLastCalledWith({
+      serverId: "server-2",
+      kind: "tool",
+      name: "tool_2",
+    });
+  });
+});