Add close (X) buttons to ResourcePreviewPanel and PromptMessagesDisplay

A top-left CloseButton dismisses the preview panel. The host screen
decides what to fall back to:

- ResourcesScreen remembers the originating template URI when the user
  reads from a template form (originatingTemplateUri); closing the
  preview restores the template form. Plain-resource reads (sidebar
  selection) just empty the selection and return to the empty state.
  Picking a different template / resource from the sidebar clears the
  back-trail.
- PromptsScreen flips submittedFor back to undefined when the closed
  prompt has arguments — the argument form re-renders with the
  user's values preserved so they can edit and re-submit. No-arg
  prompts have nothing to fall back to, so the selection is dropped
  and the empty state appears.

The X button is hidden when the host omits onClose, so callers that
don't want a dismiss control keep their existing rendering.

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

Author: cliffhall

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

@@ -46,4 +46,21 @@ describe("PromptMessagesDisplay", () => {
     await user.click(screen.getByRole("button", { name: "Copy All" }));
     expect(onCopyAll).toHaveBeenCalledTimes(1);
   });
+
+  it("renders a close button when onClose is provided and invokes it on click", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    renderWithMantine(
+      <PromptMessagesDisplay messages={messages} onClose={onClose} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Close messages" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render a close button when onClose is omitted", () => {
+    renderWithMantine(<PromptMessagesDisplay messages={messages} />);
+    expect(
+      screen.queryByRole("button", { name: "Close messages" }),
+    ).not.toBeInTheDocument();
+  });
 });

clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx

