Add new components, typography, badge contrast, and screen layout refactors

New element components:
- ListToggle: expand/collapse button using react-icons (RiExpandVerticalLine/RiCollapseVerticalLine)
- LogLevelBadge: extracted from LogEntry, handles all 8 log levels with filled variant and dark/light text contrast

New group components:
- ViewHeader: shared header bar for ConnectedView and UnconnectedView with discriminated union on `connected` prop; MCP logo links to modelcontextprotocol.io
- ServerListControls: combines ListToggle and AddServerMenu, hides toggle when no servers
- LogStreamPanel: extracted from LoggingScreen with scroll containment, filtering by visible levels and search text
- HistoryControls: vertical sidebar with search, method filter, export, and clear
- HistoryListPanel: extracted from HistoryScreen with ListToggle compact mode, filtering by method and search text

Badge contrast improvements:
- AnnotationBadge: filled variant for both dark/light modes; black text in dark, white text in light
- LogLevelBadge: same contrast approach; bold weight for alert/emergency levels
- Badge theme default weight reduced from 700 to 600

Typography:
- Added Fredoka (300-700) as body and heading font
- Added Roboto Mono as monospace font
- Google Fonts loaded in index.html and Storybook previewHead
- Heading weight set to 600

Screen layout refactors:
- LoggingScreen: owns filterText and visibleLevels state; passes to LogControls and LogStreamPanel; removed controls prop in favor of flat props
- HistoryScreen: owns searchText and methodFilter state; passes to HistoryControls and HistoryListPanel for filtering
- Both screens use new ScreenLayout (Flex variant="screen") and Sidebar subcomponents
- Added Flex theme with "screen" variant (overflow: hidden)
- Added Paper theme "panel" variant (flex column, overflow hidden)

Component enhancements:
- ServerCard: added compact prop showing only header row
- HistoryEntry: renamed isExpanded to isListExpanded; internal useState syncs via useEffect; individual entries toggle independently
- LogControls: Select All / Deselect All toggle for level checkboxes; nowrap on level selector group
- ConnectionToggle: LoadingOverlay with rounded corners for connecting state
- ConnectedView: ThemeToggle ActionIcon matched to DisconnectButton height (36px) and border color (outline variant)
- Storybook preview: fullscreen layout wrapper with 100vh overflow hidden

New stories:
- UnconnectedView: Connecting and ManyServers (12 servers for scroll testing)
- ServerCard: CompactConnected and CompactDisconnected
- All new components have corresponding stories

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

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

@@ -1,6 +1,7 @@
-import { Container, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useState } from "react";
+import { Container, SimpleGrid, Stack, Text } from "@mantine/core";
 import { ServerCard } from "../../groups/ServerCard/ServerCard";
-import { AddServerMenu } from "../../groups/AddServerMenu/AddServerMenu";
+import { ServerListControls } from "../../groups/ServerListControls/ServerListControls";
 import type { ServerCardProps } from "../../groups/ServerCard/ServerCard";
 
 export interface ServerListScreenProps {
@@ -27,16 +28,23 @@ export function ServerListScreen({
   onImportConfig,
   onImportServerJson,
 }: ServerListScreenProps) {
+  const [compact, setCompact] = useState<boolean>(false);
+
+  function handleToggleList() {
+    setCompact((prev) => (prev === true ? false : true));
+  }
+
   return (
     <PageContainer>
       <Stack gap="lg">
-        <Group justify="flex-end">
-          <AddServerMenu
-            onAddManually={onAddManually}
-            onImportConfig={onImportConfig}
-            onImportServerJson={onImportServerJson}
-          />
-        </Group>
+        <ServerListControls
+          serverCount={servers.length}
+          compact={compact}
+          onToggleList={handleToggleList}
+          onAddManually={onAddManually}
+          onImportConfig={onImportConfig}
+          onImportServerJson={onImportServerJson}
+        />
 
         {servers.length === 0 ? (
           <EmptyState>
@@ -49,7 +57,7 @@ export function ServerListScreen({
             className="grid-align-start"
           >
             {servers.map((server) => (
-              <ServerCard key={server.name} {...server} />
+              <ServerCard key={server.name} compact={compact} {...server} />
             ))}
           </SimpleGrid>
         )}