Merge pull request #1214 from modelcontextprotocol/v2/phase-2-resources

Phase 2: Refactor Resources cluster to MCP SDK types
2026-04-18 19:34:15 -04:00 · 2026-04-18 19:34:15 -04:00 · 91e5a1257a
commit 91e5a1257a
parent 61230d533c 995c06948c
13 changed files with 485 additions and 619 deletions
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
@ -1,4 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type {
+  Resource,
+  ResourceTemplate,
+} from "@modelcontextprotocol/sdk/types.js";
+import type { InspectorResourceSubscription } from "../../../../../../core/mcp/types.js";
 import { fn } from "storybook/test";
 import { ResourceControls } from "./ResourceControls";

@ -17,40 +22,44 @@ const meta: Meta<typeof ResourceControls> = {
 export default meta;
 type Story = StoryObj<typeof ResourceControls>;

+const sampleResources: Resource[] = [
+  {
+    name: "config.json",
+    uri: "file:///config.json",
+    annotations: { audience: ["user"], priority: 0.8 },
+  },
+  {
+    name: "README.md",
+    uri: "file:///README.md",
+  },
+  {
+    name: "schema.sql",
+    uri: "file:///schema.sql",
+  },
+];
+
+const sampleTemplates: ResourceTemplate[] = [
+  {
+    name: "User Profile",
+    uriTemplate: "file:///users/{userId}/profile",
+  },
+];
+
+const sampleSubscriptions: InspectorResourceSubscription[] = [
+  {
+    resource: {
+      name: "config.json",
+      uri: "file:///config.json",
+    },
+    lastUpdated: new Date("2026-03-17T10:30:00Z"),
+  },
+];
+
 export const Default: Story = {
  args: {
-    resources: [
-      {
-        name: "config.json",
-        uri: "file:///config.json",
-        annotations: { audience: "developer", priority: 0.8 },
-        selected: false,
-      },
-      {
-        name: "README.md",
-        uri: "file:///README.md",
-        selected: false,
-      },
-      {
-        name: "schema.sql",
-        uri: "file:///schema.sql",
-        selected: false,
-      },
-    ],
-    templates: [
-      {
-        name: "User Profile",
-        uriTemplate: "file:///users/{userId}/profile",
-        selected: false,
-      },
-    ],
-    subscriptions: [
-      {
-        name: "config.json",
-        uri: "file:///config.json",
-        lastUpdated: "2026-03-17T10:30:00Z",
-      },
-    ],
+    resources: sampleResources,
+    templates: sampleTemplates,
+    subscriptions: sampleSubscriptions,
  },
 };

--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
@ -7,20 +7,22 @@ import {
  TextInput,
  Title,
 } from "@mantine/core";
+import type {
+  Resource,
+  ResourceTemplate,
+} from "@modelcontextprotocol/sdk/types.js";
+import type { InspectorResourceSubscription } from "../../../../../../core/mcp/types.js";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
 import { ResourceListItem } from "../ResourceListItem/ResourceListItem";
 import { ResourceSubscribedItem } from "../ResourceSubscribedItem/ResourceSubscribedItem";
-import type {
-  ResourceItem,
-  TemplateListItem,
-  SubscriptionItem,
-} from "../../screens/ResourcesScreen/ResourcesScreen";

 export interface ResourceControlsProps {
-  resources: ResourceItem[];
-  templates: TemplateListItem[];
-  subscriptions: SubscriptionItem[];
+  resources: Resource[];
+  templates: ResourceTemplate[];
+  subscriptions: InspectorResourceSubscription[];
+  selectedUri?: string;
+  selectedTemplateUri?: string;
  listChanged: boolean;
  onRefreshList: () => void;
  onSelectUri: (uri: string) => void;
@ -28,10 +30,6 @@ export interface ResourceControlsProps {
  onUnsubscribeResource: (uri: string) => void;
 }

-// Available height for each accordion panel's scroll area.
-// Subtracts: AppShell extra padding (md*2), screen padding (xl*2, already in calc),
-// card padding (2*lg=40), title+search+gaps (~84), 3 accordion controls (~144),
-// and per-panel accordion padding (~20px each).
 function panelMaxHeight(openCount: number): string {
  const n = Math.max(openCount, 1);
  const fixedChrome = 300;
@ -43,14 +41,12 @@ function formatSectionCount(label: string, count: number): string {
  return `${label} (${count})`;
 }

-function templateDisplayName(item: TemplateListItem): string {
-  return item.title ?? item.name;
-}
-
 export function ResourceControls({
  resources,
  templates,
  subscriptions,
+  selectedUri,
+  selectedTemplateUri,
  listChanged,
  onRefreshList,
  onSelectUri,
@ -62,17 +58,20 @@ export function ResourceControls({
  const filteredResources = resources.filter(
    (r) =>
      r.name.toLowerCase().includes(query) ||
+      (r.title?.toLowerCase().includes(query) ?? false) ||
      r.uri.toLowerCase().includes(query),
  );
  const filteredTemplates = templates.filter(
    (t) =>
-      templateDisplayName(t).toLowerCase().includes(query) ||
+      t.name.toLowerCase().includes(query) ||
+      (t.title?.toLowerCase().includes(query) ?? false) ||
      t.uriTemplate.toLowerCase().includes(query),
  );
  const filteredSubscriptions = subscriptions.filter(
    (s) =>
-      s.name.toLowerCase().includes(query) ||
-      s.uri.toLowerCase().includes(query),
+      s.resource.name.toLowerCase().includes(query) ||
+      (s.resource.title?.toLowerCase().includes(query) ?? false) ||
+      s.resource.uri.toLowerCase().includes(query),
  );

  const defaultOpen = [
@ -115,11 +114,12 @@ export function ResourceControls({
                {filteredResources.map((resource) => (
                  <ResourceListItem
                    key={resource.uri}
-                    name={resource.name}
-                    uri={resource.uri}
-                    annotations={resource.annotations}
-                    selected={resource.selected}
-                    onClick={() => onSelectUri(resource.uri)}
+                    resource={resource}
+                    selected={resource.uri === selectedUri}
+                    onClick={() => {
+                      if (resource.uri !== selectedUri)
+                        onSelectUri(resource.uri);
+                    }}
                  />
                ))}
              </Stack>
@ -137,10 +137,12 @@ export function ResourceControls({
                {filteredTemplates.map((template) => (
                  <ResourceListItem
                    key={template.uriTemplate}
-                    name={templateDisplayName(template)}
-                    uri={template.uriTemplate}
-                    selected={template.selected}
-                    onClick={() => onSelectTemplate(template.uriTemplate)}
+                    resource={template}
+                    selected={template.uriTemplate === selectedTemplateUri}
+                    onClick={() => {
+                      if (template.uriTemplate !== selectedTemplateUri)
+                        onSelectTemplate(template.uriTemplate);
+                    }}
                  />
                ))}
              </Stack>
@ -157,10 +159,11 @@ export function ResourceControls({
              <Stack gap="xs">
                {filteredSubscriptions.map((sub) => (
                  <ResourceSubscribedItem
-                    key={sub.name}
-                    name={sub.name}
-                    lastUpdated={sub.lastUpdated}
-                    onUnsubscribe={() => onUnsubscribeResource(sub.uri)}
+                    key={sub.resource.uri}
+                    subscription={sub}
+                    onUnsubscribe={() =>
+                      onUnsubscribeResource(sub.resource.uri)
+                    }
                  />
                ))}
              </Stack>
--- a/clients/web/src/components/groups/ResourceListItem/ResourceListItem.stories.tsx
+++ b/clients/web/src/components/groups/ResourceListItem/ResourceListItem.stories.tsx
@ -15,16 +15,41 @@ type Story = StoryObj<typeof ResourceListItem>;

 export const Default: Story = {
  args: {
-    name: "config.json",
-    uri: "file:///config.json",
+    resource: {
+      name: "config.json",
+      uri: "file:///config.json",
+    },
    selected: false,
  },
 };

 export const Selected: Story = {
  args: {
-    name: "config.json",
-    uri: "file:///config.json",
+    resource: {
+      name: "config.json",
+      uri: "file:///config.json",
+    },
    selected: true,
  },
 };
+
+export const WithTitle: Story = {
+  args: {
+    resource: {
+      name: "config.json",
+      title: "Configuration File",
+      uri: "file:///config.json",
+    },
+    selected: false,
+  },
+};
+
+export const Template: Story = {
+  args: {
+    resource: {
+      name: "User Profile",
+      uriTemplate: "file:///users/{userId}/profile",
+    },
+    selected: false,
+  },
+};
--- a/clients/web/src/components/groups/ResourceListItem/ResourceListItem.tsx
+++ b/clients/web/src/components/groups/ResourceListItem/ResourceListItem.tsx
@ -1,20 +1,17 @@
 import { Text, UnstyledButton } from "@mantine/core";
-
-export interface ResourceAnnotations {
-  audience?: string;
-  priority?: number;
-}
+import type {
+  Resource,
+  ResourceTemplate,
+} from "@modelcontextprotocol/sdk/types.js";

 export interface ResourceListItemProps {
-  name: string;
-  uri: string;
-  annotations?: ResourceAnnotations;
+  resource: Resource | ResourceTemplate;
  selected: boolean;
  onClick: () => void;
 }

 export function ResourceListItem({
-  name,
+  resource,
  selected,
  onClick,
 }: ResourceListItemProps) {
@ -26,7 +23,7 @@ export function ResourceListItem({
      bg={selected ? "var(--mantine-primary-color-light)" : undefined}
      onClick={onClick}
    >
-      <Text fw={500}>{name}</Text>
+      <Text fw={500}>{resource.title ?? resource.name}</Text>
    </UnstyledButton>
  );
 }
--- a/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.stories.tsx
+++ b/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.stories.tsx
@ -17,57 +17,96 @@ type Story = StoryObj<typeof ResourcePreviewPanel>;

 export const JsonResource: Story = {
  args: {
-    uri: "file:///config.json",
-    mimeType: "application/json",
-    content: JSON.stringify(
-      { name: "mcp-inspector", version: "2.0.0", debug: true },
-      null,
-      2,
-    ),
+    resource: {
+      name: "config.json",
+      uri: "file:///config.json",
+    },
+    contents: [
+      {
+        uri: "file:///config.json",
+        mimeType: "application/json",
+        text: JSON.stringify(
+          { name: "mcp-inspector", version: "2.0.0", debug: true },
+          null,
+          2,
+        ),
+      },
+    ],
    isSubscribed: false,
-    lastUpdated: "2026-03-17T10:30:00Z",
+    lastUpdated: new Date("2026-03-17T10:30:00Z"),
  },
 };

 export const TextResource: Story = {
  args: {
-    uri: "file:///readme.txt",
-    mimeType: "text/plain",
-    content:
-      "This is a plain text resource with some example content.\nLine two of the content.",
+    resource: {
+      name: "readme.txt",
+      uri: "file:///readme.txt",
+    },
+    contents: [
+      {
+        uri: "file:///readme.txt",
+        mimeType: "text/plain",
+        text: "This is a plain text resource with some example content.\nLine two of the content.",
+      },
+    ],
    isSubscribed: false,
  },
 };

 export const Subscribed: Story = {
  args: {
-    uri: "file:///data.json",
-    mimeType: "application/json",
-    content: JSON.stringify({ status: "active" }, null, 2),
+    resource: {
+      name: "data.json",
+      uri: "file:///data.json",
+    },
+    contents: [
+      {
+        uri: "file:///data.json",
+        mimeType: "application/json",
+        text: JSON.stringify({ status: "active" }, null, 2),
+      },
+    ],
    isSubscribed: true,
-    lastUpdated: "2026-03-17T12:00:00Z",
+    lastUpdated: new Date("2026-03-17T12:00:00Z"),
  },
 };

 export const NotSubscribed: Story = {
  args: {
-    uri: "file:///data.json",
-    mimeType: "application/json",
-    content: JSON.stringify({ status: "active" }, null, 2),
+    resource: {
+      name: "data.json",
+      uri: "file:///data.json",
+    },
+    contents: [
+      {
+        uri: "file:///data.json",
+        mimeType: "application/json",
+        text: JSON.stringify({ status: "active" }, null, 2),
+      },
+    ],
    isSubscribed: false,
  },
 };

 export const WithAnnotations: Story = {
  args: {
-    uri: "file:///settings.json",
-    mimeType: "application/json",
-    content: JSON.stringify({ theme: "dark", lang: "en" }, null, 2),
-    isSubscribed: false,
-    annotations: {
-      audience: "application",
-      priority: 0.8,
+    resource: {
+      name: "settings.json",
+      uri: "file:///settings.json",
+      annotations: {
+        audience: ["user"],
+        priority: 0.8,
+      },
    },
-    lastUpdated: "2026-03-17T09:00:00Z",
+    contents: [
+      {
+        uri: "file:///settings.json",
+        mimeType: "application/json",
+        text: JSON.stringify({ theme: "dark", lang: "en" }, null, 2),
+      },
+    ],
+    isSubscribed: false,
+    lastUpdated: new Date("2026-03-17T09:00:00Z"),
  },
 };
--- a/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx
+++ b/clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx
@ -1,31 +1,46 @@
 import { Button, Flex, Group, Stack, Text, Title } from "@mantine/core";
-import type { ContentBlock } from "@modelcontextprotocol/sdk/types.js";
+import type {
+  BlobResourceContents,
+  ContentBlock,
+  Resource,
+  TextResourceContents,
+} from "@modelcontextprotocol/sdk/types.js";
 import { AnnotationBadge } from "../../elements/AnnotationBadge/AnnotationBadge";
 import { ContentViewer } from "../../elements/ContentViewer/ContentViewer";
 import { CopyButton } from "../../elements/CopyButton/CopyButton";
 import { SubscribeButton } from "../../elements/SubscribeButton/SubscribeButton";

 export interface ResourcePreviewPanelProps {
-  uri: string;
-  mimeType: string;
-  annotations?: { audience?: string; priority?: number };
-  content: string;
-  lastUpdated?: string;
+  resource: Resource;
+  contents: (TextResourceContents | BlobResourceContents)[];
+  lastUpdated?: Date;
  isSubscribed: boolean;
  onRefresh: () => void;
  onSubscribe: () => void;
  onUnsubscribe: () => void;
 }

-function toContentBlock(content: string, mimeType: string): ContentBlock {
-  if (mimeType.startsWith("image/")) {
-    return { type: "image", data: content, mimeType };
+function toContentBlock(
+  item: TextResourceContents | BlobResourceContents,
+): ContentBlock {
+  if ("text" in item) {
+    return { type: "text", text: item.text };
  }
-  return { type: "text", text: content };
+  const mimeType = item.mimeType ?? "application/octet-stream";
+  if (mimeType.startsWith("image/")) {
+    return { type: "image", data: item.blob, mimeType };
+  }
+  if (mimeType.startsWith("audio/")) {
+    return { type: "audio", data: item.blob, mimeType };
+  }
+  return {
+    type: "text",
+    text: `[Binary content (${mimeType}) — preview not supported]`,
+  };
 }

-function formatLastUpdated(lastUpdated: string): string {
-  return `Last updated: ${lastUpdated}`;
+function formatLastUpdated(date: Date): string {
+  return `Last updated: ${date.toLocaleString()}`;
 }

 const HeaderRow = Group.withProps({
@ -74,16 +89,18 @@ const ActionGroup = Group.withProps({
 const Spacer = Flex.withProps({});

 export function ResourcePreviewPanel({
-  uri,
-  mimeType,
-  annotations,
-  content,
+  resource,
+  contents,
  lastUpdated,
  isSubscribed,
  onRefresh,
  onSubscribe,
  onUnsubscribe,
 }: ResourcePreviewPanelProps) {
+  const { uri, annotations } = resource;
+  const mimeType =
+    contents[0]?.mimeType ?? resource.mimeType ?? "application/octet-stream";
+
  return (
    <Stack gap="md">
      <HeaderRow>
@ -93,24 +110,21 @@ export function ResourcePreviewPanel({
          <CopyButton value={uri} />
        </UriGroup>
      </HeaderRow>
-      <ContentViewer block={toContentBlock(content, mimeType)} copyable />
+      {contents.map((item, index) => (
+        <ContentViewer key={index} block={toContentBlock(item)} copyable />
+      ))}
      <MetaRow>
        {lastUpdated ? (
          <TimestampText>{formatLastUpdated(lastUpdated)}</TimestampText>
        ) : (
          <Spacer />
        )}
-        <MimeText>{mimeType}</MimeText>
+        {contents.length <= 1 && <MimeText>{mimeType}</MimeText>}
      </MetaRow>
      <FooterRow>
        <AnnotationGroup>
          {annotations?.audience && (
-            <AnnotationBadge
-              facet="audience"
-              value={
-                annotations.audience.split(", ") as ("user" | "assistant")[]
-              }
-            />
+            <AnnotationBadge facet="audience" value={annotations.audience} />
          )}
          {annotations?.priority !== undefined && (
            <AnnotationBadge facet="priority" value={annotations.priority} />
--- a/clients/web/src/components/groups/ResourceSubscribedItem/ResourceSubscribedItem.stories.tsx
+++ b/clients/web/src/components/groups/ResourceSubscribedItem/ResourceSubscribedItem.stories.tsx
@ -15,13 +15,23 @@ type Story = StoryObj<typeof ResourceSubscribedItem>;

 export const WithTimestamp: Story = {
  args: {
-    name: "config.json",
-    lastUpdated: "2026-03-17T10:30:00Z",
+    subscription: {
+      resource: {
+        name: "config.json",
+        uri: "file:///config.json",
+      },
+      lastUpdated: new Date("2026-03-17T10:30:00Z"),
+    },
  },
 };

 export const WithoutTimestamp: Story = {
  args: {
-    name: "schema.sql",
+    subscription: {
+      resource: {
+        name: "schema.sql",
+        uri: "file:///schema.sql",
+      },
+    },
  },
 };
--- a/clients/web/src/components/groups/ResourceSubscribedItem/ResourceSubscribedItem.tsx
+++ b/clients/web/src/components/groups/ResourceSubscribedItem/ResourceSubscribedItem.tsx
@ -1,8 +1,8 @@
 import { Button, Group, Stack, Text } from "@mantine/core";
+import type { InspectorResourceSubscription } from "../../../../../../core/mcp/types.js";

 export interface ResourceSubscribedItemProps {
-  name: string;
-  lastUpdated?: string;
+  subscription: InspectorResourceSubscription;
  onUnsubscribe: () => void;
 }

@ -26,16 +26,22 @@ const ItemRow = Group.withProps({
  wrap: "nowrap",
 });

+function formatLastUpdated(date: Date): string {
+  return date.toLocaleString();
+}
+
 export function ResourceSubscribedItem({
-  name,
-  lastUpdated,
+  subscription,
  onUnsubscribe,
 }: ResourceSubscribedItemProps) {
+  const { resource, lastUpdated } = subscription;
  return (
    <ItemRow>
      <Stack gap={2}>
-        <NameText>{name}</NameText>
-        {lastUpdated && <TimestampText>{lastUpdated}</TimestampText>}
+        <NameText>{resource.title ?? resource.name}</NameText>
+        {lastUpdated && (
+          <TimestampText>{formatLastUpdated(lastUpdated)}</TimestampText>
+        )}
      </Stack>
      <SubtleButton onClick={onUnsubscribe}>Unsubscribe</SubtleButton>
    </ItemRow>
--- a/clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.stories.tsx
+++ b/clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.stories.tsx
@ -15,34 +15,42 @@ type Story = StoryObj<typeof ResourceTemplatePanel>;

 export const SingleVariable: Story = {
  args: {
-    name: "User Profile",
-    uriTemplate: "file:///users/{userId}/profile",
-    description: "Fetch a user profile by their unique identifier.",
+    template: {
+      name: "User Profile",
+      uriTemplate: "file:///users/{userId}/profile",
+      description: "Fetch a user profile by their unique identifier.",
+    },
  },
 };

 export const MultipleVariables: Story = {
  args: {
-    name: "Table Row",
-    title: "Database Table Row",
-    uriTemplate: "db://tables/{tableName}/rows/{rowId}",
-    description: "Access a specific row in a database table.",
+    template: {
+      name: "Table Row",
+      title: "Database Table Row",
+      uriTemplate: "db://tables/{tableName}/rows/{rowId}",
+      description: "Access a specific row in a database table.",
+    },
  },
 };

 export const WithAnnotations: Story = {
  args: {
-    name: "Dynamic Text Resource",
-    uriTemplate: "resource://dynamic/{resourceId}",
-    description:
-      "Plaintext dynamic resource fabricated from the {resourceId} variable, which must be an integer.",
-    annotations: { audience: "developer", priority: 0.8 },
+    template: {
+      name: "Dynamic Text Resource",
+      uriTemplate: "resource://dynamic/{resourceId}",
+      description:
+        "Plaintext dynamic resource fabricated from the {resourceId} variable, which must be an integer.",
+      annotations: { audience: ["user"], priority: 0.8 },
+    },
  },
 };

 export const NoDescription: Story = {
  args: {
-    name: "Simple Template",
-    uriTemplate: "file:///data/{filename}",
+    template: {
+      name: "Simple Template",
+      uriTemplate: "file:///data/{filename}",
+    },
  },
 };
--- a/clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx
+++ b/clients/web/src/components/groups/ResourceTemplatePanel/ResourceTemplatePanel.tsx
@ -1,14 +1,11 @@
 import { useState, useMemo } from "react";
 import { Button, Group, Stack, Text, TextInput, Title } from "@mantine/core";
+import type { ResourceTemplate } from "@modelcontextprotocol/sdk/types.js";
 import { AnnotationBadge } from "../../elements/AnnotationBadge/AnnotationBadge";
 import { CopyButton } from "../../elements/CopyButton/CopyButton";

 export interface ResourceTemplatePanelProps {
-  name: string;
-  title?: string;
-  uriTemplate: string;
-  description?: string;
-  annotations?: { audience?: string; priority?: number };
+  template: ResourceTemplate;
  onReadResource: (uri: string) => void;
 }

@ -70,13 +67,11 @@ const AnnotationGroup = Group.withProps({
 });

 export function ResourceTemplatePanel({
-  name,
-  title,
-  uriTemplate,
-  description,
-  annotations,
+  template,
  onReadResource,
 }: ResourceTemplatePanelProps) {
+  const { name, title, uriTemplate, description, annotations } = template;
+
  const variableNames = useMemo(
    () => parseVariableNames(uriTemplate),
    [uriTemplate],
@ -96,13 +91,15 @@ export function ResourceTemplatePanel({
    onReadResource(resolveUri(uriTemplate, variables));
  }

+  const preview = previewUri(uriTemplate, variables);
+
  return (
    <Stack gap="md">
      <HeaderRow>
        <Title order={4}>{title ?? name} Template</Title>
        <UriGroup>
-          <UriText>{previewUri(uriTemplate, variables)}</UriText>
-          <CopyButton value={previewUri(uriTemplate, variables)} />
+          <UriText>{preview}</UriText>
+          <CopyButton value={preview} />
        </UriGroup>
      </HeaderRow>
      {description && <DescriptionText>{description}</DescriptionText>}
@ -122,12 +119,7 @@ export function ResourceTemplatePanel({
      <FooterRow>
        <AnnotationGroup>
          {annotations?.audience && (
-            <AnnotationBadge
-              facet="audience"
-              value={
-                annotations.audience.split(", ") as ("user" | "assistant")[]
-              }
-            />
+            <AnnotationBadge facet="audience" value={annotations.audience} />
          )}
          {annotations?.priority !== undefined && (
            <AnnotationBadge facet="priority" value={annotations.priority} />
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import type {
+  Resource,
+  ResourceTemplate,
+} from "@modelcontextprotocol/sdk/types.js";
+import type { InspectorResourceSubscription } from "../../../../../../core/mcp/types.js";
 import { fn } from "storybook/test";
 import { ResourcesScreen } from "./ResourcesScreen";
-import type {
-  ResourceItem,
-  TemplateListItem,
-  SelectedResource,
-  SelectedTemplate,
-} from "./ResourcesScreen";
+import type { ReadResourceState } from "./ResourcesScreen";

 const meta: Meta<typeof ResourcesScreen> = {
  title: "Screens/ResourcesScreen",
@ -28,227 +28,83 @@ const meta: Meta<typeof ResourcesScreen> = {
 export default meta;
 type Story = StoryObj<typeof ResourcesScreen>;

-const sampleResources: ResourceItem[] = [
+const sampleResources: Resource[] = [
  {
    name: "config.json",
    uri: "file:///config.json",
-    annotations: { audience: "developer", priority: 0.8 },
-    selected: false,
-  },
-  {
-    name: "README.md",
-    uri: "file:///README.md",
-    selected: false,
+    annotations: { audience: ["user"], priority: 0.8 },
  },
+  { name: "README.md", uri: "file:///README.md" },
  {
    name: "schema.sql",
    uri: "file:///schema.sql",
    annotations: { priority: 0.5 },
-    selected: false,
  },
  {
    name: "package.json",
    uri: "file:///package.json",
-    annotations: { audience: "developer" },
-    selected: false,
-  },
-  {
-    name: "tsconfig.json",
-    uri: "file:///tsconfig.json",
-    annotations: { audience: "developer", priority: 0.3 },
-    selected: false,
-  },
-  {
-    name: ".env.example",
-    uri: "file:///.env.example",
-    selected: false,
+    annotations: { audience: ["user"] },
  },
+  { name: ".env.example", uri: "file:///.env.example" },
  {
    name: "docker-compose.yml",
    uri: "file:///docker-compose.yml",
    annotations: { priority: 0.6 },
-    selected: false,
-  },
-  {
-    name: "migrations/001_init.sql",
-    uri: "file:///migrations/001_init.sql",
-    annotations: { audience: "developer", priority: 0.4 },
-    selected: false,
-  },
-  {
-    name: "migrations/002_add_users.sql",
-    uri: "file:///migrations/002_add_users.sql",
-    annotations: { audience: "developer", priority: 0.4 },
-    selected: false,
-  },
-  {
-    name: "seeds/users.json",
-    uri: "file:///seeds/users.json",
-    selected: false,
-  },
-  {
-    name: "seeds/products.json",
-    uri: "file:///seeds/products.json",
-    selected: false,
-  },
-  {
-    name: "certs/server.pem",
-    uri: "file:///certs/server.pem",
-    annotations: { priority: 0.9 },
-    selected: false,
-  },
-  {
-    name: "logs/access.log",
-    uri: "file:///logs/access.log",
-    annotations: { audience: "application", priority: 0.2 },
-    selected: false,
-  },
-  {
-    name: "logs/error.log",
-    uri: "file:///logs/error.log",
-    annotations: { audience: "application", priority: 0.7 },
-    selected: false,
-  },
-  {
-    name: "api-spec.yaml",
-    uri: "file:///api-spec.yaml",
-    annotations: { audience: "developer" },
-    selected: false,
-  },
-  {
-    name: "CHANGELOG.md",
-    uri: "file:///CHANGELOG.md",
-    selected: false,
-  },
-  {
-    name: "LICENSE",
-    uri: "file:///LICENSE",
-    selected: false,
-  },
-  {
-    name: ".gitignore",
-    uri: "file:///.gitignore",
-    selected: false,
-  },
-  {
-    name: "Makefile",
-    uri: "file:///Makefile",
-    annotations: { audience: "developer", priority: 0.3 },
-    selected: false,
-  },
-  {
-    name: "fixtures/test-data.json",
-    uri: "file:///fixtures/test-data.json",
-    selected: false,
  },
 ];

-const sampleTemplates: TemplateListItem[] = [
+const sampleTemplates: ResourceTemplate[] = [
  {
    name: "User Profile",
    uriTemplate: "file:///users/{userId}/profile",
-    selected: false,
  },
  {
    name: "Table Row",
    title: "Database Table Row",
    uriTemplate: "db://tables/{tableName}/rows/{rowId}",
-    selected: false,
  },
  {
    name: "Log File",
    title: "Application Log",
    uriTemplate: "file:///logs/{service}/{date}.log",
-    selected: false,
-  },
-  {
-    name: "Migration",
-    uriTemplate: "file:///migrations/{version}_{name}.sql",
-    selected: false,
-  },
-  {
-    name: "Config by Environment",
-    title: "Environment Config",
-    uriTemplate: "file:///config/{environment}.json",
-    selected: false,
-  },
-  {
-    name: "API Endpoint",
-    uriTemplate: "https://api.example.com/{version}/{resource}",
-    selected: false,
-  },
-  {
-    name: "Report",
-    title: "Generated Report",
-    uriTemplate: "reports://{reportType}/{year}/{month}",
-    selected: false,
  },
 ];

-const sampleSubscriptions = [
+const sampleSubscriptions: InspectorResourceSubscription[] = [
  {
-    name: "config.json",
-    uri: "file:///config.json",
-    lastUpdated: "2026-03-17T10:30:00Z",
+    resource: { name: "config.json", uri: "file:///config.json" },
+    lastUpdated: new Date("2026-03-17T10:30:00Z"),
  },
  {
-    name: "schema.sql",
-    uri: "file:///schema.sql",
-    lastUpdated: "2026-03-17T10:28:00Z",
-  },
-  {
-    name: "docker-compose.yml",
-    uri: "file:///docker-compose.yml",
-    lastUpdated: "2026-03-17T09:45:00Z",
-  },
-  {
-    name: "logs/error.log",
-    uri: "file:///logs/error.log",
-    lastUpdated: "2026-03-17T10:31:12Z",
-  },
-  {
-    name: "certs/server.pem",
-    uri: "file:///certs/server.pem",
-  },
-  {
-    name: "api-spec.yaml",
-    uri: "file:///api-spec.yaml",
-    lastUpdated: "2026-03-17T08:15:00Z",
-  },
-  {
-    name: "package.json",
-    uri: "file:///package.json",
-    lastUpdated: "2026-03-17T10:22:00Z",
-  },
-  {
-    name: "seeds/users.json",
-    uri: "file:///seeds/users.json",
+    resource: { name: "schema.sql", uri: "file:///schema.sql" },
+    lastUpdated: new Date("2026-03-17T10:28:00Z"),
  },
 ];

-const selectedResourceData: SelectedResource = {
+const readConfigState: ReadResourceState = {
+  status: "ok",
  uri: "file:///config.json",
-  mimeType: "application/json",
-  annotations: { audience: "developer", priority: 0.8 },
-  content: JSON.stringify(
-    {
-      name: "my-project",
-      version: "1.0.0",
-      settings: { debug: true, logLevel: "info" },
-    },
-    null,
-    2,
-  ),
-  lastUpdated: "2026-03-17T10:30:00Z",
+  result: {
+    contents: [
+      {
+        uri: "file:///config.json",
+        mimeType: "application/json",
+        text: JSON.stringify(
+          {
+            name: "my-project",
+            version: "1.0.0",
+            settings: { debug: true, logLevel: "info" },
+          },
+          null,
+          2,
+        ),
+      },
+    ],
+  },
+  lastUpdated: new Date("2026-03-17T10:30:00Z"),
  isSubscribed: true,
 };

-const selectedTemplateData: SelectedTemplate = {
-  name: "User Profile",
-  uriTemplate: "file:///users/{userId}/profile",
-  description: "Fetch a user profile by their unique identifier.",
-};
-
 export const WithResources: Story = {
  args: {
    resources: sampleResources,
@ -257,11 +113,10 @@ export const WithResources: Story = {

 export const ResourceSelected: Story = {
  args: {
-    resources: sampleResources.map((r) =>
-      r.uri === "file:///config.json" ? { ...r, selected: true } : r,
-    ),
-    selectedResource: selectedResourceData,
+    resources: sampleResources,
    subscriptions: sampleSubscriptions,
+    selectedResourceUri: "file:///config.json",
+    readState: readConfigState,
  },
 };

@ -275,61 +130,63 @@ export const WithTemplates: Story = {
 export const TemplateSelected: Story = {
  args: {
    resources: sampleResources,
-    templates: sampleTemplates.map((t) =>
-      t.uriTemplate === "file:///users/{userId}/profile"
-        ? { ...t, selected: true }
-        : t,
-    ),
-    selectedTemplate: selectedTemplateData,
+    templates: sampleTemplates,
+    selectedTemplateUri: "file:///users/{userId}/profile",
  },
 };

 export const TemplateWithResource: Story = {
  args: {
    resources: sampleResources,
-    templates: sampleTemplates.map((t) =>
-      t.uriTemplate === "file:///users/{userId}/profile"
-        ? { ...t, selected: true }
-        : t,
-    ),
-    selectedTemplate: selectedTemplateData,
-    selectedResource: {
+    templates: sampleTemplates,
+    selectedTemplateUri: "file:///users/{userId}/profile",
+    readState: {
+      status: "ok",
      uri: "file:///users/42/profile",
-      mimeType: "application/json",
-      annotations: { audience: "developer", priority: 0.8 },
-      content: JSON.stringify(
-        { id: 42, name: "Alice", email: "alice@example.com" },
-        null,
-        2,
-      ),
-      lastUpdated: "2026-03-17T11:15:00Z",
+      result: {
+        contents: [
+          {
+            uri: "file:///users/42/profile",
+            mimeType: "application/json",
+            text: JSON.stringify(
+              { id: 42, name: "Alice", email: "alice@example.com" },
+              null,
+              2,
+            ),
+          },
+        ],
+      },
      isSubscribed: false,
    },
+    selectedResourceUri: "file:///users/42/profile",
  },
 };

 export const AllSections: Story = {
  args: {
    resources: sampleResources,
-    templates: sampleTemplates.map((t) =>
-      t.uriTemplate === "file:///users/{userId}/profile"
-        ? { ...t, selected: true }
-        : t,
-    ),
+    templates: sampleTemplates,
    subscriptions: sampleSubscriptions,
-    selectedTemplate: selectedTemplateData,
-    selectedResource: {
+    selectedTemplateUri: "file:///users/{userId}/profile",
+    readState: {
+      status: "ok",
      uri: "file:///users/42/profile",
-      mimeType: "application/json",
-      annotations: { audience: "developer", priority: 0.8 },
-      content: JSON.stringify(
-        { id: 42, name: "Alice", email: "alice@example.com" },
-        null,
-        2,
-      ),
-      lastUpdated: "2026-03-17T11:15:00Z",
+      result: {
+        contents: [
+          {
+            uri: "file:///users/42/profile",
+            mimeType: "application/json",
+            text: JSON.stringify(
+              { id: 42, name: "Alice", email: "alice@example.com" },
+              null,
+              2,
+            ),
+          },
+        ],
+      },
      isSubscribed: false,
    },
+    selectedResourceUri: "file:///users/42/profile",
  },
 };

--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
@ -1,51 +1,39 @@
-import { Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
+import {
+  Alert,
+  Card,
+  Flex,
+  Group,
+  Loader,
+  ScrollArea,
+  Stack,
+  Text,
+} from "@mantine/core";
+import type {
+  ReadResourceResult,
+  Resource,
+  ResourceTemplate,
+} from "@modelcontextprotocol/sdk/types.js";
+import type { InspectorResourceSubscription } from "../../../../../../core/mcp/types.js";
 import { ResourceControls } from "../../groups/ResourceControls/ResourceControls";
 import { ResourcePreviewPanel } from "../../groups/ResourcePreviewPanel/ResourcePreviewPanel";
 import { ResourceTemplatePanel } from "../../groups/ResourceTemplatePanel/ResourceTemplatePanel";

-export interface ResourceItem {
-  name: string;
-  uri: string;
-  annotations?: { audience?: string; priority?: number };
-  selected: boolean;
-}
-
-export interface TemplateListItem {
-  name: string;
-  title?: string;
-  uriTemplate: string;
-  selected: boolean;
-}
-
-export interface SubscriptionItem {
-  name: string;
-  uri: string;
-  lastUpdated?: string;
-}
-
-export interface SelectedResource {
-  uri: string;
-  mimeType: string;
-  annotations?: { audience?: string; priority?: number };
-  content: string;
-  lastUpdated?: string;
-  isSubscribed: boolean;
-}
-
-export interface SelectedTemplate {
-  name: string;
-  title?: string;
-  uriTemplate: string;
-  description?: string;
-  annotations?: { audience?: string; priority?: number };
+export interface ReadResourceState {
+  status: "idle" | "pending" | "ok" | "error";
+  uri?: string;
+  result?: ReadResourceResult;
+  error?: string;
+  lastUpdated?: Date;
+  isSubscribed?: boolean;
 }

 export interface ResourcesScreenProps {
-  resources: ResourceItem[];
-  templates: TemplateListItem[];
-  subscriptions: SubscriptionItem[];
-  selectedResource?: SelectedResource;
-  selectedTemplate?: SelectedTemplate;
+  resources: Resource[];
+  templates: ResourceTemplate[];
+  subscriptions: InspectorResourceSubscription[];
+  selectedResourceUri?: string;
+  selectedTemplateUri?: string;
+  readState?: ReadResourceState;
  listChanged: boolean;
  onRefreshList: () => void;
  onSelectUri: (uri: string) => void;
@ -83,12 +71,16 @@ const EmptyState = Text.withProps({
  py: "xl",
 });

+const SCROLL_MAX_HEIGHT =
+  "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)";
+
 export function ResourcesScreen({
  resources,
  templates,
  subscriptions,
-  selectedResource,
-  selectedTemplate,
+  selectedResourceUri,
+  selectedTemplateUri,
+  readState,
  listChanged,
  onRefreshList,
  onSelectUri,
@ -97,6 +89,64 @@ export function ResourcesScreen({
  onSubscribeResource,
  onUnsubscribeResource,
 }: ResourcesScreenProps) {
+  const selectedResource = selectedResourceUri
+    ? resources.find((r) => r.uri === selectedResourceUri)
+    : undefined;
+  const selectedTemplate = selectedTemplateUri
+    ? templates.find((t) => t.uriTemplate === selectedTemplateUri)
+    : undefined;
+
+  // For template-expanded URIs that don't appear in the resources list,
+  // construct a synthetic Resource so the preview panel can render.
+  const readResource: Resource | undefined =
+    selectedResource ??
+    (readState?.uri && readState.uri === selectedResourceUri
+      ? { name: readState.uri, uri: readState.uri }
+      : undefined);
+
+  function renderReadState() {
+    if (!readState) return null;
+
+    if (readState.status === "pending") {
+      return (
+        <DetailCard>
+          <Stack align="center" py="xl">
+            <Loader size="sm" />
+            <Text c="dimmed">Reading resource...</Text>
+          </Stack>
+        </DetailCard>
+      );
+    }
+
+    if (readState.status === "error") {
+      return (
+        <DetailCard>
+          <Alert color="red" variant="light" title="Read Error">
+            {readState.error ?? "Failed to read resource"}
+          </Alert>
+        </DetailCard>
+      );
+    }
+
+    if (readState.result && readResource) {
+      return (
+        <DetailCard>
+          <ResourcePreviewPanel
+            resource={readResource}
+            contents={readState.result.contents}
+            lastUpdated={readState.lastUpdated}
+            isSubscribed={readState.isSubscribed ?? false}
+            onRefresh={() => onReadResource(readResource.uri)}
+            onSubscribe={() => onSubscribeResource(readResource.uri)}
+            onUnsubscribe={() => onUnsubscribeResource(readResource.uri)}
+          />
+        </DetailCard>
+      );
+    }
+
+    return null;
+  }
+
  return (
    <ScreenLayout>
      <Sidebar>
@ -105,6 +155,8 @@ export function ResourcesScreen({
            resources={resources}
            templates={templates}
            subscriptions={subscriptions}
+            selectedUri={selectedResourceUri}
+            selectedTemplateUri={selectedTemplateUri}
            listChanged={listChanged}
            onRefreshList={onRefreshList}
            onSelectUri={onSelectUri}
@ -116,33 +168,16 @@ export function ResourcesScreen({

      {selectedTemplate ? (
        <Group flex={1} gap="md" align="flex-start" wrap="nowrap">
-          <ScrollArea.Autosize
-            flex={1}
-            mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
-          >
+          <ScrollArea.Autosize flex={1} mah={SCROLL_MAX_HEIGHT}>
            <DetailCard>
              <ResourceTemplatePanel
-                {...selectedTemplate}
+                template={selectedTemplate}
                onReadResource={onReadResource}
              />
            </DetailCard>
          </ScrollArea.Autosize>
-          <ScrollArea.Autosize
-            flex={1}
-            mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
-          >
-            {selectedResource ? (
-              <DetailCard>
-                <ResourcePreviewPanel
-                  {...selectedResource}
-                  onRefresh={() => onReadResource(selectedResource.uri)}
-                  onSubscribe={() => onSubscribeResource(selectedResource.uri)}
-                  onUnsubscribe={() =>
-                    onUnsubscribeResource(selectedResource.uri)
-                  }
-                />
-              </DetailCard>
-            ) : (
+          <ScrollArea.Autosize flex={1} mah={SCROLL_MAX_HEIGHT}>
+            {renderReadState() ?? (
              <DetailCard>
                <EmptyState>Enter a URI and click Read to preview</EmptyState>
              </DetailCard>
@ -150,18 +185,12 @@ export function ResourcesScreen({
          </ScrollArea.Autosize>
        </Group>
      ) : selectedResource ? (
-        <ScrollArea.Autosize
-          flex={1}
-          mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
-        >
-          <DetailCard>
-            <ResourcePreviewPanel
-              {...selectedResource}
-              onRefresh={() => onReadResource(selectedResource.uri)}
-              onSubscribe={() => onSubscribeResource(selectedResource.uri)}
-              onUnsubscribe={() => onUnsubscribeResource(selectedResource.uri)}
-            />
-          </DetailCard>
+        <ScrollArea.Autosize flex={1} mah={SCROLL_MAX_HEIGHT}>
+          {renderReadState() ?? (
+            <DetailCard>
+              <EmptyState>Click to read this resource</EmptyState>
+            </DetailCard>
+          )}
        </ScrollArea.Autosize>
      ) : (
        <DetailCard flex={1}>
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
+++ b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
@ -375,202 +375,79 @@ export const ResourcesActive: Story = {
          {
            name: "config.json",
            uri: "file:///config.json",
-            annotations: { audience: "developer", priority: 0.8 },
-            selected: false,
-          },
-          {
-            name: "README.md",
-            uri: "file:///README.md",
-            selected: false,
+            annotations: { audience: ["user"], priority: 0.8 },
          },
+          { name: "README.md", uri: "file:///README.md" },
          {
            name: "schema.sql",
            uri: "file:///schema.sql",
            annotations: { priority: 0.5 },
-            selected: false,
-          },
-          {
-            name: "package.json",
-            uri: "file:///package.json",
-            annotations: { audience: "developer" },
-            selected: false,
-          },
-          {
-            name: "tsconfig.json",
-            uri: "file:///tsconfig.json",
-            annotations: { audience: "developer", priority: 0.3 },
-            selected: false,
-          },
-          {
-            name: ".env.example",
-            uri: "file:///.env.example",
-            selected: false,
          },
+          { name: "package.json", uri: "file:///package.json" },
+          { name: ".env.example", uri: "file:///.env.example" },
          {
            name: "docker-compose.yml",
            uri: "file:///docker-compose.yml",
            annotations: { priority: 0.6 },
-            selected: false,
          },
          {
            name: "migrations/001_init.sql",
            uri: "file:///migrations/001_init.sql",
-            annotations: { audience: "developer", priority: 0.4 },
-            selected: false,
-          },
-          {
-            name: "migrations/002_add_users.sql",
-            uri: "file:///migrations/002_add_users.sql",
-            annotations: { audience: "developer", priority: 0.4 },
-            selected: false,
-          },
-          {
-            name: "seeds/users.json",
-            uri: "file:///seeds/users.json",
-            selected: false,
-          },
-          {
-            name: "seeds/products.json",
-            uri: "file:///seeds/products.json",
-            selected: false,
-          },
-          {
-            name: "certs/server.pem",
-            uri: "file:///certs/server.pem",
-            annotations: { priority: 0.9 },
-            selected: false,
-          },
-          {
-            name: "logs/access.log",
-            uri: "file:///logs/access.log",
-            annotations: { audience: "application", priority: 0.2 },
-            selected: false,
          },
          {
            name: "logs/error.log",
            uri: "file:///logs/error.log",
-            annotations: { audience: "application", priority: 0.7 },
-            selected: false,
-          },
-          {
-            name: "api-spec.yaml",
-            uri: "file:///api-spec.yaml",
-            annotations: { audience: "developer" },
-            selected: false,
-          },
-          {
-            name: "CHANGELOG.md",
-            uri: "file:///CHANGELOG.md",
-            selected: false,
-          },
-          {
-            name: "LICENSE",
-            uri: "file:///LICENSE",
-            selected: false,
-          },
-          {
-            name: "Makefile",
-            uri: "file:///Makefile",
-            annotations: { audience: "developer", priority: 0.3 },
-            selected: false,
+            annotations: { priority: 0.7 },
          },
+          { name: "api-spec.yaml", uri: "file:///api-spec.yaml" },
+          { name: "Makefile", uri: "file:///Makefile" },
        ]}
        templates={[
          {
            name: "User Profile",
            uriTemplate: "file:///users/{userId}/profile",
-            selected: true,
+            description: "Fetch a user profile by their unique identifier.",
          },
          {
            name: "Table Row",
            title: "Database Table Row",
            uriTemplate: "db://tables/{tableName}/rows/{rowId}",
-            selected: false,
          },
          {
            name: "Log File",
            title: "Application Log",
            uriTemplate: "file:///logs/{service}/{date}.log",
-            selected: false,
-          },
-          {
-            name: "Migration",
-            uriTemplate: "file:///migrations/{version}_{name}.sql",
-            selected: false,
-          },
-          {
-            name: "Config by Environment",
-            title: "Environment Config",
-            uriTemplate: "file:///config/{environment}.json",
-            selected: false,
-          },
-          {
-            name: "API Endpoint",
-            uriTemplate: "https://api.example.com/{version}/{resource}",
-            selected: false,
-          },
-          {
-            name: "Report",
-            title: "Generated Report",
-            uriTemplate: "reports://{reportType}/{year}/{month}",
-            selected: false,
          },
        ]}
        subscriptions={[
          {
-            name: "config.json",
-            uri: "file:///config.json",
-            lastUpdated: "2026-03-17T10:30:00Z",
+            resource: { name: "config.json", uri: "file:///config.json" },
+            lastUpdated: new Date("2026-03-17T10:30:00Z"),
          },
          {
-            name: "schema.sql",
-            uri: "file:///schema.sql",
-            lastUpdated: "2026-03-17T10:28:00Z",
-          },
-          {
-            name: "docker-compose.yml",
-            uri: "file:///docker-compose.yml",
-            lastUpdated: "2026-03-17T09:45:00Z",
-          },
-          {
-            name: "logs/error.log",
-            uri: "file:///logs/error.log",
-            lastUpdated: "2026-03-17T10:31:12Z",
-          },
-          {
-            name: "certs/server.pem",
-            uri: "file:///certs/server.pem",
-          },
-          {
-            name: "api-spec.yaml",
-            uri: "file:///api-spec.yaml",
-            lastUpdated: "2026-03-17T08:15:00Z",
-          },
-          {
-            name: "package.json",
-            uri: "file:///package.json",
-            lastUpdated: "2026-03-17T10:22:00Z",
-          },
-          {
-            name: "seeds/users.json",
-            uri: "file:///seeds/users.json",
+            resource: { name: "schema.sql", uri: "file:///schema.sql" },
+            lastUpdated: new Date("2026-03-17T10:28:00Z"),
          },
        ]}
-        selectedTemplate={{
-          name: "User Profile",
-          uriTemplate: "file:///users/{userId}/profile",
-          description: "Fetch a user profile by their unique identifier.",
-        }}
-        selectedResource={{
+        selectedTemplateUri="file:///users/{userId}/profile"
+        selectedResourceUri="file:///users/42/profile"
+        readState={{
+          status: "ok",
          uri: "file:///users/42/profile",
-          mimeType: "application/json",
-          annotations: { audience: "developer", priority: 0.8 },
-          content: JSON.stringify(
-            { id: 42, name: "Alice", email: "alice@example.com" },
-            null,
-            2,
-          ),
-          lastUpdated: "2026-03-17T11:15:00Z",
+          result: {
+            contents: [
+              {
+                uri: "file:///users/42/profile",
+                mimeType: "application/json",
+                text: JSON.stringify(
+                  { id: 42, name: "Alice", email: "alice@example.com" },
+                  null,
+                  2,
+                ),
+              },
+            ],
+          },
+          lastUpdated: new Date("2026-03-17T11:15:00Z"),
          isSubscribed: false,
        }}
        listChanged={true}