Add close button to pending and error preview states

The OK-state preview already had its X button (inside the panel
component itself). Pending and error states were inline cards in
renderReadState / renderPreview with no way to dismiss them, so a
user who submitted bad input to a resource template or prompt was
stuck staring at the error until they picked a different sidebar
item. Adds a top-left CloseButton row to both states on both screens,
wired to the same handleClosePreview handler — so the template form
or argument form re-appears on close just like it does from the OK
state.

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

Author: cliffhall

clients/web/src/components/screens/PromptsScreen/PromptsScreen.test.tsx

@@ -201,6 +201,28 @@ describe("PromptsScreen", () => {
     expect(screen.getByPlaceholderText("Enter y...")).toHaveValue("");
   });
 
+  it("closing the preview from the error state brings the form back", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <PromptsScreen
+        {...baseProps}
+        getPromptState={{
+          status: "error",
+          promptName: "summarize",
+          error: "Bad input",
+        }}
+      />,
+    );
+    await user.click(screen.getByText("summarize"));
+    await user.type(screen.getByPlaceholderText("Enter topic..."), "x");
+    await user.click(screen.getByRole("button", { name: "Get Prompt" }));
+    expect(screen.getByText("Prompt Error")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Close messages" }));
+    expect(
+      screen.getByRole("button", { name: "Get Prompt" }),
+    ).toBeInTheDocument();
+  });
+
   it("closing the preview for an arg-bearing prompt brings the form back", async () => {
     const user = userEvent.setup();
     renderWithMantine(

clients/web/src/components/screens/PromptsScreen/PromptsScreen.tsx

@@ -1,5 +1,14 @@
 import { useState } from "react";
-import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
+import {
+  Alert,
+  Card,
+  CloseButton,
+  Flex,
+  Group,
+  Loader,
+  Stack,
+  Text,
+} from "@mantine/core";
 import type {
   GetPromptResult,
   Prompt,
@@ -166,19 +175,35 @@ export function PromptsScreen({
     if (getPromptState.status === "pending") {
       return (
         <PreviewCard>
-          <Stack align="center" py="xl">
-            <Loader size="sm" />
-            <Text c="dimmed">Loading prompt...</Text>
+          <Stack gap="md">
+            <Group justify="flex-start">
+              <CloseButton
+                aria-label="Close messages"
+                onClick={handleClosePreview}
+              />
+            </Group>
+            <Stack align="center" py="xl">
+              <Loader size="sm" />
+              <Text c="dimmed">Loading prompt...</Text>
+            </Stack>
           </Stack>
         </PreviewCard>
       );
     }
     if (getPromptState.status === "error") {
       return (
         <PreviewCard>
-          <Alert color="red" variant="light" title="Prompt Error">
-            {getPromptState.error ?? "Failed to get prompt"}
-          </Alert>
+          <Stack gap="md">
+            <Group justify="flex-start">
+              <CloseButton
+                aria-label="Close messages"
+                onClick={handleClosePreview}
+              />
+            </Group>
+            <Alert color="red" variant="light" title="Prompt Error">
+              {getPromptState.error ?? "Failed to get prompt"}
+            </Alert>
+          </Stack>
         </PreviewCard>
       );
     }

clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx

@@ -210,6 +210,39 @@ describe("ResourcesScreen", () => {
     ).toBeInTheDocument();
   });
 
+  it("closing the preview from the error state returns to the template form", async () => {
+    const user = userEvent.setup();
+    const templates: ResourceTemplate[] = [
+      { uriTemplate: "demo://resource/dynamic/text/{id}", name: "Dynamic" },
+    ];
+    const { rerender } = renderWithMantine(
+      <ResourcesScreen {...baseProps} templates={templates} />,
+    );
+    await user.click(screen.getByText("Templates (1)"));
+    await user.click(screen.getByText("Dynamic"));
+    await user.type(screen.getByLabelText("id"), "asdf");
+    await user.click(screen.getByRole("button", { name: "Read Resource" }));
+
+    // Server rejects the URI.
+    rerender(
+      <ResourcesScreen
+        {...baseProps}
+        templates={templates}
+        readState={{
+          status: "error",
+          uri: "demo://resource/dynamic/text/asdf",
+          error: "MCP error -32603: Unknown resource",
+        }}
+      />,
+    );
+    expect(screen.getByText("Read Error")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Close preview" }));
+    // The template form is restored so the user can fix their input.
+    expect(
+      screen.getByRole("button", { name: "Read Resource" }),
+    ).toBeInTheDocument();
+  });
+
   it("closing the preview for a plain resource returns to the empty state", async () => {
     const user = userEvent.setup();
     renderWithMantine(

clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx

@@ -1,5 +1,14 @@
 import { useState } from "react";
-import { Alert, Card, Flex, Loader, Stack, Text } from "@mantine/core";
+import {
+  Alert,
+  Card,
+  CloseButton,
+  Flex,
+  Group,
+  Loader,
+  Stack,
+  Text,
+} from "@mantine/core";
 import type {
   ReadResourceResult,
   Resource,
@@ -174,9 +183,17 @@ export function ResourcesScreen({
     if (readState.status === "pending") {
       return (
         <PreviewCard>
-          <Stack align="center" py="xl">
-            <Loader size="sm" />
-            <Text c="dimmed">Reading resource...</Text>
+          <Stack gap="md">
+            <Group justify="flex-start">
+              <CloseButton
+                aria-label="Close preview"
+                onClick={handleClosePreview}
+              />
+            </Group>
+            <Stack align="center" py="xl">
+              <Loader size="sm" />
+              <Text c="dimmed">Reading resource...</Text>
+            </Stack>
           </Stack>
         </PreviewCard>
       );
@@ -185,9 +202,17 @@ export function ResourcesScreen({
     if (readState.status === "error") {
       return (
         <PreviewCard>
-          <Alert color="red" variant="light" title="Read Error">
-            {readState.error ?? "Failed to read resource"}
-          </Alert>
+          <Stack gap="md">
+            <Group justify="flex-start">
+              <CloseButton
+                aria-label="Close preview"
+                onClick={handleClosePreview}
+              />
+            </Group>
+            <Alert color="red" variant="light" title="Read Error">
+              {readState.error ?? "Failed to read resource"}
+            </Alert>
+          </Stack>
         </PreviewCard>
       );
     }