From 8c1d13dbd729e26d92cca4bc9f6e38260d6d4a71 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 2 Jun 2026 19:58:56 -0400
Subject: [PATCH 1/6] feat(web): tool progress toasts + persist tool
 selection/result across navigation (#1414)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 clients/web/src/App.test.tsx                  | 107 ++++++++++++++++++
 clients/web/src/App.tsx                       | 105 ++++++++++++++++-
 .../ToolsScreen/ToolsScreen.stories.tsx       |  33 +++++-
 .../screens/ToolsScreen/ToolsScreen.test.tsx  |  80 +++++++++++--
 .../screens/ToolsScreen/ToolsScreen.tsx       |  47 ++++----
 .../InspectorView/InspectorView.stories.tsx   |   2 +
 .../InspectorView/InspectorView.test.tsx      |   2 +
 .../views/InspectorView/InspectorView.tsx     |  14 +++
 8 files changed, 346 insertions(+), 44 deletions(-)

diff --git a/clients/web/src/App.test.tsx b/clients/web/src/App.test.tsx
index 19d43ae48..4cff411e7 100644
--- a/clients/web/src/App.test.tsx
+++ b/clients/web/src/App.test.tsx
@@ -7,6 +7,21 @@ import {
 } from "./test/renderWithMantine";
 import userEvent from "@testing-library/user-event";
 
+// Spy on the toast layer so the progress-notification tests can assert the
+// show/update calls without mounting Mantine's <Notifications/> portal.
+// `vi.hoisted` lets the mock factory (hoisted above imports) reach the spies.
+const { notificationsMock } = vi.hoisted(() => ({
+  notificationsMock: {
+    show: vi.fn(),
+    update: vi.fn(),
+    hide: vi.fn(),
+    clean: vi.fn(),
+  },
+}));
+vi.mock("@mantine/notifications", () => ({
+  notifications: notificationsMock,
+}));
+
 // App is a wiring component: it owns session-scoped UI state (the per-call
 // result panels and the optimistic log level) and resets it when the active
 // InspectorClient emits `disconnect`. These tests exercise that reset in
@@ -177,10 +192,12 @@ vi.mock("@inspector/core/react/useSettingsDraft.js", () => ({
 vi.mock("./components/views/InspectorView/InspectorView", () => ({
   InspectorView: (props: {
     toolCallState?: { status?: string };
+    selectedToolName?: string;
     getPromptState?: { status?: string };
     readResourceState?: { status?: string };
     currentLogLevel?: string;
     onToggleConnection: (id: string) => void;
+    onSelectTool: (name: string) => void;
     onCallTool: (name: string, args: Record<string, unknown>) => void;
     onGetPrompt: (name: string, args: Record<string, string>) => void;
     onReadResource: (uri: string) => void;
@@ -190,6 +207,9 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
       <span data-testid="tool-status">
         {props.toolCallState?.status ?? "none"}
       </span>
+      <span data-testid="selected-tool">
+        {props.selectedToolName ?? "none"}
+      </span>
       <span data-testid="prompt-status">
         {props.getPromptState?.status ?? "none"}
       </span>
@@ -198,6 +218,9 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
       </span>
       <span data-testid="log-level">{props.currentLogLevel}</span>
       <button onClick={() => props.onToggleConnection("A")}>connect</button>
+      <button onClick={() => props.onSelectTool("get_acts")}>
+        select-tool
+      </button>
       <button onClick={() => props.onCallTool("get_acts", {})}>call</button>
       <button onClick={() => props.onGetPrompt("greet", {})}>get-prompt</button>
       <button onClick={() => props.onReadResource("res://x")}>
@@ -238,6 +261,13 @@ describe("App session-scoped state reset on disconnect", () => {
       expect(screen.getByTestId("resource-status")).toHaveTextContent("ok");
     });
 
+    // Select a tool: the selection is App-owned (persists across navigation),
+    // so it must also reset on disconnect.
+    await user.click(screen.getByText("select-tool"));
+    await waitFor(() =>
+      expect(screen.getByTestId("selected-tool")).toHaveTextContent("get_acts"),
+    );
+
     // Bump the optimistic log level off its "info" default.
     await user.click(screen.getByText("set-level"));
     await waitFor(() =>
@@ -254,8 +284,85 @@ describe("App session-scoped state reset on disconnect", () => {
       expect(screen.getByTestId("prompt-status")).toHaveTextContent("none");
       expect(screen.getByTestId("resource-status")).toHaveTextContent("none");
     });
+    expect(screen.getByTestId("selected-tool")).toHaveTextContent("none");
     expect(screen.getByTestId("log-level")).toHaveTextContent("info");
   });
+
+  it("persists the selected tool across navigation within a live session", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    // The selection lives in App (not the unmounting ToolsScreen), so once set
+    // it stays put through re-renders / tab switches until the session ends.
+    await user.click(screen.getByText("select-tool"));
+    await waitFor(() =>
+      expect(screen.getByTestId("selected-tool")).toHaveTextContent("get_acts"),
+    );
+  });
+});
+
+describe("App tool progress toasts", () => {
+  beforeEach(() => {
+    clientInstances.length = 0;
+    notificationsMock.show.mockClear();
+    notificationsMock.update.mockClear();
+  });
+
+  it("shows a toast on the first progress tick and updates it on later ticks", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    // First tick of a progress stream → a fresh toast keyed by its stream id.
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("progressNotification", {
+          detail: { progress: 1, total: 4, message: "Working" },
+        }),
+      );
+    });
+    expect(notificationsMock.show).toHaveBeenCalledTimes(1);
+    const shown = notificationsMock.show.mock.calls[0][0];
+    expect(shown.title).toBe("Tool progress");
+    expect(shown.message).toBe("Working — 1 / 4 (25%)");
+
+    // Second tick on the same stream → the existing toast is updated, not
+    // stacked, so a chatty server doesn't flood the corner.
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("progressNotification", {
+          detail: { progress: 2, total: 4, message: "Working" },
+        }),
+      );
+    });
+    expect(notificationsMock.show).toHaveBeenCalledTimes(1);
+    expect(notificationsMock.update).toHaveBeenCalledTimes(1);
+    expect(notificationsMock.update.mock.calls[0][0].message).toBe(
+      "Working — 2 / 4 (50%)",
+    );
+  });
+
+  it("formats a totalless progress tick as the bare count", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("progressNotification", {
+          detail: { progress: 7 },
+        }),
+      );
+    });
+    expect(notificationsMock.show.mock.calls[0][0].message).toBe("7");
+  });
 });
 
 describe("App pending server-initiated request modal", () => {
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index fac217582..195e1b1ae 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -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,
@@ -195,6 +201,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();
@@ -307,6 +341,18 @@ function App() {
   const [toolCallState, setToolCallState] = useState<ToolCallState | undefined>(
     undefined,
   );
+  // Selected tool + its form values live here (not inside ToolsScreen) so they
+  // survive a tab switch: InspectorView unmounts the outgoing screen, so local
+  // selection would be lost. Persisting them alongside `toolCallState` keeps the
+  // whole tool context — selection, inputs, and result — in place when the user
+  // navigates away (e.g. to watch progress) and back, within a live session
+  // (#1414). All three reset together on disconnect via `resetSessionScopedUiState`.
+  const [selectedToolName, setSelectedToolName] = useState<string | undefined>(
+    undefined,
+  );
+  const [toolFormValues, setToolFormValues] = useState<Record<string, unknown>>(
+    {},
+  );
   const [getPromptState, setGetPromptState] = useState<
     GetPromptState | undefined
   >(undefined);
@@ -325,6 +371,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.
@@ -408,6 +460,8 @@ function App() {
   // Setters are stable, so the callback identity never changes.
   const resetSessionScopedUiState = useCallback(() => {
     setToolCallState(undefined);
+    setSelectedToolName(undefined);
+    setToolFormValues({});
     setGetPromptState(undefined);
     setReadResourceState(undefined);
     setCurrentLogLevel("info");
@@ -438,6 +492,51 @@ 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);
+      // Drop stream bookkeeping when the client is swapped out; the next
+      // session starts with no live progress toasts tracked.
+      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
@@ -1422,6 +1521,8 @@ function App() {
         history={messages}
         network={fetchRequests}
         toolCallState={toolCallState}
+        selectedToolName={selectedToolName}
+        toolFormValues={toolFormValues}
         getPromptState={getPromptState}
         readResourceState={effectiveReadResourceState}
         currentLogLevel={currentLogLevel}
@@ -1447,6 +1548,8 @@ function App() {
           const target = servers.find((s) => s.id === id);
           if (target) setRemoveTarget(target);
         }}
+        onSelectTool={setSelectedToolName}
+        onToolFormChange={setToolFormValues}
         onCallTool={(name, args) => {
           void onCallTool(name, args);
         }}
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
index fd27224eb..a0060be26 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { ElicitRequest, Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Modal } from "@mantine/core";
@@ -10,17 +12,42 @@ import { PendingClientRequests } from "../../groups/PendingClientRequests/Pendin
 import { InlineSamplingRequest } from "../../groups/InlineSamplingRequest/InlineSamplingRequest";
 import { InlineElicitationRequest } from "../../groups/InlineElicitationRequest/InlineElicitationRequest";
 
+// ToolsScreen is controlled (selection + form values live in the parent — see
+// #1414). This wrapper holds that state so the play-driven tool clicks still
+// drive the detail panel, mirroring how App owns the state in the real app.
+function StatefulToolsScreen(args: ComponentProps<typeof ToolsScreen>) {
+  const [selectedToolName, setSelectedToolName] = useState(
+    args.selectedToolName,
+  );
+  const [formValues, setFormValues] = useState<Record<string, unknown>>(
+    args.formValues ?? {},
+  );
+  return (
+    <ToolsScreen
+      {...args}
+      selectedToolName={selectedToolName}
+      formValues={formValues}
+      onSelectTool={setSelectedToolName}
+      onFormChange={setFormValues}
+    />
+  );
+}
+
 const meta: Meta<typeof ToolsScreen> = {
   title: "Screens/ToolsScreen",
   component: ToolsScreen,
   parameters: { layout: "fullscreen" },
   args: {
     listChanged: false,
+    onSelectTool: fn(),
+    onFormChange: fn(),
     onRefreshList: fn(),
     onCallTool: fn(),
     onCancelCall: fn(),
     onClearResult: fn(),
   },
+  // Wrap in a stateful host so selection/form (now parent-owned) update on click.
+  render: (args) => <StatefulToolsScreen {...args} />,
 };
 
 export default meta;
@@ -197,7 +224,7 @@ export const WithSamplingModal: Story = {
   },
   render: (args) => (
     <>
-      <ToolsScreen {...args} />
+      <StatefulToolsScreen {...args} />
       <Modal opened={true} onClose={fn()} title="Sampling Request" size="lg">
         <SamplingRequestPanel
           request={{
@@ -240,7 +267,7 @@ export const WithElicitationModal: Story = {
   },
   render: (args) => (
     <>
-      <ToolsScreen {...args} />
+      <StatefulToolsScreen {...args} />
       <Modal opened={true} onClose={fn()} title="Elicitation Request" size="lg">
         <ElicitationFormPanel
           request={elicitFormRequest}
@@ -266,7 +293,7 @@ export const WithPendingRequests: Story = {
   },
   render: (args) => (
     <>
-      <ToolsScreen {...args} />
+      <StatefulToolsScreen {...args} />
       <Modal
         opened={true}
         onClose={fn()}
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
index 2372c6daa..49c63fcb4 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
@@ -1,8 +1,9 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { ToolsScreen } from "./ToolsScreen";
+import { ToolsScreen, type ToolsScreenProps } from "./ToolsScreen";
 
 const tools: Tool[] = [
   { name: "alpha", inputSchema: { type: "object" } },
@@ -19,10 +20,42 @@ const tools: Tool[] = [
 const baseProps = {
   tools,
   listChanged: false,
+  onSelectTool: vi.fn(),
+  onFormChange: vi.fn(),
   onRefreshList: vi.fn(),
   onCallTool: vi.fn(),
 };
 
+// ToolsScreen is controlled: selection + form values live in the parent (App)
+// so they persist across tab navigation (#1414). This host holds that state so
+// clicking a tool drives the detail panel, mirroring how App owns it. Props
+// passed in override defaults; the stateful selection/form wiring is applied
+// last so callers can still observe selections via the spied callbacks.
+function ControlledToolsScreen(props: Partial<ToolsScreenProps>) {
+  const [selectedToolName, setSelectedToolName] = useState<string | undefined>(
+    props.selectedToolName,
+  );
+  const [formValues, setFormValues] = useState<Record<string, unknown>>(
+    props.formValues ?? {},
+  );
+  return (
+    <ToolsScreen
+      {...baseProps}
+      {...props}
+      selectedToolName={selectedToolName}
+      formValues={formValues}
+      onSelectTool={(name) => {
+        setSelectedToolName(name);
+        props.onSelectTool?.(name);
+      }}
+      onFormChange={(values) => {
+        setFormValues(values);
+        props.onFormChange?.(values);
+      }}
+    />
+  );
+}
+
 describe("ToolsScreen", () => {
   it("renders the empty selection state", () => {
     renderWithMantine(<ToolsScreen {...baseProps} />);
@@ -34,13 +67,33 @@ describe("ToolsScreen", () => {
 
   it("shows the detail panel when a tool is selected", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<ToolsScreen {...baseProps} />);
+    renderWithMantine(<ControlledToolsScreen />);
     await user.click(screen.getByText("alpha"));
     expect(
       screen.queryByText("Select a tool to view details"),
     ).not.toBeInTheDocument();
   });
 
+  it("renders selection and result from props (persisted across navigation)", () => {
+    // App owns selection + result, so a remount after a tab switch re-renders
+    // with both still set — the detail and result panels show without any
+    // local re-selection.
+    renderWithMantine(
+      <ToolsScreen
+        {...baseProps}
+        selectedToolName="alpha"
+        callState={{
+          status: "ok",
+          result: { content: [{ type: "text", text: "ok" }] },
+        }}
+      />,
+    );
+    expect(
+      screen.queryByText("Select a tool to view details"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("Results")).toBeInTheDocument();
+  });
+
   it("renders the result panel when callState has a result", () => {
     renderWithMantine(
       <ToolsScreen
@@ -57,7 +110,7 @@ describe("ToolsScreen", () => {
   it("invokes onCallTool with form values on Execute", async () => {
     const user = userEvent.setup();
     const onCallTool = vi.fn();
-    renderWithMantine(<ToolsScreen {...baseProps} onCallTool={onCallTool} />);
+    renderWithMantine(<ControlledToolsScreen onCallTool={onCallTool} />);
     await user.click(screen.getByText("alpha"));
     await user.click(screen.getByRole("button", { name: /Execute/ }));
     expect(onCallTool).toHaveBeenCalledWith("alpha", {});
@@ -66,7 +119,7 @@ describe("ToolsScreen", () => {
   it("seeds schema defaults so untouched fields are sent on Execute", async () => {
     const user = userEvent.setup();
     const onCallTool = vi.fn();
-    renderWithMantine(<ToolsScreen {...baseProps} onCallTool={onCallTool} />);
+    renderWithMantine(<ControlledToolsScreen onCallTool={onCallTool} />);
     await user.click(screen.getByText("gamma"));
     // Execute without editing the form: the default must still be sent.
     await user.click(screen.getByRole("button", { name: /Execute/ }));
@@ -90,7 +143,9 @@ describe("ToolsScreen", () => {
     expect(onClearResult).toHaveBeenCalledTimes(1);
   });
 
-  it("clears the persisted result when the screen unmounts", () => {
+  it("does not clear the result when the screen unmounts", () => {
+    // The result is owned by App and must survive a tab switch (which unmounts
+    // the screen), so unmounting must NOT call onClearResult — see #1414.
     const onClearResult = vi.fn();
     const { unmount } = renderWithMantine(
       <ToolsScreen
@@ -102,17 +157,18 @@ describe("ToolsScreen", () => {
         }}
       />,
     );
-    expect(onClearResult).not.toHaveBeenCalled();
     unmount();
-    expect(onClearResult).toHaveBeenCalledTimes(1);
+    expect(onClearResult).not.toHaveBeenCalled();
   });
 
-  it("treats pending callState as executing", async () => {
-    const user = userEvent.setup();
+  it("treats pending callState as executing", () => {
     renderWithMantine(
-      <ToolsScreen {...baseProps} callState={{ status: "pending" }} />,
+      <ToolsScreen
+        {...baseProps}
+        selectedToolName="alpha"
+        callState={{ status: "pending" }}
+      />,
     );
-    await user.click(screen.getByText("alpha"));
     expect(screen.getByRole("button", { name: /Cancel/ })).toBeInTheDocument();
   });
 
@@ -122,11 +178,11 @@ describe("ToolsScreen", () => {
     renderWithMantine(
       <ToolsScreen
         {...baseProps}
+        selectedToolName="alpha"
         onCancelCall={onCancelCall}
         callState={{ status: "pending" }}
       />,
     );
-    await user.click(screen.getByText("alpha"));
     await user.click(screen.getByRole("button", { name: /Cancel/ }));
     expect(onCancelCall).toHaveBeenCalledTimes(1);
   });
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
index e0dc82e6f..168e2e99c 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useRef, useState } from "react";
 import { Card, Flex, Stack, Text } from "@mantine/core";
 import type { CallToolResult, Tool } from "@modelcontextprotocol/sdk/types.js";
 import { ToolControls } from "../../groups/ToolControls/ToolControls";
@@ -19,7 +18,14 @@ export interface ToolCallState {
 export interface ToolsScreenProps {
   tools: Tool[];
   callState?: ToolCallState;
+  // Selection + form values are controlled by the parent (App) so they persist
+  // across tab navigation within a live session — the screen unmounts on tab
+  // switch, so local state would be lost (#1414).
+  selectedToolName?: string;
+  formValues?: Record<string, unknown>;
   listChanged: boolean;
+  onSelectTool: (name: string) => void;
+  onFormChange: (values: Record<string, unknown>) => void;
   onRefreshList: () => void;
   onCallTool: (name: string, args: Record<string, unknown>) => void;
   onCancelCall?: () => void;
@@ -80,36 +86,23 @@ const EmptyState = Text.withProps({
 export function ToolsScreen({
   tools,
   callState,
+  selectedToolName,
+  formValues,
   listChanged,
+  onSelectTool,
+  onFormChange,
   onRefreshList,
   onCallTool,
   onCancelCall,
   onClearResult,
 }: ToolsScreenProps) {
-  const [selectedToolName, setSelectedToolName] = useState<string | undefined>(
-    undefined,
-  );
-  const [formValues, setFormValues] = useState<Record<string, unknown>>({});
   const selectedTool = selectedToolName
     ? tools.find((t) => t.name === selectedToolName)
     : undefined;
   const isExecuting = callState?.status === "pending";
-
-  // The result lives in App so it survives pending → ok/error without
-  // remounting the screen. But the screen's selection is local and resets when
-  // the screen unmounts on tab switch — leaving the Results panel showing a
-  // result with no selected tool. Clear the result on unmount so returning to
-  // the screen starts from a clean slate. A ref keeps the latest handler so the
-  // effect can stay mount/unmount-only without re-running mid-session.
-  const onClearResultRef = useRef(onClearResult);
-  useEffect(() => {
-    onClearResultRef.current = onClearResult;
-  }, [onClearResult]);
-  useEffect(() => {
-    return () => {
-      onClearResultRef.current?.();
-    };
-  }, []);
+  // Selection, inputs, and result all live in App now, so they persist when the
+  // user navigates away and back — no clear-on-unmount needed (#1414).
+  const values = formValues ?? {};
 
   return (
     <ScreenLayout>
@@ -126,10 +119,8 @@ export function ToolsScreen({
               // form shows defaults via resolveValue, but onChange only writes
               // edited fields).
               const tool = tools.find((t) => t.name === name);
-              setFormValues(
-                tool ? collectSchemaDefaults(tool.inputSchema) : {},
-              );
-              setSelectedToolName(name);
+              onFormChange(tool ? collectSchemaDefaults(tool.inputSchema) : {});
+              onSelectTool(name);
             }}
           />
         </SidebarCard>
@@ -140,11 +131,11 @@ export function ToolsScreen({
           {selectedTool ? (
             <ToolDetailPanel
               tool={selectedTool}
-              formValues={formValues}
+              formValues={values}
               isExecuting={isExecuting}
               progress={callState?.progress}
-              onFormChange={setFormValues}
-              onExecute={() => onCallTool(selectedTool.name, formValues)}
+              onFormChange={onFormChange}
+              onExecute={() => onCallTool(selectedTool.name, values)}
               onCancel={() => onCancelCall?.()}
             />
           ) : (
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
index d8898caaa..b2c296f95 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
@@ -336,6 +336,8 @@ const meta: Meta<typeof InspectorView> = {
     onServerEdit: fn(),
     onServerClone: fn(),
     onServerRemove: fn(),
+    onSelectTool: fn(),
+    onToolFormChange: fn(),
     onCallTool: fn(),
     onRefreshTools: fn(),
     onGetPrompt: fn(),
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index 3a4e06228..500a6bb57 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -65,6 +65,8 @@ function makeProps(
     onServerEdit: vi.fn(),
     onServerClone: vi.fn(),
     onServerRemove: vi.fn(),
+    onSelectTool: vi.fn(),
+    onToolFormChange: vi.fn(),
     onCallTool: vi.fn(),
     onRefreshTools: vi.fn(),
     onGetPrompt: vi.fn(),
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 5461dbb61..93a207dce 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -192,6 +192,10 @@ export interface InspectorViewProps {
   // Per-screen "operation in flight" states (panel-level; optional because
   // the underlying screens accept them as optional).
   toolCallState?: ToolCallState;
+  // Selected tool + its form values. Owned by the parent so they persist across
+  // tab navigation (the screen unmounts on tab switch) — see #1414.
+  selectedToolName?: string;
+  toolFormValues?: Record<string, unknown>;
   getPromptState?: GetPromptState;
   readResourceState?: ReadResourceState;
 
@@ -232,6 +236,8 @@ export interface InspectorViewProps {
   onServerRemove: (id: string) => void;
 
   // Per-primitive actions (route to `inspectorClient` methods / hook refresh).
+  onSelectTool: (name: string) => void;
+  onToolFormChange: (values: Record<string, unknown>) => void;
   onCallTool: (name: string, args: Record<string, unknown>) => void;
   onCancelToolCall?: () => void;
   onClearToolResult?: () => void;
@@ -295,6 +301,8 @@ export function InspectorView({
   history,
   network,
   toolCallState,
+  selectedToolName,
+  toolFormValues,
   getPromptState,
   readResourceState,
   currentLogLevel,
@@ -314,6 +322,8 @@ export function InspectorView({
   onServerEdit,
   onServerClone,
   onServerRemove,
+  onSelectTool,
+  onToolFormChange,
   onCallTool,
   onCancelToolCall,
   onClearToolResult,
@@ -466,7 +476,11 @@ export function InspectorView({
             <ToolsScreen
               tools={tools}
               callState={toolCallState}
+              selectedToolName={selectedToolName}
+              formValues={toolFormValues}
               listChanged={false}
+              onSelectTool={onSelectTool}
+              onFormChange={onToolFormChange}
               onRefreshList={onRefreshTools}
               onCallTool={onCallTool}
               onCancelCall={onCancelToolCall}

From 216746647c93e004ccbe5b6201265a46939f47ed Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 2 Jun 2026 22:39:34 -0400
Subject: [PATCH 2/6] feat(web): persist per-screen selection/search/filter
 across navigation (#1417)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 clients/web/src/App.tsx                       | 128 +++++++++++++++
 .../AppControls/AppControls.stories.tsx       |  18 ++
 .../groups/AppControls/AppControls.test.tsx   |  28 +++-
 .../groups/AppControls/AppControls.tsx        |  10 +-
 .../PromptControls/PromptControls.stories.tsx |   1 +
 .../PromptControls/PromptControls.test.tsx    |  30 +++-
 .../groups/PromptControls/PromptControls.tsx  |  10 +-
 .../ResourceControls.stories.tsx              |   2 +
 .../ResourceControls.test.tsx                 |  44 ++++-
 .../ResourceControls/ResourceControls.tsx     |  39 +++--
 .../ToolControls/ToolControls.stories.tsx     |  18 ++
 .../groups/ToolControls/ToolControls.test.tsx |  26 ++-
 .../groups/ToolControls/ToolControls.tsx      |  10 +-
 .../screens/AppsScreen/AppsScreen.stories.tsx |  28 +++-
 .../screens/AppsScreen/AppsScreen.test.tsx    |  88 +++++++---
 .../screens/AppsScreen/AppsScreen.tsx         |  34 +++-
 .../HistoryScreen/HistoryScreen.stories.tsx   |  29 +++-
 .../HistoryScreen/HistoryScreen.test.tsx      |   2 +
 .../screens/HistoryScreen/HistoryScreen.tsx   |  23 ++-
 .../LoggingScreen/LoggingScreen.stories.tsx   |   2 +
 .../LoggingScreen/LoggingScreen.test.tsx      |  41 ++++-
 .../screens/LoggingScreen/LoggingScreen.tsx   |  44 ++---
 .../screens/LoggingScreen/logLevels.ts        |  27 +++
 .../NetworkScreen/NetworkScreen.stories.tsx   |  29 +++-
 .../NetworkScreen/NetworkScreen.test.tsx      |  45 ++++-
 .../screens/NetworkScreen/NetworkScreen.tsx   |  38 ++---
 .../screens/NetworkScreen/fetchCategories.ts  |  15 ++
 .../PromptsScreen/PromptsScreen.stories.tsx   |  35 ++++
 .../PromptsScreen/PromptsScreen.test.tsx      |  99 +++++++----
 .../screens/PromptsScreen/PromptsScreen.tsx   |  53 +++---
 .../ResourcesScreen.stories.tsx               |  41 +++++
 .../ResourcesScreen/ResourcesScreen.test.tsx  | 100 +++++++++---
 .../ResourcesScreen/ResourcesScreen.tsx       |  67 +++++---
 .../TasksScreen/TasksScreen.stories.tsx       |   2 +
 .../screens/TasksScreen/TasksScreen.test.tsx  |   2 +
 .../screens/TasksScreen/TasksScreen.tsx       |  18 +-
 .../screens/ToolsScreen/ToolsScreen.test.tsx  |   9 +
 .../screens/ToolsScreen/ToolsScreen.tsx       |   6 +
 .../InspectorView/InspectorView.stories.tsx   |  21 +++
 .../InspectorView/InspectorView.test.tsx      |  47 +++++-
 .../views/InspectorView/InspectorView.tsx     | 154 +++++++++++++++++-
 41 files changed, 1205 insertions(+), 258 deletions(-)
 create mode 100644 clients/web/src/components/screens/LoggingScreen/logLevels.ts
 create mode 100644 clients/web/src/components/screens/NetworkScreen/fetchCategories.ts

diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 195e1b1ae..ef93003ee 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -15,6 +15,7 @@ import type {
   LoggingMessageNotification,
   Progress,
   ProgressToken,
+  TaskStatus,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { InspectorClient } from "@inspector/core/mcp/index.js";
@@ -24,9 +25,11 @@ import type {
 } from "@inspector/core/mcp/index.js";
 import type { TypedEventGeneric } from "@inspector/core/mcp/typedEventTarget.js";
 import type {
+  FetchRequestCategory,
   InspectorServerSettings,
   MCPServerConfig,
   MessageEntry,
+  MessageMethod,
   ServerEntry,
   ServerType,
 } from "@inspector/core/mcp/types.js";
@@ -68,6 +71,8 @@ import { InspectorView } from "./components/views/InspectorView/InspectorView";
 import type { ToolCallState } from "./components/screens/ToolsScreen/ToolsScreen";
 import type { GetPromptState } from "./components/screens/PromptsScreen/PromptsScreen";
 import type { ReadResourceState } from "./components/screens/ResourcesScreen/ResourcesScreen";
+import { ALL_LEVELS_VISIBLE } from "./components/screens/LoggingScreen/logLevels";
+import { ALL_CATEGORIES_VISIBLE } from "./components/screens/NetworkScreen/fetchCategories";
 import type { AppRendererHandle } from "./components/elements/AppRenderer/AppRenderer";
 import { createAppBridgeFactory } from "./components/elements/AppRenderer/createAppBridgeFactory";
 import type { LogEntryData } from "./components/elements/LogEntry/LogEntry";
@@ -360,6 +365,66 @@ function App() {
     ReadResourceState | undefined
   >(undefined);
 
+  // Per-screen selection / search / filter state. 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 (#1417). Grouped by screen.
+  // Tools (selection/form live above with `toolCallState`):
+  const [toolSearch, setToolSearch] = useState("");
+  // Prompts:
+  const [selectedPromptName, setSelectedPromptName] = useState<
+    string | undefined
+  >(undefined);
+  const [promptArgumentValues, setPromptArgumentValues] = useState<
+    Record<string, string>
+  >({});
+  const [promptSubmittedFor, setPromptSubmittedFor] = useState<
+    string | undefined
+  >(undefined);
+  const [promptSearch, setPromptSearch] = useState("");
+  // Resources (`openSections` undefined → screen falls back to compact pref):
+  const [selectedResourceUri, setSelectedResourceUri] = useState<
+    string | undefined
+  >(undefined);
+  const [selectedTemplateUri, setSelectedTemplateUri] = useState<
+    string | undefined
+  >(undefined);
+  const [originatingTemplateUri, setOriginatingTemplateUri] = useState<
+    string | undefined
+  >(undefined);
+  const [resourceSearch, setResourceSearch] = useState("");
+  const [resourceOpenSections, setResourceOpenSections] = useState<
+    string[] | undefined
+  >(undefined);
+  // Apps (selected app + form values; running/maximized stay screen-local):
+  const [selectedAppName, setSelectedAppName] = useState<string | undefined>(
+    undefined,
+  );
+  const [appFormValues, setAppFormValues] = useState<Record<string, unknown>>(
+    {},
+  );
+  const [appSearch, setAppSearch] = useState("");
+  // Tasks:
+  const [taskSearch, setTaskSearch] = useState("");
+  const [taskStatusFilter, setTaskStatusFilter] = useState<
+    TaskStatus | undefined
+  >(undefined);
+  // Logs:
+  const [logFilterText, setLogFilterText] = useState("");
+  const [logVisibleLevels, setLogVisibleLevels] =
+    useState<Record<LoggingLevel, boolean>>(ALL_LEVELS_VISIBLE);
+  // History:
+  const [historySearch, setHistorySearch] = useState("");
+  const [historyMethodFilter, setHistoryMethodFilter] = useState<
+    MessageMethod | undefined
+  >(undefined);
+  // Network:
+  const [networkFilterText, setNetworkFilterText] = useState("");
+  const [networkVisibleCategories, setNetworkVisibleCategories] = useState<
+    Record<FetchRequestCategory, boolean>
+  >(ALL_CATEGORIES_VISIBLE);
+
   // 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.
@@ -462,8 +527,29 @@ function App() {
     setToolCallState(undefined);
     setSelectedToolName(undefined);
     setToolFormValues({});
+    setToolSearch("");
     setGetPromptState(undefined);
+    setSelectedPromptName(undefined);
+    setPromptArgumentValues({});
+    setPromptSubmittedFor(undefined);
+    setPromptSearch("");
     setReadResourceState(undefined);
+    setSelectedResourceUri(undefined);
+    setSelectedTemplateUri(undefined);
+    setOriginatingTemplateUri(undefined);
+    setResourceSearch("");
+    setResourceOpenSections(undefined);
+    setSelectedAppName(undefined);
+    setAppFormValues({});
+    setAppSearch("");
+    setTaskSearch("");
+    setTaskStatusFilter(undefined);
+    setLogFilterText("");
+    setLogVisibleLevels(ALL_LEVELS_VISIBLE);
+    setHistorySearch("");
+    setHistoryMethodFilter(undefined);
+    setNetworkFilterText("");
+    setNetworkVisibleCategories(ALL_CATEGORIES_VISIBLE);
     setCurrentLogLevel("info");
   }, []);
 
@@ -1523,8 +1609,29 @@ function App() {
         toolCallState={toolCallState}
         selectedToolName={selectedToolName}
         toolFormValues={toolFormValues}
+        toolSearch={toolSearch}
         getPromptState={getPromptState}
+        selectedPromptName={selectedPromptName}
+        promptArgumentValues={promptArgumentValues}
+        promptSubmittedFor={promptSubmittedFor}
+        promptSearch={promptSearch}
         readResourceState={effectiveReadResourceState}
+        selectedResourceUri={selectedResourceUri}
+        selectedTemplateUri={selectedTemplateUri}
+        originatingTemplateUri={originatingTemplateUri}
+        resourceSearch={resourceSearch}
+        resourceOpenSections={resourceOpenSections}
+        selectedAppName={selectedAppName}
+        appFormValues={appFormValues}
+        appSearch={appSearch}
+        taskSearch={taskSearch}
+        taskStatusFilter={taskStatusFilter}
+        logFilterText={logFilterText}
+        logVisibleLevels={logVisibleLevels}
+        historySearch={historySearch}
+        historyMethodFilter={historyMethodFilter}
+        networkFilterText={networkFilterText}
+        networkVisibleCategories={networkVisibleCategories}
         currentLogLevel={currentLogLevel}
         sandboxPath={sandboxUrl}
         bridgeFactory={sandboxBridgeFactory}
@@ -1550,15 +1657,25 @@ function App() {
         }}
         onSelectTool={setSelectedToolName}
         onToolFormChange={setToolFormValues}
+        onToolSearchChange={setToolSearch}
         onCallTool={(name, args) => {
           void onCallTool(name, args);
         }}
         onClearToolResult={onClearToolResult}
         onRefreshTools={onRefreshTools}
+        onSelectedPromptNameChange={setSelectedPromptName}
+        onPromptArgumentValuesChange={setPromptArgumentValues}
+        onPromptSubmittedForChange={setPromptSubmittedFor}
+        onPromptSearchChange={setPromptSearch}
         onGetPrompt={(name, args) => {
           void onGetPrompt(name, args);
         }}
         onRefreshPrompts={onRefreshPrompts}
+        onSelectedResourceUriChange={setSelectedResourceUri}
+        onSelectedTemplateUriChange={setSelectedTemplateUri}
+        onOriginatingTemplateUriChange={setOriginatingTemplateUri}
+        onResourceSearchChange={setResourceSearch}
+        onResourceOpenSectionsChange={setResourceOpenSections}
         onReadResource={(uri) => {
           void onReadResource(uri);
         }}
@@ -1567,18 +1684,29 @@ function App() {
         onRefreshResources={onRefreshResources}
         onCompleteArgument={onCompleteArgument}
         completionsSupported={capabilities?.completions !== undefined}
+        onTaskSearchChange={setTaskSearch}
+        onTaskStatusFilterChange={setTaskStatusFilter}
         onCancelTask={onCancelTask}
         onClearCompletedTasks={todoNoop}
         onRefreshTasks={onRefreshTasks}
         onSetLogLevel={onSetLogLevel}
+        onLogFilterChange={setLogFilterText}
+        onLogVisibleLevelsChange={setLogVisibleLevels}
         onClearLogs={onClearLogs}
         onExportLogs={onExportLogs}
+        onHistorySearchChange={setHistorySearch}
+        onHistoryMethodFilterChange={setHistoryMethodFilter}
         onClearHistory={onClearHistory}
         onExportHistory={onExportHistory}
         onReplayHistory={todoNoop}
         onTogglePinHistory={todoNoop}
+        onNetworkFilterChange={setNetworkFilterText}
+        onNetworkVisibleCategoriesChange={setNetworkVisibleCategories}
         onClearNetwork={onClearNetwork}
         onExportNetwork={onExportNetwork}
+        onSelectedAppNameChange={setSelectedAppName}
+        onAppFormValuesChange={setAppFormValues}
+        onAppSearchChange={setAppSearch}
         onSelectApp={onSelectApp}
         onOpenApp={(name, args) => {
           void onOpenApp(name, args);
diff --git a/clients/web/src/components/groups/AppControls/AppControls.stories.tsx b/clients/web/src/components/groups/AppControls/AppControls.stories.tsx
index 925323480..8a076e0ce 100644
--- a/clients/web/src/components/groups/AppControls/AppControls.stories.tsx
+++ b/clients/web/src/components/groups/AppControls/AppControls.stories.tsx
@@ -1,9 +1,25 @@
+import { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { fn, userEvent, within } from "storybook/test";
 import { AppControls } from "./AppControls";
 import { SUN_ICON_SVG } from "../../../test/fixtures/storyIcons";
 
+// AppControls' search text is controlled by the parent (App, via AppsScreen —
+// see #1417). This wrapper holds that state so the play-driven typing updates
+// the controlled input.
+function StatefulAppControls(args: ComponentProps<typeof AppControls>) {
+  const [searchText, setSearchText] = useState(args.searchText ?? "");
+  return (
+    <AppControls
+      {...args}
+      searchText={searchText}
+      onSearchChange={setSearchText}
+    />
+  );
+}
+
 const sampleApps: Tool[] = [
   {
     name: "get-cohort-data",
@@ -41,8 +57,10 @@ const meta: Meta<typeof AppControls> = {
   args: {
     onRefreshList: fn(),
     onSelectApp: fn(),
+    onSearchChange: fn(),
     listChanged: false,
   },
+  render: (args) => <StatefulAppControls {...args} />,
 };
 
 export default meta;
diff --git a/clients/web/src/components/groups/AppControls/AppControls.test.tsx b/clients/web/src/components/groups/AppControls/AppControls.test.tsx
index c66ce1224..54a4629ae 100644
--- a/clients/web/src/components/groups/AppControls/AppControls.test.tsx
+++ b/clients/web/src/components/groups/AppControls/AppControls.test.tsx
@@ -1,8 +1,9 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { AppControls } from "./AppControls";
+import { AppControls, type AppControlsProps } from "./AppControls";
 
 const sampleApps: Tool[] = [
   {
@@ -29,8 +30,27 @@ const baseProps = {
   listChanged: false,
   onRefreshList: vi.fn(),
   onSelectApp: vi.fn(),
+  onSearchChange: vi.fn(),
 };
 
+// The search box is controlled: typing fires onSearchChange but does not
+// update the component's own state. This host holds the searchText state so
+// interaction tests that filter by typing behave like the real parent.
+function ControlledAppControls(props: Partial<AppControlsProps>) {
+  const [searchText, setSearchText] = useState(props.searchText ?? "");
+  return (
+    <AppControls
+      {...baseProps}
+      {...props}
+      searchText={searchText}
+      onSearchChange={(value) => {
+        setSearchText(value);
+        props.onSearchChange?.(value);
+      }}
+    />
+  );
+}
+
 describe("AppControls", () => {
   it("renders the title with the app count and a search input", () => {
     renderWithMantine(<AppControls {...baseProps} />);
@@ -47,7 +67,7 @@ describe("AppControls", () => {
 
   it("filters apps by name when typing in the search input", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppControls {...baseProps} />);
+    renderWithMantine(<ControlledAppControls />);
     await user.type(screen.getByPlaceholderText("Search apps..."), "git");
     expect(screen.getByText("git_status")).toBeInTheDocument();
     expect(screen.queryByText("Weather Widget")).not.toBeInTheDocument();
@@ -55,7 +75,7 @@ describe("AppControls", () => {
 
   it("filters apps by title when typing in the search input", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppControls {...baseProps} />);
+    renderWithMantine(<ControlledAppControls />);
     await user.type(
       screen.getByPlaceholderText("Search apps..."),
       "weather widget",
@@ -72,7 +92,7 @@ describe("AppControls", () => {
 
   it("shows 'No matching apps' when search yields no results", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppControls {...baseProps} />);
+    renderWithMantine(<ControlledAppControls />);
     await user.type(screen.getByPlaceholderText("Search apps..."), "zzz");
     expect(screen.getByText("No matching apps")).toBeInTheDocument();
   });
diff --git a/clients/web/src/components/groups/AppControls/AppControls.tsx b/clients/web/src/components/groups/AppControls/AppControls.tsx
index 59a29329d..818801874 100644
--- a/clients/web/src/components/groups/AppControls/AppControls.tsx
+++ b/clients/web/src/components/groups/AppControls/AppControls.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   Button,
   Group,
@@ -15,8 +14,12 @@ import { AppListItem } from "../AppListItem/AppListItem";
 export interface AppControlsProps {
   tools: Tool[];
   selectedName?: string;
+  // Search text is controlled by the parent (App, via AppsScreen) so it
+  // persists across tab navigation within a live session — see #1417.
+  searchText?: string;
   listChanged: boolean;
   onRefreshList: () => void;
+  onSearchChange: (value: string) => void;
   onSelectApp: (name: string) => void;
 }
 
@@ -37,11 +40,12 @@ const EmptyState = Text.withProps({
 export function AppControls({
   tools,
   selectedName,
+  searchText = "",
   listChanged,
   onRefreshList,
+  onSearchChange,
   onSelectApp,
 }: AppControlsProps) {
-  const [searchText, setSearchText] = useState("");
   const query = searchText.toLowerCase();
   const filteredTools = searchText
     ? tools.filter(
@@ -61,7 +65,7 @@ export function AppControls({
       <TextInput
         placeholder="Search apps..."
         value={searchText}
-        onChange={(e) => setSearchText(e.currentTarget.value)}
+        onChange={(e) => onSearchChange(e.currentTarget.value)}
       />
       <ScrollArea.Autosize mah={LIST_MAX_HEIGHT}>
         <Stack gap="xs">
diff --git a/clients/web/src/components/groups/PromptControls/PromptControls.stories.tsx b/clients/web/src/components/groups/PromptControls/PromptControls.stories.tsx
index 7eb462bd2..6fb10a947 100644
--- a/clients/web/src/components/groups/PromptControls/PromptControls.stories.tsx
+++ b/clients/web/src/components/groups/PromptControls/PromptControls.stories.tsx
@@ -9,6 +9,7 @@ const meta: Meta<typeof PromptControls> = {
   args: {
     onRefreshList: fn(),
     onSelectPrompt: fn(),
+    onSearchChange: fn(),
     listChanged: false,
   },
 };
diff --git a/clients/web/src/components/groups/PromptControls/PromptControls.test.tsx b/clients/web/src/components/groups/PromptControls/PromptControls.test.tsx
index 76881136c..b8714dcae 100644
--- a/clients/web/src/components/groups/PromptControls/PromptControls.test.tsx
+++ b/clients/web/src/components/groups/PromptControls/PromptControls.test.tsx
@@ -1,8 +1,9 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { PromptControls } from "./PromptControls";
+import { PromptControls, type PromptControlsProps } from "./PromptControls";
 
 const samplePrompts: Prompt[] = [
   {
@@ -23,8 +24,27 @@ const baseProps = {
   listChanged: false,
   onRefreshList: vi.fn(),
   onSelectPrompt: vi.fn(),
+  onSearchChange: vi.fn(),
 };
 
+// The search box is controlled: typing fires onSearchChange but does not
+// update the component's own state. This host holds the searchText state so
+// interaction tests that filter by typing behave like the real parent.
+function ControlledPromptControls(props: Partial<PromptControlsProps>) {
+  const [searchText, setSearchText] = useState(props.searchText ?? "");
+  return (
+    <PromptControls
+      {...baseProps}
+      {...props}
+      searchText={searchText}
+      onSearchChange={(value) => {
+        setSearchText(value);
+        props.onSearchChange?.(value);
+      }}
+    />
+  );
+}
+
 describe("PromptControls", () => {
   it("renders the title and search input", () => {
     renderWithMantine(<PromptControls {...baseProps} />);
@@ -45,7 +65,7 @@ describe("PromptControls", () => {
 
   it("filters prompts by name when typing in the search input", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<PromptControls {...baseProps} />);
+    renderWithMantine(<ControlledPromptControls />);
     await user.type(screen.getByPlaceholderText("Search prompts..."), "trans");
     expect(screen.getByText("translate")).toBeInTheDocument();
     expect(screen.queryByText("summarize")).not.toBeInTheDocument();
@@ -54,7 +74,7 @@ describe("PromptControls", () => {
 
   it("filters prompts by description when typing in the search input", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<PromptControls {...baseProps} />);
+    renderWithMantine(<ControlledPromptControls />);
     await user.type(
       screen.getByPlaceholderText("Search prompts..."),
       "sentiment",
@@ -69,9 +89,7 @@ describe("PromptControls", () => {
       { name: "p1", title: "Alpha Title" },
       { name: "p2", title: "Beta Title" },
     ];
-    renderWithMantine(
-      <PromptControls {...baseProps} prompts={promptsWithTitle} />,
-    );
+    renderWithMantine(<ControlledPromptControls prompts={promptsWithTitle} />);
     await user.type(screen.getByPlaceholderText("Search prompts..."), "alpha");
     expect(screen.getByText("Alpha Title")).toBeInTheDocument();
     expect(screen.queryByText("Beta Title")).not.toBeInTheDocument();
diff --git a/clients/web/src/components/groups/PromptControls/PromptControls.tsx b/clients/web/src/components/groups/PromptControls/PromptControls.tsx
index a945db468..d80c0bbc4 100644
--- a/clients/web/src/components/groups/PromptControls/PromptControls.tsx
+++ b/clients/web/src/components/groups/PromptControls/PromptControls.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Group, ScrollArea, Stack, TextInput, Title } from "@mantine/core";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
@@ -7,8 +6,12 @@ import { PromptListItem } from "../PromptListItem/PromptListItem";
 export interface PromptControlsProps {
   prompts: Prompt[];
   selectedName?: string;
+  // Search text is controlled by the parent (App, via PromptsScreen) so it
+  // persists across tab navigation within a live session — see #1417.
+  searchText?: string;
   listChanged: boolean;
   onRefreshList: () => void;
+  onSearchChange: (value: string) => void;
   onSelectPrompt: (name: string) => void;
 }
 
@@ -18,11 +21,12 @@ const LIST_MAX_HEIGHT =
 export function PromptControls({
   prompts,
   selectedName,
+  searchText = "",
   listChanged,
   onRefreshList,
+  onSearchChange,
   onSelectPrompt,
 }: PromptControlsProps) {
-  const [searchText, setSearchText] = useState("");
   const query = searchText.toLowerCase();
   const filteredPrompts = prompts.filter(
     (p) =>
@@ -40,7 +44,7 @@ export function PromptControls({
       <TextInput
         placeholder="Search prompts..."
         value={searchText}
-        onChange={(e) => setSearchText(e.currentTarget.value)}
+        onChange={(e) => onSearchChange(e.currentTarget.value)}
       />
       <ScrollArea.Autosize mah={LIST_MAX_HEIGHT}>
         <Stack gap="xs">
diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
index 98c8144f0..73518d521 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
@@ -15,6 +15,8 @@ const meta: Meta<typeof ResourceControls> = {
     onSelectUri: fn(),
     onSelectTemplate: fn(),
     onUnsubscribeResource: fn(),
+    onSearchChange: fn(),
+    onOpenSectionsChange: fn(),
     listChanged: false,
     compact: false,
     onCompactChange: fn(),
diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.test.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.test.tsx
index 7f1be81a2..1ee1e07a3 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.test.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.test.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type {
@@ -6,7 +7,10 @@ import type {
 } from "@modelcontextprotocol/sdk/types.js";
 import type { InspectorResourceSubscription } from "@inspector/core/mcp/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { ResourceControls } from "./ResourceControls";
+import {
+  ResourceControls,
+  type ResourceControlsProps,
+} from "./ResourceControls";
 
 const sampleResources: Resource[] = [
   { name: "config.json", uri: "file:///config.json" },
@@ -30,6 +34,8 @@ const baseProps = {
   subscriptions: sampleSubscriptions,
   listChanged: false,
   onRefreshList: vi.fn(),
+  onSearchChange: vi.fn(),
+  onOpenSectionsChange: vi.fn(),
   onSelectUri: vi.fn(),
   onSelectTemplate: vi.fn(),
   onUnsubscribeResource: vi.fn(),
@@ -37,6 +43,35 @@ const baseProps = {
   onCompactChange: vi.fn(),
 };
 
+// ResourceControls is controlled: search text + accordion open-sections live in
+// the parent (App, via ResourcesScreen) so they persist across tab navigation
+// (#1417). This host holds that state so typing filters the lists and toggling
+// the ListToggle drives the accordion, mirroring how App owns it. Props passed
+// in override defaults; the stateful search/open-sections wiring is applied last
+// so callers can still observe changes via the spied callbacks.
+function ControlledResourceControls(props: Partial<ResourceControlsProps>) {
+  const [searchText, setSearchText] = useState<string>(props.searchText ?? "");
+  const [openSections, setOpenSections] = useState<string[]>(
+    props.openSections ?? ["resources", "templates", "subscriptions"],
+  );
+  return (
+    <ResourceControls
+      {...baseProps}
+      {...props}
+      searchText={searchText}
+      openSections={openSections}
+      onSearchChange={(value) => {
+        setSearchText(value);
+        props.onSearchChange?.(value);
+      }}
+      onOpenSectionsChange={(value) => {
+        setOpenSections(value);
+        props.onOpenSectionsChange?.(value);
+      }}
+    />
+  );
+}
+
 describe("ResourceControls", () => {
   it("renders title and section counts", () => {
     renderWithMantine(<ResourceControls {...baseProps} />);
@@ -68,7 +103,7 @@ describe("ResourceControls", () => {
 
   it("filters resources, templates, and subscriptions by search text", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<ResourceControls {...baseProps} />);
+    renderWithMantine(<ControlledResourceControls />);
     await user.type(screen.getByPlaceholderText("Search..."), "README");
     expect(screen.getByText("URIs (1)")).toBeInTheDocument();
     expect(screen.getByText("Templates (0)")).toBeInTheDocument();
@@ -172,8 +207,7 @@ describe("ResourceControls", () => {
     const user = userEvent.setup();
     const onCompactChange = vi.fn();
     renderWithMantine(
-      <ResourceControls
-        {...baseProps}
+      <ControlledResourceControls
         compact={false}
         onCompactChange={onCompactChange}
       />,
@@ -195,7 +229,7 @@ describe("ResourceControls", () => {
       { name: "y", uri: "file:///y" },
     ];
     renderWithMantine(
-      <ResourceControls {...baseProps} resources={resourcesWithTitle} />,
+      <ControlledResourceControls resources={resourcesWithTitle} />,
     );
     await user.type(screen.getByPlaceholderText("Search..."), "special");
     expect(screen.getByText("URIs (1)")).toBeInTheDocument();
diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
index 01c58fc02..58eeab51f 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   Accordion,
   Group,
@@ -23,15 +22,24 @@ export interface ResourceControlsProps {
   subscriptions: InspectorResourceSubscription[];
   selectedUri?: string;
   selectedTemplateUri?: string;
+  // Search text + accordion open-sections are controlled by the parent (App,
+  // via ResourcesScreen) so they persist across tab navigation within a live
+  // session — see #1417. `openSections` is optional: when undefined the
+  // accordion falls back to the `compact`-derived default below.
+  searchText?: string;
+  openSections?: string[];
   listChanged: boolean;
   onRefreshList: () => void;
+  onSearchChange: (value: string) => void;
+  onOpenSectionsChange: (value: string[]) => void;
   onSelectUri: (uri: string) => void;
   onSelectTemplate: (uriTemplate: string) => void;
   onUnsubscribeResource: (uri: string) => void;
   /**
    * Persisted preference for the ListToggle. Seeds initial accordion state
-   * on mount; the user can still toggle individual sections during a session
-   * without affecting this value. Only an explicit ListToggle click updates it.
+   * (when `openSections` is undefined); the user can still toggle individual
+   * sections during a session without affecting this value. Only an explicit
+   * ListToggle click updates it.
    */
   compact: boolean;
   onCompactChange: (next: boolean) => void;
@@ -54,15 +62,18 @@ export function ResourceControls({
   subscriptions,
   selectedUri,
   selectedTemplateUri,
+  searchText = "",
+  openSections: controlledOpenSections,
   listChanged,
   onRefreshList,
+  onSearchChange,
+  onOpenSectionsChange,
   onSelectUri,
   onSelectTemplate,
   onUnsubscribeResource,
   compact: initialCompact,
   onCompactChange,
 }: ResourceControlsProps) {
-  const [searchText, setSearchText] = useState("");
   const query = searchText.toLowerCase();
   const filteredResources = resources.filter(
     (r) =>
@@ -84,13 +95,13 @@ export function ResourceControls({
   );
 
   const allSections = ["resources", "templates", "subscriptions"];
-  // Seed the accordion from the persisted preference: empty when the user
-  // last left the panel compact, all three open when they explicitly
-  // expanded. Per-section accordion clicks during a session update the
-  // local list but don't change the persisted preference.
-  const [openSections, setOpenSections] = useState<string[]>(
-    initialCompact ? [] : [...allSections],
-  );
+  // Open-sections is parent-controlled (persists across navigation). When the
+  // parent hasn't set it yet (undefined), fall back to the persisted `compact`
+  // preference: empty when last left compact, all three open when expanded.
+  // Per-section accordion clicks update the lifted value but don't change the
+  // persisted preference.
+  const openSections =
+    controlledOpenSections ?? (initialCompact ? [] : [...allSections]);
   const allExpanded = openSections.length === allSections.length;
   const maxHeight = panelMaxHeight(openSections.length);
 
@@ -100,7 +111,7 @@ export function ResourceControls({
     // right preference: clicking "expand all" should record `compact=false`
     // even if the visible state was already partially expanded.
     const nextCompact = allExpanded;
-    setOpenSections(nextCompact ? [] : [...allSections]);
+    onOpenSectionsChange(nextCompact ? [] : [...allSections]);
     onCompactChange(nextCompact);
   }
 
@@ -115,11 +126,11 @@ export function ResourceControls({
           flex={1}
           placeholder="Search..."
           value={searchText}
-          onChange={(e) => setSearchText(e.currentTarget.value)}
+          onChange={(e) => onSearchChange(e.currentTarget.value)}
         />
         <ListToggle compact={!allExpanded} onToggle={handleToggleList} />
       </Group>
-      <Accordion multiple value={openSections} onChange={setOpenSections}>
+      <Accordion multiple value={openSections} onChange={onOpenSectionsChange}>
         <Accordion.Item value="resources">
           <Accordion.Control disabled={filteredResources.length === 0}>
             {formatSectionCount("URIs", filteredResources.length)}
diff --git a/clients/web/src/components/groups/ToolControls/ToolControls.stories.tsx b/clients/web/src/components/groups/ToolControls/ToolControls.stories.tsx
index 4bc75f7dc..5ded38929 100644
--- a/clients/web/src/components/groups/ToolControls/ToolControls.stories.tsx
+++ b/clients/web/src/components/groups/ToolControls/ToolControls.stories.tsx
@@ -1,16 +1,34 @@
+import { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn, userEvent, within } from "storybook/test";
 import { ToolControls } from "./ToolControls";
 import { longToolList } from "../../screens/ToolsScreen/ToolsScreen.fixtures";
 
+// ToolControls' search text is controlled by the parent (App, via ToolsScreen —
+// see #1417). This wrapper holds that state so the play-driven typing updates
+// the controlled input.
+function StatefulToolControls(args: ComponentProps<typeof ToolControls>) {
+  const [searchText, setSearchText] = useState(args.searchText ?? "");
+  return (
+    <ToolControls
+      {...args}
+      searchText={searchText}
+      onSearchChange={setSearchText}
+    />
+  );
+}
+
 const meta: Meta<typeof ToolControls> = {
   title: "Groups/ToolControls",
   component: ToolControls,
   args: {
     onRefreshList: fn(),
     onSelectTool: fn(),
+    onSearchChange: fn(),
     listChanged: false,
   },
+  render: (args) => <StatefulToolControls {...args} />,
 };
 
 export default meta;
diff --git a/clients/web/src/components/groups/ToolControls/ToolControls.test.tsx b/clients/web/src/components/groups/ToolControls/ToolControls.test.tsx
index f051fb2aa..e0746c02a 100644
--- a/clients/web/src/components/groups/ToolControls/ToolControls.test.tsx
+++ b/clients/web/src/components/groups/ToolControls/ToolControls.test.tsx
@@ -1,8 +1,9 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { ToolControls } from "./ToolControls";
+import { ToolControls, type ToolControlsProps } from "./ToolControls";
 
 const sampleTools: Tool[] = [
   { name: "list_files", title: "List Files", inputSchema: { type: "object" } },
@@ -20,8 +21,27 @@ const baseProps = {
   listChanged: false,
   onRefreshList: vi.fn(),
   onSelectTool: vi.fn(),
+  onSearchChange: vi.fn(),
 };
 
+// The search box is controlled: typing fires onSearchChange but does not
+// update the component's own state. This host holds the searchText state so
+// interaction tests that filter by typing behave like the real parent.
+function ControlledToolControls(props: Partial<ToolControlsProps>) {
+  const [searchText, setSearchText] = useState(props.searchText ?? "");
+  return (
+    <ToolControls
+      {...baseProps}
+      {...props}
+      searchText={searchText}
+      onSearchChange={(value) => {
+        setSearchText(value);
+        props.onSearchChange?.(value);
+      }}
+    />
+  );
+}
+
 describe("ToolControls", () => {
   it("renders the title and search input", () => {
     renderWithMantine(<ToolControls {...baseProps} />);
@@ -39,7 +59,7 @@ describe("ToolControls", () => {
 
   it("filters tools by name when typing in the search input", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<ToolControls {...baseProps} />);
+    renderWithMantine(<ControlledToolControls />);
     await user.type(screen.getByPlaceholderText("Search tools..."), "git");
     expect(screen.getByText("git_status")).toBeInTheDocument();
     expect(screen.getByText("git_commit")).toBeInTheDocument();
@@ -48,7 +68,7 @@ describe("ToolControls", () => {
 
   it("filters tools by title when typing in the search input", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<ToolControls {...baseProps} />);
+    renderWithMantine(<ControlledToolControls />);
     await user.type(screen.getByPlaceholderText("Search tools..."), "query db");
     expect(screen.getByText("Query DB")).toBeInTheDocument();
     expect(screen.queryByText("List Files")).not.toBeInTheDocument();
diff --git a/clients/web/src/components/groups/ToolControls/ToolControls.tsx b/clients/web/src/components/groups/ToolControls/ToolControls.tsx
index 8779e6174..f5a84d955 100644
--- a/clients/web/src/components/groups/ToolControls/ToolControls.tsx
+++ b/clients/web/src/components/groups/ToolControls/ToolControls.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Group, ScrollArea, Stack, TextInput, Title } from "@mantine/core";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
@@ -7,8 +6,12 @@ import { ToolListItem } from "../ToolListItem/ToolListItem";
 export interface ToolControlsProps {
   tools: Tool[];
   selectedName?: string;
+  // Search text is controlled by the parent (App, via ToolsScreen) so it
+  // persists across tab navigation within a live session — see #1417.
+  searchText?: string;
   listChanged: boolean;
   onRefreshList: () => void;
+  onSearchChange: (value: string) => void;
   onSelectTool: (name: string) => void;
 }
 
@@ -18,11 +21,12 @@ const LIST_MAX_HEIGHT =
 export function ToolControls({
   tools,
   selectedName,
+  searchText = "",
   listChanged,
   onRefreshList,
+  onSearchChange,
   onSelectTool,
 }: ToolControlsProps) {
-  const [searchText, setSearchText] = useState("");
   const query = searchText.toLowerCase();
   const filteredTools = searchText
     ? tools.filter(
@@ -41,7 +45,7 @@ export function ToolControls({
       <TextInput
         placeholder="Search tools..."
         value={searchText}
-        onChange={(e) => setSearchText(e.currentTarget.value)}
+        onChange={(e) => onSearchChange(e.currentTarget.value)}
       />
       <ScrollArea.Autosize mah={LIST_MAX_HEIGHT}>
         <Stack gap="xs">
diff --git a/clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx b/clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx
index 6102cc72c..5d963b6fa 100644
--- a/clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx
+++ b/clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx
@@ -80,6 +80,26 @@ const dashboardApp: Tool = {
 
 const sampleApps: Tool[] = [cohortApp, weatherApp, dashboardApp];
 
+// AppsScreen is controlled (app selection, form values, and search text live in
+// the parent — running/maximized stay internal; see #1417). This hook holds the
+// lifted state so the play-driven select/type/open interactions still drive the
+// detail panel, mirroring how App owns the state in the real app.
+function useLiftedAppState(args: AppsScreenProps) {
+  const [selectedAppName, setSelectedAppName] = useState(args.selectedAppName);
+  const [formValues, setFormValues] = useState<Record<string, unknown>>(
+    args.formValues ?? {},
+  );
+  const [searchText, setSearchText] = useState(args.searchText ?? "");
+  return {
+    selectedAppName,
+    formValues,
+    searchText,
+    onSelectedAppNameChange: setSelectedAppName,
+    onFormValuesChange: setFormValues,
+    onSearchChange: setSearchText,
+  };
+}
+
 const meta: Meta<typeof AppsScreen> = {
   title: "Screens/AppsScreen",
   component: AppsScreen,
@@ -92,13 +112,17 @@ const meta: Meta<typeof AppsScreen> = {
     onSelectApp: fn(),
     onOpenApp: fn(),
     onCloseApp: fn(),
+    onSelectedAppNameChange: fn(),
+    onFormValuesChange: fn(),
+    onSearchChange: fn(),
   },
   // Each story uses its own ref so AppRenderer's imperative handle gets a
   // fresh slot per render (Storybook may keep the canvas mounted across
   // arg edits, but the ref itself is owned by the wrapping component).
   render: function StoryRender(args: AppsScreenProps) {
     const ref = useRef<AppRendererHandle>(null);
-    return <AppsScreen {...args} rendererRef={ref} />;
+    const lifted = useLiftedAppState(args);
+    return <AppsScreen {...args} {...lifted} rendererRef={ref} />;
   },
 };
 
@@ -175,6 +199,7 @@ export const EchoRunning: Story = {
   render: function EchoRender(args: AppsScreenProps) {
     const ref = useRef<AppRendererHandle>(null);
     const [echo, setEcho] = useState<string | null>(null);
+    const lifted = useLiftedAppState(args);
 
     const bridgeFactory: BridgeFactory = useCallback(() => {
       let onInitialized: (() => void) | undefined;
@@ -227,6 +252,7 @@ export const EchoRunning: Story = {
         </Text>
         <AppsScreen
           {...args}
+          {...lifted}
           rendererRef={ref}
           bridgeFactory={bridgeFactory}
           onOpenApp={onOpenApp}
diff --git a/clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx b/clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx
index 60e09ae86..a58b0c39b 100644
--- a/clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx
+++ b/clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx
@@ -1,4 +1,4 @@
-import { createRef } from "react";
+import { createRef, useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
@@ -8,7 +8,7 @@ import {
   screen,
   within,
 } from "../../../test/renderWithMantine";
-import { AppsScreen } from "./AppsScreen";
+import { AppsScreen, type AppsScreenProps } from "./AppsScreen";
 import type {
   AppRendererHandle,
   BridgeFactory,
@@ -54,7 +54,7 @@ const okBridgeFactory: BridgeFactory = () =>
     close: async () => {},
   }) as unknown as AppBridge;
 
-function buildProps(overrides: Partial<Parameters<typeof AppsScreen>[0]> = {}) {
+function buildProps(overrides: Partial<AppsScreenProps> = {}): AppsScreenProps {
   return {
     tools: [fieldedApp, noFieldsApp, cohortApp] as Tool[],
     listChanged: false,
@@ -68,10 +68,54 @@ function buildProps(overrides: Partial<Parameters<typeof AppsScreen>[0]> = {}) {
     onSelectApp: vi.fn(),
     onOpenApp: vi.fn(),
     onCloseApp: vi.fn(),
+    onSelectedAppNameChange: vi.fn(),
+    onFormValuesChange: vi.fn(),
+    onSearchChange: vi.fn(),
     ...overrides,
   };
 }
 
+// AppsScreen lifts selection, form values, and the sidebar search to the
+// parent (App) so they persist across tab navigation (#1417), while
+// `running`/`maximized` stay local to the screen. This host holds the lifted
+// state so clicking an app, typing into its form/search, and closing drive the
+// panel exactly as App owns it. The internal running/maximized state handles
+// auto-launch, open, maximize, and back-to-input on its own. Props passed in
+// override defaults; the stateful wiring is applied last so callers can still
+// observe activity via the spied callbacks.
+function ControlledAppsScreen(overrides: Partial<AppsScreenProps> = {}) {
+  const props = buildProps(overrides);
+  const [selectedAppName, setSelectedAppName] = useState<string | undefined>(
+    props.selectedAppName,
+  );
+  const [formValues, setFormValues] = useState<Record<string, unknown>>(
+    props.formValues ?? {},
+  );
+  const [searchText, setSearchText] = useState<string | undefined>(
+    props.searchText,
+  );
+  return (
+    <AppsScreen
+      {...props}
+      selectedAppName={selectedAppName}
+      formValues={formValues}
+      searchText={searchText}
+      onSelectedAppNameChange={(value) => {
+        setSelectedAppName(value);
+        props.onSelectedAppNameChange(value);
+      }}
+      onFormValuesChange={(values) => {
+        setFormValues(values);
+        props.onFormValuesChange(values);
+      }}
+      onSearchChange={(value) => {
+        setSearchText(value);
+        props.onSearchChange(value);
+      }}
+    />
+  );
+}
+
 describe("AppsScreen", () => {
   it("renders the empty selection state", () => {
     renderWithMantine(<AppsScreen {...buildProps()} />);
@@ -101,8 +145,9 @@ describe("AppsScreen", () => {
       throw new Error("no connected MCP client");
     };
     renderWithMantine(
-      <AppsScreen
-        {...buildProps({ bridgeFactory: throwingFactory, onError })}
+      <ControlledAppsScreen
+        bridgeFactory={throwingFactory}
+        onError={onError}
       />,
     );
     // The no-fields app auto-launches on selection, mounting the renderer,
@@ -117,7 +162,7 @@ describe("AppsScreen", () => {
 
   it("filters the list via the search input", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppsScreen {...buildProps()} />);
+    renderWithMantine(<ControlledAppsScreen />);
     await user.type(screen.getByPlaceholderText("Search apps..."), "weather");
     expect(screen.getByText("Weather Widget")).toBeInTheDocument();
     expect(screen.queryByText("Ops Dashboard")).not.toBeInTheDocument();
@@ -125,7 +170,7 @@ describe("AppsScreen", () => {
 
   it("shows 'No matching apps' when search yields no results", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppsScreen {...buildProps()} />);
+    renderWithMantine(<ControlledAppsScreen />);
     await user.type(screen.getByPlaceholderText("Search apps..."), "zzz");
     expect(screen.getByText("No matching apps")).toBeInTheDocument();
   });
@@ -135,7 +180,7 @@ describe("AppsScreen", () => {
     const onSelectApp = vi.fn();
     const onOpenApp = vi.fn();
     renderWithMantine(
-      <AppsScreen {...buildProps({ onSelectApp, onOpenApp })} />,
+      <ControlledAppsScreen onSelectApp={onSelectApp} onOpenApp={onOpenApp} />,
     );
     await user.click(screen.getByText("Weather Widget"));
     expect(onSelectApp).toHaveBeenCalledWith("weather");
@@ -148,7 +193,7 @@ describe("AppsScreen", () => {
   it("auto-launches a no-fields app on selection", async () => {
     const user = userEvent.setup();
     const onOpenApp = vi.fn();
-    renderWithMantine(<AppsScreen {...buildProps({ onOpenApp })} />);
+    renderWithMantine(<ControlledAppsScreen onOpenApp={onOpenApp} />);
     await user.click(screen.getByText("Ops Dashboard"));
     expect(onOpenApp).toHaveBeenCalledWith("ops", {});
     // Renderer iframe replaces the form; Open App button is gone.
@@ -161,7 +206,7 @@ describe("AppsScreen", () => {
   it("invokes onOpenApp with form values when Open App is clicked", async () => {
     const user = userEvent.setup();
     const onOpenApp = vi.fn();
-    renderWithMantine(<AppsScreen {...buildProps({ onOpenApp })} />);
+    renderWithMantine(<ControlledAppsScreen onOpenApp={onOpenApp} />);
     await user.click(screen.getByText("Weather Widget"));
     const cityField = screen.getByRole("textbox", { name: /city/i });
     await user.type(cityField, "Reykjavik");
@@ -173,7 +218,7 @@ describe("AppsScreen", () => {
   it("seeds schema defaults so untouched fields are sent on Open App", async () => {
     const user = userEvent.setup();
     const onOpenApp = vi.fn();
-    renderWithMantine(<AppsScreen {...buildProps({ onOpenApp })} />);
+    renderWithMantine(<ControlledAppsScreen onOpenApp={onOpenApp} />);
     await user.click(screen.getByText("Cohort Data"));
     // Open without editing the metric field: its default must still be sent.
     await user.click(screen.getByRole("button", { name: /Open App/ }));
@@ -182,7 +227,7 @@ describe("AppsScreen", () => {
 
   it("returns to the input form when 'Back to Input' is clicked", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppsScreen {...buildProps()} />);
+    renderWithMantine(<ControlledAppsScreen />);
     await user.click(screen.getByText("Weather Widget"));
     await user.type(
       screen.getByRole("textbox", { name: /city/i }),
@@ -197,7 +242,7 @@ describe("AppsScreen", () => {
 
   it("does not show 'Back to Input' for a no-fields app", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppsScreen {...buildProps()} />);
+    renderWithMantine(<ControlledAppsScreen />);
     await user.click(screen.getByText("Ops Dashboard"));
     expect(
       screen.queryByRole("button", { name: /Back to Input/ }),
@@ -206,7 +251,7 @@ describe("AppsScreen", () => {
 
   it("toggles maximize, hiding the sidebar", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppsScreen {...buildProps()} />);
+    renderWithMantine(<ControlledAppsScreen />);
     await user.click(screen.getByText("Ops Dashboard"));
     expect(screen.getByText("MCP Apps (3)")).toBeInTheDocument();
     await user.click(screen.getByLabelText("Maximize"));
@@ -218,7 +263,7 @@ describe("AppsScreen", () => {
   it("calls onCloseApp and clears selection on Close", async () => {
     const user = userEvent.setup();
     const onCloseApp = vi.fn();
-    renderWithMantine(<AppsScreen {...buildProps({ onCloseApp })} />);
+    renderWithMantine(<ControlledAppsScreen onCloseApp={onCloseApp} />);
     await user.click(screen.getByText("Ops Dashboard"));
     await user.click(screen.getByLabelText("Close"));
     expect(onCloseApp).toHaveBeenCalledTimes(1);
@@ -228,7 +273,7 @@ describe("AppsScreen", () => {
   it("ignores re-clicking the same app (no duplicate onSelectApp)", async () => {
     const user = userEvent.setup();
     const onSelectApp = vi.fn();
-    renderWithMantine(<AppsScreen {...buildProps({ onSelectApp })} />);
+    renderWithMantine(<ControlledAppsScreen onSelectApp={onSelectApp} />);
     // After the first click "Weather Widget" appears both in the sidebar
     // list item and the right-pane header, so target the sidebar entry
     // explicitly via the list-item button role.
@@ -240,7 +285,7 @@ describe("AppsScreen", () => {
 
   it("resets form state when switching to a different app", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<AppsScreen {...buildProps()} />);
+    renderWithMantine(<ControlledAppsScreen />);
     await user.click(screen.getByText("Weather Widget"));
     await user.type(
       screen.getByRole("textbox", { name: /city/i }),
@@ -287,7 +332,7 @@ describe("AppsScreen", () => {
       inputSchema: { type: "object" },
       _meta: { ui: { resourceUri: "ui://apps/weather-iconed" } },
     };
-    renderWithMantine(<AppsScreen {...buildProps({ tools: [iconedApp] })} />);
+    renderWithMantine(<ControlledAppsScreen tools={[iconedApp]} />);
     await user.click(screen.getByText("Weather (Iconed)"));
     const headerImg = screen
       .getAllByRole("presentation")
@@ -299,15 +344,16 @@ describe("AppsScreen", () => {
     const user = userEvent.setup();
     const onSelectApp = vi.fn();
     const { rerender } = renderWithMantine(
-      <AppsScreen {...buildProps({ onSelectApp })} />,
+      <ControlledAppsScreen onSelectApp={onSelectApp} />,
     );
     // Click an item, then re-render with a tools list that no longer
     // contains it: the selection state stays put, but a follow-up click
     // on the same name no-ops because the lookup fails.
     await user.click(screen.getByText("Weather Widget"));
     rerender(
-      <AppsScreen
-        {...buildProps({ onSelectApp, tools: [noFieldsApp, cohortApp] })}
+      <ControlledAppsScreen
+        onSelectApp={onSelectApp}
+        tools={[noFieldsApp, cohortApp]}
       />,
     );
     // Sidebar no longer shows Weather Widget; the right pane falls back
diff --git a/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx b/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
index fdcab3dc6..a776745ee 100644
--- a/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
+++ b/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
@@ -39,6 +39,18 @@ export interface AppsScreenProps {
   sandboxPath?: string;
   bridgeFactory: BridgeFactory;
   rendererRef: Ref<AppRendererHandle>;
+  // Selected app, its form values, and the sidebar search are controlled by the
+  // parent (App) so they persist across tab navigation within a live session
+  // (#1417). `running`/`maximized` stay local: they're tied to the live iframe
+  // and bridge, which are torn down on unmount, so persisting them would
+  // restore a flag without its runtime. On return the selected app's input
+  // form (with its values) is shown, ready to re-open.
+  selectedAppName?: string;
+  formValues?: Record<string, unknown>;
+  searchText?: string;
+  onSelectedAppNameChange: (value: string | undefined) => void;
+  onFormValuesChange: (values: Record<string, unknown>) => void;
+  onSearchChange: (value: string) => void;
   onRefreshList: () => void;
   onSelectApp: (name: string) => void;
   onOpenApp: (name: string, args: Record<string, unknown>) => void;
@@ -131,16 +143,18 @@ export function AppsScreen({
   sandboxPath,
   bridgeFactory,
   rendererRef,
+  selectedAppName,
+  formValues = {},
+  searchText = "",
+  onSelectedAppNameChange,
+  onFormValuesChange,
+  onSearchChange,
   onRefreshList,
   onSelectApp,
   onOpenApp,
   onCloseApp,
   onError,
 }: AppsScreenProps) {
-  const [selectedAppName, setSelectedAppName] = useState<string | undefined>(
-    undefined,
-  );
-  const [formValues, setFormValues] = useState<Record<string, unknown>>({});
   const [running, setRunning] = useState(false);
   const [maximized, setMaximized] = useState(false);
 
@@ -153,10 +167,10 @@ export function AppsScreen({
     if (name === selectedAppName) return;
     const next = tools.find((t) => t.name === name);
     if (!next) return;
-    setSelectedAppName(name);
+    onSelectedAppNameChange(name);
     // Seed schema defaults so default-only fields are sent on Open App (parity
     // with the form's resolveValue display, which onChange doesn't capture).
-    setFormValues(collectSchemaDefaults(next.inputSchema));
+    onFormValuesChange(collectSchemaDefaults(next.inputSchema));
     setMaximized(false);
     onSelectApp(name);
     // No-input apps auto-launch on selection so the user lands directly in
@@ -177,8 +191,8 @@ export function AppsScreen({
 
   function handleClose() {
     setRunning(false);
-    setSelectedAppName(undefined);
-    setFormValues({});
+    onSelectedAppNameChange(undefined);
+    onFormValuesChange({});
     setMaximized(false);
     onCloseApp();
   }
@@ -211,8 +225,10 @@ export function AppsScreen({
             <AppControls
               tools={tools}
               selectedName={selectedAppName}
+              searchText={searchText}
               listChanged={listChanged}
               onRefreshList={onRefreshList}
+              onSearchChange={onSearchChange}
               onSelectApp={handleSelect}
             />
           </SidebarCard>
@@ -294,7 +310,7 @@ export function AppsScreen({
                 tool={selectedTool}
                 formValues={formValues}
                 isOpening={false}
-                onFormChange={setFormValues}
+                onFormChange={onFormValuesChange}
                 onOpenApp={handleOpen}
               />
             )}
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
index f65bdba14..dc0ce3aa5 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
@@ -1,8 +1,32 @@
+import { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { MessageEntry } from "../../../../../../core/mcp/types.js";
+import type {
+  MessageEntry,
+  MessageMethod,
+} from "../../../../../../core/mcp/types.js";
 import { expect, fn, screen, userEvent, within } from "storybook/test";
 import { HistoryScreen } from "./HistoryScreen";
 
+// HistoryScreen is controlled (search text + method filter live in the parent —
+// see #1417). This wrapper holds that state so the play-driven filter selection
+// and clear-all reset are observable, mirroring how App owns the state.
+function StatefulHistoryScreen(args: ComponentProps<typeof HistoryScreen>) {
+  const [searchText, setSearchText] = useState(args.searchText ?? "");
+  const [methodFilter, setMethodFilter] = useState<MessageMethod | undefined>(
+    args.methodFilter,
+  );
+  return (
+    <HistoryScreen
+      {...args}
+      searchText={searchText}
+      methodFilter={methodFilter}
+      onSearchChange={setSearchText}
+      onMethodFilterChange={setMethodFilter}
+    />
+  );
+}
+
 const meta: Meta<typeof HistoryScreen> = {
   title: "Screens/HistoryScreen",
   component: HistoryScreen,
@@ -13,11 +37,14 @@ const meta: Meta<typeof HistoryScreen> = {
     onExport: fn(),
     onReplay: fn(),
     onTogglePin: fn(),
+    onSearchChange: fn(),
+    onMethodFilterChange: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
     compact: true,
     onToggleCompact: fn(),
   },
+  render: (args) => <StatefulHistoryScreen {...args} />,
 };
 
 export default meta;
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
index f9d76a1bb..3f79cd32b 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
@@ -22,6 +22,8 @@ const sampleEntries: MessageEntry[] = [
 const baseProps = {
   entries: sampleEntries,
   pinnedIds: new Set<string>(),
+  onSearchChange: vi.fn(),
+  onMethodFilterChange: vi.fn(),
   onClearAll: vi.fn(),
   onExport: vi.fn(),
   onReplay: vi.fn(),
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
index ccb5fa7ff..827ff6f3e 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
 import type { MessageEntry, MessageMethod } from "@inspector/core/mcp/types.js";
 import { HistoryControls } from "../../groups/HistoryControls/HistoryControls";
@@ -9,6 +9,12 @@ import type { SortDirection } from "../../elements/SortToggle/SortToggle";
 export interface HistoryScreenProps {
   entries: MessageEntry[];
   pinnedIds: Set<string>;
+  // Search text + method filter are controlled by the parent (App) so they
+  // persist across tab navigation within a live session — see #1417.
+  searchText?: string;
+  methodFilter?: MessageMethod;
+  onSearchChange: (value: string) => void;
+  onMethodFilterChange: (value: MessageMethod | undefined) => void;
   onClearAll: () => void;
   onExport: () => void;
   onReplay: (id: string) => void;
@@ -39,6 +45,10 @@ const SidebarCard = Card.withProps({
 export function HistoryScreen({
   entries,
   pinnedIds,
+  searchText = "",
+  methodFilter,
+  onSearchChange,
+  onMethodFilterChange,
   onClearAll,
   onExport,
   onReplay,
@@ -48,18 +58,15 @@ export function HistoryScreen({
   compact,
   onToggleCompact,
 }: HistoryScreenProps) {
-  const [searchText, setSearchText] = useState("");
-  const [methodFilter, setMethodFilter] = useState<MessageMethod | undefined>();
-
   const availableMethods = useMemo(
     () => Array.from(new Set(entries.map(extractMethod))).sort(),
     [entries],
   );
 
   const handleClearAll = useCallback(() => {
-    setMethodFilter(undefined);
+    onMethodFilterChange(undefined);
     onClearAll();
-  }, [onClearAll]);
+  }, [onMethodFilterChange, onClearAll]);
 
   return (
     <ScreenLayout>
@@ -69,8 +76,8 @@ export function HistoryScreen({
             searchText={searchText}
             methodFilter={methodFilter}
             availableMethods={availableMethods}
-            onSearchChange={setSearchText}
-            onMethodFilterChange={setMethodFilter}
+            onSearchChange={onSearchChange}
+            onMethodFilterChange={onMethodFilterChange}
           />
         </SidebarCard>
       </Sidebar>
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
index 655ed94a8..6052c50d9 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
@@ -13,6 +13,8 @@ const meta: Meta<typeof LoggingScreen> = {
     onSetLevel: fn(),
     onClear: fn(),
     onExport: fn(),
+    onFilterChange: fn(),
+    onVisibleLevelsChange: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
   },
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
index 70b97e80c..72c7497c4 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
@@ -1,11 +1,16 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { LoggingScreen } from "./LoggingScreen";
+import { LoggingScreen, type LoggingScreenProps } from "./LoggingScreen";
+import { ALL_LEVELS_VISIBLE } from "./logLevels";
 
 const baseProps = {
   entries: [],
   currentLevel: "info" as const,
+  onFilterChange: vi.fn(),
+  onVisibleLevelsChange: vi.fn(),
   onSetLevel: vi.fn(),
   onClear: vi.fn(),
   onExport: vi.fn(),
@@ -13,6 +18,34 @@ const baseProps = {
   onSortChange: vi.fn(),
 };
 
+// LoggingScreen is controlled: filter text + visible-level set live in the
+// parent (App) so they persist across tab navigation (#1417). This host holds
+// that state so typing/toggling drives the rendered list, mirroring how App
+// owns it. Props passed in override defaults; the stateful filter wiring is
+// applied last so callers can still observe changes via the spied callbacks.
+function ControlledLoggingScreen(props: Partial<LoggingScreenProps>) {
+  const [filterText, setFilterText] = useState(props.filterText ?? "");
+  const [visibleLevels, setVisibleLevels] = useState<
+    Record<LoggingLevel, boolean>
+  >(props.visibleLevels ?? ALL_LEVELS_VISIBLE);
+  return (
+    <LoggingScreen
+      {...baseProps}
+      {...props}
+      filterText={filterText}
+      visibleLevels={visibleLevels}
+      onFilterChange={(value) => {
+        setFilterText(value);
+        props.onFilterChange?.(value);
+      }}
+      onVisibleLevelsChange={(value) => {
+        setVisibleLevels(value);
+        props.onVisibleLevelsChange?.(value);
+      }}
+    />
+  );
+}
+
 describe("LoggingScreen", () => {
   it("renders the log stream panel", () => {
     renderWithMantine(<LoggingScreen {...baseProps} />);
@@ -58,7 +91,7 @@ describe("LoggingScreen", () => {
     const entries = [
       { receivedAt: new Date(), params: { level: "info" as const, data: "x" } },
     ];
-    renderWithMantine(<LoggingScreen {...baseProps} entries={entries} />);
+    renderWithMantine(<ControlledLoggingScreen entries={entries} />);
     expect(screen.getByText("x")).toBeInTheDocument();
     const debugButton = screen.getByRole("button", { name: "info" });
     await user.click(debugButton);
@@ -70,7 +103,7 @@ describe("LoggingScreen", () => {
     const entries = [
       { receivedAt: new Date(), params: { level: "info" as const, data: "x" } },
     ];
-    renderWithMantine(<LoggingScreen {...baseProps} entries={entries} />);
+    renderWithMantine(<ControlledLoggingScreen entries={entries} />);
     await user.click(screen.getByRole("button", { name: "Deselect All" }));
     expect(screen.queryByText("x")).not.toBeInTheDocument();
     await user.click(screen.getByRole("button", { name: "Select All" }));
@@ -89,7 +122,7 @@ describe("LoggingScreen", () => {
         params: { level: "info" as const, data: "beta" },
       },
     ];
-    renderWithMantine(<LoggingScreen {...baseProps} entries={entries} />);
+    renderWithMantine(<ControlledLoggingScreen entries={entries} />);
     await user.type(screen.getByPlaceholderText("Search..."), "alpha");
     expect(screen.getByText("alpha")).toBeInTheDocument();
     expect(screen.queryByText("beta")).not.toBeInTheDocument();
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
index 8eaf4446c..6a11d1728 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
@@ -1,14 +1,20 @@
-import { useState } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
 import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { LogControls } from "../../groups/LogControls/LogControls";
 import { LogStreamPanel } from "../../groups/LogStreamPanel/LogStreamPanel";
 import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 import type { SortDirection } from "../../elements/SortToggle/SortToggle";
+import { ALL_LEVELS_VISIBLE, NO_LEVELS_VISIBLE } from "./logLevels";
 
 export interface LoggingScreenProps {
   entries: LogEntryData[];
   currentLevel: LoggingLevel;
+  // Filter text + visible-level set are controlled by the parent (App) so they
+  // persist across tab navigation within a live session — see #1417.
+  filterText?: string;
+  visibleLevels?: Record<LoggingLevel, boolean>;
+  onFilterChange: (value: string) => void;
+  onVisibleLevelsChange: (value: Record<LoggingLevel, boolean>) => void;
   onSetLevel: (level: LoggingLevel) => void;
   onClear: () => void;
   onExport: () => void;
@@ -16,28 +22,6 @@ export interface LoggingScreenProps {
   onSortChange: (next: SortDirection) => void;
 }
 
-const ALL_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
-  debug: true,
-  info: true,
-  notice: true,
-  warning: true,
-  error: true,
-  critical: true,
-  alert: true,
-  emergency: true,
-};
-
-const NO_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
-  debug: false,
-  info: false,
-  notice: false,
-  warning: false,
-  error: false,
-  critical: false,
-  alert: false,
-  emergency: false,
-};
-
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -58,23 +42,23 @@ const SidebarCard = Card.withProps({
 export function LoggingScreen({
   entries,
   currentLevel,
+  filterText = "",
+  visibleLevels = ALL_LEVELS_VISIBLE,
+  onFilterChange,
+  onVisibleLevelsChange,
   onSetLevel,
   onClear,
   onExport,
   sortDirection,
   onSortChange,
 }: LoggingScreenProps) {
-  const [filterText, setFilterText] = useState("");
-  const [visibleLevels, setVisibleLevels] =
-    useState<Record<LoggingLevel, boolean>>(ALL_LEVELS_VISIBLE);
-
   function handleToggleLevel(level: LoggingLevel, visible: boolean) {
-    setVisibleLevels((prev) => ({ ...prev, [level]: visible }));
+    onVisibleLevelsChange({ ...visibleLevels, [level]: visible });
   }
 
   function handleToggleAllLevels() {
     const allSelected = Object.values(visibleLevels).every(Boolean);
-    setVisibleLevels(allSelected ? NO_LEVELS_VISIBLE : ALL_LEVELS_VISIBLE);
+    onVisibleLevelsChange(allSelected ? NO_LEVELS_VISIBLE : ALL_LEVELS_VISIBLE);
   }
 
   return (
@@ -86,7 +70,7 @@ export function LoggingScreen({
             filterText={filterText}
             visibleLevels={visibleLevels}
             onSetLevel={onSetLevel}
-            onFilterChange={setFilterText}
+            onFilterChange={onFilterChange}
             onToggleLevel={handleToggleLevel}
             onToggleAllLevels={handleToggleAllLevels}
           />
diff --git a/clients/web/src/components/screens/LoggingScreen/logLevels.ts b/clients/web/src/components/screens/LoggingScreen/logLevels.ts
new file mode 100644
index 000000000..115b97bff
--- /dev/null
+++ b/clients/web/src/components/screens/LoggingScreen/logLevels.ts
@@ -0,0 +1,27 @@
+import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
+
+// Default visible-level filter: every level on. Shared by LoggingScreen (its
+// fallback when the parent hasn't set `visibleLevels`) and App, which seeds and
+// resets the lifted filter state from it (#1417). Lives in its own module so
+// the screen file only exports a component (react-refresh constraint).
+export const ALL_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
+  debug: true,
+  info: true,
+  notice: true,
+  warning: true,
+  error: true,
+  critical: true,
+  alert: true,
+  emergency: true,
+};
+
+export const NO_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
+  debug: false,
+  info: false,
+  notice: false,
+  warning: false,
+  error: false,
+  critical: false,
+  alert: false,
+  emergency: false,
+};
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
index 56ef45d4c..b7429959f 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
@@ -1,8 +1,32 @@
+import { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, within } from "storybook/test";
-import type { FetchRequestEntry } from "../../../../../../core/mcp/types.js";
+import type {
+  FetchRequestCategory,
+  FetchRequestEntry,
+} from "../../../../../../core/mcp/types.js";
 import { NetworkScreen } from "./NetworkScreen";
 
+// NetworkScreen is controlled (filter text + visible categories live in the
+// parent — see #1417). This wrapper holds that state so the play-driven category
+// toggle actually hides entries, mirroring how App owns the state.
+function StatefulNetworkScreen(args: ComponentProps<typeof NetworkScreen>) {
+  const [filterText, setFilterText] = useState(args.filterText ?? "");
+  const [visibleCategories, setVisibleCategories] = useState<
+    Record<FetchRequestCategory, boolean> | undefined
+  >(args.visibleCategories);
+  return (
+    <NetworkScreen
+      {...args}
+      filterText={filterText}
+      visibleCategories={visibleCategories}
+      onFilterChange={setFilterText}
+      onVisibleCategoriesChange={setVisibleCategories}
+    />
+  );
+}
+
 const meta: Meta<typeof NetworkScreen> = {
   title: "Screens/NetworkScreen",
   component: NetworkScreen,
@@ -10,11 +34,14 @@ const meta: Meta<typeof NetworkScreen> = {
   args: {
     onClear: fn(),
     onExport: fn(),
+    onFilterChange: fn(),
+    onVisibleCategoriesChange: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
     compact: true,
     onToggleCompact: fn(),
   },
+  render: (args) => <StatefulNetworkScreen {...args} />,
 };
 
 export default meta;
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
index f081a4e15..4b29efca9 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
@@ -1,8 +1,13 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
-import type { FetchRequestEntry } from "@inspector/core/mcp/types.js";
+import type {
+  FetchRequestCategory,
+  FetchRequestEntry,
+} from "@inspector/core/mcp/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { NetworkScreen } from "./NetworkScreen";
+import { NetworkScreen, type NetworkScreenProps } from "./NetworkScreen";
+import { ALL_CATEGORIES_VISIBLE } from "./fetchCategories";
 
 const transportEntry: FetchRequestEntry = {
   id: "t-1",
@@ -41,6 +46,8 @@ const errorEntry: FetchRequestEntry = {
 
 const baseProps = {
   entries: [transportEntry, authEntry, errorEntry],
+  onFilterChange: vi.fn(),
+  onVisibleCategoriesChange: vi.fn(),
   onClear: vi.fn(),
   onExport: vi.fn(),
   sortDirection: "newest-first" as const,
@@ -49,6 +56,34 @@ const baseProps = {
   onToggleCompact: vi.fn(),
 };
 
+// NetworkScreen is controlled: filter text + visible-category set live in the
+// parent (App) so they persist across tab navigation (#1417). This host holds
+// that state so typing/toggling drives the rendered list, mirroring how App
+// owns it. Props passed in override defaults; the stateful filter wiring is
+// applied last so callers can still observe changes via the spied callbacks.
+function ControlledNetworkScreen(props: Partial<NetworkScreenProps>) {
+  const [filterText, setFilterText] = useState(props.filterText ?? "");
+  const [visibleCategories, setVisibleCategories] = useState<
+    Record<FetchRequestCategory, boolean>
+  >(props.visibleCategories ?? ALL_CATEGORIES_VISIBLE);
+  return (
+    <NetworkScreen
+      {...baseProps}
+      {...props}
+      filterText={filterText}
+      visibleCategories={visibleCategories}
+      onFilterChange={(value) => {
+        setFilterText(value);
+        props.onFilterChange?.(value);
+      }}
+      onVisibleCategoriesChange={(value) => {
+        setVisibleCategories(value);
+        props.onVisibleCategoriesChange?.(value);
+      }}
+    />
+  );
+}
+
 describe("NetworkScreen", () => {
   it("renders the network controls and panel", () => {
     renderWithMantine(<NetworkScreen {...baseProps} />);
@@ -77,7 +112,7 @@ describe("NetworkScreen", () => {
 
   it("filters by category when a category is toggled off", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<NetworkScreen {...baseProps} />);
+    renderWithMantine(<ControlledNetworkScreen />);
     expect(
       screen.getByText("https://example.com/oauth/token"),
     ).toBeInTheDocument();
@@ -89,7 +124,7 @@ describe("NetworkScreen", () => {
 
   it("Deselect All hides every entry; Select All restores them", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<NetworkScreen {...baseProps} />);
+    renderWithMantine(<ControlledNetworkScreen />);
     await user.click(screen.getByRole("button", { name: "Deselect All" }));
     expect(screen.getByText("No network requests")).toBeInTheDocument();
     await user.click(screen.getByRole("button", { name: "Select All" }));
@@ -100,7 +135,7 @@ describe("NetworkScreen", () => {
 
   it("filters by search text across URL, method, status, and headers", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<NetworkScreen {...baseProps} />);
+    renderWithMantine(<ControlledNetworkScreen />);
     await user.type(screen.getByPlaceholderText("Search..."), "oauth");
     expect(
       screen.getByText("https://example.com/oauth/token"),
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
index 93f7c52a0..d9397317f 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
 import type {
   FetchRequestCategory,
@@ -7,9 +6,21 @@ import type {
 import { NetworkControls } from "../../groups/NetworkControls/NetworkControls";
 import { NetworkStreamPanel } from "../../groups/NetworkStreamPanel/NetworkStreamPanel";
 import type { SortDirection } from "../../elements/SortToggle/SortToggle";
+import {
+  ALL_CATEGORIES_VISIBLE,
+  NO_CATEGORIES_VISIBLE,
+} from "./fetchCategories";
 
 export interface NetworkScreenProps {
   entries: FetchRequestEntry[];
+  // Filter text + visible-category set are controlled by the parent (App) so
+  // they persist across tab navigation within a live session — see #1417.
+  filterText?: string;
+  visibleCategories?: Record<FetchRequestCategory, boolean>;
+  onFilterChange: (value: string) => void;
+  onVisibleCategoriesChange: (
+    value: Record<FetchRequestCategory, boolean>,
+  ) => void;
   onClear: () => void;
   onExport: () => void;
   sortDirection: SortDirection;
@@ -18,16 +29,6 @@ export interface NetworkScreenProps {
   onToggleCompact: () => void;
 }
 
-const ALL_CATEGORIES_VISIBLE: Record<FetchRequestCategory, boolean> = {
-  auth: true,
-  transport: true,
-};
-
-const NO_CATEGORIES_VISIBLE: Record<FetchRequestCategory, boolean> = {
-  auth: false,
-  transport: false,
-};
-
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -47,6 +48,10 @@ const SidebarCard = Card.withProps({
 
 export function NetworkScreen({
   entries,
+  filterText = "",
+  visibleCategories = ALL_CATEGORIES_VISIBLE,
+  onFilterChange,
+  onVisibleCategoriesChange,
   onClear,
   onExport,
   sortDirection,
@@ -54,21 +59,16 @@ export function NetworkScreen({
   compact,
   onToggleCompact,
 }: NetworkScreenProps) {
-  const [filterText, setFilterText] = useState("");
-  const [visibleCategories, setVisibleCategories] = useState<
-    Record<FetchRequestCategory, boolean>
-  >(ALL_CATEGORIES_VISIBLE);
-
   function handleToggleCategory(
     category: FetchRequestCategory,
     visible: boolean,
   ) {
-    setVisibleCategories((prev) => ({ ...prev, [category]: visible }));
+    onVisibleCategoriesChange({ ...visibleCategories, [category]: visible });
   }
 
   function handleToggleAllCategories() {
     const allSelected = Object.values(visibleCategories).every(Boolean);
-    setVisibleCategories(
+    onVisibleCategoriesChange(
       allSelected ? NO_CATEGORIES_VISIBLE : ALL_CATEGORIES_VISIBLE,
     );
   }
@@ -80,7 +80,7 @@ export function NetworkScreen({
           <NetworkControls
             filterText={filterText}
             visibleCategories={visibleCategories}
-            onFilterChange={setFilterText}
+            onFilterChange={onFilterChange}
             onToggleCategory={handleToggleCategory}
             onToggleAllCategories={handleToggleAllCategories}
           />
diff --git a/clients/web/src/components/screens/NetworkScreen/fetchCategories.ts b/clients/web/src/components/screens/NetworkScreen/fetchCategories.ts
new file mode 100644
index 000000000..86a80c7f8
--- /dev/null
+++ b/clients/web/src/components/screens/NetworkScreen/fetchCategories.ts
@@ -0,0 +1,15 @@
+import type { FetchRequestCategory } from "@inspector/core/mcp/types.js";
+
+// Default visible-category filter: every category on. Shared by NetworkScreen
+// (its fallback when the parent hasn't set `visibleCategories`) and App, which
+// seeds and resets the lifted filter state from it (#1417). Lives in its own
+// module so the screen file only exports a component (react-refresh constraint).
+export const ALL_CATEGORIES_VISIBLE: Record<FetchRequestCategory, boolean> = {
+  auth: true,
+  transport: true,
+};
+
+export const NO_CATEGORIES_VISIBLE: Record<FetchRequestCategory, boolean> = {
+  auth: false,
+  transport: false,
+};
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
index f947a071b..57886a9ac 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
@@ -1,9 +1,39 @@
+import { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { fn, userEvent, within } from "storybook/test";
 import { PromptsScreen } from "./PromptsScreen";
 import type { GetPromptState } from "./PromptsScreen";
 
+// PromptsScreen is controlled (selection, argument values, submitted prompt, and
+// search text live in the parent — see #1417). This wrapper holds that state so
+// the play-driven prompt clicks still drive the detail panel, mirroring how App
+// owns the state in the real app.
+function StatefulPromptsScreen(args: ComponentProps<typeof PromptsScreen>) {
+  const [selectedPromptName, setSelectedPromptName] = useState(
+    args.selectedPromptName,
+  );
+  const [argumentValues, setArgumentValues] = useState<Record<string, string>>(
+    args.argumentValues ?? {},
+  );
+  const [submittedFor, setSubmittedFor] = useState(args.submittedFor);
+  const [searchText, setSearchText] = useState(args.searchText ?? "");
+  return (
+    <PromptsScreen
+      {...args}
+      selectedPromptName={selectedPromptName}
+      argumentValues={argumentValues}
+      submittedFor={submittedFor}
+      searchText={searchText}
+      onSelectedPromptNameChange={setSelectedPromptName}
+      onArgumentValuesChange={setArgumentValues}
+      onSubmittedForChange={setSubmittedFor}
+      onSearchChange={setSearchText}
+    />
+  );
+}
+
 const meta: Meta<typeof PromptsScreen> = {
   title: "Screens/PromptsScreen",
   component: PromptsScreen,
@@ -12,8 +42,13 @@ const meta: Meta<typeof PromptsScreen> = {
     onRefreshList: fn(),
     onGetPrompt: fn(),
     onCopyMessages: fn(),
+    onSelectedPromptNameChange: fn(),
+    onArgumentValuesChange: fn(),
+    onSubmittedForChange: fn(),
+    onSearchChange: fn(),
     listChanged: false,
   },
+  render: (args) => <StatefulPromptsScreen {...args} />,
 };
 
 export default meta;
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx
index 025b16ef6..533045b0b 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx
@@ -1,8 +1,9 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { PromptsScreen } from "./PromptsScreen";
+import { PromptsScreen, type PromptsScreenProps } from "./PromptsScreen";
 
 const promptsWithArgs: Prompt[] = [
   {
@@ -27,8 +28,59 @@ const baseProps = {
   listChanged: false,
   onRefreshList: vi.fn(),
   onGetPrompt: vi.fn(),
+  onSelectedPromptNameChange: vi.fn(),
+  onArgumentValuesChange: vi.fn(),
+  onSubmittedForChange: vi.fn(),
+  onSearchChange: vi.fn(),
 };
 
+// PromptsScreen is controlled: selection, argument values, the submitted
+// marker, and the sidebar search live in the parent (App) so they persist
+// across tab navigation (#1417). This host holds that state so clicking a
+// prompt, typing arguments, submitting, and closing drive the panel exactly
+// as App owns it. Props passed in override defaults; the stateful wiring is
+// applied last so callers can still observe activity via the spied callbacks.
+function ControlledPromptsScreen(props: Partial<PromptsScreenProps>) {
+  const [selectedPromptName, setSelectedPromptName] = useState<
+    string | undefined
+  >(props.selectedPromptName);
+  const [argumentValues, setArgumentValues] = useState<Record<string, string>>(
+    props.argumentValues ?? {},
+  );
+  const [submittedFor, setSubmittedFor] = useState<string | undefined>(
+    props.submittedFor,
+  );
+  const [searchText, setSearchText] = useState<string | undefined>(
+    props.searchText,
+  );
+  return (
+    <PromptsScreen
+      {...baseProps}
+      {...props}
+      selectedPromptName={selectedPromptName}
+      argumentValues={argumentValues}
+      submittedFor={submittedFor}
+      searchText={searchText}
+      onSelectedPromptNameChange={(value) => {
+        setSelectedPromptName(value);
+        props.onSelectedPromptNameChange?.(value);
+      }}
+      onArgumentValuesChange={(value) => {
+        setArgumentValues(value);
+        props.onArgumentValuesChange?.(value);
+      }}
+      onSubmittedForChange={(value) => {
+        setSubmittedFor(value);
+        props.onSubmittedForChange?.(value);
+      }}
+      onSearchChange={(value) => {
+        setSearchText(value);
+        props.onSearchChange?.(value);
+      }}
+    />
+  );
+}
+
 describe("PromptsScreen", () => {
   it("renders the empty state when no prompt is selected", () => {
     renderWithMantine(<PromptsScreen {...baseProps} />);
@@ -39,7 +91,7 @@ describe("PromptsScreen", () => {
 
   it("shows the argument form when a prompt with arguments is selected", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<PromptsScreen {...baseProps} />);
+    renderWithMantine(<ControlledPromptsScreen />);
     await user.click(screen.getByText("summarize"));
     expect(
       screen.getByRole("button", { name: "Get Prompt" }),
@@ -50,8 +102,7 @@ describe("PromptsScreen", () => {
     const user = userEvent.setup();
     const onGetPrompt = vi.fn();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         prompts={noArgPrompts}
         onGetPrompt={onGetPrompt}
       />,
@@ -68,8 +119,7 @@ describe("PromptsScreen", () => {
     const user = userEvent.setup();
     const onGetPrompt = vi.fn();
     const { rerender } = renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         prompts={noArgPrompts}
         onGetPrompt={onGetPrompt}
       />,
@@ -79,8 +129,7 @@ describe("PromptsScreen", () => {
     // Parent re-renders with a fresh pending state — the fetch must not
     // re-fire just because props changed.
     rerender(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         prompts={noArgPrompts}
         onGetPrompt={onGetPrompt}
         getPromptState={{ status: "pending", promptName: "ping" }}
@@ -93,8 +142,7 @@ describe("PromptsScreen", () => {
     const user = userEvent.setup();
     const onGetPrompt = vi.fn();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         onGetPrompt={onGetPrompt}
         getPromptState={{
           status: "ok",
@@ -119,8 +167,7 @@ describe("PromptsScreen", () => {
   it("shows pending state once the user has submitted", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         getPromptState={{ status: "pending", promptName: "summarize" }}
       />,
     );
@@ -133,8 +180,7 @@ describe("PromptsScreen", () => {
   it("shows error state once the user has submitted", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         getPromptState={{
           status: "error",
           promptName: "summarize",
@@ -152,8 +198,7 @@ describe("PromptsScreen", () => {
   it("falls back to a default error message when none is provided", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         getPromptState={{ status: "error", promptName: "summarize" }}
       />,
     );
@@ -166,8 +211,7 @@ describe("PromptsScreen", () => {
   it("ignores a stale getPromptState whose name does not match the selection", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         // Stale result for a prompt the user is no longer viewing.
         getPromptState={{
           status: "ok",
@@ -190,8 +234,7 @@ describe("PromptsScreen", () => {
     const user = userEvent.setup();
     const onGetPrompt = vi.fn();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         prompts={noArgPrompts}
         onGetPrompt={onGetPrompt}
       />,
@@ -210,9 +253,7 @@ describe("PromptsScreen", () => {
       { name: "alpha", arguments: [{ name: "x" }] },
       { name: "beta", arguments: [{ name: "y" }] },
     ];
-    renderWithMantine(
-      <PromptsScreen {...baseProps} prompts={arglessTwoStep} />,
-    );
+    renderWithMantine(<ControlledPromptsScreen prompts={arglessTwoStep} />);
     await user.click(screen.getByText("alpha"));
     await user.type(screen.getByPlaceholderText("Enter x..."), "value");
     await user.click(screen.getByText("beta"));
@@ -222,8 +263,7 @@ describe("PromptsScreen", () => {
   it("closing the preview from the error state brings the form back", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         getPromptState={{
           status: "error",
           promptName: "summarize",
@@ -244,8 +284,7 @@ describe("PromptsScreen", () => {
   it("closing the preview for an arg-bearing prompt brings the form back", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         getPromptState={{
           status: "ok",
           promptName: "summarize",
@@ -270,8 +309,7 @@ describe("PromptsScreen", () => {
   it("closing the preview for a no-arg prompt drops the selection", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         prompts={noArgPrompts}
         getPromptState={{
           status: "ok",
@@ -305,8 +343,7 @@ describe("PromptsScreen", () => {
       >()
       .mockResolvedValue([]);
     renderWithMantine(
-      <PromptsScreen
-        {...baseProps}
+      <ControlledPromptsScreen
         completionsSupported
         onCompleteArgument={onCompleteArgument}
       />,
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
index a3d7f1aba..2a90ecab1 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   Alert,
   Card,
@@ -31,8 +30,19 @@ export interface GetPromptState {
 export interface PromptsScreenProps {
   prompts: Prompt[];
   getPromptState?: GetPromptState;
+  // Selection, argument values, the "submitted" marker, and the sidebar search
+  // are controlled by the parent (App) so they persist across tab navigation
+  // within a live session — see #1417.
+  selectedPromptName?: string;
+  argumentValues?: Record<string, string>;
+  submittedFor?: string;
+  searchText?: string;
   listChanged: boolean;
   completionsSupported?: boolean;
+  onSelectedPromptNameChange: (value: string | undefined) => void;
+  onArgumentValuesChange: (value: Record<string, string>) => void;
+  onSubmittedForChange: (value: string | undefined) => void;
+  onSearchChange: (value: string) => void;
   onRefreshList: () => void;
   onGetPrompt: (name: string, args: Record<string, string>) => void;
   onCopyMessages?: () => void;
@@ -102,26 +112,21 @@ function hasArguments(prompt: Prompt): boolean {
 export function PromptsScreen({
   prompts,
   getPromptState,
+  selectedPromptName,
+  argumentValues = {},
+  submittedFor,
+  searchText = "",
   listChanged,
   completionsSupported,
+  onSelectedPromptNameChange,
+  onArgumentValuesChange,
+  onSubmittedForChange,
+  onSearchChange,
   onRefreshList,
   onGetPrompt,
   onCopyMessages,
   onCompleteArgument,
 }: PromptsScreenProps) {
-  const [selectedPromptName, setSelectedPromptName] = useState<
-    string | undefined
-  >(undefined);
-  const [argumentValues, setArgumentValues] = useState<Record<string, string>>(
-    {},
-  );
-  // Track which prompt the user has already submitted in this session so
-  // the form pane disappears once the user clicks Get Prompt. Cleared on
-  // sidebar switch so the form re-appears for a freshly-selected prompt.
-  const [submittedFor, setSubmittedFor] = useState<string | undefined>(
-    undefined,
-  );
-
   const selectedPrompt = selectedPromptName
     ? prompts.find((p) => p.name === selectedPromptName)
     : undefined;
@@ -132,23 +137,23 @@ export function PromptsScreen({
     // for navigation, ✕ is for dismiss. Closing-then-reselecting is
     // its own thing (the close handler clears submittedFor).
     if (name === selectedPromptName) return;
-    setArgumentValues({});
-    setSelectedPromptName(name);
+    onArgumentValuesChange({});
+    onSelectedPromptNameChange(name);
     // Auto-fetch no-argument prompts the moment they're selected — the
     // form pane would otherwise just render a bare Get Prompt button
     // with nothing to fill in. Prompts with arguments wait for submit.
     const target = prompts.find((p) => p.name === name);
     if (target && !hasArguments(target)) {
-      setSubmittedFor(name);
+      onSubmittedForChange(name);
       onGetPrompt(name, {});
     } else {
-      setSubmittedFor(undefined);
+      onSubmittedForChange(undefined);
     }
   }
 
   function handleSubmit() {
     if (!selectedPrompt) return;
-    setSubmittedFor(selectedPrompt.name);
+    onSubmittedForChange(selectedPrompt.name);
     onGetPrompt(selectedPrompt.name, argumentValues);
   }
 
@@ -158,10 +163,10 @@ export function PromptsScreen({
     // prompts there's no form to return to, so drop the selection and
     // fall back to the empty state.
     if (selectedPrompt && hasArguments(selectedPrompt)) {
-      setSubmittedFor(undefined);
+      onSubmittedForChange(undefined);
     } else {
-      setSelectedPromptName(undefined);
-      setSubmittedFor(undefined);
+      onSelectedPromptNameChange(undefined);
+      onSubmittedForChange(undefined);
     }
   }
 
@@ -235,8 +240,10 @@ export function PromptsScreen({
           <PromptControls
             prompts={prompts}
             selectedName={selectedPromptName}
+            searchText={searchText}
             listChanged={listChanged}
             onRefreshList={onRefreshList}
+            onSearchChange={onSearchChange}
             onSelectPrompt={handleSelectPrompt}
           />
         </SidebarCard>
@@ -256,7 +263,7 @@ export function PromptsScreen({
               prompt={selectedPrompt}
               argumentValues={argumentValues}
               onArgumentChange={(argName, value) =>
-                setArgumentValues((prev) => ({ ...prev, [argName]: value }))
+                onArgumentValuesChange({ ...argumentValues, [argName]: value })
               }
               onGetPrompt={handleSubmit}
               completionsSupported={completionsSupported}
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
index d63576e0b..ff7417601 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type {
   Resource,
@@ -8,6 +10,39 @@ import { fn, userEvent, within } from "storybook/test";
 import { ResourcesScreen } from "./ResourcesScreen";
 import type { ReadResourceState } from "./ResourcesScreen";
 
+// ResourcesScreen is controlled (resource/template selection, the originating
+// template, search text, and open accordion sections live in the parent — see
+// #1417). This wrapper holds that state so the play-driven clicks still drive
+// the detail/preview panels, mirroring how App owns the state in the real app.
+function StatefulResourcesScreen(args: ComponentProps<typeof ResourcesScreen>) {
+  const [selectedResourceUri, setSelectedResourceUri] = useState(
+    args.selectedResourceUri,
+  );
+  const [selectedTemplateUri, setSelectedTemplateUri] = useState(
+    args.selectedTemplateUri,
+  );
+  const [originatingTemplateUri, setOriginatingTemplateUri] = useState(
+    args.originatingTemplateUri,
+  );
+  const [searchText, setSearchText] = useState(args.searchText ?? "");
+  const [openSections, setOpenSections] = useState(args.openSections);
+  return (
+    <ResourcesScreen
+      {...args}
+      selectedResourceUri={selectedResourceUri}
+      selectedTemplateUri={selectedTemplateUri}
+      originatingTemplateUri={originatingTemplateUri}
+      searchText={searchText}
+      openSections={openSections}
+      onSelectedResourceUriChange={setSelectedResourceUri}
+      onSelectedTemplateUriChange={setSelectedTemplateUri}
+      onOriginatingTemplateUriChange={setOriginatingTemplateUri}
+      onSearchChange={setSearchText}
+      onOpenSectionsChange={setOpenSections}
+    />
+  );
+}
+
 const meta: Meta<typeof ResourcesScreen> = {
   title: "Screens/ResourcesScreen",
   component: ResourcesScreen,
@@ -17,12 +52,18 @@ const meta: Meta<typeof ResourcesScreen> = {
     onReadResource: fn(),
     onSubscribeResource: fn(),
     onUnsubscribeResource: fn(),
+    onSelectedResourceUriChange: fn(),
+    onSelectedTemplateUriChange: fn(),
+    onOriginatingTemplateUriChange: fn(),
+    onSearchChange: fn(),
+    onOpenSectionsChange: fn(),
     listChanged: false,
     subscriptions: [],
     templates: [],
     compact: false,
     onCompactChange: fn(),
   },
+  render: (args) => <StatefulResourcesScreen {...args} />,
 };
 
 export default meta;
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
index ccfca15fc..54e44b492 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type {
@@ -6,7 +7,7 @@ import type {
   ReadResourceResult,
 } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { ResourcesScreen } from "./ResourcesScreen";
+import { ResourcesScreen, type ResourcesScreenProps } from "./ResourcesScreen";
 
 const resources: Resource[] = [
   { uri: "file:///x", name: "x.txt" },
@@ -26,6 +27,11 @@ const baseProps = {
   onReadResource: vi.fn(),
   onSubscribeResource: vi.fn(),
   onUnsubscribeResource: vi.fn(),
+  onSelectedResourceUriChange: vi.fn(),
+  onSelectedTemplateUriChange: vi.fn(),
+  onOriginatingTemplateUriChange: vi.fn(),
+  onSearchChange: vi.fn(),
+  onOpenSectionsChange: vi.fn(),
   compact: false,
   onCompactChange: vi.fn(),
 };
@@ -34,6 +40,62 @@ const okResult: ReadResourceResult = {
   contents: [{ uri: "file:///x", text: "embedded contents" }],
 };
 
+// ResourcesScreen is controlled: the selected resource/template URIs, the
+// originating-template marker, the sidebar search, and the accordion's open
+// sections live in the parent (App) so they persist across tab navigation
+// (#1417). This host holds that state so clicking a resource/template, typing
+// into the template form, reading, and closing drive the panel exactly as App
+// owns it. Props passed in override defaults; the stateful wiring is applied
+// last so callers can still observe activity via the spied callbacks.
+function ControlledResourcesScreen(props: Partial<ResourcesScreenProps>) {
+  const [selectedResourceUri, setSelectedResourceUri] = useState<
+    string | undefined
+  >(props.selectedResourceUri);
+  const [selectedTemplateUri, setSelectedTemplateUri] = useState<
+    string | undefined
+  >(props.selectedTemplateUri);
+  const [originatingTemplateUri, setOriginatingTemplateUri] = useState<
+    string | undefined
+  >(props.originatingTemplateUri);
+  const [searchText, setSearchText] = useState<string | undefined>(
+    props.searchText,
+  );
+  const [openSections, setOpenSections] = useState<string[] | undefined>(
+    props.openSections,
+  );
+  return (
+    <ResourcesScreen
+      {...baseProps}
+      {...props}
+      selectedResourceUri={selectedResourceUri}
+      selectedTemplateUri={selectedTemplateUri}
+      originatingTemplateUri={originatingTemplateUri}
+      searchText={searchText}
+      openSections={openSections}
+      onSelectedResourceUriChange={(value) => {
+        setSelectedResourceUri(value);
+        props.onSelectedResourceUriChange?.(value);
+      }}
+      onSelectedTemplateUriChange={(value) => {
+        setSelectedTemplateUri(value);
+        props.onSelectedTemplateUriChange?.(value);
+      }}
+      onOriginatingTemplateUriChange={(value) => {
+        setOriginatingTemplateUri(value);
+        props.onOriginatingTemplateUriChange?.(value);
+      }}
+      onSearchChange={(value) => {
+        setSearchText(value);
+        props.onSearchChange?.(value);
+      }}
+      onOpenSectionsChange={(value) => {
+        setOpenSections(value);
+        props.onOpenSectionsChange?.(value);
+      }}
+    />
+  );
+}
+
 describe("ResourcesScreen", () => {
   it("renders empty preview state when nothing is selected", () => {
     renderWithMantine(<ResourcesScreen {...baseProps} />);
@@ -45,8 +107,7 @@ describe("ResourcesScreen", () => {
   it("shows the read error alert when error and a resource is selected", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <ResourcesScreen
-        {...baseProps}
+      <ControlledResourcesScreen
         readState={{ status: "error", error: "boom" }}
       />,
     );
@@ -58,7 +119,7 @@ describe("ResourcesScreen", () => {
   it("falls back to default error when error message is missing", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <ResourcesScreen {...baseProps} readState={{ status: "error" }} />,
+      <ControlledResourcesScreen readState={{ status: "error" }} />,
     );
     await user.click(screen.getByText("x.txt"));
     expect(screen.getByText("Failed to read resource")).toBeInTheDocument();
@@ -67,7 +128,7 @@ describe("ResourcesScreen", () => {
   it("shows the loading state when reading", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <ResourcesScreen {...baseProps} readState={{ status: "pending" }} />,
+      <ControlledResourcesScreen readState={{ status: "pending" }} />,
     );
     await user.click(screen.getByText("x.txt"));
     expect(screen.getByText("Reading resource...")).toBeInTheDocument();
@@ -76,8 +137,7 @@ describe("ResourcesScreen", () => {
   it("renders the preview panel when readState has a result", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <ResourcesScreen
-        {...baseProps}
+      <ControlledResourcesScreen
         readState={{
           status: "ok",
           uri: "file:///x",
@@ -108,7 +168,7 @@ describe("ResourcesScreen", () => {
 
   it("renders the template panel when a template is selected", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<ResourcesScreen {...baseProps} />);
+    renderWithMantine(<ControlledResourcesScreen />);
     await user.click(screen.getByText("Templates (1)"));
     await user.click(screen.getByText("files"));
     expect(
@@ -120,7 +180,7 @@ describe("ResourcesScreen", () => {
     const user = userEvent.setup();
     const onReadResource = vi.fn();
     renderWithMantine(
-      <ResourcesScreen {...baseProps} onReadResource={onReadResource} />,
+      <ControlledResourcesScreen onReadResource={onReadResource} />,
     );
     await user.click(screen.getByText("Templates (1)"));
     await user.click(screen.getByText("files"));
@@ -137,7 +197,7 @@ describe("ResourcesScreen", () => {
     const user = userEvent.setup();
     const onReadResource = vi.fn();
     renderWithMantine(
-      <ResourcesScreen {...baseProps} onReadResource={onReadResource} />,
+      <ControlledResourcesScreen onReadResource={onReadResource} />,
     );
     await user.click(screen.getByText("x.txt"));
     expect(onReadResource).toHaveBeenCalledWith("file:///x");
@@ -148,8 +208,7 @@ describe("ResourcesScreen", () => {
     const onReadResource = vi.fn();
     const onSubscribeResource = vi.fn();
     renderWithMantine(
-      <ResourcesScreen
-        {...baseProps}
+      <ControlledResourcesScreen
         onReadResource={onReadResource}
         onSubscribeResource={onSubscribeResource}
         readState={{
@@ -174,8 +233,7 @@ describe("ResourcesScreen", () => {
       { uriTemplate: "file:///{path}", name: "files" },
     ];
     const { rerender } = renderWithMantine(
-      <ResourcesScreen
-        {...baseProps}
+      <ControlledResourcesScreen
         templates={templates}
         onReadResource={onReadResource}
       />,
@@ -191,8 +249,7 @@ describe("ResourcesScreen", () => {
 
     // Parent re-renders with the read result; the preview appears.
     rerender(
-      <ResourcesScreen
-        {...baseProps}
+      <ControlledResourcesScreen
         templates={templates}
         onReadResource={onReadResource}
         readState={{
@@ -218,7 +275,7 @@ describe("ResourcesScreen", () => {
       { uriTemplate: "demo://resource/dynamic/text/{id}", name: "Dynamic" },
     ];
     const { rerender } = renderWithMantine(
-      <ResourcesScreen {...baseProps} templates={templates} />,
+      <ControlledResourcesScreen templates={templates} />,
     );
     await user.click(screen.getByText("Templates (1)"));
     await user.click(screen.getByText("Dynamic"));
@@ -227,8 +284,7 @@ describe("ResourcesScreen", () => {
 
     // Server rejects the URI.
     rerender(
-      <ResourcesScreen
-        {...baseProps}
+      <ControlledResourcesScreen
         templates={templates}
         readState={{
           status: "error",
@@ -248,8 +304,7 @@ describe("ResourcesScreen", () => {
   it("closing the preview for a plain resource returns to the empty state", async () => {
     const user = userEvent.setup();
     renderWithMantine(
-      <ResourcesScreen
-        {...baseProps}
+      <ControlledResourcesScreen
         readState={{
           status: "ok",
           uri: "file:///x",
@@ -268,8 +323,7 @@ describe("ResourcesScreen", () => {
     const user = userEvent.setup();
     const onUnsubscribeResource = vi.fn();
     renderWithMantine(
-      <ResourcesScreen
-        {...baseProps}
+      <ControlledResourcesScreen
         onUnsubscribeResource={onUnsubscribeResource}
         readState={{
           status: "ok",
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
index 82372878b..655a71cea 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   Alert,
   Card,
@@ -33,8 +32,22 @@ export interface ResourcesScreenProps {
   templates: ResourceTemplate[];
   subscriptions: InspectorResourceSubscription[];
   readState?: ReadResourceState;
+  // Selection (resource URI, template URI, the originating-template marker),
+  // the sidebar search, and accordion open-sections are controlled by the
+  // parent (App) so they persist across tab navigation within a live
+  // session — see #1417.
+  selectedResourceUri?: string;
+  selectedTemplateUri?: string;
+  originatingTemplateUri?: string;
+  searchText?: string;
+  openSections?: string[];
   listChanged: boolean;
   completionsSupported?: boolean;
+  onSelectedResourceUriChange: (value: string | undefined) => void;
+  onSelectedTemplateUriChange: (value: string | undefined) => void;
+  onOriginatingTemplateUriChange: (value: string | undefined) => void;
+  onSearchChange: (value: string) => void;
+  onOpenSectionsChange: (value: string[]) => void;
   onRefreshList: () => void;
   onReadResource: (uri: string) => void;
   onSubscribeResource: (uri: string) => void;
@@ -107,8 +120,18 @@ export function ResourcesScreen({
   templates,
   subscriptions,
   readState,
+  selectedResourceUri,
+  selectedTemplateUri,
+  originatingTemplateUri,
+  searchText = "",
+  openSections,
   listChanged,
   completionsSupported,
+  onSelectedResourceUriChange,
+  onSelectedTemplateUriChange,
+  onOriginatingTemplateUriChange,
+  onSearchChange,
+  onOpenSectionsChange,
   onRefreshList,
   onReadResource,
   onSubscribeResource,
@@ -117,20 +140,6 @@ export function ResourcesScreen({
   compact,
   onCompactChange,
 }: ResourcesScreenProps) {
-  const [selectedResourceUri, setSelectedResourceUri] = useState<
-    string | undefined
-  >(undefined);
-  const [selectedTemplateUri, setSelectedTemplateUri] = useState<
-    string | undefined
-  >(undefined);
-  // Tracks which template (if any) produced the current preview so that
-  // closing the preview can restore the template form. Cleared when the
-  // user navigates to a non-template resource or picks a different
-  // template directly from the sidebar.
-  const [originatingTemplateUri, setOriginatingTemplateUri] = useState<
-    string | undefined
-  >(undefined);
-
   const selectedResource = selectedResourceUri
     ? resources.find((r) => r.uri === selectedResourceUri)
     : undefined;
@@ -147,16 +156,16 @@ export function ResourcesScreen({
       : undefined);
 
   function handleSelectResource(uri: string) {
-    setSelectedTemplateUri(undefined);
-    setSelectedResourceUri(uri);
-    setOriginatingTemplateUri(undefined);
+    onSelectedTemplateUriChange(undefined);
+    onSelectedResourceUriChange(uri);
+    onOriginatingTemplateUriChange(undefined);
     onReadResource(uri);
   }
 
   function handleSelectTemplate(uriTemplate: string) {
-    setSelectedResourceUri(undefined);
-    setSelectedTemplateUri(uriTemplate);
-    setOriginatingTemplateUri(undefined);
+    onSelectedResourceUriChange(undefined);
+    onSelectedTemplateUriChange(uriTemplate);
+    onOriginatingTemplateUriChange(undefined);
   }
 
   function handleReadResource(uri: string) {
@@ -166,18 +175,18 @@ export function ResourcesScreen({
     // the rendered resource is shown. We remember the template URI so
     // closing the preview can restore the form.
     if (selectedTemplateUri) {
-      setOriginatingTemplateUri(selectedTemplateUri);
+      onOriginatingTemplateUriChange(selectedTemplateUri);
     }
-    setSelectedTemplateUri(undefined);
-    setSelectedResourceUri(uri);
+    onSelectedTemplateUriChange(undefined);
+    onSelectedResourceUriChange(uri);
     onReadResource(uri);
   }
 
   function handleClosePreview() {
-    setSelectedResourceUri(undefined);
+    onSelectedResourceUriChange(undefined);
     if (originatingTemplateUri) {
-      setSelectedTemplateUri(originatingTemplateUri);
-      setOriginatingTemplateUri(undefined);
+      onSelectedTemplateUriChange(originatingTemplateUri);
+      onOriginatingTemplateUriChange(undefined);
     }
   }
 
@@ -251,8 +260,12 @@ export function ResourcesScreen({
             subscriptions={subscriptions}
             selectedUri={selectedResourceUri}
             selectedTemplateUri={selectedTemplateUri}
+            searchText={searchText}
+            openSections={openSections}
             listChanged={listChanged}
             onRefreshList={onRefreshList}
+            onSearchChange={onSearchChange}
+            onOpenSectionsChange={onOpenSectionsChange}
             onSelectUri={handleSelectResource}
             onSelectTemplate={handleSelectTemplate}
             onUnsubscribeResource={onUnsubscribeResource}
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
index 409573d2c..f9c28bb9b 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
@@ -11,6 +11,8 @@ const meta: Meta<typeof TasksScreen> = {
     onRefresh: fn(),
     onClearCompleted: fn(),
     onCancel: fn(),
+    onSearchChange: fn(),
+    onStatusFilterChange: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx
index dd1439b01..4082ff522 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx
@@ -17,6 +17,8 @@ const tasks: Task[] = [
 
 const baseProps = {
   tasks,
+  onSearchChange: vi.fn(),
+  onStatusFilterChange: vi.fn(),
   onRefresh: vi.fn(),
   onClearCompleted: vi.fn(),
   onCancel: vi.fn(),
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
index b0fe9a1d1..f2583e626 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Card, Flex, Stack } from "@mantine/core";
 import type { Task, TaskStatus } from "@modelcontextprotocol/sdk/types.js";
 import { TaskControls } from "../../groups/TaskControls/TaskControls";
@@ -8,6 +7,12 @@ import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
 export interface TasksScreenProps {
   tasks: Task[];
   progressByTaskId?: Record<string, TaskProgress>;
+  // Search + status filter are controlled by the parent (App) so they persist
+  // across tab navigation within a live session — see #1417.
+  searchText?: string;
+  statusFilter?: TaskStatus;
+  onSearchChange: (value: string) => void;
+  onStatusFilterChange: (value: TaskStatus | undefined) => void;
   onRefresh: () => void;
   onClearCompleted: () => void;
   onCancel: (taskId: string) => void;
@@ -33,13 +38,14 @@ const SidebarCard = Card.withProps({
 export function TasksScreen({
   tasks,
   progressByTaskId,
+  searchText = "",
+  statusFilter,
+  onSearchChange,
+  onStatusFilterChange,
   onRefresh,
   onClearCompleted,
   onCancel,
 }: TasksScreenProps) {
-  const [searchText, setSearchText] = useState("");
-  const [statusFilter, setStatusFilter] = useState<TaskStatus | undefined>();
-
   return (
     <ScreenLayout>
       <Sidebar>
@@ -47,8 +53,8 @@ export function TasksScreen({
           <TaskControls
             searchText={searchText}
             statusFilter={statusFilter}
-            onSearchChange={setSearchText}
-            onStatusFilterChange={setStatusFilter}
+            onSearchChange={onSearchChange}
+            onStatusFilterChange={onStatusFilterChange}
             onRefresh={onRefresh}
           />
         </SidebarCard>
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
index 49c63fcb4..d8d09f057 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
@@ -22,6 +22,7 @@ const baseProps = {
   listChanged: false,
   onSelectTool: vi.fn(),
   onFormChange: vi.fn(),
+  onSearchChange: vi.fn(),
   onRefreshList: vi.fn(),
   onCallTool: vi.fn(),
 };
@@ -38,12 +39,20 @@ function ControlledToolsScreen(props: Partial<ToolsScreenProps>) {
   const [formValues, setFormValues] = useState<Record<string, unknown>>(
     props.formValues ?? {},
   );
+  const [searchText, setSearchText] = useState<string | undefined>(
+    props.searchText,
+  );
   return (
     <ToolsScreen
       {...baseProps}
       {...props}
       selectedToolName={selectedToolName}
       formValues={formValues}
+      searchText={searchText}
+      onSearchChange={(value) => {
+        setSearchText(value);
+        props.onSearchChange?.(value);
+      }}
       onSelectTool={(name) => {
         setSelectedToolName(name);
         props.onSelectTool?.(name);
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
index 168e2e99c..e3c07dc4c 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
@@ -23,9 +23,11 @@ export interface ToolsScreenProps {
   // switch, so local state would be lost (#1414).
   selectedToolName?: string;
   formValues?: Record<string, unknown>;
+  searchText?: string;
   listChanged: boolean;
   onSelectTool: (name: string) => void;
   onFormChange: (values: Record<string, unknown>) => void;
+  onSearchChange: (value: string) => void;
   onRefreshList: () => void;
   onCallTool: (name: string, args: Record<string, unknown>) => void;
   onCancelCall?: () => void;
@@ -88,9 +90,11 @@ export function ToolsScreen({
   callState,
   selectedToolName,
   formValues,
+  searchText = "",
   listChanged,
   onSelectTool,
   onFormChange,
+  onSearchChange,
   onRefreshList,
   onCallTool,
   onCancelCall,
@@ -111,8 +115,10 @@ export function ToolsScreen({
           <ToolControls
             tools={tools}
             selectedName={selectedToolName}
+            searchText={searchText}
             listChanged={listChanged}
             onRefreshList={onRefreshList}
+            onSearchChange={onSearchChange}
             onSelectTool={(name) => {
               // Seed the form with the tool's schema defaults so default-only
               // fields the user never edits are still sent on execute (the
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
index b2c296f95..756f4cba8 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
@@ -338,26 +338,47 @@ const meta: Meta<typeof InspectorView> = {
     onServerRemove: fn(),
     onSelectTool: fn(),
     onToolFormChange: fn(),
+    onToolSearchChange: fn(),
     onCallTool: fn(),
     onRefreshTools: fn(),
+    onSelectedPromptNameChange: fn(),
+    onPromptArgumentValuesChange: fn(),
+    onPromptSubmittedForChange: fn(),
+    onPromptSearchChange: fn(),
     onGetPrompt: fn(),
     onRefreshPrompts: fn(),
+    onSelectedResourceUriChange: fn(),
+    onSelectedTemplateUriChange: fn(),
+    onOriginatingTemplateUriChange: fn(),
+    onResourceSearchChange: fn(),
+    onResourceOpenSectionsChange: fn(),
     onReadResource: fn(),
     onSubscribeResource: fn(),
     onUnsubscribeResource: fn(),
     onRefreshResources: fn(),
+    onTaskSearchChange: fn(),
+    onTaskStatusFilterChange: fn(),
     onCancelTask: fn(),
     onClearCompletedTasks: fn(),
     onRefreshTasks: fn(),
     onSetLogLevel: fn(),
+    onLogFilterChange: fn(),
+    onLogVisibleLevelsChange: fn(),
     onClearLogs: fn(),
     onExportLogs: fn(),
+    onHistorySearchChange: fn(),
+    onHistoryMethodFilterChange: fn(),
     onClearHistory: fn(),
     onExportHistory: fn(),
     onReplayHistory: fn(),
     onTogglePinHistory: fn(),
+    onNetworkFilterChange: fn(),
+    onNetworkVisibleCategoriesChange: fn(),
     onClearNetwork: fn(),
     onExportNetwork: fn(),
+    onSelectedAppNameChange: fn(),
+    onAppFormValuesChange: fn(),
+    onAppSearchChange: fn(),
     onSelectApp: fn(),
     onOpenApp: fn(),
     onCloseApp: fn(),
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index 500a6bb57..5edad2067 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type {
@@ -67,26 +68,47 @@ function makeProps(
     onServerRemove: vi.fn(),
     onSelectTool: vi.fn(),
     onToolFormChange: vi.fn(),
+    onToolSearchChange: vi.fn(),
     onCallTool: vi.fn(),
     onRefreshTools: vi.fn(),
+    onSelectedPromptNameChange: vi.fn(),
+    onPromptArgumentValuesChange: vi.fn(),
+    onPromptSubmittedForChange: vi.fn(),
+    onPromptSearchChange: vi.fn(),
     onGetPrompt: vi.fn(),
     onRefreshPrompts: vi.fn(),
+    onSelectedResourceUriChange: vi.fn(),
+    onSelectedTemplateUriChange: vi.fn(),
+    onOriginatingTemplateUriChange: vi.fn(),
+    onResourceSearchChange: vi.fn(),
+    onResourceOpenSectionsChange: vi.fn(),
     onReadResource: vi.fn(),
     onSubscribeResource: vi.fn(),
     onUnsubscribeResource: vi.fn(),
     onRefreshResources: vi.fn(),
+    onTaskSearchChange: vi.fn(),
+    onTaskStatusFilterChange: vi.fn(),
     onCancelTask: vi.fn(),
     onClearCompletedTasks: vi.fn(),
     onRefreshTasks: vi.fn(),
     onSetLogLevel: vi.fn(),
+    onLogFilterChange: vi.fn(),
+    onLogVisibleLevelsChange: vi.fn(),
     onClearLogs: vi.fn(),
     onExportLogs: vi.fn(),
+    onHistorySearchChange: vi.fn(),
+    onHistoryMethodFilterChange: vi.fn(),
     onClearHistory: vi.fn(),
     onExportHistory: vi.fn(),
     onReplayHistory: vi.fn(),
     onTogglePinHistory: vi.fn(),
+    onNetworkFilterChange: vi.fn(),
+    onNetworkVisibleCategoriesChange: vi.fn(),
     onClearNetwork: vi.fn(),
     onExportNetwork: vi.fn(),
+    onSelectedAppNameChange: vi.fn(),
+    onAppFormValuesChange: vi.fn(),
+    onAppSearchChange: vi.fn(),
     onSelectApp: vi.fn(),
     onOpenApp: vi.fn(),
     onCloseApp: vi.fn(),
@@ -96,6 +118,27 @@ function makeProps(
   };
 }
 
+// Most tests render the view fully prop-driven (every callback is a spy). A few
+// interactions — selecting an App and watching it auto-launch — depend on the
+// parent-owned selection state actually updating, since the view is controlled
+// (#1417). This host holds the App-tab selection/form state and threads it back
+// in as controlled props, mirroring how App.tsx owns it in the real wiring.
+function StatefulInspectorView({ props }: { props: InspectorViewProps }) {
+  const [selectedAppName, setSelectedAppName] = useState(props.selectedAppName);
+  const [appFormValues, setAppFormValues] = useState<Record<string, unknown>>(
+    props.appFormValues ?? {},
+  );
+  return (
+    <InspectorView
+      {...props}
+      selectedAppName={selectedAppName}
+      appFormValues={appFormValues}
+      onSelectedAppNameChange={setSelectedAppName}
+      onAppFormValuesChange={setAppFormValues}
+    />
+  );
+}
+
 const sampleServer: ServerEntry = {
   id: "alpha",
   name: "Alpha",
@@ -272,8 +315,8 @@ describe("InspectorView", () => {
       _meta: { ui: { resourceUri: "not-a-ui-uri" } },
     };
     renderWithMantine(
-      <InspectorView
-        {...makeProps({
+      <StatefulInspectorView
+        props={makeProps({
           servers: [sampleServer],
           activeServer: "alpha",
           connectionStatus: "connected",
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 93a207dce..3ec3d02f9 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -8,13 +8,16 @@ import type {
   Resource,
   ResourceTemplate,
   Task,
+  TaskStatus,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import type {
   ConnectionStatus,
+  FetchRequestCategory,
   FetchRequestEntry,
   InspectorResourceSubscription,
   MessageEntry,
+  MessageMethod,
   ServerEntry,
 } from "@inspector/core/mcp/types.js";
 import { isAppTool } from "@inspector/core/mcp/apps.js";
@@ -192,13 +195,44 @@ export interface InspectorViewProps {
   // Per-screen "operation in flight" states (panel-level; optional because
   // the underlying screens accept them as optional).
   toolCallState?: ToolCallState;
-  // Selected tool + its form values. Owned by the parent so they persist across
-  // tab navigation (the screen unmounts on tab switch) — see #1414.
-  selectedToolName?: string;
-  toolFormValues?: Record<string, unknown>;
   getPromptState?: GetPromptState;
   readResourceState?: ReadResourceState;
 
+  // Per-screen selection / search / filter state. Owned by the parent (App) so
+  // it persists across tab navigation within a live session — the screens
+  // unmount on tab switch, so screen-local state would be lost (#1417).
+  // Tools:
+  selectedToolName?: string;
+  toolFormValues?: Record<string, unknown>;
+  toolSearch?: string;
+  // Prompts:
+  selectedPromptName?: string;
+  promptArgumentValues?: Record<string, string>;
+  promptSubmittedFor?: string;
+  promptSearch?: string;
+  // Resources:
+  selectedResourceUri?: string;
+  selectedTemplateUri?: string;
+  originatingTemplateUri?: string;
+  resourceSearch?: string;
+  resourceOpenSections?: string[];
+  // Apps:
+  selectedAppName?: string;
+  appFormValues?: Record<string, unknown>;
+  appSearch?: string;
+  // Tasks:
+  taskSearch?: string;
+  taskStatusFilter?: TaskStatus;
+  // Logs:
+  logFilterText?: string;
+  logVisibleLevels?: Record<LoggingLevel, boolean>;
+  // History:
+  historySearch?: string;
+  historyMethodFilter?: MessageMethod;
+  // Network:
+  networkFilterText?: string;
+  networkVisibleCategories?: Record<FetchRequestCategory, boolean>;
+
   // Logging level. The MCP `logging/setLevel` request has no echo
   // notification, so the parent keeps the optimistic current value.
   currentLogLevel: LoggingLevel;
@@ -236,17 +270,28 @@ export interface InspectorViewProps {
   onServerRemove: (id: string) => void;
 
   // Per-primitive actions (route to `inspectorClient` methods / hook refresh).
+  // The `on*Change` callbacks below persist the lifted per-screen state (#1417).
   onSelectTool: (name: string) => void;
   onToolFormChange: (values: Record<string, unknown>) => void;
+  onToolSearchChange: (value: string) => void;
   onCallTool: (name: string, args: Record<string, unknown>) => void;
   onCancelToolCall?: () => void;
   onClearToolResult?: () => void;
   onRefreshTools: () => void;
 
+  onSelectedPromptNameChange: (value: string | undefined) => void;
+  onPromptArgumentValuesChange: (value: Record<string, string>) => void;
+  onPromptSubmittedForChange: (value: string | undefined) => void;
+  onPromptSearchChange: (value: string) => void;
   onGetPrompt: (name: string, args: Record<string, string>) => void;
   onCopyPromptMessages?: () => void;
   onRefreshPrompts: () => void;
 
+  onSelectedResourceUriChange: (value: string | undefined) => void;
+  onSelectedTemplateUriChange: (value: string | undefined) => void;
+  onOriginatingTemplateUriChange: (value: string | undefined) => void;
+  onResourceSearchChange: (value: string) => void;
+  onResourceOpenSectionsChange: (value: string[]) => void;
   onReadResource: (uri: string) => void;
   onSubscribeResource: (uri: string) => void;
   onUnsubscribeResource: (uri: string) => void;
@@ -261,22 +306,35 @@ export interface InspectorViewProps {
   ) => Promise<string[]>;
   completionsSupported?: boolean;
 
+  onTaskSearchChange: (value: string) => void;
+  onTaskStatusFilterChange: (value: TaskStatus | undefined) => void;
   onCancelTask: (taskId: string) => void;
   onClearCompletedTasks: () => void;
   onRefreshTasks: () => void;
 
   onSetLogLevel: (level: LoggingLevel) => void;
+  onLogFilterChange: (value: string) => void;
+  onLogVisibleLevelsChange: (value: Record<LoggingLevel, boolean>) => void;
   onClearLogs: () => void;
   onExportLogs: () => void;
 
+  onHistorySearchChange: (value: string) => void;
+  onHistoryMethodFilterChange: (value: MessageMethod | undefined) => void;
   onClearHistory: () => void;
   onExportHistory: () => void;
   onReplayHistory: (id: string) => void;
   onTogglePinHistory: (id: string) => void;
 
+  onNetworkFilterChange: (value: string) => void;
+  onNetworkVisibleCategoriesChange: (
+    value: Record<FetchRequestCategory, boolean>,
+  ) => void;
   onClearNetwork: () => void;
   onExportNetwork: () => void;
 
+  onSelectedAppNameChange: (value: string | undefined) => void;
+  onAppFormValuesChange: (values: Record<string, unknown>) => void;
+  onAppSearchChange: (value: string) => void;
   onSelectApp: (name: string) => void;
   onOpenApp: (name: string, args: Record<string, unknown>) => void;
   onCloseApp: () => void;
@@ -301,10 +359,31 @@ export function InspectorView({
   history,
   network,
   toolCallState,
-  selectedToolName,
-  toolFormValues,
   getPromptState,
   readResourceState,
+  selectedToolName,
+  toolFormValues,
+  toolSearch,
+  selectedPromptName,
+  promptArgumentValues,
+  promptSubmittedFor,
+  promptSearch,
+  selectedResourceUri,
+  selectedTemplateUri,
+  originatingTemplateUri,
+  resourceSearch,
+  resourceOpenSections,
+  selectedAppName,
+  appFormValues,
+  appSearch,
+  taskSearch,
+  taskStatusFilter,
+  logFilterText,
+  logVisibleLevels,
+  historySearch,
+  historyMethodFilter,
+  networkFilterText,
+  networkVisibleCategories,
   currentLogLevel,
   sandboxPath,
   bridgeFactory,
@@ -324,31 +403,52 @@ export function InspectorView({
   onServerRemove,
   onSelectTool,
   onToolFormChange,
+  onToolSearchChange,
   onCallTool,
   onCancelToolCall,
   onClearToolResult,
   onRefreshTools,
+  onSelectedPromptNameChange,
+  onPromptArgumentValuesChange,
+  onPromptSubmittedForChange,
+  onPromptSearchChange,
   onGetPrompt,
   onCopyPromptMessages,
   onRefreshPrompts,
+  onSelectedResourceUriChange,
+  onSelectedTemplateUriChange,
+  onOriginatingTemplateUriChange,
+  onResourceSearchChange,
+  onResourceOpenSectionsChange,
   onReadResource,
   onSubscribeResource,
   onUnsubscribeResource,
   onRefreshResources,
   onCompleteArgument,
   completionsSupported,
+  onTaskSearchChange,
+  onTaskStatusFilterChange,
   onCancelTask,
   onClearCompletedTasks,
   onRefreshTasks,
   onSetLogLevel,
+  onLogFilterChange,
+  onLogVisibleLevelsChange,
   onClearLogs,
   onExportLogs,
+  onHistorySearchChange,
+  onHistoryMethodFilterChange,
   onClearHistory,
   onExportHistory,
   onReplayHistory,
   onTogglePinHistory,
+  onNetworkFilterChange,
+  onNetworkVisibleCategoriesChange,
   onClearNetwork,
   onExportNetwork,
+  onSelectedAppNameChange,
+  onAppFormValuesChange,
+  onAppSearchChange,
   onSelectApp,
   onOpenApp,
   onCloseApp,
@@ -478,9 +578,11 @@ export function InspectorView({
               callState={toolCallState}
               selectedToolName={selectedToolName}
               formValues={toolFormValues}
+              searchText={toolSearch}
               listChanged={false}
               onSelectTool={onSelectTool}
               onFormChange={onToolFormChange}
+              onSearchChange={onToolSearchChange}
               onRefreshList={onRefreshTools}
               onCallTool={onCallTool}
               onCancelCall={onCancelToolCall}
@@ -494,6 +596,12 @@ export function InspectorView({
               sandboxPath={sandboxPath}
               bridgeFactory={bridgeFactory}
               rendererRef={appRendererRef}
+              selectedAppName={selectedAppName}
+              formValues={appFormValues}
+              searchText={appSearch}
+              onSelectedAppNameChange={onSelectedAppNameChange}
+              onFormValuesChange={onAppFormValuesChange}
+              onSearchChange={onAppSearchChange}
               onRefreshList={onRefreshApps}
               onSelectApp={onSelectApp}
               onOpenApp={onOpenApp}
@@ -505,8 +613,16 @@ export function InspectorView({
             <PromptsScreen
               prompts={prompts}
               getPromptState={getPromptState}
+              selectedPromptName={selectedPromptName}
+              argumentValues={promptArgumentValues}
+              submittedFor={promptSubmittedFor}
+              searchText={promptSearch}
               listChanged={false}
               completionsSupported={completionsSupported}
+              onSelectedPromptNameChange={onSelectedPromptNameChange}
+              onArgumentValuesChange={onPromptArgumentValuesChange}
+              onSubmittedForChange={onPromptSubmittedForChange}
+              onSearchChange={onPromptSearchChange}
               onRefreshList={onRefreshPrompts}
               onGetPrompt={onGetPrompt}
               onCopyMessages={onCopyPromptMessages}
@@ -519,8 +635,18 @@ export function InspectorView({
               templates={resourceTemplates}
               subscriptions={subscriptions}
               readState={readResourceState}
+              selectedResourceUri={selectedResourceUri}
+              selectedTemplateUri={selectedTemplateUri}
+              originatingTemplateUri={originatingTemplateUri}
+              searchText={resourceSearch}
+              openSections={resourceOpenSections}
               listChanged={false}
               completionsSupported={completionsSupported}
+              onSelectedResourceUriChange={onSelectedResourceUriChange}
+              onSelectedTemplateUriChange={onSelectedTemplateUriChange}
+              onOriginatingTemplateUriChange={onOriginatingTemplateUriChange}
+              onSearchChange={onResourceSearchChange}
+              onOpenSectionsChange={onResourceOpenSectionsChange}
               onRefreshList={onRefreshResources}
               onReadResource={onReadResource}
               onSubscribeResource={onSubscribeResource}
@@ -534,6 +660,10 @@ export function InspectorView({
             <TasksScreen
               tasks={tasks}
               progressByTaskId={progressByTaskId}
+              searchText={taskSearch}
+              statusFilter={taskStatusFilter}
+              onSearchChange={onTaskSearchChange}
+              onStatusFilterChange={onTaskStatusFilterChange}
               onRefresh={onRefreshTasks}
               onClearCompleted={onClearCompletedTasks}
               onCancel={onCancelTask}
@@ -543,6 +673,10 @@ export function InspectorView({
             <LoggingScreen
               entries={logs}
               currentLevel={currentLogLevel}
+              filterText={logFilterText}
+              visibleLevels={logVisibleLevels}
+              onFilterChange={onLogFilterChange}
+              onVisibleLevelsChange={onLogVisibleLevelsChange}
               onSetLevel={onSetLogLevel}
               onClear={onClearLogs}
               onExport={onExportLogs}
@@ -554,6 +688,10 @@ export function InspectorView({
             <HistoryScreen
               entries={history}
               pinnedIds={pinnedHistoryIds ?? new Set()}
+              searchText={historySearch}
+              methodFilter={historyMethodFilter}
+              onSearchChange={onHistorySearchChange}
+              onMethodFilterChange={onHistoryMethodFilterChange}
               onClearAll={onClearHistory}
               onExport={onExportHistory}
               onReplay={onReplayHistory}
@@ -567,6 +705,10 @@ export function InspectorView({
           <ScreenStage active={activeTab === "Network"}>
             <NetworkScreen
               entries={network}
+              filterText={networkFilterText}
+              visibleCategories={networkVisibleCategories}
+              onFilterChange={onNetworkFilterChange}
+              onVisibleCategoriesChange={onNetworkVisibleCategoriesChange}
               onClear={onClearNetwork}
               onExport={onExportNetwork}
               sortDirection={networkSort}

From 9ebedc372ba4ed2eee7d29571e65f62e35661ce3 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 2 Jun 2026 22:47:11 -0400
Subject: [PATCH 3/6] feat(web): persist list scroll position across navigation
 + reset tests (#1417)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 clients/web/src/App.test.tsx                  | 44 +++++++++++++--
 clients/web/src/App.tsx                       |  4 ++
 .../groups/AppControls/AppControls.tsx        |  4 +-
 .../HistoryListPanel/HistoryListPanel.tsx     |  7 ++-
 .../groups/LogStreamPanel/LogStreamPanel.tsx  |  7 ++-
 .../NetworkStreamPanel/NetworkStreamPanel.tsx |  7 ++-
 .../groups/PromptControls/PromptControls.tsx  |  4 +-
 .../groups/TaskListPanel/TaskListPanel.tsx    |  7 ++-
 .../groups/ToolControls/ToolControls.tsx      |  4 +-
 .../web/src/hooks/useScrollMemory.test.tsx    | 56 +++++++++++++++++++
 clients/web/src/hooks/useScrollMemory.ts      | 43 ++++++++++++++
 11 files changed, 174 insertions(+), 13 deletions(-)
 create mode 100644 clients/web/src/hooks/useScrollMemory.test.tsx
 create mode 100644 clients/web/src/hooks/useScrollMemory.ts

diff --git a/clients/web/src/App.test.tsx b/clients/web/src/App.test.tsx
index 4cff411e7..ab4492c58 100644
--- a/clients/web/src/App.test.tsx
+++ b/clients/web/src/App.test.tsx
@@ -193,11 +193,17 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
   InspectorView: (props: {
     toolCallState?: { status?: string };
     selectedToolName?: string;
+    toolSearch?: string;
+    selectedPromptName?: string;
+    logFilterText?: string;
     getPromptState?: { status?: string };
     readResourceState?: { status?: string };
     currentLogLevel?: string;
     onToggleConnection: (id: string) => void;
     onSelectTool: (name: string) => void;
+    onToolSearchChange: (value: string) => void;
+    onSelectedPromptNameChange: (value: string | undefined) => void;
+    onLogFilterChange: (value: string) => void;
     onCallTool: (name: string, args: Record<string, unknown>) => void;
     onGetPrompt: (name: string, args: Record<string, string>) => void;
     onReadResource: (uri: string) => void;
@@ -210,6 +216,11 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
       <span data-testid="selected-tool">
         {props.selectedToolName ?? "none"}
       </span>
+      <span data-testid="tool-search">{props.toolSearch || "none"}</span>
+      <span data-testid="selected-prompt">
+        {props.selectedPromptName ?? "none"}
+      </span>
+      <span data-testid="log-filter">{props.logFilterText || "none"}</span>
       <span data-testid="prompt-status">
         {props.getPromptState?.status ?? "none"}
       </span>
@@ -221,6 +232,15 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
       <button onClick={() => props.onSelectTool("get_acts")}>
         select-tool
       </button>
+      <button onClick={() => props.onToolSearchChange("act")}>
+        set-tool-search
+      </button>
+      <button onClick={() => props.onSelectedPromptNameChange("greet")}>
+        select-prompt
+      </button>
+      <button onClick={() => props.onLogFilterChange("err")}>
+        set-log-filter
+      </button>
       <button onClick={() => props.onCallTool("get_acts", {})}>call</button>
       <button onClick={() => props.onGetPrompt("greet", {})}>get-prompt</button>
       <button onClick={() => props.onReadResource("res://x")}>
@@ -261,12 +281,20 @@ describe("App session-scoped state reset on disconnect", () => {
       expect(screen.getByTestId("resource-status")).toHaveTextContent("ok");
     });
 
-    // Select a tool: the selection is App-owned (persists across navigation),
-    // so it must also reset on disconnect.
+    // Set App-owned per-screen UI state (selection + search + filter) — all of
+    // it persists across navigation, so all of it must reset on disconnect
+    // (#1417). A representative sample across screens exercises the shared
+    // `resetSessionScopedUiState` wiring.
     await user.click(screen.getByText("select-tool"));
-    await waitFor(() =>
-      expect(screen.getByTestId("selected-tool")).toHaveTextContent("get_acts"),
-    );
+    await user.click(screen.getByText("set-tool-search"));
+    await user.click(screen.getByText("select-prompt"));
+    await user.click(screen.getByText("set-log-filter"));
+    await waitFor(() => {
+      expect(screen.getByTestId("selected-tool")).toHaveTextContent("get_acts");
+      expect(screen.getByTestId("tool-search")).toHaveTextContent("act");
+      expect(screen.getByTestId("selected-prompt")).toHaveTextContent("greet");
+      expect(screen.getByTestId("log-filter")).toHaveTextContent("err");
+    });
 
     // Bump the optimistic log level off its "info" default.
     await user.click(screen.getByText("set-level"));
@@ -274,7 +302,8 @@ describe("App session-scoped state reset on disconnect", () => {
       expect(screen.getByTestId("log-level")).toHaveTextContent("debug"),
     );
 
-    // Disconnect: every panel empties and the level returns to "info".
+    // Disconnect: every panel empties, all per-screen UI state clears, and the
+    // level returns to "info".
     act(() => {
       clientInstances[0].dispatchEvent(new Event("disconnect"));
     });
@@ -285,6 +314,9 @@ describe("App session-scoped state reset on disconnect", () => {
       expect(screen.getByTestId("resource-status")).toHaveTextContent("none");
     });
     expect(screen.getByTestId("selected-tool")).toHaveTextContent("none");
+    expect(screen.getByTestId("tool-search")).toHaveTextContent("none");
+    expect(screen.getByTestId("selected-prompt")).toHaveTextContent("none");
+    expect(screen.getByTestId("log-filter")).toHaveTextContent("none");
     expect(screen.getByTestId("log-level")).toHaveTextContent("info");
   });
 
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index ef93003ee..14f94db95 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -73,6 +73,7 @@ import type { GetPromptState } from "./components/screens/PromptsScreen/PromptsS
 import type { ReadResourceState } from "./components/screens/ResourcesScreen/ResourcesScreen";
 import { ALL_LEVELS_VISIBLE } from "./components/screens/LoggingScreen/logLevels";
 import { ALL_CATEGORIES_VISIBLE } from "./components/screens/NetworkScreen/fetchCategories";
+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";
@@ -551,6 +552,9 @@ function App() {
     setNetworkFilterText("");
     setNetworkVisibleCategories(ALL_CATEGORIES_VISIBLE);
     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
diff --git a/clients/web/src/components/groups/AppControls/AppControls.tsx b/clients/web/src/components/groups/AppControls/AppControls.tsx
index 818801874..44d3c6543 100644
--- a/clients/web/src/components/groups/AppControls/AppControls.tsx
+++ b/clients/web/src/components/groups/AppControls/AppControls.tsx
@@ -10,6 +10,7 @@ import {
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
 import { AppListItem } from "../AppListItem/AppListItem";
+import { useScrollMemory } from "../../../hooks/useScrollMemory";
 
 export interface AppControlsProps {
   tools: Tool[];
@@ -46,6 +47,7 @@ export function AppControls({
   onSearchChange,
   onSelectApp,
 }: AppControlsProps) {
+  const viewportRef = useScrollMemory("apps-sidebar");
   const query = searchText.toLowerCase();
   const filteredTools = searchText
     ? tools.filter(
@@ -67,7 +69,7 @@ export function AppControls({
         value={searchText}
         onChange={(e) => onSearchChange(e.currentTarget.value)}
       />
-      <ScrollArea.Autosize mah={LIST_MAX_HEIGHT}>
+      <ScrollArea.Autosize viewportRef={viewportRef} mah={LIST_MAX_HEIGHT}>
         <Stack gap="xs">
           {filteredTools.length === 0 ? (
             <EmptyState>
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index 88385a62b..b17567f58 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@@ -16,6 +16,7 @@ import {
   type SortDirection,
 } from "../../elements/SortToggle/SortToggle";
 import { extractMethod } from "../historyUtils.js";
+import { useScrollMemory } from "../../../hooks/useScrollMemory";
 
 export interface HistoryListPanelProps {
   entries: MessageEntry[];
@@ -84,6 +85,7 @@ export function HistoryListPanel({
   compact,
   onToggleCompact,
 }: HistoryListPanelProps) {
+  const viewportRef = useScrollMemory("history-list");
   const filteredEntries = useMemo(() => {
     // `.filter()` returns a fresh array, so sorting in-place is safe.
     const sorted = entries
@@ -134,7 +136,10 @@ export function HistoryListPanel({
       {!hasResults ? (
         <EmptyState>No request history</EmptyState>
       ) : (
-        <ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)">
+        <ScrollArea.Autosize
+          viewportRef={viewportRef}
+          mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+        >
           <Stack gap="md">
             {pinnedEntries.length > 0 && (
               <>
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
index 7295d1bb0..28672fc2e 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
@@ -15,6 +15,7 @@ import {
   SortToggle,
   type SortDirection,
 } from "../../elements/SortToggle/SortToggle";
+import { useScrollMemory } from "../../../hooks/useScrollMemory";
 
 export interface LogStreamPanelProps {
   entries: LogEntryData[];
@@ -69,6 +70,7 @@ export function LogStreamPanel({
   sortDirection,
   onSortChange,
 }: LogStreamPanelProps) {
+  const viewportRef = useScrollMemory("logs-stream");
   const filteredEntries = useMemo(() => {
     // `.filter()` returns a fresh array, so sorting in-place is safe.
     const sorted = entries
@@ -105,7 +107,10 @@ export function LogStreamPanel({
         </Group>
       </Group>
       {filteredEntries.length > 0 ? (
-        <ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)">
+        <ScrollArea.Autosize
+          viewportRef={viewportRef}
+          mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+        >
           <Stack gap="xs">
             {filteredEntries.map((entry, index) => (
               <LogEntry key={index} entry={entry} />
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
index 9c0521b0b..2b29e1ea5 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
@@ -18,6 +18,7 @@ import {
   SortToggle,
   type SortDirection,
 } from "../../elements/SortToggle/SortToggle";
+import { useScrollMemory } from "../../../hooks/useScrollMemory";
 
 export interface NetworkStreamPanelProps {
   entries: FetchRequestEntry[];
@@ -95,6 +96,7 @@ export function NetworkStreamPanel({
   compact,
   onToggleCompact,
 }: NetworkStreamPanelProps) {
+  const viewportRef = useScrollMemory("network-stream");
   const filteredEntries = useMemo(() => {
     // `.filter()` returns a fresh array, so sorting in-place is safe.
     const sorted = entries
@@ -132,7 +134,10 @@ export function NetworkStreamPanel({
       {!hasResults ? (
         <EmptyState>No network requests</EmptyState>
       ) : (
-        <ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)">
+        <ScrollArea.Autosize
+          viewportRef={viewportRef}
+          mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+        >
           <Stack gap="md">
             {filteredEntries.map((entry) => (
               <NetworkEntry
diff --git a/clients/web/src/components/groups/PromptControls/PromptControls.tsx b/clients/web/src/components/groups/PromptControls/PromptControls.tsx
index d80c0bbc4..572d6d6ae 100644
--- a/clients/web/src/components/groups/PromptControls/PromptControls.tsx
+++ b/clients/web/src/components/groups/PromptControls/PromptControls.tsx
@@ -2,6 +2,7 @@ import { Group, ScrollArea, Stack, TextInput, Title } from "@mantine/core";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
 import { PromptListItem } from "../PromptListItem/PromptListItem";
+import { useScrollMemory } from "../../../hooks/useScrollMemory";
 
 export interface PromptControlsProps {
   prompts: Prompt[];
@@ -27,6 +28,7 @@ export function PromptControls({
   onSearchChange,
   onSelectPrompt,
 }: PromptControlsProps) {
+  const viewportRef = useScrollMemory("prompts-sidebar");
   const query = searchText.toLowerCase();
   const filteredPrompts = prompts.filter(
     (p) =>
@@ -46,7 +48,7 @@ export function PromptControls({
         value={searchText}
         onChange={(e) => onSearchChange(e.currentTarget.value)}
       />
-      <ScrollArea.Autosize mah={LIST_MAX_HEIGHT}>
+      <ScrollArea.Autosize viewportRef={viewportRef} mah={LIST_MAX_HEIGHT}>
         <Stack gap="xs">
           {filteredPrompts.map((prompt) => (
             <PromptListItem
diff --git a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
index c512f7fa1..18abe84e9 100644
--- a/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
+++ b/clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
@@ -12,6 +12,7 @@ import type { Task, TaskStatus } from "@modelcontextprotocol/sdk/types.js";
 import { TaskCard } from "../TaskCard/TaskCard";
 import type { TaskProgress } from "../TaskCard/TaskCard";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
+import { useScrollMemory } from "../../../hooks/useScrollMemory";
 
 export interface TaskListPanelProps {
   tasks: Task[];
@@ -75,6 +76,7 @@ export function TaskListPanel({
   onCancel,
   onClearCompleted,
 }: TaskListPanelProps) {
+  const viewportRef = useScrollMemory("tasks-list");
   const [compact, setCompact] = useState(false);
 
   const filteredTasks = useMemo(
@@ -109,7 +111,10 @@ export function TaskListPanel({
       {!hasResults ? (
         <EmptyState>No tasks</EmptyState>
       ) : (
-        <ScrollArea.Autosize mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)">
+        <ScrollArea.Autosize
+          viewportRef={viewportRef}
+          mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+        >
           <Stack gap="md">
             {activeTasks.length > 0 && (
               <>
diff --git a/clients/web/src/components/groups/ToolControls/ToolControls.tsx b/clients/web/src/components/groups/ToolControls/ToolControls.tsx
index f5a84d955..08f80529c 100644
--- a/clients/web/src/components/groups/ToolControls/ToolControls.tsx
+++ b/clients/web/src/components/groups/ToolControls/ToolControls.tsx
@@ -2,6 +2,7 @@ import { Group, ScrollArea, Stack, TextInput, Title } from "@mantine/core";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
 import { ToolListItem } from "../ToolListItem/ToolListItem";
+import { useScrollMemory } from "../../../hooks/useScrollMemory";
 
 export interface ToolControlsProps {
   tools: Tool[];
@@ -27,6 +28,7 @@ export function ToolControls({
   onSearchChange,
   onSelectTool,
 }: ToolControlsProps) {
+  const viewportRef = useScrollMemory("tools-sidebar");
   const query = searchText.toLowerCase();
   const filteredTools = searchText
     ? tools.filter(
@@ -47,7 +49,7 @@ export function ToolControls({
         value={searchText}
         onChange={(e) => onSearchChange(e.currentTarget.value)}
       />
-      <ScrollArea.Autosize mah={LIST_MAX_HEIGHT}>
+      <ScrollArea.Autosize viewportRef={viewportRef} mah={LIST_MAX_HEIGHT}>
         <Stack gap="xs">
           {filteredTools.map((tool) => (
             <ToolListItem
diff --git a/clients/web/src/hooks/useScrollMemory.test.tsx b/clients/web/src/hooks/useScrollMemory.test.tsx
new file mode 100644
index 000000000..4fb64087a
--- /dev/null
+++ b/clients/web/src/hooks/useScrollMemory.test.tsx
@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { renderWithMantine, act } from "../test/renderWithMantine";
+import { useScrollMemory, clearScrollMemory } from "./useScrollMemory";
+
+// happy-dom doesn't lay out scrollable content, so we drive scrollTop/scrollLeft
+// directly on the viewport node and assert the hook saves on unmount and
+// restores on the next mount. A fixed-height div with the ref is enough.
+function ScrollProbe({ scrollKey }: { scrollKey: string }) {
+  const ref = useScrollMemory(scrollKey);
+  return <div data-testid="viewport" ref={ref} />;
+}
+
+describe("useScrollMemory", () => {
+  beforeEach(() => {
+    clearScrollMemory();
+  });
+
+  it("restores the saved scroll offset on remount under the same key", () => {
+    const { getByTestId, unmount } = renderWithMantine(
+      <ScrollProbe scrollKey="logs" />,
+    );
+    const viewport = getByTestId("viewport") as HTMLDivElement;
+    // Simulate the user scrolling.
+    viewport.scrollTop = 240;
+    viewport.scrollLeft = 15;
+    // Unmount (tab switch) captures the offset; remount restores it.
+    unmount();
+
+    const second = renderWithMantine(<ScrollProbe scrollKey="logs" />);
+    const restored = second.getByTestId("viewport") as HTMLDivElement;
+    expect(restored.scrollTop).toBe(240);
+    expect(restored.scrollLeft).toBe(15);
+  });
+
+  it("does not cross-restore between different keys", () => {
+    const first = renderWithMantine(<ScrollProbe scrollKey="logs" />);
+    (first.getByTestId("viewport") as HTMLDivElement).scrollTop = 100;
+    first.unmount();
+
+    const other = renderWithMantine(<ScrollProbe scrollKey="history" />);
+    expect((other.getByTestId("viewport") as HTMLDivElement).scrollTop).toBe(0);
+  });
+
+  it("forgets saved positions after clearScrollMemory()", () => {
+    const first = renderWithMantine(<ScrollProbe scrollKey="logs" />);
+    (first.getByTestId("viewport") as HTMLDivElement).scrollTop = 180;
+    first.unmount();
+
+    act(() => clearScrollMemory());
+
+    const second = renderWithMantine(<ScrollProbe scrollKey="logs" />);
+    expect((second.getByTestId("viewport") as HTMLDivElement).scrollTop).toBe(
+      0,
+    );
+  });
+});
diff --git a/clients/web/src/hooks/useScrollMemory.ts b/clients/web/src/hooks/useScrollMemory.ts
new file mode 100644
index 000000000..fea5f3480
--- /dev/null
+++ b/clients/web/src/hooks/useScrollMemory.ts
@@ -0,0 +1,43 @@
+import { useLayoutEffect, useRef } from "react";
+
+// Scroll positions survive a screen unmount by living in this module-scope map
+// rather than React state: the screens unmount on tab switch (#1417), so a
+// component-local ref would be lost, and threading every scroll position up to
+// App would balloon the prop surface for what is purely ephemeral DOM state.
+// Keyed by a caller-supplied stable region id (e.g. "logs-stream").
+const scrollPositions = new Map<string, { x: number; y: number }>();
+
+/**
+ * Forget all remembered scroll positions. App calls this on disconnect so a new
+ * session's screens start at the top, matching the clear-on-disconnect rule the
+ * lifted selection/filter state follows (#1417).
+ */
+export function clearScrollMemory(): void {
+  scrollPositions.clear();
+}
+
+/**
+ * Remember and restore a scroll container's position across unmount/remount.
+ * Returns a ref to attach to a Mantine `ScrollArea`/`ScrollArea.Autosize` via
+ * its `viewportRef` prop. On mount the saved offset (if any) is restored before
+ * paint; on unmount the current offset is captured. The captured viewport node
+ * is closed over so the offset is still readable during the cleanup phase.
+ */
+export function useScrollMemory(key: string) {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const saved = scrollPositions.get(key);
+    if (saved) {
+      viewport.scrollTo({ left: saved.x, top: saved.y });
+    }
+    return () => {
+      scrollPositions.set(key, {
+        x: viewport.scrollLeft,
+        y: viewport.scrollTop,
+      });
+    };
+  }, [key]);
+  return viewportRef;
+}

From 5ab73851a767d699d57fc366a1cf4e5d0f4c38c5 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 3 Jun 2026 08:45:42 -0400
Subject: [PATCH 4/6] refactor(web): collapse per-screen lifted state into one
 {screen}Ui object
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 clients/web/src/App.test.tsx                  |  85 +++++--
 clients/web/src/App.tsx                       | 195 ++++-----------
 .../screens/AppsScreen/AppsScreen.stories.tsx |  34 ++-
 .../screens/AppsScreen/AppsScreen.test.tsx    |  57 ++---
 .../screens/AppsScreen/AppsScreen.tsx         |  53 ++--
 .../HistoryScreen/HistoryScreen.stories.tsx   |  32 +--
 .../HistoryScreen/HistoryScreen.test.tsx      |  35 ++-
 .../screens/HistoryScreen/HistoryScreen.tsx   |  37 +--
 .../LoggingScreen/LoggingScreen.stories.tsx   |   5 +-
 .../LoggingScreen/LoggingScreen.test.tsx      |  40 ++-
 .../screens/LoggingScreen/LoggingScreen.tsx   |  35 ++-
 .../NetworkScreen/NetworkScreen.stories.tsx   |  30 +--
 .../NetworkScreen/NetworkScreen.test.tsx      |  47 ++--
 .../screens/NetworkScreen/NetworkScreen.tsx   |  41 +--
 .../PromptsScreen/PromptsScreen.stories.tsx   |  38 +--
 .../PromptsScreen/PromptsScreen.test.tsx      |  63 ++---
 .../screens/PromptsScreen/PromptsScreen.tsx   |  70 +++---
 .../ResourcesScreen.stories.tsx               |  45 +---
 .../ResourcesScreen/ResourcesScreen.test.tsx  |  72 ++----
 .../ResourcesScreen/ResourcesScreen.tsx       |  96 ++++---
 .../TasksScreen/TasksScreen.stories.tsx       |   5 +-
 .../screens/TasksScreen/TasksScreen.test.tsx  |  35 ++-
 .../screens/TasksScreen/TasksScreen.tsx       |  32 +--
 .../ToolsScreen/ToolsScreen.stories.tsx       |  31 +--
 .../screens/ToolsScreen/ToolsScreen.test.tsx  |  79 +++---
 .../screens/ToolsScreen/ToolsScreen.tsx       |  51 ++--
 .../src/components/screens/screenUiState.ts   |  62 +++++
 .../InspectorView/InspectorView.stories.tsx   |  51 ++--
 .../InspectorView/InspectorView.test.tsx      |  63 +++--
 .../views/InspectorView/InspectorView.tsx     | 236 ++++++------------
 30 files changed, 831 insertions(+), 924 deletions(-)
 create mode 100644 clients/web/src/components/screens/screenUiState.ts

diff --git a/clients/web/src/App.test.tsx b/clients/web/src/App.test.tsx
index ab4492c58..d872a9229 100644
--- a/clients/web/src/App.test.tsx
+++ b/clients/web/src/App.test.tsx
@@ -192,18 +192,37 @@ vi.mock("@inspector/core/react/useSettingsDraft.js", () => ({
 vi.mock("./components/views/InspectorView/InspectorView", () => ({
   InspectorView: (props: {
     toolCallState?: { status?: string };
-    selectedToolName?: string;
-    toolSearch?: string;
-    selectedPromptName?: string;
-    logFilterText?: string;
+    toolsUi?: {
+      selectedToolName?: string;
+      formValues: Record<string, unknown>;
+      search: string;
+    };
+    promptsUi?: {
+      selectedPromptName?: string;
+      argumentValues: Record<string, string>;
+      submittedFor?: string;
+      search: string;
+    };
+    logsUi?: { filterText: string; visibleLevels: Record<string, boolean> };
     getPromptState?: { status?: string };
     readResourceState?: { status?: string };
     currentLogLevel?: string;
     onToggleConnection: (id: string) => void;
-    onSelectTool: (name: string) => void;
-    onToolSearchChange: (value: string) => void;
-    onSelectedPromptNameChange: (value: string | undefined) => void;
-    onLogFilterChange: (value: string) => void;
+    onToolsUiChange: (next: {
+      selectedToolName?: string;
+      formValues: Record<string, unknown>;
+      search: string;
+    }) => void;
+    onPromptsUiChange: (next: {
+      selectedPromptName?: string;
+      argumentValues: Record<string, string>;
+      submittedFor?: string;
+      search: string;
+    }) => void;
+    onLogsUiChange: (next: {
+      filterText: string;
+      visibleLevels: Record<string, boolean>;
+    }) => void;
     onCallTool: (name: string, args: Record<string, unknown>) => void;
     onGetPrompt: (name: string, args: Record<string, string>) => void;
     onReadResource: (uri: string) => void;
@@ -214,13 +233,13 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
         {props.toolCallState?.status ?? "none"}
       </span>
       <span data-testid="selected-tool">
-        {props.selectedToolName ?? "none"}
+        {props.toolsUi?.selectedToolName ?? "none"}
       </span>
-      <span data-testid="tool-search">{props.toolSearch || "none"}</span>
+      <span data-testid="tool-search">{props.toolsUi?.search || "none"}</span>
       <span data-testid="selected-prompt">
-        {props.selectedPromptName ?? "none"}
+        {props.promptsUi?.selectedPromptName ?? "none"}
       </span>
-      <span data-testid="log-filter">{props.logFilterText || "none"}</span>
+      <span data-testid="log-filter">{props.logsUi?.filterText || "none"}</span>
       <span data-testid="prompt-status">
         {props.getPromptState?.status ?? "none"}
       </span>
@@ -229,16 +248,50 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
       </span>
       <span data-testid="log-level">{props.currentLogLevel}</span>
       <button onClick={() => props.onToggleConnection("A")}>connect</button>
-      <button onClick={() => props.onSelectTool("get_acts")}>
+      <button
+        onClick={() =>
+          props.onToolsUiChange({
+            formValues: {},
+            search: "",
+            ...props.toolsUi,
+            selectedToolName: "get_acts",
+          })
+        }
+      >
         select-tool
       </button>
-      <button onClick={() => props.onToolSearchChange("act")}>
+      <button
+        onClick={() =>
+          props.onToolsUiChange({
+            formValues: {},
+            ...props.toolsUi,
+            search: "act",
+          })
+        }
+      >
         set-tool-search
       </button>
-      <button onClick={() => props.onSelectedPromptNameChange("greet")}>
+      <button
+        onClick={() =>
+          props.onPromptsUiChange({
+            argumentValues: {},
+            search: "",
+            ...props.promptsUi,
+            selectedPromptName: "greet",
+          })
+        }
+      >
         select-prompt
       </button>
-      <button onClick={() => props.onLogFilterChange("err")}>
+      <button
+        onClick={() =>
+          props.onLogsUiChange({
+            visibleLevels: {},
+            ...props.logsUi,
+            filterText: "err",
+          })
+        }
+      >
         set-log-filter
       </button>
       <button onClick={() => props.onCallTool("get_acts", {})}>call</button>
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 14f94db95..28753d6c0 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -15,7 +15,6 @@ import type {
   LoggingMessageNotification,
   Progress,
   ProgressToken,
-  TaskStatus,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { InspectorClient } from "@inspector/core/mcp/index.js";
@@ -25,11 +24,9 @@ import type {
 } from "@inspector/core/mcp/index.js";
 import type { TypedEventGeneric } from "@inspector/core/mcp/typedEventTarget.js";
 import type {
-  FetchRequestCategory,
   InspectorServerSettings,
   MCPServerConfig,
   MessageEntry,
-  MessageMethod,
   ServerEntry,
   ServerType,
 } from "@inspector/core/mcp/types.js";
@@ -71,8 +68,16 @@ import { InspectorView } from "./components/views/InspectorView/InspectorView";
 import type { ToolCallState } from "./components/screens/ToolsScreen/ToolsScreen";
 import type { GetPromptState } from "./components/screens/PromptsScreen/PromptsScreen";
 import type { ReadResourceState } from "./components/screens/ResourcesScreen/ResourcesScreen";
-import { ALL_LEVELS_VISIBLE } from "./components/screens/LoggingScreen/logLevels";
-import { ALL_CATEGORIES_VISIBLE } from "./components/screens/NetworkScreen/fetchCategories";
+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";
@@ -347,18 +352,6 @@ function App() {
   const [toolCallState, setToolCallState] = useState<ToolCallState | undefined>(
     undefined,
   );
-  // Selected tool + its form values live here (not inside ToolsScreen) so they
-  // survive a tab switch: InspectorView unmounts the outgoing screen, so local
-  // selection would be lost. Persisting them alongside `toolCallState` keeps the
-  // whole tool context — selection, inputs, and result — in place when the user
-  // navigates away (e.g. to watch progress) and back, within a live session
-  // (#1414). All three reset together on disconnect via `resetSessionScopedUiState`.
-  const [selectedToolName, setSelectedToolName] = useState<string | undefined>(
-    undefined,
-  );
-  const [toolFormValues, setToolFormValues] = useState<Record<string, unknown>>(
-    {},
-  );
   const [getPromptState, setGetPromptState] = useState<
     GetPromptState | undefined
   >(undefined);
@@ -366,65 +359,22 @@ function App() {
     ReadResourceState | undefined
   >(undefined);
 
-  // Per-screen selection / search / filter state. 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 (#1417). Grouped by screen.
-  // Tools (selection/form live above with `toolCallState`):
-  const [toolSearch, setToolSearch] = useState("");
-  // Prompts:
-  const [selectedPromptName, setSelectedPromptName] = useState<
-    string | undefined
-  >(undefined);
-  const [promptArgumentValues, setPromptArgumentValues] = useState<
-    Record<string, string>
-  >({});
-  const [promptSubmittedFor, setPromptSubmittedFor] = useState<
-    string | undefined
-  >(undefined);
-  const [promptSearch, setPromptSearch] = useState("");
-  // Resources (`openSections` undefined → screen falls back to compact pref):
-  const [selectedResourceUri, setSelectedResourceUri] = useState<
-    string | undefined
-  >(undefined);
-  const [selectedTemplateUri, setSelectedTemplateUri] = useState<
-    string | undefined
-  >(undefined);
-  const [originatingTemplateUri, setOriginatingTemplateUri] = useState<
-    string | undefined
-  >(undefined);
-  const [resourceSearch, setResourceSearch] = useState("");
-  const [resourceOpenSections, setResourceOpenSections] = useState<
-    string[] | undefined
-  >(undefined);
-  // Apps (selected app + form values; running/maximized stay screen-local):
-  const [selectedAppName, setSelectedAppName] = useState<string | undefined>(
-    undefined,
-  );
-  const [appFormValues, setAppFormValues] = useState<Record<string, unknown>>(
-    {},
-  );
-  const [appSearch, setAppSearch] = useState("");
-  // Tasks:
-  const [taskSearch, setTaskSearch] = useState("");
-  const [taskStatusFilter, setTaskStatusFilter] = useState<
-    TaskStatus | undefined
-  >(undefined);
-  // Logs:
-  const [logFilterText, setLogFilterText] = useState("");
-  const [logVisibleLevels, setLogVisibleLevels] =
-    useState<Record<LoggingLevel, boolean>>(ALL_LEVELS_VISIBLE);
-  // History:
-  const [historySearch, setHistorySearch] = useState("");
-  const [historyMethodFilter, setHistoryMethodFilter] = useState<
-    MessageMethod | undefined
-  >(undefined);
-  // Network:
-  const [networkFilterText, setNetworkFilterText] = useState("");
-  const [networkVisibleCategories, setNetworkVisibleCategories] = useState<
-    Record<FetchRequestCategory, boolean>
-  >(ALL_CATEGORIES_VISIBLE);
+  // 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
@@ -526,31 +476,16 @@ function App() {
   // Setters are stable, so the callback identity never changes.
   const resetSessionScopedUiState = useCallback(() => {
     setToolCallState(undefined);
-    setSelectedToolName(undefined);
-    setToolFormValues({});
-    setToolSearch("");
     setGetPromptState(undefined);
-    setSelectedPromptName(undefined);
-    setPromptArgumentValues({});
-    setPromptSubmittedFor(undefined);
-    setPromptSearch("");
     setReadResourceState(undefined);
-    setSelectedResourceUri(undefined);
-    setSelectedTemplateUri(undefined);
-    setOriginatingTemplateUri(undefined);
-    setResourceSearch("");
-    setResourceOpenSections(undefined);
-    setSelectedAppName(undefined);
-    setAppFormValues({});
-    setAppSearch("");
-    setTaskSearch("");
-    setTaskStatusFilter(undefined);
-    setLogFilterText("");
-    setLogVisibleLevels(ALL_LEVELS_VISIBLE);
-    setHistorySearch("");
-    setHistoryMethodFilter(undefined);
-    setNetworkFilterText("");
-    setNetworkVisibleCategories(ALL_CATEGORIES_VISIBLE);
+    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).
@@ -1611,31 +1546,16 @@ function App() {
         history={messages}
         network={fetchRequests}
         toolCallState={toolCallState}
-        selectedToolName={selectedToolName}
-        toolFormValues={toolFormValues}
-        toolSearch={toolSearch}
         getPromptState={getPromptState}
-        selectedPromptName={selectedPromptName}
-        promptArgumentValues={promptArgumentValues}
-        promptSubmittedFor={promptSubmittedFor}
-        promptSearch={promptSearch}
         readResourceState={effectiveReadResourceState}
-        selectedResourceUri={selectedResourceUri}
-        selectedTemplateUri={selectedTemplateUri}
-        originatingTemplateUri={originatingTemplateUri}
-        resourceSearch={resourceSearch}
-        resourceOpenSections={resourceOpenSections}
-        selectedAppName={selectedAppName}
-        appFormValues={appFormValues}
-        appSearch={appSearch}
-        taskSearch={taskSearch}
-        taskStatusFilter={taskStatusFilter}
-        logFilterText={logFilterText}
-        logVisibleLevels={logVisibleLevels}
-        historySearch={historySearch}
-        historyMethodFilter={historyMethodFilter}
-        networkFilterText={networkFilterText}
-        networkVisibleCategories={networkVisibleCategories}
+        toolsUi={toolsUi}
+        promptsUi={promptsUi}
+        resourcesUi={resourcesUi}
+        appsUi={appsUi}
+        tasksUi={tasksUi}
+        logsUi={logsUi}
+        historyUi={historyUi}
+        networkUi={networkUi}
         currentLogLevel={currentLogLevel}
         sandboxPath={sandboxUrl}
         bridgeFactory={sandboxBridgeFactory}
@@ -1659,27 +1579,18 @@ function App() {
           const target = servers.find((s) => s.id === id);
           if (target) setRemoveTarget(target);
         }}
-        onSelectTool={setSelectedToolName}
-        onToolFormChange={setToolFormValues}
-        onToolSearchChange={setToolSearch}
+        onToolsUiChange={setToolsUi}
         onCallTool={(name, args) => {
           void onCallTool(name, args);
         }}
         onClearToolResult={onClearToolResult}
         onRefreshTools={onRefreshTools}
-        onSelectedPromptNameChange={setSelectedPromptName}
-        onPromptArgumentValuesChange={setPromptArgumentValues}
-        onPromptSubmittedForChange={setPromptSubmittedFor}
-        onPromptSearchChange={setPromptSearch}
+        onPromptsUiChange={setPromptsUi}
         onGetPrompt={(name, args) => {
           void onGetPrompt(name, args);
         }}
         onRefreshPrompts={onRefreshPrompts}
-        onSelectedResourceUriChange={setSelectedResourceUri}
-        onSelectedTemplateUriChange={setSelectedTemplateUri}
-        onOriginatingTemplateUriChange={setOriginatingTemplateUri}
-        onResourceSearchChange={setResourceSearch}
-        onResourceOpenSectionsChange={setResourceOpenSections}
+        onResourcesUiChange={setResourcesUi}
         onReadResource={(uri) => {
           void onReadResource(uri);
         }}
@@ -1688,29 +1599,23 @@ function App() {
         onRefreshResources={onRefreshResources}
         onCompleteArgument={onCompleteArgument}
         completionsSupported={capabilities?.completions !== undefined}
-        onTaskSearchChange={setTaskSearch}
-        onTaskStatusFilterChange={setTaskStatusFilter}
+        onTasksUiChange={setTasksUi}
         onCancelTask={onCancelTask}
         onClearCompletedTasks={todoNoop}
         onRefreshTasks={onRefreshTasks}
         onSetLogLevel={onSetLogLevel}
-        onLogFilterChange={setLogFilterText}
-        onLogVisibleLevelsChange={setLogVisibleLevels}
+        onLogsUiChange={setLogsUi}
         onClearLogs={onClearLogs}
         onExportLogs={onExportLogs}
-        onHistorySearchChange={setHistorySearch}
-        onHistoryMethodFilterChange={setHistoryMethodFilter}
+        onHistoryUiChange={setHistoryUi}
         onClearHistory={onClearHistory}
         onExportHistory={onExportHistory}
         onReplayHistory={todoNoop}
         onTogglePinHistory={todoNoop}
-        onNetworkFilterChange={setNetworkFilterText}
-        onNetworkVisibleCategoriesChange={setNetworkVisibleCategories}
+        onNetworkUiChange={setNetworkUi}
         onClearNetwork={onClearNetwork}
         onExportNetwork={onExportNetwork}
-        onSelectedAppNameChange={setSelectedAppName}
-        onAppFormValuesChange={setAppFormValues}
-        onAppSearchChange={setAppSearch}
+        onAppsUiChange={setAppsUi}
         onSelectApp={onSelectApp}
         onOpenApp={(name, args) => {
           void onOpenApp(name, args);
diff --git a/clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx b/clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx
index 5d963b6fa..a517e8feb 100644
--- a/clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx
+++ b/clients/web/src/components/screens/AppsScreen/AppsScreen.stories.tsx
@@ -4,7 +4,12 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { CallToolResult, Tool } from "@modelcontextprotocol/sdk/types.js";
 import type { AppBridge } from "@modelcontextprotocol/ext-apps/app-bridge";
 import { expect, fn, userEvent, waitFor, within } from "storybook/test";
-import { AppsScreen, type AppsScreenProps } from "./AppsScreen";
+import {
+  AppsScreen,
+  type AppsScreenProps,
+  type AppsUiState,
+} from "./AppsScreen";
+import { EMPTY_APPS_UI } from "../screenUiState";
 import type {
   AppRendererHandle,
   BridgeFactory,
@@ -81,23 +86,13 @@ const dashboardApp: Tool = {
 const sampleApps: Tool[] = [cohortApp, weatherApp, dashboardApp];
 
 // AppsScreen is controlled (app selection, form values, and search text live in
-// the parent — running/maximized stay internal; see #1417). This hook holds the
-// lifted state so the play-driven select/type/open interactions still drive the
-// detail panel, mirroring how App owns the state in the real app.
+// the parent as one `ui` object — running/maximized stay internal; see #1417).
+// This hook holds the lifted state so the play-driven select/type/open
+// interactions still drive the detail panel, mirroring how App owns the state in
+// the real app.
 function useLiftedAppState(args: AppsScreenProps) {
-  const [selectedAppName, setSelectedAppName] = useState(args.selectedAppName);
-  const [formValues, setFormValues] = useState<Record<string, unknown>>(
-    args.formValues ?? {},
-  );
-  const [searchText, setSearchText] = useState(args.searchText ?? "");
-  return {
-    selectedAppName,
-    formValues,
-    searchText,
-    onSelectedAppNameChange: setSelectedAppName,
-    onFormValuesChange: setFormValues,
-    onSearchChange: setSearchText,
-  };
+  const [ui, setUi] = useState<AppsUiState>(args.ui ?? EMPTY_APPS_UI);
+  return { ui, onUiChange: setUi };
 }
 
 const meta: Meta<typeof AppsScreen> = {
@@ -108,13 +103,12 @@ const meta: Meta<typeof AppsScreen> = {
     sandboxPath: PLACEHOLDER_SANDBOX,
     bridgeFactory: okBridgeFactory,
     listChanged: false,
+    ui: EMPTY_APPS_UI,
+    onUiChange: fn(),
     onRefreshList: fn(),
     onSelectApp: fn(),
     onOpenApp: fn(),
     onCloseApp: fn(),
-    onSelectedAppNameChange: fn(),
-    onFormValuesChange: fn(),
-    onSearchChange: fn(),
   },
   // Each story uses its own ref so AppRenderer's imperative handle gets a
   // fresh slot per render (Storybook may keep the canvas mounted across
diff --git a/clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx b/clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx
index a58b0c39b..9ec51b3a4 100644
--- a/clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx
+++ b/clients/web/src/components/screens/AppsScreen/AppsScreen.test.tsx
@@ -8,7 +8,12 @@ import {
   screen,
   within,
 } from "../../../test/renderWithMantine";
-import { AppsScreen, type AppsScreenProps } from "./AppsScreen";
+import {
+  AppsScreen,
+  type AppsScreenProps,
+  type AppsUiState,
+} from "./AppsScreen";
+import { EMPTY_APPS_UI } from "../screenUiState";
 import type {
   AppRendererHandle,
   BridgeFactory,
@@ -64,53 +69,37 @@ function buildProps(overrides: Partial<AppsScreenProps> = {}): AppsScreenProps {
     sandboxPath: "data:text/html,<title>sandbox</title>",
     bridgeFactory: okBridgeFactory,
     rendererRef: createRef<AppRendererHandle>(),
+    ui: EMPTY_APPS_UI,
+    onUiChange: vi.fn(),
     onRefreshList: vi.fn(),
     onSelectApp: vi.fn(),
     onOpenApp: vi.fn(),
     onCloseApp: vi.fn(),
-    onSelectedAppNameChange: vi.fn(),
-    onFormValuesChange: vi.fn(),
-    onSearchChange: vi.fn(),
     ...overrides,
   };
 }
 
 // AppsScreen lifts selection, form values, and the sidebar search to the
-// parent (App) so they persist across tab navigation (#1417), while
-// `running`/`maximized` stay local to the screen. This host holds the lifted
-// state so clicking an app, typing into its form/search, and closing drive the
-// panel exactly as App owns it. The internal running/maximized state handles
-// auto-launch, open, maximize, and back-to-input on its own. Props passed in
-// override defaults; the stateful wiring is applied last so callers can still
-// observe activity via the spied callbacks.
+// parent (App) as one `ui` object so they persist across tab navigation
+// (#1417), while `running`/`maximized` stay local to the screen. This host
+// holds the lifted state so clicking an app, typing into its form/search, and
+// closing drive the panel exactly as App owns it. The internal running/maximized
+// state handles auto-launch, open, maximize, and back-to-input on its own. Props
+// passed in override defaults; the stateful `ui` wiring is applied last so
+// callers can still observe activity via the rendered state.
 function ControlledAppsScreen(overrides: Partial<AppsScreenProps> = {}) {
   const props = buildProps(overrides);
-  const [selectedAppName, setSelectedAppName] = useState<string | undefined>(
-    props.selectedAppName,
-  );
-  const [formValues, setFormValues] = useState<Record<string, unknown>>(
-    props.formValues ?? {},
-  );
-  const [searchText, setSearchText] = useState<string | undefined>(
-    props.searchText,
-  );
+  const [ui, setUi] = useState<AppsUiState>({
+    ...EMPTY_APPS_UI,
+    ...props.ui,
+  });
   return (
     <AppsScreen
       {...props}
-      selectedAppName={selectedAppName}
-      formValues={formValues}
-      searchText={searchText}
-      onSelectedAppNameChange={(value) => {
-        setSelectedAppName(value);
-        props.onSelectedAppNameChange(value);
-      }}
-      onFormValuesChange={(values) => {
-        setFormValues(values);
-        props.onFormValuesChange(values);
-      }}
-      onSearchChange={(value) => {
-        setSearchText(value);
-        props.onSearchChange(value);
+      ui={ui}
+      onUiChange={(next) => {
+        setUi(next);
+        props.onUiChange(next);
       }}
     />
   );
diff --git a/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx b/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
index a776745ee..f60d57b4b 100644
--- a/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
+++ b/clients/web/src/components/screens/AppsScreen/AppsScreen.tsx
@@ -39,18 +39,8 @@ export interface AppsScreenProps {
   sandboxPath?: string;
   bridgeFactory: BridgeFactory;
   rendererRef: Ref<AppRendererHandle>;
-  // Selected app, its form values, and the sidebar search are controlled by the
-  // parent (App) so they persist across tab navigation within a live session
-  // (#1417). `running`/`maximized` stay local: they're tied to the live iframe
-  // and bridge, which are torn down on unmount, so persisting them would
-  // restore a flag without its runtime. On return the selected app's input
-  // form (with its values) is shown, ready to re-open.
-  selectedAppName?: string;
-  formValues?: Record<string, unknown>;
-  searchText?: string;
-  onSelectedAppNameChange: (value: string | undefined) => void;
-  onFormValuesChange: (values: Record<string, unknown>) => void;
-  onSearchChange: (value: string) => void;
+  ui: AppsUiState;
+  onUiChange: (next: AppsUiState) => void;
   onRefreshList: () => void;
   onSelectApp: (name: string) => void;
   onOpenApp: (name: string, args: Record<string, unknown>) => void;
@@ -59,6 +49,18 @@ export interface AppsScreenProps {
   onError?: (err: Error) => void;
 }
 
+// Selected app, its form values, and the sidebar search — controlled by the
+// parent (App) as one object so they persist across tab navigation within a
+// live session (#1417). `running`/`maximized` stay local to the screen: they're
+// tied to the live iframe and bridge, which are torn down on unmount, so
+// persisting them would restore a flag without its runtime. On return the
+// selected app's input form (with its values) is shown, ready to re-open.
+export interface AppsUiState {
+  selectedAppName?: string;
+  formValues: Record<string, unknown>;
+  search: string;
+}
+
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -143,18 +145,15 @@ export function AppsScreen({
   sandboxPath,
   bridgeFactory,
   rendererRef,
-  selectedAppName,
-  formValues = {},
-  searchText = "",
-  onSelectedAppNameChange,
-  onFormValuesChange,
-  onSearchChange,
+  ui,
+  onUiChange,
   onRefreshList,
   onSelectApp,
   onOpenApp,
   onCloseApp,
   onError,
 }: AppsScreenProps) {
+  const { selectedAppName, formValues, search } = ui;
   const [running, setRunning] = useState(false);
   const [maximized, setMaximized] = useState(false);
 
@@ -167,10 +166,13 @@ export function AppsScreen({
     if (name === selectedAppName) return;
     const next = tools.find((t) => t.name === name);
     if (!next) return;
-    onSelectedAppNameChange(name);
     // Seed schema defaults so default-only fields are sent on Open App (parity
     // with the form's resolveValue display, which onChange doesn't capture).
-    onFormValuesChange(collectSchemaDefaults(next.inputSchema));
+    onUiChange({
+      ...ui,
+      selectedAppName: name,
+      formValues: collectSchemaDefaults(next.inputSchema),
+    });
     setMaximized(false);
     onSelectApp(name);
     // No-input apps auto-launch on selection so the user lands directly in
@@ -191,8 +193,7 @@ export function AppsScreen({
 
   function handleClose() {
     setRunning(false);
-    onSelectedAppNameChange(undefined);
-    onFormValuesChange({});
+    onUiChange({ ...ui, selectedAppName: undefined, formValues: {} });
     setMaximized(false);
     onCloseApp();
   }
@@ -225,10 +226,10 @@ export function AppsScreen({
             <AppControls
               tools={tools}
               selectedName={selectedAppName}
-              searchText={searchText}
+              searchText={search}
               listChanged={listChanged}
               onRefreshList={onRefreshList}
-              onSearchChange={onSearchChange}
+              onSearchChange={(value) => onUiChange({ ...ui, search: value })}
               onSelectApp={handleSelect}
             />
           </SidebarCard>
@@ -310,7 +311,9 @@ export function AppsScreen({
                 tool={selectedTool}
                 formValues={formValues}
                 isOpening={false}
-                onFormChange={onFormValuesChange}
+                onFormChange={(values) =>
+                  onUiChange({ ...ui, formValues: values })
+                }
                 onOpenApp={handleOpen}
               />
             )}
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
index dc0ce3aa5..b7e23c03c 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
@@ -1,30 +1,18 @@
 import { useState } from "react";
 import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type {
-  MessageEntry,
-  MessageMethod,
-} from "../../../../../../core/mcp/types.js";
+import type { MessageEntry } from "../../../../../../core/mcp/types.js";
 import { expect, fn, screen, userEvent, within } from "storybook/test";
 import { HistoryScreen } from "./HistoryScreen";
+import { EMPTY_HISTORY_UI } from "../screenUiState";
 
-// HistoryScreen is controlled (search text + method filter live in the parent —
-// see #1417). This wrapper holds that state so the play-driven filter selection
-// and clear-all reset are observable, mirroring how App owns the state.
+// HistoryScreen is controlled (search text + method filter live in the parent
+// as one `ui` object — see #1417). This wrapper holds that state so the
+// play-driven filter selection and clear-all reset are observable, mirroring
+// how App owns the state.
 function StatefulHistoryScreen(args: ComponentProps<typeof HistoryScreen>) {
-  const [searchText, setSearchText] = useState(args.searchText ?? "");
-  const [methodFilter, setMethodFilter] = useState<MessageMethod | undefined>(
-    args.methodFilter,
-  );
-  return (
-    <HistoryScreen
-      {...args}
-      searchText={searchText}
-      methodFilter={methodFilter}
-      onSearchChange={setSearchText}
-      onMethodFilterChange={setMethodFilter}
-    />
-  );
+  const [ui, setUi] = useState({ ...EMPTY_HISTORY_UI, ...args.ui });
+  return <HistoryScreen {...args} ui={ui} onUiChange={setUi} />;
 }
 
 const meta: Meta<typeof HistoryScreen> = {
@@ -37,8 +25,8 @@ const meta: Meta<typeof HistoryScreen> = {
     onExport: fn(),
     onReplay: fn(),
     onTogglePin: fn(),
-    onSearchChange: fn(),
-    onMethodFilterChange: fn(),
+    ui: EMPTY_HISTORY_UI,
+    onUiChange: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
     compact: true,
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
index 3f79cd32b..bbff1767a 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import type { MessageEntry } from "@inspector/core/mcp/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { HistoryScreen } from "./HistoryScreen";
+import { EMPTY_HISTORY_UI } from "../screenUiState";
 
 const sampleEntries: MessageEntry[] = [
   {
@@ -22,8 +23,8 @@ const sampleEntries: MessageEntry[] = [
 const baseProps = {
   entries: sampleEntries,
   pinnedIds: new Set<string>(),
-  onSearchChange: vi.fn(),
-  onMethodFilterChange: vi.fn(),
+  ui: EMPTY_HISTORY_UI,
+  onUiChange: vi.fn(),
   onClearAll: vi.fn(),
   onExport: vi.fn(),
   onReplay: vi.fn(),
@@ -54,4 +55,34 @@ describe("HistoryScreen", () => {
     await user.click(clearButton);
     expect(onClearAll).toHaveBeenCalled();
   });
+
+  it("emits the search text through onUiChange", async () => {
+    const user = userEvent.setup();
+    const onUiChange = vi.fn();
+    renderWithMantine(<HistoryScreen {...baseProps} onUiChange={onUiChange} />);
+    await user.type(screen.getByPlaceholderText("Search..."), "t");
+    expect(onUiChange).toHaveBeenCalledWith(
+      expect.objectContaining({ search: "t" }),
+    );
+  });
+
+  it("emits the cleared method filter through onUiChange", async () => {
+    const user = userEvent.setup();
+    const onUiChange = vi.fn();
+    const { container } = renderWithMantine(
+      <HistoryScreen
+        {...baseProps}
+        ui={{ ...EMPTY_HISTORY_UI, methodFilter: "tools/list" }}
+        onUiChange={onUiChange}
+      />,
+    );
+    const clearButton = container.querySelector(
+      "button.mantine-InputClearButton-root",
+    ) as HTMLButtonElement | null;
+    expect(clearButton).not.toBeNull();
+    await user.click(clearButton!);
+    expect(onUiChange).toHaveBeenCalledWith(
+      expect.objectContaining({ methodFilter: undefined }),
+    );
+  });
 });
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
index 827ff6f3e..5411afc26 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
@@ -9,12 +9,8 @@ import type { SortDirection } from "../../elements/SortToggle/SortToggle";
 export interface HistoryScreenProps {
   entries: MessageEntry[];
   pinnedIds: Set<string>;
-  // Search text + method filter are controlled by the parent (App) so they
-  // persist across tab navigation within a live session — see #1417.
-  searchText?: string;
-  methodFilter?: MessageMethod;
-  onSearchChange: (value: string) => void;
-  onMethodFilterChange: (value: MessageMethod | undefined) => void;
+  ui: HistoryUiState;
+  onUiChange: (next: HistoryUiState) => void;
   onClearAll: () => void;
   onExport: () => void;
   onReplay: (id: string) => void;
@@ -25,6 +21,13 @@ export interface HistoryScreenProps {
   onToggleCompact: () => void;
 }
 
+// Search text + method filter — controlled by the parent (App) as one object so
+// they persist across tab navigation within a live session (#1417).
+export interface HistoryUiState {
+  search: string;
+  methodFilter?: MessageMethod;
+}
+
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -45,10 +48,8 @@ const SidebarCard = Card.withProps({
 export function HistoryScreen({
   entries,
   pinnedIds,
-  searchText = "",
-  methodFilter,
-  onSearchChange,
-  onMethodFilterChange,
+  ui,
+  onUiChange,
   onClearAll,
   onExport,
   onReplay,
@@ -58,33 +59,37 @@ export function HistoryScreen({
   compact,
   onToggleCompact,
 }: HistoryScreenProps) {
+  const { search, methodFilter } = ui;
+
   const availableMethods = useMemo(
     () => Array.from(new Set(entries.map(extractMethod))).sort(),
     [entries],
   );
 
   const handleClearAll = useCallback(() => {
-    onMethodFilterChange(undefined);
+    onUiChange({ ...ui, methodFilter: undefined });
     onClearAll();
-  }, [onMethodFilterChange, onClearAll]);
+  }, [ui, onUiChange, onClearAll]);
 
   return (
     <ScreenLayout>
       <Sidebar>
         <SidebarCard>
           <HistoryControls
-            searchText={searchText}
+            searchText={search}
             methodFilter={methodFilter}
             availableMethods={availableMethods}
-            onSearchChange={onSearchChange}
-            onMethodFilterChange={onMethodFilterChange}
+            onSearchChange={(value) => onUiChange({ ...ui, search: value })}
+            onMethodFilterChange={(value) =>
+              onUiChange({ ...ui, methodFilter: value })
+            }
           />
         </SidebarCard>
       </Sidebar>
       <HistoryListPanel
         entries={entries}
         pinnedIds={pinnedIds}
-        searchText={searchText}
+        searchText={search}
         methodFilter={methodFilter}
         onClearAll={handleClearAll}
         onExport={onExport}
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
index 6052c50d9..8f2346692 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { LoggingScreen } from "./LoggingScreen";
+import { EMPTY_LOGS_UI } from "../screenUiState";
 import { mixedEntries } from "./LoggingScreen.fixtures";
 import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
 
@@ -13,8 +14,8 @@ const meta: Meta<typeof LoggingScreen> = {
     onSetLevel: fn(),
     onClear: fn(),
     onExport: fn(),
-    onFilterChange: fn(),
-    onVisibleLevelsChange: fn(),
+    ui: EMPTY_LOGS_UI,
+    onUiChange: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
   },
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
index 72c7497c4..19f7c50bc 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
@@ -1,16 +1,19 @@
 import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
-import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { LoggingScreen, type LoggingScreenProps } from "./LoggingScreen";
-import { ALL_LEVELS_VISIBLE } from "./logLevels";
+import {
+  LoggingScreen,
+  type LoggingScreenProps,
+  type LogsUiState,
+} from "./LoggingScreen";
+import { EMPTY_LOGS_UI } from "../screenUiState";
 
 const baseProps = {
   entries: [],
   currentLevel: "info" as const,
-  onFilterChange: vi.fn(),
-  onVisibleLevelsChange: vi.fn(),
+  ui: EMPTY_LOGS_UI,
+  onUiChange: vi.fn(),
   onSetLevel: vi.fn(),
   onClear: vi.fn(),
   onExport: vi.fn(),
@@ -19,28 +22,21 @@ const baseProps = {
 };
 
 // LoggingScreen is controlled: filter text + visible-level set live in the
-// parent (App) so they persist across tab navigation (#1417). This host holds
-// that state so typing/toggling drives the rendered list, mirroring how App
-// owns it. Props passed in override defaults; the stateful filter wiring is
-// applied last so callers can still observe changes via the spied callbacks.
+// parent (App) as one `ui` object so they persist across tab navigation
+// (#1417). This host holds that state so typing/toggling drives the rendered
+// list, mirroring how App owns it. Props passed in override defaults; the
+// stateful `ui` wiring is applied last so callers can still observe changes
+// via the spied `onUiChange` callback.
 function ControlledLoggingScreen(props: Partial<LoggingScreenProps>) {
-  const [filterText, setFilterText] = useState(props.filterText ?? "");
-  const [visibleLevels, setVisibleLevels] = useState<
-    Record<LoggingLevel, boolean>
-  >(props.visibleLevels ?? ALL_LEVELS_VISIBLE);
+  const [ui, setUi] = useState<LogsUiState>({ ...EMPTY_LOGS_UI, ...props.ui });
   return (
     <LoggingScreen
       {...baseProps}
       {...props}
-      filterText={filterText}
-      visibleLevels={visibleLevels}
-      onFilterChange={(value) => {
-        setFilterText(value);
-        props.onFilterChange?.(value);
-      }}
-      onVisibleLevelsChange={(value) => {
-        setVisibleLevels(value);
-        props.onVisibleLevelsChange?.(value);
+      ui={ui}
+      onUiChange={(value) => {
+        setUi(value);
+        props.onUiChange?.(value);
       }}
     />
   );
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
index 6a11d1728..284043d63 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
@@ -9,12 +9,8 @@ import { ALL_LEVELS_VISIBLE, NO_LEVELS_VISIBLE } from "./logLevels";
 export interface LoggingScreenProps {
   entries: LogEntryData[];
   currentLevel: LoggingLevel;
-  // Filter text + visible-level set are controlled by the parent (App) so they
-  // persist across tab navigation within a live session — see #1417.
-  filterText?: string;
-  visibleLevels?: Record<LoggingLevel, boolean>;
-  onFilterChange: (value: string) => void;
-  onVisibleLevelsChange: (value: Record<LoggingLevel, boolean>) => void;
+  ui: LogsUiState;
+  onUiChange: (next: LogsUiState) => void;
   onSetLevel: (level: LoggingLevel) => void;
   onClear: () => void;
   onExport: () => void;
@@ -22,6 +18,13 @@ export interface LoggingScreenProps {
   onSortChange: (next: SortDirection) => void;
 }
 
+// Filter text + visible-level set — controlled by the parent (App) as one
+// object so they persist across tab navigation within a live session (#1417).
+export interface LogsUiState {
+  filterText: string;
+  visibleLevels: Record<LoggingLevel, boolean>;
+}
+
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -42,23 +45,29 @@ const SidebarCard = Card.withProps({
 export function LoggingScreen({
   entries,
   currentLevel,
-  filterText = "",
-  visibleLevels = ALL_LEVELS_VISIBLE,
-  onFilterChange,
-  onVisibleLevelsChange,
+  ui,
+  onUiChange,
   onSetLevel,
   onClear,
   onExport,
   sortDirection,
   onSortChange,
 }: LoggingScreenProps) {
+  const { filterText, visibleLevels } = ui;
+
   function handleToggleLevel(level: LoggingLevel, visible: boolean) {
-    onVisibleLevelsChange({ ...visibleLevels, [level]: visible });
+    onUiChange({
+      ...ui,
+      visibleLevels: { ...visibleLevels, [level]: visible },
+    });
   }
 
   function handleToggleAllLevels() {
     const allSelected = Object.values(visibleLevels).every(Boolean);
-    onVisibleLevelsChange(allSelected ? NO_LEVELS_VISIBLE : ALL_LEVELS_VISIBLE);
+    onUiChange({
+      ...ui,
+      visibleLevels: allSelected ? NO_LEVELS_VISIBLE : ALL_LEVELS_VISIBLE,
+    });
   }
 
   return (
@@ -70,7 +79,7 @@ export function LoggingScreen({
             filterText={filterText}
             visibleLevels={visibleLevels}
             onSetLevel={onSetLevel}
-            onFilterChange={onFilterChange}
+            onFilterChange={(value) => onUiChange({ ...ui, filterText: value })}
             onToggleLevel={handleToggleLevel}
             onToggleAllLevels={handleToggleAllLevels}
           />
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
index b7429959f..d80f01063 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
@@ -2,29 +2,17 @@ import { useState } from "react";
 import type { ComponentProps } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, fn, userEvent, within } from "storybook/test";
-import type {
-  FetchRequestCategory,
-  FetchRequestEntry,
-} from "../../../../../../core/mcp/types.js";
+import type { FetchRequestEntry } from "../../../../../../core/mcp/types.js";
 import { NetworkScreen } from "./NetworkScreen";
+import { EMPTY_NETWORK_UI } from "../screenUiState";
 
 // NetworkScreen is controlled (filter text + visible categories live in the
-// parent — see #1417). This wrapper holds that state so the play-driven category
-// toggle actually hides entries, mirroring how App owns the state.
+// parent as one `ui` object — see #1417). This wrapper holds that state so the
+// play-driven category toggle actually hides entries, mirroring how App owns
+// the state.
 function StatefulNetworkScreen(args: ComponentProps<typeof NetworkScreen>) {
-  const [filterText, setFilterText] = useState(args.filterText ?? "");
-  const [visibleCategories, setVisibleCategories] = useState<
-    Record<FetchRequestCategory, boolean> | undefined
-  >(args.visibleCategories);
-  return (
-    <NetworkScreen
-      {...args}
-      filterText={filterText}
-      visibleCategories={visibleCategories}
-      onFilterChange={setFilterText}
-      onVisibleCategoriesChange={setVisibleCategories}
-    />
-  );
+  const [ui, setUi] = useState({ ...EMPTY_NETWORK_UI, ...args.ui });
+  return <NetworkScreen {...args} ui={ui} onUiChange={setUi} />;
 }
 
 const meta: Meta<typeof NetworkScreen> = {
@@ -34,8 +22,8 @@ const meta: Meta<typeof NetworkScreen> = {
   args: {
     onClear: fn(),
     onExport: fn(),
-    onFilterChange: fn(),
-    onVisibleCategoriesChange: fn(),
+    ui: EMPTY_NETWORK_UI,
+    onUiChange: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
     compact: true,
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
index 4b29efca9..9d1822906 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
-import type {
-  FetchRequestCategory,
-  FetchRequestEntry,
-} from "@inspector/core/mcp/types.js";
+import type { FetchRequestEntry } from "@inspector/core/mcp/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { NetworkScreen, type NetworkScreenProps } from "./NetworkScreen";
-import { ALL_CATEGORIES_VISIBLE } from "./fetchCategories";
+import {
+  NetworkScreen,
+  type NetworkScreenProps,
+  type NetworkUiState,
+} from "./NetworkScreen";
+import { EMPTY_NETWORK_UI } from "../screenUiState";
 
 const transportEntry: FetchRequestEntry = {
   id: "t-1",
@@ -46,8 +47,8 @@ const errorEntry: FetchRequestEntry = {
 
 const baseProps = {
   entries: [transportEntry, authEntry, errorEntry],
-  onFilterChange: vi.fn(),
-  onVisibleCategoriesChange: vi.fn(),
+  ui: EMPTY_NETWORK_UI,
+  onUiChange: vi.fn(),
   onClear: vi.fn(),
   onExport: vi.fn(),
   sortDirection: "newest-first" as const,
@@ -57,28 +58,24 @@ const baseProps = {
 };
 
 // NetworkScreen is controlled: filter text + visible-category set live in the
-// parent (App) so they persist across tab navigation (#1417). This host holds
-// that state so typing/toggling drives the rendered list, mirroring how App
-// owns it. Props passed in override defaults; the stateful filter wiring is
-// applied last so callers can still observe changes via the spied callbacks.
+// parent (App) as one `ui` object so they persist across tab navigation
+// (#1417). This host holds that state so typing/toggling drives the rendered
+// list, mirroring how App owns it. Props passed in override defaults; the
+// stateful `ui` wiring is applied last so callers can still observe changes via
+// the spied `onUiChange` callback.
 function ControlledNetworkScreen(props: Partial<NetworkScreenProps>) {
-  const [filterText, setFilterText] = useState(props.filterText ?? "");
-  const [visibleCategories, setVisibleCategories] = useState<
-    Record<FetchRequestCategory, boolean>
-  >(props.visibleCategories ?? ALL_CATEGORIES_VISIBLE);
+  const [ui, setUi] = useState<NetworkUiState>({
+    ...EMPTY_NETWORK_UI,
+    ...props.ui,
+  });
   return (
     <NetworkScreen
       {...baseProps}
       {...props}
-      filterText={filterText}
-      visibleCategories={visibleCategories}
-      onFilterChange={(value) => {
-        setFilterText(value);
-        props.onFilterChange?.(value);
-      }}
-      onVisibleCategoriesChange={(value) => {
-        setVisibleCategories(value);
-        props.onVisibleCategoriesChange?.(value);
+      ui={ui}
+      onUiChange={(value) => {
+        setUi(value);
+        props.onUiChange?.(value);
       }}
     />
   );
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
index d9397317f..ebc0996f0 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
@@ -13,14 +13,8 @@ import {
 
 export interface NetworkScreenProps {
   entries: FetchRequestEntry[];
-  // Filter text + visible-category set are controlled by the parent (App) so
-  // they persist across tab navigation within a live session — see #1417.
-  filterText?: string;
-  visibleCategories?: Record<FetchRequestCategory, boolean>;
-  onFilterChange: (value: string) => void;
-  onVisibleCategoriesChange: (
-    value: Record<FetchRequestCategory, boolean>,
-  ) => void;
+  ui: NetworkUiState;
+  onUiChange: (next: NetworkUiState) => void;
   onClear: () => void;
   onExport: () => void;
   sortDirection: SortDirection;
@@ -29,6 +23,13 @@ export interface NetworkScreenProps {
   onToggleCompact: () => void;
 }
 
+// Filter text + visible-category set — controlled by the parent (App) as one
+// object so they persist across tab navigation within a live session (#1417).
+export interface NetworkUiState {
+  filterText: string;
+  visibleCategories: Record<FetchRequestCategory, boolean>;
+}
+
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -48,10 +49,8 @@ const SidebarCard = Card.withProps({
 
 export function NetworkScreen({
   entries,
-  filterText = "",
-  visibleCategories = ALL_CATEGORIES_VISIBLE,
-  onFilterChange,
-  onVisibleCategoriesChange,
+  ui,
+  onUiChange,
   onClear,
   onExport,
   sortDirection,
@@ -59,18 +58,26 @@ export function NetworkScreen({
   compact,
   onToggleCompact,
 }: NetworkScreenProps) {
+  const { filterText, visibleCategories } = ui;
+
   function handleToggleCategory(
     category: FetchRequestCategory,
     visible: boolean,
   ) {
-    onVisibleCategoriesChange({ ...visibleCategories, [category]: visible });
+    onUiChange({
+      ...ui,
+      visibleCategories: { ...visibleCategories, [category]: visible },
+    });
   }
 
   function handleToggleAllCategories() {
     const allSelected = Object.values(visibleCategories).every(Boolean);
-    onVisibleCategoriesChange(
-      allSelected ? NO_CATEGORIES_VISIBLE : ALL_CATEGORIES_VISIBLE,
-    );
+    onUiChange({
+      ...ui,
+      visibleCategories: allSelected
+        ? NO_CATEGORIES_VISIBLE
+        : ALL_CATEGORIES_VISIBLE,
+    });
   }
 
   return (
@@ -80,7 +87,7 @@ export function NetworkScreen({
           <NetworkControls
             filterText={filterText}
             visibleCategories={visibleCategories}
-            onFilterChange={onFilterChange}
+            onFilterChange={(value) => onUiChange({ ...ui, filterText: value })}
             onToggleCategory={handleToggleCategory}
             onToggleAllCategories={handleToggleAllCategories}
           />
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
index 57886a9ac..dae6659a3 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.stories.tsx
@@ -4,34 +4,16 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { fn, userEvent, within } from "storybook/test";
 import { PromptsScreen } from "./PromptsScreen";
-import type { GetPromptState } from "./PromptsScreen";
+import type { GetPromptState, PromptsUiState } from "./PromptsScreen";
+import { EMPTY_PROMPTS_UI } from "../screenUiState";
 
 // PromptsScreen is controlled (selection, argument values, submitted prompt, and
-// search text live in the parent — see #1417). This wrapper holds that state so
-// the play-driven prompt clicks still drive the detail panel, mirroring how App
-// owns the state in the real app.
+// search text live in the parent as one `ui` object — see #1417). This wrapper
+// holds that state so the play-driven prompt clicks still drive the detail
+// panel, mirroring how App owns the state in the real app.
 function StatefulPromptsScreen(args: ComponentProps<typeof PromptsScreen>) {
-  const [selectedPromptName, setSelectedPromptName] = useState(
-    args.selectedPromptName,
-  );
-  const [argumentValues, setArgumentValues] = useState<Record<string, string>>(
-    args.argumentValues ?? {},
-  );
-  const [submittedFor, setSubmittedFor] = useState(args.submittedFor);
-  const [searchText, setSearchText] = useState(args.searchText ?? "");
-  return (
-    <PromptsScreen
-      {...args}
-      selectedPromptName={selectedPromptName}
-      argumentValues={argumentValues}
-      submittedFor={submittedFor}
-      searchText={searchText}
-      onSelectedPromptNameChange={setSelectedPromptName}
-      onArgumentValuesChange={setArgumentValues}
-      onSubmittedForChange={setSubmittedFor}
-      onSearchChange={setSearchText}
-    />
-  );
+  const [ui, setUi] = useState<PromptsUiState>(args.ui ?? EMPTY_PROMPTS_UI);
+  return <PromptsScreen {...args} ui={ui} onUiChange={setUi} />;
 }
 
 const meta: Meta<typeof PromptsScreen> = {
@@ -39,13 +21,11 @@ const meta: Meta<typeof PromptsScreen> = {
   component: PromptsScreen,
   parameters: { layout: "fullscreen" },
   args: {
+    ui: EMPTY_PROMPTS_UI,
+    onUiChange: fn(),
     onRefreshList: fn(),
     onGetPrompt: fn(),
     onCopyMessages: fn(),
-    onSelectedPromptNameChange: fn(),
-    onArgumentValuesChange: fn(),
-    onSubmittedForChange: fn(),
-    onSearchChange: fn(),
     listChanged: false,
   },
   render: (args) => <StatefulPromptsScreen {...args} />,
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx
index 533045b0b..e9aa45cec 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx
@@ -3,7 +3,12 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { PromptsScreen, type PromptsScreenProps } from "./PromptsScreen";
+import {
+  PromptsScreen,
+  type PromptsScreenProps,
+  type PromptsUiState,
+} from "./PromptsScreen";
+import { EMPTY_PROMPTS_UI } from "../screenUiState";
 
 const promptsWithArgs: Prompt[] = [
   {
@@ -26,56 +31,32 @@ const noArgPrompts: Prompt[] = [
 const baseProps = {
   prompts: promptsWithArgs,
   listChanged: false,
+  ui: EMPTY_PROMPTS_UI,
+  onUiChange: vi.fn(),
   onRefreshList: vi.fn(),
   onGetPrompt: vi.fn(),
-  onSelectedPromptNameChange: vi.fn(),
-  onArgumentValuesChange: vi.fn(),
-  onSubmittedForChange: vi.fn(),
-  onSearchChange: vi.fn(),
 };
 
 // PromptsScreen is controlled: selection, argument values, the submitted
-// marker, and the sidebar search live in the parent (App) so they persist
-// across tab navigation (#1417). This host holds that state so clicking a
-// prompt, typing arguments, submitting, and closing drive the panel exactly
-// as App owns it. Props passed in override defaults; the stateful wiring is
-// applied last so callers can still observe activity via the spied callbacks.
+// marker, and the sidebar search live in the parent (App) as one `ui` object so
+// they persist across tab navigation (#1417). This host holds that state so
+// clicking a prompt, typing arguments, submitting, and closing drive the panel
+// exactly as App owns it. Props passed in override defaults; the stateful `ui`
+// wiring is applied last so callers can still observe activity via the rendered
+// state.
 function ControlledPromptsScreen(props: Partial<PromptsScreenProps>) {
-  const [selectedPromptName, setSelectedPromptName] = useState<
-    string | undefined
-  >(props.selectedPromptName);
-  const [argumentValues, setArgumentValues] = useState<Record<string, string>>(
-    props.argumentValues ?? {},
-  );
-  const [submittedFor, setSubmittedFor] = useState<string | undefined>(
-    props.submittedFor,
-  );
-  const [searchText, setSearchText] = useState<string | undefined>(
-    props.searchText,
-  );
+  const [ui, setUi] = useState<PromptsUiState>({
+    ...EMPTY_PROMPTS_UI,
+    ...props.ui,
+  });
   return (
     <PromptsScreen
       {...baseProps}
       {...props}
-      selectedPromptName={selectedPromptName}
-      argumentValues={argumentValues}
-      submittedFor={submittedFor}
-      searchText={searchText}
-      onSelectedPromptNameChange={(value) => {
-        setSelectedPromptName(value);
-        props.onSelectedPromptNameChange?.(value);
-      }}
-      onArgumentValuesChange={(value) => {
-        setArgumentValues(value);
-        props.onArgumentValuesChange?.(value);
-      }}
-      onSubmittedForChange={(value) => {
-        setSubmittedFor(value);
-        props.onSubmittedForChange?.(value);
-      }}
-      onSearchChange={(value) => {
-        setSearchText(value);
-        props.onSearchChange?.(value);
+      ui={ui}
+      onUiChange={(next) => {
+        setUi(next);
+        props.onUiChange?.(next);
       }}
     />
   );
diff --git a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
index 2a90ecab1..d10f1686e 100644
--- a/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
+++ b/clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx
@@ -30,19 +30,10 @@ export interface GetPromptState {
 export interface PromptsScreenProps {
   prompts: Prompt[];
   getPromptState?: GetPromptState;
-  // Selection, argument values, the "submitted" marker, and the sidebar search
-  // are controlled by the parent (App) so they persist across tab navigation
-  // within a live session — see #1417.
-  selectedPromptName?: string;
-  argumentValues?: Record<string, string>;
-  submittedFor?: string;
-  searchText?: string;
+  ui: PromptsUiState;
   listChanged: boolean;
   completionsSupported?: boolean;
-  onSelectedPromptNameChange: (value: string | undefined) => void;
-  onArgumentValuesChange: (value: Record<string, string>) => void;
-  onSubmittedForChange: (value: string | undefined) => void;
-  onSearchChange: (value: string) => void;
+  onUiChange: (next: PromptsUiState) => void;
   onRefreshList: () => void;
   onGetPrompt: (name: string, args: Record<string, string>) => void;
   onCopyMessages?: () => void;
@@ -56,6 +47,16 @@ export interface PromptsScreenProps {
   ) => Promise<string[]>;
 }
 
+// Selection, argument values, the "submitted" marker, and the sidebar search —
+// controlled by the parent (App) as one object so they persist across tab
+// navigation within a live session (#1417).
+export interface PromptsUiState {
+  selectedPromptName?: string;
+  argumentValues: Record<string, string>;
+  submittedFor?: string;
+  search: string;
+}
+
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -112,21 +113,16 @@ function hasArguments(prompt: Prompt): boolean {
 export function PromptsScreen({
   prompts,
   getPromptState,
-  selectedPromptName,
-  argumentValues = {},
-  submittedFor,
-  searchText = "",
+  ui,
   listChanged,
   completionsSupported,
-  onSelectedPromptNameChange,
-  onArgumentValuesChange,
-  onSubmittedForChange,
-  onSearchChange,
+  onUiChange,
   onRefreshList,
   onGetPrompt,
   onCopyMessages,
   onCompleteArgument,
 }: PromptsScreenProps) {
+  const { selectedPromptName, argumentValues, submittedFor, search } = ui;
   const selectedPrompt = selectedPromptName
     ? prompts.find((p) => p.name === selectedPromptName)
     : undefined;
@@ -137,23 +133,23 @@ export function PromptsScreen({
     // for navigation, ✕ is for dismiss. Closing-then-reselecting is
     // its own thing (the close handler clears submittedFor).
     if (name === selectedPromptName) return;
-    onArgumentValuesChange({});
-    onSelectedPromptNameChange(name);
     // Auto-fetch no-argument prompts the moment they're selected — the
     // form pane would otherwise just render a bare Get Prompt button
     // with nothing to fill in. Prompts with arguments wait for submit.
     const target = prompts.find((p) => p.name === name);
-    if (target && !hasArguments(target)) {
-      onSubmittedForChange(name);
-      onGetPrompt(name, {});
-    } else {
-      onSubmittedForChange(undefined);
-    }
+    const autoFetch = !!target && !hasArguments(target);
+    onUiChange({
+      ...ui,
+      argumentValues: {},
+      selectedPromptName: name,
+      submittedFor: autoFetch ? name : undefined,
+    });
+    if (autoFetch) onGetPrompt(name, {});
   }
 
   function handleSubmit() {
     if (!selectedPrompt) return;
-    onSubmittedForChange(selectedPrompt.name);
+    onUiChange({ ...ui, submittedFor: selectedPrompt.name });
     onGetPrompt(selectedPrompt.name, argumentValues);
   }
 
@@ -163,10 +159,13 @@ export function PromptsScreen({
     // prompts there's no form to return to, so drop the selection and
     // fall back to the empty state.
     if (selectedPrompt && hasArguments(selectedPrompt)) {
-      onSubmittedForChange(undefined);
+      onUiChange({ ...ui, submittedFor: undefined });
     } else {
-      onSelectedPromptNameChange(undefined);
-      onSubmittedForChange(undefined);
+      onUiChange({
+        ...ui,
+        selectedPromptName: undefined,
+        submittedFor: undefined,
+      });
     }
   }
 
@@ -240,10 +239,10 @@ export function PromptsScreen({
           <PromptControls
             prompts={prompts}
             selectedName={selectedPromptName}
-            searchText={searchText}
+            searchText={search}
             listChanged={listChanged}
             onRefreshList={onRefreshList}
-            onSearchChange={onSearchChange}
+            onSearchChange={(value) => onUiChange({ ...ui, search: value })}
             onSelectPrompt={handleSelectPrompt}
           />
         </SidebarCard>
@@ -263,7 +262,10 @@ export function PromptsScreen({
               prompt={selectedPrompt}
               argumentValues={argumentValues}
               onArgumentChange={(argName, value) =>
-                onArgumentValuesChange({ ...argumentValues, [argName]: value })
+                onUiChange({
+                  ...ui,
+                  argumentValues: { ...argumentValues, [argName]: value },
+                })
               }
               onGetPrompt={handleSubmit}
               completionsSupported={completionsSupported}
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
index ff7417601..ac35aeb00 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
@@ -8,39 +8,17 @@ import type {
 import type { InspectorResourceSubscription } from "../../../../../../core/mcp/types.js";
 import { fn, userEvent, within } from "storybook/test";
 import { ResourcesScreen } from "./ResourcesScreen";
-import type { ReadResourceState } from "./ResourcesScreen";
+import type { ReadResourceState, ResourcesUiState } from "./ResourcesScreen";
+import { EMPTY_RESOURCES_UI } from "../screenUiState";
 
 // ResourcesScreen is controlled (resource/template selection, the originating
-// template, search text, and open accordion sections live in the parent — see
-// #1417). This wrapper holds that state so the play-driven clicks still drive
-// the detail/preview panels, mirroring how App owns the state in the real app.
+// template, search text, and open accordion sections live in the parent as one
+// `ui` object — see #1417). This wrapper holds that state so the play-driven
+// clicks still drive the detail/preview panels, mirroring how App owns the state
+// in the real app.
 function StatefulResourcesScreen(args: ComponentProps<typeof ResourcesScreen>) {
-  const [selectedResourceUri, setSelectedResourceUri] = useState(
-    args.selectedResourceUri,
-  );
-  const [selectedTemplateUri, setSelectedTemplateUri] = useState(
-    args.selectedTemplateUri,
-  );
-  const [originatingTemplateUri, setOriginatingTemplateUri] = useState(
-    args.originatingTemplateUri,
-  );
-  const [searchText, setSearchText] = useState(args.searchText ?? "");
-  const [openSections, setOpenSections] = useState(args.openSections);
-  return (
-    <ResourcesScreen
-      {...args}
-      selectedResourceUri={selectedResourceUri}
-      selectedTemplateUri={selectedTemplateUri}
-      originatingTemplateUri={originatingTemplateUri}
-      searchText={searchText}
-      openSections={openSections}
-      onSelectedResourceUriChange={setSelectedResourceUri}
-      onSelectedTemplateUriChange={setSelectedTemplateUri}
-      onOriginatingTemplateUriChange={setOriginatingTemplateUri}
-      onSearchChange={setSearchText}
-      onOpenSectionsChange={setOpenSections}
-    />
-  );
+  const [ui, setUi] = useState<ResourcesUiState>(args.ui ?? EMPTY_RESOURCES_UI);
+  return <ResourcesScreen {...args} ui={ui} onUiChange={setUi} />;
 }
 
 const meta: Meta<typeof ResourcesScreen> = {
@@ -48,15 +26,12 @@ const meta: Meta<typeof ResourcesScreen> = {
   component: ResourcesScreen,
   parameters: { layout: "fullscreen" },
   args: {
+    ui: EMPTY_RESOURCES_UI,
+    onUiChange: fn(),
     onRefreshList: fn(),
     onReadResource: fn(),
     onSubscribeResource: fn(),
     onUnsubscribeResource: fn(),
-    onSelectedResourceUriChange: fn(),
-    onSelectedTemplateUriChange: fn(),
-    onOriginatingTemplateUriChange: fn(),
-    onSearchChange: fn(),
-    onOpenSectionsChange: fn(),
     listChanged: false,
     subscriptions: [],
     templates: [],
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
index 54e44b492..a94d96338 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
@@ -7,7 +7,12 @@ import type {
   ReadResourceResult,
 } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { ResourcesScreen, type ResourcesScreenProps } from "./ResourcesScreen";
+import {
+  ResourcesScreen,
+  type ResourcesScreenProps,
+  type ResourcesUiState,
+} from "./ResourcesScreen";
+import { EMPTY_RESOURCES_UI } from "../screenUiState";
 
 const resources: Resource[] = [
   { uri: "file:///x", name: "x.txt" },
@@ -23,15 +28,12 @@ const baseProps = {
   templates,
   subscriptions: [],
   listChanged: false,
+  ui: EMPTY_RESOURCES_UI,
+  onUiChange: vi.fn(),
   onRefreshList: vi.fn(),
   onReadResource: vi.fn(),
   onSubscribeResource: vi.fn(),
   onUnsubscribeResource: vi.fn(),
-  onSelectedResourceUriChange: vi.fn(),
-  onSelectedTemplateUriChange: vi.fn(),
-  onOriginatingTemplateUriChange: vi.fn(),
-  onSearchChange: vi.fn(),
-  onOpenSectionsChange: vi.fn(),
   compact: false,
   onCompactChange: vi.fn(),
 };
@@ -42,55 +44,25 @@ const okResult: ReadResourceResult = {
 
 // ResourcesScreen is controlled: the selected resource/template URIs, the
 // originating-template marker, the sidebar search, and the accordion's open
-// sections live in the parent (App) so they persist across tab navigation
-// (#1417). This host holds that state so clicking a resource/template, typing
-// into the template form, reading, and closing drive the panel exactly as App
-// owns it. Props passed in override defaults; the stateful wiring is applied
-// last so callers can still observe activity via the spied callbacks.
+// sections live in the parent (App) as one `ui` object so they persist across
+// tab navigation (#1417). This host holds that state so clicking a
+// resource/template, typing into the template form, reading, and closing drive
+// the panel exactly as App owns it. Props passed in override defaults; the
+// stateful `ui` wiring is applied last so callers can still observe activity via
+// the rendered state.
 function ControlledResourcesScreen(props: Partial<ResourcesScreenProps>) {
-  const [selectedResourceUri, setSelectedResourceUri] = useState<
-    string | undefined
-  >(props.selectedResourceUri);
-  const [selectedTemplateUri, setSelectedTemplateUri] = useState<
-    string | undefined
-  >(props.selectedTemplateUri);
-  const [originatingTemplateUri, setOriginatingTemplateUri] = useState<
-    string | undefined
-  >(props.originatingTemplateUri);
-  const [searchText, setSearchText] = useState<string | undefined>(
-    props.searchText,
-  );
-  const [openSections, setOpenSections] = useState<string[] | undefined>(
-    props.openSections,
-  );
+  const [ui, setUi] = useState<ResourcesUiState>({
+    ...EMPTY_RESOURCES_UI,
+    ...props.ui,
+  });
   return (
     <ResourcesScreen
       {...baseProps}
       {...props}
-      selectedResourceUri={selectedResourceUri}
-      selectedTemplateUri={selectedTemplateUri}
-      originatingTemplateUri={originatingTemplateUri}
-      searchText={searchText}
-      openSections={openSections}
-      onSelectedResourceUriChange={(value) => {
-        setSelectedResourceUri(value);
-        props.onSelectedResourceUriChange?.(value);
-      }}
-      onSelectedTemplateUriChange={(value) => {
-        setSelectedTemplateUri(value);
-        props.onSelectedTemplateUriChange?.(value);
-      }}
-      onOriginatingTemplateUriChange={(value) => {
-        setOriginatingTemplateUri(value);
-        props.onOriginatingTemplateUriChange?.(value);
-      }}
-      onSearchChange={(value) => {
-        setSearchText(value);
-        props.onSearchChange?.(value);
-      }}
-      onOpenSectionsChange={(value) => {
-        setOpenSections(value);
-        props.onOpenSectionsChange?.(value);
+      ui={ui}
+      onUiChange={(next) => {
+        setUi(next);
+        props.onUiChange?.(next);
       }}
     />
   );
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
index 655a71cea..ac3099b08 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
@@ -32,22 +32,10 @@ export interface ResourcesScreenProps {
   templates: ResourceTemplate[];
   subscriptions: InspectorResourceSubscription[];
   readState?: ReadResourceState;
-  // Selection (resource URI, template URI, the originating-template marker),
-  // the sidebar search, and accordion open-sections are controlled by the
-  // parent (App) so they persist across tab navigation within a live
-  // session — see #1417.
-  selectedResourceUri?: string;
-  selectedTemplateUri?: string;
-  originatingTemplateUri?: string;
-  searchText?: string;
-  openSections?: string[];
+  ui: ResourcesUiState;
   listChanged: boolean;
   completionsSupported?: boolean;
-  onSelectedResourceUriChange: (value: string | undefined) => void;
-  onSelectedTemplateUriChange: (value: string | undefined) => void;
-  onOriginatingTemplateUriChange: (value: string | undefined) => void;
-  onSearchChange: (value: string) => void;
-  onOpenSectionsChange: (value: string[]) => void;
+  onUiChange: (next: ResourcesUiState) => void;
   onRefreshList: () => void;
   onReadResource: (uri: string) => void;
   onSubscribeResource: (uri: string) => void;
@@ -64,6 +52,19 @@ export interface ResourcesScreenProps {
   onCompactChange: (next: boolean) => void;
 }
 
+// Selection (resource URI, template URI, the originating-template marker), the
+// sidebar search, and accordion open-sections — controlled by the parent (App)
+// as one object so they persist across tab navigation within a live session
+// (#1417). `openSections` undefined → ResourceControls falls back to the
+// compact-derived default.
+export interface ResourcesUiState {
+  selectedResourceUri?: string;
+  selectedTemplateUri?: string;
+  originatingTemplateUri?: string;
+  search: string;
+  openSections?: string[];
+}
+
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -120,18 +121,10 @@ export function ResourcesScreen({
   templates,
   subscriptions,
   readState,
-  selectedResourceUri,
-  selectedTemplateUri,
-  originatingTemplateUri,
-  searchText = "",
-  openSections,
+  ui,
   listChanged,
   completionsSupported,
-  onSelectedResourceUriChange,
-  onSelectedTemplateUriChange,
-  onOriginatingTemplateUriChange,
-  onSearchChange,
-  onOpenSectionsChange,
+  onUiChange,
   onRefreshList,
   onReadResource,
   onSubscribeResource,
@@ -140,6 +133,13 @@ export function ResourcesScreen({
   compact,
   onCompactChange,
 }: ResourcesScreenProps) {
+  const {
+    selectedResourceUri,
+    selectedTemplateUri,
+    originatingTemplateUri,
+    search,
+    openSections,
+  } = ui;
   const selectedResource = selectedResourceUri
     ? resources.find((r) => r.uri === selectedResourceUri)
     : undefined;
@@ -156,16 +156,22 @@ export function ResourcesScreen({
       : undefined);
 
   function handleSelectResource(uri: string) {
-    onSelectedTemplateUriChange(undefined);
-    onSelectedResourceUriChange(uri);
-    onOriginatingTemplateUriChange(undefined);
+    onUiChange({
+      ...ui,
+      selectedTemplateUri: undefined,
+      selectedResourceUri: uri,
+      originatingTemplateUri: undefined,
+    });
     onReadResource(uri);
   }
 
   function handleSelectTemplate(uriTemplate: string) {
-    onSelectedResourceUriChange(undefined);
-    onSelectedTemplateUriChange(uriTemplate);
-    onOriginatingTemplateUriChange(undefined);
+    onUiChange({
+      ...ui,
+      selectedResourceUri: undefined,
+      selectedTemplateUri: uriTemplate,
+      originatingTemplateUri: undefined,
+    });
   }
 
   function handleReadResource(uri: string) {
@@ -174,19 +180,25 @@ export function ResourcesScreen({
     // clearing the template selection hides the template form so only
     // the rendered resource is shown. We remember the template URI so
     // closing the preview can restore the form.
-    if (selectedTemplateUri) {
-      onOriginatingTemplateUriChange(selectedTemplateUri);
-    }
-    onSelectedTemplateUriChange(undefined);
-    onSelectedResourceUriChange(uri);
+    onUiChange({
+      ...ui,
+      originatingTemplateUri: selectedTemplateUri ?? originatingTemplateUri,
+      selectedTemplateUri: undefined,
+      selectedResourceUri: uri,
+    });
     onReadResource(uri);
   }
 
   function handleClosePreview() {
-    onSelectedResourceUriChange(undefined);
     if (originatingTemplateUri) {
-      onSelectedTemplateUriChange(originatingTemplateUri);
-      onOriginatingTemplateUriChange(undefined);
+      onUiChange({
+        ...ui,
+        selectedResourceUri: undefined,
+        selectedTemplateUri: originatingTemplateUri,
+        originatingTemplateUri: undefined,
+      });
+    } else {
+      onUiChange({ ...ui, selectedResourceUri: undefined });
     }
   }
 
@@ -260,12 +272,14 @@ export function ResourcesScreen({
             subscriptions={subscriptions}
             selectedUri={selectedResourceUri}
             selectedTemplateUri={selectedTemplateUri}
-            searchText={searchText}
+            searchText={search}
             openSections={openSections}
             listChanged={listChanged}
             onRefreshList={onRefreshList}
-            onSearchChange={onSearchChange}
-            onOpenSectionsChange={onOpenSectionsChange}
+            onSearchChange={(value) => onUiChange({ ...ui, search: value })}
+            onOpenSectionsChange={(value) =>
+              onUiChange({ ...ui, openSections: value })
+            }
             onSelectUri={handleSelectResource}
             onSelectTemplate={handleSelectTemplate}
             onUnsubscribeResource={onUnsubscribeResource}
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
index f9c28bb9b..558da51af 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { Task } from "@modelcontextprotocol/sdk/types.js";
 import { fn } from "storybook/test";
 import { TasksScreen } from "./TasksScreen";
+import { EMPTY_TASKS_UI } from "../screenUiState";
 
 const meta: Meta<typeof TasksScreen> = {
   title: "Screens/TasksScreen",
@@ -11,8 +12,8 @@ const meta: Meta<typeof TasksScreen> = {
     onRefresh: fn(),
     onClearCompleted: fn(),
     onCancel: fn(),
-    onSearchChange: fn(),
-    onStatusFilterChange: fn(),
+    ui: EMPTY_TASKS_UI,
+    onUiChange: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx
index 4082ff522..41b308bc8 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.test.tsx
@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import type { Task } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { TasksScreen } from "./TasksScreen";
+import { EMPTY_TASKS_UI } from "../screenUiState";
 
 const tasks: Task[] = [
   {
@@ -17,8 +18,8 @@ const tasks: Task[] = [
 
 const baseProps = {
   tasks,
-  onSearchChange: vi.fn(),
-  onStatusFilterChange: vi.fn(),
+  ui: EMPTY_TASKS_UI,
+  onUiChange: vi.fn(),
   onRefresh: vi.fn(),
   onClearCompleted: vi.fn(),
   onCancel: vi.fn(),
@@ -42,4 +43,34 @@ describe("TasksScreen", () => {
     await user.click(screen.getByRole("button", { name: "Refresh" }));
     expect(onRefresh).toHaveBeenCalledTimes(1);
   });
+
+  it("emits the search text through onUiChange", async () => {
+    const user = userEvent.setup();
+    const onUiChange = vi.fn();
+    renderWithMantine(<TasksScreen {...baseProps} onUiChange={onUiChange} />);
+    await user.type(screen.getByPlaceholderText("Search..."), "x");
+    expect(onUiChange).toHaveBeenCalledWith(
+      expect.objectContaining({ search: "x" }),
+    );
+  });
+
+  it("emits the cleared status filter through onUiChange", async () => {
+    const user = userEvent.setup();
+    const onUiChange = vi.fn();
+    const { container } = renderWithMantine(
+      <TasksScreen
+        {...baseProps}
+        ui={{ ...EMPTY_TASKS_UI, statusFilter: "working" }}
+        onUiChange={onUiChange}
+      />,
+    );
+    const clearButton = container.querySelector(
+      "button.mantine-InputClearButton-root",
+    ) as HTMLButtonElement | null;
+    expect(clearButton).not.toBeNull();
+    await user.click(clearButton!);
+    expect(onUiChange).toHaveBeenCalledWith(
+      expect.objectContaining({ statusFilter: undefined }),
+    );
+  });
 });
diff --git a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
index f2583e626..a027f459e 100644
--- a/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
+++ b/clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
@@ -7,17 +7,20 @@ import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
 export interface TasksScreenProps {
   tasks: Task[];
   progressByTaskId?: Record<string, TaskProgress>;
-  // Search + status filter are controlled by the parent (App) so they persist
-  // across tab navigation within a live session — see #1417.
-  searchText?: string;
-  statusFilter?: TaskStatus;
-  onSearchChange: (value: string) => void;
-  onStatusFilterChange: (value: TaskStatus | undefined) => void;
+  ui: TasksUiState;
+  onUiChange: (next: TasksUiState) => void;
   onRefresh: () => void;
   onClearCompleted: () => void;
   onCancel: (taskId: string) => void;
 }
 
+// Search + status filter — controlled by the parent (App) as one object so they
+// persist across tab navigation within a live session (#1417).
+export interface TasksUiState {
+  search: string;
+  statusFilter?: TaskStatus;
+}
+
 const ScreenLayout = Flex.withProps({
   variant: "screen",
   h: "calc(100vh - var(--app-shell-header-height, 0px))",
@@ -38,23 +41,24 @@ const SidebarCard = Card.withProps({
 export function TasksScreen({
   tasks,
   progressByTaskId,
-  searchText = "",
-  statusFilter,
-  onSearchChange,
-  onStatusFilterChange,
+  ui,
+  onUiChange,
   onRefresh,
   onClearCompleted,
   onCancel,
 }: TasksScreenProps) {
+  const { search, statusFilter } = ui;
   return (
     <ScreenLayout>
       <Sidebar>
         <SidebarCard>
           <TaskControls
-            searchText={searchText}
+            searchText={search}
             statusFilter={statusFilter}
-            onSearchChange={onSearchChange}
-            onStatusFilterChange={onStatusFilterChange}
+            onSearchChange={(value) => onUiChange({ ...ui, search: value })}
+            onStatusFilterChange={(value) =>
+              onUiChange({ ...ui, statusFilter: value })
+            }
             onRefresh={onRefresh}
           />
         </SidebarCard>
@@ -62,7 +66,7 @@ export function TasksScreen({
       <TaskListPanel
         tasks={tasks}
         progressByTaskId={progressByTaskId}
-        searchText={searchText}
+        searchText={search}
         statusFilter={statusFilter}
         onCancel={onCancel}
         onClearCompleted={onClearCompleted}
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
index a0060be26..89e1bf2f9 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
@@ -5,32 +5,21 @@ import type { ElicitRequest, Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Modal } from "@mantine/core";
 import { fn, userEvent, within } from "storybook/test";
 import { ToolsScreen } from "./ToolsScreen";
-import type { ToolCallState } from "./ToolsScreen";
+import type { ToolCallState, ToolsUiState } from "./ToolsScreen";
+import { EMPTY_TOOLS_UI } from "../screenUiState";
 import { SamplingRequestPanel } from "../../groups/SamplingRequestPanel/SamplingRequestPanel";
 import { ElicitationFormPanel } from "../../groups/ElicitationFormPanel/ElicitationFormPanel";
 import { PendingClientRequests } from "../../groups/PendingClientRequests/PendingClientRequests";
 import { InlineSamplingRequest } from "../../groups/InlineSamplingRequest/InlineSamplingRequest";
 import { InlineElicitationRequest } from "../../groups/InlineElicitationRequest/InlineElicitationRequest";
 
-// ToolsScreen is controlled (selection + form values live in the parent — see
-// #1414). This wrapper holds that state so the play-driven tool clicks still
-// drive the detail panel, mirroring how App owns the state in the real app.
+// ToolsScreen is controlled (selection + form values live in the parent as one
+// `ui` object — see #1414). This wrapper holds that state so the play-driven
+// tool clicks still drive the detail panel, mirroring how App owns the state in
+// the real app.
 function StatefulToolsScreen(args: ComponentProps<typeof ToolsScreen>) {
-  const [selectedToolName, setSelectedToolName] = useState(
-    args.selectedToolName,
-  );
-  const [formValues, setFormValues] = useState<Record<string, unknown>>(
-    args.formValues ?? {},
-  );
-  return (
-    <ToolsScreen
-      {...args}
-      selectedToolName={selectedToolName}
-      formValues={formValues}
-      onSelectTool={setSelectedToolName}
-      onFormChange={setFormValues}
-    />
-  );
+  const [ui, setUi] = useState<ToolsUiState>(args.ui ?? EMPTY_TOOLS_UI);
+  return <ToolsScreen {...args} ui={ui} onUiChange={setUi} />;
 }
 
 const meta: Meta<typeof ToolsScreen> = {
@@ -39,8 +28,8 @@ const meta: Meta<typeof ToolsScreen> = {
   parameters: { layout: "fullscreen" },
   args: {
     listChanged: false,
-    onSelectTool: fn(),
-    onFormChange: fn(),
+    ui: EMPTY_TOOLS_UI,
+    onUiChange: fn(),
     onRefreshList: fn(),
     onCallTool: fn(),
     onCancelCall: fn(),
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
index d8d09f057..569de39cc 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
@@ -3,7 +3,12 @@ import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { ToolsScreen, type ToolsScreenProps } from "./ToolsScreen";
+import {
+  ToolsScreen,
+  type ToolsScreenProps,
+  type ToolsUiState,
+} from "./ToolsScreen";
+import { EMPTY_TOOLS_UI } from "../screenUiState";
 
 const tools: Tool[] = [
   { name: "alpha", inputSchema: { type: "object" } },
@@ -20,46 +25,30 @@ const tools: Tool[] = [
 const baseProps = {
   tools,
   listChanged: false,
-  onSelectTool: vi.fn(),
-  onFormChange: vi.fn(),
-  onSearchChange: vi.fn(),
+  ui: EMPTY_TOOLS_UI,
+  onUiChange: vi.fn(),
   onRefreshList: vi.fn(),
   onCallTool: vi.fn(),
 };
 
 // ToolsScreen is controlled: selection + form values live in the parent (App)
-// so they persist across tab navigation (#1414). This host holds that state so
-// clicking a tool drives the detail panel, mirroring how App owns it. Props
-// passed in override defaults; the stateful selection/form wiring is applied
-// last so callers can still observe selections via the spied callbacks.
+// as one `ui` object so they persist across tab navigation (#1414). This host
+// holds that state so clicking a tool drives the detail panel, mirroring how
+// App owns it. Props passed in override defaults; the stateful `ui` wiring is
+// applied last so callers can still observe selections via the rendered state.
 function ControlledToolsScreen(props: Partial<ToolsScreenProps>) {
-  const [selectedToolName, setSelectedToolName] = useState<string | undefined>(
-    props.selectedToolName,
-  );
-  const [formValues, setFormValues] = useState<Record<string, unknown>>(
-    props.formValues ?? {},
-  );
-  const [searchText, setSearchText] = useState<string | undefined>(
-    props.searchText,
-  );
+  const [ui, setUi] = useState<ToolsUiState>({
+    ...EMPTY_TOOLS_UI,
+    ...props.ui,
+  });
   return (
     <ToolsScreen
       {...baseProps}
       {...props}
-      selectedToolName={selectedToolName}
-      formValues={formValues}
-      searchText={searchText}
-      onSearchChange={(value) => {
-        setSearchText(value);
-        props.onSearchChange?.(value);
-      }}
-      onSelectTool={(name) => {
-        setSelectedToolName(name);
-        props.onSelectTool?.(name);
-      }}
-      onFormChange={(values) => {
-        setFormValues(values);
-        props.onFormChange?.(values);
+      ui={ui}
+      onUiChange={(next) => {
+        setUi(next);
+        props.onUiChange?.(next);
       }}
     />
   );
@@ -83,6 +72,28 @@ describe("ToolsScreen", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("filters the sidebar list as the search text changes", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<ControlledToolsScreen />);
+    expect(screen.getByText("beta")).toBeInTheDocument();
+    await user.type(screen.getByPlaceholderText("Search tools..."), "alpha");
+    expect(screen.getByText("alpha")).toBeInTheDocument();
+    expect(screen.queryByText("beta")).not.toBeInTheDocument();
+  });
+
+  it("carries edited form values through to Execute", async () => {
+    const user = userEvent.setup();
+    const onCallTool = vi.fn();
+    renderWithMantine(<ControlledToolsScreen onCallTool={onCallTool} />);
+    await user.click(screen.getByText("gamma"));
+    // gamma seeds { mode: "fast" }; editing the field flows through onUiChange.
+    const field = screen.getByLabelText(/mode/i);
+    await user.clear(field);
+    await user.type(field, "slow");
+    await user.click(screen.getByRole("button", { name: /Execute/ }));
+    expect(onCallTool).toHaveBeenCalledWith("gamma", { mode: "slow" });
+  });
+
   it("renders selection and result from props (persisted across navigation)", () => {
     // App owns selection + result, so a remount after a tab switch re-renders
     // with both still set — the detail and result panels show without any
@@ -90,7 +101,7 @@ describe("ToolsScreen", () => {
     renderWithMantine(
       <ToolsScreen
         {...baseProps}
-        selectedToolName="alpha"
+        ui={{ ...EMPTY_TOOLS_UI, selectedToolName: "alpha" }}
         callState={{
           status: "ok",
           result: { content: [{ type: "text", text: "ok" }] },
@@ -174,7 +185,7 @@ describe("ToolsScreen", () => {
     renderWithMantine(
       <ToolsScreen
         {...baseProps}
-        selectedToolName="alpha"
+        ui={{ ...EMPTY_TOOLS_UI, selectedToolName: "alpha" }}
         callState={{ status: "pending" }}
       />,
     );
@@ -187,7 +198,7 @@ describe("ToolsScreen", () => {
     renderWithMantine(
       <ToolsScreen
         {...baseProps}
-        selectedToolName="alpha"
+        ui={{ ...EMPTY_TOOLS_UI, selectedToolName: "alpha" }}
         onCancelCall={onCancelCall}
         callState={{ status: "pending" }}
       />,
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
index e3c07dc4c..1e02262f6 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
@@ -15,19 +15,21 @@ export interface ToolCallState {
   progress?: ToolProgress;
 }
 
+// Selection, form values, and sidebar search — controlled by the parent (App)
+// as one object so they persist across tab navigation within a live session;
+// the screen unmounts on tab switch, so local state would be lost (#1414/#1417).
+export interface ToolsUiState {
+  selectedToolName?: string;
+  formValues: Record<string, unknown>;
+  search: string;
+}
+
 export interface ToolsScreenProps {
   tools: Tool[];
   callState?: ToolCallState;
-  // Selection + form values are controlled by the parent (App) so they persist
-  // across tab navigation within a live session — the screen unmounts on tab
-  // switch, so local state would be lost (#1414).
-  selectedToolName?: string;
-  formValues?: Record<string, unknown>;
-  searchText?: string;
+  ui: ToolsUiState;
   listChanged: boolean;
-  onSelectTool: (name: string) => void;
-  onFormChange: (values: Record<string, unknown>) => void;
-  onSearchChange: (value: string) => void;
+  onUiChange: (next: ToolsUiState) => void;
   onRefreshList: () => void;
   onCallTool: (name: string, args: Record<string, unknown>) => void;
   onCancelCall?: () => void;
@@ -88,25 +90,19 @@ const EmptyState = Text.withProps({
 export function ToolsScreen({
   tools,
   callState,
-  selectedToolName,
-  formValues,
-  searchText = "",
+  ui,
   listChanged,
-  onSelectTool,
-  onFormChange,
-  onSearchChange,
+  onUiChange,
   onRefreshList,
   onCallTool,
   onCancelCall,
   onClearResult,
 }: ToolsScreenProps) {
+  const { selectedToolName, formValues, search } = ui;
   const selectedTool = selectedToolName
     ? tools.find((t) => t.name === selectedToolName)
     : undefined;
   const isExecuting = callState?.status === "pending";
-  // Selection, inputs, and result all live in App now, so they persist when the
-  // user navigates away and back — no clear-on-unmount needed (#1414).
-  const values = formValues ?? {};
 
   return (
     <ScreenLayout>
@@ -115,18 +111,21 @@ export function ToolsScreen({
           <ToolControls
             tools={tools}
             selectedName={selectedToolName}
-            searchText={searchText}
+            searchText={search}
             listChanged={listChanged}
             onRefreshList={onRefreshList}
-            onSearchChange={onSearchChange}
+            onSearchChange={(value) => onUiChange({ ...ui, search: value })}
             onSelectTool={(name) => {
               // Seed the form with the tool's schema defaults so default-only
               // fields the user never edits are still sent on execute (the
               // form shows defaults via resolveValue, but onChange only writes
               // edited fields).
               const tool = tools.find((t) => t.name === name);
-              onFormChange(tool ? collectSchemaDefaults(tool.inputSchema) : {});
-              onSelectTool(name);
+              onUiChange({
+                ...ui,
+                selectedToolName: name,
+                formValues: tool ? collectSchemaDefaults(tool.inputSchema) : {},
+              });
             }}
           />
         </SidebarCard>
@@ -137,11 +136,13 @@ export function ToolsScreen({
           {selectedTool ? (
             <ToolDetailPanel
               tool={selectedTool}
-              formValues={values}
+              formValues={formValues}
               isExecuting={isExecuting}
               progress={callState?.progress}
-              onFormChange={onFormChange}
-              onExecute={() => onCallTool(selectedTool.name, values)}
+              onFormChange={(values) =>
+                onUiChange({ ...ui, formValues: values })
+              }
+              onExecute={() => onCallTool(selectedTool.name, formValues)}
               onCancel={() => onCancelCall?.()}
             />
           ) : (
diff --git a/clients/web/src/components/screens/screenUiState.ts b/clients/web/src/components/screens/screenUiState.ts
new file mode 100644
index 000000000..82ef2afe9
--- /dev/null
+++ b/clients/web/src/components/screens/screenUiState.ts
@@ -0,0 +1,62 @@
+// Empty-state defaults for each screen's lifted `ui` object — the value App
+// seeds its per-screen UI state with and resets to on disconnect (#1417). The
+// `*UiState` interfaces live alongside their screens; the defaults are gathered
+// here (a non-component module) so the screen files can keep a single component
+// export under the react-refresh rule, mirroring logLevels.ts / fetchCategories.ts.
+import type { ToolsUiState } from "./ToolsScreen/ToolsScreen";
+import type { PromptsUiState } from "./PromptsScreen/PromptsScreen";
+import type { ResourcesUiState } from "./ResourcesScreen/ResourcesScreen";
+import type { AppsUiState } from "./AppsScreen/AppsScreen";
+import type { TasksUiState } from "./TasksScreen/TasksScreen";
+import type { LogsUiState } from "./LoggingScreen/LoggingScreen";
+import type { HistoryUiState } from "./HistoryScreen/HistoryScreen";
+import type { NetworkUiState } from "./NetworkScreen/NetworkScreen";
+import { ALL_LEVELS_VISIBLE } from "./LoggingScreen/logLevels";
+import { ALL_CATEGORIES_VISIBLE } from "./NetworkScreen/fetchCategories";
+
+export const EMPTY_TOOLS_UI: ToolsUiState = {
+  selectedToolName: undefined,
+  formValues: {},
+  search: "",
+};
+
+export const EMPTY_PROMPTS_UI: PromptsUiState = {
+  selectedPromptName: undefined,
+  argumentValues: {},
+  submittedFor: undefined,
+  search: "",
+};
+
+export const EMPTY_RESOURCES_UI: ResourcesUiState = {
+  selectedResourceUri: undefined,
+  selectedTemplateUri: undefined,
+  originatingTemplateUri: undefined,
+  search: "",
+  openSections: undefined,
+};
+
+export const EMPTY_APPS_UI: AppsUiState = {
+  selectedAppName: undefined,
+  formValues: {},
+  search: "",
+};
+
+export const EMPTY_TASKS_UI: TasksUiState = {
+  search: "",
+  statusFilter: undefined,
+};
+
+export const EMPTY_LOGS_UI: LogsUiState = {
+  filterText: "",
+  visibleLevels: ALL_LEVELS_VISIBLE,
+};
+
+export const EMPTY_HISTORY_UI: HistoryUiState = {
+  search: "",
+  methodFilter: undefined,
+};
+
+export const EMPTY_NETWORK_UI: NetworkUiState = {
+  filterText: "",
+  visibleCategories: ALL_CATEGORIES_VISIBLE,
+};
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
index 756f4cba8..aadd0e933 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
@@ -16,6 +16,16 @@ import type {
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { InspectorView } from "./InspectorView";
+import {
+  EMPTY_TOOLS_UI,
+  EMPTY_APPS_UI,
+  EMPTY_PROMPTS_UI,
+  EMPTY_RESOURCES_UI,
+  EMPTY_TASKS_UI,
+  EMPTY_LOGS_UI,
+  EMPTY_HISTORY_UI,
+  EMPTY_NETWORK_UI,
+} from "../../screens/screenUiState";
 import { mixedEntries as demoLogs } from "../../screens/LoggingScreen/LoggingScreen.fixtures";
 import { longToolList as demoRegularTools } from "../../screens/ToolsScreen/ToolsScreen.fixtures";
 import { SUN_ICON_SVG } from "../../../test/fixtures/storyIcons";
@@ -321,6 +331,16 @@ const meta: Meta<typeof InspectorView> = {
     bridgeFactory: noopBridgeFactory,
     appRendererRef: { current: null },
 
+    // Per-screen UI state (search / filter / selection), one object per screen.
+    toolsUi: EMPTY_TOOLS_UI,
+    promptsUi: EMPTY_PROMPTS_UI,
+    resourcesUi: EMPTY_RESOURCES_UI,
+    appsUi: EMPTY_APPS_UI,
+    tasksUi: EMPTY_TASKS_UI,
+    logsUi: EMPTY_LOGS_UI,
+    historyUi: EMPTY_HISTORY_UI,
+    networkUi: EMPTY_NETWORK_UI,
+
     // Callbacks — all wired to storybook spies so play functions can assert
     // on dispatch. Real wiring routes these to InspectorClient methods (the
     // app shell at clients/web/src/App.tsx).
@@ -336,49 +356,34 @@ const meta: Meta<typeof InspectorView> = {
     onServerEdit: fn(),
     onServerClone: fn(),
     onServerRemove: fn(),
-    onSelectTool: fn(),
-    onToolFormChange: fn(),
-    onToolSearchChange: fn(),
+    onToolsUiChange: fn(),
     onCallTool: fn(),
     onRefreshTools: fn(),
-    onSelectedPromptNameChange: fn(),
-    onPromptArgumentValuesChange: fn(),
-    onPromptSubmittedForChange: fn(),
-    onPromptSearchChange: fn(),
+    onPromptsUiChange: fn(),
     onGetPrompt: fn(),
     onRefreshPrompts: fn(),
-    onSelectedResourceUriChange: fn(),
-    onSelectedTemplateUriChange: fn(),
-    onOriginatingTemplateUriChange: fn(),
-    onResourceSearchChange: fn(),
-    onResourceOpenSectionsChange: fn(),
+    onResourcesUiChange: fn(),
     onReadResource: fn(),
     onSubscribeResource: fn(),
     onUnsubscribeResource: fn(),
     onRefreshResources: fn(),
-    onTaskSearchChange: fn(),
-    onTaskStatusFilterChange: fn(),
+    onTasksUiChange: fn(),
     onCancelTask: fn(),
     onClearCompletedTasks: fn(),
     onRefreshTasks: fn(),
     onSetLogLevel: fn(),
-    onLogFilterChange: fn(),
-    onLogVisibleLevelsChange: fn(),
+    onLogsUiChange: fn(),
     onClearLogs: fn(),
     onExportLogs: fn(),
-    onHistorySearchChange: fn(),
-    onHistoryMethodFilterChange: fn(),
+    onHistoryUiChange: fn(),
     onClearHistory: fn(),
     onExportHistory: fn(),
     onReplayHistory: fn(),
     onTogglePinHistory: fn(),
-    onNetworkFilterChange: fn(),
-    onNetworkVisibleCategoriesChange: fn(),
+    onNetworkUiChange: fn(),
     onClearNetwork: fn(),
     onExportNetwork: fn(),
-    onSelectedAppNameChange: fn(),
-    onAppFormValuesChange: fn(),
-    onAppSearchChange: fn(),
+    onAppsUiChange: fn(),
     onSelectApp: fn(),
     onOpenApp: fn(),
     onCloseApp: fn(),
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index 5edad2067..db526455f 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -14,6 +14,17 @@ import {
 } from "../../../test/renderWithMantine";
 import { InspectorView, type InspectorViewProps } from "./InspectorView";
 import type { BridgeFactory } from "../../elements/AppRenderer/AppRenderer";
+import type { AppsUiState } from "../../screens/AppsScreen/AppsScreen";
+import {
+  EMPTY_TOOLS_UI,
+  EMPTY_APPS_UI,
+  EMPTY_PROMPTS_UI,
+  EMPTY_RESOURCES_UI,
+  EMPTY_TASKS_UI,
+  EMPTY_LOGS_UI,
+  EMPTY_HISTORY_UI,
+  EMPTY_NETWORK_UI,
+} from "../../screens/screenUiState";
 
 // Stub bridge factory — AppsScreen mounts the inner iframe and invokes
 // `bridgeFactory(...)` on selection. The stub keeps that path quiet by
@@ -54,6 +65,14 @@ function makeProps(
     sandboxPath: "about:blank",
     bridgeFactory: noopBridgeFactory,
     appRendererRef: { current: null },
+    toolsUi: EMPTY_TOOLS_UI,
+    promptsUi: EMPTY_PROMPTS_UI,
+    resourcesUi: EMPTY_RESOURCES_UI,
+    appsUi: EMPTY_APPS_UI,
+    tasksUi: EMPTY_TASKS_UI,
+    logsUi: EMPTY_LOGS_UI,
+    historyUi: EMPTY_HISTORY_UI,
+    networkUi: EMPTY_NETWORK_UI,
     onToggleTheme: vi.fn(),
     onToggleConnection: vi.fn(),
     onDisconnect: vi.fn(),
@@ -66,49 +85,34 @@ function makeProps(
     onServerEdit: vi.fn(),
     onServerClone: vi.fn(),
     onServerRemove: vi.fn(),
-    onSelectTool: vi.fn(),
-    onToolFormChange: vi.fn(),
-    onToolSearchChange: vi.fn(),
+    onToolsUiChange: vi.fn(),
     onCallTool: vi.fn(),
     onRefreshTools: vi.fn(),
-    onSelectedPromptNameChange: vi.fn(),
-    onPromptArgumentValuesChange: vi.fn(),
-    onPromptSubmittedForChange: vi.fn(),
-    onPromptSearchChange: vi.fn(),
+    onPromptsUiChange: vi.fn(),
     onGetPrompt: vi.fn(),
     onRefreshPrompts: vi.fn(),
-    onSelectedResourceUriChange: vi.fn(),
-    onSelectedTemplateUriChange: vi.fn(),
-    onOriginatingTemplateUriChange: vi.fn(),
-    onResourceSearchChange: vi.fn(),
-    onResourceOpenSectionsChange: vi.fn(),
+    onResourcesUiChange: vi.fn(),
     onReadResource: vi.fn(),
     onSubscribeResource: vi.fn(),
     onUnsubscribeResource: vi.fn(),
     onRefreshResources: vi.fn(),
-    onTaskSearchChange: vi.fn(),
-    onTaskStatusFilterChange: vi.fn(),
+    onTasksUiChange: vi.fn(),
     onCancelTask: vi.fn(),
     onClearCompletedTasks: vi.fn(),
     onRefreshTasks: vi.fn(),
     onSetLogLevel: vi.fn(),
-    onLogFilterChange: vi.fn(),
-    onLogVisibleLevelsChange: vi.fn(),
+    onLogsUiChange: vi.fn(),
     onClearLogs: vi.fn(),
     onExportLogs: vi.fn(),
-    onHistorySearchChange: vi.fn(),
-    onHistoryMethodFilterChange: vi.fn(),
+    onHistoryUiChange: vi.fn(),
     onClearHistory: vi.fn(),
     onExportHistory: vi.fn(),
     onReplayHistory: vi.fn(),
     onTogglePinHistory: vi.fn(),
-    onNetworkFilterChange: vi.fn(),
-    onNetworkVisibleCategoriesChange: vi.fn(),
+    onNetworkUiChange: vi.fn(),
     onClearNetwork: vi.fn(),
     onExportNetwork: vi.fn(),
-    onSelectedAppNameChange: vi.fn(),
-    onAppFormValuesChange: vi.fn(),
-    onAppSearchChange: vi.fn(),
+    onAppsUiChange: vi.fn(),
     onSelectApp: vi.fn(),
     onOpenApp: vi.fn(),
     onCloseApp: vi.fn(),
@@ -124,18 +128,11 @@ function makeProps(
 // (#1417). This host holds the App-tab selection/form state and threads it back
 // in as controlled props, mirroring how App.tsx owns it in the real wiring.
 function StatefulInspectorView({ props }: { props: InspectorViewProps }) {
-  const [selectedAppName, setSelectedAppName] = useState(props.selectedAppName);
-  const [appFormValues, setAppFormValues] = useState<Record<string, unknown>>(
-    props.appFormValues ?? {},
+  const [appsUi, setAppsUi] = useState<AppsUiState>(
+    props.appsUi ?? EMPTY_APPS_UI,
   );
   return (
-    <InspectorView
-      {...props}
-      selectedAppName={selectedAppName}
-      appFormValues={appFormValues}
-      onSelectedAppNameChange={setSelectedAppName}
-      onAppFormValuesChange={setAppFormValues}
-    />
+    <InspectorView {...props} appsUi={appsUi} onAppsUiChange={setAppsUi} />
   );
 }
 
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 3ec3d02f9..ecbe7a99d 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -8,16 +8,13 @@ import type {
   Resource,
   ResourceTemplate,
   Task,
-  TaskStatus,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import type {
   ConnectionStatus,
-  FetchRequestCategory,
   FetchRequestEntry,
   InspectorResourceSubscription,
   MessageEntry,
-  MessageMethod,
   ServerEntry,
 } from "@inspector/core/mcp/types.js";
 import { isAppTool } from "@inspector/core/mcp/apps.js";
@@ -26,8 +23,12 @@ import { ServerListScreen } from "../../screens/ServerListScreen/ServerListScree
 import {
   ToolsScreen,
   type ToolCallState,
+  type ToolsUiState,
 } from "../../screens/ToolsScreen/ToolsScreen";
-import { AppsScreen } from "../../screens/AppsScreen/AppsScreen";
+import {
+  AppsScreen,
+  type AppsUiState,
+} from "../../screens/AppsScreen/AppsScreen";
 import type {
   AppRendererHandle,
   BridgeFactory,
@@ -35,17 +36,31 @@ import type {
 import {
   PromptsScreen,
   type GetPromptState,
+  type PromptsUiState,
 } from "../../screens/PromptsScreen/PromptsScreen";
 import {
   ResourcesScreen,
   type ReadResourceState,
+  type ResourcesUiState,
 } from "../../screens/ResourcesScreen/ResourcesScreen";
-import { LoggingScreen } from "../../screens/LoggingScreen/LoggingScreen";
+import {
+  LoggingScreen,
+  type LogsUiState,
+} from "../../screens/LoggingScreen/LoggingScreen";
 import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
-import { TasksScreen } from "../../screens/TasksScreen/TasksScreen";
+import {
+  TasksScreen,
+  type TasksUiState,
+} from "../../screens/TasksScreen/TasksScreen";
 import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
-import { HistoryScreen } from "../../screens/HistoryScreen/HistoryScreen";
-import { NetworkScreen } from "../../screens/NetworkScreen/NetworkScreen";
+import {
+  HistoryScreen,
+  type HistoryUiState,
+} from "../../screens/HistoryScreen/HistoryScreen";
+import {
+  NetworkScreen,
+  type NetworkUiState,
+} from "../../screens/NetworkScreen/NetworkScreen";
 import type { SortDirection } from "../../elements/SortToggle/SortToggle";
 import { getServerType } from "@inspector/core/mcp/config.js";
 
@@ -198,40 +213,18 @@ export interface InspectorViewProps {
   getPromptState?: GetPromptState;
   readResourceState?: ReadResourceState;
 
-  // Per-screen selection / search / filter state. Owned by the parent (App) so
-  // it persists across tab navigation within a live session — the screens
-  // unmount on tab switch, so screen-local state would be lost (#1417).
-  // Tools:
-  selectedToolName?: string;
-  toolFormValues?: Record<string, unknown>;
-  toolSearch?: string;
-  // Prompts:
-  selectedPromptName?: string;
-  promptArgumentValues?: Record<string, string>;
-  promptSubmittedFor?: string;
-  promptSearch?: string;
-  // Resources:
-  selectedResourceUri?: string;
-  selectedTemplateUri?: string;
-  originatingTemplateUri?: string;
-  resourceSearch?: string;
-  resourceOpenSections?: string[];
-  // Apps:
-  selectedAppName?: string;
-  appFormValues?: Record<string, unknown>;
-  appSearch?: string;
-  // Tasks:
-  taskSearch?: string;
-  taskStatusFilter?: TaskStatus;
-  // Logs:
-  logFilterText?: string;
-  logVisibleLevels?: Record<LoggingLevel, boolean>;
-  // History:
-  historySearch?: string;
-  historyMethodFilter?: MessageMethod;
-  // Network:
-  networkFilterText?: string;
-  networkVisibleCategories?: Record<FetchRequestCategory, boolean>;
+  // Per-screen selection / search / filter state, one object per screen. Owned
+  // by the parent (App) so it persists across tab navigation within a live
+  // session — the screens unmount on tab switch, so screen-local state would be
+  // lost (#1417). Each is paired with an `on{Screen}UiChange` setter below.
+  toolsUi: ToolsUiState;
+  promptsUi: PromptsUiState;
+  resourcesUi: ResourcesUiState;
+  appsUi: AppsUiState;
+  tasksUi: TasksUiState;
+  logsUi: LogsUiState;
+  historyUi: HistoryUiState;
+  networkUi: NetworkUiState;
 
   // Logging level. The MCP `logging/setLevel` request has no echo
   // notification, so the parent keeps the optimistic current value.
@@ -270,28 +263,19 @@ export interface InspectorViewProps {
   onServerRemove: (id: string) => void;
 
   // Per-primitive actions (route to `inspectorClient` methods / hook refresh).
-  // The `on*Change` callbacks below persist the lifted per-screen state (#1417).
-  onSelectTool: (name: string) => void;
-  onToolFormChange: (values: Record<string, unknown>) => void;
-  onToolSearchChange: (value: string) => void;
+  // Each `on{Screen}UiChange` persists that screen's lifted UI state (#1417).
+  onToolsUiChange: (next: ToolsUiState) => void;
   onCallTool: (name: string, args: Record<string, unknown>) => void;
   onCancelToolCall?: () => void;
   onClearToolResult?: () => void;
   onRefreshTools: () => void;
 
-  onSelectedPromptNameChange: (value: string | undefined) => void;
-  onPromptArgumentValuesChange: (value: Record<string, string>) => void;
-  onPromptSubmittedForChange: (value: string | undefined) => void;
-  onPromptSearchChange: (value: string) => void;
+  onPromptsUiChange: (next: PromptsUiState) => void;
   onGetPrompt: (name: string, args: Record<string, string>) => void;
   onCopyPromptMessages?: () => void;
   onRefreshPrompts: () => void;
 
-  onSelectedResourceUriChange: (value: string | undefined) => void;
-  onSelectedTemplateUriChange: (value: string | undefined) => void;
-  onOriginatingTemplateUriChange: (value: string | undefined) => void;
-  onResourceSearchChange: (value: string) => void;
-  onResourceOpenSectionsChange: (value: string[]) => void;
+  onResourcesUiChange: (next: ResourcesUiState) => void;
   onReadResource: (uri: string) => void;
   onSubscribeResource: (uri: string) => void;
   onUnsubscribeResource: (uri: string) => void;
@@ -306,35 +290,27 @@ export interface InspectorViewProps {
   ) => Promise<string[]>;
   completionsSupported?: boolean;
 
-  onTaskSearchChange: (value: string) => void;
-  onTaskStatusFilterChange: (value: TaskStatus | undefined) => void;
+  onTasksUiChange: (next: TasksUiState) => void;
   onCancelTask: (taskId: string) => void;
   onClearCompletedTasks: () => void;
   onRefreshTasks: () => void;
 
   onSetLogLevel: (level: LoggingLevel) => void;
-  onLogFilterChange: (value: string) => void;
-  onLogVisibleLevelsChange: (value: Record<LoggingLevel, boolean>) => void;
+  onLogsUiChange: (next: LogsUiState) => void;
   onClearLogs: () => void;
   onExportLogs: () => void;
 
-  onHistorySearchChange: (value: string) => void;
-  onHistoryMethodFilterChange: (value: MessageMethod | undefined) => void;
+  onHistoryUiChange: (next: HistoryUiState) => void;
   onClearHistory: () => void;
   onExportHistory: () => void;
   onReplayHistory: (id: string) => void;
   onTogglePinHistory: (id: string) => void;
 
-  onNetworkFilterChange: (value: string) => void;
-  onNetworkVisibleCategoriesChange: (
-    value: Record<FetchRequestCategory, boolean>,
-  ) => void;
+  onNetworkUiChange: (next: NetworkUiState) => void;
   onClearNetwork: () => void;
   onExportNetwork: () => void;
 
-  onSelectedAppNameChange: (value: string | undefined) => void;
-  onAppFormValuesChange: (values: Record<string, unknown>) => void;
-  onAppSearchChange: (value: string) => void;
+  onAppsUiChange: (next: AppsUiState) => void;
   onSelectApp: (name: string) => void;
   onOpenApp: (name: string, args: Record<string, unknown>) => void;
   onCloseApp: () => void;
@@ -361,29 +337,14 @@ export function InspectorView({
   toolCallState,
   getPromptState,
   readResourceState,
-  selectedToolName,
-  toolFormValues,
-  toolSearch,
-  selectedPromptName,
-  promptArgumentValues,
-  promptSubmittedFor,
-  promptSearch,
-  selectedResourceUri,
-  selectedTemplateUri,
-  originatingTemplateUri,
-  resourceSearch,
-  resourceOpenSections,
-  selectedAppName,
-  appFormValues,
-  appSearch,
-  taskSearch,
-  taskStatusFilter,
-  logFilterText,
-  logVisibleLevels,
-  historySearch,
-  historyMethodFilter,
-  networkFilterText,
-  networkVisibleCategories,
+  toolsUi,
+  promptsUi,
+  resourcesUi,
+  appsUi,
+  tasksUi,
+  logsUi,
+  historyUi,
+  networkUi,
   currentLogLevel,
   sandboxPath,
   bridgeFactory,
@@ -401,54 +362,39 @@ export function InspectorView({
   onServerEdit,
   onServerClone,
   onServerRemove,
-  onSelectTool,
-  onToolFormChange,
-  onToolSearchChange,
+  onToolsUiChange,
   onCallTool,
   onCancelToolCall,
   onClearToolResult,
   onRefreshTools,
-  onSelectedPromptNameChange,
-  onPromptArgumentValuesChange,
-  onPromptSubmittedForChange,
-  onPromptSearchChange,
+  onPromptsUiChange,
   onGetPrompt,
   onCopyPromptMessages,
   onRefreshPrompts,
-  onSelectedResourceUriChange,
-  onSelectedTemplateUriChange,
-  onOriginatingTemplateUriChange,
-  onResourceSearchChange,
-  onResourceOpenSectionsChange,
+  onResourcesUiChange,
   onReadResource,
   onSubscribeResource,
   onUnsubscribeResource,
   onRefreshResources,
   onCompleteArgument,
   completionsSupported,
-  onTaskSearchChange,
-  onTaskStatusFilterChange,
+  onTasksUiChange,
   onCancelTask,
   onClearCompletedTasks,
   onRefreshTasks,
   onSetLogLevel,
-  onLogFilterChange,
-  onLogVisibleLevelsChange,
+  onLogsUiChange,
   onClearLogs,
   onExportLogs,
-  onHistorySearchChange,
-  onHistoryMethodFilterChange,
+  onHistoryUiChange,
   onClearHistory,
   onExportHistory,
   onReplayHistory,
   onTogglePinHistory,
-  onNetworkFilterChange,
-  onNetworkVisibleCategoriesChange,
+  onNetworkUiChange,
   onClearNetwork,
   onExportNetwork,
-  onSelectedAppNameChange,
-  onAppFormValuesChange,
-  onAppSearchChange,
+  onAppsUiChange,
   onSelectApp,
   onOpenApp,
   onCloseApp,
@@ -576,13 +522,9 @@ export function InspectorView({
             <ToolsScreen
               tools={tools}
               callState={toolCallState}
-              selectedToolName={selectedToolName}
-              formValues={toolFormValues}
-              searchText={toolSearch}
+              ui={toolsUi}
               listChanged={false}
-              onSelectTool={onSelectTool}
-              onFormChange={onToolFormChange}
-              onSearchChange={onToolSearchChange}
+              onUiChange={onToolsUiChange}
               onRefreshList={onRefreshTools}
               onCallTool={onCallTool}
               onCancelCall={onCancelToolCall}
@@ -596,12 +538,8 @@ export function InspectorView({
               sandboxPath={sandboxPath}
               bridgeFactory={bridgeFactory}
               rendererRef={appRendererRef}
-              selectedAppName={selectedAppName}
-              formValues={appFormValues}
-              searchText={appSearch}
-              onSelectedAppNameChange={onSelectedAppNameChange}
-              onFormValuesChange={onAppFormValuesChange}
-              onSearchChange={onAppSearchChange}
+              ui={appsUi}
+              onUiChange={onAppsUiChange}
               onRefreshList={onRefreshApps}
               onSelectApp={onSelectApp}
               onOpenApp={onOpenApp}
@@ -613,16 +551,10 @@ export function InspectorView({
             <PromptsScreen
               prompts={prompts}
               getPromptState={getPromptState}
-              selectedPromptName={selectedPromptName}
-              argumentValues={promptArgumentValues}
-              submittedFor={promptSubmittedFor}
-              searchText={promptSearch}
+              ui={promptsUi}
               listChanged={false}
               completionsSupported={completionsSupported}
-              onSelectedPromptNameChange={onSelectedPromptNameChange}
-              onArgumentValuesChange={onPromptArgumentValuesChange}
-              onSubmittedForChange={onPromptSubmittedForChange}
-              onSearchChange={onPromptSearchChange}
+              onUiChange={onPromptsUiChange}
               onRefreshList={onRefreshPrompts}
               onGetPrompt={onGetPrompt}
               onCopyMessages={onCopyPromptMessages}
@@ -635,18 +567,10 @@ export function InspectorView({
               templates={resourceTemplates}
               subscriptions={subscriptions}
               readState={readResourceState}
-              selectedResourceUri={selectedResourceUri}
-              selectedTemplateUri={selectedTemplateUri}
-              originatingTemplateUri={originatingTemplateUri}
-              searchText={resourceSearch}
-              openSections={resourceOpenSections}
+              ui={resourcesUi}
               listChanged={false}
               completionsSupported={completionsSupported}
-              onSelectedResourceUriChange={onSelectedResourceUriChange}
-              onSelectedTemplateUriChange={onSelectedTemplateUriChange}
-              onOriginatingTemplateUriChange={onOriginatingTemplateUriChange}
-              onSearchChange={onResourceSearchChange}
-              onOpenSectionsChange={onResourceOpenSectionsChange}
+              onUiChange={onResourcesUiChange}
               onRefreshList={onRefreshResources}
               onReadResource={onReadResource}
               onSubscribeResource={onSubscribeResource}
@@ -660,10 +584,8 @@ export function InspectorView({
             <TasksScreen
               tasks={tasks}
               progressByTaskId={progressByTaskId}
-              searchText={taskSearch}
-              statusFilter={taskStatusFilter}
-              onSearchChange={onTaskSearchChange}
-              onStatusFilterChange={onTaskStatusFilterChange}
+              ui={tasksUi}
+              onUiChange={onTasksUiChange}
               onRefresh={onRefreshTasks}
               onClearCompleted={onClearCompletedTasks}
               onCancel={onCancelTask}
@@ -673,10 +595,8 @@ export function InspectorView({
             <LoggingScreen
               entries={logs}
               currentLevel={currentLogLevel}
-              filterText={logFilterText}
-              visibleLevels={logVisibleLevels}
-              onFilterChange={onLogFilterChange}
-              onVisibleLevelsChange={onLogVisibleLevelsChange}
+              ui={logsUi}
+              onUiChange={onLogsUiChange}
               onSetLevel={onSetLogLevel}
               onClear={onClearLogs}
               onExport={onExportLogs}
@@ -688,10 +608,8 @@ export function InspectorView({
             <HistoryScreen
               entries={history}
               pinnedIds={pinnedHistoryIds ?? new Set()}
-              searchText={historySearch}
-              methodFilter={historyMethodFilter}
-              onSearchChange={onHistorySearchChange}
-              onMethodFilterChange={onHistoryMethodFilterChange}
+              ui={historyUi}
+              onUiChange={onHistoryUiChange}
               onClearAll={onClearHistory}
               onExport={onExportHistory}
               onReplay={onReplayHistory}
@@ -705,10 +623,8 @@ export function InspectorView({
           <ScreenStage active={activeTab === "Network"}>
             <NetworkScreen
               entries={network}
-              filterText={networkFilterText}
-              visibleCategories={networkVisibleCategories}
-              onFilterChange={onNetworkFilterChange}
-              onVisibleCategoriesChange={onNetworkVisibleCategoriesChange}
+              ui={networkUi}
+              onUiChange={onNetworkUiChange}
               onClear={onClearNetwork}
               onExport={onExportNetwork}
               sortDirection={networkSort}

From dc8549eec9cf36bf6a6288f57d7388c9e163f5cc Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 3 Jun 2026 09:10:33 -0400
Subject: [PATCH 5/6] fix(web): dismiss visible progress toasts on client
 teardown (#1414 review)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 clients/web/src/App.test.tsx | 24 ++++++++++++++++++++++++
 clients/web/src/App.tsx      |  9 +++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/clients/web/src/App.test.tsx b/clients/web/src/App.test.tsx
index d872a9229..4de6f2af1 100644
--- a/clients/web/src/App.test.tsx
+++ b/clients/web/src/App.test.tsx
@@ -394,6 +394,7 @@ describe("App tool progress toasts", () => {
     clientInstances.length = 0;
     notificationsMock.show.mockClear();
     notificationsMock.update.mockClear();
+    notificationsMock.hide.mockClear();
   });
 
   it("shows a toast on the first progress tick and updates it on later ticks", async () => {
@@ -448,6 +449,29 @@ describe("App tool progress toasts", () => {
     });
     expect(notificationsMock.show.mock.calls[0][0].message).toBe("7");
   });
+
+  it("dismisses still-visible progress toasts when the client is torn down", async () => {
+    const user = userEvent.setup();
+    const { unmount } = renderWithMantine(<App />);
+
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("progressNotification", {
+          detail: { progress: 1, total: 4 },
+        }),
+      );
+    });
+    const id = notificationsMock.show.mock.calls[0][0].id;
+
+    // Tearing down the client (here via unmount; same path as a server swap)
+    // hides the live toast so it can't linger into — or race with — the next
+    // session, rather than waiting out its auto-close window.
+    unmount();
+    expect(notificationsMock.hide).toHaveBeenCalledWith(id);
+  });
 });
 
 describe("App pending server-initiated request modal", () => {
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 28753d6c0..00ae6b1e7 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -556,8 +556,13 @@ function App() {
     inspectorClient.addEventListener("progressNotification", onProgress);
     return () => {
       inspectorClient.removeEventListener("progressNotification", onProgress);
-      // Drop stream bookkeeping when the client is swapped out; the next
-      // session starts with no live progress toasts tracked.
+      // 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]);

From 7fb8354923dddfcdc6166004352caea4da4b567b Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 3 Jun 2026 10:57:41 -0400
Subject: [PATCH 6/6] 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>
---
 clients/web/src/App.test.tsx | 59 ++++++++++++++++++++++++++++++++++++
 clients/web/src/App.tsx      | 24 +++++++++++++--
 2 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/clients/web/src/App.test.tsx b/clients/web/src/App.test.tsx
index 4de6f2af1..c66cb03bf 100644
--- a/clients/web/src/App.test.tsx
+++ b/clients/web/src/App.test.tsx
@@ -260,6 +260,18 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
       >
         select-tool
       </button>
+      <button
+        onClick={() =>
+          props.onToolsUiChange({
+            formValues: {},
+            search: "",
+            ...props.toolsUi,
+            selectedToolName: "other_tool",
+          })
+        }
+      >
+        select-other-tool
+      </button>
       <button
         onClick={() =>
           props.onToolsUiChange({
@@ -387,6 +399,53 @@ describe("App session-scoped state reset on disconnect", () => {
       expect(screen.getByTestId("selected-tool")).toHaveTextContent("get_acts"),
     );
   });
+
+  it("drops the previous tool's result when a different tool is selected", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    // Select a tool and run it so the result panel is populated.
+    await user.click(screen.getByText("select-tool"));
+    await user.click(screen.getByText("call"));
+    await waitFor(() =>
+      expect(screen.getByTestId("tool-status")).toHaveTextContent("ok"),
+    );
+
+    // Selecting a *different* tool clears the stale result so it doesn't linger
+    // under the new selection.
+    await user.click(screen.getByText("select-other-tool"));
+    await waitFor(() => {
+      expect(screen.getByTestId("selected-tool")).toHaveTextContent(
+        "other_tool",
+      );
+      expect(screen.getByTestId("tool-status")).toHaveTextContent("none");
+    });
+  });
+
+  it("keeps the result when the same tool stays selected (search/form edits)", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    await user.click(screen.getByText("select-tool"));
+    await user.click(screen.getByText("call"));
+    await waitFor(() =>
+      expect(screen.getByTestId("tool-status")).toHaveTextContent("ok"),
+    );
+
+    // A search keystroke leaves `selectedToolName` unchanged, so the result
+    // stays put.
+    await user.click(screen.getByText("set-tool-search"));
+    await waitFor(() =>
+      expect(screen.getByTestId("tool-search")).toHaveTextContent("act"),
+    );
+    expect(screen.getByTestId("tool-status")).toHaveTextContent("ok");
+  });
 });
 
 describe("App tool progress toasts", () => {
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index 00ae6b1e7..dbbd8ad29 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -65,7 +65,10 @@ 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 {
@@ -1058,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. ---
@@ -1584,7 +1604,7 @@ function App() {
           const target = servers.find((s) => s.id === id);
           if (target) setRemoveTarget(target);
         }}
-        onToolsUiChange={setToolsUi}
+        onToolsUiChange={onToolsUiChange}
         onCallTool={(name, args) => {
           void onCallTool(name, args);
         }}