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>
102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import type { InspectorClientProtocol } from "../mcp/inspectorClientProtocol.js";
|
|
import type {
|
|
PagedPromptsState,
|
|
PagedPromptsStateEventMap,
|
|
LoadPageResult,
|
|
} 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[];
|
|
/** 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,
|
|
metadata?: Record<string, string>,
|
|
) => Promise<LoadPageResult>;
|
|
clear: () => void;
|
|
}
|
|
|
|
/**
|
|
* React hook that subscribes to PagedPromptsState and returns prompts +
|
|
* pagination progress + loadPage. The state store owns loading; this mirrors
|
|
* its observable state.
|
|
*/
|
|
export function usePagedPrompts(
|
|
client: InspectorClientProtocol | null,
|
|
pagedPromptsState: PagedPromptsState | null,
|
|
): UsePagedPromptsResult {
|
|
const [prompts, setPrompts] = useState<Prompt[]>(
|
|
pagedPromptsState?.getPrompts() ?? [],
|
|
);
|
|
const [nextCursor, setNextCursor] = useState<string | undefined>(
|
|
pagedPromptsState?.getPagination().nextCursor,
|
|
);
|
|
const [pageCount, setPageCount] = useState<number>(
|
|
pagedPromptsState?.getPagination().pageCount ?? 0,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!pagedPromptsState) {
|
|
setPrompts([]);
|
|
setNextCursor(undefined);
|
|
setPageCount(0);
|
|
return;
|
|
}
|
|
setPrompts(pagedPromptsState.getPrompts());
|
|
setNextCursor(pagedPromptsState.getPagination().nextCursor);
|
|
setPageCount(pagedPromptsState.getPagination().pageCount);
|
|
const onPromptsChange = (
|
|
event: TypedEventGeneric<PagedPromptsStateEventMap, "promptsChange">,
|
|
) => {
|
|
setPrompts(event.detail);
|
|
};
|
|
const onPaginationChange = (
|
|
event: TypedEventGeneric<PagedPromptsStateEventMap, "paginationChange">,
|
|
) => {
|
|
setNextCursor(event.detail.nextCursor);
|
|
setPageCount(event.detail.pageCount);
|
|
};
|
|
pagedPromptsState.addEventListener("promptsChange", onPromptsChange);
|
|
pagedPromptsState.addEventListener("paginationChange", onPaginationChange);
|
|
return () => {
|
|
pagedPromptsState.removeEventListener("promptsChange", onPromptsChange);
|
|
pagedPromptsState.removeEventListener(
|
|
"paginationChange",
|
|
onPaginationChange,
|
|
);
|
|
};
|
|
}, [pagedPromptsState]);
|
|
|
|
const error = useListError(pagedPromptsState);
|
|
|
|
const loadPage = useCallback(
|
|
async (
|
|
cursor?: string,
|
|
metadata?: Record<string, string>,
|
|
): Promise<LoadPageResult> => {
|
|
if (!pagedPromptsState || !client) {
|
|
return { prompts: [], nextCursor: undefined };
|
|
}
|
|
return pagedPromptsState.loadPage(cursor, metadata);
|
|
},
|
|
[client, pagedPromptsState],
|
|
);
|
|
|
|
const clear = useCallback(() => {
|
|
pagedPromptsState?.clear();
|
|
}, [pagedPromptsState]);
|
|
|
|
return { prompts, nextCursor, pageCount, error, loadPage, clear };
|
|
}
|