From f9a1aa4e3c10a87fb1616db7d7bcea3af69fa8d8 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 16 Apr 2026 20:36:34 -0400
Subject: [PATCH 1/7] Add .claude/ to .gitignore

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index e77e9dec..bde1cf45 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .idea
 .vscode
 .DS_Store
+.claude/
 node_modules
 dist
 .env

From 2d4fca4fa6571519a115129188eaf4aae78ce30d Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 16 Apr 2026 22:25:23 -0400
Subject: [PATCH 2/7] Phase 1: Refactor all 16 element component interfaces to
 use MCP SDK types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace ad-hoc local type definitions in element components with real
MCP SDK types and Inspector wrapper types from core/mcp/types.ts:

Schema-typed primitives:
- LogLevelBadge: LogLevel → LoggingLevel (SDK)
- TransportBadge: "stdio"|"http" → ServerType (core), add sse/streamable-http
- TaskStatusBadge: local TaskStatus → SDK TaskStatus (working/input_required/...)
- ServerStatusIndicator: inline union → ConnectionStatus (core), "failed"→"error"

MCP wrapper consumers:
- AnnotationBadge: label+variant → facet+value with SDK Role type
- CapabilityItem: name:string → capability:keyof ServerCapabilities|ClientCapabilities
- LogEntry: flat props → entry:{receivedAt:Date, params:LoggingMessageNotification["params"]}
- MessageBubble: flat props → message:SamplingMessage|PromptMessage
- ProgressDisplay: flat props → params:ProgressNotification["params"]

Composite-input elements:
- ContentViewer: type+content+mimeType → block:ContentBlock (SDK discriminated union)
- InlineError: message+details → error:{message,data?}
- ConnectionToggle: checked+loading+onChange → status:ConnectionStatus+onConnect/onDisconnect

Also updates all group/screen/view consumers to keep the build green,
and renames CSS variable --inspector-status-failed → --inspector-status-error.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 clients/web/src/App.css                       |   2 +-
 .../AnnotationBadge.stories.tsx               |  49 ++++--
 .../AnnotationBadge/AnnotationBadge.tsx       |  58 ++++---
 .../CapabilityItem/CapabilityItem.stories.tsx |   6 +-
 .../CapabilityItem/CapabilityItem.tsx         |  24 ++-
 .../ConnectionToggle.stories.tsx              |  26 ++--
 .../ConnectionToggle/ConnectionToggle.tsx     |  32 ++--
 .../ContentViewer/ContentViewer.stories.tsx   |  81 +++++-----
 .../elements/ContentViewer/ContentViewer.tsx  | 116 +++++++++-----
 .../InlineError/InlineError.stories.tsx       |  20 +--
 .../elements/InlineError/InlineError.tsx      |  15 +-
 .../elements/LogEntry/LogEntry.stories.tsx    |  85 +++++-----
 .../components/elements/LogEntry/LogEntry.tsx |  51 +++---
 .../elements/LogLevelBadge/LogLevelBadge.tsx  |   8 +-
 .../MessageBubble/MessageBubble.stories.tsx   |  41 +++--
 .../elements/MessageBubble/MessageBubble.tsx  |  73 ++++++---
 .../ProgressDisplay.stories.tsx               |  36 ++++-
 .../ProgressDisplay/ProgressDisplay.tsx       |  29 ++--
 .../ServerStatusIndicator.stories.tsx         |   8 +-
 .../ServerStatusIndicator.tsx                 |  13 +-
 .../TaskStatusBadge.stories.tsx               |   4 +-
 .../TaskStatusBadge/TaskStatusBadge.tsx       |  18 ++-
 .../TransportBadge/TransportBadge.stories.tsx |  10 +-
 .../TransportBadge/TransportBadge.tsx         |  11 +-
 .../groups/HistoryEntry/HistoryEntry.tsx      |  12 +-
 .../LogStreamPanel/LogStreamPanel.stories.tsx |  37 +++--
 .../groups/LogStreamPanel/LogStreamPanel.tsx  |  18 ++-
 .../PromptMessagesDisplay.stories.tsx         |  59 +++++--
 .../PromptMessagesDisplay.tsx                 |  22 +--
 .../ResourcePreviewPanel.tsx                  |  34 ++--
 .../ResourceTemplatePanel.tsx                 |  18 +--
 .../SamplingRequestPanel.stories.tsx          |  49 +++++-
 .../SamplingRequestPanel.tsx                  |  15 +-
 .../groups/ServerCard/ServerCard.stories.tsx  |   4 +-
 .../groups/ServerCard/ServerCard.tsx          |  20 +--
 .../ServerInfoContent.stories.tsx             |  55 ++++---
 .../ServerInfoContent/ServerInfoContent.tsx   |  23 ++-
 .../groups/TaskCard/TaskCard.stories.tsx      |  10 +-
 .../components/groups/TaskCard/TaskCard.tsx   |  20 ++-
 .../TaskControls/TaskControls.stories.tsx     |   2 +-
 .../groups/TaskControls/TaskControls.tsx      |   4 +-
 .../TaskListPanel/TaskListPanel.stories.tsx   |   4 +-
 .../groups/TaskListPanel/TaskListPanel.tsx    |   2 +-
 .../ToolDetailPanel/ToolDetailPanel.tsx       |  20 ++-
 .../ToolResultPanel/ToolResultPanel.tsx       |  48 +++---
 .../groups/ViewHeader/ViewHeader.tsx          |   2 +-
 .../LoggingScreen/LoggingScreen.stories.tsx   | 145 ++++++++++--------
 .../screens/LoggingScreen/LoggingScreen.tsx   |   4 +-
 .../PromptsScreen/PromptsScreen.stories.tsx   |  11 +-
 .../ServerListScreen.stories.tsx              |   6 +-
 .../TasksScreen/TasksScreen.stories.tsx       |   8 +-
 .../ConnectedView/ConnectedView.stories.tsx   |  79 +++++-----
 .../views/ConnectedView/ConnectedView.tsx     |   2 +-
 .../UnconnectedView.stories.tsx               |   8 +-
 54 files changed, 907 insertions(+), 650 deletions(-)

diff --git a/clients/web/src/App.css b/clients/web/src/App.css
index 673797e9..48acfc34 100644
--- a/clients/web/src/App.css
+++ b/clients/web/src/App.css
@@ -34,7 +34,7 @@
   --inspector-status-connected: var(--mantine-color-green-6);
   --inspector-status-connecting: var(--mantine-color-yellow-6);
   --inspector-status-disconnected: var(--mantine-color-gray-5);
-  --inspector-status-failed: var(--mantine-color-red-6);
+  --inspector-status-error: var(--mantine-color-red-6);
 
   /* ── Log levels (RFC 5424) ─────────────────────────────── */
   --inspector-log-debug: var(--mantine-color-gray-6);
diff --git a/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.stories.tsx b/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.stories.tsx
index 469abc1b..4186bc2b 100644
--- a/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.stories.tsx
+++ b/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.stories.tsx
@@ -11,42 +11,63 @@ type Story = StoryObj<typeof AnnotationBadge>;
 
 export const Audience: Story = {
   args: {
-    label: "user",
-    variant: "audience",
+    facet: "audience",
+    value: ["user"],
+  },
+};
+
+export const AudienceMultiple: Story = {
+  args: {
+    facet: "audience",
+    value: ["user", "assistant"],
   },
 };
 
 export const ReadOnly: Story = {
   args: {
-    label: "read-only",
-    variant: "readOnly",
+    facet: "readOnlyHint",
+    value: true,
   },
 };
 
 export const Destructive: Story = {
   args: {
-    label: "destructive",
-    variant: "destructive",
+    facet: "destructiveHint",
+    value: true,
   },
 };
 
