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

@@ -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);

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":

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("[");
 }

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;
     }
   }
 

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...",
     },

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;
 }
 

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 };

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;

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,
             }}

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",

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,
           }}