From ed6eda7492131787d42e45b77bd21103231da6f4 Mon Sep 17 00:00:00 2001
From: Cliff Hall <cliff@futurescale.com>
Date: Thu, 4 Jun 2026 08:49:47 -0400
Subject: [PATCH] =?UTF-8?q?feat(web):=20wire=20up=20MCP=20task=20support?=
 =?UTF-8?q?=20=E2=80=94=20Tasks=20screen,=20Run-as-task,=20status=20toasts?=
 =?UTF-8?q?=20(#1422)=20(#1424)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wires the ported Tasks screen + core task subsystem through App.tsx: sticky Clear Completed, cancel/refresh error toasts, core-side per-task progress correlation, Run-as-task on the Tools screen (gated on server support), per-server Task TTL, and live task-status toasts.
---
 clients/web/src/App.test.tsx                  | 260 ++++++++++++++++-
 clients/web/src/App.tsx                       | 264 ++++++++++++++++--
 .../ServerSettingsForm.stories.tsx            |   2 +
 .../ServerSettingsForm.test.tsx               |  32 +++
 .../ServerSettingsForm/ServerSettingsForm.tsx |  11 +-
 .../ServerSettingsModal.stories.tsx           |   2 +
 .../ServerSettingsModal.test.tsx              |   2 +
 .../ServerSettingsModal.tsx                   |   2 +-
 .../ToolDetailPanel.stories.tsx               |  45 +++
 .../ToolDetailPanel/ToolDetailPanel.test.tsx  | 143 ++++++++++
 .../ToolDetailPanel/ToolDetailPanel.tsx       |  57 +++-
 .../ToolsScreen/ToolsScreen.stories.tsx       |   1 +
 .../screens/ToolsScreen/ToolsScreen.test.tsx  |   7 +-
 .../screens/ToolsScreen/ToolsScreen.tsx       |  24 +-
 .../src/components/screens/screenUiState.ts   |   1 +
 .../InspectorView/InspectorView.stories.tsx   |   1 +
 .../InspectorView/InspectorView.test.tsx      |   1 +
 .../views/InspectorView/InspectorView.tsx     |  10 +-
 .../mcp/remote/remoteClientTransport.test.ts  |   1 +
 .../web/src/test/core/mcp/serverList.test.ts  |   5 +
 .../state/managedRequestorTasksState.test.ts  |  97 +++++++
 .../react/useManagedRequestorTasks.test.tsx   |  29 ++
 .../src/test/core/react/useServers.test.tsx   |   6 +
 .../integration/mcp/inspectorClient.test.ts   |  70 +++++
 .../integration/mcp/node/transport.test.ts    |   3 +
 .../integration/mcp/remote/transport.test.ts  |   1 +
 core/mcp/inspectorClient.ts                   |  37 ++-
 core/mcp/inspectorClientEventTarget.ts        |   7 +
 core/mcp/remote/node/server.ts                |  25 ++
 core/mcp/serverList.ts                        |  20 +-
 core/mcp/state/managedRequestorTasksState.ts  |  49 +++-
 core/mcp/types.ts                             |  10 +
 core/react/useManagedRequestorTasks.ts        |   7 +-
 33 files changed, 1192 insertions(+), 40 deletions(-)

diff --git a/clients/web/src/App.test.tsx b/clients/web/src/App.test.tsx
index c66cb03b..75faad77 100644
--- a/clients/web/src/App.test.tsx
+++ b/clients/web/src/App.test.tsx
@@ -41,6 +41,10 @@ vi.mock("@inspector/core/mcp/index.js", () => {
     callTool = vi
       .fn()
       .mockResolvedValue({ success: true, result: { acts: [] } });
+    callToolStream = vi
+      .fn()
+      .mockResolvedValue({ success: true, result: { acts: [] } });
+    cancelRequestorTask = vi.fn().mockResolvedValue(undefined);
     getPrompt = vi.fn().mockResolvedValue({ result: { messages: [] } });
     readResource = vi
       .fn()
@@ -166,7 +170,11 @@ vi.mock("@inspector/core/react/useManagedResourceTemplates.js", () => ({
   useManagedResourceTemplates: vi.fn(() => ({ resourceTemplates: [] })),
 }));
 vi.mock("@inspector/core/react/useManagedRequestorTasks.js", () => ({
-  useManagedRequestorTasks: vi.fn(() => ({ tasks: [], refresh: vi.fn() })),
+  useManagedRequestorTasks: vi.fn(() => ({
+    tasks: [],
+    refresh: vi.fn().mockResolvedValue([]),
+    clearCompleted: vi.fn(),
+  })),
 }));
 vi.mock("@inspector/core/react/useResourceSubscriptions.js", () => ({
   useResourceSubscriptions: vi.fn(() => ({ subscriptions: [] })),
@@ -223,15 +231,26 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
       filterText: string;
       visibleLevels: Record<string, boolean>;
     }) => void;
-    onCallTool: (name: string, args: Record<string, unknown>) => void;
+    progressByTaskId?: Record<string, unknown>;
+    onCallTool: (
+      name: string,
+      args: Record<string, unknown>,
+      runAsTask?: boolean,
+    ) => void;
     onGetPrompt: (name: string, args: Record<string, string>) => void;
     onReadResource: (uri: string) => void;
     onSetLogLevel: (level: string) => void;
+    onCancelTask: (taskId: string) => void;
+    onClearCompletedTasks: () => void;
+    onRefreshTasks: () => void;
   }) => (
     <div>
       <span data-testid="tool-status">
         {props.toolCallState?.status ?? "none"}
       </span>
+      <span data-testid="task-progress-keys">
+        {Object.keys(props.progressByTaskId ?? {}).join(",") || "none"}
+      </span>
       <span data-testid="selected-tool">
         {props.toolsUi?.selectedToolName ?? "none"}
       </span>
@@ -307,6 +326,14 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
         set-log-filter
       </button>
       <button onClick={() => props.onCallTool("get_acts", {})}>call</button>
+      <button onClick={() => props.onCallTool("get_acts", {}, true)}>
+        call-as-task
+      </button>
+      <button onClick={() => props.onCancelTask("task-1")}>cancel-task</button>
+      <button onClick={() => props.onClearCompletedTasks()}>
+        clear-completed
+      </button>
+      <button onClick={() => props.onRefreshTasks()}>refresh-tasks</button>
       <button onClick={() => props.onGetPrompt("greet", {})}>get-prompt</button>
       <button onClick={() => props.onReadResource("res://x")}>
         read-resource
@@ -318,6 +345,21 @@ vi.mock("./components/views/InspectorView/InspectorView", () => ({
 
 import App from "./App";
 import * as McpIndex from "@inspector/core/mcp/index.js";
+import { useManagedRequestorTasks } from "@inspector/core/react/useManagedRequestorTasks.js";
+import { useInspectorClient } from "@inspector/core/react/useInspectorClient.js";
+
+// Default useInspectorClient return — capabilities empty (no task tool calls).
+// Individual tests override via vi.mocked(...).mockReturnValue(...).
+const DEFAULT_USE_INSPECTOR_CLIENT: ReturnType<typeof useInspectorClient> = {
+  status: "connected",
+  capabilities: {},
+  clientCapabilities: {},
+  serverInfo: undefined,
+  instructions: undefined,
+  appRendererClient: null,
+  connect: vi.fn().mockResolvedValue(undefined),
+  disconnect: vi.fn().mockResolvedValue(undefined),
+};
 
 const clientInstances = (
   McpIndex as unknown as { __clientInstances: EventTarget[] }
@@ -587,3 +629,217 @@ describe("App pending server-initiated request modal", () => {
     );
   });
 });
+
+describe("App task wiring", () => {
+  beforeEach(() => {
+    clientInstances.length = 0;
+    notificationsMock.show.mockClear();
+    notificationsMock.update.mockClear();
+    notificationsMock.hide.mockClear();
+    // Restore the default task-hook return between tests that override it.
+    vi.mocked(useManagedRequestorTasks).mockReturnValue({
+      tasks: [],
+      refresh: vi.fn().mockResolvedValue([]),
+      clearCompleted: vi.fn(),
+    });
+    // Restore the default capabilities (no task tool calls) between tests.
+    vi.mocked(useInspectorClient).mockReturnValue(DEFAULT_USE_INSPECTOR_CLIENT);
+  });
+
+  it("routes a Run-as-task call through callToolStream with the server's TTL", async () => {
+    // onCallTool only task-augments when the server advertises task tool calls.
+    vi.mocked(useInspectorClient).mockReturnValue({
+      ...DEFAULT_USE_INSPECTOR_CLIENT,
+      capabilities: { tasks: { requests: { tools: { call: {} } } } },
+    });
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    await user.click(screen.getByText("call-as-task"));
+
+    const client = clientInstances[0] as unknown as {
+      callToolStream: ReturnType<typeof vi.fn>;
+      callTool: ReturnType<typeof vi.fn>;
+    };
+    await waitFor(() => expect(client.callToolStream).toHaveBeenCalledTimes(1));
+    expect(client.callTool).not.toHaveBeenCalled();
+    // 5th arg is the task options; TTL falls back to the 60000 default since
+    // SERVER_A has no `settings.taskTtl`.
+    expect(client.callToolStream.mock.calls[0][4]).toEqual({ ttl: 60000 });
+  });
+
+  it("does NOT task-augment when the server lacks task-tool-call support", async () => {
+    // Default capabilities (no tasks.requests.tools.call). A stale run-as-task
+    // request must fall back to the normal callTool path, never callToolStream.
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    await user.click(screen.getByText("call-as-task"));
+
+    const client = clientInstances[0] as unknown as {
+      callToolStream: ReturnType<typeof vi.fn>;
+      callTool: ReturnType<typeof vi.fn>;
+    };
+    await waitFor(() => expect(client.callTool).toHaveBeenCalledTimes(1));
+    expect(client.callToolStream).not.toHaveBeenCalled();
+  });
+
+  it("surfaces a cancel failure as a red toast", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    (
+      clientInstances[0] as unknown as {
+        cancelRequestorTask: ReturnType<typeof vi.fn>;
+      }
+    ).cancelRequestorTask.mockRejectedValueOnce(new Error("nope"));
+
+    await user.click(screen.getByText("cancel-task"));
+
+    await waitFor(() =>
+      expect(notificationsMock.show).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: "Failed to cancel task",
+          color: "red",
+        }),
+      ),
+    );
+  });
+
+  it("surfaces a refresh failure as a red toast", async () => {
+    vi.mocked(useManagedRequestorTasks).mockReturnValue({
+      tasks: [],
+      refresh: vi.fn().mockRejectedValue(new Error("list boom")),
+      clearCompleted: vi.fn(),
+    });
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    await user.click(screen.getByText("refresh-tasks"));
+
+    await waitFor(() =>
+      expect(notificationsMock.show).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: "Failed to refresh tasks",
+          color: "red",
+        }),
+      ),
+    );
+  });
+
+  it("clear-completed calls through to the hook's clearCompleted", async () => {
+    const clearCompleted = vi.fn();
+    vi.mocked(useManagedRequestorTasks).mockReturnValue({
+      tasks: [],
+      refresh: vi.fn().mockResolvedValue([]),
+      clearCompleted,
+    });
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    await user.click(screen.getByText("clear-completed"));
+    expect(clearCompleted).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows a task-status toast, updates it, and hides it on terminal status", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    // First status → a fresh toast keyed by the task id.
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("taskStatusChange", {
+          detail: {
+            taskId: "task-1",
+            task: { status: "working", statusMessage: "Interpreting" },
+          },
+        }),
+      );
+    });
+    expect(notificationsMock.show).toHaveBeenCalledTimes(1);
+    const shown = notificationsMock.show.mock.calls[0][0];
+    expect(shown.title).toBe("Task working");
+    expect(shown.message).toBe("Interpreting");
+
+    // Next status on the same task → the existing toast is updated, not stacked.
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("taskStatusChange", {
+          detail: {
+            taskId: "task-1",
+            task: { status: "working", statusMessage: "Still going" },
+          },
+        }),
+      );
+    });
+    expect(notificationsMock.show).toHaveBeenCalledTimes(1);
+    expect(notificationsMock.update).toHaveBeenCalledTimes(1);
+
+    // Terminal status → the toast is hidden.
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("taskStatusChange", {
+          detail: {
+            taskId: "task-1",
+            task: { status: "completed", statusMessage: "Done" },
+          },
+        }),
+      );
+    });
+    expect(notificationsMock.hide).toHaveBeenCalledWith(shown.id);
+  });
+
+  it("builds progressByTaskId from requestorTaskProgress and prunes it on terminal status", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(<App />);
+    await user.click(screen.getByText("connect"));
+    await waitFor(() => expect(clientInstances).toHaveLength(1));
+
+    expect(screen.getByTestId("task-progress-keys")).toHaveTextContent("none");
+
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("requestorTaskProgress", {
+          detail: {
+            taskId: "task-1",
+            progress: { progress: 2, total: 5, message: "Halfway" },
+          },
+        }),
+      );
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId("task-progress-keys")).toHaveTextContent(
+        "task-1",
+      ),
+    );
+
+    // A terminal task update prunes the entry.
+    act(() => {
+      clientInstances[0].dispatchEvent(
+        new CustomEvent("requestorTaskUpdated", {
+          detail: {
+            taskId: "task-1",
+            task: { status: "completed", statusMessage: "Done" },
+          },
+        }),
+      );
+    });
+    await waitFor(() =>
+      expect(screen.getByTestId("task-progress-keys")).toHaveTextContent(
+        "none",
+      ),
+    );
+  });
+});
diff --git a/clients/web/src/App.tsx b/clients/web/src/App.tsx
index dbbd8ad2..d21e33be 100644
--- a/clients/web/src/App.tsx
+++ b/clients/web/src/App.tsx
@@ -15,6 +15,7 @@ import type {
   LoggingMessageNotification,
   Progress,
   ProgressToken,
+  Task,
   Tool,
 } from "@modelcontextprotocol/sdk/types.js";
 import { InspectorClient } from "@inspector/core/mcp/index.js";
