Refactor ServerCard with active server logic, rename StatusIndicator, and polish UI panels

- Rename StatusIndicator to ServerStatusIndicator across all files
- ServerCard: add activeServer/onSetActiveServer props for coordinated
  connection flow — when a card's toggle is switched on, it sets itself
  as the active server, shows "Connecting" status, and dims all other
  cards (opacity + pointerEvents none + inert for full keyboard blocking)
- ServerListScreen: manage activeServer state internally, pass to cards;
  switch to full-width layout with 3-column grid and scrollable card area
- ServerCard: move "Test Client Features" dropdown above ContentViewer
  with min-height row for consistent card heights
- ToolResultPanel: move Clear button to top-right header row
- ToolDetailPanel: right-align Execute Tool button, size md, not full-width
- ListChangedIndicator: bump Refresh button to size sm
- ToolsActive story: expand to 30 tools with titles
- UnconnectedView stories: all servers disconnected, remove Connecting story

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

clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Container, SimpleGrid, Stack, Text } from "@mantine/core";
+import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { ServerCard } from "../../groups/ServerCard/ServerCard";
 import { ServerListControls } from "../../groups/ServerListControls/ServerListControls";
 import type { ServerCardProps } from "../../groups/ServerCard/ServerCard";
@@ -11,9 +11,8 @@ export interface ServerListScreenProps {
   onImportServerJson: () => void;
 }
 
-const PageContainer = Container.withProps({
-  size: "xl",
-  py: "xl",
+const PageContainer = Stack.withProps({
+  p: "xl",
 });
 
 const EmptyState = Text.withProps({
@@ -29,6 +28,9 @@ export function ServerListScreen({
   onImportServerJson,
 }: ServerListScreenProps) {
   const [compact, setCompact] = useState<boolean>(false);
+  const [activeServer, setActiveServer] = useState<
+    string | undefined
+  >();
 
   function handleToggleList() {
     setCompact((prev) => (prev === true ? false : true));
@@ -36,32 +38,38 @@ export function ServerListScreen({
 
   return (
     <PageContainer>
-      <Stack gap="lg">
-        <ServerListControls
-          serverCount={servers.length}
-          compact={compact}
-          onToggleList={handleToggleList}
-          onAddManually={onAddManually}
-          onImportConfig={onImportConfig}
-          onImportServerJson={onImportServerJson}
-        />
+      <ServerListControls
+        serverCount={servers.length}
+        compact={compact}
+        onToggleList={handleToggleList}
+        onAddManually={onAddManually}
+        onImportConfig={onImportConfig}
+        onImportServerJson={onImportServerJson}
+      />
 
+      <ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 60px) - var(--mantine-spacing-xl) * 2 - 60px)">
         {servers.length === 0 ? (
           <EmptyState>
             No servers configured. Add a server to get started.
           </EmptyState>
         ) : (
           <SimpleGrid
-            cols={{ base: 1, md: 2 }}
+            cols={{ base: 1, sm: 2, lg: 3 }}
             spacing="lg"
             className="grid-align-start"
           >
             {servers.map((server) => (
-              <ServerCard key={server.name} compact={compact} {...server} />
+              <ServerCard
+                key={server.name}
+                compact={compact}
+                activeServer={activeServer}
+                onSetActiveServer={setActiveServer}
+                {...server}
+              />
             ))}
           </SimpleGrid>
         )}
-      </Stack>
+      </ScrollArea.Autosize>
     </PageContainer>
   );
 }