Expose live resource subscriptions via a hook (#1325)

cliffhall · claude · cliffhall · commit ac9065f5cf1d · 2026-05-19T16:35:05.000-04:00
Add ResourceSubscriptionsState that mirrors InspectorClient's subscribed
URIs as InspectorResourceSubscription[], resolving each URI against the
managed resources list (so the subscription tile shows server-supplied
name/title) and stamping lastUpdated on notifications/resources/updated.
Pair it with useResourceSubscriptions and wire App.tsx so the Resources
screen reflects subscribe/unsubscribe actions in real time.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
@@ -16,6 +16,7 @@ import { ManagedPromptsState } from "@inspector/core/mcp/state/managedPromptsSta
 import { ManagedResourcesState } from "@inspector/core/mcp/state/managedResourcesState.js";
 import { ManagedResourceTemplatesState } from "@inspector/core/mcp/state/managedResourceTemplatesState.js";
 import { ManagedRequestorTasksState } from "@inspector/core/mcp/state/managedRequestorTasksState.js";
+import { ResourceSubscriptionsState } from "@inspector/core/mcp/state/resourceSubscriptionsState.js";
 import { MessageLogState } from "@inspector/core/mcp/state/messageLogState.js";
 import { FetchRequestLogState } from "@inspector/core/mcp/state/fetchRequestLogState.js";
 import { StderrLogState } from "@inspector/core/mcp/state/stderrLogState.js";
@@ -26,6 +27,7 @@ import { useManagedPrompts } from "@inspector/core/react/useManagedPrompts.js";
 import { useManagedResources } from "@inspector/core/react/useManagedResources.js";
 import { useManagedResourceTemplates } from "@inspector/core/react/useManagedResourceTemplates.js";
 import { useManagedRequestorTasks } from "@inspector/core/react/useManagedRequestorTasks.js";
+import { useResourceSubscriptions } from "@inspector/core/react/useResourceSubscriptions.js";
 import { useMessageLog } from "@inspector/core/react/useMessageLog.js";
 import { InspectorView } from "./components/views/InspectorView/InspectorView";
 import type { ToolCallState } from "./components/screens/ToolsScreen/ToolsScreen";
@@ -173,6 +175,8 @@ function App() {
     useState<ManagedResourceTemplatesState | null>(null);
   const [managedRequestorTasksState, setManagedRequestorTasksState] =
     useState<ManagedRequestorTasksState | null>(null);
+  const [resourceSubscriptionsState, setResourceSubscriptionsState] =
+    useState<ResourceSubscriptionsState | null>(null);
   const [messageLogState, setMessageLogState] =
     useState<MessageLogState | null>(null);
   const [fetchRequestLogState, setFetchRequestLogState] =
@@ -237,6 +241,9 @@ function App() {
     inspectorClient,
     managedRequestorTasksState,
   );
+  const { subscriptions } = useResourceSubscriptions(
+    resourceSubscriptionsState,
+  );
   const { messages } = useMessageLog(messageLogState);
 
   // Capture observed handshake latency at the connecting → connected edge.
@@ -304,6 +311,7 @@ function App() {
       managedResourcesState?.destroy();
       managedResourceTemplatesState?.destroy();
       managedRequestorTasksState?.destroy();
+      resourceSubscriptionsState?.destroy();
       messageLogState?.destroy();
       fetchRequestLogState?.destroy();
       stderrLogState?.destroy();
@@ -325,11 +333,19 @@ function App() {
       setInspectorClient(client);
       setManagedToolsState(new ManagedToolsState(client));
       setManagedPromptsState(new ManagedPromptsState(client));
-      setManagedResourcesState(new ManagedResourcesState(client));
+      const nextResourcesState = new ManagedResourcesState(client);
+      setManagedResourcesState(nextResourcesState);
       setManagedResourceTemplatesState(
         new ManagedResourceTemplatesState(client),
       );
       setManagedRequestorTasksState(new ManagedRequestorTasksState(client));
+      // ResourceSubscriptionsState consults the managed resources list to
+      // resolve subscribed URIs to full Resource objects (so the subscription
+      // tile shows the server-supplied name/title). Pass the freshly created
+      // state to avoid the React update lag from setManagedResourcesState.
+      setResourceSubscriptionsState(
+        new ResourceSubscriptionsState(client, nextResourcesState),
+      );
       setMessageLogState(new MessageLogState(client));
       setFetchRequestLogState(new FetchRequestLogState(client));
       setStderrLogState(new StderrLogState(client));
@@ -342,6 +358,7 @@ function App() {
       managedResourcesState,
       managedResourceTemplatesState,
       managedRequestorTasksState,
+      resourceSubscriptionsState,
       messageLogState,
       fetchRequestLogState,
       stderrLogState,
@@ -557,10 +574,7 @@ function App() {
       prompts={prompts}
       resources={resources}
       resourceTemplates={resourceTemplates}
-      // TODO(#1325): drop the empty fallback once `useResourceSubscriptions`
-      // surfaces the live subscription list — subscribe/unsubscribe buttons
-      // currently fire but the screen never reflects the result.
-      subscriptions={[]}
+      subscriptions={subscriptions}
       logs={logs}
       tasks={tasks}
       history={messages}
diff --git a/clients/web/src/test/core/mcp/state/resourceSubscriptionsState.test.ts b/clients/web/src/test/core/mcp/state/resourceSubscriptionsState.test.ts
@@ -0,0 +1,222 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import type { Resource } from "@modelcontextprotocol/sdk/types.js";
+import { ResourceSubscriptionsState } from "@inspector/core/mcp/state/resourceSubscriptionsState";
+import { ManagedResourcesState } from "@inspector/core/mcp/state/managedResourcesState";
+import { FakeInspectorClient } from "@inspector/core/mcp/__tests__/fakeInspectorClient";
+import type { InspectorResourceSubscription } from "@inspector/core/mcp/types";
+
+function resource(uri: string, extras: Partial<Resource> = {}): Resource {
+  return { uri, name: uri, ...extras };
+}
+
+function waitForSubscriptionsChange(
+  state: ResourceSubscriptionsState,
+): Promise<InspectorResourceSubscription[]> {
+  return new Promise((resolve) => {
+    state.addEventListener("subscriptionsChange", (e) => resolve(e.detail), {
+      once: true,
+    });
+  });
+}
+
+describe("ResourceSubscriptionsState", () => {
+  let client: FakeInspectorClient;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-05-19T10:00:00Z"));
+    client = new FakeInspectorClient({ status: "connected" });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("starts empty and getSubscriptions returns a defensive copy", () => {
+    const state = new ResourceSubscriptionsState(client);
+    expect(state.getSubscriptions()).toEqual([]);
+    const a = state.getSubscriptions();
+    const b = state.getSubscriptions();
+    expect(a).not.toBe(b);
+  });
+
+  it("rebuilds subscriptions from resourceSubscriptionsChange events", async () => {
+    const state = new ResourceSubscriptionsState(client);
+    const changePromise = waitForSubscriptionsChange(state);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", [
+      "file:///a",
+      "file:///b",
+    ]);
+    const next = await changePromise;
+    expect(next).toEqual([
+      { resource: { uri: "file:///a", name: "file:///a" } },
+      { resource: { uri: "file:///b", name: "file:///b" } },
+    ]);
+  });
+
+  it("resolves Resource references via ManagedResourcesState when provided", async () => {
+    const resourcesState = new ManagedResourcesState(client);
+    client.queueResourcePages({
+      resources: [resource("file:///a", { name: "Alpha", title: "Title A" })],
+    });
+    await resourcesState.refresh();
+
+    const state = new ResourceSubscriptionsState(client, resourcesState);
+    const changePromise = waitForSubscriptionsChange(state);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", [
+      "file:///a",
+      "file:///unknown",
+    ]);
+    const next = await changePromise;
+    expect(next[0].resource).toEqual({
+      uri: "file:///a",
+      name: "Alpha",
+      title: "Title A",
+    });
+    // Unknown URI falls back to a synthetic Resource
+    expect(next[1].resource).toEqual({
+      uri: "file:///unknown",
+      name: "file:///unknown",
+    });
+  });
+
+  it("stamps lastUpdated on resourceUpdated for a tracked URI", async () => {
+    const state = new ResourceSubscriptionsState(client);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    expect(state.getSubscriptions()[0].lastUpdated).toBeUndefined();
+
+    const changePromise = waitForSubscriptionsChange(state);
+    client.dispatchTypedEvent("resourceUpdated", { uri: "file:///a" });
+    const next = await changePromise;
+    expect(next[0].lastUpdated).toEqual(new Date("2026-05-19T10:00:00Z"));
+  });
+
+  it("ignores resourceUpdated for URIs that are not subscribed", () => {
+    const state = new ResourceSubscriptionsState(client);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    const handler = vi.fn();
+    state.addEventListener("subscriptionsChange", handler);
+    client.dispatchTypedEvent("resourceUpdated", {
+      uri: "file:///not-tracked",
+    });
+    expect(handler).not.toHaveBeenCalled();
+    expect(state.getSubscriptions()[0].lastUpdated).toBeUndefined();
+  });
+
+  it("preserves lastUpdated across re-subscribes and drops it on unsubscribe", async () => {
+    const state = new ResourceSubscriptionsState(client);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", [
+      "file:///a",
+      "file:///b",
+    ]);
+    client.dispatchTypedEvent("resourceUpdated", { uri: "file:///a" });
+    expect(state.getSubscriptions()[0].lastUpdated).toBeInstanceOf(Date);
+
+    // Unsubscribe from "a", subscribe to "c". lastUpdated for "a" is dropped.
+    client.dispatchTypedEvent("resourceSubscriptionsChange", [
+      "file:///b",
+      "file:///c",
+    ]);
+    expect(state.getSubscriptions().map((s) => s.resource.uri)).toEqual([
+      "file:///b",
+      "file:///c",
+    ]);
+    expect(state.getSubscriptions().every((s) => !s.lastUpdated)).toBe(true);
+
+    // Re-subscribe to "a" — no lastUpdated since the prior entry was dropped.
+    client.dispatchTypedEvent("resourceSubscriptionsChange", [
+      "file:///a",
+      "file:///b",
+      "file:///c",
+    ]);
+    expect(state.getSubscriptions()[0].lastUpdated).toBeUndefined();
+  });
+
+  it("preserves lastUpdated when an unrelated URI is added", () => {
+    const state = new ResourceSubscriptionsState(client);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    client.dispatchTypedEvent("resourceUpdated", { uri: "file:///a" });
+    const stampedAt = state.getSubscriptions()[0].lastUpdated;
+    expect(stampedAt).toBeInstanceOf(Date);
+
+    client.dispatchTypedEvent("resourceSubscriptionsChange", [
+      "file:///a",
+      "file:///b",
+    ]);
+    const subs = state.getSubscriptions();
+    expect(subs[0].lastUpdated).toEqual(stampedAt);
+    expect(subs[1].lastUpdated).toBeUndefined();
+  });
+
+  it("re-resolves Resource references when ManagedResourcesState refreshes", async () => {
+    const resourcesState = new ManagedResourcesState(client);
+    const state = new ResourceSubscriptionsState(client, resourcesState);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    expect(state.getSubscriptions()[0].resource.name).toBe("file:///a");
+
+    client.queueResourcePages({
+      resources: [resource("file:///a", { name: "Resolved Name" })],
+    });
+    const changePromise = waitForSubscriptionsChange(state);
+    await resourcesState.refresh();
+    const next = await changePromise;
+    expect(next[0].resource.name).toBe("Resolved Name");
+  });
+
+  it("does not re-emit on resourcesChange when no URIs are subscribed", async () => {
+    const resourcesState = new ManagedResourcesState(client);
+    const state = new ResourceSubscriptionsState(client, resourcesState);
+    const handler = vi.fn();
+    state.addEventListener("subscriptionsChange", handler);
+
+    client.queueResourcePages({ resources: [resource("file:///a")] });
+    await resourcesState.refresh();
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("clears subscriptions on statusChange to disconnected", async () => {
+    const state = new ResourceSubscriptionsState(client);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    expect(state.getSubscriptions()).toHaveLength(1);
+
+    const changePromise = waitForSubscriptionsChange(state);
+    client.setStatus("disconnected");
+    const next = await changePromise;
+    expect(next).toEqual([]);
+    expect(state.getSubscriptions()).toEqual([]);
+  });
+
+  it("does not clear subscriptions on non-disconnected status changes", () => {
+    const state = new ResourceSubscriptionsState(client);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    client.setStatus("error");
+    expect(state.getSubscriptions()).toHaveLength(1);
+  });
+
+  it("destroy unsubscribes from client and resources state events", () => {
+    const resourcesState = new ManagedResourcesState(client);
+    const state = new ResourceSubscriptionsState(client, resourcesState);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    expect(state.getSubscriptions()).toHaveLength(1);
+
+    state.destroy();
+    expect(state.getSubscriptions()).toEqual([]);
+
+    // Further events from the client must not affect the destroyed state.
+    const handler = vi.fn();
+    state.addEventListener("subscriptionsChange", handler);
+    client.dispatchTypedEvent("resourceSubscriptionsChange", [
+      "file:///a",
+      "file:///b",
+    ]);
+    client.dispatchTypedEvent("resourceUpdated", { uri: "file:///a" });
+    expect(handler).not.toHaveBeenCalled();
+    expect(state.getSubscriptions()).toEqual([]);
+  });
+
+  it("destroy is idempotent", () => {
+    const state = new ResourceSubscriptionsState(client);
+    state.destroy();
+    expect(() => state.destroy()).not.toThrow();
+  });
+});
diff --git a/clients/web/src/test/core/react/useResourceSubscriptions.test.tsx b/clients/web/src/test/core/react/useResourceSubscriptions.test.tsx
@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { FakeInspectorClient } from "@inspector/core/mcp/__tests__/fakeInspectorClient";
+import { ResourceSubscriptionsState } from "@inspector/core/mcp/state/resourceSubscriptionsState";
+import { useResourceSubscriptions } from "@inspector/core/react/useResourceSubscriptions";
+
+describe("useResourceSubscriptions", () => {
+  let client: FakeInspectorClient;
+  let state: ResourceSubscriptionsState;
+
+  beforeEach(() => {
+    client = new FakeInspectorClient({ status: "connected" });
+    state = new ResourceSubscriptionsState(client);
+  });
+
+  it("returns the initial snapshot from the state", () => {
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    const { result } = renderHook(() => useResourceSubscriptions(state));
+    expect(result.current.subscriptions.map((s) => s.resource.uri)).toEqual([
+      "file:///a",
+    ]);
+  });
+
+  it("returns empty subscriptions when state is null", () => {
+    const { result } = renderHook(() => useResourceSubscriptions(null));
+    expect(result.current.subscriptions).toEqual([]);
+  });
+
+  it("updates when state dispatches subscriptionsChange", async () => {
+    const { result } = renderHook(() => useResourceSubscriptions(state));
+    expect(result.current.subscriptions).toEqual([]);
+
+    act(() => {
+      client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    });
+
+    await waitFor(() => {
+      expect(result.current.subscriptions.map((s) => s.resource.uri)).toEqual([
+        "file:///a",
+      ]);
+    });
+  });
+
+  it("resets to empty when the state prop becomes null", async () => {
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    const { result, rerender } = renderHook(
+      ({ s }: { s: ResourceSubscriptionsState | null }) =>
+        useResourceSubscriptions(s),
+      { initialProps: { s: state as ResourceSubscriptionsState | null } },
+    );
+    await waitFor(() => {
+      expect(result.current.subscriptions).toHaveLength(1);
+    });
+
+    rerender({ s: null });
+    await waitFor(() => {
+      expect(result.current.subscriptions).toEqual([]);
+    });
+  });
+
+  it("unsubscribes from the state on unmount", () => {
+    const { result, unmount } = renderHook(() =>
+      useResourceSubscriptions(state),
+    );
+    unmount();
+    client.dispatchTypedEvent("resourceSubscriptionsChange", ["file:///a"]);
+    expect(result.current.subscriptions).toEqual([]);
+  });
+});
diff --git a/core/mcp/state/index.ts b/core/mcp/state/index.ts
@@ -48,3 +48,5 @@ export type {
   PagedRequestorTasksStateEventMap,
   LoadPageResult as PagedRequestorTasksLoadPageResult,
 } from "./pagedRequestorTasksState.js";
+export { ResourceSubscriptionsState } from "./resourceSubscriptionsState.js";
+export type { ResourceSubscriptionsStateEventMap } from "./resourceSubscriptionsState.js";
diff --git a/core/mcp/state/resourceSubscriptionsState.ts b/core/mcp/state/resourceSubscriptionsState.ts
diff --git a/core/react/useResourceSubscriptions.ts b/core/react/useResourceSubscriptions.ts
