fix: surface list-fetch failures in paginated mode (#1998)

#1954 wired the list-load error off the aggregate managed stores only.
With `paginatedLists` on, those stores deliberately skip their all-page
walk, so their error is permanently null — while the paged stores that
actually drive the sidebar had no error state at all and `loadPage` had
a try/finally with no catch. A failing list showed an empty panel with
no alert and no Retry, and the connect-time `void loadPage(undefined)`
left an unhandled rejection.

- Give PagedTools/Prompts/ResourcesState observable error state: an
  `errorChange` event plus `getError()`, set in a new catch in
  `loadPage`, cleared on the next success and on disconnect. The
  rejection is still re-thrown, matching ManagedListState — callers'
  auth-recovery wrappers key off it to detect a 401.
- Catch the connect-time load's rejection (`.catch(() => {})`) now that
  the failure is recorded as state rather than lost.
- Select the error by mode in `usePaginatedList`, the same way `items`
  already is, and read it in App.tsx from the pagination model.
- Rename `useManagedListError` to `useListError`: both store families
  expose an identical `errorChange`, so the hook declares that one-event
  contract itself instead of importing ManagedListEventMap.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0177mPHAdECD18nLLCTwR5rh
Signed-off-by: cliffhall <cliff@futurescale.com>

core/react/useListError.ts

@@ -0,0 +1,77 @@
+import { useCallback, useSyncExternalStore } from "react";
+import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
+
+/**
+ * The single event both list-state families expose for this. Declared here
+ * rather than imported from either so the hook depends on neither: the managed
+ * (aggregate) states and the paged states each carry an `errorChange` of this
+ * shape, and this is the whole contract the hook needs.
+ */
+interface ListErrorEventMap {
+  errorChange: Error | null;
+}
+
+/**
+ * The slice of a list state this hook needs. Declared structurally rather than
+ * as a concrete state class so every list hook can share it without threading
+ * its item type through — the error is the same shape for all of them.
+ */
+export interface ListErrorSource {
+  getError(): Error | null;
+  addEventListener(
+    type: "errorChange",
+    listener: (
+      event: TypedEventGeneric<ListErrorEventMap, "errorChange">,
+    ) => void,
+  ): void;
+  removeEventListener(
+    type: "errorChange",
+    listener: (
+      event: TypedEventGeneric<ListErrorEventMap, "errorChange">,
+    ) => void,
+  ): void;
+}
+
+/**
+ * Subscribe to a list state's last-fetch error (#1953, #1998).
+ *
+ * Shared by the four `useManaged*` hooks and the three `usePaged*` hooks so a
+ * list load that fails — including the connect-time one, which has no caller
+ * to await it — reaches the UI instead of only the console. `null` means the
+ * last fetch succeeded. Both families need it because the paged stores are the
+ * display source in paginated mode, where the managed stores deliberately
+ * never fetch (#1998).
+ *
+ * Built on `useSyncExternalStore` rather than the `useState` + `useEffect`
+ * subscribe pattern the sibling hooks use. Re-syncing state from the `state`
+ * prop inside an effect would render one frame carrying the PREVIOUS store's
+ * error after `state` changes (switching servers) before the effect corrects
+ * it — the "don't derive state from props in an effect" rule in AGENTS.md.
+ * `useSyncExternalStore` has no such window: the snapshot is read during
+ * render, so a store swap is reflected in the same frame, and it also closes
+ * the gap where an error recorded between render and subscribe would be missed.
+ *
+ * The snapshot must be referentially stable across reads that mean "no change",
+ * which it is: it returns the stored `Error` instance itself (or `null`), never
+ * a fresh object.
+ */
+export function useListError(state: ListErrorSource | null): Error | null {
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => {
+      if (!state) return () => {};
+      const listener = () => onStoreChange();
+      state.addEventListener("errorChange", listener);
+      return () => {
+        state.removeEventListener("errorChange", listener);
+      };
+    },
+    [state],
+  );
+
+  const getSnapshot = useCallback(() => state?.getError() ?? null, [state]);
+
+  // Server snapshot: same read. The stores are browser/Node runtime objects
+  // with no SSR path, and passing the same getter keeps hydration consistent
+  // rather than throwing on a server render.
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}

core/react/useManagedPrompts.ts

@@ -6,7 +6,7 @@ import type {
 } from "../mcp/state/managedPromptsState.js";
 import type { Prompt } from "@modelcontextprotocol/client";
 import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