@@ -30,6 +31,7 @@ import type {
   ServerEntry,
   ServerType,
 } from "@inspector/core/mcp/types.js";
+import { DEFAULT_TASK_TTL_MS } from "@inspector/core/mcp/types.js";
 import {
   API_SERVER_ENV_VARS,
   INSPECTOR_API_TOKEN_GLOBAL,
@@ -71,6 +73,7 @@ import type {
 } from "./components/screens/ToolsScreen/ToolsScreen";
 import type { GetPromptState } from "./components/screens/PromptsScreen/PromptsScreen";
 import type { ReadResourceState } from "./components/screens/ResourcesScreen/ResourcesScreen";
+import type { TaskProgress } from "./components/groups/TaskCard/TaskCard";
 import {
   EMPTY_TOOLS_UI,
   EMPTY_PROMPTS_UI,
@@ -193,6 +196,7 @@ const EMPTY_SETTINGS: InspectorServerSettings = {
   metadata: [],
   connectionTimeout: 0,
   requestTimeout: 0,
+  taskTtl: DEFAULT_TASK_TTL_MS,
 };
 
 // Body of the output-schema-mismatch warning toast: a one-line summary plus a
@@ -243,6 +247,52 @@ function formatProgressToastMessage(
   return message ? `${message} — ${ratio}` : ratio;
 }
 
+// Terminal task states — once a task reaches one of these it can't change, so
+// its toast is dismissed and its per-task progress entry is pruned.
+const TERMINAL_TASK_STATUSES: ReadonlySet<Task["status"]> = new Set([
+  "completed",
+  "failed",
+  "cancelled",
+]);
+
+function isTerminalTaskStatus(status: Task["status"]): boolean {
+  return TERMINAL_TASK_STATUSES.has(status);
+}
+
+// Stable toast id per task so live status updates replace one toast rather than
+// stacking a fresh one per `notifications/tasks/status` tick.
+function taskToastId(taskId: string): string {
+  return `task-${taskId}`;
+}
+
+// Toast color per task status — mirrors TaskStatusBadge's mapping so the toast
+// and the Tasks-screen badge read consistently.
+function taskToastColor(status: Task["status"]): string {
+  switch (status) {
+    case "completed":
+      return "green";
+    case "failed":
+      return "red";
+    case "cancelled":
+      return "gray";
+    case "input_required":
+      return "yellow";
+    default:
+      return "blue";
+  }
+}
+
+// The subset of Task fields the toast layer reads. Both task-event payloads —
+// the server `taskStatusChange` (full Task) and the client-origin
+// `requestorTaskUpdated` (Task with optional createdAt) — satisfy this.
+type TaskToastInput = Pick<Task, "status"> & { statusMessage?: string };
+
+// One-line toast body: the task's `statusMessage` when present, else a short
+// fallback naming the status. The title carries the status itself.
+function formatTaskToastMessage(task: TaskToastInput): string {
+  return task.statusMessage ?? `Task ${task.status}`;
+}
+
 function App() {
   // Theme toggle plumbing (preserved from the pre-wire placeholder).
   const { setColorScheme } = useMantineColorScheme();
@@ -396,6 +446,18 @@ function App() {
   // because it's incidental bookkeeping that must not trigger re-renders.
   const progressToastIdsRef = useRef<Set<string>>(new Set());
 
+  // Same bookkeeping for live task-status toasts (one per taskId), so each
+  // `notifications/tasks/status` tick replaces the existing toast.
+  const taskToastIdsRef = useRef<Set<string>>(new Set());
+
+  // Per-task progress, keyed by taskId. Sourced from the core `requestorTaskProgress`
+  // event (emitted by callToolStream, which owns the taskId), fed to the Tasks
+  // screen so `TaskCard`'s progress bar renders for active tasks. Pruned on
+  // terminal status (below) and reset on disconnect (`resetSessionScopedUiState`).
+  const [progressByTaskId, setProgressByTaskId] = useState<
+    Record<string, TaskProgress>
+  >({});
+
   // 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.
@@ -422,10 +484,11 @@ function App() {
     inspectorClient,
     managedResourceTemplatesState,
   );
-  const { tasks, refresh: refreshTasks } = useManagedRequestorTasks(
-    inspectorClient,
-    managedRequestorTasksState,
-  );
+  const {
+    tasks,
+    refresh: refreshTasks,
+    clearCompleted: clearCompletedTasks,
+  } = useManagedRequestorTasks(inspectorClient, managedRequestorTasksState);
   const { subscriptions } = useResourceSubscriptions(
     resourceSubscriptionsState,
   );
@@ -489,6 +552,7 @@ function App() {
     setLogsUi(EMPTY_LOGS_UI);
     setHistoryUi(EMPTY_HISTORY_UI);
     setNetworkUi(EMPTY_NETWORK_UI);
+    setProgressByTaskId({});
     setCurrentLogLevel("info");
     // Remembered scroll offsets are session-scoped too — drop them so the next
     // session's screens start at the top (#1417).
@@ -570,6 +634,118 @@ function App() {
     };
   }, [inspectorClient]);
 
+  // Correlate task-call progress to the task it belongs to. `callToolStream`
+  // emits `requestorTaskProgress` tagged with the taskId it owns (the generic
+  // `progressNotification` above carries only the caller's progressToken), so we
+  // build a taskId → progress map the Tasks screen reads to render each active
+  // task's progress bar. Entries are pruned on terminal status (in the task-
+  // status effect below) and the whole map resets on disconnect.
+  useEffect(() => {
+    if (!inspectorClient) return;
+    const onTaskProgress = (
+      event: TypedEventGeneric<
+        InspectorClientEventMap,
+        "requestorTaskProgress"
+      >,
+    ) => {
+      const { taskId, progress } = event.detail;
+      setProgressByTaskId((prev) => ({
+        ...prev,
+        [taskId]: {
+          progress: progress.progress,
+          total: progress.total,
+          message: progress.message,
+        },
+      }));
+    };
+    inspectorClient.addEventListener("requestorTaskProgress", onTaskProgress);
+    return () => {
+      inspectorClient.removeEventListener(
+        "requestorTaskProgress",
+        onTaskProgress,
+      );
+    };
+  }, [inspectorClient]);
+
+  // Surface live task status as per-task toasts — the v2 replacement for v1/v1.5's
+  // inline "Task status: … Polling…" line under the Tool Result (#1422, consistent
+  // with #1414). Subscribes to `taskStatusChange` (server `notifications/tasks/status`)
+  // and `requestorTaskUpdated` (client-origin updates from `callToolStream`) — the
+  // same sources the managed task store consumes; `toolCallTaskUpdated` is redundant
+  // with `requestorTaskUpdated` so we skip it to avoid double-firing. One toast per
+  // taskId, replaced per tick, dismissed on terminal status (which also prunes the
+  // task's progress entry) and on client teardown. The full status history still
+  // lives in the History view.
+  useEffect(() => {
+    if (!inspectorClient) return;
+    const liveToastIds = taskToastIdsRef.current;
+    const handleTaskUpdate = (taskId: string, task: TaskToastInput) => {
+      const id = taskToastId(taskId);
+      const terminal = isTerminalTaskStatus(task.status);
+      const title = `Task ${task.status}`;
+      const message = formatTaskToastMessage(task);
+      const color = taskToastColor(task.status);
+      if (terminal) {
+        // Drop the task's progress entry now that it can't change.
+        setProgressByTaskId((prev) => {
+          if (!(taskId in prev)) return prev;
+          const next = { ...prev };
+          delete next[taskId];
+          return next;
+        });
+      }
+      if (liveToastIds.has(id)) {
+        notifications.update({ id, title, message, color });
+        if (terminal) {
+          notifications.hide(id);
+          liveToastIds.delete(id);
+        }
+        return;
+      }
+      // A first sighting that's already terminal needs no toast at all.
+      if (terminal) return;
+      liveToastIds.add(id);
+      notifications.show({
+        id,
+        title,
+        message,
+        color,
+        autoClose: false,
+        onClose: () => liveToastIds.delete(id),
+      });
+    };
+    const onTaskStatusChange = (
+      event: TypedEventGeneric<InspectorClientEventMap, "taskStatusChange">,
+    ) => {
+      handleTaskUpdate(event.detail.taskId, event.detail.task);
+    };
+    const onRequestorTaskUpdated = (
+      event: TypedEventGeneric<InspectorClientEventMap, "requestorTaskUpdated">,
+    ) => {
+      handleTaskUpdate(event.detail.taskId, event.detail.task);
+    };
+    inspectorClient.addEventListener("taskStatusChange", onTaskStatusChange);
+    inspectorClient.addEventListener(
+      "requestorTaskUpdated",
+      onRequestorTaskUpdated,
+    );
+    return () => {
+      inspectorClient.removeEventListener(
+        "taskStatusChange",
+        onTaskStatusChange,
+      );
+      inspectorClient.removeEventListener(
+        "requestorTaskUpdated",
+        onRequestorTaskUpdated,
+      );
+      // Hide any still-visible task toasts on client swap so they don't linger
+      // into the next session, then drop the bookkeeping (mirrors the progress-
+      // toast teardown above).
+      liveToastIds.forEach((id) => notifications.hide(id));
+      liveToastIds.clear();
+    };
+  }, [inspectorClient]);
+
   // Build the InitializeResult the connected ViewHeader expects from the
   // hook's split fields. `protocolVersion` is hard-coded for now — the
   // useInspectorClient hook doesn't expose it. TODO(#1324): consume the
@@ -1027,10 +1203,27 @@ function App() {
   // --- Action handlers that route directly to the InspectorClient. ---
 
   const onCallTool = useCallback(
-    async (name: string, args: Record<string, unknown>) => {
+    async (
+      name: string,
+      args: Record<string, unknown>,
+      runAsTask?: boolean,
+    ) => {
       if (!inspectorClient) return;
       const tool = tools.find((t: Tool) => t.name === name);
       if (!tool) return;
+      // Route through the task pipeline when the caller asked to (or the tool
+      // requires it) — but only if the server advertises task tool calls. Per
+      // spec a tool's `taskSupport` is considered only when the server declares
+      // `tasks.requests.tools.call`, so without it we never task-augment (even a
+      // "required" tool, which then surfaces callTool's "requires task support"
+      // error). The created task shows up on the Tasks screen via the
+      // `requestorTaskUpdated` events callToolStream dispatches, and its live
+      // status/progress surface as toasts + progress bar.
+      const serverSupportsTaskToolCalls =
+        !!capabilities?.tasks?.requests?.tools?.call;
+      const asTask =
+        serverSupportsTaskToolCalls &&
+        (runAsTask || tool.execution?.taskSupport === "required");
       setToolCallState({ status: "pending" });
       try {
         // ToolsScreen types the args as `Record<string, unknown>` (it accepts
@@ -1038,10 +1231,18 @@ function App() {
         // `Record<string, JsonValue>` — narrow at the boundary instead of
         // claiming the object is empty (which the previous `as Record<string,
         // never>` cast did, misleadingly).
-        const invocation = await inspectorClient.callTool(
-          tool,
-          args as Record<string, JsonValue>,
-        );
+        const invocation = asTask
+          ? await inspectorClient.callToolStream(
+              tool,
+              args as Record<string, JsonValue>,
+              undefined,
+              undefined,
+              { ttl: activeServer?.settings?.taskTtl || DEFAULT_TASK_TTL_MS },
+            )
+          : await inspectorClient.callTool(
+              tool,
+              args as Record<string, JsonValue>,
+            );
         setToolCallState({
           status: invocation.success ? "ok" : "error",
           result: invocation.result ?? undefined,
@@ -1054,7 +1255,7 @@ function App() {
         });
       }
     },
-    [inspectorClient, tools],
+    [inspectorClient, tools, activeServer, capabilities],
   );
 
   const onClearToolResult = useCallback(() => {
@@ -1246,13 +1447,28 @@ function App() {
   );
 
   const onCancelTask = useCallback(
-    (taskId: string) => {
+    async (taskId: string) => {
       if (!inspectorClient) return;
-      void inspectorClient.cancelRequestorTask(taskId);
+      // The cancelled status is reflected by the managed store via the
+      // `taskCancelled` event, so no manual reload is needed — but a cancel
+      // *failure* would otherwise be swallowed, so surface it.
+      try {
+        await inspectorClient.cancelRequestorTask(taskId);
+      } catch (err) {
+        notifications.show({
+          title: "Failed to cancel task",
+          message: err instanceof Error ? err.message : String(err),
+          color: "red",
+        });
+      }
     },
     [inspectorClient],
   );
 
+  const onClearCompletedTasks = useCallback(() => {
+    clearCompletedTasks();
+  }, [clearCompletedTasks]);
+
   const onSetLogLevel = useCallback(
     (level: LoggingLevel) => {
       setCurrentLogLevel(level);
@@ -1272,7 +1488,15 @@ function App() {
     void refreshResources();
   }, [refreshResources]);
   const onRefreshTasks = useCallback(() => {
-    void refreshTasks();
+    // Surface list failures (e.g. the MAX_PAGES guard or a tasks/list error)
+    // instead of letting the rejected promise go unhandled.
+    refreshTasks().catch((err: unknown) => {
+      notifications.show({
+        title: "Failed to refresh tasks",
+        message: err instanceof Error ? err.message : String(err),
+        color: "red",
+      });
+    });
   }, [refreshTasks]);
 
   const onClearLogs = useCallback(() => {
@@ -1568,6 +1792,7 @@ function App() {
         subscriptions={subscriptions}
         logs={logs}
         tasks={tasks}
+        progressByTaskId={progressByTaskId}
         history={messages}
         network={fetchRequests}
         toolCallState={toolCallState}
@@ -1604,9 +1829,12 @@ function App() {
           const target = servers.find((s) => s.id === id);
           if (target) setRemoveTarget(target);
         }}
+        serverSupportsTaskToolCalls={
+          !!capabilities?.tasks?.requests?.tools?.call
+        }
         onToolsUiChange={onToolsUiChange}
-        onCallTool={(name, args) => {
-          void onCallTool(name, args);
+        onCallTool={(name, args, runAsTask) => {
+          void onCallTool(name, args, runAsTask);
         }}
         onClearToolResult={onClearToolResult}
         onRefreshTools={onRefreshTools}
@@ -1625,8 +1853,10 @@ function App() {
         onCompleteArgument={onCompleteArgument}
         completionsSupported={capabilities?.completions !== undefined}
         onTasksUiChange={setTasksUi}
-        onCancelTask={onCancelTask}
-        onClearCompletedTasks={todoNoop}
+        onCancelTask={(taskId) => {
+          void onCancelTask(taskId);
+        }}
+        onClearCompletedTasks={onClearCompletedTasks}
         onRefreshTasks={onRefreshTasks}
         onSetLogLevel={onSetLogLevel}
         onLogsUiChange={setLogsUi}
diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
index 3d82268d..0220c062 100644
--- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
+++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
@@ -12,6 +12,7 @@ const defaultSettings: InspectorServerSettings = {
   metadata: [],
   connectionTimeout: 30000,
   requestTimeout: 60000,
+  taskTtl: 60000,
 };
 
 function InteractiveRender(args: ServerSettingsFormProps) {
@@ -166,6 +167,7 @@ export const AllConfigured: Story = {
       ],
       connectionTimeout: 15000,
       requestTimeout: 45000,
+      taskTtl: 45000,
       oauthClientId: "my-client-id",
       oauthClientSecret: "super-secret-value",
       oauthScopes: "read write",
diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.test.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.test.tsx
index f1778089..319b170f 100644
--- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.test.tsx
+++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.test.tsx
@@ -12,6 +12,7 @@ const emptySettings: InspectorServerSettings = {
   metadata: [],
   connectionTimeout: 30000,
   requestTimeout: 60000,
+  taskTtl: 60000,
 };
 
 const populatedSettings: InspectorServerSettings = {
@@ -19,6 +20,7 @@ const populatedSettings: InspectorServerSettings = {
   metadata: [{ key: "userId", value: "u-1" }],
   connectionTimeout: 30000,
   requestTimeout: 60000,
+  taskTtl: 60000,
   oauthClientId: "cid",
   oauthClientSecret: "secret",
   oauthScopes: "read",
@@ -197,6 +199,36 @@ describe("ServerSettingsForm", () => {
     expect(typeof call[1]).toBe("number");
   });
 
+  it("invokes onTimeoutChange with the taskTtl field when typing in Task TTL", async () => {
+    const user = userEvent.setup();
+    const onTimeoutChange = vi.fn();
+    renderWithMantine(
+      <ServerSettingsForm
+        {...baseHandlers}
+        onTimeoutChange={onTimeoutChange}
+        settings={emptySettings}
+        expandedSections={["timeouts"]}
+      />,
+    );
+    const ttlInput = screen.getByLabelText(/Task TTL/);
+    await user.type(ttlInput, "9");
+    expect(onTimeoutChange).toHaveBeenCalled();
+    const call = onTimeoutChange.mock.calls[0];
+    expect(call[0]).toBe("taskTtl");
+    expect(typeof call[1]).toBe("number");
+  });
+
+  it("renders the Task TTL value from settings", () => {
+    renderWithMantine(
+      <ServerSettingsForm
+        {...baseHandlers}
+        settings={{ ...emptySettings, taskTtl: 45000 }}
+        expandedSections={["timeouts"]}
+      />,
+    );
+    expect(screen.getByLabelText(/Task TTL/)).toHaveValue("45000 ms");
+  });
+
   it("invokes onOAuthChange when typing in client id", async () => {
     const user = userEvent.setup();
     const onOAuthChange = vi.fn();
diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
index 5551120a..213dd9af 100644
--- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
+++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
@@ -30,7 +30,7 @@ export interface ServerSettingsFormProps {
   onRemoveMetadata: (index: number) => void;
   onMetadataChange: (index: number, key: string, value: string) => void;
   onTimeoutChange: (
-    field: "connectionTimeout" | "requestTimeout",
+    field: "connectionTimeout" | "requestTimeout" | "taskTtl",
     value: number,
   ) => void;
   onOAuthChange: (oauth: OAuthSettings) => void;
@@ -105,7 +105,7 @@ export function ServerSettingsForm({
   onOAuthChange,
 }: ServerSettingsFormProps) {
   const handleTimeoutChange =
-    (field: "connectionTimeout" | "requestTimeout") =>
+    (field: "connectionTimeout" | "requestTimeout" | "taskTtl") =>
     (value: number | string) => {
       const numValue =
         typeof value === "string" ? parseInt(value, 10) || 0 : value;
@@ -193,6 +193,13 @@ export function ServerSettingsForm({
               value={settings.requestTimeout}
               onChange={handleTimeoutChange("requestTimeout")}
             />
+            <NumberInput
+              label="Task TTL"
+              suffix=" ms"
+              min={1}
+              value={settings.taskTtl}
+              onChange={handleTimeoutChange("taskTtl")}
+            />
           </Group>
         </Accordion.Panel>
       </Accordion.Item>
diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
index fc73d19f..c4a1b167 100644
--- a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
+++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
@@ -16,6 +16,7 @@ const initialSettings: InspectorServerSettings = {
   metadata: [{ key: "userId", value: "user-789" }],
   connectionTimeout: 30000,
   requestTimeout: 60000,
+  taskTtl: 60000,
   oauthClientId: "my-client-id",
   oauthClientSecret: "super-secret-value",
   oauthScopes: "read write",
@@ -67,6 +68,7 @@ export const EmptySettings: Story = {
       metadata: [],
       connectionTimeout: 30000,
       requestTimeout: 60000,
+      taskTtl: 60000,
     },
   },
 };
diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.test.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.test.tsx
index b281d270..3605249d 100644
--- a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.test.tsx
+++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.test.tsx
@@ -9,6 +9,7 @@ const initialSettings: InspectorServerSettings = {
   metadata: [{ key: "userId", value: "u-1" }],
   connectionTimeout: 30000,
   requestTimeout: 60000,
+  taskTtl: 60000,
   oauthClientId: "cid",
   oauthClientSecret: "secret",
   oauthScopes: "read",
@@ -19,6 +20,7 @@ const emptySettings: InspectorServerSettings = {
   metadata: [],
   connectionTimeout: 30000,
   requestTimeout: 60000,
+  taskTtl: 60000,
 };
 
 describe("ServerSettingsModal", () => {
diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx
index 463693a8..a25e6f5b 100644
--- a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx
+++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx
@@ -83,7 +83,7 @@ export function ServerSettingsModal({
   }
 
   function handleTimeoutChange(
-    field: "connectionTimeout" | "requestTimeout",
+    field: "connectionTimeout" | "requestTimeout" | "taskTtl",
     value: number,
   ) {
     onSettingsChange({ ...settings, [field]: value });
diff --git a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.stories.tsx b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.stories.tsx
index c53cd81c..c9607099 100644
--- a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.stories.tsx
+++ b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.stories.tsx
@@ -10,8 +10,11 @@ const meta: Meta<typeof ToolDetailPanel> = {
     onFormChange: fn(),
     onExecute: fn(),
     onCancel: fn(),
+    onRunAsTaskChange: fn(),
     formValues: {},
     isExecuting: false,
+    serverSupportsTaskToolCalls: false,
+    runAsTask: false,
   },
 };
 
@@ -142,3 +145,45 @@ export const WithProgress: Story = {
     formValues: { batchSize: 100 },
   },
 };
+
+const optionalTaskTool: Tool = {
+  name: "summarize_corpus",
+  description: "Summarizes a large corpus — can run as a background task",
+  execution: { taskSupport: "optional" },
+  inputSchema: {
+    type: "object",
+    properties: {
+      corpus: { type: "string", description: "Text to summarize" },
+    },
+  },
+};
+
+const requiredTaskTool: Tool = {
+  name: "train_model",
+  description: "Long-running training job — always runs as a task",
+  execution: { taskSupport: "required" },
+  inputSchema: {
+    type: "object",
+    properties: {
+      dataset: { type: "string", description: "Dataset id" },
+    },
+  },
+};
+
+// Server supports task tool calls + tool is `optional`: the toggle renders
+// enabled and off by default.
+export const RunAsTaskOptional: Story = {
+  args: {
+    tool: optionalTaskTool,
+    serverSupportsTaskToolCalls: true,
+    runAsTask: false,
+  },
+};
+
+// Tool is `required`: the toggle is forced on and disabled.
+export const RunAsTaskRequired: Story = {
+  args: {
+    tool: requiredTaskTool,
+    serverSupportsTaskToolCalls: true,
+  },
+};
diff --git a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx
index 95a93ad3..9a931314 100644
--- a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx
+++ b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.test.tsx
@@ -59,6 +59,9 @@ const annotatedTool: Tool = {
 const baseProps = {
   formValues: {},
   isExecuting: false,
+  serverSupportsTaskToolCalls: false,
+  runAsTask: false,
+  onRunAsTaskChange: vi.fn(),
   onFormChange: vi.fn(),
   onExecute: vi.fn(),
   onCancel: vi.fn(),
@@ -204,4 +207,144 @@ describe("ToolDetailPanel", () => {
     await user.type(input, "hi");
     expect(onFormChange).toHaveBeenCalled();
   });
+
+  describe("Run as task toggle", () => {
+    const toolWithSupport = (
+      taskSupport: "forbidden" | "optional" | "required",
+    ): Tool => ({
+      name: "run_job",
+      execution: { taskSupport },
+      inputSchema: { type: "object", properties: {} },
+    });
+
+    it("hides the toggle when the server doesn't support task tool calls", () => {
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("optional")}
+          serverSupportsTaskToolCalls={false}
+        />,
+      );
+      expect(screen.queryByLabelText("Run as task")).not.toBeInTheDocument();
+    });
+
+    it("hides the toggle for a task-forbidden tool even when the server supports tasks", () => {
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("forbidden")}
+          serverSupportsTaskToolCalls={true}
+        />,
+      );
+      expect(screen.queryByLabelText("Run as task")).not.toBeInTheDocument();
+    });
+
+    it("shows an unchecked, enabled toggle for an optional tool (off by default)", () => {
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("optional")}
+          serverSupportsTaskToolCalls={true}
+          runAsTask={false}
+        />,
+      );
+      const toggle = screen.getByLabelText("Run as task");
+      expect(toggle).not.toBeChecked();
+      expect(toggle).not.toBeDisabled();
+    });
+
+    it("reflects the runAsTask prop for an optional tool", () => {
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("optional")}
+          serverSupportsTaskToolCalls={true}
+          runAsTask={true}
+        />,
+      );
+      expect(screen.getByLabelText("Run as task")).toBeChecked();
+    });
+
+    it("forces the toggle on and disabled for a required tool", () => {
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("required")}
+          serverSupportsTaskToolCalls={true}
+          runAsTask={false}
+        />,
+      );
+      const toggle = screen.getByLabelText("Run as task");
+      expect(toggle).toBeChecked();
+      expect(toggle).toBeDisabled();
+    });
+
+    it("invokes onRunAsTaskChange when an optional toggle is clicked", async () => {
+      const user = userEvent.setup();
+      const onRunAsTaskChange = vi.fn();
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("optional")}
+          serverSupportsTaskToolCalls={true}
+          runAsTask={false}
+          onRunAsTaskChange={onRunAsTaskChange}
+        />,
+      );
+      await user.click(screen.getByLabelText("Run as task"));
+      expect(onRunAsTaskChange).toHaveBeenCalledWith(true);
+    });
+
+    it("passes the effective run-as-task decision to onExecute", async () => {
+      const user = userEvent.setup();
+      const onExecute = vi.fn();
+      // optional + runAsTask=true → effective true
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("optional")}
+          serverSupportsTaskToolCalls={true}
+          runAsTask={true}
+          onExecute={onExecute}
+        />,
+      );
+      await user.click(screen.getByRole("button", { name: "Execute Tool" }));
+      expect(onExecute).toHaveBeenCalledWith(true);
+    });
+
+    it("passes runAsTask=true to onExecute for a required tool regardless of the prop", async () => {
+      const user = userEvent.setup();
+      const onExecute = vi.fn();
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("required")}
+          serverSupportsTaskToolCalls={true}
+          runAsTask={false}
+          onExecute={onExecute}
+        />,
+      );
+      await user.click(screen.getByRole("button", { name: "Execute Tool" }));
+      expect(onExecute).toHaveBeenCalledWith(true);
+    });
+
+    it("gates onExecute to false when the server lacks task-tool-call support, even with a stale runAsTask", async () => {
+      const user = userEvent.setup();
+      const onExecute = vi.fn();
+      // The toggle is hidden (server doesn't support it), but a leftover
+      // runAsTask=true must not leak into the effective decision.
+      renderWithMantine(
+        <ToolDetailPanel
+          {...baseProps}
+          tool={toolWithSupport("optional")}
+          serverSupportsTaskToolCalls={false}
+          runAsTask={true}
+          onExecute={onExecute}
+        />,
+      );
+      expect(screen.queryByLabelText("Run as task")).not.toBeInTheDocument();
+      await user.click(screen.getByRole("button", { name: "Execute Tool" }));
+      expect(onExecute).toHaveBeenCalledWith(false);
+    });
+  });
 });
diff --git a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
index 9e96d1c7..4eeec9b5 100644
--- a/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
+++ b/clients/web/src/components/groups/ToolDetailPanel/ToolDetailPanel.tsx
@@ -5,6 +5,7 @@ import {
   Image,
   ScrollArea,
   Stack,
+  Switch,
   Text,
 } from "@mantine/core";
 import type {
@@ -27,8 +28,14 @@ export interface ToolDetailPanelProps {
   formValues: Record<string, unknown>;
   isExecuting: boolean;
   progress?: ToolProgress;
+  /** Whether the connected server advertises task-augmented tool calls. */
+  serverSupportsTaskToolCalls: boolean;
+  /** User's "Run as task" preference (only meaningful for `optional` tools). */
+  runAsTask: boolean;
+  onRunAsTaskChange: (value: boolean) => void;
   onFormChange: (values: Record<string, unknown>) => void;
-  onExecute: () => void;
+  /** Receives the effective run-as-task decision for this execution. */
+  onExecute: (runAsTask: boolean) => void;
   onCancel: () => void;
 }
 
@@ -95,6 +102,24 @@ const CancelButton = Button.withProps({
   color: "red",
 });
 
+// Left-aligned row hosting the "Run as task" toggle, above the execute footer.
+const TaskToggleRow = Group.withProps({
+  justify: "flex-start",
+  flex: "0 0 auto",
+});
+
+const RunAsTaskSwitch = Switch.withProps({
+  size: "sm",
+  label: "Run as task",
+});
+
+// A tool's per-tool task support, defaulting to "forbidden" (the SDK default
+// when `execution` is absent) so tools that say nothing can't be run as tasks.
+type TaskSupport = "forbidden" | "optional" | "required";
+function getTaskSupport(tool: Tool): TaskSupport {
+  return tool.execution?.taskSupport ?? "forbidden";
+}
+
 function hasAnyAnnotation(annotations?: ToolAnnotations): boolean {
   return !!(
     annotations &&
@@ -110,6 +135,9 @@ export function ToolDetailPanel({
   formValues,
   isExecuting,
   progress,
+  serverSupportsTaskToolCalls,
+  runAsTask,
+  onRunAsTaskChange,
   onFormChange,
   onExecute,
   onCancel,
@@ -117,6 +145,21 @@ export function ToolDetailPanel({
   const { name, title, description, icons, annotations, inputSchema } = tool;
   const iconSrc = icons?.[0]?.src;
 
+  // Show the toggle only when the server supports task tool calls and the tool
+  // doesn't forbid them. `required` tools are forced on (checked + disabled);
+  // `optional` tools follow the user's `runAsTask` choice.
+  const taskSupport = getTaskSupport(tool);
+  const showRunAsTask =
+    serverSupportsTaskToolCalls && taskSupport !== "forbidden";
+  // Gate the effective decision on `showRunAsTask` (which includes
+  // `serverSupportsTaskToolCalls`): a stale `runAsTask`/`required` value must
+  // not route through callToolStream when the toggle is hidden because the
+  // server doesn't advertise task tool calls. Per spec, a tool's taskSupport is
+  // only considered when the server advertises `tasks.requests.tools.call`.
+  const effectiveRunAsTask =
+    showRunAsTask &&
+    (taskSupport === "required" || (taskSupport === "optional" && runAsTask));
+
   return (
     <PanelStack>
       <PinnedHeader>
@@ -159,11 +202,21 @@ export function ToolDetailPanel({
         </BodyStack>
       </BodyScroll>
 
+      {showRunAsTask && (
+        <TaskToggleRow>
+          <RunAsTaskSwitch
+            checked={effectiveRunAsTask}
+            disabled={isExecuting || taskSupport === "required"}
+            onChange={(event) => onRunAsTaskChange(event.currentTarget.checked)}
+          />
+        </TaskToggleRow>
+      )}
+
       <FooterRow>
         {isExecuting && <CancelButton onClick={onCancel}>Cancel</CancelButton>}
         <Button
           size="md"
-          onClick={onExecute}
+          onClick={() => onExecute(effectiveRunAsTask)}
           disabled={isExecuting}
           loading={isExecuting}
         >
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
index 89e1bf2f..4fa8136d 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.stories.tsx
@@ -28,6 +28,7 @@ const meta: Meta<typeof ToolsScreen> = {
   parameters: { layout: "fullscreen" },
   args: {
     listChanged: false,
+    serverSupportsTaskToolCalls: false,
     ui: EMPTY_TOOLS_UI,
     onUiChange: fn(),
     onRefreshList: fn(),
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
index 569de39c..b0d4c2f3 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.test.tsx
@@ -25,6 +25,7 @@ const tools: Tool[] = [
 const baseProps = {
   tools,
   listChanged: false,
+  serverSupportsTaskToolCalls: false,
   ui: EMPTY_TOOLS_UI,
   onUiChange: vi.fn(),
   onRefreshList: vi.fn(),
@@ -91,7 +92,7 @@ describe("ToolsScreen", () => {
     await user.clear(field);
     await user.type(field, "slow");
     await user.click(screen.getByRole("button", { name: /Execute/ }));
-    expect(onCallTool).toHaveBeenCalledWith("gamma", { mode: "slow" });
+    expect(onCallTool).toHaveBeenCalledWith("gamma", { mode: "slow" }, false);
   });
 
   it("renders selection and result from props (persisted across navigation)", () => {
@@ -133,7 +134,7 @@ describe("ToolsScreen", () => {
     renderWithMantine(<ControlledToolsScreen onCallTool={onCallTool} />);
     await user.click(screen.getByText("alpha"));
     await user.click(screen.getByRole("button", { name: /Execute/ }));
-    expect(onCallTool).toHaveBeenCalledWith("alpha", {});
+    expect(onCallTool).toHaveBeenCalledWith("alpha", {}, false);
   });
 
   it("seeds schema defaults so untouched fields are sent on Execute", async () => {
@@ -143,7 +144,7 @@ describe("ToolsScreen", () => {
     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/ }));
-    expect(onCallTool).toHaveBeenCalledWith("gamma", { mode: "fast" });
+    expect(onCallTool).toHaveBeenCalledWith("gamma", { mode: "fast" }, false);
   });
 
   it("invokes onClearResult when Clear is clicked on the result panel", async () => {
diff --git a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
index 1e02262f..e7989483 100644
--- a/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
+++ b/clients/web/src/components/screens/ToolsScreen/ToolsScreen.tsx
@@ -22,6 +22,12 @@ export interface ToolsUiState {
   selectedToolName?: string;
   formValues: Record<string, unknown>;
   search: string;
+  // Screen-level "Run as task" toggle, shared across tools (not per-tool):
+  // selecting a different tool keeps the current value. Persists across tab
+  // navigation like the rest of the UI state, and is only honored for the
+  // selected tool when its `execution.taskSupport` is "optional" (a "required"
+  // tool is always run as a task, "forbidden" never) — see ToolDetailPanel.
+  runAsTask: boolean;
 }
 
 export interface ToolsScreenProps {
@@ -29,9 +35,15 @@ export interface ToolsScreenProps {
   callState?: ToolCallState;
   ui: ToolsUiState;
   listChanged: boolean;
+  /** Whether the connected server advertises task-augmented tool calls. */
+  serverSupportsTaskToolCalls: boolean;
   onUiChange: (next: ToolsUiState) => void;
   onRefreshList: () => void;
-  onCallTool: (name: string, args: Record<string, unknown>) => void;
+  onCallTool: (
+    name: string,
+    args: Record<string, unknown>,
+    runAsTask?: boolean,
+  ) => void;
   onCancelCall?: () => void;
   onClearResult?: () => void;
 }
@@ -92,6 +104,7 @@ export function ToolsScreen({
   callState,
   ui,
   listChanged,
+  serverSupportsTaskToolCalls,
   onUiChange,
   onRefreshList,
   onCallTool,
@@ -139,10 +152,17 @@ export function ToolsScreen({
               formValues={formValues}
               isExecuting={isExecuting}
               progress={callState?.progress}
+              serverSupportsTaskToolCalls={serverSupportsTaskToolCalls}
+              runAsTask={ui.runAsTask}
+              onRunAsTaskChange={(value) =>
+                onUiChange({ ...ui, runAsTask: value })
+              }
               onFormChange={(values) =>
                 onUiChange({ ...ui, formValues: values })
               }
-              onExecute={() => onCallTool(selectedTool.name, formValues)}
+              onExecute={(runAsTask) =>
+                onCallTool(selectedTool.name, formValues, runAsTask)
+              }
               onCancel={() => onCancelCall?.()}
             />
           ) : (
diff --git a/clients/web/src/components/screens/screenUiState.ts b/clients/web/src/components/screens/screenUiState.ts
index 82ef2afe..eaed4878 100644
--- a/clients/web/src/components/screens/screenUiState.ts
+++ b/clients/web/src/components/screens/screenUiState.ts
@@ -18,6 +18,7 @@ export const EMPTY_TOOLS_UI: ToolsUiState = {
   selectedToolName: undefined,
   formValues: {},
   search: "",
+  runAsTask: false,
 };
 
 export const EMPTY_PROMPTS_UI: PromptsUiState = {
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
index aadd0e93..228509b5 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx
@@ -356,6 +356,7 @@ const meta: Meta<typeof InspectorView> = {
     onServerEdit: fn(),
     onServerClone: fn(),
     onServerRemove: fn(),
+    serverSupportsTaskToolCalls: false,
     onToolsUiChange: fn(),
     onCallTool: fn(),
     onRefreshTools: fn(),
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index db526455..5ea8f667 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -85,6 +85,7 @@ function makeProps(
     onServerEdit: vi.fn(),
     onServerClone: vi.fn(),
     onServerRemove: vi.fn(),
+    serverSupportsTaskToolCalls: false,
     onToolsUiChange: vi.fn(),
     onCallTool: vi.fn(),
     onRefreshTools: vi.fn(),
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index ecbe7a99..7f838426 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -264,8 +264,14 @@ export interface InspectorViewProps {
 
   // Per-primitive actions (route to `inspectorClient` methods / hook refresh).
   // Each `on{Screen}UiChange` persists that screen's lifted UI state (#1417).
+  /** Whether the connected server advertises task-augmented tool calls. */
+  serverSupportsTaskToolCalls: boolean;
   onToolsUiChange: (next: ToolsUiState) => void;
-  onCallTool: (name: string, args: Record<string, unknown>) => void;
+  onCallTool: (
+    name: string,
+    args: Record<string, unknown>,
+    runAsTask?: boolean,
+  ) => void;
   onCancelToolCall?: () => void;
   onClearToolResult?: () => void;
   onRefreshTools: () => void;
@@ -362,6 +368,7 @@ export function InspectorView({
   onServerEdit,
   onServerClone,
   onServerRemove,
+  serverSupportsTaskToolCalls,
   onToolsUiChange,
   onCallTool,
   onCancelToolCall,
@@ -524,6 +531,7 @@ export function InspectorView({
               callState={toolCallState}
               ui={toolsUi}
               listChanged={false}
+              serverSupportsTaskToolCalls={serverSupportsTaskToolCalls}
               onUiChange={onToolsUiChange}
               onRefreshList={onRefreshTools}
               onCallTool={onCallTool}
diff --git a/clients/web/src/test/core/mcp/remote/remoteClientTransport.test.ts b/clients/web/src/test/core/mcp/remote/remoteClientTransport.test.ts
index a8bde9de..dcc86a37 100644
--- a/clients/web/src/test/core/mcp/remote/remoteClientTransport.test.ts
+++ b/clients/web/src/test/core/mcp/remote/remoteClientTransport.test.ts
@@ -341,6 +341,7 @@ describe("RemoteClientTransport", () => {
       metadata: [],
       connectionTimeout: 0,
       requestTimeout: 0,
+      taskTtl: 0,
     };
     const transport = new RemoteClientTransport(
       {
diff --git a/clients/web/src/test/core/mcp/serverList.test.ts b/clients/web/src/test/core/mcp/serverList.test.ts
index 6220d7d5..bf6de2c5 100644
--- a/clients/web/src/test/core/mcp/serverList.test.ts
+++ b/clients/web/src/test/core/mcp/serverList.test.ts
@@ -201,6 +201,8 @@ describe("serverEntriesToMcpConfig", () => {
       metadata: [],
       connectionTimeout: 0,
       requestTimeout: 0,
+      // Absent taskTtl on disk → product default in memory (for the form)
+      taskTtl: 60000,
       // Nested oauth on disk → flat oauthClientId in memory
       oauthClientId: "the-client",
     });
@@ -272,6 +274,7 @@ describe("serverEntriesToMcpConfig", () => {
           metadata: [],
           connectionTimeout: 0,
           requestTimeout: 0,
+          taskTtl: 0,
         },
         connection: { status: "disconnected" },
       },
@@ -295,6 +298,7 @@ describe("serverEntriesToMcpConfig", () => {
           metadata: [],
           connectionTimeout: 0,
           requestTimeout: 0,
+          taskTtl: 0,
         },
         connection: { status: "disconnected" },
       },
@@ -302,6 +306,7 @@ describe("serverEntriesToMcpConfig", () => {
     const stored = serverEntriesToMcpConfig(entries).mcpServers.alpha;
     expect(stored).not.toHaveProperty("connectionTimeout");
     expect(stored).not.toHaveProperty("requestTimeout");
+    expect(stored).not.toHaveProperty("taskTtl");
     expect(stored).not.toHaveProperty("oauth");
     expect(stored).not.toHaveProperty("headers");
     expect(stored).not.toHaveProperty("metadata");
diff --git a/clients/web/src/test/core/mcp/state/managedRequestorTasksState.test.ts b/clients/web/src/test/core/mcp/state/managedRequestorTasksState.test.ts
index 073bbdef..bcc5e07d 100644
--- a/clients/web/src/test/core/mcp/state/managedRequestorTasksState.test.ts
+++ b/clients/web/src/test/core/mcp/state/managedRequestorTasksState.test.ts
@@ -243,4 +243,101 @@ describe("ManagedRequestorTasksState", () => {
     state.destroy();
     expect(() => state.destroy()).not.toThrow();
   });
+
+  describe("clearCompleted", () => {
+    it("drops terminal-state tasks and keeps active ones", async () => {
+      client.setStatus("connected");
+      client.queueTaskPages({
+        tasks: [
+          task("active", "working"),
+          task("done", "completed"),
+          task("bad", "failed"),
+          task("gone", "cancelled"),
+          task("waiting", "input_required"),
+        ],
+      });
+      await state.refresh();
+
+      const changePromise = waitForChange(state);
+      state.clearCompleted();
+      const next = await changePromise;
+      expect(next.map((t) => t.taskId)).toEqual(["active", "waiting"]);
+      expect(state.getTasks().map((t) => t.taskId)).toEqual([
+        "active",
+        "waiting",
+      ]);
+    });
+
+    it("is a no-op (no event) when there are no terminal tasks", async () => {
+      client.setStatus("connected");
+      client.queueTaskPages({ tasks: [task("active", "working")] });
+      await state.refresh();
+
+      let dispatched = false;
+      state.addEventListener("tasksChange", () => {
+        dispatched = true;
+      });
+      state.clearCompleted();
+      expect(dispatched).toBe(false);
+      expect(state.getTasks().map((t) => t.taskId)).toEqual(["active"]);
+    });
+
+    it("keeps cleared tasks gone across a subsequent refresh (sticky)", async () => {
+      client.setStatus("connected");
+      client.queueTaskPages({
+        tasks: [task("active", "working"), task("done", "completed")],
+      });
+      await state.refresh();
+      state.clearCompleted();
+      expect(state.getTasks().map((t) => t.taskId)).toEqual(["active"]);
+
+      // Server still lists the dismissed task on the next refresh — it must be
+      // filtered back out rather than reappearing.
+      client.queueTaskPages({
+        tasks: [task("active", "working"), task("done", "completed")],
+      });
+      const refreshed = await state.refresh();
+      expect(refreshed.map((t) => t.taskId)).toEqual(["active"]);
+    });
+
+    it("ignores a late status update for a cleared task (sticky)", async () => {
+      client.setStatus("connected");
+      client.queueTaskPages({ tasks: [task("done", "completed")] });
+      await state.refresh();
+      state.clearCompleted();
+      expect(state.getTasks()).toEqual([]);
+
+      let dispatched = false;
+      state.addEventListener("tasksChange", () => {
+        dispatched = true;
+      });
+      client.dispatchTypedEvent("taskStatusChange", {
+        taskId: "done",
+        task: task("done", "completed"),
+      });
+      client.dispatchTypedEvent("requestorTaskUpdated", {
+        taskId: "done",
+        task: task("done", "working"),
+      });
+      client.dispatchTypedEvent("taskCancelled", { taskId: "done" });
+      expect(dispatched).toBe(false);
+      expect(state.getTasks()).toEqual([]);
+    });
+
+    it("resets dismissals on disconnect so a reconnect starts fresh", async () => {
+      client.setStatus("connected");
+      client.queueTaskPages({ tasks: [task("done", "completed")] });
+      await state.refresh();
+      state.clearCompleted();
+
+      // Disconnect clears the dismissed set...
+      client.setStatus("disconnected");
+      client.setStatus("connected");
+
+      // ...so the same task id can reappear on a fresh refresh.
+      client.queueTaskPages({ tasks: [task("done", "completed")] });
+      const refreshed = await state.refresh();
+      expect(refreshed.map((t) => t.taskId)).toEqual(["done"]);
+    });
+  });
 });
diff --git a/clients/web/src/test/core/react/useManagedRequestorTasks.test.tsx b/clients/web/src/test/core/react/useManagedRequestorTasks.test.tsx
index caba2a28..6775ea67 100644
--- a/clients/web/src/test/core/react/useManagedRequestorTasks.test.tsx
+++ b/clients/web/src/test/core/react/useManagedRequestorTasks.test.tsx
@@ -116,4 +116,33 @@ describe("useManagedRequestorTasks", () => {
 
     expect(result.current.tasks).toEqual([]);
   });
+
+  it("clearCompleted() drops terminal tasks through to the state", async () => {
+    client.queueTaskPages({
+      tasks: [task("active", "working"), task("done", "completed")],
+    });
+    await state.refresh();
+
+    const { result } = renderHook(() =>
+      useManagedRequestorTasks(client, state),
+    );
+    await waitFor(() => {
+      expect(result.current.tasks.map((t) => t.taskId)).toEqual([
+        "active",
+        "done",
+      ]);
+    });
+
+    act(() => {
+      result.current.clearCompleted();
+    });
+    await waitFor(() => {
+      expect(result.current.tasks.map((t) => t.taskId)).toEqual(["active"]);
+    });
+  });
+
+  it("clearCompleted() is a safe no-op when state is null", () => {
+    const { result } = renderHook(() => useManagedRequestorTasks(client, null));
+    expect(() => result.current.clearCompleted()).not.toThrow();
+  });
 });
diff --git a/clients/web/src/test/core/react/useServers.test.tsx b/clients/web/src/test/core/react/useServers.test.tsx
index 9e2adc88..3661a11f 100644
--- a/clients/web/src/test/core/react/useServers.test.tsx
+++ b/clients/web/src/test/core/react/useServers.test.tsx
@@ -391,6 +391,7 @@ describe("useServers", () => {
         metadata: [{ key: "trace", value: "abc" }],
         connectionTimeout: 5000,
         requestTimeout: 30000,
+        taskTtl: 30000,
       });
     });
 
@@ -400,6 +401,7 @@ describe("useServers", () => {
         metadata: [{ key: "trace", value: "abc" }],
         connectionTimeout: 5000,
         requestTimeout: 30000,
+        taskTtl: 30000,
       });
     });
     const stored = readConfig(h.configPath).mcpServers
@@ -414,6 +416,7 @@ describe("useServers", () => {
     expect(stored.metadata).toEqual([{ key: "trace", value: "abc" }]);
     expect(stored.connectionTimeout).toBe(5000);
     expect(stored.requestTimeout).toBe(30000);
+    expect(stored.taskTtl).toBe(30000);
   });
 
   it("updateServerSettings throws when the target id does not exist (server-side 404)", async () => {
@@ -429,6 +432,7 @@ describe("useServers", () => {
           metadata: [],
           connectionTimeout: 0,
           requestTimeout: 0,
+          taskTtl: 0,
         });
       }),
     ).rejects.toThrow(/not found/);
@@ -475,6 +479,8 @@ describe("useServers", () => {
       metadata: [],
       connectionTimeout: 0,
       requestTimeout: 0,
+      // Absent taskTtl on disk reads back as the product default for the form.
+      taskTtl: 60000,
     });
   });
 
diff --git a/clients/web/src/test/integration/mcp/inspectorClient.test.ts b/clients/web/src/test/integration/mcp/inspectorClient.test.ts
index a43f2346..61c29693 100644
--- a/clients/web/src/test/integration/mcp/inspectorClient.test.ts
+++ b/clients/web/src/test/integration/mcp/inspectorClient.test.ts
@@ -319,6 +319,7 @@ describe("InspectorClient", () => {
             metadata: [],
             connectionTimeout: 50,
             requestTimeout: 0,
+            taskTtl: 0,
           },
         },
       );
@@ -3607,6 +3608,75 @@ describe("InspectorClient", () => {
       expect(task).toHaveProperty("ttl");
     });
 
+    it("emits requestorTaskProgress tagged with the owning taskId during a task-augmented call", async () => {
+      // Core-side progress→task correlation (#1422): the wrapped onprogress in
+      // callToolStream tags each tick with the taskId it owns, so App can map
+      // progress to the right TaskCard. The progress_task tool emits 5 ticks.
+      const progressEvents: Array<{ taskId: string; progress: Progress }> = [];
+      client!.addEventListener(
+        "requestorTaskProgress",
+        (event: TypedEvent<"requestorTaskProgress">) => {
+          progressEvents.push(event.detail);
+        },
+      );
+
+      // Capture the created taskId from the toolCall event stream for comparison.
+      let createdTaskId: string | undefined;
+      client!.addEventListener(
+        "toolCallTaskUpdated",
+        (event: TypedEvent<"toolCallTaskUpdated">) => {
+          createdTaskId ??= event.detail.taskId;
+        },
+      );
+
+      const progressTool = await getTool(client!, "progress_task");
+      const result = await client!.callToolStream(progressTool, {
+        message: "with progress",
+      });
+      expect(result.success).toBe(true);
+
+      expect(progressEvents.length).toBeGreaterThan(0);
+      // Every tick is tagged with the same (and the correct) task id.
+      const taskIds = new Set(progressEvents.map((e) => e.taskId));
+      expect(taskIds.size).toBe(1);
+      const [taggedTaskId] = [...taskIds];
+      expect(typeof taggedTaskId).toBe("string");
+      expect(taggedTaskId!.length).toBeGreaterThan(0);
+      expect(taggedTaskId).toBe(createdTaskId);
+      // The payload carries the server's progress units.
+      expect(progressEvents.some((e) => e.progress.total === 5)).toBe(true);
+    });
+
+    it("does not emit requestorTaskProgress when progress is globally disabled", async () => {
+      // The callToolStream onprogress wrapper is gated on `this.progress`, so a
+      // client with progress disabled neither requests a progress token nor
+      // emits requestorTaskProgress — task calls respect the same toggle as
+      // every other call path. The task still completes.
+      const noProgressClient = new InspectorClient(
+        { type: "sse", url: server!.url },
+        { environment: { transport: createTransportNode }, progress: false },
+      );
+      await noProgressClient.connect();
+      try {
+        const progressEvents: Array<{ taskId: string; progress: Progress }> =
+          [];
+        noProgressClient.addEventListener(
+          "requestorTaskProgress",
+          (event: TypedEvent<"requestorTaskProgress">) => {
+            progressEvents.push(event.detail);
+          },
+        );
+        const progressTool = await getTool(noProgressClient, "progress_task");
+        const result = await noProgressClient.callToolStream(progressTool, {
+          message: "no progress",
+        });
+        expect(result.success).toBe(true);
+        expect(progressEvents).toHaveLength(0);
+      } finally {
+        await noProgressClient.disconnect();
+      }
+    });
+
     it("should get task by taskId", async () => {
       // First create a task
       const simpleTaskByIdTool = await getTool(client!, "simple_task");
diff --git a/clients/web/src/test/integration/mcp/node/transport.test.ts b/clients/web/src/test/integration/mcp/node/transport.test.ts
index fb36011c..56abb830 100644
--- a/clients/web/src/test/integration/mcp/node/transport.test.ts
+++ b/clients/web/src/test/integration/mcp/node/transport.test.ts
@@ -216,6 +216,7 @@ describe("Transport", () => {
           metadata: [],
           connectionTimeout: 0,
           requestTimeout: 0,
+          taskTtl: 0,
         };
 
         const fetchRequests: FetchRequestEntryBase[] = [];
@@ -267,6 +268,7 @@ describe("Transport", () => {
           metadata: [],
           connectionTimeout: 0,
           requestTimeout: 0,
+          taskTtl: 0,
         };
 
         const fetchRequests: FetchRequestEntryBase[] = [];
@@ -308,6 +310,7 @@ describe("Transport", () => {
         metadata: [],
         connectionTimeout: 0,
         requestTimeout: 0,
+        taskTtl: 0,
       };
       const result = createTransportNode(config, { settings });
       // Just exercise the empty-headers path — no transport construction
diff --git a/clients/web/src/test/integration/mcp/remote/transport.test.ts b/clients/web/src/test/integration/mcp/remote/transport.test.ts
index 2a160a55..61dfff7f 100644
--- a/clients/web/src/test/integration/mcp/remote/transport.test.ts
+++ b/clients/web/src/test/integration/mcp/remote/transport.test.ts
@@ -410,6 +410,7 @@ describe("Remote transport e2e", () => {
         metadata: [],
         connectionTimeout: 0,
         requestTimeout: 0,
+        taskTtl: 0,
       };
 
       const createTransport = createRemoteTransport({ baseUrl, authToken });
diff --git a/core/mcp/inspectorClient.ts b/core/mcp/inspectorClient.ts
index b99cb586..b9125b05 100644
--- a/core/mcp/inspectorClient.ts
+++ b/core/mcp/inspectorClient.ts
@@ -1517,16 +1517,43 @@ export class InspectorClient extends InspectorClientEventTarget {
       if (taskOptions?.ttl != null) {
         streamParams.task = { ttl: taskOptions.ttl };
       }
-      const stream = this.client.experimental.tasks.callToolStream(
-        streamParams as CallToolRequest["params"],
-        undefined, // Use default CallToolResultSchema
-        this.getRequestOptions(metadata?.progressToken),
-      );
 
       let finalResult: CallToolResult | undefined;
       let taskId: string | undefined;
       let error: Error | undefined;
 
+      // Correlate progress → task. getRequestOptions already wires onprogress to
+      // dispatch the generic progressNotification (keyed by the caller's
+      // progressToken). Wrap it so each tick that arrives after the task is
+      // created also dispatches requestorTaskProgress tagged with the taskId
+      // this stream owns — the only place that mapping is known. Ticks before
+      // taskCreated (rare) just fall through to the generic event.
+      //
+      // Gate on `this.progress`, mirroring getRequestOptions: when progress is
+      // globally disabled there's no inner handler to wrap, and we must not
+      // attach one here either — doing so would request a progress token (and
+      // emit requestorTaskProgress) for task calls only, bypassing the toggle
+      // that governs every other call path.
+      const requestOptions = this.getRequestOptions(metadata?.progressToken);
+      if (this.progress) {
+        const innerOnProgress = requestOptions.onprogress;
+        requestOptions.onprogress = (progress: Progress) => {
+          innerOnProgress?.(progress);
+          if (taskId) {
+            this.dispatchTypedEvent("requestorTaskProgress", {
+              taskId,
+              progress,
+            });
+          }
+        };
+      }
+
+      const stream = this.client.experimental.tasks.callToolStream(
+        streamParams as CallToolRequest["params"],
+        undefined, // Use default CallToolResultSchema
+        requestOptions,
+      );
+
       // Iterate through the async generator
       for await (const message of stream) {
         switch (message.type) {
diff --git a/core/mcp/inspectorClientEventTarget.ts b/core/mcp/inspectorClientEventTarget.ts
index d45c1850..c09754d8 100644
--- a/core/mcp/inspectorClientEventTarget.ts
+++ b/core/mcp/inspectorClientEventTarget.ts
@@ -114,6 +114,13 @@ export interface InspectorClientEventMap {
     error?: McpError;
   };
   taskCancelled: { taskId: string };
+  /**
+   * Fired from callToolStream when a progress notification arrives for a
+   * task-augmented tool call, tagged with the taskId callToolStream owns so
+   * consumers can correlate progress → task (the generic progressNotification
+   * event carries only the caller's progressToken, not the taskId).
+   */
+  requestorTaskProgress: { taskId: string; progress: Progress };
   tasksChange: Task[];
   // Signal events (no payload)
   connect: void;
diff --git a/core/mcp/remote/node/server.ts b/core/mcp/remote/node/server.ts
index c6cddaa6..abb6c730 100644
--- a/core/mcp/remote/node/server.ts
+++ b/core/mcp/remote/node/server.ts
@@ -25,6 +25,7 @@ import { streamSSE } from "hono/streaming";
 import { watch as chokidarWatch, type FSWatcher } from "chokidar";
 import { createTransportNode } from "../../node/transport.js";
 import type { RemoteConnectRequest, RemoteSendRequest } from "../types.js";
+import { DEFAULT_TASK_TTL_MS } from "../../types.js";
 import type {
   InspectorServerSettings,
   MCPConfig,
@@ -939,6 +940,13 @@ export function createRemoteApp(
         );
         delete valObj.requestTimeout;
       }
+      if ("taskTtl" in valObj && !isNonNegNumber(valObj.taskTtl)) {
+        logWarn(
+          { route: "/api/servers", id, droppedKey: "taskTtl" },
+          "Dropping malformed `taskTtl` field — expected non-negative number.",
+        );
+        delete valObj.taskTtl;
+      }
       if ("oauth" in valObj && !isOauthObject(valObj.oauth)) {
         logWarn(
           { route: "/api/servers", id, droppedKey: "oauth" },
@@ -1068,6 +1076,17 @@ export function createRemoteApp(
         error: "settings.requestTimeout must be a non-negative number",
       };
     }
+    // taskTtl is optional on the wire (older clients won't send it); when
+    // present it must be a non-negative number, otherwise it defaults below.
+    if (
+      obj.taskTtl !== undefined &&
+      (typeof obj.taskTtl !== "number" || obj.taskTtl < 0)
+    ) {
+      return {
+        ok: false,
+        error: "settings.taskTtl must be a non-negative number",
+      };
+    }
     for (const optional of [
       "oauthClientId",
       "oauthClientSecret",
@@ -1089,6 +1108,12 @@ export function createRemoteApp(
       metadata: obj.metadata as { key: string; value: string }[],
       connectionTimeout: obj.connectionTimeout as number,
       requestTimeout: obj.requestTimeout as number,
+      // Absent → product default, matching the read side
+      // (storedFieldsToInspectorSettings). The default is the omit-sentinel in
+      // inspectorSettingsToStoredFields, so this won't write a spurious taskTtl
+      // to disk for a client that didn't send one.
+      taskTtl:
+        typeof obj.taskTtl === "number" ? obj.taskTtl : DEFAULT_TASK_TTL_MS,
     };
     if (typeof obj.oauthClientId === "string" && obj.oauthClientId !== "") {
       value.oauthClientId = obj.oauthClientId;
diff --git a/core/mcp/serverList.ts b/core/mcp/serverList.ts
index d12f6f7d..ce8de3be 100644
--- a/core/mcp/serverList.ts
+++ b/core/mcp/serverList.ts
@@ -5,6 +5,7 @@
  * remote-server route handlers.
  */
 
+import { DEFAULT_TASK_TTL_MS } from "./types.js";
 import type {
   InspectorServerSettings,
   MCPConfig,
@@ -64,7 +65,12 @@ export function normalizeServerType(
  */
 type StoredInspectorFields = Pick<
   StoredMCPServer,
-  "headers" | "metadata" | "connectionTimeout" | "requestTimeout" | "oauth"
+  | "headers"
+  | "metadata"
+  | "connectionTimeout"
+  | "requestTimeout"
+  | "taskTtl"
+  | "oauth"
 >;
 
 /**
@@ -87,6 +93,7 @@ export function storedFieldsToInspectorSettings(
     stored.metadata !== undefined ||
     stored.connectionTimeout !== undefined ||
     stored.requestTimeout !== undefined ||
+    stored.taskTtl !== undefined ||
     stored.oauth !== undefined;
   if (!hasAny) return undefined;
 
@@ -99,6 +106,9 @@ export function storedFieldsToInspectorSettings(
     metadata: stored.metadata ?? [],
     connectionTimeout: stored.connectionTimeout ?? 0,
     requestTimeout: stored.requestTimeout ?? 0,
+    // Unlike the timeouts (0 = "SDK default"), task TTL has a concrete product
+    // default so the form shows it and "Run as task" has a value to send.
+    taskTtl: stored.taskTtl ?? DEFAULT_TASK_TTL_MS,
   };
   // Truthiness drops empty-string OAuth fields — mirrors the write-side
   // coercion in `validateSettings` (server.ts) so a round-trip can't
@@ -148,6 +158,13 @@ export function inspectorSettingsToStoredFields(
   if (settings.requestTimeout > 0) {
     out.requestTimeout = settings.requestTimeout;
   }
+  // Persist taskTtl only when it's a non-default positive value. The product
+  // default (DEFAULT_TASK_TTL_MS) is the omit-sentinel here — an absent field
+  // reads back as the default (above), so writing the default would inject it
+  // into hand-edited files that never had it and break byte-stable round-trips.
+  if (settings.taskTtl > 0 && settings.taskTtl !== DEFAULT_TASK_TTL_MS) {
+    out.taskTtl = settings.taskTtl;
+  }
 
   const oauthFields: {
     clientId?: string;
@@ -184,6 +201,7 @@ const INSPECTOR_FIELD_KEY_MAP = {
   metadata: true,
   connectionTimeout: true,
   requestTimeout: true,
+  taskTtl: true,
   oauth: true,
 } as const satisfies Record<keyof StoredInspectorFields, true>;
 
diff --git a/core/mcp/state/managedRequestorTasksState.ts b/core/mcp/state/managedRequestorTasksState.ts
index 0a485a2a..190aa27d 100644
--- a/core/mcp/state/managedRequestorTasksState.ts
+++ b/core/mcp/state/managedRequestorTasksState.ts
@@ -18,6 +18,14 @@ import { mergeTaskIntoList } from "./mergeTaskIntoList.js";
 
 const MAX_PAGES = 100;
 
+// Terminal task states — a task in one of these can no longer change, so
+// "Clear Completed" targets exactly these.
+const TERMINAL_STATUSES: ReadonlySet<Task["status"]> = new Set([
+  "completed",
+  "failed",
+  "cancelled",
+]);
+
 export interface ManagedRequestorTasksStateEventMap {
   tasksChange: Task[];
 }
@@ -31,6 +39,11 @@ export class ManagedRequestorTasksState extends TypedEventTarget<ManagedRequesto
   private tasks: Task[] = [];
   private client: InspectorClientProtocol | null = null;
   private unsubscribe: (() => void) | null = null;
+  // Task ids the user dismissed via clearCompleted(). Sticky for the session:
+  // these are filtered out of refresh() results and ignored by the live-merge
+  // handlers so a late status update (or a server that still lists the task)
+  // can't resurrect a cleared task. Reset on disconnect / destroy.
+  private dismissedTaskIds = new Set<string>();
 
   constructor(client: InspectorClientProtocol) {
     super();
@@ -44,6 +57,7 @@ export class ManagedRequestorTasksState extends TypedEventTarget<ManagedRequesto
     const onStatusChange = (): void => {
       if (this.client?.getStatus() === "disconnected") {
         this.tasks = [];
+        this.dismissedTaskIds.clear();
         this.dispatchTypedEvent("tasksChange", []);
       }
     };
@@ -51,6 +65,7 @@ export class ManagedRequestorTasksState extends TypedEventTarget<ManagedRequesto
       e: TypedEventGeneric<InspectorClientEventMap, "taskStatusChange">,
     ): void => {
       const { taskId, task } = e.detail;
+      if (this.dismissedTaskIds.has(taskId)) return;
       this.tasks = mergeTaskIntoList(this.tasks, taskId, task);
       this.dispatchTypedEvent("tasksChange", this.tasks);
     };
@@ -58,6 +73,7 @@ export class ManagedRequestorTasksState extends TypedEventTarget<ManagedRequesto
       e: TypedEventGeneric<InspectorClientEventMap, "requestorTaskUpdated">,
     ): void => {
       const { taskId, task } = e.detail;
+      if (this.dismissedTaskIds.has(taskId)) return;
       this.tasks = mergeTaskIntoList(this.tasks, taskId, task);
       this.dispatchTypedEvent("tasksChange", this.tasks);
     };
@@ -65,6 +81,7 @@ export class ManagedRequestorTasksState extends TypedEventTarget<ManagedRequesto
       e: TypedEventGeneric<InspectorClientEventMap, "taskCancelled">,
     ): void => {
       const { taskId } = e.detail;
+      if (this.dismissedTaskIds.has(taskId)) return;
       const idx = this.tasks.findIndex((t) => t.taskId === taskId);
       if (idx >= 0) {
         const next = [...this.tasks];
@@ -123,9 +140,12 @@ export class ManagedRequestorTasksState extends TypedEventTarget<ManagedRequesto
     let pageCount = 0;
     do {
       const result = await client.listRequestorTasks(cursor);
-      this.tasks = cursor
-        ? [...this.tasks, ...result.tasks]
-        : result.tasks;
+      // Filter out tasks the user dismissed via clearCompleted() so a server
+      // that still lists them (or an in-flight refresh) can't resurrect them.
+      const page = result.tasks.filter(
+        (t) => !this.dismissedTaskIds.has(t.taskId),
+      );
+      this.tasks = cursor ? [...this.tasks, ...page] : page;
       cursor = result.nextCursor;
       pageCount++;
       if (pageCount >= MAX_PAGES) {
@@ -138,9 +158,32 @@ export class ManagedRequestorTasksState extends TypedEventTarget<ManagedRequesto
     return this.getTasks();
   }
 
+  /**
+   * Drop terminal-state tasks (completed / failed / cancelled) from the list.
+   * Their ids are remembered in `dismissedTaskIds` so they stay gone for the
+   * rest of the session — a subsequent refresh() or live update won't bring
+   * them back. No-op (and no event) when there's nothing terminal to clear.
+   */
+  clearCompleted(): void {
+    const remaining: Task[] = [];
+    let dismissedAny = false;
+    for (const task of this.tasks) {
+      if (TERMINAL_STATUSES.has(task.status)) {
+        this.dismissedTaskIds.add(task.taskId);
+        dismissedAny = true;
+      } else {
+        remaining.push(task);
+      }
+    }
+    if (!dismissedAny) return;
+    this.tasks = remaining;
+    this.dispatchTypedEvent("tasksChange", this.tasks);
+  }
+
   destroy(): void {
     this.unsubscribe?.();
     this.unsubscribe = null;
     this.tasks = [];
+    this.dismissedTaskIds.clear();
   }
 }
diff --git a/core/mcp/types.ts b/core/mcp/types.ts
index a44375a3..b92c1bc4 100644
--- a/core/mcp/types.ts
+++ b/core/mcp/types.ts
@@ -102,6 +102,8 @@ export type StoredMCPServer = MCPServerConfig & {
   connectionTimeout?: number;
   /** Inspector-specific request timeout (ms). */
   requestTimeout?: number;
+  /** Inspector-specific TTL (ms) for tasks created via "Run as task". */
+  taskTtl?: number;
   /**
    * Pre-configured OAuth client credentials for HTTP transports. Nested to
    * match Claude Code's `.mcp.json` shape; lifted into the flat `oauthClientId`
@@ -341,6 +343,12 @@ export interface OAuthSettings {
   scopes: string;
 }
 
+/**
+ * Default TTL (ms) for tasks created via "Run as task". Mirrors v1/v1.5's
+ * `MCP_TASK_TTL` config default. Used when a server has no explicit `taskTtl`.
+ */
+export const DEFAULT_TASK_TTL_MS = 60000;
+
 /**
  * Runtime settings for a configured server. A subset of
  * InspectorClientOptions (v1.5) relevant to the settings form:
@@ -351,6 +359,8 @@ export interface InspectorServerSettings {
   metadata: { key: string; value: string }[];
   connectionTimeout: number;
   requestTimeout: number;
+  /** TTL (ms) for tasks created via "Run as task". Defaults to 60000. */
+  taskTtl: number;
   oauthClientId?: string;
   oauthClientSecret?: string;
   oauthScopes?: string;
diff --git a/core/react/useManagedRequestorTasks.ts b/core/react/useManagedRequestorTasks.ts
index 8c4f0f54..9084324c 100644
--- a/core/react/useManagedRequestorTasks.ts
+++ b/core/react/useManagedRequestorTasks.ts
@@ -10,6 +10,7 @@ import type { TypedEventGeneric } from "../mcp/typedEventTarget.js";
 export interface UseManagedRequestorTasksResult {
   tasks: Task[];
   refresh: () => Promise<Task[]>;
+  clearCompleted: () => void;
 }
 
 /**
@@ -54,5 +55,9 @@ export function useManagedRequestorTasks(
     return next;
   }, [client, managedRequestorTasksState]);
 
-  return { tasks, refresh };
+  const clearCompleted = useCallback((): void => {
+    managedRequestorTasksState?.clearCompleted();
+  }, [managedRequestorTasksState]);
+
+  return { tasks, refresh, clearCompleted };
 }