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/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { fn } from 'storybook/test'
+import { ResourcePreviewPanel } from './ResourcePreviewPanel'
+
+const meta: Meta<typeof ResourcePreviewPanel> = {
+  title: 'Molecules/ResourcePreviewPanel',
+  component: ResourcePreviewPanel,
+  args: {
+    onCopy: fn(),
+    onSubscribe: fn(),
+    onUnsubscribe: fn(),
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ResourcePreviewPanel>
+
+export const JsonResource: Story = {
+  args: {
+    uri: 'file:///config.json',
+    mimeType: 'application/json',
+    content: JSON.stringify({ name: 'mcp-inspector', version: '2.0.0', debug: true }, null, 2),
+    isSubscribed: false,
+    lastUpdated: '2026-03-17T10:30:00Z',
+  },
+}
+
+export const TextResource: Story = {
+  args: {
+    uri: 'file:///readme.txt',
+    mimeType: 'text/plain',
+    content: 'This is a plain text resource with some example content.\nLine two of the content.',
+    isSubscribed: false,
+  },
+}
+
+export const Subscribed: Story = {
+  args: {
+    uri: 'file:///data.json',
+    mimeType: 'application/json',
+    content: JSON.stringify({ status: 'active' }, null, 2),
+    isSubscribed: true,
+    lastUpdated: '2026-03-17T12:00:00Z',
+  },
+}
+
+export const NotSubscribed: Story = {
+  args: {
+    uri: 'file:///data.json',
+    mimeType: 'application/json',
+    content: JSON.stringify({ status: 'active' }, null, 2),
+    isSubscribed: false,
+  },
+}
+
+export const WithAnnotations: Story = {
+  args: {
+    uri: 'file:///settings.json',
+    mimeType: 'application/json',
+    content: JSON.stringify({ theme: 'dark', lang: 'en' }, null, 2),
+    isSubscribed: false,
+    annotations: {
+      audience: 'application',
+      priority: 0.8,
+    },
+    lastUpdated: '2026-03-17T09:00:00Z',
+  },
+}

clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx

@@ -0,0 +1,77 @@
+import { Button, Group, Stack, Text, Title } from '@mantine/core'
+import { ContentViewer } from '../../atoms/ContentViewer/ContentViewer'
+
+export interface ResourcePreviewPanelProps {
+  uri: string
+  mimeType: string
+  annotations?: { audience?: string; priority?: number }
+  content: string
+  lastUpdated?: string
+  isSubscribed: boolean
+  onCopy: () => void
+  onSubscribe: () => void
+  onUnsubscribe: () => void
+}
+
+function resolveContentType(mimeType: string): 'json' | 'image' | 'text' {
+  if (mimeType === 'application/json') return 'json'
+  if (mimeType.startsWith('image/')) return 'image'
+  return 'text'
+}
+
+export function ResourcePreviewPanel({
+  uri,
+  mimeType,
+  annotations,
+  content,
+  lastUpdated,
+  isSubscribed,
+  onCopy,
+  onSubscribe,
+  onUnsubscribe,
+}: ResourcePreviewPanelProps) {
+  return (
+    <Stack gap="md">
+      <Title order={4}>Content Preview</Title>
+      <Text size="sm">
+        URI: <Text span c="blue">{uri}</Text>
+      </Text>
+      <Text size="sm" c="dimmed">
+        MIME: {mimeType}
+      </Text>
+      {annotations && (
+        <Stack gap="xs">
+          <Text size="sm">Annotations:</Text>
+          {annotations.audience && (
+            <Text size="sm" c="dimmed">Audience: {annotations.audience}</Text>
+          )}
+          {annotations.priority !== undefined && (
+            <Text size="sm" c="dimmed">Priority: {annotations.priority}</Text>
+          )}
+        </Stack>
+      )}
+      <ContentViewer
+        type={resolveContentType(mimeType)}
+        content={content}
+        mimeType={mimeType}
+      />
+      <Group>
+        <Button variant="light" size="sm" onClick={onCopy}>
+          Copy
+        </Button>
+        <Button
+          variant="light"
+          size="sm"
+          onClick={isSubscribed ? onUnsubscribe : onSubscribe}
+        >
+          {isSubscribed ? 'Unsubscribe' : 'Subscribe'}
+        </Button>
+      </Group>
+      {lastUpdated && (
+        <Text size="xs" c="dimmed" ta="right">
+          Last updated: {lastUpdated}
+        </Text>
+      )}
+    </Stack>
+  )
+}