-export const LongRun: Story = {
+export const Idempotent: Story = {
   args: {
-    label: "long-run",
-    variant: "longRun",
+    facet: "idempotentHint",
+    value: true,
+  },
+};
+
+export const OpenWorld: Story = {
+  args: {
+    facet: "openWorldHint",
+    value: true,
+  },
+};
+
+export const LongRunning: Story = {
+  args: {
+    facet: "longRunHint",
+    value: true,
   },
 };
 
 export const PriorityHigh: Story = {
   args: {
-    label: "priority: high",
-    variant: "priority",
+    facet: "priority",
+    value: 0.9,
   },
 };
 
-export const Default: Story = {
+export const PriorityLow: Story = {
   args: {
-    label: "custom",
-    variant: "default",
+    facet: "priority",
+    value: 0.2,
   },
 };
diff --git a/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx b/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx
index 14b8ee29..babee2f4 100644
--- a/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx
+++ b/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx
@@ -1,37 +1,59 @@
 import { Badge, useComputedColorScheme } from "@mantine/core";
+import type { Role } from "@modelcontextprotocol/sdk/types.js";
 
-export type AnnotationVariant =
+export type AnnotationFacet =
   | "audience"
-  | "readOnly"
-  | "destructive"
-  | "longRun"
   | "priority"
-  | "default";
+  | "readOnlyHint"
+  | "destructiveHint"
+  | "idempotentHint"
+  | "openWorldHint"
+  | "longRunHint";
 
 export interface AnnotationBadgeProps {
-  label: string;
-  variant?: AnnotationVariant;
+  facet: AnnotationFacet;
+  value: Role[] | number | boolean;
 }
 
-const colorMap: Record<AnnotationVariant, string> = {
+const colorMap: Record<AnnotationFacet, string> = {
   audience: "blue",
-  readOnly: "green",
-  destructive: "red",
-  longRun: "yellow",
   priority: "orange",
-  default: "gray",
+  readOnlyHint: "green",
+  destructiveHint: "red",
+  idempotentHint: "teal",
+  openWorldHint: "grape",
+  longRunHint: "yellow",
 };
 
-export function AnnotationBadge({
-  label,
-  variant = "default",
-}: AnnotationBadgeProps) {
+function formatLabel(
+  facet: AnnotationFacet,
+  value: Role[] | number | boolean,
+): string {
+  switch (facet) {
+    case "audience":
+      return `audience: ${(value as Role[]).join(", ")}`;
+    case "priority":
+      return `priority: ${value}`;
+    case "readOnlyHint":
+      return "read-only";
+    case "destructiveHint":
+      return "destructive";
+    case "idempotentHint":
+      return "idempotent";
+    case "openWorldHint":
+      return "open-world";
+    case "longRunHint":
+      return "long-running";
+  }
+}
+
+export function AnnotationBadge({ facet, value }: AnnotationBadgeProps) {
   const colorScheme = useComputedColorScheme();
-  const color = colorMap[variant];
+  const color = colorMap[facet];
   const textColor = colorScheme === "dark" ? "black" : "white";
   return (
     <Badge color={color} variant="filled" fw={500} c={textColor}>
-      {label}
+      {formatLabel(facet, value)}
     </Badge>
   );
 }
diff --git a/clients/web/src/components/elements/CapabilityItem/CapabilityItem.stories.tsx b/clients/web/src/components/elements/CapabilityItem/CapabilityItem.stories.tsx
index 19d26ae6..1c7fb425 100644
--- a/clients/web/src/components/elements/CapabilityItem/CapabilityItem.stories.tsx
+++ b/clients/web/src/components/elements/CapabilityItem/CapabilityItem.stories.tsx
@@ -11,14 +11,14 @@ type Story = StoryObj<typeof CapabilityItem>;
 
 export const Supported: Story = {
   args: {
-    name: "Tools",
+    capability: "tools",
     supported: true,
   },
 };
 
 export const SupportedWithCount: Story = {
   args: {
-    name: "Tools",
+    capability: "tools",
     supported: true,
     count: 4,
   },
@@ -26,7 +26,7 @@ export const SupportedWithCount: Story = {
 
 export const NotSupported: Story = {
   args: {
-    name: "Completions",
+    capability: "completions",
     supported: false,
   },
 };
diff --git a/clients/web/src/components/elements/CapabilityItem/CapabilityItem.tsx b/clients/web/src/components/elements/CapabilityItem/CapabilityItem.tsx
index 2a2130ef..e4a1ba63 100644
--- a/clients/web/src/components/elements/CapabilityItem/CapabilityItem.tsx
+++ b/clients/web/src/components/elements/CapabilityItem/CapabilityItem.tsx
@@ -1,16 +1,36 @@
 import { Group, Text } from "@mantine/core";
+import type {
+  ClientCapabilities,
+  ServerCapabilities,
+} from "@modelcontextprotocol/sdk/types.js";
+
+export type CapabilityKey = keyof ServerCapabilities | keyof ClientCapabilities;
 
 export interface CapabilityItemProps {
-  name: string;
+  capability: CapabilityKey;
   supported: boolean;
   count?: number;
 }
 
+const displayLabel: Record<string, string> = {
+  tools: "Tools",
+  resources: "Resources",
+  prompts: "Prompts",
+  logging: "Logging",
+  completions: "Completions",
+  tasks: "Tasks",
+  experimental: "Experimental",
+  roots: "Roots",
+  sampling: "Sampling",
+  elicitation: "Elicitation",
+};
+
 export function CapabilityItem({
-  name,
+  capability,
   supported,
   count,
 }: CapabilityItemProps) {
+  const name = displayLabel[capability] ?? String(capability);
   const label = count != null ? `${name} (${count})` : name;
 
   return (
diff --git a/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx b/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx
index eda50990..faa765db 100644
--- a/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx
+++ b/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.stories.tsx
@@ -6,7 +6,8 @@ const meta: Meta<typeof ConnectionToggle> = {
   title: "Elements/ConnectionToggle",
   component: ConnectionToggle,
   args: {
-    onChange: fn(),
+    onConnect: fn(),
+    onDisconnect: fn(),
   },
 };
 
@@ -15,32 +16,31 @@ type Story = StoryObj<typeof ConnectionToggle>;
 
 export const Connected: Story = {
   args: {
-    checked: true,
-    loading: false,
-    disabled: false,
+    status: "connected",
   },
 };
 
 export const Disconnected: Story = {
   args: {
-    checked: false,
-    loading: false,
-    disabled: false,
+    status: "disconnected",
   },
 };
 
-export const Loading: Story = {
+export const Connecting: Story = {
   args: {
-    checked: false,
-    loading: true,
-    disabled: false,
+    status: "connecting",
   },
 };
 
 export const Disabled: Story = {
   args: {
-    checked: false,
-    loading: false,
+    status: "disconnected",
     disabled: true,
   },
 };
+
+export const Error: Story = {
+  args: {
+    status: "error",
+  },
+};
diff --git a/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx b/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx
index 486dca61..5dcb6265 100644
--- a/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx
+++ b/clients/web/src/components/elements/ConnectionToggle/ConnectionToggle.tsx
@@ -1,24 +1,34 @@
 import { Switch } from "@mantine/core";
+import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 
 export interface ConnectionToggleProps {
-  checked: boolean;
-  loading: boolean;
-  disabled: boolean;
-  onChange: (checked: boolean) => void;
+  status: ConnectionStatus;
+  disabled?: boolean;
+  onConnect: () => void;
+  onDisconnect: () => void;
 }
 
 export function ConnectionToggle({
-  checked,
-  loading,
-  disabled,
-  onChange,
+  status,
+  disabled = false,
+  onConnect,
+  onDisconnect,
 }: ConnectionToggleProps) {
+  const isConnected = status === "connected";
+  const isConnecting = status === "connecting";
+
   return (
     <Switch
       size="lg"
-      checked={checked || loading}
-      disabled={disabled || loading}
-      onChange={(event) => onChange(event.currentTarget.checked)}
+      checked={isConnected || isConnecting}
+      disabled={disabled || isConnecting}
+      onChange={(event) => {
+        if (event.currentTarget.checked) {
+          onConnect();
+        } else {
+          onDisconnect();
+        }
+      }}
     />
   );
 }
diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.stories.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.stories.tsx
index a9dea061..4427bdd3 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.stories.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.stories.tsx
@@ -11,77 +11,66 @@ type Story = StoryObj<typeof ContentViewer>;
 
 export const PlainText: Story = {
   args: {
-    type: "text",
-    content: "Hello, world!\nThis is plain text.",
+    block: { type: "text", text: "Hello, world!\nThis is plain text." },
   },
 };
 
 export const JsonContent: Story = {
   args: {
-    type: "json",
-    content:
-      '{"name":"my-app","version":"1.0.0","description":"Sample configuration file"}',
+    block: {
+      type: "text",
+      text: '{"name":"my-app","version":"1.0.0","description":"Sample configuration file"}',
+    },
   },
 };
 
 export const ImagePreview: Story = {
   args: {
-    type: "image",
-    content:
-      "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABWUlEQVR4nO3YsQnAMAwAQe+/dLKCRZpD+UA6cVh8p/Oc81z9t1/eJ+/oD/ybVxDMKwjmFQTzCoJ5BcG8gmBeQTCvIJg3mLQX2eIVBPMKgnkFwbyCYF5BMK8gmFcQzCsI5hUE8zqdYF5BMK8gmFcQzCsI5hUE8wqCeQXBvIJgXkEwbzBpL7LFKwjmFQTzCoJ5BcG8gmBeQTCvIJhXEMwrCOZ1OsG8gmBeQTCvIJhXEMwrCOYVBPMKgnkFwbyCYN5g0l5ki1cQzCsI5hUE8wqCeQXBvIJgXkEwryCYVxDM63SCeQXBvIJgXkEwryCYVxDMKwjmFQTzCoJ5BcG8waS9yBavIJhXEMwrCOYVBPMKgnkFwbyCYF5BMK8gmNfpBPMKgnkFwbyCYF5BMK8gmFcQzCsI5hUE8wqCeYNJe5EtXkEwryCYVxDMKwjmFQTzCoJ5BcG8gmBeQTDvBaFNwZ0T5gfxAAAAAElFTkSuQmCC",
-    mimeType: "image/png",
+    block: {
+      type: "image",
+      data: "iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABWUlEQVR4nO3YsQnAMAwAQe+/dLKCRZpD+UA6cVh8p/Oc81z9t1/eJ+/oD/ybVxDMKwjmFQTzCoJ5BcG8gmBeQTCvIJg3mLQX2eIVBPMKgnkFwbyCYF5BMK8gmFcQzCsI5hUE8zqdYF5BMK8gmFcQzCsI5hUE8wqCeQXBvIJgXkEwbzBpL7LFKwjmFQTzCoJ5BcG8gmBeQTCvIJhXEMwrCOZ1OsG8gmBeQTCvIJhXEMwrCOYVBPMKgnkFwbyCYN5g0l5ki1cQzCsI5hUE8wqCeQXBvIJgXkEwryCYVxDM63SCeQXBvIJgXkEwryCYVxDMKwjmFQTzCoJ5BcG8waS9yBavIJhXEMwrCOYVBPMKgnkFwbyCYF5BMK8gmNfpBPMKgnkFwbyCYF5BMK8gmFcQzCsI5hUE8wqCeYNJe5EtXkEwryCYVxDMKwjmFQTzCoJ5BcG8gmBeQTDvBaFNwZ0T5gfxAAAAAElFTkSuQmCC",
+      mimeType: "image/png",
+    },
   },
 };
 
-export const LongContent: Story = {
+export const LongJson: Story = {
   args: {
-    type: "json",
-    content: JSON.stringify({
-      name: "my-app",
-      version: "2.5.0",
-      description: "A comprehensive application configuration",
-      author: "Inspector Team",
-      license: "MIT",
-      repository: "https://github.com/example/my-app",
-      dependencies: {
-        react: "^18.0.0",
-        typescript: "^5.0.0",
-        mantine: "^7.0.0",
-      },
-      devDependencies: {
-        vitest: "^1.0.0",
-        storybook: "^8.0.0",
-        eslint: "^9.0.0",
-      },
-      scripts: {
-        dev: "vite",
-        build: "tsc && vite build",
-        test: "vitest",
-        lint: "eslint .",
-      },
-      settings: {
-        theme: "dark",
-        language: "en",
-        notifications: true,
-        maxRetries: 3,
-      },
-    }),
+    block: {
+      type: "text",
+      text: JSON.stringify({
+        name: "my-app",
+        version: "2.5.0",
+        description: "A comprehensive application configuration",
+        dependencies: {
+          react: "^18.0.0",
+          typescript: "^5.0.0",
+        },
+        scripts: {
+          dev: "vite",
+          build: "tsc && vite build",
+        },
+      }),
+    },
   },
 };
 
 export const WithCopyButton: Story = {
   args: {
-    type: "text",
-    content: "Hello, world!\nThis text can be copied.",
+    block: {
+      type: "text",
+      text: "Hello, world!\nThis text can be copied.",
+    },
     copyable: true,
   },
 };
 
 export const JsonWithCopy: Story = {
   args: {
-    type: "json",
-    content:
-      '{"name":"my-app","version":"1.0.0","description":"Sample configuration file"}',
+    block: {
+      type: "text",
+      text: '{"name":"my-app","version":"1.0.0","description":"Sample configuration file"}',
+    },
     copyable: true,
   },
 };
diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
index d9b6bb02..74d32716 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
@@ -1,10 +1,9 @@
-import { Code, Flex, Image, Stack } from "@mantine/core";
+import { Code, Flex, Image, Stack, Text } from "@mantine/core";
+import type { ContentBlock } from "@modelcontextprotocol/sdk/types.js";
 import { CopyButton } from "../CopyButton/CopyButton";
 
 export interface ContentViewerProps {
-  type: "text" | "json" | "image" | "audio";
-  content: string;
-  mimeType?: string;
+  block: ContentBlock;
   copyable?: boolean;
 }
 
@@ -16,12 +15,24 @@ function formatJson(content: string): string {
   }
 }
 
-function buildDataUri(mimeType: string, content: string): string {
-  return `data:${mimeType};base64,${content}`;
+function isJsonText(block: ContentBlock): boolean {
+  if (block.type !== "text") return false;
+  if (
+    "annotations" in block &&
+    block.annotations &&
+    "mimeType" in block.annotations
+  ) {
+    return (
+      (block.annotations as Record<string, unknown>).mimeType ===
+      "application/json"
+    );
+  }
+  const trimmed = block.text.trimStart();
+  return trimmed.startsWith("{") || trimmed.startsWith("[");
 }
 
-function formatContent(type: "text" | "json", content: string): string {
-  return type === "json" ? formatJson(content) : content;
+function buildDataUri(mimeType: string, data: string): string {
+  return `data:${mimeType};base64,${data}`;
 }
 
 const ContentWrapper = Flex.withProps({
@@ -41,36 +52,61 @@ const PreviewImage = Image.withProps({
   radius: "md",
 });
 
-export function ContentViewer({
-  type,
-  content,
-  mimeType,
-  copyable = false,
-}: ContentViewerProps) {
-  const showCopy = copyable && (type === "text" || type === "json");
-
-  return (
-    <Stack gap="xs">
-      {(type === "json" || type === "text") && (
-        <ContentWrapper>
-          <Code block p={36}>
-            {formatContent(type, content)}
-          </Code>
-          {showCopy && (
-            <CopyOverlay>
-              <CopyButton value={content} />
-            </CopyOverlay>
-          )}
-        </ContentWrapper>
-      )}
-      {type === "image" && (
-        <PreviewImage src={buildDataUri(mimeType || "image/png", content)} />
-      )}
-      {type === "audio" && (
-        <audio controls>
-          <source src={buildDataUri(mimeType || "audio/wav", content)} />
-        </audio>
-      )}
-    </Stack>
-  );
+export function ContentViewer({ block, copyable = false }: ContentViewerProps) {
+  switch (block.type) {
+    case "text": {
+      const isJson = isJsonText(block);
+      const displayText = isJson ? formatJson(block.text) : block.text;
+      return (
+        <Stack gap="xs">
+          <ContentWrapper>
+            <Code block p={36}>
+              {displayText}
+            </Code>
+            {copyable && (
+              <CopyOverlay>
+                <CopyButton value={block.text} />
+              </CopyOverlay>
+            )}
+          </ContentWrapper>
+        </Stack>
+      );
+    }
+    case "image":
+      return (
+        <Stack gap="xs">
+          <PreviewImage src={buildDataUri(block.mimeType, block.data)} />
+        </Stack>
+      );
+    case "audio":
+      return (
+        <Stack gap="xs">
+          <audio controls>
+            <source src={buildDataUri(block.mimeType, block.data)} />
+          </audio>
+        </Stack>
+      );
+    case "resource":
+      return (
+        <Stack gap="xs">
+          <ContentWrapper>
+            <Code block p={36}>
+              {"text" in block.resource
+                ? block.resource.text
+                : `[blob: ${block.resource.uri}]`}
+            </Code>
+          </ContentWrapper>
+        </Stack>
+      );
+    case "resource_link":
+      return (
+        <Stack gap="xs">
+          <Text size="sm" c="blue">
+            {block.name ?? block.uri}
+          </Text>
+        </Stack>
+      );
+    default:
+      return null;
+  }
 }
diff --git a/clients/web/src/components/elements/InlineError/InlineError.stories.tsx b/clients/web/src/components/elements/InlineError/InlineError.stories.tsx
index 60dbac4d..c3784109 100644
--- a/clients/web/src/components/elements/InlineError/InlineError.stories.tsx
+++ b/clients/web/src/components/elements/InlineError/InlineError.stories.tsx
@@ -11,13 +11,13 @@ type Story = StoryObj<typeof InlineError>;
 
 export const ShortError: Story = {
   args: {
-    message: "Connection timeout after 20s",
+    error: { message: "Connection timeout after 20s" },
   },
 };
 
 export const WithRetryCount: Story = {
   args: {
-    message: "Connection failed",
+    error: { message: "Connection failed" },
     retryCount: 3,
     maxRetries: 5,
   },
@@ -25,24 +25,26 @@ export const WithRetryCount: Story = {
 
 export const WithDetails: Story = {
   args: {
-    message: "Connection refused",
-    details:
-      "Error: ECONNREFUSED 127.0.0.1:3000\n  at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)",
+    error: {
+      message: "Connection refused",
+      data: "Error: ECONNREFUSED 127.0.0.1:3000\n  at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)",
+    },
   },
 };
 
 export const WithDocLink: Story = {
   args: {
-    message: "Connection failed",
+    error: { message: "Connection failed" },
     docLink: "https://example.com/troubleshooting",
   },
 };
 
 export const FullError: Story = {
   args: {
-    message: "Connection refused",
-    details:
-      "Error: ECONNREFUSED 127.0.0.1:3000\n  at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)",
+    error: {
+      message: "Connection refused",
+      data: "Error: ECONNREFUSED 127.0.0.1:3000\n  at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)",
+    },
     retryCount: 3,
     maxRetries: 5,
     docLink: "https://example.com/troubleshooting",
diff --git a/clients/web/src/components/elements/InlineError/InlineError.tsx b/clients/web/src/components/elements/InlineError/InlineError.tsx
index 5b232178..7d86deb3 100644
--- a/clients/web/src/components/elements/InlineError/InlineError.tsx
+++ b/clients/web/src/components/elements/InlineError/InlineError.tsx
@@ -2,8 +2,7 @@ import { Alert, Button, Collapse, Group, Stack, Text } from "@mantine/core";
 import { useState } from "react";
 
 export interface InlineErrorProps {
-  message: string;
-  details?: string;
+  error: { message: string; data?: unknown };
   retryCount?: number;
   maxRetries?: number;
   docLink?: string;
@@ -49,14 +48,20 @@ function formatRetryLabel(retryCount: number, maxRetries?: number): string {
     : `Retry attempt ${retryCount}`;
 }
 
+function formatDetails(data: unknown): string {
+  if (typeof data === "string") return data;
+  return JSON.stringify(data, null, 2);
+}
+
 export function InlineError({
-  message,
-  details,
+  error,
   retryCount,
   maxRetries,
   docLink,
 }: InlineErrorProps) {
   const [expanded, setExpanded] = useState(false);
+  const details =
+    error.data !== undefined ? formatDetails(error.data) : undefined;
   const hasExpandable = details !== undefined || docLink !== undefined;
 
   return (
@@ -64,7 +69,7 @@ export function InlineError({
       <Stack gap="xs">
         <HeaderRow>
           <MessageGroup>
-            <ErrorMessage>{message}</ErrorMessage>
+            <ErrorMessage>{error.message}</ErrorMessage>
             {retryCount !== undefined && (
               <RetryText>{formatRetryLabel(retryCount, maxRetries)}</RetryText>
             )}
diff --git a/clients/web/src/components/elements/LogEntry/LogEntry.stories.tsx b/clients/web/src/components/elements/LogEntry/LogEntry.stories.tsx
index eb2d3711..9dc8205d 100644
--- a/clients/web/src/components/elements/LogEntry/LogEntry.stories.tsx
+++ b/clients/web/src/components/elements/LogEntry/LogEntry.stories.tsx
@@ -11,73 +11,70 @@ type Story = StoryObj<typeof LogEntry>;
 
 export const Debug: Story = {
   args: {
-    timestamp: "2026-03-17T10:00:00Z",
-    level: "debug",
-    message: "Initializing connection pool",
+    entry: {
+      receivedAt: new Date("2026-03-29T20:18:20.000Z"),
+      params: { level: "debug", data: "Initializing connection pool" },
+    },
   },
 };
 
 export const Info: Story = {
   args: {
-    timestamp: "2026-03-17T10:00:01Z",
-    level: "info",
-    message: "Server started on port 3000",
-  },
-};
-
-export const Notice: Story = {
-  args: {
-    timestamp: "2026-03-17T10:00:02Z",
-    level: "notice",
-    message: "Configuration reloaded successfully",
+    entry: {
+      receivedAt: new Date("2026-03-29T20:18:21.000Z"),
+      params: { level: "info", data: "Server started on port 3000" },
+    },
   },
 };
 
 export const Warning: Story = {
   args: {
-    timestamp: "2026-03-17T10:00:03Z",
-    level: "warning",
-    message: "Memory usage above 80%",
+    entry: {
+      receivedAt: new Date("2026-03-29T20:18:22.000Z"),
+      params: {
+        level: "warning",
+        data: "Connection pool nearing capacity",
+        logger: "pool",
+      },
+    },
   },
 };
 
 export const Error: Story = {
   args: {
-    timestamp: "2026-03-17T10:00:04Z",
-    level: "error",
-    message: "Failed to connect to database",
-  },
-};
-
-export const Critical: Story = {
-  args: {
-    timestamp: "2026-03-17T10:00:05Z",
-    level: "critical",
-    message: "Disk space critically low",
-  },
-};
-
-export const Alert: Story = {
-  args: {
-    timestamp: "2026-03-17T10:00:06Z",
-    level: "alert",
-    message: "Service degradation detected",
+    entry: {
+      receivedAt: new Date("2026-03-29T20:18:23.000Z"),
+      params: {
+        level: "error",
+        data: "Failed to connect to database",
+        logger: "db",
+      },
+    },
   },
 };
 
 export const Emergency: Story = {
   args: {
-    timestamp: "2026-03-17T10:00:07Z",
-    level: "emergency",
-    message: "System is unusable",
+    entry: {
+      receivedAt: new Date("2026-03-29T20:18:24.000Z"),
+      params: {
+        level: "emergency",
+        data: "System is unusable",
+        logger: "kernel",
+      },
+    },
   },
 };
 
-export const WithLogger: Story = {
+export const WithJsonData: Story = {
   args: {
-    timestamp: "2026-03-17T10:00:08Z",
-    level: "info",
-    message: "Tool execution completed",
-    logger: "mcp-server",
+    entry: {
+      receivedAt: new Date("2026-03-29T20:18:25.000Z"),
+      params: {
+        level: "info",
+        data: { key: "value", count: 42 },
+        logger: "api",
+      },
+    },
   },
 };
diff --git a/clients/web/src/components/elements/LogEntry/LogEntry.tsx b/clients/web/src/components/elements/LogEntry/LogEntry.tsx
index 73d66915..9f2c1e8e 100644
--- a/clients/web/src/components/elements/LogEntry/LogEntry.tsx
+++ b/clients/web/src/components/elements/LogEntry/LogEntry.tsx
@@ -1,24 +1,20 @@
 import { Group, Text } from "@mantine/core";
+import type {
+  LoggingLevel,
+  LoggingMessageNotification,
+} from "@modelcontextprotocol/sdk/types.js";
 import { LogLevelBadge } from "../LogLevelBadge/LogLevelBadge";
 
-export type LogLevel =
-  | "debug"
-  | "info"
-  | "notice"
-  | "warning"
-  | "error"
-  | "critical"
-  | "alert"
-  | "emergency";
-
-export interface LogEntryProps {
-  timestamp: string;
-  level: LogLevel;
-  message: string;
-  logger?: string;
+export interface LogEntryData {
+  receivedAt: Date;
+  params: LoggingMessageNotification["params"];
 }
 
-const levelMessageColor: Record<LogLevel, string | undefined> = {
+export interface LogEntryProps {
+  entry: LogEntryData;
+}
+
+const levelMessageColor: Record<LoggingLevel, string | undefined> = {
   debug: "dimmed",
   info: "blue",
   notice: undefined,
@@ -29,10 +25,20 @@ const levelMessageColor: Record<LogLevel, string | undefined> = {
   emergency: "red",
 };
 
+function formatTimestamp(date: Date): string {
+  return date.toLocaleTimeString();
+}
+
 function formatLogger(logger: string): string {
   return `[${logger}]`;
 }
 
+function formatData(data: unknown): string {
+  if (data === undefined || data === null) return "";
+  if (typeof data === "string") return data;
+  return JSON.stringify(data);
+}
+
 const TimestampText = Text.withProps({
   size: "sm",
   ff: "monospace",
@@ -45,13 +51,16 @@ const LoggerText = Text.withProps({
   c: "dimmed",
 });
 
-export function LogEntry({ timestamp, level, message, logger }: LogEntryProps) {
+export function LogEntry({ entry }: LogEntryProps) {
+  const { receivedAt, params } = entry;
+  const message = formatData(params.data);
+
   return (
     <Group gap="sm" wrap="nowrap">
-      <TimestampText>{timestamp}</TimestampText>
-      <LogLevelBadge level={level} />
-      {logger && <LoggerText>{formatLogger(logger)}</LoggerText>}
-      <Text size="sm" ff="monospace" c={levelMessageColor[level]}>
+      <TimestampText>{formatTimestamp(receivedAt)}</TimestampText>
+      <LogLevelBadge level={params.level} />
+      {params.logger && <LoggerText>{formatLogger(params.logger)}</LoggerText>}
+      <Text size="sm" ff="monospace" c={levelMessageColor[params.level]}>
         {message}
       </Text>
     </Group>
diff --git a/clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.tsx b/clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.tsx
index 3839b7f2..12168ae0 100644
--- a/clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.tsx
+++ b/clients/web/src/components/elements/LogLevelBadge/LogLevelBadge.tsx
@@ -1,11 +1,11 @@
 import { Badge, useComputedColorScheme } from "@mantine/core";
-import type { LogLevel } from "../LogEntry/LogEntry";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 
 export interface LogLevelBadgeProps {
-  level: LogLevel;
+  level: LoggingLevel;
 }
 
-const levelColor: Record<LogLevel, string> = {
+const levelColor: Record<LoggingLevel, string> = {
   debug: "gray",
   info: "blue",
   notice: "teal",
@@ -16,7 +16,7 @@ const levelColor: Record<LogLevel, string> = {
   emergency: "red",
 };
 
-const boldLevels: Set<LogLevel> = new Set(["alert", "emergency"]);
+const boldLevels: Set<LoggingLevel> = new Set(["alert", "emergency"]);
 
 export function LogLevelBadge({ level }: LogLevelBadgeProps) {
   const colorScheme = useComputedColorScheme();
diff --git a/clients/web/src/components/elements/MessageBubble/MessageBubble.stories.tsx b/clients/web/src/components/elements/MessageBubble/MessageBubble.stories.tsx
index dd6b1608..44c75fde 100644
--- a/clients/web/src/components/elements/MessageBubble/MessageBubble.stories.tsx
+++ b/clients/web/src/components/elements/MessageBubble/MessageBubble.stories.tsx
@@ -12,28 +12,39 @@ type Story = StoryObj<typeof MessageBubble>;
 export const UserText: Story = {
   args: {
     index: 0,
-    role: "user",
-    content: "Hello, my name is John and I like cats",
+    message: {
+      role: "user",
+      content: { type: "text", text: "Hello, my name is John and I like cats" },
+    },
   },
 };
 
 export const AssistantText: Story = {
   args: {
     index: 1,
-    role: "assistant",
-    content:
-      "Nice to meet you, John! It's wonderful that you enjoy cats. They're such fascinating and independent creatures. Do you have any cats of your own?",
+    message: {
+      role: "assistant",
+      content: {
+        type: "text",
+        text: "Nice to meet you, John! It's wonderful that you enjoy cats. They're such fascinating and independent creatures. Do you have any cats of your own?",
+      },
+    },
   },
 };
 
 export const UserWithImage: Story = {
   args: {
     index: 0,
-    role: "user",
-    content: "Check this out",
-    imageContent: {
-      data: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
-      mimeType: "image/png",
+    message: {
+      role: "user",
+      content: [
+        { type: "text", text: "Check this out" },
+        {
+          type: "image",
+          data: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+          mimeType: "image/png",
+        },
+      ],
     },
   },
 };
@@ -41,8 +52,12 @@ export const UserWithImage: Story = {
 export const LongMessage: Story = {
   args: {
     index: 0,
-    role: "user",
-    content:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
+    message: {
+      role: "user",
+      content: {
+        type: "text",
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+      },
+    },
   },
 };
diff --git a/clients/web/src/components/elements/MessageBubble/MessageBubble.tsx b/clients/web/src/components/elements/MessageBubble/MessageBubble.tsx
index ee24a4f1..d1ba15ec 100644
--- a/clients/web/src/components/elements/MessageBubble/MessageBubble.tsx
+++ b/clients/web/src/components/elements/MessageBubble/MessageBubble.tsx
@@ -1,12 +1,13 @@
 import { Group, Image, Paper, Stack, Text } from "@mantine/core";
+import type {
+  PromptMessage,
+  SamplingMessage,
+} from "@modelcontextprotocol/sdk/types.js";
 import { CopyButton } from "../CopyButton/CopyButton";
 
 export interface MessageBubbleProps {
   index: number;
-  role: "user" | "assistant";
-  content: string;
-  imageContent?: { data: string; mimeType: string };
-  audioContent?: { data: string; mimeType: string };
+  message: SamplingMessage | PromptMessage;
 }
 
 function buildDataUri(mimeType: string, data: string): string {
@@ -21,6 +22,41 @@ function formatQuotedContent(content: string): string {
   return `"${content}"`;
 }
 
+interface ContentBlockRendered {
+  text: string;
+  imageUri?: string;
+  audioUri?: string;
+  audioMime?: string;
+}
+
+function extractContent(
+  message: SamplingMessage | PromptMessage,
+): ContentBlockRendered {
+  const content = message.content;
+  const blocks = Array.isArray(content) ? content : [content];
+  let text = "";
+  let imageUri: string | undefined;
+  let audioUri: string | undefined;
+  let audioMime: string | undefined;
+
+  for (const block of blocks) {
+    switch (block.type) {
+      case "text":
+        text += block.text;
+        break;
+      case "image":
+        imageUri = buildDataUri(block.mimeType, block.data);
+        break;
+      case "audio":
+        audioUri = buildDataUri(block.mimeType, block.data);
+        audioMime = block.mimeType;
+        break;
+    }
+  }
+
+  return { text, imageUri, audioUri, audioMime };
+}
+
 const BubbleContainer = Paper.withProps({
   p: "md",
   radius: "md",
@@ -38,32 +74,21 @@ const PreviewImage = Image.withProps({
   mt: "xs",
 });
 
-export function MessageBubble({
-  index,
-  role,
-  content,
-  imageContent,
-  audioContent,
-}: MessageBubbleProps) {
+export function MessageBubble({ index, message }: MessageBubbleProps) {
+  const { text, imageUri, audioUri, audioMime } = extractContent(message);
+
   return (
     <BubbleContainer>
       <Stack gap="xs">
         <Group justify="space-between">
-          <RoleLabel>{formatRoleLabel(index, role)}</RoleLabel>
-          <CopyButton value={content} />
+          <RoleLabel>{formatRoleLabel(index, message.role)}</RoleLabel>
+          {text && <CopyButton value={text} />}
         </Group>
-        <Text size="sm">{formatQuotedContent(content)}</Text>
-        {imageContent && (
-          <PreviewImage
-            src={buildDataUri(imageContent.mimeType, imageContent.data)}
-          />
-        )}
-        {audioContent && (
+        {text && <Text size="sm">{formatQuotedContent(text)}</Text>}
+        {imageUri && <PreviewImage src={imageUri} />}
+        {audioUri && (
           <audio controls>
-            <source
-              src={buildDataUri(audioContent.mimeType, audioContent.data)}
-              type={audioContent.mimeType}
-            />
+            <source src={audioUri} type={audioMime} />
           </audio>
         )}
       </Stack>
diff --git a/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.stories.tsx b/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.stories.tsx
index 0e8aa20f..23bab30c 100644
--- a/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.stories.tsx
+++ b/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.stories.tsx
@@ -11,29 +11,51 @@ type Story = StoryObj<typeof ProgressDisplay>;
 
 export const ZeroPercent: Story = {
   args: {
-    progress: 0,
+    params: { progressToken: "t1", progress: 0, total: 100 },
   },
 };
 
 export const HalfComplete: Story = {
   args: {
-    progress: 50,
-    description: "Processing...",
+    params: {
+      progressToken: "t2",
+      progress: 50,
+      total: 100,
+      message: "Processing...",
+    },
   },
 };
 
 export const NearComplete: Story = {
   args: {
-    progress: 95,
-    description: "Almost done",
+    params: {
+      progressToken: "t3",
+      progress: 95,
+      total: 100,
+      message: "Almost done",
+    },
     elapsed: "1m 30s",
   },
 };
 
 export const Complete: Story = {
   args: {
-    progress: 100,
-    description: "Done",
+    params: {
+      progressToken: "t4",
+      progress: 100,
+      total: 100,
+      message: "Done",
+    },
     elapsed: "2m 15s",
   },
 };
+
+export const WithoutTotal: Story = {
+  args: {
+    params: {
+      progressToken: "t5",
+      progress: 42,
+      message: "Working...",
+    },
+  },
+};
diff --git a/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.tsx b/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.tsx
index 2783fd8e..7968aa3b 100644
--- a/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.tsx
+++ b/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.tsx
@@ -1,13 +1,20 @@
 import { Group, Progress, Stack, Text } from "@mantine/core";
+import type { ProgressNotification } from "@modelcontextprotocol/sdk/types.js";
 
 export interface ProgressDisplayProps {
-  progress: number;
-  description?: string;
+  params: ProgressNotification["params"];
   elapsed?: string;
 }
 
-function formatPercent(progress: number): string {
-  return `${progress}%`;
+function computePercent(progress: number, total?: number): number {
+  if (total != null && total > 0) {
+    return Math.round((progress / total) * 100);
+  }
+  return progress;
+}
+
+function formatPercent(percent: number): string {
+  return `${percent}%`;
 }
 
 const ProgressLabel = Text.withProps({
@@ -20,18 +27,16 @@ const ElapsedText = Text.withProps({
   c: "dimmed",
 });
 
-export function ProgressDisplay({
-  progress,
-  description,
-  elapsed,
-}: ProgressDisplayProps) {
+export function ProgressDisplay({ params, elapsed }: ProgressDisplayProps) {
+  const percent = computePercent(params.progress, params.total);
+
   return (
     <Stack gap="xs">
       <Group justify="space-between">
-        {description && <ProgressLabel>{description}</ProgressLabel>}
-        <ProgressLabel>{formatPercent(progress)}</ProgressLabel>
+        {params.message && <ProgressLabel>{params.message}</ProgressLabel>}
+        <ProgressLabel>{formatPercent(percent)}</ProgressLabel>
       </Group>
-      <Progress value={progress} size="sm" />
+      <Progress value={percent} size="sm" />
       {elapsed && <ElapsedText>{elapsed}</ElapsedText>}
     </Stack>
   );
diff --git a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.stories.tsx b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.stories.tsx
index 87385cf1..2a4ef092 100644
--- a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.stories.tsx
+++ b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.stories.tsx
@@ -28,15 +28,15 @@ export const Disconnected: Story = {
   },
 };
 
-export const Failed: Story = {
+export const Error: Story = {
   args: {
-    status: "failed",
+    status: "error",
   },
 };
 
-export const FailedWithRetries: Story = {
+export const ErrorWithRetries: Story = {
   args: {
-    status: "failed",
+    status: "error",
     retryCount: 3,
   },
 };
diff --git a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
index b9ace767..58f65cfc 100644
--- a/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
+++ b/clients/web/src/components/elements/ServerStatusIndicator/ServerStatusIndicator.tsx
@@ -1,20 +1,21 @@
 import { Group, Paper, Text } from "@mantine/core";
+import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 
 export interface ServerStatusIndicatorProps {
-  status: "connected" | "connecting" | "disconnected" | "failed";
+  status: ConnectionStatus;
   latencyMs?: number;
   retryCount?: number;
 }
 
-const statusColorVar: Record<ServerStatusIndicatorProps["status"], string> = {
+const statusColorVar: Record<ConnectionStatus, string> = {
   connected: "var(--inspector-status-connected)",
   connecting: "var(--inspector-status-connecting)",
   disconnected: "var(--inspector-status-disconnected)",
-  failed: "var(--inspector-status-failed)",
+  error: "var(--inspector-status-error)",
 };
 
 function getLabel(
-  status: ServerStatusIndicatorProps["status"],
+  status: ConnectionStatus,
   latencyMs?: number,
   retryCount?: number,
 ): string {
@@ -25,8 +26,8 @@ function getLabel(
       return "Connecting...";
     case "disconnected":
       return "Disconnected";
-    case "failed":
-      return retryCount != null ? `Failed (${retryCount})` : "Failed";
+    case "error":
+      return retryCount != null ? `Error (${retryCount})` : "Error";
   }
 }
 
diff --git a/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.stories.tsx b/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.stories.tsx
index 2cdd88ef..b5c18a23 100644
--- a/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.stories.tsx
+++ b/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.stories.tsx
@@ -9,8 +9,8 @@ const meta: Meta<typeof TaskStatusBadge> = {
 export default meta;
 type Story = StoryObj<typeof TaskStatusBadge>;
 
-export const Waiting: Story = { args: { status: "waiting" } };
-export const Running: Story = { args: { status: "running" } };
+export const Working: Story = { args: { status: "working" } };
+export const InputRequired: Story = { args: { status: "input_required" } };
 export const Completed: Story = { args: { status: "completed" } };
 export const Failed: Story = { args: { status: "failed" } };
 export const Cancelled: Story = { args: { status: "cancelled" } };
diff --git a/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.tsx b/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.tsx
index 49c4d786..549b1ff3 100644
--- a/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.tsx
+++ b/clients/web/src/components/elements/TaskStatusBadge/TaskStatusBadge.tsx
@@ -1,16 +1,24 @@
 import { Badge, useComputedColorScheme } from "@mantine/core";
-import type { TaskStatus } from "../../groups/TaskCard/TaskCard";
+import type { TaskStatus } from "@modelcontextprotocol/sdk/types.js";
 
 export interface TaskStatusBadgeProps {
   status: TaskStatus;
 }
 
 const statusColor: Record<TaskStatus, string> = {
-  waiting: "gray",
-  running: "blue",
+  working: "blue",
+  input_required: "yellow",
   completed: "green",
   failed: "red",
-  cancelled: "yellow",
+  cancelled: "gray",
+};
+
+const statusLabel: Record<TaskStatus, string> = {
+  working: "working",
+  input_required: "input required",
+  completed: "completed",
+  failed: "failed",
+  cancelled: "cancelled",
 };
 
 export function TaskStatusBadge({ status }: TaskStatusBadgeProps) {
@@ -19,7 +27,7 @@ export function TaskStatusBadge({ status }: TaskStatusBadgeProps) {
 
   return (
     <Badge color={statusColor[status]} variant="filled" c={textColor}>
-      {status}
+      {statusLabel[status]}
     </Badge>
   );
 }
diff --git a/clients/web/src/components/elements/TransportBadge/TransportBadge.stories.tsx b/clients/web/src/components/elements/TransportBadge/TransportBadge.stories.tsx
index 290c51b0..6e710864 100644
--- a/clients/web/src/components/elements/TransportBadge/TransportBadge.stories.tsx
+++ b/clients/web/src/components/elements/TransportBadge/TransportBadge.stories.tsx
@@ -15,8 +15,14 @@ export const Stdio: Story = {
   },
 };
 
-export const Http: Story = {
+export const Sse: Story = {
   args: {
-    transport: "http",
+    transport: "sse",
+  },
+};
+
+export const StreamableHttp: Story = {
+  args: {
+    transport: "streamable-http",
   },
 };
diff --git a/clients/web/src/components/elements/TransportBadge/TransportBadge.tsx b/clients/web/src/components/elements/TransportBadge/TransportBadge.tsx
index d581f002..129d88e1 100644
--- a/clients/web/src/components/elements/TransportBadge/TransportBadge.tsx
+++ b/clients/web/src/components/elements/TransportBadge/TransportBadge.tsx
@@ -1,13 +1,20 @@
 import { Badge } from "@mantine/core";
+import type { ServerType } from "@inspector/core/mcp/types.js";
 
 export interface TransportBadgeProps {
-  transport: "stdio" | "http";
+  transport: ServerType;
 }
 
+const transportLabel: Record<ServerType, string> = {
+  stdio: "STDIO",
+  sse: "SSE",
+  "streamable-http": "HTTP",
+};
+
 export function TransportBadge({ transport }: TransportBadgeProps) {
   return (
     <Badge variant="outline" color="gray">
-      {transport.toUpperCase()}
+      {transportLabel[transport]}
     </Badge>
   );
 }
diff --git a/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx b/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx
index 4d38d82b..76246ebf 100644
--- a/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx
+++ b/clients/web/src/components/groups/HistoryEntry/HistoryEntry.tsx
@@ -145,8 +145,10 @@ export function HistoryEntry({
                   <Stack gap="xs">
                     <Text size="sm">Parameters:</Text>
                     <ContentViewer
-                      type="json"
-                      content={serializeJson(parameters)}
+                      block={{
+                        type: "text",
+                        text: serializeJson(parameters),
+                      }}
                       copyable
                     />
                   </Stack>
@@ -156,8 +158,10 @@ export function HistoryEntry({
                 <Stack gap="xs">
                   <Text size="sm">Response:</Text>
                   <ContentViewer
-                    type="json"
-                    content={serializeJson(response)}
+                    block={{
+                      type: "text",
+                      text: serializeJson(response),
+                    }}
                     copyable
                   />
                 </Stack>
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
index 602d79ee..c10f150e 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { fn } from "storybook/test";
 import { LogStreamPanel } from "./LogStreamPanel";
-import type { LogEntryProps, LogLevel } from "../../elements/LogEntry/LogEntry";
+import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
 const meta: Meta<typeof LogStreamPanel> = {
   title: "Groups/LogStreamPanel",
@@ -35,40 +36,38 @@ export const Empty: Story = {
   },
 };
 
-const logMessages: { level: LogLevel; message: string; logger?: string }[] = [
-  { level: "info", message: "Server started on port 3000" },
-  { level: "debug", message: "Loading configuration", logger: "config" },
+const logMessages: {
+  level: LoggingLevel;
+  data: string;
+  logger?: string;
+}[] = [
+  { level: "info", data: "Server started on port 3000" },
+  { level: "debug", data: "Loading configuration", logger: "config" },
   {
     level: "warning",
-    message: "Deprecated API endpoint called",
+    data: "Deprecated API endpoint called",
     logger: "http",
   },
-  { level: "error", message: "Failed to read resource", logger: "resources" },
+  { level: "error", data: "Failed to read resource", logger: "resources" },
   {
     level: "info",
-    message: "Tool execution completed (245ms)",
+    data: "Tool execution completed (245ms)",
     logger: "tools",
   },
   {
     level: "critical",
-    message: "Database connection pool exhausted",
+    data: "Database connection pool exhausted",
     logger: "db",
   },
-  { level: "alert", message: "Memory usage exceeds 95%", logger: "system" },
-  { level: "emergency", message: "System unresponsive", logger: "system" },
+  { level: "alert", data: "Memory usage exceeds 95%", logger: "system" },
+  { level: "emergency", data: "System unresponsive", logger: "system" },
 ];
 
-function pad(n: number): string {
-  return n.toString().padStart(2, "0");
-}
-
-const entries: LogEntryProps[] = Array.from({ length: 30 }, (_, i) => {
+const entries: LogEntryData[] = 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,
+    receivedAt: new Date(`2026-03-17T10:00:${String(i + 1).padStart(2, "0")}Z`),
+    params: { level: src.level, data: src.data, logger: src.logger },
   };
 });
 
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
index 979355db..d74aba20 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
@@ -10,10 +10,10 @@ import {
   Title,
 } from "@mantine/core";
 import { LogEntry } from "../../elements/LogEntry/LogEntry";
-import type { LogEntryProps } from "../../elements/LogEntry/LogEntry";
+import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
 export interface LogStreamPanelProps {
-  entries: LogEntryProps[];
+  entries: LogEntryData[];
   filterText: string;
   visibleLevels: Record<string, boolean>;
   autoScroll: boolean;
@@ -41,16 +41,22 @@ const EmptyCenter = Stack.withProps({
   justify: "center",
 });
 
+function formatData(data: unknown): string {
+  if (data === undefined || data === null) return "";
+  if (typeof data === "string") return data;
+  return JSON.stringify(data);
+}
+
 function matchesFilters(
-  entry: LogEntryProps,
+  entry: LogEntryData,
   filterText: string,
   visibleLevels: Record<string, boolean>,
 ): boolean {
-  if (!visibleLevels[entry.level]) return false;
+  if (!visibleLevels[entry.params.level]) return false;
   if (filterText) {
     const term = filterText.toLowerCase();
     const searchable =
-      `${entry.message} ${entry.logger ?? ""} ${entry.level}`.toLowerCase();
+      `${formatData(entry.params.data)} ${entry.params.logger ?? ""} ${entry.params.level}`.toLowerCase();
     if (!searchable.includes(term)) return false;
   }
   return true;
@@ -90,7 +96,7 @@ export function LogStreamPanel({
         <ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)">
           <Stack gap="xs">
             {filteredEntries.map((entry, index) => (
-              <LogEntry key={index} {...entry} />
+              <LogEntry key={index} entry={entry} />
             ))}
           </Stack>
         </ScrollArea.Autosize>
diff --git a/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx b/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx
index 6aed022a..78579649 100644
--- a/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx
+++ b/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx
@@ -16,7 +16,10 @@ export const SingleMessage: Story = {
     messages: [
       {
         role: "user",
-        content: "What is the capital of France?",
+        content: {
+          type: "text",
+          text: "What is the capital of France?",
+        },
       },
     ],
   },
@@ -28,12 +31,17 @@ export const Conversation: Story = {
     messages: [
       {
         role: "user",
-        content: "What is the capital of France?",
+        content: {
+          type: "text",
+          text: "What is the capital of France?",
+        },
       },
       {
         role: "assistant",
-        content:
-          "The capital of France is Paris. It is the largest city in France and serves as the country's political, economic, and cultural center.",
+        content: {
+          type: "text",
+          text: "The capital of France is Paris. It is the largest city in France and serves as the country's political, economic, and cultural center.",
+        },
       },
     ],
   },
@@ -44,11 +52,17 @@ export const WithImage: Story = {
     messages: [
       {
         role: "user",
-        content: "Here is a photo for you to analyze.",
-        imageContent: {
-          data: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
-          mimeType: "image/png",
-        },
+        content: [
+          {
+            type: "text",
+            text: "Here is a photo for you to analyze.",
+          },
+          {
+            type: "image",
+            data: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+            mimeType: "image/png",
+          },
+        ],
       },
     ],
   },
@@ -60,25 +74,38 @@ export const LongConversation: Story = {
     messages: [
       {
         role: "user",
-        content: "Can you help me write a haiku about programming?",
+        content: {
+          type: "text",
+          text: "Can you help me write a haiku about programming?",
+        },
       },
       {
         role: "assistant",
-        content:
-          "Sure! Here is a haiku about programming:\n\nSilent keys tap fast\nLogic flows through glowing screens\nBugs hide in the code",
+        content: {
+          type: "text",
+          text: "Sure! Here is a haiku about programming:\n\nSilent keys tap fast\nLogic flows through glowing screens\nBugs hide in the code",
+        },
       },
       {
         role: "user",
-        content: "That is great! Can you write another one about debugging?",
+        content: {
+          type: "text",
+          text: "That is great! Can you write another one about debugging?",
+        },
       },
       {
         role: "assistant",
-        content:
-          "Here is a debugging haiku:\n\nStack trace lines scroll down\nOne missing semicolon\nHours lost to a typo",
+        content: {
+          type: "text",
+          text: "Here is a debugging haiku:\n\nStack trace lines scroll down\nOne missing semicolon\nHours lost to a typo",
+        },
       },
       {
         role: "user",
-        content: "I love it! One more about open source?",
+        content: {
+          type: "text",
+          text: "I love it! One more about open source?",
+        },
       },
     ],
   },
diff --git a/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx b/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx
index 692f9739..ecb3bbf2 100644
--- a/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx
+++ b/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx
@@ -1,20 +1,17 @@
 import { Button, Group, Stack, Text, Title } from "@mantine/core";
+import type {
+  PromptMessage,
+  SamplingMessage,
+} from "@modelcontextprotocol/sdk/types.js";
 import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
 
-export interface PromptMessage {
-  role: string;
-  content: string;
-  imageContent?: { data: string; mimeType: string };
-  audioContent?: { data: string; mimeType: string };
-}
-
 const CopyAllButton = Button.withProps({
   variant: "light",
   size: "sm",
 });
 
 export interface PromptMessagesDisplayProps {
-  messages: PromptMessage[];
+  messages: (PromptMessage | SamplingMessage)[];
   onCopyAll?: () => void;
 }
 
@@ -34,14 +31,7 @@ export function PromptMessagesDisplay({
         <Text c="dimmed">No messages to display</Text>
       ) : (
         messages.map((message, index) => (
-          <MessageBubble
-            key={index}
-            index={index}
-            role={message.role as "user" | "assistant"}
-            content={message.content}
-            imageContent={message.imageContent}
-            audioContent={message.audioContent}
-          />
+          <MessageBubble key={index} index={index} message={message} />
         ))
       )}
     </Stack>
diff --git a/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx b/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx
index 1ba0ef28..9e1cf873 100644
--- a/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx
+++ b/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx
@@ -16,16 +16,13 @@ export interface ResourcePreviewPanelProps {
   onUnsubscribe: () => void;
 }
 
-function priorityLabel(priority: number): string {
-  if (priority >= 0.7) return "priority: high";
-  if (priority >= 0.4) return "priority: medium";
-  return "priority: low";
-}
+import type { ContentBlock } from "@modelcontextprotocol/sdk/types.js";
 
-function resolveContentType(mimeType: string): "json" | "image" | "text" {
-  if (mimeType === "application/json") return "json";
-  if (mimeType.startsWith("image/")) return "image";
-  return "text";
+function toContentBlock(content: string, mimeType: string): ContentBlock {
+  if (mimeType.startsWith("image/")) {
+    return { type: "image", data: content, mimeType };
+  }
+  return { type: "text", text: content };
 }
 
 function formatLastUpdated(lastUpdated: string): string {
@@ -97,12 +94,7 @@ export function ResourcePreviewPanel({
           <CopyButton value={uri} />
         </UriGroup>
       </HeaderRow>
-      <ContentViewer
-        type={resolveContentType(mimeType)}
-        content={content}
-        mimeType={mimeType}
-        copyable
-      />
+      <ContentViewer block={toContentBlock(content, mimeType)} copyable />
       <MetaRow>
         {lastUpdated ? (
           <TimestampText>{formatLastUpdated(lastUpdated)}</TimestampText>
@@ -114,13 +106,15 @@ export function ResourcePreviewPanel({
       <FooterRow>
         <AnnotationGroup>
           {annotations?.audience && (
-            <AnnotationBadge label={annotations.audience} variant="audience" />
+            <AnnotationBadge
+              facet="audience"
+              value={
+                annotations.audience.split(", ") as ("user" | "assistant")[]
+              }
+            />
           )}
           {annotations?.priority !== undefined && (
-            <AnnotationBadge
-              label={priorityLabel(annotations.priority)}
-              variant="priority"
-            />
+            <AnnotationBadge facet="priority" value={annotations.priority} />
           )}
         </AnnotationGroup>
         <ActionGroup>
diff --git a/clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx b/clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx
index 31d50f42..febbc60b 100644
--- a/clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx
+++ b/clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx
@@ -40,12 +40,6 @@ function previewUri(
   );
 }
 
-function priorityLabel(priority: number): string {
-  if (priority >= 0.7) return "priority: high";
-  if (priority >= 0.4) return "priority: medium";
-  return "priority: low";
-}
-
 const HeaderRow = Group.withProps({
   justify: "space-between",
   wrap: "nowrap",
@@ -128,13 +122,15 @@ export function ResourceTemplatePanel({
       <FooterRow>
         <AnnotationGroup>
           {annotations?.audience && (
-            <AnnotationBadge label={annotations.audience} variant="audience" />
+            <AnnotationBadge
+              facet="audience"
+              value={
+                annotations.audience.split(", ") as ("user" | "assistant")[]
+              }
+            />
           )}
           {annotations?.priority !== undefined && (
-            <AnnotationBadge
-              label={priorityLabel(annotations.priority)}
-              variant="priority"
-            />
+            <AnnotationBadge facet="priority" value={annotations.priority} />
           )}
         </AnnotationGroup>
         <Button size="sm" disabled={!canSubmit} onClick={handleSubmit}>
diff --git a/clients/web/src/components/groups/SamplingRequestPanel/SamplingRequestPanel.stories.tsx b/clients/web/src/components/groups/SamplingRequestPanel/SamplingRequestPanel.stories.tsx
index d64d1b39..f9294dac 100644
--- a/clients/web/src/components/groups/SamplingRequestPanel/SamplingRequestPanel.stories.tsx
+++ b/clients/web/src/components/groups/SamplingRequestPanel/SamplingRequestPanel.stories.tsx
@@ -23,20 +23,38 @@ type Story = StoryObj<typeof SamplingRequestPanel>;
 
 export const SimpleRequest: Story = {
   args: {
-    messages: [{ role: "user", content: "What is the capital of France?" }],
+    messages: [
+      {
+        role: "user",
+        content: {
+          type: "text",
+          text: "What is the capital of France?",
+        },
+      },
+    ],
   },
 };
 
 export const WithModelHints: Story = {
   args: {
-    messages: [{ role: "user", content: "Summarize this document for me." }],
+    messages: [
+      {
+        role: "user",
+        content: { type: "text", text: "Summarize this document for me." },
+      },
+    ],
     modelHints: ["claude-3-sonnet", "gpt-4"],
   },
 };
 
 export const WithPriorities: Story = {
   args: {
-    messages: [{ role: "user", content: "Translate this text to Spanish." }],
+    messages: [
+      {
+        role: "user",
+        content: { type: "text", text: "Translate this text to Spanish." },
+      },
+    ],
     modelHints: ["claude-3-sonnet"],
     costPriority: 0.3,
     speedPriority: 0.5,
@@ -47,8 +65,14 @@ export const WithPriorities: Story = {
 export const WithAllParams: Story = {
   args: {
     messages: [
-      { role: "user", content: "Write a haiku about programming." },
-      { role: "assistant", content: "Here is a haiku:" },
+      {
+        role: "user",
+        content: { type: "text", text: "Write a haiku about programming." },
+      },
+      {
+        role: "assistant",
+        content: { type: "text", text: "Here is a haiku:" },
+      },
     ],
     maxTokens: 1024,
     stopSequences: ["\n\n", "END"],
@@ -60,7 +84,13 @@ export const WithAllParams: Story = {
 export const WithTools: Story = {
   args: {
     messages: [
-      { role: "user", content: "Look up the weather in San Francisco." },
+      {
+        role: "user",
+        content: {
+          type: "text",
+          text: "Look up the weather in San Francisco.",
+        },
+      },
     ],
     tools: [
       {
@@ -92,7 +122,12 @@ export const WithTools: Story = {
 
 export const PrefilledResponse: Story = {
   args: {
-    messages: [{ role: "user", content: "What is 2 + 2?" }],
+    messages: [
+      {
+        role: "user",
+        content: { type: "text", text: "What is 2 + 2?" },
+      },
+    ],
     responseText: "The answer is 4.",
     modelUsed: "claude-3-haiku",
     stopReason: "end_turn",
diff --git a/clients/web/src/components/groups/SamplingRequestPanel/SamplingRequestPanel.tsx b/clients/web/src/components/groups/SamplingRequestPanel/SamplingRequestPanel.tsx
index f74cc979..2b31db56 100644
--- a/clients/web/src/components/groups/SamplingRequestPanel/SamplingRequestPanel.tsx
+++ b/clients/web/src/components/groups/SamplingRequestPanel/SamplingRequestPanel.tsx
@@ -11,14 +11,9 @@ import {
   Textarea,
   Title,
 } from "@mantine/core";
+import type { SamplingMessage } from "@modelcontextprotocol/sdk/types.js";
 import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
 
-export interface SamplingMessage {
-  role: string;
-  content: string;
-  imageContent?: { data: string; mimeType: string };
-}
-
 export interface SamplingTool {
   name: string;
   description?: string;
@@ -115,13 +110,7 @@ export function SamplingRequestPanel({
 
       <Title order={5}>Messages:</Title>
       {messages.map((message, index) => (
-        <MessageBubble
-          key={index}
-          index={index}
-          role={message.role as "user" | "assistant"}
-          content={message.content}
-          imageContent={message.imageContent}
-        />
+        <MessageBubble key={index} index={index} message={message} />
       ))}
 
       {modelHints && modelHints.length > 0 && (
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
index 547c4bb6..678bb6e5 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
@@ -66,7 +66,7 @@ export const Failed: Story = {
     transport: "stdio",
     connectionMode: "Subprocess",
     command: "npx -y @modelcontextprotocol/server-everything",
-    status: "failed",
+    status: "error",
     retryCount: 3,
     error: {
       message: "Connection refused",
@@ -106,7 +106,7 @@ export const HttpDirect: Story = {
   args: {
     name: "Remote API Server",
     version: "2.0.0",
-    transport: "http",
+    transport: "streamable-http",
     connectionMode: "Direct",
     command: "https://api.example.com/mcp",
     status: "connected",
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index 3bc7fc92..dc4f8c42 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@@ -9,10 +9,10 @@ import { InlineError } from "../../elements/InlineError/InlineError";
 export interface ServerCardProps {
   name: string;
   version?: string;
-  transport: "stdio" | "http";
+  transport: "stdio" | "sse" | "streamable-http";
   connectionMode: string;
   command: string;
-  status: "connected" | "connecting" | "disconnected" | "failed";
+  status: "connected" | "connecting" | "disconnected" | "error";
   retryCount?: number;
   error?: { message: string; details?: string };
   canTestClientFeatures: boolean;
@@ -90,8 +90,6 @@ export function ServerCard({
 }: ServerCardProps) {
   const isThisConnecting = activeServer === name;
   const isDimmed = activeServer !== undefined && activeServer !== name;
-  const isConnected = status === "connected";
-  const isConnecting = status === "connecting" || isThisConnecting;
   const displayStatus = isThisConnecting ? "connecting" : status;
 
   useEffect(() => {
@@ -128,10 +126,10 @@ export function ServerCard({
               retryCount={retryCount}
             />
             <ConnectionToggle
-              checked={isConnected}
-              loading={isConnecting}
+              status={displayStatus}
               disabled={isDimmed}
-              onChange={handleToggle}
+              onConnect={() => handleToggle(true)}
+              onDisconnect={() => handleToggle(false)}
             />
           </HeaderRight>
         </Group>
@@ -166,12 +164,14 @@ export function ServerCard({
               )}
             </Group>
 
-            <ContentViewer type="text" content={command} copyable />
+            <ContentViewer block={{ type: "text", text: command }} copyable />
 
             {error && (
               <InlineError
-                message={error.message}
-                details={error.details}
+                error={{
+                  message: error.message,
+                  data: error.details,
+                }}
                 retryCount={retryCount}
               />
             )}
diff --git a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
index fcec909c..d5e07e8a 100644
--- a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
+++ b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
@@ -16,20 +16,17 @@ export const FullCapabilities: Story = {
     protocolVersion: "2025-03-26",
     transport: "stdio",
     serverCapabilities: [
-      { name: "Tools", supported: true, count: 12 },
-      { name: "Resources", supported: true, count: 8 },
-      { name: "Prompts", supported: true, count: 5 },
-      { name: "Logging", supported: true },
-      { name: "Completions", supported: true },
-      { name: "Sampling", supported: true },
-      { name: "Elicitation", supported: true },
+      { capability: "tools", supported: true, count: 12 },
+      { capability: "resources", supported: true, count: 8 },
+      { capability: "prompts", supported: true, count: 5 },
+      { capability: "logging", supported: true },
+      { capability: "completions", supported: true },
     ],
     clientCapabilities: [
-      { name: "Roots", supported: true, count: 3 },
-      { name: "Sampling", supported: true },
-      { name: "Elicitation", supported: true },
-      { name: "Notifications", supported: true },
-      { name: "Experimental", supported: true },
+      { capability: "roots", supported: true, count: 3 },
+      { capability: "sampling", supported: true },
+      { capability: "elicitation", supported: true },
+      { capability: "experimental", supported: true },
     ],
   },
 };
@@ -39,16 +36,16 @@ export const MinimalCapabilities: Story = {
     name: "Simple Server",
     version: "1.0.0",
     protocolVersion: "2025-03-26",
-    transport: "http",
+    transport: "streamable-http",
     serverCapabilities: [
-      { name: "Tools", supported: true, count: 2 },
-      { name: "Resources", supported: false },
-      { name: "Prompts", supported: false },
+      { capability: "tools", supported: true, count: 2 },
+      { capability: "resources", supported: false },
+      { capability: "prompts", supported: false },
     ],
     clientCapabilities: [
-      { name: "Roots", supported: true },
-      { name: "Sampling", supported: false },
-      { name: "Elicitation", supported: false },
+      { capability: "roots", supported: true },
+      { capability: "sampling", supported: false },
+      { capability: "elicitation", supported: false },
     ],
   },
 };
@@ -60,13 +57,13 @@ export const WithInstructions: Story = {
     protocolVersion: "2025-03-26",
     transport: "stdio",
     serverCapabilities: [
-      { name: "Tools", supported: true, count: 4 },
-      { name: "Resources", supported: true, count: 2 },
-      { name: "Prompts", supported: true, count: 1 },
+      { capability: "tools", supported: true, count: 4 },
+      { capability: "resources", supported: true, count: 2 },
+      { capability: "prompts", supported: true, count: 1 },
     ],
     clientCapabilities: [
-      { name: "Roots", supported: true },
-      { name: "Sampling", supported: true },
+      { capability: "roots", supported: true },
+      { capability: "sampling", supported: true },
     ],
     instructions:
       "This server provides access to the project management system. Use the list_projects tool first to discover available projects before querying tasks. Rate limiting applies: max 60 requests per minute.",
@@ -78,14 +75,14 @@ export const WithOAuth: Story = {
     name: "Authenticated Server",
     version: "3.0.0",
     protocolVersion: "2025-03-26",
-    transport: "http",
+    transport: "streamable-http",
     serverCapabilities: [
-      { name: "Tools", supported: true, count: 6 },
-      { name: "Resources", supported: true, count: 3 },
+      { capability: "tools", supported: true, count: 6 },
+      { capability: "resources", supported: true, count: 3 },
     ],
     clientCapabilities: [
-      { name: "Roots", supported: true },
-      { name: "Sampling", supported: false },
+      { capability: "roots", supported: true },
+      { capability: "sampling", supported: false },
     ],
     oauthDetails: {
       authUrl: "https://auth.example.com/oauth2/authorize",
diff --git a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
index 2cd2a134..0dce62d5 100644
--- a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
+++ b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
@@ -7,21 +7,18 @@ import {
   Text,
   Title,
 } from "@mantine/core";
-import { CapabilityItem } from "../../elements/CapabilityItem/CapabilityItem";
-
-export interface CapabilityInfo {
-  name: string;
-  supported: boolean;
-  count?: number;
-}
+import {
+  CapabilityItem,
+  type CapabilityItemProps,
+} from "../../elements/CapabilityItem/CapabilityItem";
 
 export interface ServerInfoContentProps {
   name: string;
   version: string;
   protocolVersion: string;
   transport: string;
-  serverCapabilities: CapabilityInfo[];
-  clientCapabilities: CapabilityInfo[];
+  serverCapabilities: CapabilityItemProps[];
+  clientCapabilities: CapabilityItemProps[];
   instructions?: string;
   oauthDetails?: { authUrl?: string; scopes?: string[]; accessToken?: string };
 }
@@ -68,8 +65,8 @@ export function ServerInfoContent({
           <Title order={5}>Server Capabilities</Title>
           {serverCapabilities.map((cap) => (
             <CapabilityItem
-              key={cap.name}
-              name={cap.name}
+              key={cap.capability}
+              capability={cap.capability}
               supported={cap.supported}
               count={cap.count}
             />
@@ -79,8 +76,8 @@ export function ServerInfoContent({
           <Title order={5}>Client Capabilities</Title>
           {clientCapabilities.map((cap) => (
             <CapabilityItem
-              key={cap.name}
-              name={cap.name}
+              key={cap.capability}
+              capability={cap.capability}
               supported={cap.supported}
               count={cap.count}
             />
diff --git a/clients/web/src/components/groups/TaskCard/TaskCard.stories.tsx b/clients/web/src/components/groups/TaskCard/TaskCard.stories.tsx
index 3c2383a8..1c39bfe8 100644
--- a/clients/web/src/components/groups/TaskCard/TaskCard.stories.tsx
+++ b/clients/web/src/components/groups/TaskCard/TaskCard.stories.tsx
@@ -14,10 +14,10 @@ const meta: Meta<typeof TaskCard> = {
 export default meta;
 type Story = StoryObj<typeof TaskCard>;
 
-export const Running: Story = {
+export const Working: Story = {
   args: {
     taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
-    status: "running",
+    status: "working",
     method: "tools/call",
     target: "generate_report",
     progress: 80,
@@ -28,10 +28,10 @@ export const Running: Story = {
   },
 };
 
-export const Waiting: Story = {
+export const InputRequired: Story = {
   args: {
     taskId: "4100b5e0b0ed9cd0023330342d1bf647",
-    status: "waiting",
+    status: "input_required",
     method: "resources/read",
     target: "file:///data/report.csv",
     startedAt: "3/29/2026, 8:17:55 PM",
@@ -84,7 +84,7 @@ export const Cancelled: Story = {
 export const Collapsed: Story = {
   args: {
     taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
-    status: "running",
+    status: "working",
     method: "tools/call",
     target: "generate_report",
     progress: 80,
diff --git a/clients/web/src/components/groups/TaskCard/TaskCard.tsx b/clients/web/src/components/groups/TaskCard/TaskCard.tsx
index 7e73d5d8..736818a6 100644
--- a/clients/web/src/components/groups/TaskCard/TaskCard.tsx
+++ b/clients/web/src/components/groups/TaskCard/TaskCard.tsx
@@ -12,12 +12,8 @@ import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
 import { ProgressDisplay } from "../../elements/ProgressDisplay/ProgressDisplay";
 import { TaskStatusBadge } from "../../elements/TaskStatusBadge/TaskStatusBadge";
 
-export type TaskStatus =
-  | "waiting"
-  | "running"
-  | "completed"
-  | "failed"
-  | "cancelled";
+import type { TaskStatus } from "@modelcontextprotocol/sdk/types.js";
+export type { TaskStatus };
 
 export interface TaskCardProps {
   taskId: string;
@@ -146,7 +142,7 @@ export function TaskCard(props: TaskCardProps) {
   } = props;
 
   const [isExpanded, setIsExpanded] = useState(isListExpanded);
-  const isActive = status === "waiting" || status === "running";
+  const isActive = status === "working" || status === "input_required";
 
   useEffect(() => {
     setIsExpanded(isListExpanded);
@@ -200,8 +196,11 @@ export function TaskCard(props: TaskCardProps) {
 
         {progress !== undefined && isActive && (
           <ProgressDisplay
-            progress={progress}
-            description={progressDescription}
+            params={{
+              progressToken: taskId,
+              progress,
+              message: progressDescription,
+            }}
           />
         )}
 
@@ -225,8 +224,7 @@ export function TaskCard(props: TaskCardProps) {
               <Divider />
               <SectionTitle>Full Task Object</SectionTitle>
               <ContentViewer
-                type="json"
-                content={buildTaskObject(props)}
+                block={{ type: "text", text: buildTaskObject(props) }}
                 copyable
               />
             </Stack>
diff --git a/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx b/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx
index 87a35459..bb14e11b 100644
--- a/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx
+++ b/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx
@@ -27,6 +27,6 @@ export const WithSearch: Story = {
 
 export const WithFilter: Story = {
   args: {
-    statusFilter: "running",
+    statusFilter: "working",
   },
 };
diff --git a/clients/web/src/components/groups/TaskControls/TaskControls.tsx b/clients/web/src/components/groups/TaskControls/TaskControls.tsx
index 22fd091b..c6939fa2 100644
--- a/clients/web/src/components/groups/TaskControls/TaskControls.tsx
+++ b/clients/web/src/components/groups/TaskControls/TaskControls.tsx
@@ -2,8 +2,8 @@ import { Button, Group, Select, Stack, TextInput, Title } from "@mantine/core";
 import type { TaskStatus } from "../TaskCard/TaskCard";
 
 const STATUS_OPTIONS: TaskStatus[] = [
-  "waiting",
-  "running",
+  "working",
+  "input_required",
   "completed",
   "failed",
   "cancelled",
diff --git a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
index e14eaa1c..6ed15198 100644
--- a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
+++ b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
@@ -6,7 +6,7 @@ import type { TaskCardProps } from "../TaskCard/TaskCard";
 const sampleTasks: TaskCardProps[] = [
   {
     taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
-    status: "running",
+    status: "working",
     method: "tools/call",
     target: "generate_report",
     progress: 80,
@@ -19,7 +19,7 @@ const sampleTasks: TaskCardProps[] = [
   },
   {
     taskId: "4100b5e0b0ed9cd0023330342d1bf647",
-    status: "waiting",
+    status: "input_required",
     method: "resources/read",
     target: "file:///data/report.csv",
     startedAt: "3/29/2026, 8:17:55 PM",
diff --git a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
index 230ebd1a..15e6d290 100644
--- a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
+++ b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
@@ -36,7 +36,7 @@ function formatCompletedTitle(count: number): string {
 }
 
 function isActiveStatus(status: string): boolean {
-  return status === "waiting" || status === "running";
+  return status === "working" || status === "input_required";
 }
 
 function matchesFilters(
diff --git a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
index bf1ebecc..7c370a72 100644
--- a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
+++ b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
@@ -82,16 +82,21 @@ export function ToolDetailPanel({
       {hasAnyAnnotation(annotations) && annotations && (
         <Group gap="xs">
           {annotations.audience && (
-            <AnnotationBadge label={annotations.audience} variant="audience" />
+            <AnnotationBadge
+              facet="audience"
+              value={
+                annotations.audience.split(", ") as ("user" | "assistant")[]
+              }
+            />
           )}
           {annotations.readOnly && (
-            <AnnotationBadge label="read-only" variant="readOnly" />
+            <AnnotationBadge facet="readOnlyHint" value={true} />
           )}
           {annotations.destructive && (
-            <AnnotationBadge label="destructive" variant="destructive" />
+            <AnnotationBadge facet="destructiveHint" value={true} />
           )}
           {annotations.longRunning && (
-            <AnnotationBadge label="long-run" variant="longRun" />
+            <AnnotationBadge facet="longRunHint" value={true} />
           )}
           {annotations.hints && <HintsText>{annotations.hints}</HintsText>}
         </Group>
@@ -110,8 +115,11 @@ export function ToolDetailPanel({
 
       {progress && (
         <ProgressDisplay
-          progress={progress.percent}
-          description={progress.description}
+          params={{
+            progressToken: name,
+            progress: progress.percent,
+            message: progress.description,
+          }}
         />
       )}
 
diff --git a/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
index f78281e1..9c3b2b12 100644
--- a/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
+++ b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
@@ -1,4 +1,5 @@
 import { Button, Group, Stack, Text, Title } from "@mantine/core";
+import type { ContentBlock } from "@modelcontextprotocol/sdk/types.js";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
 
 export interface ResultContentItem {
@@ -18,12 +19,17 @@ const ClearButton = Button.withProps({
   size: "sm",
 });
 
-function resolveTextType(type: string): "text" | "json" {
-  return type === "text" ? "text" : "json";
-}
-
-function resolveMediaType(mimeType?: string): "image" | "audio" {
-  return mimeType?.startsWith("image") ? "image" : "audio";
+function toContentBlock(item: ResultContentItem): ContentBlock | null {
+  if (item.text !== undefined) {
+    return { type: "text", text: item.text };
+  }
+  if (item.data !== undefined && item.mimeType?.startsWith("image")) {
+    return { type: "image", data: item.data, mimeType: item.mimeType };
+  }
+  if (item.data !== undefined && item.mimeType) {
+    return { type: "audio", data: item.data, mimeType: item.mimeType };
+  }
+  return null;
 }
 
 export function ToolResultPanel({ content, onClear }: ToolResultPanelProps) {
@@ -38,27 +44,15 @@ export function ToolResultPanel({ content, onClear }: ToolResultPanelProps) {
       ) : (
         <>
           {content.map((item, index) => {
-            if (item.text !== undefined) {
-              return (
-                <ContentViewer
-                  key={index}
-                  type={resolveTextType(item.type)}
-                  content={item.text}
-                  copyable
-                />
-              );
-            }
-            if (item.data !== undefined) {
-              return (
-                <ContentViewer
-                  key={index}
-                  type={resolveMediaType(item.mimeType)}
-                  content={item.data}
-                  mimeType={item.mimeType}
-                />
-              );
-            }
-            return null;
+            const block = toContentBlock(item);
+            if (!block) return null;
+            return (
+              <ContentViewer
+                key={index}
+                block={block}
+                copyable={block.type === "text"}
+              />
+            );
           })}
         </>
       )}
diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
index 812edacc..0ecbf6af 100644
--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
+++ b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
@@ -17,7 +17,7 @@ import mcpLogoDark from "../../../theme/assets/MCP-dark.svg";
 interface ConnectedProps {
   connected: true;
   serverName: string;
-  status: "connected" | "connecting" | "failed";
+  status: "connected" | "connecting" | "error";
   latencyMs?: number;
   activeTab: string;
   availableTabs: string[];
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
index 45b14d81..ff771eff 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { fn } from "storybook/test";
 import { LoggingScreen } from "./LoggingScreen";
-import type { LogEntryProps, LogLevel } from "../../elements/LogEntry/LogEntry";
+import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
 const meta: Meta<typeof LoggingScreen> = {
   title: "Screens/LoggingScreen",
@@ -27,121 +28,125 @@ export const Empty: Story = {
   },
 };
 
-const logMessages: { level: LogLevel; message: string; logger?: string }[] = [
-  { level: "info", message: "Server started on port 3000" },
+const logMessages: {
+  level: LoggingLevel;
+  data: string;
+  logger?: string;
+}[] = [
+  { level: "info", data: "Server started on port 3000" },
   {
     level: "debug",
-    message: "Loading configuration from /etc/mcp/config.json",
+    data: "Loading configuration from /etc/mcp/config.json",
     logger: "config",
   },
   {
     level: "warning",
-    message: "Deprecated API endpoint called: /v1/tools",
+    data: "Deprecated API endpoint called: /v1/tools",
     logger: "http",
   },
-  { level: "info", message: "Client connected: inspector-web-ui" },
+  { level: "info", data: "Client connected: inspector-web-ui" },
   {
     level: "error",
-    message: "Failed to read resource: file not found at /data/missing.txt",
+    data: "Failed to read resource: file not found at /data/missing.txt",
     logger: "resources",
   },
   {
     level: "info",
-    message: "Tool execution completed: search_files (245ms)",
+    data: "Tool execution completed: search_files (245ms)",
     logger: "tools",
   },
   {
     level: "debug",
-    message: "Parsing JSON-RPC request body",
+    data: "Parsing JSON-RPC request body",
     logger: "transport",
   },
   {
     level: "info",
-    message: "Listing available tools for client session",
+    data: "Listing available tools for client session",
     logger: "tools",
   },
   {
     level: "warning",
-    message: "Slow query detected: 1200ms for resource lookup",
+    data: "Slow query detected: 1200ms for resource lookup",
     logger: "db",
   },
   {
     level: "info",
-    message: "Resource subscription added: file:///config.json",
+    data: "Resource subscription added: file:///config.json",
     logger: "resources",
   },
   {
     level: "debug",
-    message: "Heartbeat ping received from client",
+    data: "Heartbeat ping received from client",
     logger: "session",
   },
   {
     level: "error",
-    message: "Permission denied reading /etc/secrets.env",
+    data: "Permission denied reading /etc/secrets.env",
     logger: "resources",
   },
   {
     level: "info",
-    message: "Prompt 'summarize' resolved with 2 messages",
+    data: "Prompt 'summarize' resolved with 2 messages",
     logger: "prompts",
   },
   {
     level: "debug",
-    message: "Cache hit for resource: db://users/42",
+    data: "Cache hit for resource: db://users/42",
     logger: "cache",
   },
   {
     level: "info",
-    message: "Tool 'create_record' executed successfully in 89ms",
+    data: "Tool 'create_record' executed successfully in 89ms",
     logger: "tools",
   },
   {
     level: "warning",
-    message: "Client reconnection attempt #3",
+    data: "Client reconnection attempt #3",
     logger: "session",
   },
   {
     level: "info",
-    message: "New resource detected: file:///data/output.csv",
+    data: "New resource detected: file:///data/output.csv",
     logger: "resources",
   },
   {
     level: "debug",
-    message: "Serializing response payload (2.4KB)",
+    data: "Serializing response payload (2.4KB)",
     logger: "transport",
   },
   {
     level: "error",
-    message: "Timeout waiting for tool response after 30s",
+    data: "Timeout waiting for tool response after 30s",
     logger: "tools",
   },
   {
     level: "info",
-    message: "Session initialized with capabilities: tools, resources, prompts",
+    data: "Session initialized with capabilities: tools, resources, prompts",
   },
   {
     level: "debug",
-    message: "Validating input schema for tool 'batch_process'",
+    data: "Validating input schema for tool 'batch_process'",
     logger: "tools",
   },
   {
     level: "info",
-    message: "Resource template resolved: db://tables/users/rows/15",
+    data: "Resource template resolved: db://tables/users/rows/15",
     logger: "resources",
   },
   {
     level: "warning",
-    message: "Memory usage at 78% — consider increasing limits",
+    data: "Memory usage at 78% — consider increasing limits",
     logger: "system",
   },
   {
     level: "info",
-    message: "Client disconnected gracefully",
+    data: "Client disconnected gracefully",
     logger: "session",
   },
   {
     level: "debug",
-    message: "Flushing log buffer to disk (128 entries)",
+    data: "Flushing log buffer to disk (128 entries)",
     logger: "logging",
   },
 ];
@@ -150,14 +155,11 @@ function pad(n: number): string {
   return n.toString().padStart(2, "0");
 }
 
-const mixedEntries: LogEntryProps[] = Array.from({ length: 50 }, (_, i) => {
+const mixedEntries: LogEntryData[] = Array.from({ length: 50 }, (_, i) => {
   const src = logMessages[i % logMessages.length];
-  const seconds = pad(i + 1);
   return {
-    timestamp: `2026-03-17T10:00:${seconds}Z`,
-    level: src.level,
-    message: src.message,
-    logger: src.logger,
+    receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`),
+    params: { level: src.level, data: src.data, logger: src.logger },
   };
 });
 
@@ -167,53 +169,66 @@ export const WithEntries: Story = {
   },
 };
 
-const allLevelEntries: LogEntryProps[] = [
+const allLevelEntries: LogEntryData[] = [
   {
-    timestamp: "2026-03-17T10:00:01Z",
-    level: "debug",
-    message: "Resolving transport handler for stdio connection",
-    logger: "transport",
+    receivedAt: new Date("2026-03-17T10:00:01Z"),
+    params: {
+      level: "debug",
+      data: "Resolving transport handler for stdio connection",
+      logger: "transport",
+    },
   },
   {
-    timestamp: "2026-03-17T10:00:02Z",
-    level: "info",
-    message: "MCP session initialized successfully",
+    receivedAt: new Date("2026-03-17T10:00:02Z"),
+    params: { level: "info", data: "MCP session initialized successfully" },
   },
   {
-    timestamp: "2026-03-17T10:00:03Z",
-    level: "notice",
-    message: "Server capabilities negotiated: tools, resources, prompts",
-    logger: "session",
+    receivedAt: new Date("2026-03-17T10:00:03Z"),
+    params: {
+      level: "notice",
+      data: "Server capabilities negotiated: tools, resources, prompts",
+      logger: "session",
+    },
   },
   {
-    timestamp: "2026-03-17T10:00:04Z",
-    level: "warning",
-    message: "Rate limit approaching: 85% of quota used",
-    logger: "ratelimit",
+    receivedAt: new Date("2026-03-17T10:00:04Z"),
+    params: {
+      level: "warning",
+      data: "Rate limit approaching: 85% of quota used",
+      logger: "ratelimit",
+    },
   },
   {
-    timestamp: "2026-03-17T10:00:05Z",
-    level: "error",
-    message: "Tool execution failed: timeout after 30s",
-    logger: "tools",
+    receivedAt: new Date("2026-03-17T10:00:05Z"),
+    params: {
+      level: "error",
+      data: "Tool execution failed: timeout after 30s",
+      logger: "tools",
+    },
   },
   {
-    timestamp: "2026-03-17T10:00:06Z",
-    level: "critical",
-    message: "Database connection pool exhausted",
-    logger: "db",
+    receivedAt: new Date("2026-03-17T10:00:06Z"),
+    params: {
+      level: "critical",
+      data: "Database connection pool exhausted",
+      logger: "db",
+    },
   },
   {
-    timestamp: "2026-03-17T10:00:07Z",
-    level: "alert",
-    message: "Memory usage exceeds 95% threshold",
-    logger: "system",
+    receivedAt: new Date("2026-03-17T10:00:07Z"),
+    params: {
+      level: "alert",
+      data: "Memory usage exceeds 95% threshold",
+      logger: "system",
+    },
   },
   {
-    timestamp: "2026-03-17T10:00:08Z",
-    level: "emergency",
-    message: "System unresponsive - initiating graceful shutdown",
-    logger: "system",
+    receivedAt: new Date("2026-03-17T10:00:08Z"),
+    params: {
+      level: "emergency",
+      data: "System unresponsive - initiating graceful shutdown",
+      logger: "system",
+    },
   },
 ];
 
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
index 5d6af207..00f9a91f 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
@@ -2,10 +2,10 @@ import { useState } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
 import { LogControls } from "../../groups/LogControls/LogControls";
 import { LogStreamPanel } from "../../groups/LogStreamPanel/LogStreamPanel";
-import type { LogEntryProps } from "../../elements/LogEntry/LogEntry";
+import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
 export interface LoggingScreenProps {
-  entries: LogEntryProps[];
+  entries: LogEntryData[];
   currentLevel: string;
   onSetLevel: (level: string) => void;
   onClear: () => void;
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
index 0185f80b..f3838aa1 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
@@ -89,12 +89,17 @@ export const WithResult: Story = {
       messages: [
         {
           role: "user",
-          content:
-            'Translate the following text to Spanish: "Hello, how are you?"',
+          content: {
+            type: "text",
+            text: 'Translate the following text to Spanish: "Hello, how are you?"',
+          },
         },
         {
           role: "assistant",
-          content: "Hola, como estas?",
+          content: {
+            type: "text",
+            text: "Hola, como estas?",
+          },
         },
       ],
     },
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
index dbc533c9..7ffd109d 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
@@ -69,10 +69,10 @@ const disconnectedStdioServer: ServerCardProps = {
 const failedHttpServer: ServerCardProps = {
   name: "Remote API Server",
   version: "2.0.0",
-  transport: "http",
+  transport: "streamable-http",
   connectionMode: "Streamable HTTP",
   command: "https://api.example.com/mcp",
-  status: "failed",
+  status: "error",
   retryCount: 3,
   error: {
     message: "Connection refused",
@@ -84,7 +84,7 @@ const failedHttpServer: ServerCardProps = {
 
 const connectingHttpServer: ServerCardProps = {
   name: "Staging Server",
-  transport: "http",
+  transport: "streamable-http",
   connectionMode: "Streamable HTTP",
   command: "https://staging.example.com/mcp",
   status: "connecting",
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
index 7f6229f4..189f9667 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof TasksScreen>;
 const sampleTasks: TaskCardProps[] = [
   {
     taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
-    status: "running",
+    status: "working",
     method: "tools/call",
     target: "batch_process",
     progress: 65,
@@ -32,7 +32,7 @@ const sampleTasks: TaskCardProps[] = [
   },
   {
     taskId: "4100b5e0b0ed9cd0023330342d1bf647",
-    status: "waiting",
+    status: "input_required",
     method: "resources/read",
     target: "file:///data/large-dataset.csv",
     startedAt: "3/29/2026, 8:17:55 PM",
@@ -77,7 +77,7 @@ export const Mixed: Story = {
 export const ActiveOnly: Story = {
   args: {
     tasks: sampleTasks.filter(
-      (t) => t.status === "running" || t.status === "waiting",
+      (t) => t.status === "working" || t.status === "input_required",
     ),
   },
 };
@@ -85,7 +85,7 @@ export const ActiveOnly: Story = {
 export const CompletedOnly: Story = {
   args: {
     tasks: sampleTasks.filter(
-      (t) => t.status !== "running" && t.status !== "waiting",
+      (t) => t.status !== "working" && t.status !== "input_required",
     ),
   },
 };
diff --git a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
index 7356c07c..c18dcb76 100644
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
+++ b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
@@ -9,126 +9,126 @@ import { LoggingScreen } from "../../screens/LoggingScreen/LoggingScreen";
 import { TasksScreen } from "../../screens/TasksScreen/TasksScreen";
 import { HistoryScreen } from "../../screens/HistoryScreen/HistoryScreen";
 
-import type { LogEntryProps } from "../../elements/LogEntry/LogEntry";
-import type { LogLevel } from "../../elements/LogEntry/LogEntry";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
+import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
 const allTabs = ["Tools", "Resources", "Prompts", "Logs", "Tasks", "History"];
 
-const logMessages: { level: LogLevel; message: string; logger?: string }[] = [
-  { level: "info", message: "Server started on port 3000" },
+const logMessages: { level: LoggingLevel; data: string; logger?: string }[] = [
+  { level: "info", data: "Server started on port 3000" },
   {
     level: "debug",
-    message: "Loading configuration from /etc/mcp/config.json",
+    data: "Loading configuration from /etc/mcp/config.json",
     logger: "config",
   },
   {
     level: "warning",
-    message: "Deprecated API endpoint called: /v1/tools",
+    data: "Deprecated API endpoint called: /v1/tools",
     logger: "http",
   },
-  { level: "info", message: "Client connected: inspector-web-ui" },
+  { level: "info", data: "Client connected: inspector-web-ui" },
   {
     level: "error",
-    message: "Failed to read resource: file not found at /data/missing.txt",
+    data: "Failed to read resource: file not found at /data/missing.txt",
     logger: "resources",
   },
   {
     level: "info",
-    message: "Tool execution completed: search_files (245ms)",
+    data: "Tool execution completed: search_files (245ms)",
     logger: "tools",
   },
   {
     level: "debug",
-    message: "Parsing JSON-RPC request body",
+    data: "Parsing JSON-RPC request body",
     logger: "transport",
   },
   {
     level: "info",
-    message: "Listing available tools for client session",
+    data: "Listing available tools for client session",
     logger: "tools",
   },
   {
     level: "warning",
-    message: "Slow query detected: 1200ms for resource lookup",
+    data: "Slow query detected: 1200ms for resource lookup",
     logger: "db",
   },
   {
     level: "info",
-    message: "Resource subscription added: file:///config.json",
+    data: "Resource subscription added: file:///config.json",
     logger: "resources",
   },
   {
     level: "debug",
-    message: "Heartbeat ping received from client",
+    data: "Heartbeat ping received from client",
     logger: "session",
   },
   {
     level: "error",
-    message: "Permission denied reading /etc/secrets.env",
+    data: "Permission denied reading /etc/secrets.env",
     logger: "resources",
   },
   {
     level: "info",
-    message: "Prompt 'summarize' resolved with 2 messages",
+    data: "Prompt 'summarize' resolved with 2 messages",
     logger: "prompts",
   },
   {
     level: "debug",
-    message: "Cache hit for resource: db://users/42",
+    data: "Cache hit for resource: db://users/42",
     logger: "cache",
   },
   {
     level: "info",
-    message: "Tool 'create_record' executed successfully in 89ms",
+    data: "Tool 'create_record' executed successfully in 89ms",
     logger: "tools",
   },
   {
     level: "warning",
-    message: "Client reconnection attempt #3",
+    data: "Client reconnection attempt #3",
     logger: "session",
   },
   {
     level: "info",
-    message: "New resource detected: file:///data/output.csv",
+    data: "New resource detected: file:///data/output.csv",
     logger: "resources",
   },
   {
     level: "debug",
-    message: "Serializing response payload (2.4KB)",
+    data: "Serializing response payload (2.4KB)",
     logger: "transport",
   },
   {
     level: "error",
-    message: "Timeout waiting for tool response after 30s",
+    data: "Timeout waiting for tool response after 30s",
     logger: "tools",
   },
   {
     level: "info",
-    message: "Session initialized with capabilities: tools, resources, prompts",
+    data: "Session initialized with capabilities: tools, resources, prompts",
   },
   {
     level: "debug",
-    message: "Validating input schema for tool 'batch_process'",
+    data: "Validating input schema for tool 'batch_process'",
     logger: "tools",
   },
   {
     level: "info",
-    message: "Resource template resolved: db://tables/users/rows/15",
+    data: "Resource template resolved: db://tables/users/rows/15",
     logger: "resources",
   },
   {
     level: "warning",
-    message: "Memory usage at 78% — consider increasing limits",
+    data: "Memory usage at 78% — consider increasing limits",
     logger: "system",
   },
   {
     level: "info",
-    message: "Client disconnected gracefully",
+    data: "Client disconnected gracefully",
     logger: "session",
   },
   {
     level: "debug",
-    message: "Flushing log buffer to disk (128 entries)",
+    data: "Flushing log buffer to disk (128 entries)",
     logger: "logging",
   },
 ];
@@ -137,13 +137,11 @@ function pad(n: number): string {
   return n.toString().padStart(2, "0");
 }
 
-const sampleLogEntries: LogEntryProps[] = Array.from({ length: 50 }, (_, i) => {
+const sampleLogEntries: LogEntryData[] = Array.from({ length: 50 }, (_, 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,
+    receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`),
+    params: { level: src.level, data: src.data, logger: src.logger },
   };
 });
 
@@ -668,10 +666,15 @@ export const PromptsActive: Story = {
           messages: [
             {
               role: "user",
-              content:
-                'Translate the following text to Spanish: "Hello, how are you?"',
+              content: {
+                type: "text",
+                text: 'Translate the following text to Spanish: "Hello, how are you?"',
+              },
+            },
+            {
+              role: "assistant",
+              content: { type: "text", text: "Hola, como estas?" },
             },
-            { role: "assistant", content: "Hola, como estas?" },
           ],
         }}
         listChanged={true}
@@ -710,7 +713,7 @@ export const TasksActive: Story = {
         tasks={[
           {
             taskId: "d0b22eba71fa36229ce5c4dfadeaa7de",
-            status: "running",
+            status: "working",
             method: "tools/call",
             target: "batch_process",
             progress: 65,
@@ -723,7 +726,7 @@ export const TasksActive: Story = {
           },
           {
             taskId: "4100b5e0b0ed9cd0023330342d1bf647",
-            status: "waiting",
+            status: "input_required",
             method: "resources/read",
             target: "file:///data/large-dataset.csv",
             startedAt: "3/29/2026, 8:17:55 PM",
diff --git a/clients/web/src/components/views/ConnectedView/ConnectedView.tsx b/clients/web/src/components/views/ConnectedView/ConnectedView.tsx
index 6e8b7238..22983444 100644
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.tsx
+++ b/clients/web/src/components/views/ConnectedView/ConnectedView.tsx
@@ -4,7 +4,7 @@ import { ViewHeader } from "../../groups/ViewHeader/ViewHeader";
 
 export interface ConnectedLayoutProps {
   serverName: string;
-  status: "connected" | "connecting" | "failed";
+  status: "connected" | "connecting" | "error";
   latencyMs?: number;
   activeTab: string;
   availableTabs: string[];
diff --git a/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx b/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
index c960a85c..511fc148 100644
--- a/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
+++ b/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
@@ -92,7 +92,7 @@ export const WithServers: Story = {
           {
             name: "remote-server",
             version: "2.1.0",
-            transport: "http",
+            transport: "streamable-http",
             connectionMode: "Direct",
             command: "https://api.example.com/mcp",
             status: "disconnected",
@@ -219,7 +219,7 @@ export const ManyServers: Story = {
           {
             name: "remote-api-server",
             version: "2.1.0",
-            transport: "http",
+            transport: "streamable-http",
             connectionMode: "Direct",
             command: "https://api.example.com/mcp",
             status: "disconnected",
@@ -249,7 +249,7 @@ export const ManyServers: Story = {
           {
             name: "slack-server",
             version: "1.1.0",
-            transport: "http",
+            transport: "streamable-http",
             connectionMode: "Direct",
             command: "https://slack-mcp.example.com/mcp",
             status: "disconnected",
@@ -299,7 +299,7 @@ export const ManyServers: Story = {
           {
             name: "google-maps-server",
             version: "0.8.0",
-            transport: "http",
+            transport: "streamable-http",
             connectionMode: "Direct",
             command: "https://maps-mcp.example.com/mcp",
             status: "disconnected",

From 658ef869440dd42f5efd9b4e3d2ce0f984665b5d Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 17 Apr 2026 19:26:21 -0400
Subject: [PATCH 3/7] Phase 1: Style refinements and component tweaks from
 Storybook review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Theme & styling:
- Add custom "inspector" color palette with dark navy primary
- Change primaryShade to { light: 7, dark: 8 }
- Add Input theme override to apply --inspector-input-background globally
- Add --inspector-input-background token (white in light, dark-9 in dark)
- Override --mantine-color-body in dark mode via cssVariablesResolver
  in both main.tsx and Storybook preview.tsx
- Add dark-mode CSS overrides for Select dropdown and option hover
- Add dark-mode CSS override for Accordion control hover
- Rename CSS variable --inspector-status-failed → --inspector-status-error

Component changes:
- CopyButton: increase icon font size to 24px, use --inspector-text-primary
  for high-contrast color (black/white per theme)
- TaskControls: remove onClearHistory (moved to TaskListPanel), fix Select
  clear button not disappearing by passing null instead of undefined
- TaskListPanel: add onClearCompleted callback, render "Clear" button
  next to Completed section header
- HistoryListPanel: move "Clear" button from toolbar to History section
  header, rename from "Clear All"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 clients/web/.storybook/preview.tsx            | 12 +++++--
 clients/web/src/App.css                       | 34 +++++++++++++++++--
 .../elements/CopyButton/CopyButton.tsx        |  3 +-
 .../ListChangedIndicator.tsx                  |  2 +-
 .../elements/ListToggle/ListToggle.tsx        |  2 +-
 .../HistoryListPanel/HistoryListPanel.tsx     | 12 ++++---
 .../groups/LogControls/LogControls.tsx        |  2 +-
 .../groups/LogStreamPanel/LogStreamPanel.tsx  |  2 +-
 .../PromptMessagesDisplay.tsx                 |  2 +-
 .../ResourceControls/ResourceControls.tsx     |  8 ++---
 .../TaskControls/TaskControls.stories.tsx     |  1 -
 .../groups/TaskControls/TaskControls.tsx      | 17 ++++------
 .../TaskListPanel/TaskListPanel.stories.tsx   |  1 +
 .../groups/TaskListPanel/TaskListPanel.tsx    | 28 ++++++++++++---
 .../ToolResultPanel/ToolResultPanel.tsx       |  2 +-
 .../groups/ViewHeader/ViewHeader.tsx          |  4 +--
 .../screens/PromptsScreen/PromptsScreen.tsx   |  7 ++--
 .../TasksScreen/TasksScreen.stories.tsx       |  2 +-
 .../screens/TasksScreen/TasksScreen.tsx       |  6 ++--
 .../ConnectedView/ConnectedView.stories.tsx   |  2 +-
 clients/web/src/main.tsx                      | 16 +++++++--
 clients/web/src/theme/Input.ts                |  9 +++++
 clients/web/src/theme/index.ts                |  1 +
 clients/web/src/theme/theme.ts                | 24 +++++++++++--
 24 files changed, 148 insertions(+), 51 deletions(-)
 create mode 100644 clients/web/src/theme/Input.ts

diff --git a/clients/web/.storybook/preview.tsx b/clients/web/.storybook/preview.tsx
index 7c856228..29527c4b 100644
--- a/clients/web/.storybook/preview.tsx
+++ b/clients/web/.storybook/preview.tsx
@@ -1,5 +1,5 @@
 import type { Preview } from '@storybook/react-vite'
-import { MantineProvider, useMantineColorScheme } from '@mantine/core'
+import { MantineProvider, useMantineColorScheme, type CSSVariablesResolver } from '@mantine/core'
 import { Notifications } from '@mantine/notifications'
 import '@mantine/core/styles.css'
 import '@mantine/notifications/styles.css'
@@ -24,6 +24,14 @@ function ColorSchemeWrapper({
   return <>{children}</>
 }
 
+const resolver: CSSVariablesResolver = () => ({
+  variables: {},
+  light: {},
+  dark: {
+    '--mantine-color-body': 'var(--mantine-color-dark-9)',
+  },
+})
+
 const preview: Preview = {
   globalTypes: {
     colorScheme: {
@@ -46,7 +54,7 @@ const preview: Preview = {
     (Story, context) => {
       const isFullscreen = context.parameters?.layout === 'fullscreen'
       return (
-        <MantineProvider theme={theme} defaultColorScheme="light">
+        <MantineProvider theme={theme} defaultColorScheme="light" cssVariablesResolver={resolver}>
           <ColorSchemeWrapper colorScheme={context.globals.colorScheme ?? 'light'}>
             <Notifications position="top-right" />
             {isFullscreen ? (
diff --git a/clients/web/src/App.css b/clients/web/src/App.css
index 48acfc34..5a0a75f2 100644
--- a/clients/web/src/App.css
+++ b/clients/web/src/App.css
@@ -26,6 +26,9 @@
   --inspector-surface-card: var(--mantine-color-gray-0);
   --inspector-surface-code: var(--mantine-color-white);
 
+  /* ── Inputs ────────────────────────────────────────────── */
+  --inspector-input-background: var(--mantine-color-white);
+
   /* ── Borders ───────────────────────────────────────────── */
   --inspector-border-default: var(--mantine-color-default-border);
   --inspector-border-subtle: var(--mantine-color-gray-3);
@@ -71,7 +74,8 @@
 [data-mantine-color-scheme="dark"] {
   --inspector-surface-card: var(--mantine-color-gray-9);
   --inspector-surface-code: var(--mantine-color-dark-9);
-  --inspector-border-subtle: var(--mantine-color-dark-4);
+  --inspector-border-subtle: var(--mantine-color-gray-4);
+  --inspector-input-background: var(--mantine-color-dark-9);
 }
 
 /* ── Animations ──────────────────────────────────────────── */
@@ -112,7 +116,33 @@
 }
 
 [data-mantine-color-scheme="dark"] .list-item:hover {
-  background-color: var(--mantine-color-dark-5);
+  background-color: var(--mantine-primary-color-light);
+}
+
+/* ── Select dropdown / option (dark mode) ──────────────────────── */
+
+[data-mantine-color-scheme="dark"] .mantine-Select-dropdown {
+  background-color: var(--mantine-color-gray-8);
+}
+
+[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
+  background-color: var(--mantine-primary-color-light);
+}
+
+[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
+  background-color: var(--mantine-primary-color-light);
+}
+
+/* ── Segmented control label (dark mode) ──────────────────────── */
+
+[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-indicator {
+  background-color: var(--mantine-primary-color-light);
+}
+
+/* ── Accordion button hover ─────────────────────────────── */
+
+[data-mantine-color-scheme="dark"] .mantine-Accordion-control:hover {
+  background-color: var(--mantine-primary-color-filled-hover);
 }
 
 /* ── Grid alignment ─────────────────────────────────────── */
diff --git a/clients/web/src/components/elements/CopyButton/CopyButton.tsx b/clients/web/src/components/elements/CopyButton/CopyButton.tsx
index 487cab9f..98f27549 100644
--- a/clients/web/src/components/elements/CopyButton/CopyButton.tsx
+++ b/clients/web/src/components/elements/CopyButton/CopyButton.tsx
@@ -15,8 +15,9 @@ export function CopyButton({ value }: CopyButtonProps) {
         <Tooltip label={copied ? "Copied" : "Copy"}>
           <ActionIcon
             variant="subtle"
-            color={copied ? "green" : "gray"}
+            color={copied ? "green" : "var(--inspector-text-primary)"}
             onClick={copy}
+            fz={24}
           >
             {copied ? "\u2713" : "\u2398"}
           </ActionIcon>
diff --git a/clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx b/clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx
index a9704b11..1f3365b4 100644
--- a/clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx
+++ b/clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx
@@ -19,7 +19,7 @@ const UpdateLabel = Text.withProps({
 
 const RefreshButton = Button.withProps({
   size: "sm",
-  variant: "light",
+  variant: "subtle",
 });
 
 export function ListChangedIndicator({
diff --git a/clients/web/src/components/elements/ListToggle/ListToggle.tsx b/clients/web/src/components/elements/ListToggle/ListToggle.tsx
index 27964ddd..7d4ec106 100644
--- a/clients/web/src/components/elements/ListToggle/ListToggle.tsx
+++ b/clients/web/src/components/elements/ListToggle/ListToggle.tsx
@@ -23,7 +23,7 @@ export function ListToggle({
   }
 
   return (
-    <Button size="sm" onClick={onToggle}>
+    <Button size="sm" variant="subtle" onClick={onToggle}>
       <Icon size={20} />
     </Button>
   );
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index e0094a9a..0940a35d 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@@ -22,7 +22,7 @@ export interface HistoryRequestsPanelProps {
 }
 
 const ToolbarButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 
@@ -96,7 +96,6 @@ export function HistoryListPanel({
         <Title order={4}>Requests</Title>
         <Group gap="xs">
           <ToolbarButton onClick={onExport}>Export JSON</ToolbarButton>
-          <ToolbarButton onClick={onClearAll}>Clear All</ToolbarButton>
           {hasResults && (
             <ListToggle
               compact={compact}
@@ -128,9 +127,12 @@ export function HistoryListPanel({
 
             {filteredEntries.length > 0 && (
               <>
-                <Title order={5}>
-                  {formatHistoryTitle(filteredEntries.length)}
-                </Title>
+                <Group justify="space-between">
+                  <Title order={5}>
+                    {formatHistoryTitle(filteredEntries.length)}
+                  </Title>
+                  <ToolbarButton onClick={onClearAll}>Clear</ToolbarButton>
+                </Group>
                 {filteredEntries.map((entry) => (
                   <HistoryEntry
                     key={entryKey(entry)}
diff --git a/clients/web/src/components/groups/LogControls/LogControls.tsx b/clients/web/src/components/groups/LogControls/LogControls.tsx
index 4dc04174..780faad1 100644
--- a/clients/web/src/components/groups/LogControls/LogControls.tsx
+++ b/clients/web/src/components/groups/LogControls/LogControls.tsx
@@ -91,7 +91,7 @@ export function LogControls({
       <Stack gap="xs">
         {LOG_LEVELS.map((level) => {
           const style = LEVEL_COLORS[level];
-          const active = !!visibleLevels[level];
+          const active = visibleLevels[level];
           return (
             <UnstyledButton
               key={level}
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
index d74aba20..876483b4 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
@@ -31,7 +31,7 @@ const PanelContainer = Paper.withProps({
 });
 
 const ToolbarButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 
diff --git a/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx b/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx
index ecb3bbf2..9fb2be94 100644
--- a/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx
+++ b/clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx
@@ -6,7 +6,7 @@ import type {
 import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
 
 const CopyAllButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 
diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
index ebc17fa4..f6c121a2 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
@@ -93,16 +93,16 @@ export function ResourceControls({
         <ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
       </Group>
       <Group gap="xs" wrap="nowrap">
-        <ListToggle
-          compact={!allExpanded}
-          onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
-        />
         <TextInput
           flex={1}
           placeholder="Search..."
           value={searchText}
           onChange={(e) => setSearchText(e.currentTarget.value)}
         />
+        <ListToggle
+          compact={!allExpanded}
+          onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
+        />
       </Group>
       <Accordion multiple value={openSections} onChange={setOpenSections}>
         <Accordion.Item value="resources">
diff --git a/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx b/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx
index bb14e11b..83aae64b 100644
--- a/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx
+++ b/clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx
@@ -10,7 +10,6 @@ const meta: Meta<typeof TaskControls> = {
     onSearchChange: fn(),
     onStatusFilterChange: fn(),
     onRefresh: fn(),
-    onClearHistory: fn(),
   },
 };
 
diff --git a/clients/web/src/components/groups/TaskControls/TaskControls.tsx b/clients/web/src/components/groups/TaskControls/TaskControls.tsx
index c6939fa2..9bff8aa4 100644
--- a/clients/web/src/components/groups/TaskControls/TaskControls.tsx
+++ b/clients/web/src/components/groups/TaskControls/TaskControls.tsx
@@ -10,7 +10,7 @@ const STATUS_OPTIONS: TaskStatus[] = [
 ];
 
 const ToolbarButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 
@@ -20,7 +20,6 @@ export interface TaskControlsProps {
   onSearchChange: (text: string) => void;
   onStatusFilterChange: (status: string) => void;
   onRefresh: () => void;
-  onClearHistory: () => void;
 }
 
 export function TaskControls({
@@ -29,12 +28,13 @@ export function TaskControls({
   onSearchChange,
   onStatusFilterChange,
   onRefresh,
-  onClearHistory,
 }: TaskControlsProps) {
   return (
     <Stack gap="md">
-      <Title order={4}>Tasks</Title>
-
+      <Group flex={1} justify={"space-between"}>
+        <Title order={4}>Tasks</Title>
+        <ToolbarButton onClick={onRefresh}>Refresh</ToolbarButton>
+      </Group>
       <Title order={5}>Search</Title>
       <TextInput
         placeholder="Search..."
@@ -46,15 +46,10 @@ export function TaskControls({
       <Select
         placeholder="All statuses"
         data={STATUS_OPTIONS}
-        value={statusFilter}
+        value={statusFilter ?? null}
         onChange={(value) => onStatusFilterChange(value ?? "")}
         clearable
       />
-
-      <Group>
-        <ToolbarButton onClick={onRefresh}>Refresh</ToolbarButton>
-        <ToolbarButton onClick={onClearHistory}>Clear History</ToolbarButton>
-      </Group>
     </Stack>
   );
 }
diff --git a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
index 6ed15198..b516b9d2 100644
--- a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
+++ b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
@@ -61,6 +61,7 @@ const meta: Meta<typeof TaskListPanel> = {
   args: {
     tasks: sampleTasks,
     searchText: "",
+    onClearCompleted: fn(),
   },
 };
 
diff --git a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
index 15e6d290..57dcad0b 100644
--- a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
+++ b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
@@ -1,5 +1,13 @@
 import { useMemo, useState } from "react";
-import { Group, Paper, ScrollArea, Stack, Text, Title } from "@mantine/core";
+import {
+  Button,
+  Group,
+  Paper,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import { TaskCard } from "../TaskCard/TaskCard";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
 import type { TaskCardProps } from "../TaskCard/TaskCard";
@@ -8,6 +16,7 @@ export interface TaskListPanelProps {
   tasks: TaskCardProps[];
   searchText: string;
   statusFilter?: string;
+  onClearCompleted: () => void;
 }
 
 const PanelContainer = Paper.withProps({
@@ -17,6 +26,11 @@ const PanelContainer = Paper.withProps({
   variant: "panel",
 });
 
+const ClearHistoryButton = Button.withProps({
+  variant: "subtle",
+  size: "sm",
+});
+
 const EmptyState = Text.withProps({
   c: "dimmed",
   ta: "center",
@@ -58,6 +72,7 @@ export function TaskListPanel({
   tasks,
   searchText,
   statusFilter,
+  onClearCompleted,
 }: TaskListPanelProps) {
   const [compact, setCompact] = useState(false);
 
@@ -110,9 +125,14 @@ export function TaskListPanel({
 
             {completedTasks.length > 0 && (
               <>
-                <Title order={5}>
-                  {formatCompletedTitle(completedTasks.length)}
-                </Title>
+                <Group justify="space-between">
+                  <Title order={5}>
+                    {formatCompletedTitle(completedTasks.length)}
+                  </Title>
+                  <ClearHistoryButton onClick={onClearCompleted}>
+                    Clear
+                  </ClearHistoryButton>
+                </Group>
                 {completedTasks.map((task) => (
                   <TaskCard
                     key={taskKey(task)}
diff --git a/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
index 9c3b2b12..86956c37 100644
--- a/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
+++ b/clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
@@ -15,7 +15,7 @@ export interface ToolResultPanelProps {
 }
 
 const ClearButton = Button.withProps({
-  variant: "light",
+  variant: "subtle",
   size: "sm",
 });
 
diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
index 0ecbf6af..2eddb6fa 100644
--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
+++ b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
@@ -79,13 +79,13 @@ const RightSection = Group.withProps({
 });
 
 const DisconnectButton = Button.withProps({
-  variant: "outline",
+  variant: "subtle",
   c: "red",
   size: "sm",
 });
 
 const ThemeToggle = ActionIcon.withProps({
-  variant: "outline",
+  variant: "subtle",
   size: 36,
   "aria-label": "Toggle color scheme",
 });
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
index fdedc376..903c1416 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
@@ -1,4 +1,4 @@
-import { Card, Flex, ScrollArea, Stack, Text } from "@mantine/core";
+import { Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
 import { PromptControls } from "../../groups/PromptControls/PromptControls";
 import { PromptArgumentsForm } from "../../groups/PromptArgumentsForm/PromptArgumentsForm";
 import { PromptMessagesDisplay } from "../../groups/PromptMessagesDisplay/PromptMessagesDisplay";
@@ -47,6 +47,7 @@ const SidebarCard = Card.withProps({
 });
 
 const DetailCard = Card.withProps({
+  flex: 1,
   withBorder: true,
   padding: "lg",
 });
@@ -84,7 +85,7 @@ export function PromptsScreen({
         flex={1}
         mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
       >
-        <Stack gap="md">
+        <Group flex={1} gap="md" align="flex-start" wrap="nowrap">
           {selectedPrompt ? (
             <>
               <DetailCard>
@@ -108,7 +109,7 @@ export function PromptsScreen({
               <EmptyState>Select a prompt to view details</EmptyState>
             </DetailCard>
           )}
-        </Stack>
+        </Group>
       </ScrollArea.Autosize>
     </ScreenLayout>
   );
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
index 189f9667..40085855 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta<typeof TasksScreen> = {
   parameters: { layout: "fullscreen" },
   args: {
     onRefresh: fn(),
-    onClearHistory: fn(),
+    onClearCompleted: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
index 700365b5..fd7b4417 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
@@ -7,7 +7,7 @@ import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
 export interface TasksScreenProps {
   tasks: TaskCardProps[];
   onRefresh: () => void;
-  onClearHistory: () => void;
+  onClearCompleted: () => void;
 }
 
 const ScreenLayout = Flex.withProps({
@@ -30,7 +30,7 @@ const SidebarCard = Card.withProps({
 export function TasksScreen({
   tasks,
   onRefresh,
-  onClearHistory,
+  onClearCompleted,
 }: TasksScreenProps) {
   const [searchText, setSearchText] = useState("");
   const [statusFilter, setStatusFilter] = useState<string | undefined>();
@@ -47,7 +47,6 @@ export function TasksScreen({
               setStatusFilter(value || undefined)
             }
             onRefresh={onRefresh}
-            onClearHistory={onClearHistory}
           />
         </SidebarCard>
       </Sidebar>
@@ -55,6 +54,7 @@ export function TasksScreen({
         tasks={tasks}
         searchText={searchText}
         statusFilter={statusFilter}
+        onClearCompleted={onClearCompleted}
       />
     </ScreenLayout>
   );
diff --git a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
index c18dcb76..d5f6dcde 100644
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
+++ b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
@@ -762,7 +762,7 @@ export const TasksActive: Story = {
           },
         ]}
         onRefresh={fn()}
-        onClearHistory={fn()}
+        onClearCompleted={fn()}
       />
     ),
   },
diff --git a/clients/web/src/main.tsx b/clients/web/src/main.tsx
index 29a1d867..63c99077 100644
--- a/clients/web/src/main.tsx
+++ b/clients/web/src/main.tsx
@@ -1,6 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { MantineProvider } from "@mantine/core";
+import { MantineProvider, type CSSVariablesResolver } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
@@ -8,9 +8,21 @@ import "./App.css";
 import { theme } from "./theme/theme";
 import App from "./App";
 
+const resolver: CSSVariablesResolver = () => ({
+  variables: {},
+  light: {},
+  dark: {
+    "--mantine-color-body": "var(--mantine-color-blue-9)",
+  },
+});
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <MantineProvider theme={theme} defaultColorScheme="auto">
+    <MantineProvider
+      theme={theme}
+      defaultColorScheme="auto"
+      cssVariablesResolver={resolver}
+    >
       <Notifications position="top-right" />
       <App />
     </MantineProvider>
diff --git a/clients/web/src/theme/Input.ts b/clients/web/src/theme/Input.ts
new file mode 100644
index 00000000..9b8e5f04
--- /dev/null
+++ b/clients/web/src/theme/Input.ts
@@ -0,0 +1,9 @@
+import { Input } from "@mantine/core";
+
+export const ThemeInput = Input.extend({
+  styles: () => ({
+    input: {
+      backgroundColor: "var(--inspector-input-background)",
+    },
+  }),
+});
diff --git a/clients/web/src/theme/index.ts b/clients/web/src/theme/index.ts
index 91835be9..42b0cd1e 100644
--- a/clients/web/src/theme/index.ts
+++ b/clients/web/src/theme/index.ts
@@ -6,6 +6,7 @@ export { ThemeButton } from "./Button";
 export { ThemeCard } from "./Card";
 export { ThemeCode } from "./Code";
 export { ThemeFlex } from "./Flex";
+export { ThemeInput } from "./Input";
 export { ThemePaper } from "./Paper";
 export { ThemeSelect } from "./Select";
 export { ThemeSwitch } from "./Switch";
diff --git a/clients/web/src/theme/theme.ts b/clients/web/src/theme/theme.ts
index d79a8856..bacebf3c 100644
--- a/clients/web/src/theme/theme.ts
+++ b/clients/web/src/theme/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme } from "@mantine/core";
+import { createTheme, type MantineColorsTuple } from "@mantine/core";
 import {
   ThemeActionIcon,
   ThemeAlert,
@@ -8,6 +8,7 @@ import {
   ThemeCard,
   ThemeCode,
   ThemeFlex,
+  ThemeInput,
   ThemePaper,
   ThemeSelect,
   ThemeSwitch,
@@ -15,10 +16,26 @@ import {
   ThemeUnstyledButton,
 } from "./index";
 
+const inspector: MantineColorsTuple = [
+  "#f0f3fa",
+  "#dee3ee",
+  "#b9c5de",
+  "#91a5cf",
+  "#7089c3",
+  "#5b78bb",
+  "#4f70b9",
+  "#405fa3",
+  "#375493",
+  "#121e36",
+];
+
 export const theme = createTheme({
+  colors: {
+    inspector,
+  },
   /* ── Color ──────────────────────────────────────────────── */
-  primaryColor: "dark",
-  primaryShade: { light: 7, dark: 4 },
+  primaryColor: "inspector",
+  primaryShade: { light: 7, dark: 8 },
   autoContrast: true,
 
   /* ── Shape ──────────────────────────────────────────────── */
@@ -43,6 +60,7 @@ export const theme = createTheme({
     Card: ThemeCard,
     Code: ThemeCode,
     Flex: ThemeFlex,
+    Input: ThemeInput,
     Paper: ThemePaper,
     Select: ThemeSelect,
     Switch: ThemeSwitch,

From 3e2e44ccfcb572faaf43c3cd262c8616d87a3745 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 18 Apr 2026 11:48:21 -0400
Subject: [PATCH 4/7] Address PR #1211 code review feedback

1. ServerCard: import ConnectionStatus and ServerType from core instead
   of inline union types
2. ResourcePreviewPanel: move ContentBlock import to top of file
3. ContentViewer: remove dead annotation mimeType check in isJsonText
4. ProgressDisplay: use Pick to exclude progressToken from params type;
   remove fake tokens from callers and stories
5. AnnotationBadge: restore human-readable priority labels (high/medium/low)
   and remove unused --inspector-annotation-* CSS vars from App.css
6. MessageBubble: add fallback rendering for resource, resource_link,
   tool_use, and tool_result content block types
7. TaskControls: import TaskStatus directly from SDK instead of via TaskCard

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 clients/web/src/App.css                              |  9 ---------
 .../elements/AnnotationBadge/AnnotationBadge.tsx     |  8 ++++++--
 .../elements/ContentViewer/ContentViewer.tsx         | 10 ----------
 .../elements/MessageBubble/MessageBubble.tsx         | 12 ++++++++++++
 .../ProgressDisplay/ProgressDisplay.stories.tsx      |  6 +-----
 .../elements/ProgressDisplay/ProgressDisplay.tsx     |  5 ++++-
 .../ResourcePreviewPanel/ResourcePreviewPanel.tsx    |  3 +--
 .../src/components/groups/ServerCard/ServerCard.tsx  |  8 ++++++--
 .../web/src/components/groups/TaskCard/TaskCard.tsx  |  1 -
 .../components/groups/TaskControls/TaskControls.tsx  |  2 +-
 .../groups/ToolDetailPanel/ToolDetailPanel.tsx       |  1 -
 11 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/clients/web/src/App.css b/clients/web/src/App.css
index 5a0a75f2..47b315bd 100644
--- a/clients/web/src/App.css
+++ b/clients/web/src/App.css
@@ -49,15 +49,6 @@
   --inspector-log-alert: var(--mantine-color-red-9);
   --inspector-log-emergency: var(--mantine-color-red-9);
 
-  /* ── Annotations ───────────────────────────────────────── */
-  --inspector-annotation-destructive: var(--mantine-color-red-6);
-  --inspector-annotation-long-run: var(--mantine-color-yellow-6);
-  --inspector-annotation-read-only: var(--mantine-color-dark-6);
-  --inspector-annotation-audience: var(--mantine-color-gray-6);
-  --inspector-annotation-priority-high: var(--mantine-color-orange-6);
-  --inspector-annotation-priority-medium: var(--mantine-color-yellow-6);
-  --inspector-annotation-priority-low: var(--mantine-color-green-6);
-
   /* ── Task status ───────────────────────────────────────── */
   --inspector-task-waiting: var(--mantine-color-gray-5);
   --inspector-task-running: var(--mantine-color-blue-6);
diff --git a/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx b/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx
index babee2f4..9f1f08f9 100644
--- a/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx
+++ b/clients/web/src/components/elements/AnnotationBadge/AnnotationBadge.tsx
@@ -32,8 +32,12 @@ function formatLabel(
   switch (facet) {
     case "audience":
       return `audience: ${(value as Role[]).join(", ")}`;
-    case "priority":
-      return `priority: ${value}`;
+    case "priority": {
+      const n = value as number;
+      if (n >= 0.7) return "priority: high";
+      if (n >= 0.4) return "priority: medium";
+      return "priority: low";
+    }
     case "readOnlyHint":
       return "read-only";
     case "destructiveHint":
diff --git a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
index 74d32716..a5710e32 100644
--- a/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
+++ b/clients/web/src/components/elements/ContentViewer/ContentViewer.tsx
@@ -17,16 +17,6 @@ function formatJson(content: string): string {
 
 function isJsonText(block: ContentBlock): boolean {
   if (block.type !== "text") return false;
-  if (
-    "annotations" in block &&
-    block.annotations &&
-    "mimeType" in block.annotations
-  ) {
-    return (
-      (block.annotations as Record<string, unknown>).mimeType ===
-      "application/json"
-    );
-  }
   const trimmed = block.text.trimStart();
   return trimmed.startsWith("{") || trimmed.startsWith("[");
 }
diff --git a/clients/web/src/components/elements/MessageBubble/MessageBubble.tsx b/clients/web/src/components/elements/MessageBubble/MessageBubble.tsx
index d1ba15ec..68465ed6 100644
--- a/clients/web/src/components/elements/MessageBubble/MessageBubble.tsx
+++ b/clients/web/src/components/elements/MessageBubble/MessageBubble.tsx
@@ -51,6 +51,18 @@ function extractContent(
         audioUri = buildDataUri(block.mimeType, block.data);
         audioMime = block.mimeType;
         break;
+      case "resource":
+        text +=
+          "text" in block.resource
+            ? block.resource.text
+            : `[resource: ${block.resource.uri}]`;
+        break;
+      case "resource_link":
+        text += `[resource: ${block.uri}]`;
+        break;
+      default:
+        text += `[${block.type}]`;
+        break;
     }
   }
 
diff --git a/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.stories.tsx b/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.stories.tsx
index 23bab30c..914b866b 100644
--- a/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.stories.tsx
+++ b/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.stories.tsx
@@ -11,14 +11,13 @@ type Story = StoryObj<typeof ProgressDisplay>;
 
 export const ZeroPercent: Story = {
   args: {
-    params: { progressToken: "t1", progress: 0, total: 100 },
+    params: { progress: 0, total: 100 },
   },
 };
 
 export const HalfComplete: Story = {
   args: {
     params: {
-      progressToken: "t2",
       progress: 50,
       total: 100,
       message: "Processing...",
@@ -29,7 +28,6 @@ export const HalfComplete: Story = {
 export const NearComplete: Story = {
   args: {
     params: {
-      progressToken: "t3",
       progress: 95,
       total: 100,
       message: "Almost done",
@@ -41,7 +39,6 @@ export const NearComplete: Story = {
 export const Complete: Story = {
   args: {
     params: {
-      progressToken: "t4",
       progress: 100,
       total: 100,
       message: "Done",
@@ -53,7 +50,6 @@ export const Complete: Story = {
 export const WithoutTotal: Story = {
   args: {
     params: {
-      progressToken: "t5",
       progress: 42,
       message: "Working...",
     },
diff --git a/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.tsx b/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.tsx
index 7968aa3b..1e03791d 100644
--- a/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.tsx
+++ b/clients/web/src/components/elements/ProgressDisplay/ProgressDisplay.tsx
@@ -2,7 +2,10 @@ import { Group, Progress, Stack, Text } from "@mantine/core";
 import type { ProgressNotification } from "@modelcontextprotocol/sdk/types.js";
 
 export interface ProgressDisplayProps {
-  params: ProgressNotification["params"];
+  params: Pick<
+    ProgressNotification["params"],
+    "progress" | "total" | "message"
+  >;
   elapsed?: string;
 }
 
diff --git a/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx b/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx
index 9e1cf873..7ee3c638 100644
--- a/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx
+++ b/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx
@@ -1,4 +1,5 @@
 import { Button, Flex, Group, Stack, Text, Title } from "@mantine/core";
+import type { ContentBlock } from "@modelcontextprotocol/sdk/types.js";
 import { AnnotationBadge } from "../../elements/AnnotationBadge/AnnotationBadge";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
 import { CopyButton } from "../../elements/CopyButton/CopyButton";
@@ -16,8 +17,6 @@ export interface ResourcePreviewPanelProps {
   onUnsubscribe: () => void;
 }
 
-import type { ContentBlock } from "@modelcontextprotocol/sdk/types.js";
-
 function toContentBlock(content: string, mimeType: string): ContentBlock {
   if (mimeType.startsWith("image/")) {
     return { type: "image", data: content, mimeType };
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index dc4f8c42..20db7895 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@@ -1,5 +1,9 @@
 import { useEffect } from "react";
 import { Badge, Button, Card, Group, Menu, Stack, Text } from "@mantine/core";
+import type {
+  ConnectionStatus,
+  ServerType,
+} from "@inspector/core/mcp/types.js";
 import { ServerStatusIndicator } from "../../elements/ServerStatusIndicator/ServerStatusIndicator";
 import { TransportBadge } from "../../elements/TransportBadge/TransportBadge";
 import { ConnectionToggle } from "../../elements/ConnectionToggle/ConnectionToggle";
@@ -9,10 +13,10 @@ import { InlineError } from "../../elements/InlineError/InlineError";
 export interface ServerCardProps {
   name: string;
   version?: string;
-  transport: "stdio" | "sse" | "streamable-http";
+  transport: ServerType;
   connectionMode: string;
   command: string;
-  status: "connected" | "connecting" | "disconnected" | "error";
+  status: ConnectionStatus;
   retryCount?: number;
   error?: { message: string; details?: string };
   canTestClientFeatures: boolean;
diff --git a/clients/web/src/components/groups/TaskCard/TaskCard.tsx b/clients/web/src/components/groups/TaskCard/TaskCard.tsx
index 736818a6..1ff14d07 100644
--- a/clients/web/src/components/groups/TaskCard/TaskCard.tsx
+++ b/clients/web/src/components/groups/TaskCard/TaskCard.tsx
@@ -197,7 +197,6 @@ export function TaskCard(props: TaskCardProps) {
         {progress !== undefined && isActive && (
           <ProgressDisplay
             params={{
-              progressToken: taskId,
               progress,
               message: progressDescription,
             }}
diff --git a/clients/web/src/components/groups/TaskControls/TaskControls.tsx b/clients/web/src/components/groups/TaskControls/TaskControls.tsx
index 9bff8aa4..720491f6 100644
--- a/clients/web/src/components/groups/TaskControls/TaskControls.tsx
+++ b/clients/web/src/components/groups/TaskControls/TaskControls.tsx
@@ -1,5 +1,5 @@
 import { Button, Group, Select, Stack, TextInput, Title } from "@mantine/core";
-import type { TaskStatus } from "../TaskCard/TaskCard";
+import type { TaskStatus } from "@modelcontextprotocol/sdk/types.js";
 
 const STATUS_OPTIONS: TaskStatus[] = [
   "working",
diff --git a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
index 7c370a72..2673d960 100644
--- a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
+++ b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
@@ -116,7 +116,6 @@ export function ToolDetailPanel({
       {progress && (
         <ProgressDisplay
           params={{
-            progressToken: name,
             progress: progress.percent,
             message: progress.description,
           }}

From ec0945d8b9389ade14dc074a0055d904c75df77b Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 18 Apr 2026 12:12:41 -0400
Subject: [PATCH 5/7] Fix HistoryControls Select clear button requiring double
 click

Same fix as TaskControls: pass null instead of undefined to Mantine
Select value prop so the clear button disappears on first click.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/groups/HistoryControls/HistoryControls.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx b/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
index dacb874b..086e6526 100644
--- a/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
+++ b/clients/web/src/components/groups/HistoryControls/HistoryControls.tsx
@@ -37,7 +37,7 @@ export function HistoryControls({
       <Select
         placeholder="All methods"
         data={METHOD_OPTIONS}
-        value={methodFilter}
+        value={methodFilter ?? null}
         onChange={(value) => onMethodFilterChange(value ?? "")}
         clearable
       />

From 5a17c03ea0bf86f9ce4f1d01092f7039ec74f196 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 18 Apr 2026 12:17:31 -0400
Subject: [PATCH 6/7] Update style for menus

---
 clients/web/src/App.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/clients/web/src/App.css b/clients/web/src/App.css
index 47b315bd..167f2d70 100644
--- a/clients/web/src/App.css
+++ b/clients/web/src/App.css
@@ -120,7 +120,14 @@
   background-color: var(--mantine-primary-color-light);
 }
 
-[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
+
+/* ── Menu dropdown / option (dark mode) ──────────────────────── */
+
+[data-mantine-color-scheme="dark"] .mantine-Menu-dropdown {
+  background-color: var(--mantine-color-gray-8);
+}
+
+[data-mantine-color-scheme="dark"] .mantine-Menu-item:hover {
   background-color: var(--mantine-primary-color-light);
 }
 

From 12de9e0a5aafcf595dfd1b87c3198da3aaa189c4 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Sat, 18 Apr 2026 12:32:46 -0400
Subject: [PATCH 7/7] Update style for menus

---
 clients/web/src/App.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/clients/web/src/App.css b/clients/web/src/App.css
index 167f2d70..0c064dd1 100644
--- a/clients/web/src/App.css
+++ b/clients/web/src/App.css
@@ -103,7 +103,7 @@
 /* ── List item hover ────────────────────────────────────── */
 
 .list-item:hover {
-  background-color: var(--mantine-color-gray-1);
+  background-color: var(--mantine-primary-color-light);
 }
 
 [data-mantine-color-scheme="dark"] .list-item:hover {
@@ -120,7 +120,6 @@
   background-color: var(--mantine-primary-color-light);
 }
 
-
 /* ── Menu dropdown / option (dark mode) ──────────────────────── */
 
 [data-mantine-color-scheme="dark"] .mantine-Menu-dropdown {
@@ -139,8 +138,8 @@
 
 /* ── Accordion button hover ─────────────────────────────── */
 
-[data-mantine-color-scheme="dark"] .mantine-Accordion-control:hover {
-  background-color: var(--mantine-primary-color-filled-hover);
+.mantine-Accordion-control:hover {
+  background-color: var(--mantine-primary-color-light-hover);
 }
 
 /* ── Grid alignment ─────────────────────────────────────── */