feat(web): add Mantine clear buttons to text inputs app-wide (#1333) (#1448)

* feat(web): add Mantine clear buttons to text inputs app-wide (#1333)

Add a clear (×) affordance to every user-editable text input across the
web client so a populated field can be reset in one click.

- Autocomplete: enable `clearable` by default via the theme
  (`theme/Autocomplete.ts`) — covers the prompt-argument and
  resource-template variable autocomplete branches.
- TextInput / Textarea: Mantine v8 does not expose a public `clearable`
  prop on these primitives (only the combobox-based components do), so
  add the clear button manually via `rightSection` + `CloseButton`
  (aria-label="Clear") shown only when the field has a value, wired to
  reset the field's controlled value to "".

Applied to sidebar search inputs (prompts, tools, apps, tasks, history,
resources, network, logs), prompt-argument and resource-template
variable inputs, the sampling response/model fields, server config &
settings forms, roots table, schema form, experimental features panel,
and the server.json import panel. Read-only/display Textareas
(OutputValidationModal, UrlElicitationErrorModal) are intentionally left
untouched.

Tests cover the clear behavior on representative inputs from each
category (sidebar search, prompt argument, resource-template variable,
sampling response, plus the config/settings forms).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): disable ServerConfigModal clear buttons while submitting

Address review #2 on #1448: the clear CloseButton sat in `rightSection`
with `rightSectionPointerEvents="auto"`, so it stayed clickable even
while the field was `disabled={submitting}`, letting a user wipe a field
mid-submit. Forward `disabled={submitting}` to each clear button so it
locks together with its input.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(web): remove redundant Auto-respond from SamplingRequestPanel

The sampling modal pre-loads its draft with the default stub result, and
"Send Response" sends that draft — so on an untouched form "Auto-respond"
did exactly the same thing as "Send Response", just with a fresh copy of
the same defaults. Drop the redundant button and its `onAutoRespond` prop;
"Send Response" now covers both the unedited (stub) and edited cases.

The InlineSamplingRequest variant keeps its Auto-respond button — there it
is the quick path versus "Edit & Send" (which opens this editable modal),
not a duplicate of an adjacent send action.

Updated PendingClientRequestModal wiring, stories, and tests accordingly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/ServerConfigModal/ServerConfigModal.test.tsx

@@ -1,10 +1,18 @@
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { waitFor } from "@testing-library/react";
+import { waitFor, within } from "@testing-library/react";
 import type { MCPServerConfig } from "@inspector/core/mcp/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { ServerConfigModal } from "./ServerConfigModal";
 
+/** Find the "Clear" button living in the rightSection of `input`'s field. */
+function clearButtonFor(input: HTMLElement): HTMLElement {
+  const root =
+    input.closest('[class*="mantine-TextInput-root"]') ??
+    input.closest('[class*="Input-wrapper"]');
+  return within(root as HTMLElement).getByRole("button", { name: "Clear" });
+}
+
 describe("ServerConfigModal", () => {
   function base(overrides: Partial<{ existingIds: string[] }> = {}) {
     return {
@@ -274,6 +282,114 @@ describe("ServerConfigModal", () => {
     });
   });
 
+  it("clears the Server ID field via its Clear button", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ServerConfigModal
+        {...base()}
+        mode="edit"
+        initialId="alpha"
+        initialConfig={{ type: "stdio", command: "node" }}
+      />,
+    );
+    const idInput = screen.getByLabelText(/Server ID/i);
+    expect(idInput).toHaveValue("alpha");
+    await user.click(clearButtonFor(idInput));
+    expect(idInput).toHaveValue("");
+  });
+
+  it("clears the Command field via its Clear button", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ServerConfigModal
+        {...base()}
+        mode="edit"
+        initialId="alpha"
+        initialConfig={{ type: "stdio", command: "node" }}
+      />,
+    );
+    const cmdInput = screen.getByLabelText(/Command/i);
+    expect(cmdInput).toHaveValue("node");
+    await user.click(clearButtonFor(cmdInput));
+    expect(cmdInput).toHaveValue("");
+  });
+
+  it("clears the URL field via its Clear button", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ServerConfigModal
+        {...base()}
+        mode="edit"
+        initialId="remote"
+        initialConfig={{ type: "sse", url: "https://x.test/sse" }}
+      />,
+    );
+    const urlInput = screen.getByLabelText(/^URL/);
+    expect(urlInput).toHaveValue("https://x.test/sse");
+    await user.click(clearButtonFor(urlInput));
+    expect(urlInput).toHaveValue("");
+  });
+
+  it("clears the Arguments field via its Clear button", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ServerConfigModal
+        {...base()}
+        mode="edit"
+        initialId="alpha"
+        initialConfig={{
+          type: "stdio",
+          command: "node",
+          args: ["server.js", "--port=3000"],
+        }}
+      />,
+    );
+    const argsInput = screen.getByLabelText(/Arguments/i);
+    expect(argsInput).toHaveValue("server.js\n--port=3000");
+    await user.click(clearButtonFor(argsInput));
+    expect(argsInput).toHaveValue("");
+  });
+
+  it("clears the Environment field via its Clear button", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ServerConfigModal
+        {...base()}
+        mode="edit"
+        initialId="alpha"
+        initialConfig={{
+          type: "stdio",
+          command: "node",
+          env: { DEBUG: "1" },
+        }}
+      />,
+    );
+    const envInput = screen.getByLabelText(/Environment/i);
+    expect(envInput).toHaveValue("DEBUG=1");
+    await user.click(clearButtonFor(envInput));
+    expect(envInput).toHaveValue("");
+  });
+
+  it("clears the Working directory field via its Clear button", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <ServerConfigModal
+        {...base()}
+        mode="edit"
+        initialId="alpha"
+        initialConfig={{
+          type: "stdio",
+          command: "node",
+          cwd: "/tmp/here",
+        }}
+      />,
+    );
+    const cwdInput = screen.getByLabelText(/Working directory/i);
+    expect(cwdInput).toHaveValue("/tmp/here");
+    await user.click(clearButtonFor(cwdInput));
+    expect(cwdInput).toHaveValue("");
+  });
+
   it("calls onClose when Cancel is clicked", async () => {
     const user = userEvent.setup();
     const props = base();