@@ -1,10 +1,24 @@
-import { Button, Group, ScrollArea, Stack, Text, Title } from "@mantine/core";
+import {
+  Button,
+  CloseButton,
+  Group,
+  ScrollArea,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import type { PromptMessage } from "@modelcontextprotocol/sdk/types.js";
 import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
 
 export interface PromptMessagesDisplayProps {
   messages: PromptMessage[];
   onCopyAll?: () => void;
+  /**
+   * When provided, a top-left X button dismisses the panel. The host
+   * (`PromptsScreen`) decides what to show in its place — typically
+   * the prompt's argument form (if it has arguments) or the empty state.
+   */
+  onClose?: () => void;
 }
 
 const CopyAllButton = Button.withProps({
@@ -26,6 +40,11 @@ const HeaderRow = Group.withProps({
   flex: "0 0 auto",
 });
 
+const HeaderLeft = Group.withProps({
+  gap: "xs",
+  wrap: "nowrap",
+});
+
 // `0 1 auto` lets the scroll region shrink (but not grow) when the card
 // hits its mah. `mih: 0` is required for flex children to shrink below
 // their content's intrinsic height.
@@ -45,11 +64,17 @@ const MessagesStack = Stack.withProps({
 export function PromptMessagesDisplay({
   messages,
   onCopyAll,
+  onClose,
 }: PromptMessagesDisplayProps) {
   return (
     <PanelStack>
       <HeaderRow>
-        <Title order={4}>Messages</Title>
+        <HeaderLeft>
+          {onClose && (
+            <CloseButton aria-label="Close messages" onClick={onClose} />
+          )}
+          <Title order={4}>Messages</Title>
+        </HeaderLeft>
         {onCopyAll && messages.length > 0 && (
           <CopyAllButton onClick={onCopyAll}>Copy All</CopyAllButton>
         )}

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

@@ -237,6 +237,23 @@ describe("ResourcePreviewPanel", () => {
     ).toBeInTheDocument();
   });
 
+  it("renders a close button when onClose is provided and invokes it on click", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    renderWithMantine(
+      <ResourcePreviewPanel {...baseProps} onClose={onClose} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Close preview" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not render a close button when onClose is omitted", () => {
+    renderWithMantine(<ResourcePreviewPanel {...baseProps} />);
+    expect(
+      screen.queryByRole("button", { name: "Close preview" }),
+    ).not.toBeInTheDocument();
+  });
+
   it("does not render plain-text content as markdown even with markdown-looking text", () => {
     renderWithMantine(
       <ResourcePreviewPanel

clients/web/src/components/groups/ResourcePreviewPanel/ResourcePreviewPanel.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  CloseButton,
   Flex,
   Group,
   ScrollArea,
@@ -26,6 +27,12 @@ export interface ResourcePreviewPanelProps {
   onRefresh: () => void;
   onSubscribe: () => void;
   onUnsubscribe: () => void;
+  /**
+   * When provided, a top-left X button dismisses the panel. The host
+   * (`ResourcesScreen`) decides what to show in its place — either the
+   * originating template form or the empty state.
+   */
+  onClose?: () => void;
 }
 
 function toContentBlock(
@@ -57,6 +64,11 @@ const HeaderRow = Group.withProps({
   flex: "0 0 auto",
 });
 
+const HeaderLeft = Group.withProps({
+  gap: "xs",
+  wrap: "nowrap",
+});
+
 const UriGroup = Group.withProps({
   gap: "xs",
   wrap: "nowrap",
@@ -159,14 +171,20 @@ export function ResourcePreviewPanel({
   onRefresh,
   onSubscribe,
   onUnsubscribe,
+  onClose,
 }: ResourcePreviewPanelProps) {
   const { uri, annotations } = resource;
   const mimeType = effectiveMime(contents[0]?.mimeType, resource);
 
   return (
     <PanelStack>
       <HeaderRow>
-        <Title order={4}>Resource</Title>
+        <HeaderLeft>
+          {onClose && (
+            <CloseButton aria-label="Close preview" onClick={onClose} />
+          )}
+          <Title order={4}>Resource</Title>
+        </HeaderLeft>
         <UriGroup>
           <UriText>{uri}</UriText>
           <CopyButton value={uri} />

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

@@ -201,6 +201,55 @@ describe("PromptsScreen", () => {
     expect(screen.getByPlaceholderText("Enter y...")).toHaveValue("");
   });
 
+  it("closing the preview for an arg-bearing prompt brings the form back", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <PromptsScreen
+        {...baseProps}
+        getPromptState={{
+          status: "ok",
+          promptName: "summarize",
+          result: {
+            messages: [{ role: "user", content: { type: "text", text: "hi" } }],
+          },
+        }}
+      />,
+    );
+    await user.click(screen.getByText("summarize"));
+    await user.type(screen.getByPlaceholderText("Enter topic..."), "math");
+    await user.click(screen.getByRole("button", { name: "Get Prompt" }));
+    // Preview is showing now — close it.
+    await user.click(screen.getByRole("button", { name: "Close messages" }));
+    expect(
+      screen.getByRole("button", { name: "Get Prompt" }),
+    ).toBeInTheDocument();
+    // Argument value is preserved so the user can edit + re-submit.
+    expect(screen.getByPlaceholderText("Enter topic...")).toHaveValue("math");
+  });
+
+  it("closing the preview for a no-arg prompt drops the selection", async () => {
+    const user = userEvent.setup();
+    renderWithMantine(
+      <PromptsScreen
+        {...baseProps}
+        prompts={noArgPrompts}
+        getPromptState={{
+          status: "ok",
+          promptName: "ping",
+          result: {
+            messages: [{ role: "user", content: { type: "text", text: "hi" } }],
+          },
+        }}
+      />,
+    );
+    await user.click(screen.getByText("ping"));
+    await user.click(screen.getByRole("button", { name: "Close messages" }));
+    // No form to fall back to → empty state.
+    expect(
+      screen.getByText("Select a prompt to view details"),
+    ).toBeInTheDocument();
+  });
+
   it("threads onCompleteArgument with a ref/prompt envelope", async () => {
     const user = userEvent.setup();
     const onCompleteArgument = vi

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

@@ -138,6 +138,19 @@ export function PromptsScreen({
     onGetPrompt(selectedPrompt.name, argumentValues);
   }
 
+  function handleClosePreview() {
+    // For prompts with arguments, flip back to the form so the user can
+    // edit and re-submit (argumentValues are preserved). For no-arg
+    // prompts there's no form to return to, so drop the selection and
+    // fall back to the empty state.
+    if (selectedPrompt && hasArguments(selectedPrompt)) {
+      setSubmittedFor(undefined);
+    } else {
+      setSelectedPromptName(undefined);
+      setSubmittedFor(undefined);
+    }
+  }
+
   // The preview is "active" when we've submitted (or auto-fetched) the
   // currently-selected prompt and the parent's result/pending/error state
   // matches. Without the name check, a stale result from a previous
@@ -175,6 +188,7 @@ export function PromptsScreen({
           <PromptMessagesDisplay
             messages={getPromptState.result.messages}
             onCopyAll={onCopyMessages}
+            onClose={handleClosePreview}
           />
         </PreviewCard>
       );

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

@@ -165,6 +165,70 @@ describe("ResourcesScreen", () => {
     expect(onSubscribeResource).toHaveBeenCalledWith("file:///x");
   });
 
+  it("closing the preview returns to the originating template form", async () => {
+    const user = userEvent.setup();
+    const onReadResource = vi.fn();
+    const templates: ResourceTemplate[] = [
+      { uriTemplate: "file:///{path}", name: "files" },
+    ];
+    const { rerender } = renderWithMantine(
+      <ResourcesScreen
+        {...baseProps}
+        templates={templates}
+        onReadResource={onReadResource}
+      />,
+    );
+    // Open the template form.
+    await user.click(screen.getByText("Templates (1)"));
+    await user.click(screen.getByText("files"));
+    // Submit it — the screen calls onReadResource and remembers the
+    // template URI for the close handler.
+    await user.type(screen.getByLabelText("path"), "alpha");
+    await user.click(screen.getByRole("button", { name: "Read Resource" }));
+    expect(onReadResource).toHaveBeenCalledWith("file:///alpha");
+
+    // Parent re-renders with the read result; the preview appears.
+    rerender(
+      <ResourcesScreen
+        {...baseProps}
+        templates={templates}
+        onReadResource={onReadResource}
+        readState={{
+          status: "ok",
+          uri: "file:///alpha",
+          result: okResult,
+        }}
+      />,
+    );
+    expect(
+      screen.queryByRole("button", { name: "Read Resource" }),
+    ).not.toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Close preview" }));
+    // Closing brings the template form back.
+    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(
+      <ResourcesScreen
+        {...baseProps}
+        readState={{
+          status: "ok",
+          uri: "file:///x",
+          result: okResult,
+        }}
+      />,
+    );
+    await user.click(screen.getByText("x.txt"));
+    await user.click(screen.getByRole("button", { name: "Close preview" }));
+    expect(
+      screen.getByText("Select a resource to preview"),
+    ).toBeInTheDocument();
+  });
+
   it("invokes onUnsubscribeResource when already subscribed", async () => {
     const user = userEvent.setup();
     const onUnsubscribeResource = vi.fn();

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

@@ -110,6 +110,13 @@ export function ResourcesScreen({
   const [selectedTemplateUri, setSelectedTemplateUri] = useState<
     string | undefined
   >(undefined);
+  // Tracks which template (if any) produced the current preview so that
+  // closing the preview can restore the template form. Cleared when the
+  // user navigates to a non-template resource or picks a different
+  // template directly from the sidebar.
+  const [originatingTemplateUri, setOriginatingTemplateUri] = useState<
+    string | undefined
+  >(undefined);
 
   const selectedResource = selectedResourceUri
     ? resources.find((r) => r.uri === selectedResourceUri)
@@ -129,24 +136,38 @@ export function ResourcesScreen({
   function handleSelectResource(uri: string) {
     setSelectedTemplateUri(undefined);
     setSelectedResourceUri(uri);
+    setOriginatingTemplateUri(undefined);
     onReadResource(uri);
   }
 
   function handleSelectTemplate(uriTemplate: string) {
     setSelectedResourceUri(undefined);
     setSelectedTemplateUri(uriTemplate);
+    setOriginatingTemplateUri(undefined);
   }
 
   function handleReadResource(uri: string) {
     // Once the user reads (either from the template form or a refresh
     // inside the preview panel), hand the screen over to the preview:
     // clearing the template selection hides the template form so only
-    // the rendered resource is shown.
+    // the rendered resource is shown. We remember the template URI so
+    // closing the preview can restore the form.
+    if (selectedTemplateUri) {
+      setOriginatingTemplateUri(selectedTemplateUri);
+    }
     setSelectedTemplateUri(undefined);
     setSelectedResourceUri(uri);
     onReadResource(uri);
   }
 
+  function handleClosePreview() {
+    setSelectedResourceUri(undefined);
+    if (originatingTemplateUri) {
+      setSelectedTemplateUri(originatingTemplateUri);
+      setOriginatingTemplateUri(undefined);
+    }
+  }
+
   function renderReadState() {
     if (!readState) return null;
 
@@ -182,6 +203,7 @@ export function ResourcesScreen({
             onRefresh={() => handleReadResource(readResource.uri)}
             onSubscribe={() => onSubscribeResource(readResource.uri)}
             onUnsubscribe={() => onUnsubscribeResource(readResource.uri)}
+            onClose={handleClosePreview}
           />
         </PreviewCard>
       );