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>
2026-03-28 20:38:04 -04:00 · 2026-03-28 20:38:04 -04:00 · 961dc283fc
commit 961dc283fc
parent dd46acba87
35 changed files with 1602 additions and 790 deletions
--- a/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx
+++ b/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx
@ -13,16 +13,13 @@ export interface AnnotationBadgeProps {
  variant?: AnnotationVariant;
 }

-const variantMap: Record<
-  AnnotationVariant,
-  { color: string; variant: string }
-> = {
-  audience: { color: "blue", variant: "outline" },
-  readOnly: { color: "green", variant: "filled" },
-  destructive: { color: "red", variant: "filled" },
-  longRun: { color: "yellow", variant: "filled" },
-  priority: { color: "orange", variant: "filled" },
-  default: { color: "gray", variant: "light" },
+const colorMap: Record<AnnotationVariant, string> = {
+  audience: "blue",
+  readOnly: "green",
+  destructive: "red",
+  longRun: "yellow",
+  priority: "orange",
+  default: "gray",
 };

 export function AnnotationBadge({
@ -30,15 +27,10 @@ export function AnnotationBadge({
  variant = "default",
 }: AnnotationBadgeProps) {
  const colorScheme = useComputedColorScheme();
-  const { color, variant: badgeVariant } = variantMap[variant];
-  const textColor =
-    (variant === "priority" || variant === "destructive") &&
-    colorScheme === "dark"
-      ? "black"
-      : undefined;
-
+  const color = colorMap[variant];
+  const textColor = colorScheme === "dark" ? "black" : "white";
  return (
-    <Badge color={color} variant={badgeVariant} c={textColor}>
+    <Badge color={color} variant="filled" fw={500} c={textColor}>
      {label}
    </Badge>
  );
--- a/clients/web/src/components/elements/ListToggle/ListToggle.stories.tsx
+++ b/clients/web/src/components/elements/ListToggle/ListToggle.stories.tsx
@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ListToggle } from "./ListToggle";
+
+const meta: Meta<typeof ListToggle> = {
+  title: "Elements/ListToggle",
+  component: ListToggle,
+};
+
+export default meta;
+type Story = StoryObj<typeof ListToggle>;
+
+export const Expanded: Story = {
+  args: {
+    compact: false,
+    onToggle: fn(),
+  },
+};
+
+export const Collapsed: Story = {
+  args: {
+    compact: true,
+    onToggle: fn(),
+  },
+};
--- a/clients/web/src/components/elements/ListToggle/ListToggle.tsx
+++ b/clients/web/src/components/elements/ListToggle/ListToggle.tsx
@ -0,0 +1,17 @@
+import { Button } from "@mantine/core";
+import { RiExpandVerticalLine, RiCollapseVerticalLine } from "react-icons/ri";
+
+export interface ListToggleProps {
+  compact: boolean;
+  onToggle: () => void;
+}
+
+export function ListToggle({ compact, onToggle }: ListToggleProps) {
+  const Icon = compact ? RiExpandVerticalLine : RiCollapseVerticalLine;
+
+  return (
+    <Button size="sm" onClick={onToggle}>
+      <Icon size={20} />
+    </Button>
+  );
+}
--- a/clients/web/src/components/elements/LogEntry/LogEntry.tsx
+++ b/clients/web/src/components/elements/LogEntry/LogEntry.tsx
@ -1,4 +1,5 @@
-import { Badge, Group, Text } from "@mantine/core";
+import { Group, Text } from "@mantine/core";
+import { LogLevelBadge } from "../LogLevelBadge/LogLevelBadge";

 export type LogLevel =
  | "debug"
@ -17,28 +18,6 @@ export interface LogEntryProps {
  logger?: string;
 }

-const levelBadgeColor: Record<LogLevel, string> = {
-  debug: "gray",
-  info: "blue",
-  notice: "teal",
-  warning: "yellow",
-  error: "red",
-  critical: "red",
-  alert: "red",
-  emergency: "red",
-};
-
-const levelBadgeVariant: Record<LogLevel, string> = {
-  debug: "light",
-  info: "light",
-  notice: "light",
-  warning: "light",
-  error: "light",
-  critical: "filled",
-  alert: "filled",
-  emergency: "filled",
-};
-
 const levelMessageColor: Record<LogLevel, string | undefined> = {
  debug: "dimmed",
  info: "blue",
@ -50,14 +29,6 @@ const levelMessageColor: Record<LogLevel, string | undefined> = {
  emergency: "red",
 };

-function isBoldLevel(level: LogLevel): boolean {
-  return level === "alert" || level === "emergency";
-}
-
-function getBoldWeight(level: LogLevel): number | undefined {
-  return isBoldLevel(level) ? 700 : undefined;
-}
-
 function formatLogger(logger: string): string {
  return `[${logger}]`;
 }
@ -70,6 +41,7 @@ const TimestampText = Text.withProps({

 const LoggerText = Text.withProps({
  size: "xs",
+  ff: "monospace",
  c: "dimmed",
 });

@ -77,15 +49,9 @@ export function LogEntry({ timestamp, level, message, logger }: LogEntryProps) {
  return (
    <Group gap="sm" wrap="nowrap">
      <TimestampText>{timestamp}</TimestampText>
-      <Badge
-        color={levelBadgeColor[level]}
-        variant={levelBadgeVariant[level]}
-        fw={getBoldWeight(level)}
-      >
-        {level}
-      </Badge>
+      <LogLevelBadge level={level} />
      {logger && <LoggerText>{formatLogger(logger)}</LoggerText>}
-      <Text size="sm" c={levelMessageColor[level]}>
+      <Text size="sm" ff="monospace" c={levelMessageColor[level]}>
        {message}
      </Text>
    </Group>
--- a/clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.stories.tsx
+++ b/clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.stories.tsx
@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LogLevelBadge } from "./LogLevelBadge";
+
+const meta: Meta<typeof LogLevelBadge> = {
+  title: "Elements/LogLevelBadge",
+  component: LogLevelBadge,
+};
+
+export default meta;
+type Story = StoryObj<typeof LogLevelBadge>;
+
+export const Debug: Story = { args: { level: "debug" } };
+export const Info: Story = { args: { level: "info" } };
+export const Notice: Story = { args: { level: "notice" } };
+export const Warning: Story = { args: { level: "warning" } };
+export const Error: Story = { args: { level: "error" } };
+export const Critical: Story = { args: { level: "critical" } };
+export const Alert: Story = { args: { level: "alert" } };
+export const Emergency: Story = { args: { level: "emergency" } };
--- a/clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.tsx
+++ b/clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.tsx
@ -0,0 +1,31 @@
+import { Badge, useComputedColorScheme } from "@mantine/core";
+import type { LogLevel } from "../LogEntry/LogEntry";
+
+export interface LogLevelBadgeProps {
+  level: LogLevel;
+}
+
+const levelColor: Record<LogLevel, string> = {
+  debug: "gray",
+  info: "blue",
+  notice: "teal",
+  warning: "yellow",
+  error: "red",
+  critical: "red",
+  alert: "red",
+  emergency: "red",
+};
+
+const boldLevels: Set<LogLevel> = new Set(["alert", "emergency"]);
+
+export function LogLevelBadge({ level }: LogLevelBadgeProps) {
+  const colorScheme = useComputedColorScheme();
+  const textColor = colorScheme === "dark" ? "black" : "white";
+  const fw = boldLevels.has(level) ? 500 : undefined;
+
+  return (
+    <Badge color={levelColor[level]} variant="filled" fw={fw} c={textColor}>
+      {level}
+    </Badge>
+  );
+}
--- a/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx
+++ b/clients/web/src/components/groups/HistoryControls/HistoryControls.stories.tsx
@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { HistoryControls } from "./HistoryControls";
+
+const meta: Meta<typeof HistoryControls> = {
+  title: "Groups/HistoryControls",
+  component: HistoryControls,
+};
+
+export default meta;
+type Story = StoryObj<typeof HistoryControls>;
+
+export const Default: Story = {
+  args: {
+    searchText: "",
+    onSearchChange: fn(),
+    onMethodFilterChange: fn(),
+    onClearAll: fn(),
+    onExport: fn(),
+  },
+};
+
+export const WithFilters: Story = {
+  args: {
+    searchText: "tools",
+    methodFilter: "tools/call",
+    onSearchChange: fn(),
+    onMethodFilterChange: fn(),
+    onClearAll: fn(),
+    onExport: fn(),
+  },
+};
--- a/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
+++ b/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
@ -0,0 +1,62 @@
+import { Button, Group, Select, Stack, TextInput, Title } from "@mantine/core";
+
+const METHOD_OPTIONS = [
+  "tools/call",
+  "tools/list",
+  "resources/read",
+  "resources/list",
+  "prompts/get",
+  "prompts/list",
+  "sampling/createMessage",
+  "elicitation/create",
+];
+
+const ToolbarButton = Button.withProps({
+  variant: "light",
+  size: "sm",
+});
+
+export interface HistoryControlsProps {
+  searchText: string;
+  methodFilter?: string;
+  onSearchChange: (text: string) => void;
+  onMethodFilterChange: (method: string) => void;
+  onClearAll: () => void;
+  onExport: () => void;
+}
+
+export function HistoryControls({
+  searchText,
+  methodFilter,
+  onSearchChange,
+  onMethodFilterChange,
+  onClearAll,
+  onExport,
+}: HistoryControlsProps) {
+  return (
+    <Stack gap="md">
+      <Title order={4}>History</Title>
+
+      <Title order={5}>Search</Title>
+      <TextInput
+        placeholder="Search..."
+        value={searchText}
+        onChange={(event) => onSearchChange(event.currentTarget.value)}
+      />
+
+      <Title order={6}>Filter by Method</Title>
+      <Select
+        placeholder="All methods"
+        data={METHOD_OPTIONS}
+        value={methodFilter}
+        onChange={(value) => onMethodFilterChange(value ?? "")}
+        clearable
+      />
+
+      <Group>
+        <ToolbarButton onClick={onExport}>Export JSON</ToolbarButton>
+        <ToolbarButton onClick={onClearAll}>Clear All</ToolbarButton>
+      </Group>
+    </Stack>
+  );
+}
--- a/clients/web/src/components/groups/HistoryEntry/HistoryEntry.stories.tsx
+++ b/clients/web/src/components/groups/HistoryEntry/HistoryEntry.stories.tsx
@ -6,7 +6,6 @@ const meta: Meta<typeof HistoryEntry> = {
  title: "Groups/HistoryEntry",
  component: HistoryEntry,
  args: {
-    onToggleExpand: fn(),
    onReplay: fn(),
    onTogglePin: fn(),
  },
@ -23,7 +22,7 @@ export const SuccessCollapsed: Story = {
    status: "success",
    durationMs: 142,
    isPinned: false,
-    isExpanded: false,
+    isListExpanded: false,
  },
 };

@ -35,7 +34,7 @@ export const SuccessExpanded: Story = {
    status: "success",
    durationMs: 142,
    isPinned: false,
-    isExpanded: true,
+    isListExpanded: true,
    parameters: {
      city: "San Francisco",
      units: "celsius",
@ -56,7 +55,7 @@ export const Error: Story = {
    status: "error",
    durationMs: 3200,
    isPinned: false,
-    isExpanded: false,
+    isListExpanded: false,
  },
 };

@ -68,7 +67,7 @@ export const WithChildren: Story = {
    status: "success",
    durationMs: 1250,
    isPinned: false,
-    isExpanded: true,
+    isListExpanded: true,
    parameters: {
      action: "process",
    },
@ -102,7 +101,6 @@ export const Pinned: Story = {
    status: "success",
    durationMs: 45,
    isPinned: true,
-    pinLabel: "Baseline",
-    isExpanded: false,
+    isListExpanded: false,
  },
 };
--- a/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx
+++ b/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx
@ -1,8 +1,10 @@
+import { useEffect, useState } from "react";
 import {
  Badge,
  Button,
  Card,
  Collapse,
+  Divider,
  Group,
  Stack,
  Text,
@ -27,9 +29,7 @@ export interface HistoryEntryProps {
  response?: Record<string, unknown>;
  childEntries?: HistoryChildEntry[];
  isPinned: boolean;
-  pinLabel?: string;
-  isExpanded: boolean;
-  onToggleExpand: () => void;
+  isListExpanded: boolean;
  onReplay: () => void;
  onTogglePin: () => void;
 }
@ -82,9 +82,8 @@ function statusColor(status: "success" | "error"): string {
  return status === "success" ? "green" : "red";
 }

-function formatPinLabel(isPinned: boolean, pinLabel?: string): string {
-  const base = isPinned ? "Unpin" : "Pin";
-  return isPinned && pinLabel ? `${base} (${pinLabel})` : base;
+function formatPinLabel(isPinned: boolean): string {
+  return isPinned ? "Unpin" : "Pin";
 }

 function serializeJson(value: Record<string, unknown>): string {
@ -101,12 +100,15 @@ export function HistoryEntry({
  response,
  childEntries,
  isPinned,
-  pinLabel,
-  isExpanded,
-  onToggleExpand,
+  isListExpanded,
  onReplay,
  onTogglePin,
 }: HistoryEntryProps) {
+  const [isExpanded, setIsExpanded] = useState(isListExpanded);
+
+  useEffect(() => {
+    setIsExpanded(isListExpanded);
+  }, [isListExpanded]);
  return (
    <EntryContainer>
      <Stack gap="sm">
@ -127,55 +129,60 @@ export function HistoryEntry({
        <Group gap="xs">
          <SubtleButton onClick={onReplay}>Replay</SubtleButton>
          <SubtleButton onClick={onTogglePin}>
-            {formatPinLabel(isPinned, pinLabel)}
+            {formatPinLabel(isPinned)}
          </SubtleButton>
-          <SubtleButton onClick={onToggleExpand} ml="auto">
+          <SubtleButton onClick={() => setIsExpanded((v) => !v)} ml="auto">
            {isExpanded ? "Collapse" : "Expand"}
          </SubtleButton>
        </Group>

-        <Collapse in={isExpanded}>
-          <Stack gap="sm">
-            {parameters && (
-              <Stack gap="xs">
-                <Text size="sm">Parameters:</Text>
-                <ContentViewer
-                  type="json"
-                  content={serializeJson(parameters)}
-                  copyable
-                />
-              </Stack>
-            )}
-            {response && (
-              <Stack gap="xs">
-                <Text size="sm">Response:</Text>
-                <ContentViewer
-                  type="json"
-                  content={serializeJson(response)}
-                  copyable
-                />
-              </Stack>
-            )}
-            {childEntries && childEntries.length > 0 && (
-              <Stack gap="xs">
-                {childEntries.map((child, index) => (
-                  <Group key={index} pl="lg" gap="sm">
-                    <TimestampText>+-- </TimestampText>
-                    <TimestampText>{child.timestamp}</TimestampText>
-                    <ChildMethodBadge>{child.method}</ChildMethodBadge>
-                    {child.target && <Text size="sm">{child.target}</Text>}
-                    <Badge color={statusColor(child.status)} size="sm">
-                      {formatStatusLabel(child.status)}
-                    </Badge>
-                    <DurationText>
-                      {formatDuration(child.durationMs)}
-                    </DurationText>
-                  </Group>
-                ))}
-              </Stack>
-            )}
-          </Stack>
-        </Collapse>
+        {isExpanded && (
+          <Collapse in={isExpanded}>
+            <Stack gap="sm">
+              {parameters && (
+                <>
+                  <Divider />
+                  <Stack gap="xs">
+                    <Text size="sm">Parameters:</Text>
+                    <ContentViewer
+                      type="json"
+                      content={serializeJson(parameters)}
+                      copyable
+                    />
+                  </Stack>
+                </>
+              )}
+              {response && (
+                <Stack gap="xs">
+                  <Text size="sm">Response:</Text>
+                  <ContentViewer
+                    type="json"
+                    content={serializeJson(response)}
+                    copyable
+                  />
+                </Stack>
+              )}
+              {childEntries && childEntries.length > 0 && (
+                <Stack gap="xs">
+                  {childEntries.map((child, index) => (
+                    <Group key={index} pl="lg" gap="sm">
+                      <TimestampText>+-- </TimestampText>
+                      <TimestampText>{child.timestamp}</TimestampText>
+                      <ChildMethodBadge>{child.method}</ChildMethodBadge>
+                      {child.target && <Text size="sm">{child.target}</Text>}
+                      <Badge color={statusColor(child.status)} size="sm">
+                        {formatStatusLabel(child.status)}
+                      </Badge>
+                      <DurationText>
+                        {formatDuration(child.durationMs)}
+                      </DurationText>
+                    </Group>
+                  ))}
+                </Stack>
+              )}
+            </Stack>
+          </Collapse>
+        )}
      </Stack>
    </EntryContainer>
  );
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx
@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { HistoryListPanel } from "./HistoryListPanel.js";
+import type { HistoryEntryProps } from "../HistoryEntry/HistoryEntry";
+
+const meta: Meta<typeof HistoryListPanel> = {
+  title: "Groups/HistoryListPanel",
+  component: HistoryListPanel,
+  args: {
+    searchText: "",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HistoryListPanel>;
+
+function makeEntry(overrides: Partial<HistoryEntryProps>): HistoryEntryProps {
+  return {
+    timestamp: "2026-03-17T10:00:00Z",
+    method: "tools/call",
+    target: "send_message",
+    status: "success",
+    durationMs: 120,
+    isPinned: false,
+    isListExpanded: false,
+    onReplay: fn(),
+    onTogglePin: fn(),
+    ...overrides,
+  };
+}
+
+export const WithEntries: Story = {
+  args: {
+    entries: [
+      makeEntry({
+        timestamp: "2026-03-17T10:00:00Z",
+        method: "tools/call",
+        target: "send_message",
+      }),
+      makeEntry({
+        timestamp: "2026-03-17T10:01:00Z",
+        method: "resources/read",
+        target: "config.json",
+        durationMs: 45,
+      }),
+      makeEntry({
+        timestamp: "2026-03-17T10:02:00Z",
+        method: "tools/call",
+        target: "delete_records",
+        status: "error",
+        durationMs: 350,
+      }),
+    ],
+    pinnedEntries: [
+      makeEntry({
+        timestamp: "2026-03-17T09:30:00Z",
+        method: "tools/list",
+        isPinned: true,
+        durationMs: 80,
+      }),
+    ],
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    entries: [],
+    pinnedEntries: [],
+  },
+};
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@ -0,0 +1,133 @@
+import { useMemo, useState } from "react";
+import {
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { HistoryEntry } from "../HistoryEntry/HistoryEntry";
+import { ListToggle } from "../../elements/ListToggle/ListToggle";
+import type { HistoryEntryProps } from "../HistoryEntry/HistoryEntry";
+
+export interface HistoryRequestsPanelProps {
+  entries: HistoryEntryProps[];
+  pinnedEntries: HistoryEntryProps[];
+  searchText: string;
+  methodFilter?: string;
+}
+
+const PanelContainer = Paper.withProps({
+  withBorder: true,
+  p: "lg",
+  flex: 1,
+  variant: "panel",
+});
+
+const EmptyState = Text.withProps({
+  c: "dimmed",
+  ta: "center",
+  py: "xl",
+});
+
+function entryKey(entry: HistoryEntryProps): string {
+  return `${entry.timestamp}-${entry.method}`;
+}
+
+function formatPinnedTitle(count: number): string {
+  return `Pinned Requests (${count})`;
+}
+
+function formatHistoryTitle(count: number): string {
+  return `History (${count})`;
+}
+
+function matchesFilters(
+  entry: HistoryEntryProps,
+  searchText: string,
+  methodFilter?: string,
+): boolean {
+  if (methodFilter && entry.method !== methodFilter) return false;
+  if (searchText) {
+    const term = searchText.toLowerCase();
+    const searchable =
+      `${entry.method} ${entry.target ?? ""} ${entry.timestamp}`.toLowerCase();
+    if (!searchable.includes(term)) return false;
+  }
+  return true;
+}
+
+export function HistoryListPanel({
+  entries,
+  pinnedEntries,
+  searchText,
+  methodFilter,
+}: HistoryRequestsPanelProps) {
+  const [compact, setCompact] = useState(false);
+
+  const filteredEntries = useMemo(
+    () => entries.filter((e) => matchesFilters(e, searchText, methodFilter)),
+    [entries, searchText, methodFilter],
+  );
+
+  const filteredPinned = useMemo(
+    () =>
+      pinnedEntries.filter((e) => matchesFilters(e, searchText, methodFilter)),
+    [pinnedEntries, searchText, methodFilter],
+  );
+
+  const hasResults = filteredEntries.length > 0 || filteredPinned.length > 0;
+
+  return (
+    <PanelContainer>
+      <Group justify="space-between" mb="sm">
+        <Title order={4}>Requests</Title>
+        {hasResults && (
+          <ListToggle
+            compact={compact}
+            onToggle={() => setCompact((c) => !c)}
+          />
+        )}
+      </Group>
+
+      {!hasResults ? (
+        <EmptyState>No request history</EmptyState>
+      ) : (
+        <ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)">
+          <Stack gap="md">
+            {filteredPinned.length > 0 && (
+              <>
+                <Title order={5}>
+                  {formatPinnedTitle(filteredPinned.length)}
+                </Title>
+                {filteredPinned.map((entry) => (
+                  <HistoryEntry
+                    key={entryKey(entry)}
+                    {...entry}
+                    isListExpanded={!compact}
+                  />
+                ))}
+              </>
+            )}
+
+            {filteredEntries.length > 0 && (
+              <>
+                <Title order={5}>
+                  {formatHistoryTitle(filteredEntries.length)}
+                </Title>
+                {filteredEntries.map((entry) => (
+                  <HistoryEntry
+                    key={entryKey(entry)}
+                    {...entry}
+                    isListExpanded={!compact}
+                  />
+                ))}
+              </>
+            )}
+          </Stack>
+        </ScrollArea.Autosize>
+      )}
+    </PanelContainer>
+  );
+}
--- a/clients/web/src/components/groups/LogControls/LogControls.tsx
+++ b/clients/web/src/components/groups/LogControls/LogControls.tsx
@ -36,6 +36,11 @@ const ToolbarButton = Button.withProps({
  size: "sm",
 });

+const SubtleButton = Button.withProps({
+  variant: "subtle",
+  size: "xs",
+});
+
 export interface LogControlsProps {
  currentLevel: string;
  filterText: string;
@ -43,6 +48,7 @@ export interface LogControlsProps {
  onSetLevel: (level: string) => void;
  onFilterChange: (text: string) => void;
  onToggleLevel: (level: string, visible: boolean) => void;
+  onToggleAllLevels: () => void;
  onClear: () => void;
  onExport: () => void;
 }
@ -54,13 +60,16 @@ export function LogControls({
  onSetLevel,
  onFilterChange,
  onToggleLevel,
+  onToggleAllLevels,
  onClear,
  onExport,
 }: LogControlsProps) {
  return (
    <Stack gap="md">
-      <Title order={5}>Log Level</Title>
-      <Group>
+      <Title order={4}>Logging</Title>
+
+      <Title order={5}>Active Level</Title>
+      <Group wrap="nowrap">
        <Select
          data={LOG_LEVELS.map((level) => ({ value: level, label: level }))}
          value={currentLevel}
@ -69,18 +78,25 @@ export function LogControls({
          }}
        />
        <Button size="sm" onClick={() => onSetLevel(currentLevel)}>
-          Set Level
+          Set
        </Button>
      </Group>

-      <Title order={5}>Filter</Title>
+      <Title order={5}>Search</Title>
      <TextInput
        placeholder="Search logs..."
        value={filterText}
        onChange={(e) => onFilterChange(e.currentTarget.value)}
      />

-      <Title order={5}>Show Levels</Title>
+      <Group justify="space-between">
+        <Title order={5}>Filter by Level</Title>
+        <SubtleButton onClick={onToggleAllLevels}>
+          {Object.values(visibleLevels).every(Boolean)
+            ? "Deselect All"
+            : "Select All"}
+        </SubtleButton>
+      </Group>
      {LOG_LEVELS.map((level) => {
        const style = LEVEL_COLORS[level];
        return (
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { LogStreamPanel } from "./LogStreamPanel";
+import type { LogEntryProps, LogLevel } from "../../elements/LogEntry/LogEntry";
+
+const meta: Meta<typeof LogStreamPanel> = {
+  title: "Groups/LogStreamPanel",
+  component: LogStreamPanel,
+  args: {
+    filterText: "",
+    visibleLevels: {
+      debug: true,
+      info: true,
+      notice: true,
+      warning: true,
+      error: true,
+      critical: true,
+      alert: true,
+      emergency: true,
+    },
+    autoScroll: true,
+    onToggleAutoScroll: fn(),
+    onCopyAll: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LogStreamPanel>;
+
+export const Empty: Story = {
+  args: {
+    entries: [],
+  },
+};
+
+const logMessages: { level: LogLevel; message: string; logger?: string }[] = [
+  { level: "info", message: "Server started on port 3000" },
+  { level: "debug", message: "Loading configuration", logger: "config" },
+  {
+    level: "warning",
+    message: "Deprecated API endpoint called",
+    logger: "http",
+  },
+  { level: "error", message: "Failed to read resource", logger: "resources" },
+  {
+    level: "info",
+    message: "Tool execution completed (245ms)",
+    logger: "tools",
+  },
+  {
+    level: "critical",
+    message: "Database connection pool exhausted",
+    logger: "db",
+  },
+  { level: "alert", message: "Memory usage exceeds 95%", logger: "system" },
+  { level: "emergency", message: "System unresponsive", logger: "system" },
+];
+
+function pad(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+const entries: LogEntryProps[] = Array.from({ length: 30 }, (_, i) => {
+  const src = logMessages[i % logMessages.length];
+  return {
+    timestamp: `2026-03-17T10:00:${pad(i + 1)}Z`,
+    level: src.level,
+    message: src.message,
+    logger: src.logger,
+  };
+});
+
+export const WithEntries: Story = {
+  args: {
+    entries,
+  },
+};
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
@ -0,0 +1,98 @@
+import { useMemo } from "react";
+import {
+  Button,
+  Checkbox,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
+import { LogEntry } from "../../elements/LogEntry/LogEntry";
+import type { LogEntryProps } from "../../elements/LogEntry/LogEntry";
+
+export interface LogStreamPanelProps {
+  entries: LogEntryProps[];
+  filterText: string;
+  visibleLevels: Record<string, boolean>;
+  autoScroll: boolean;
+  onToggleAutoScroll: () => void;
+  onCopyAll: () => void;
+}
+
+const PanelContainer = Paper.withProps({
+  withBorder: true,
+  p: "lg",
+  flex: 1,
+  variant: "panel",
+});
+
+const ToolbarButton = Button.withProps({
+  variant: "light",
+  size: "sm",
+});
+
+const EmptyCenter = Stack.withProps({
+  flex: 1,
+  align: "center",
+  justify: "center",
+});
+
+function matchesFilters(
+  entry: LogEntryProps,
+  filterText: string,
+  visibleLevels: Record<string, boolean>,
+): boolean {
+  if (!visibleLevels[entry.level]) return false;
+  if (filterText) {
+    const term = filterText.toLowerCase();
+    const searchable =
+      `${entry.message} ${entry.logger ?? ""} ${entry.level}`.toLowerCase();
+    if (!searchable.includes(term)) return false;
+  }
+  return true;
+}
+
+export function LogStreamPanel({
+  entries,
+  filterText,
+  visibleLevels,
+  autoScroll,
+  onToggleAutoScroll,
+  onCopyAll,
+}: LogStreamPanelProps) {
+  const filteredEntries = useMemo(
+    () => entries.filter((e) => matchesFilters(e, filterText, visibleLevels)),
+    [entries, filterText, visibleLevels],
+  );
+
+  return (
+    <PanelContainer>
+      <Group justify="space-between" mb="sm">
+        <Title order={4}>Log Stream</Title>
+        <Group>
+          <Checkbox
+            label="Auto-scroll"
+            checked={autoScroll}
+            onChange={onToggleAutoScroll}
+          />
+          <ToolbarButton onClick={onCopyAll}>Copy All</ToolbarButton>
+        </Group>
+      </Group>
+      {filteredEntries.length > 0 ? (
+        <ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)">
+          <Stack gap="xs">
+            {filteredEntries.map((entry, index) => (
+              <LogEntry key={index} {...entry} />
+            ))}
+          </Stack>
+        </ScrollArea.Autosize>
+      ) : (
+        <EmptyCenter>
+          <Text c="dimmed">No log entries</Text>
+        </EmptyCenter>
+      )}
+    </PanelContainer>
+  );
+}
--- a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.stories.tsx
+++ b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.stories.tsx
@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ServerAddMenu } from "./ServerAddMenu.js";
+
+const meta: Meta<typeof ServerAddMenu> = {
+  title: "Groups/ServerAddMenu",
+  component: ServerAddMenu,
+  args: {
+    onAddManually: fn(),
+    onImportConfig: fn(),
+    onImportServerJson: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServerAddMenu>;
+
+export const Default: Story = {};
--- a/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
+++ b/clients/web/src/components/groups/ServerAddMenu/ServerAddMenu.tsx
@ -0,0 +1,28 @@
+import { Button, Menu } from "@mantine/core";
+import { RiArrowDownSLine } from "react-icons/ri";
+
+export interface AddServerMenuProps {
+  onAddManually: () => void;
+  onImportConfig: () => void;
+  onImportServerJson: () => void;
+}
+
+export function ServerAddMenu({
+  onAddManually,
+  onImportConfig,
+  onImportServerJson,
+}: AddServerMenuProps) {
+  const Icon = RiArrowDownSLine;
+  return (
+    <Menu>
+      <Menu.Target>
+        <Button rightSection={<Icon size={20} />}>Add Servers</Button>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item onClick={onAddManually}>+ Add manually</Menu.Item>
+        <Menu.Item onClick={onImportConfig}>Import config</Menu.Item>
+        <Menu.Item onClick={onImportServerJson}>Import server.json</Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
--- a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
@ -112,3 +112,29 @@ export const HttpDirect: Story = {
    canTestClientFeatures: false,
  },
 };
+
+export const CompactConnected: Story = {
+  args: {
+    name: "My MCP Server",
+    version: "1.2.0",
+    transport: "stdio",
+    connectionMode: "Subprocess",
+    command: "npx -y @modelcontextprotocol/server-everything",
+    status: "connected",
+    canTestClientFeatures: false,
+    compact: true,
+  },
+};
+
+export const CompactDisconnected: Story = {
+  args: {
+    name: "My MCP Server",
+    version: "1.2.0",
+    transport: "stdio",
+    connectionMode: "Subprocess",
+    command: "npx -y @modelcontextprotocol/server-everything",
+    status: "disconnected",
+    canTestClientFeatures: false,
+    compact: true,
+  },
+};
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@ -25,6 +25,7 @@ export interface ServerCardProps {
  onTestElicitationForm?: () => void;
  onTestElicitationUrl?: () => void;
  onConfigureRoots?: () => void;
+  compact?: boolean;
 }

 const HeaderLeft = Group.withProps({
@ -80,6 +81,7 @@ export function ServerCard({
  onTestElicitationForm,
  onTestElicitationUrl,
  onConfigureRoots,
+  compact = false,
 }: ServerCardProps) {
  const isConnected = status === "connected";
  const isConnecting = status === "connecting";
@ -103,53 +105,57 @@ export function ServerCard({
          </HeaderRight>
        </Group>

-        <Group gap="sm">
-          <TransportBadge transport={transport} />
-          <ModeText>{connectionMode}</ModeText>
-        </Group>
+        {!compact && (
+          <>
+            <Group gap="sm">
+              <TransportBadge transport={transport} />
+              <ModeText>{connectionMode}</ModeText>
+            </Group>

-        <ContentViewer type="text" content={command} copyable />
+            <ContentViewer type="text" content={command} copyable />

-        {error && (
-          <InlineError
-            message={error.message}
-            details={error.details}
-            retryCount={retryCount}
-          />
-        )}
-
-        <Group justify="space-between">
-          <ActionsRow>
-            <SubtleButton onClick={onClone}>Clone</SubtleButton>
-            <SubtleButton onClick={onEdit}>Edit</SubtleButton>
-            <RemoveButton onClick={onRemove}>Remove</RemoveButton>
-          </ActionsRow>
-          <ActionsRow>
-            <SubtleButton onClick={onServerInfo}>Server Info</SubtleButton>
-            <SubtleButton onClick={onSettings}>Settings</SubtleButton>
-            {canTestClientFeatures && (
-              <Menu>
-                <Menu.Target>
-                  <SubtleButton>Test Client Features &#x25BE;</SubtleButton>
-                </Menu.Target>
-                <Menu.Dropdown>
-                  <Menu.Item onClick={onTestSampling}>
-                    Simulate Sampling Request
-                  </Menu.Item>
-                  <Menu.Item onClick={onTestElicitationForm}>
-                    Simulate Elicitation (Form)
-                  </Menu.Item>
-                  <Menu.Item onClick={onTestElicitationUrl}>
-                    Simulate Elicitation (URL)
-                  </Menu.Item>
-                  <Menu.Item onClick={onConfigureRoots}>
-                    Configure Roots
-                  </Menu.Item>
-                </Menu.Dropdown>
-              </Menu>
+            {error && (
+              <InlineError
+                message={error.message}
+                details={error.details}
+                retryCount={retryCount}
+              />
            )}
-          </ActionsRow>
-        </Group>
+
+            <Group justify="space-between">
+              <ActionsRow>
+                <SubtleButton onClick={onClone}>Clone</SubtleButton>
+                <SubtleButton onClick={onEdit}>Edit</SubtleButton>
+                <RemoveButton onClick={onRemove}>Remove</RemoveButton>
+              </ActionsRow>
+              <ActionsRow>
+                <SubtleButton onClick={onServerInfo}>Server Info</SubtleButton>
+                <SubtleButton onClick={onSettings}>Settings</SubtleButton>
+                {canTestClientFeatures && (
+                  <Menu>
+                    <Menu.Target>
+                      <SubtleButton>Test Client Features &#x25BE;</SubtleButton>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      <Menu.Item onClick={onTestSampling}>
+                        Simulate Sampling Request
+                      </Menu.Item>
+                      <Menu.Item onClick={onTestElicitationForm}>
+                        Simulate Elicitation (Form)
+                      </Menu.Item>
+                      <Menu.Item onClick={onTestElicitationUrl}>
+                        Simulate Elicitation (URL)
+                      </Menu.Item>
+                      <Menu.Item onClick={onConfigureRoots}>
+                        Configure Roots
+                      </Menu.Item>
+                    </Menu.Dropdown>
+                  </Menu>
+                )}
+              </ActionsRow>
+            </Group>
+          </>
+        )}
      </Stack>
    </Card>
  );
--- a/clients/web/src/components/groups/ServerListControls/ServerListControls.stories.tsx
+++ b/clients/web/src/components/groups/ServerListControls/ServerListControls.stories.tsx
@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { ServerListControls } from "./ServerListControls";
+
+const meta: Meta<typeof ServerListControls> = {
+  title: "Groups/ServerListControls",
+  component: ServerListControls,
+};
+
+export default meta;
+type Story = StoryObj<typeof ServerListControls>;
+
+export const WithServers: Story = {
+  args: {
+    serverCount: 5,
+    compact: false,
+    onToggleList: fn(),
+    onAddManually: fn(),
+    onImportConfig: fn(),
+    onImportServerJson: fn(),
+  },
+};
+
+export const WithoutServers: Story = {
+  args: {
+    serverCount: 0,
+    compact: true,
+    onToggleList: fn(),
+    onAddManually: fn(),
+    onImportConfig: fn(),
+    onImportServerJson: fn(),
+  },
+};
--- a/Show more
+++ b/Show more