de60983ccc
#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>
109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import type { InspectorClientProtocol } from "../mcp/inspectorClientProtocol.js";
|
|
import type {
|
|
ManagedResourcesState,
|
|
ManagedResourcesStateEventMap,
|
|
} from "../mcp/state/managedResourcesState.js";
|
|
import type { Resource } from "@modelcontextprotocol/client";
|
|
import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
|
|
import { useListError } from "./useListError.js";
|
|
|
|
export interface UseManagedResourcesResult {
|
|
/**
|
|
* The last fetch's failure (transport error, or a result the SDK codec
|
|
* rejected), or `null` when it succeeded. Includes the connect-time load,
|
|
* whose failure has no caller to surface it (#1953).
|
|
*/
|
|
error: Error | null;
|
|
resources: Resource[];
|
|
/**
|
|
* True when a `resources/list_changed` arrived since the last user refresh.
|
|
*/
|
|
listChanged: boolean;
|
|
refresh: () => Promise<Resource[]>;
|
|
/** Acknowledge the list-changed indicator without fetching (#1721). */
|
|
clearListChanged: () => void;
|
|
}
|
|
|
|
/**
|
|
* React hook that subscribes to ManagedResourcesState and returns resources + refresh.
|
|
*/
|
|
export function useManagedResources(
|
|
client: InspectorClientProtocol | null,
|
|
managedResourcesState: ManagedResourcesState | null,
|
|
): UseManagedResourcesResult {
|
|
const [resources, setResources] = useState<Resource[]>(
|
|
managedResourcesState?.getResources() ?? [],
|
|
);
|
|
const [listChanged, setListChanged] = useState<boolean>(
|
|
managedResourcesState?.getListChanged() ?? false,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!managedResourcesState) {
|
|
setResources([]);
|
|
setListChanged(false);
|
|
return;
|
|
}
|
|
setResources(managedResourcesState.getResources());
|
|
setListChanged(managedResourcesState.getListChanged());
|
|
const onResourcesChange = (
|
|
event: TypedEventGeneric<
|
|
ManagedResourcesStateEventMap,
|
|
"resourcesChange"
|
|
>,
|
|
) => {
|
|
setResources(event.detail);
|
|
};
|
|
const onListChangedChange = (
|
|
event: TypedEventGeneric<
|
|
ManagedResourcesStateEventMap,
|
|
"listChangedChange"
|
|
>,
|
|
) => {
|
|
setListChanged(event.detail);
|
|
};
|
|
managedResourcesState.addEventListener(
|
|
"resourcesChange",
|
|
onResourcesChange,
|
|
);
|
|
managedResourcesState.addEventListener(
|
|
"listChangedChange",
|
|
onListChangedChange,
|
|
);
|
|
return () => {
|
|
managedResourcesState.removeEventListener(
|
|
"resourcesChange",
|
|
onResourcesChange,
|
|
);
|
|
managedResourcesState.removeEventListener(
|
|
"listChangedChange",
|
|
onListChangedChange,
|
|
);
|
|
};
|
|
}, [managedResourcesState]);
|
|
|
|
const error = useListError(managedResourcesState);
|
|
|
|
const refresh = useCallback(async (): Promise<Resource[]> => {
|
|
if (!managedResourcesState || !client) return [];
|
|
// A user-initiated refresh acknowledges the change — clear the indicator
|
|
// BEFORE awaiting the fetch, not after. If a `resources/list_changed`
|
|
// arrives mid-fetch, the state re-sets the flag (and auto-refreshes);
|
|
// clearing afterward would wipe that genuinely-new signal and the user
|
|
// would miss it. Clearing up front acknowledges only the change in hand.
|
|
managedResourcesState.clearListChanged();
|
|
// A user-initiated refresh forces a cache-bypassing round trip
|
|
// (`cacheMode: "refresh"`) so a modern server's `ttlMs`-cached list can't
|
|
// return stale — and re-stores the fresh aggregate.
|
|
const next = await managedResourcesState.refresh(undefined, "refresh");
|
|
setResources(next);
|
|
return next;
|
|
}, [client, managedResourcesState]);
|
|
|
|
const clearListChanged = useCallback(() => {
|
|
managedResourcesState?.clearListChanged();
|
|
}, [managedResourcesState]);
|
|
|
|
return { resources, error, listChanged, refresh, clearListChanged };
|
|
}
|