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>
98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import type { InspectorClientProtocol } from "../mcp/inspectorClientProtocol.js";
|
|
import type {
|
|
ManagedPromptsState,
|
|
ManagedPromptsStateEventMap,
|
|
} from "../mcp/state/managedPromptsState.js";
|
|
import type { Prompt } from "@modelcontextprotocol/client";
|
|
import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
|
|
import { useListError } from "./useListError.js";
|
|
|
|
export interface UseManagedPromptsResult {
|
|
/**
|
|
* 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;
|
|
prompts: Prompt[];
|
|
/** True when a `prompts/list_changed` arrived since the last user refresh. */
|
|
listChanged: boolean;
|
|
refresh: () => Promise<Prompt[]>;
|
|
/** Acknowledge the list-changed indicator without fetching (#1721). */
|
|
clearListChanged: () => void;
|
|
}
|
|
|
|
/**
|
|
* React hook that subscribes to ManagedPromptsState and returns prompts + refresh.
|
|
*/
|
|
export function useManagedPrompts(
|
|
client: InspectorClientProtocol | null,
|
|
managedPromptsState: ManagedPromptsState | null,
|
|
): UseManagedPromptsResult {
|
|
const [prompts, setPrompts] = useState<Prompt[]>(
|
|
managedPromptsState?.getPrompts() ?? [],
|
|
);
|
|
const [listChanged, setListChanged] = useState<boolean>(
|
|
managedPromptsState?.getListChanged() ?? false,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!managedPromptsState) {
|
|
setPrompts([]);
|
|
setListChanged(false);
|
|
return;
|
|
}
|
|
setPrompts(managedPromptsState.getPrompts());
|
|
setListChanged(managedPromptsState.getListChanged());
|
|
const onPromptsChange = (
|
|
event: TypedEventGeneric<ManagedPromptsStateEventMap, "promptsChange">,
|
|
) => {
|
|
setPrompts(event.detail);
|
|
};
|
|
const onListChangedChange = (
|
|
event: TypedEventGeneric<
|
|
ManagedPromptsStateEventMap,
|
|
"listChangedChange"
|
|
>,
|
|
) => {
|
|
setListChanged(event.detail);
|
|
};
|
|
managedPromptsState.addEventListener("promptsChange", onPromptsChange);
|
|
managedPromptsState.addEventListener(
|
|
"listChangedChange",
|
|
onListChangedChange,
|
|
);
|
|
return () => {
|
|
managedPromptsState.removeEventListener("promptsChange", onPromptsChange);
|
|
managedPromptsState.removeEventListener(
|
|
"listChangedChange",
|
|
onListChangedChange,
|
|
);
|
|
};
|
|
}, [managedPromptsState]);
|
|
|
|
const error = useListError(managedPromptsState);
|
|
|
|
const refresh = useCallback(async (): Promise<Prompt[]> => {
|
|
if (!managedPromptsState || !client) return [];
|
|
// A user-initiated refresh acknowledges the change — clear the indicator
|
|
// BEFORE awaiting the fetch, not after. If a `prompts/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.
|
|
managedPromptsState.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 managedPromptsState.refresh(undefined, "refresh");
|
|
setPrompts(next);
|
|
return next;
|
|
}, [client, managedPromptsState]);
|
|
|
|
const clearListChanged = useCallback(() => {
|
|
managedPromptsState?.clearListChanged();
|
|
}, [managedPromptsState]);
|
|
|
|
return { prompts, error, listChanged, refresh, clearListChanged };
|
|
}
|