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>
95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import type { InspectorClientProtocol } from "../mcp/inspectorClientProtocol.js";
|
|
import type {
|
|
PagedToolsState,
|
|
PagedToolsStateEventMap,
|
|
LoadPageResult,
|
|
} 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[];
|
|
/** The server's `nextCursor` from the last page (undefined = at the end). */
|
|
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;
|
|
}
|
|
|
|
/**
|
|
* React hook that subscribes to PagedToolsState and returns tools + pagination
|
|
* progress + loadPage. The state store owns loading (incl. the connect-time
|
|
* page-1 load in paginated mode); this hook just mirrors its observable
|
|
* state.
|
|
*/
|
|
export function usePagedTools(
|
|
client: InspectorClientProtocol | null,
|
|
pagedToolsState: PagedToolsState | null,
|
|
): UsePagedToolsResult {
|
|
const [tools, setTools] = useState<Tool[]>(pagedToolsState?.getTools() ?? []);
|
|
const [nextCursor, setNextCursor] = useState<string | undefined>(
|
|
pagedToolsState?.getPagination().nextCursor,
|
|
);
|
|
const [pageCount, setPageCount] = useState<number>(
|
|
pagedToolsState?.getPagination().pageCount ?? 0,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!pagedToolsState) {
|
|
setTools([]);
|
|
setNextCursor(undefined);
|
|
setPageCount(0);
|
|
return;
|
|
}
|
|
setTools(pagedToolsState.getTools());
|
|
setNextCursor(pagedToolsState.getPagination().nextCursor);
|
|
setPageCount(pagedToolsState.getPagination().pageCount);
|
|
const onToolsChange = (
|
|
event: TypedEventGeneric<PagedToolsStateEventMap, "toolsChange">,
|
|
) => {
|
|
setTools(event.detail);
|
|
};
|
|
const onPaginationChange = (
|
|
event: TypedEventGeneric<PagedToolsStateEventMap, "paginationChange">,
|
|
) => {
|
|
setNextCursor(event.detail.nextCursor);
|
|
setPageCount(event.detail.pageCount);
|
|
};
|
|
pagedToolsState.addEventListener("toolsChange", onToolsChange);
|
|
pagedToolsState.addEventListener("paginationChange", onPaginationChange);
|
|
return () => {
|
|
pagedToolsState.removeEventListener("toolsChange", onToolsChange);
|
|
pagedToolsState.removeEventListener(
|
|
"paginationChange",
|
|
onPaginationChange,
|
|
);
|
|
};
|
|
}, [pagedToolsState]);
|
|
|
|
const error = useListError(pagedToolsState);
|
|
|
|
const loadPage = useCallback(
|
|
async (cursor?: string): Promise<LoadPageResult> => {
|
|
if (!pagedToolsState || !client) {
|
|
return { tools: [], nextCursor: undefined };
|
|
}
|
|
return pagedToolsState.loadPage(cursor);
|
|
},
|
|
[client, pagedToolsState],
|
|
);
|
|
|
|
const clear = useCallback(() => {
|
|
pagedToolsState?.clear();
|
|
}, [pagedToolsState]);
|
|
|
|
return { tools, nextCursor, pageCount, error, loadPage, clear };
|
|
}
|