feat(web): tool progress toasts + persist all per-screen state across navigation (#1414, #1417) (#1420)
* feat(web): tool progress toasts + persist tool selection/result across navigation (#1414) Surface incoming notifications/progress as toasts so the user can watch a long-running tool's progress without leaving the tool view — the v2 replacement for v1's always-visible "Server Notifications" shelf. Toasts are keyed by progress stream and updated (not stacked) per tick so a chatty server updates one toast rather than flooding the corner. Progress notifications still land in the History tab via the existing transport-level tracking. Companion change: lift the selected tool and its form values into App.tsx alongside the already-lifted toolCallState, make ToolsScreen controlled, and drop the clear-on-unmount effect. Leaving the Tools tab and returning now preserves selection, inputs, and result. All three reset together on disconnect via resetSessionScopedUiState, preserving the #1368/#1394 behavior. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(web): persist per-screen selection/search/filter across navigation (#1417) Lift every screen's selection, form, search, and filter state out of the screen components into session-scoped state owned by App, passed down as controlled props. The screens unmount on tab switch, so this is what keeps the user's context in place when they navigate away and back within a live session. State is cleared only on disconnect (resetSessionScopedUiState) or an explicit user action — never on plain navigation. Lifted per screen: - Tools: sidebar search (selection/form/result were lifted in #1414) - Prompts: selected prompt, argument values, submitted marker, search - Resources: selected resource/template URI, originating-template marker, search, accordion open-sections - Apps: selected app, form values, search (running/maximized stay local — they're tied to the live iframe/bridge that is torn down on unmount) - Tasks: search + status filter - Logs: filter text + visible-level set - History: search + method filter - Network: filter text + visible-category set The four sidebar *Controls (Tool/Prompt/App/Resource) become controlled for search; ResourceControls also controls accordion open-sections. Level/category default maps move to logLevels.ts / fetchCategories.ts so the screen files keep a single component export. Pagination already persists (it lives in the App-level Paged*State managers), so no work was needed there. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(web): persist list scroll position across navigation + reset tests (#1417) Add useScrollMemory: a module-keyed hook that remembers a Mantine ScrollArea's offset across unmount/remount (the screens unmount on tab switch). Scroll lives in a module-scope map rather than threaded App state — it's ephemeral DOM state, and threading ~16 more props would balloon the surface for no benefit. App calls clearScrollMemory() in resetSessionScopedUiState so offsets clear on disconnect alongside the lifted selection/filter state. Wired into the four main list panels (Logs, History, Network, Tasks) and the Tools/Prompts/Apps sidebar lists. Pagination already persists via the App-level Paged*State managers. Tests: useScrollMemory unit test (save/restore, key isolation, clear), and the App disconnect test now also exercises representative lifted UI state (tool search, prompt selection, log filter) clearing on disconnect. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * refactor(web): collapse per-screen lifted state into one {screen}Ui object Replace the ~46 individual selection/search/filter props threaded App → InspectorView → screen with one `{screen}Ui` object + one `on{Screen}UiChange` setter per screen (8 pairs). Each screen reads its fields from `ui` and updates via `onUiChange({ ...ui, field })`; the in-flight result panels (toolCallState / getPromptState / readResourceState) stay separate since they're written by App's async action handlers, not the screens. The `*UiState` interfaces live with their screens; the empty-state defaults are gathered in screenUiState.ts so the screen files keep a single component export (react-refresh), mirroring logLevels.ts / fetchCategories.ts. Trims InspectorView's prop surface substantially and keeps the persistence behavior identical. Tests/stories collapse their stateful wrappers to a single ui object; added Tools/Tasks/History interaction tests to keep per-file coverage above the gate. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * fix(web): dismiss visible progress toasts on client teardown (#1414 review) The progressNotification effect cleanup cleared its id-tracking set but left on-screen "Tool progress" toasts to auto-close up to 5s later — they could linger into the next session, and the lingering toast's onClose could delete an id from the new session's set and trigger a duplicate-id re-show. Hide each tracked toast in cleanup so both gaps close. Addresses @claude review note #2. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat(web): clear the tool result when a different tool is selected The Tools result panel renders `toolCallState` regardless of which tool is selected, so selecting a new tool used to leave the previous tool's result showing beneath it. Route tools UI changes through an App handler that drops `toolCallState` whenever `selectedToolName` changes; search/form edits keep the selection (and the result) intact. Tests cover both the clear-on-switch and keep-on-search paths. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cliff Hall
GitHub
parent
8ebd55723f
commit
8923a9bbf9
1 changed files with 1741 additions and 316 deletions
|
|
@ -13,10 +13,16 @@ import type {
|
|||
InitializeResult,
|
||||
LoggingLevel,
|
||||
LoggingMessageNotification,
|
||||
Progress,
|
||||
ProgressToken,
|
||||
Tool,
|
||||
} from "@modelcontextprotocol/sdk/types.js";
|
||||
import { InspectorClient } from "@inspector/core/mcp/index.js";
|
||||
import type { JsonValue } from "@inspector/core/mcp/index.js";
|
||||
import type {
|
||||
InspectorClientEventMap,
|
||||
JsonValue,
|
||||
} from "@inspector/core/mcp/index.js";
|
||||
import type { TypedEventGeneric } from "@inspector/core/mcp/typedEventTarget.js";
|
||||
import type {
|
||||
InspectorServerSettings,
|
||||
MCPServerConfig,
|
||||
|
|
@ -59,9 +65,23 @@ import { useFetchRequestLog } from "@inspector/core/react/useFetchRequestLog.js"
|
|||
import { useSandboxUrl } from "@inspector/core/react/useSandboxUrl.js";
|
||||
import { usePendingClientRequests } from "@inspector/core/react/usePendingClientRequests.js";
|
||||
import { InspectorView } from "./components/views/InspectorView/InspectorView";
|
||||
import type { ToolCallState } from "./components/screens/ToolsScreen/ToolsScreen";
|
||||
import type {
|
||||
ToolCallState,
|
||||
ToolsUiState,
|
||||
} from "./components/screens/ToolsScreen/ToolsScreen";
|
||||
import type { GetPromptState } from "./components/screens/PromptsScreen/PromptsScreen";
|
||||
import type { ReadResourceState } from "./components/screens/ResourcesScreen/ResourcesScreen";
|
||||
import {
|
||||
EMPTY_TOOLS_UI,
|
||||
EMPTY_PROMPTS_UI,
|
||||
EMPTY_RESOURCES_UI,
|
||||
EMPTY_APPS_UI,
|
||||
EMPTY_TASKS_UI,
|
||||
EMPTY_LOGS_UI,
|
||||
EMPTY_HISTORY_UI,
|
||||
EMPTY_NETWORK_UI,
|
||||
} from "./components/screens/screenUiState";
|
||||
import { clearScrollMemory } from "./hooks/useScrollMemory";
|
||||
import type { AppRendererHandle } from "./components/elements/AppRenderer/AppRenderer";
|
||||
import { createAppBridgeFactory } from "./components/elements/AppRenderer/createAppBridgeFactory";
|
||||
import type { LogEntryData } from "./components/elements/LogEntry/LogEntry";
|
||||
|
|
@ -195,6 +215,34 @@ const OutputValidationToastMessage = ({
|
|||
</Stack>
|
||||
);
|
||||
|
||||
// How long a progress toast lingers after its last tick. Each new tick on the
|
||||
// same progress stream resets this window (via `notifications.update`), so a
|
||||
// steady stream keeps one toast alive; the toast clears a few seconds after
|
||||
// progress stops (i.e. the call finished or went quiet).
|
||||
const PROGRESS_TOAST_AUTOCLOSE_MS = 5000;
|
||||
|
||||
// Stable toast id for a progress stream. Notifications keyed by this id are
|
||||
// replaced (not stacked) so a chatty server updates one toast per stream
|
||||
// rather than flooding the corner. The injected `progressToken` correlates a
|
||||
// stream with the request that triggered it; when absent (the common case —
|
||||
// the inspector doesn't expose a caller token), all ticks share one toast.
|
||||
function progressToastId(token: ProgressToken | undefined): string {
|
||||
return `progress-${String(token ?? "default")}`;
|
||||
}
|
||||
|
||||
// One-line toast body: "<message> — <progress> / <total> (NN%)". The fraction
|
||||
// and percentage are omitted when the server sends no `total`.
|
||||
function formatProgressToastMessage(
|
||||
detail: Progress & { progressToken?: ProgressToken },
|
||||
): string {
|
||||
const { progress, total, message } = detail;
|
||||
const ratio =
|
||||
total !== undefined && total > 0
|
||||
? `${progress} / ${total} (${Math.round((progress / total) * 100)}%)`
|
||||
: `${progress}`;
|
||||
return message ? `${message} — ${ratio}` : ratio;
|
||||
}
|
||||
|
||||
function App() {
|
||||
// Theme toggle plumbing (preserved from the pre-wire placeholder).
|
||||
const { setColorScheme } = useMantineColorScheme();
|
||||
|
|
@ -314,6 +362,23 @@ function App() {
|
|||
ReadResourceState | undefined
|
||||
>(undefined);
|
||||
|
||||
// Per-screen selection / search / filter state, one object per screen. Lifted
|
||||
// here (out of the individual screens) so it persists across tab navigation
|
||||
// within a live session — the screens unmount on tab switch, so screen-local
|
||||
// state would be lost. Cleared only on disconnect (via
|
||||
// `resetSessionScopedUiState`) or an explicit user action, never on plain
|
||||
// navigation (#1414/#1417). The in-flight result panels (`toolCallState` /
|
||||
// `getPromptState` / `readResourceState`) stay separate — they're written by
|
||||
// the async action handlers below, not by the screens.
|
||||
const [toolsUi, setToolsUi] = useState(EMPTY_TOOLS_UI);
|
||||
const [promptsUi, setPromptsUi] = useState(EMPTY_PROMPTS_UI);
|
||||
const [resourcesUi, setResourcesUi] = useState(EMPTY_RESOURCES_UI);
|
||||
const [appsUi, setAppsUi] = useState(EMPTY_APPS_UI);
|
||||
const [tasksUi, setTasksUi] = useState(EMPTY_TASKS_UI);
|
||||
const [logsUi, setLogsUi] = useState(EMPTY_LOGS_UI);
|
||||
const [historyUi, setHistoryUi] = useState(EMPTY_HISTORY_UI);
|
||||
const [networkUi, setNetworkUi] = useState(EMPTY_NETWORK_UI);
|
||||
|
||||
// Handshake telemetry. `connectStartRef` is set at the "connecting" edge
|
||||
// and consumed at the "connected" edge — a ref (not state) so the
|
||||
// intervening rerenders don't reset it.
|
||||
|
|
@ -325,6 +390,12 @@ function App() {
|
|||
// render; this ref ensures the token exchange fires exactly once per load.
|
||||
const oauthCallbackHandledRef = useRef(false);
|
||||
|
||||
// Tracks which progress streams currently have a live toast, so each new tick
|
||||
// updates the existing toast instead of stacking a fresh one. Entries are
|
||||
// removed when their toast closes (auto-dismiss or user). A ref (not state)
|
||||
// because it's incidental bookkeeping that must not trigger re-renders.
|
||||
const progressToastIdsRef = useRef<Set<string>>(new Set());
|
||||
|
||||
// Hook layer. Each hook subscribes to its respective event source and
|
||||
// re-renders the App on change. When `inspectorClient` / state managers
|
||||
// are null, the hooks degrade to empty results.
|
||||
|
|
@ -410,7 +481,18 @@ function App() {
|
|||
setToolCallState(undefined);
|
||||
setGetPromptState(undefined);
|
||||
setReadResourceState(undefined);
|
||||
setToolsUi(EMPTY_TOOLS_UI);
|
||||
setPromptsUi(EMPTY_PROMPTS_UI);
|
||||
setResourcesUi(EMPTY_RESOURCES_UI);
|
||||
setAppsUi(EMPTY_APPS_UI);
|
||||
setTasksUi(EMPTY_TASKS_UI);
|
||||
setLogsUi(EMPTY_LOGS_UI);
|
||||
setHistoryUi(EMPTY_HISTORY_UI);
|
||||
setNetworkUi(EMPTY_NETWORK_UI);
|
||||
setCurrentLogLevel("info");
|
||||
// Remembered scroll offsets are session-scoped too — drop them so the next
|
||||
// session's screens start at the top (#1417).
|
||||
clearScrollMemory();
|
||||
}, []);
|
||||
|
||||
// Reset activeServerId whenever the live session ends. Without this the
|
||||
|
|
@ -438,6 +520,56 @@ function App() {
|
|||
};
|
||||
}, [inspectorClient, resetSessionScopedUiState]);
|
||||
|
||||
// Surface incoming `notifications/progress` as toasts so the user can watch a
|
||||
// long-running tool's progress while staying on the tool view — the v2
|
||||
// replacement for v1's always-visible "Server Notifications" shelf (#1414).
|
||||
// The full notification history still lives in the History tab; these toasts
|
||||
// are the at-a-glance, in-context signal. Toasts are keyed by progress stream
|
||||
// (see `progressToastId`) and replaced per tick so a chatty server updates one
|
||||
// toast rather than stacking one per tick.
|
||||
useEffect(() => {
|
||||
if (!inspectorClient) return;
|
||||
const liveToastIds = progressToastIdsRef.current;
|
||||
const onProgress = (
|
||||
event: TypedEventGeneric<InspectorClientEventMap, "progressNotification">,
|
||||
) => {
|
||||
const detail = event.detail;
|
||||
const id = progressToastId(detail.progressToken);
|
||||
const message = formatProgressToastMessage(detail);
|
||||
if (liveToastIds.has(id)) {
|
||||
notifications.update({
|
||||
id,
|
||||
title: "Tool progress",
|
||||
message,
|
||||
color: "blue",
|
||||
autoClose: PROGRESS_TOAST_AUTOCLOSE_MS,
|
||||
});
|
||||
return;
|
||||
}
|
||||
liveToastIds.add(id);
|
||||
notifications.show({
|
||||
id,
|
||||
title: "Tool progress",
|
||||
message,
|
||||
color: "blue",
|
||||
autoClose: PROGRESS_TOAST_AUTOCLOSE_MS,
|
||||
onClose: () => liveToastIds.delete(id),
|
||||
});
|
||||
};
|
||||
inspectorClient.addEventListener("progressNotification", onProgress);
|
||||
return () => {
|
||||
inspectorClient.removeEventListener("progressNotification", onProgress);
|
||||
// Dismiss any still-visible progress toasts when the client is swapped
|
||||
// out, then drop the stream bookkeeping. Hiding them (rather than letting
|
||||
// them auto-close up to PROGRESS_TOAST_AUTOCLOSE_MS later) keeps a stale
|
||||
// "Tool progress" toast from lingering into the next session, and avoids
|
||||
// a race where the lingering toast's `onClose` would later delete an id
|
||||
// from the *new* session's set and trigger a duplicate-id re-show.
|
||||
liveToastIds.forEach((id) => notifications.hide(id));
|
||||
liveToastIds.clear();
|
||||
};
|
||||
}, [inspectorClient]);
|
||||
|
||||
// Build the InitializeResult the connected ViewHeader expects from the
|
||||
// hook's split fields. `protocolVersion` is hard-coded for now — the
|
||||
// useInspectorClient hook doesn't expose it. TODO(#1324): consume the
|
||||
|
|
@ -929,6 +1061,23 @@ function App() {
|
|||
setToolCallState(undefined);
|
||||
}, []);
|
||||
|
||||
// Tools UI changes flow through here so selecting a *different* tool also
|
||||
// drops the previous tool's result — the result panel renders `toolCallState`
|
||||
// regardless of selection, so without this a stale result would linger under
|
||||
// the newly-selected tool (which has no result of its own yet). Search and
|
||||
// form edits keep `selectedToolName` unchanged, so they leave the result be.
|
||||
// Depends on `selectedToolName` only (not the whole `toolsUi`), so a search
|
||||
// keystroke doesn't churn the callback identity.
|
||||
const onToolsUiChange = useCallback(
|
||||
(next: ToolsUiState) => {
|
||||
if (next.selectedToolName !== toolsUi.selectedToolName) {
|
||||
setToolCallState(undefined);
|
||||
}
|
||||
setToolsUi(next);
|
||||
},
|
||||
[toolsUi.selectedToolName],
|
||||
);
|
||||
|
||||
// --- MCP Apps handlers. Unlike onCallTool (which feeds the Tools panel),
|
||||
// these route the tool input/result into the running app via the renderer's
|
||||
// imperative handle. ---
|
||||
|
|
@ -1424,6 +1573,14 @@ function App() {
|
|||
toolCallState={toolCallState}
|
||||
getPromptState={getPromptState}
|
||||
readResourceState={effectiveReadResourceState}
|
||||
toolsUi={toolsUi}
|
||||
promptsUi={promptsUi}
|
||||
resourcesUi={resourcesUi}
|
||||
appsUi={appsUi}
|
||||
tasksUi={tasksUi}
|
||||
logsUi={logsUi}
|
||||
historyUi={historyUi}
|
||||
networkUi={networkUi}
|
||||
currentLogLevel={currentLogLevel}
|
||||
sandboxPath={sandboxUrl}
|
||||
bridgeFactory={sandboxBridgeFactory}
|
||||
|
|
@ -1447,15 +1604,18 @@ function App() {
|
|||
const target = servers.find((s) => s.id === id);
|
||||
if (target) setRemoveTarget(target);
|
||||
}}
|
||||
onToolsUiChange={onToolsUiChange}
|
||||
onCallTool={(name, args) => {
|
||||
void onCallTool(name, args);
|
||||
}}
|
||||
onClearToolResult={onClearToolResult}
|
||||
onRefreshTools={onRefreshTools}
|
||||
onPromptsUiChange={setPromptsUi}
|
||||
onGetPrompt={(name, args) => {
|
||||
void onGetPrompt(name, args);
|
||||
}}
|
||||
onRefreshPrompts={onRefreshPrompts}
|
||||
onResourcesUiChange={setResourcesUi}
|
||||
onReadResource={(uri) => {
|
||||
void onReadResource(uri);
|
||||
}}
|
||||
|
|
@ -1464,18 +1624,23 @@ function App() {
|
|||
onRefreshResources={onRefreshResources}
|
||||
onCompleteArgument={onCompleteArgument}
|
||||
completionsSupported={capabilities?.completions !== undefined}
|
||||
onTasksUiChange={setTasksUi}
|
||||
onCancelTask={onCancelTask}
|
||||
onClearCompletedTasks={todoNoop}
|
||||
onRefreshTasks={onRefreshTasks}
|
||||
onSetLogLevel={onSetLogLevel}
|
||||
onLogsUiChange={setLogsUi}
|
||||
onClearLogs={onClearLogs}
|
||||
onExportLogs={onExportLogs}
|
||||
onHistoryUiChange={setHistoryUi}
|
||||
onClearHistory={onClearHistory}
|
||||
onExportHistory={onExportHistory}
|
||||
onReplayHistory={todoNoop}
|
||||
onTogglePinHistory={todoNoop}
|
||||
onNetworkUiChange={setNetworkUi}
|
||||
onClearNetwork={onClearNetwork}
|
||||
onExportNetwork={onExportNetwork}
|
||||
onAppsUiChange={setAppsUi}
|
||||
onSelectApp={onSelectApp}
|
||||
onOpenApp={(name, args) => {
|
||||
void onOpenApp(name, args);
|
||||
|
|
|
|||
Loading…
Reference in a new issue