Phase 1: Refactor all 16 element component interfaces to use MCP SDK types

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>
2026-04-16 22:25:23 -04:00 · 2026-04-16 22:25:23 -04:00 · 2d4fca4fa6
commit 2d4fca4fa6
parent f9a1aa4e3c
22 changed files with 905 additions and 648 deletions
--- 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>
--- 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 },
  };
 });

--- 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>
--- 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?",
+        },
      },
    ],
  },
--- 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>
--- 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>
--- 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}>
--- 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",
--- 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 && (
--- 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",
--- 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}
              />
            )}
--- 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",
--- 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}
            />
--- 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,
--- 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>
--- 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",
  },
 };
--- 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",
--- 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",
--- 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(
--- 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,
+          }}
        />
      )}

--- a/Show more
+++ b/Show more