feat: Add Mantine theme, 12 atom components, and 25 molecule components with Storybook stories

- Mantine theme with component extensions (Badge, Card, Paper, Button, etc.)
- CSS custom properties for design tokens (--inspector-* vars)
- Dark/light mode support with auto detection
- 12 atoms: StatusIndicator, AnnotationBadge, CapabilityItem, LogEntry,
  ProgressDisplay, ContentViewer, ListChangedIndicator, CopyButton,
  ConnectionToggle, TransportBadge, InlineError, MessageBubble
- 25 molecules: ServerCard, AddServerMenu, SchemaForm, ToolListItem,
  ToolDetailPanel, ResultPanel, ResourceListItem, ResourcePreviewPanel,
  ResourceTemplateInput, PromptArgumentsForm, PromptMessagesDisplay,
  LogControls, TaskCard, HistoryEntry, ServerInfoContent, ServerSettingsForm,
  RootsTable, SamplingRequestPanel, ElicitationFormPanel, ElicitationUrlPanel,
  InlineSamplingRequest, InlineElicitationRequest, PendingClientRequests,
  ImportServerJsonPanel, ExperimentalFeaturesPanel
- Exclude storybook-static from version control
- Exclude .stories.tsx from app tsconfig (Storybook-only modules)

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

clients/web/src/theme/ActionIcon.ts

@@ -0,0 +1,8 @@
+import { ActionIcon } from '@mantine/core';
+
+export const ThemeActionIcon = ActionIcon.extend({
+  defaultProps: {
+    variant: 'subtle',
+    radius: 'md',
+  },
+});

clients/web/src/theme/Alert.ts

@@ -0,0 +1,7 @@
+import { Alert } from '@mantine/core';
+
+export const ThemeAlert = Alert.extend({
+  defaultProps: {
+    radius: 'md',
+  },
+});

clients/web/src/theme/AppShell.ts

@@ -0,0 +1,7 @@
+import { AppShell } from '@mantine/core';
+
+export const ThemeAppShell = AppShell.extend({
+  defaultProps: {
+    padding: 'md',
+  },
+});

clients/web/src/theme/Badge.ts

@@ -0,0 +1,8 @@
+import { Badge } from '@mantine/core';
+
+export const ThemeBadge = Badge.extend({
+  defaultProps: {
+    size: 'sm',
+    radius: 'sm',
+  },
+});

clients/web/src/theme/Button.ts

@@ -0,0 +1,7 @@
+import { Button } from '@mantine/core';
+
+export const ThemeButton = Button.extend({
+  defaultProps: {
+    radius: 'md',
+  },
+});

clients/web/src/theme/Card.ts

@@ -0,0 +1,9 @@
+import { Card } from '@mantine/core';
+
+export const ThemeCard = Card.extend({
+  defaultProps: {
+    padding: 'lg',
+    radius: 'md',
+    withBorder: true,
+  },
+});

clients/web/src/theme/Code.ts

@@ -0,0 +1,9 @@
+import { Code } from '@mantine/core';
+
+export const ThemeCode = Code.extend({
+  styles: () => ({
+    root: {
+      backgroundColor: 'var(--inspector-surface-code)',
+    },
+  }),
+});

clients/web/src/theme/Paper.ts

@@ -0,0 +1,22 @@
+import { Paper } from '@mantine/core';
+
+export const ThemePaper = Paper.extend({
+  classNames: (_theme, props) => {
+    if (props.variant === 'code') return { root: 'paper-code' };
+    return {};
+  },
+  styles: (_theme, props) => {
+    if (props.variant === 'code') {
+      return {
+        root: {
+          padding: 'var(--mantine-spacing-md)',
+          backgroundColor: 'var(--inspector-surface-code)',
+          fontFamily: 'var(--mantine-font-family-monospace)',
+          fontSize: 'var(--mantine-font-size-sm)',
+          overflow: 'auto',
+        },
+      };
+    }
+    return { root: {} };
+  },
+});

clients/web/src/theme/Select.ts

@@ -0,0 +1,7 @@
+import { Select } from '@mantine/core';
+
+export const ThemeSelect = Select.extend({
+  defaultProps: {
+    radius: 'md',
+  },
+});

clients/web/src/theme/Switch.ts

@@ -0,0 +1,7 @@
+import { Switch } from '@mantine/core';
+
+export const ThemeSwitch = Switch.extend({
+  defaultProps: {
+    radius: 'xl',
+  },
+});

clients/web/src/theme/TextInput.ts

@@ -0,0 +1,7 @@
+import { TextInput } from '@mantine/core';
+
+export const ThemeTextInput = TextInput.extend({
+  defaultProps: {
+    radius: 'md',
+  },
+});

clients/web/src/theme/index.ts

@@ -0,0 +1,11 @@
+export { ThemeActionIcon } from './ActionIcon';
+export { ThemeAlert } from './Alert';
+export { ThemeAppShell } from './AppShell';
+export { ThemeBadge } from './Badge';
+export { ThemeButton } from './Button';
+export { ThemeCard } from './Card';
+export { ThemeCode } from './Code';
+export { ThemePaper } from './Paper';
+export { ThemeSelect } from './Select';
+export { ThemeSwitch } from './Switch';
+export { ThemeTextInput } from './TextInput';

clients/web/src/theme/theme.ts

@@ -0,0 +1,49 @@
+import { createTheme } from '@mantine/core';
+import {
+  ThemeActionIcon,
+  ThemeAlert,
+  ThemeAppShell,
+  ThemeBadge,
+  ThemeButton,
+  ThemeCard,
+  ThemeCode,
+  ThemePaper,
+  ThemeSelect,
+  ThemeSwitch,
+  ThemeTextInput,
+} from './index';
+
+export const theme = createTheme({
+  /* ── Color ──────────────────────────────────────────────── */
+  primaryColor: 'dark',
+  primaryShade: { light: 7, dark: 4 },
+  autoContrast: true,
+
+  /* ── Shape ──────────────────────────────────────────────── */
+  defaultRadius: 'md',
+  cursorType: 'pointer',
+
+  /* ── Typography ─────────────────────────────────────────── */
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  fontFamilyMonospace:
+    'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+  headings: {
+    fontWeight: '600',
+  },
+
+  /* ── Component overrides ────────────────────────────────── */
+  components: {
+    ActionIcon: ThemeActionIcon,
+    Alert: ThemeAlert,
+    AppShell: ThemeAppShell,
+    Badge: ThemeBadge,
+    Button: ThemeButton,
+    Card: ThemeCard,
+    Code: ThemeCode,
+    Paper: ThemePaper,
+    Select: ThemeSelect,
+    Switch: ThemeSwitch,
+    TextInput: ThemeTextInput,
+  },
+});