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>

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",
+      },
+    },
   },
 };

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>