-import { useManagedListError } from "./useManagedListError.js";
+import { useListError } from "./useListError.js";
 
 export interface UseManagedPromptsResult {
   /**
@@ -72,7 +72,7 @@ export function useManagedPrompts(
     };
   }, [managedPromptsState]);
 
-  const error = useManagedListError(managedPromptsState);
+  const error = useListError(managedPromptsState);
 
   const refresh = useCallback(async (): Promise<Prompt[]> => {
     if (!managedPromptsState || !client) return [];

core/react/useManagedResourceTemplates.ts

@@ -6,7 +6,7 @@ import type {
 } from "../mcp/state/managedResourceTemplatesState.js";
 import type { ResourceTemplateType as ResourceTemplate } from "@modelcontextprotocol/client";
 import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
-import { useManagedListError } from "./useManagedListError.js";
+import { useListError } from "./useListError.js";
 
 export interface UseManagedResourceTemplatesResult {
   /**
@@ -57,7 +57,7 @@ export function useManagedResourceTemplates(
     };
   }, [managedResourceTemplatesState]);
 
-  const error = useManagedListError(managedResourceTemplatesState);
+  const error = useListError(managedResourceTemplatesState);
 
   const refresh = useCallback(async (): Promise<ResourceTemplate[]> => {
     if (!managedResourceTemplatesState || !client) return [];

core/react/useManagedResources.ts

@@ -6,7 +6,7 @@ import type {
 } from "../mcp/state/managedResourcesState.js";
 import type { Resource } from "@modelcontextprotocol/client";
 import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
-import { useManagedListError } from "./useManagedListError.js";
+import { useListError } from "./useListError.js";
 
 export interface UseManagedResourcesResult {
   /**
@@ -83,7 +83,7 @@ export function useManagedResources(
     };
   }, [managedResourcesState]);
 
-  const error = useManagedListError(managedResourcesState);
+  const error = useListError(managedResourcesState);
 
   const refresh = useCallback(async (): Promise<Resource[]> => {
     if (!managedResourcesState || !client) return [];

core/react/useManagedTools.ts

@@ -4,7 +4,7 @@ import type { ManagedToolsState } from "../mcp/state/managedToolsState.js";
 import type { ManagedToolsStateEventMap } from "../mcp/state/managedToolsState.js";
 import type { Tool } from "@modelcontextprotocol/client";
 import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
-import { useManagedListError } from "./useManagedListError.js";
+import { useListError } from "./useListError.js";
 
 export interface UseManagedToolsResult {
   /**
@@ -72,7 +72,7 @@ export function useManagedTools(
     };
   }, [managedToolsState]);
 
-  const error = useManagedListError(managedToolsState);
+  const error = useListError(managedToolsState);
 
   const refresh = useCallback(async (): Promise<Tool[]> => {
     if (!managedToolsState || !client) return [];

core/react/usePagedPrompts.ts

@@ -7,6 +7,7 @@ import type {
 } from "../mcp/state/pagedPromptsState.js";
 import type { Prompt } from "@modelcontextprotocol/client";
 import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
+import { useListError } from "./useListError.js";
 
 export interface UsePagedPromptsResult {
   prompts: Prompt[];
@@ -14,6 +15,12 @@ export interface UsePagedPromptsResult {
   nextCursor?: string;
   /** Pages loaded since the last reset (page 1 = 1). */
   pageCount: number;
+  /**
+   * The last page load's failure, or `null` when it succeeded. In paginated
+   * mode this store is the display source, so this — not the managed
+   * store's error — is what the panel renders (#1998).
+   */
+  error: Error | null;
   loadPage: (
     cursor?: string,
     metadata?: Record<string, string>,
@@ -72,6 +79,8 @@ export function usePagedPrompts(
     };
   }, [pagedPromptsState]);
 
+  const error = useListError(pagedPromptsState);
+
   const loadPage = useCallback(
     async (
       cursor?: string,
@@ -89,5 +98,5 @@ export function usePagedPrompts(
     pagedPromptsState?.clear();
   }, [pagedPromptsState]);
 
-  return { prompts, nextCursor, pageCount, loadPage, clear };
+  return { prompts, nextCursor, pageCount, error, loadPage, clear };
 }

core/react/usePagedResources.ts

@@ -7,6 +7,7 @@ import type {
 } from "../mcp/state/pagedResourcesState.js";
 import type { Resource } from "@modelcontextprotocol/client";
 import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
+import { useListError } from "./useListError.js";
 
 export interface UsePagedResourcesResult {
   resources: Resource[];
@@ -14,6 +15,12 @@ export interface UsePagedResourcesResult {
   nextCursor?: string;
   /** Pages loaded since the last reset (page 1 = 1). */
   pageCount: number;
+  /**
+   * The last page load's failure, or `null` when it succeeded. In paginated
+   * mode this store is the display source, so this — not the managed
+   * store's error — is what the panel renders (#1998).
+   */
+  error: Error | null;
   loadPage: (
     cursor?: string,
     metadata?: Record<string, string>,
@@ -78,6 +85,8 @@ export function usePagedResources(
     };
   }, [pagedResourcesState]);
 
+  const error = useListError(pagedResourcesState);
+
   const loadPage = useCallback(
     async (
       cursor?: string,
@@ -95,5 +104,5 @@ export function usePagedResources(
     pagedResourcesState?.clear();
   }, [pagedResourcesState]);
 
-  return { resources, nextCursor, pageCount, loadPage, clear };
+  return { resources, nextCursor, pageCount, error, loadPage, clear };
 }

core/react/usePagedTools.ts

@@ -7,6 +7,7 @@ import type {
 } from "../mcp/state/pagedToolsState.js";
 import type { Tool } from "@modelcontextprotocol/client";
 import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
+import { useListError } from "./useListError.js";
 
 export interface UsePagedToolsResult {
   tools: Tool[];
@@ -14,6 +15,12 @@ export interface UsePagedToolsResult {
   nextCursor?: string;
   /** Pages loaded since the last reset (page 1 = 1). */
   pageCount: number;
+  /**
+   * The last page load's failure, or `null` when it succeeded. In paginated
+   * mode this store is the display source, so this — not the managed
+   * store's error — is what the panel renders (#1998).
+   */
+  error: Error | null;
   loadPage: (cursor?: string) => Promise<LoadPageResult>;
   clear: () => void;
 }
@@ -68,6 +75,8 @@ export function usePagedTools(
     };
   }, [pagedToolsState]);
 
+  const error = useListError(pagedToolsState);
+
   const loadPage = useCallback(
     async (cursor?: string): Promise<LoadPageResult> => {
       if (!pagedToolsState || !client) {
@@ -82,5 +91,5 @@ export function usePagedTools(
     pagedToolsState?.clear();
   }, [pagedToolsState]);
 
-  return { tools, nextCursor, pageCount, loadPage, clear };
+  return { tools, nextCursor, pageCount, error, loadPage, clear };
 }