Port resource preview UX improvements to PromptsScreen (#1328)

Brings the prompt-fetching flow up to parity with the resource preview
work from #1326:

- Cap the argument-form pane at maw=40% so a bare input + button doesn't
  stretch across wide displays.
- Auto-fetch no-argument prompts the moment they're picked from the
  sidebar (handleSelectPrompt routes them straight to onGetPrompt({})),
  and hide the form once the user clicks Get Prompt — the result panel
  takes the same fixed-height column the resource preview uses.
- Apply the PreviewCard variant=preview pattern: card sizes to content
  but caps at viewport, PromptMessagesDisplay pins its header (flex 0 0
  auto) and lets the inner ScrollArea (flex 0 1 auto, mih 0) absorb
  overflow.
- Tag getPromptState with the prompt name in App.tsx so the screen can
  ignore a stale result whose name no longer matches the selection.
- MessageBubble now routes each content block through ContentViewer
  (markdown for text via mimeType="text/markdown", image/audio/resource
  via existing ContentViewer branches). Non-renderable block types
  (tool_use, tool_result) are filtered out; the role-label header keeps
  the bubble visible regardless.
- PromptArgumentsForm gains onCompleteArgument + completionsSupported;
  when both are set, each input becomes Mantine Autocomplete with the
  same per-arg AbortController + per-arg debounce timer pattern as
  ResourceTemplatePanel. PromptsScreen + InspectorView + App.tsx wire
  the callback to inspectorClient.getCompletions with a
  ref/prompt envelope.

Closes #1328.

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

Author: cliffhall

clients/web/src/App.tsx

@@ -455,13 +455,21 @@ function App() {
   const onGetPrompt = useCallback(
     async (name: string, args: Record<string, string>) => {
       if (!inspectorClient) return;
-      setGetPromptState({ status: "pending" });
+      // Tag the in-flight + final state with the prompt name so the
+      // PromptsScreen can guard against showing a stale result for a
+      // prompt the user has already navigated away from.
+      setGetPromptState({ status: "pending", promptName: name });
       try {
         const invocation = await inspectorClient.getPrompt(name, args);
-        setGetPromptState({ status: "ok", result: invocation.result });
+        setGetPromptState({
+          status: "ok",
+          promptName: name,
+          result: invocation.result,
+        });
       } catch (err) {
         setGetPromptState({
           status: "error",
+          promptName: name,
           error: err instanceof Error ? err.message : String(err),
         });
       }

clients/web/src/components/elements/MessageBubble/MessageBubble.test.tsx

@@ -7,17 +7,29 @@ import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { MessageBubble } from "./MessageBubble";
 
 describe("MessageBubble", () => {
-  it("renders a text sampling message", () => {
+  it("renders a text sampling message as markdown", () => {
     const message: SamplingMessage = {
       role: "user",
       content: { type: "text", text: "hello" },
     };
     renderWithMantine(<MessageBubble index={0} message={message} />);
     expect(screen.getByText("[0] role: user")).toBeInTheDocument();
-    expect(screen.getByText('"hello"')).toBeInTheDocument();
+    expect(screen.getByText("hello")).toBeInTheDocument();
   });
 
-  it("renders a copy button when there is text", () => {
+  it("renders markdown formatting in prompt text", () => {
+    const message: PromptMessage = {
+      role: "assistant",
+      content: { type: "text", text: "# Heading\n\nSome **bold** text" },
+    };
+    renderWithMantine(<MessageBubble index={0} message={message} />);
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Heading" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("bold")).toBeInTheDocument();
+  });
+
+  it("renders a copy button for text content via ContentViewer copyable", () => {
     const message: SamplingMessage = {
       role: "user",
       content: { type: "text", text: "hello" },
@@ -52,7 +64,7 @@ describe("MessageBubble", () => {
     );
   });
 
-  it("renders embedded resource text from a prompt message array", () => {
+  it("renders embedded resource text from a prompt message", () => {
     const message: PromptMessage = {
       role: "user",
       content: {
@@ -61,7 +73,7 @@ describe("MessageBubble", () => {
       },
     };
     renderWithMantine(<MessageBubble index={3} message={message} />);
-    expect(screen.getByText('"embedded"')).toBeInTheDocument();
+    expect(screen.getByText("embedded")).toBeInTheDocument();
   });
 
   it("renders blob resource placeholder", () => {
@@ -77,24 +89,39 @@ describe("MessageBubble", () => {
       },
     };
     renderWithMantine(<MessageBubble index={4} message={message} />);
-    expect(screen.getByText('"[resource: file:///b]"')).toBeInTheDocument();
+    expect(screen.getByText("[blob: file:///b]")).toBeInTheDocument();
   });
 
   it("renders resource_link content", () => {
     const message = {
       role: "user",
-      content: { type: "resource_link", uri: "ui://app" },
+      content: { type: "resource_link", uri: "ui://app", name: "Cool App" },
     } as unknown as PromptMessage;
     renderWithMantine(<MessageBubble index={5} message={message} />);
-    expect(screen.getByText('"[resource: ui://app]"')).toBeInTheDocument();
+    expect(screen.getByText("Cool App")).toBeInTheDocument();
   });
 
-  it("renders fallback for unknown content types", () => {
+  it("still renders the role label for unknown content types", () => {
     const message = {
       role: "user",
       content: { type: "weird" },
     } as unknown as SamplingMessage;
     renderWithMantine(<MessageBubble index={6} message={message} />);
-    expect(screen.getByText('"[weird]"')).toBeInTheDocument();
+    // ContentViewer returns null for unknown block types; the bubble's
+    // role-label header still renders so the message isn't invisible.
+    expect(screen.getByText("[6] role: user")).toBeInTheDocument();
+  });
+
+  it("renders multiple content blocks from an array", () => {
+    const message: PromptMessage = {
+      role: "user",
+      content: [
+        { type: "text", text: "first" },
+        { type: "text", text: "second" },
+      ] as unknown as PromptMessage["content"],
+    };
+    renderWithMantine(<MessageBubble index={7} message={message} />);
+    expect(screen.getByText("first")).toBeInTheDocument();
+    expect(screen.getByText("second")).toBeInTheDocument();
   });
 });

clients/web/src/components/elements/MessageBubble/MessageBubble.tsx

@@ -1,72 +1,47 @@
-import { Group, Image, Paper, Stack, Text } from "@mantine/core";
+import { Group, Paper, Stack, Text } from "@mantine/core";
 import type {
+  ContentBlock,
   PromptMessage,
   SamplingMessage,
 } from "@modelcontextprotocol/sdk/types.js";
-import { CopyButton } from "../CopyButton/CopyButton";
+import { ContentViewer } from "../ContentViewer/ContentViewer";
 
 export interface MessageBubbleProps {
   index: number;
   message: SamplingMessage | PromptMessage;
 }
 
-function buildDataUri(mimeType: string, data: string): string {
-  return `data:${mimeType};base64,${data}`;
-}
-
 function formatRoleLabel(index: number, role: string): string {
   return `[${index}] role: ${role}`;
 }
 
-function formatQuotedContent(content: string): string {
-  return `"${content}"`;
-}
+// PromptMessage/SamplingMessage content unions in the SDK are wider than
+// ContentBlock (they admit tool_use, tool_result, etc. for the agent
+// messages flowing into prompts). ContentViewer renders only the visual
+// subset; everything else is silently dropped here. The bubble's role
+// header keeps an empty message from being invisible.
+const RENDERABLE_TYPES = new Set([
+  "text",
+  "image",
+  "audio",
+  "resource",
+  "resource_link",
+]);
 
-interface ContentBlockRendered {
-  text: string;
-  imageUri?: string;
-  audioUri?: string;
-  audioMime?: string;
+function isRenderableBlock(block: unknown): block is ContentBlock {
+  if (typeof block !== "object" || block === null) return false;
+  const t = (block as { type?: string }).type;
+  return typeof t === "string" && RENDERABLE_TYPES.has(t);
 }
 
-function extractContent(
-  message: SamplingMessage | PromptMessage,
-): ContentBlockRendered {
-  const content = message.content;
-  const blocks = Array.isArray(content) ? content : [content];
-  let text = "";
-  let imageUri: string | undefined;
-  let audioUri: string | undefined;
-  let audioMime: string | undefined;
-
-  for (const block of blocks) {
-    switch (block.type) {
-      case "text":
-        text += block.text;
-        break;
-      case "image":
-        imageUri = buildDataUri(block.mimeType, block.data);
-        break;
-      case "audio":
-        audioUri = buildDataUri(block.mimeType, block.data);
-        audioMime = block.mimeType;
-        break;
-      case "resource":
-        text +=
-          "text" in block.resource
-            ? block.resource.text
-            : `[resource: ${block.resource.uri}]`;
-        break;
-      case "resource_link":
-        text += `[resource: ${block.uri}]`;
-        break;
-      default:
-        text += `[${block.type}]`;
-        break;
-    }
-  }
-
-  return { text, imageUri, audioUri, audioMime };
+// Prompt content blocks don't carry a mimeType on the text variant
+// (SDK `TextContent` is just `{ type: "text", text }`). Render text as
+// markdown by default so prompt prose with code fences, lists, and links
+// looks like prose rather than a preformatted dump. Image / audio blocks
+// already carry mimeType; ContentViewer routes them itself.
+function effectiveMimeForBlock(block: ContentBlock): string | undefined {
+  if (block.type === "text") return "text/markdown";
+  return undefined;
 }
 
 const BubbleContainer = Paper.withProps({
@@ -81,29 +56,29 @@ const RoleLabel = Text.withProps({
   ff: "monospace",
 });
 
-const PreviewImage = Image.withProps({
-  maw: 300,
-  radius: "sm",
-  mt: "xs",
+const HeaderRow = Group.withProps({
+  justify: "space-between",
 });
 
 export function MessageBubble({ index, message }: MessageBubbleProps) {
-  const { text, imageUri, audioUri, audioMime } = extractContent(message);
+  const content = message.content;
+  const rawBlocks = Array.isArray(content) ? content : [content];
+  const blocks = rawBlocks.filter(isRenderableBlock);
 
   return (
     <BubbleContainer>
       <Stack gap="xs">
-        <Group justify="space-between">
+        <HeaderRow>
           <RoleLabel>{formatRoleLabel(index, message.role)}</RoleLabel>
-          {text && <CopyButton value={text} />}
-        </Group>
-        {text && <Text size="sm">{formatQuotedContent(text)}</Text>}
-        {imageUri && <PreviewImage src={imageUri} />}
-        {audioUri && (
-          <audio controls>
-            <source src={audioUri} type={audioMime} />
-          </audio>
-        )}
+        </HeaderRow>
+        {blocks.map((block, blockIndex) => (
+          <ContentViewer
+            key={blockIndex}
+            block={block}
+            mimeType={effectiveMimeForBlock(block)}
+            copyable
+          />
+        ))}
       </Stack>
     </BubbleContainer>
   );

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

@@ -1,9 +1,37 @@
+import { useState } from "react";
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import type { Prompt } from "@modelcontextprotocol/sdk/types.js";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { PromptArgumentsForm } from "./PromptArgumentsForm";
 
+/**
+ * Wrapper that owns `argumentValues` state so completion tests can
+ * type multi-character input naturally — the production parent
+ * (PromptsScreen) is what holds this state, and the form is controlled
+ * via its onArgumentChange callback.
+ */
+function StatefulForm(
+  props: Omit<
+    React.ComponentProps<typeof PromptArgumentsForm>,
+    "argumentValues" | "onArgumentChange"
+  > & { initialValues?: Record<string, string> },
+) {
+  const { initialValues, ...rest } = props;
+  const [values, setValues] = useState<Record<string, string>>(
+    initialValues ?? {},
+  );
+  return (
+    <PromptArgumentsForm
+      {...rest}
+      argumentValues={values}
+      onArgumentChange={(name, value) =>
+        setValues((prev) => ({ ...prev, [name]: value }))
+      }
+    />
+  );
+}
+
 const promptNoArgs: Prompt = {
   name: "summarize",
   description: "Summarize the given text into key points",
@@ -143,4 +171,81 @@ describe("PromptArgumentsForm", () => {
     expect(screen.getByText("code-review")).toBeInTheDocument();
     expect(screen.getByText("Arguments")).toBeInTheDocument();
   });
+
+  describe("completions", () => {
+    it("calls onCompleteArgument (debounced) and surfaces values when supported", async () => {
+      const user = userEvent.setup();
+      const onCompleteArgument = vi
+        .fn<
+          (
+            argName: string,
+            value: string,
+            context: Record<string, string>,
+          ) => Promise<string[]>
+        >()
+        .mockResolvedValue(["alpha", "alphabet"]);
+
+      renderWithMantine(
+        <StatefulForm
+          prompt={promptWithArgs}
+          onGetPrompt={vi.fn()}
+          completionsSupported
+          onCompleteArgument={onCompleteArgument}
+        />,
+      );
+
+      await user.type(screen.getByRole("textbox", { name: /^text/ }), "al");
+      await new Promise((r) => setTimeout(r, 400));
+      expect(onCompleteArgument).toHaveBeenCalled();
+      expect(onCompleteArgument).toHaveBeenLastCalledWith("text", "al", {});
+      expect(await screen.findByText("alpha")).toBeInTheDocument();
+      expect(screen.getByText("alphabet")).toBeInTheDocument();
+    });
+
+    it("passes sibling argument values as completion context", async () => {
+      const user = userEvent.setup();
+      const onCompleteArgument = vi
+        .fn<
+          (
+            argName: string,
+            value: string,
+            context: Record<string, string>,
+          ) => Promise<string[]>
+        >()
+        .mockResolvedValue([]);
+
+      renderWithMantine(
+        <StatefulForm
+          prompt={promptWithArgs}
+          initialValues={{ targetLanguage: "es" }}
+          onGetPrompt={vi.fn()}
+          completionsSupported
+          onCompleteArgument={onCompleteArgument}
+        />,
+      );
+
+      await user.type(screen.getByRole("textbox", { name: /^text/ }), "h");
+      await new Promise((r) => setTimeout(r, 400));
+      // The completing arg ("text") is excluded from context; siblings ride along.
+      expect(onCompleteArgument).toHaveBeenLastCalledWith("text", "h", {
+        targetLanguage: "es",
+      });
+    });
+
+    it("does not call onCompleteArgument when completions are unsupported", async () => {
+      const user = userEvent.setup();
+      const onCompleteArgument = vi.fn();
+      renderWithMantine(
+        <StatefulForm
+          prompt={promptWithArgs}
+          onGetPrompt={vi.fn()}
+          completionsSupported={false}
+          onCompleteArgument={onCompleteArgument}
+        />,
+      );
+      await user.type(screen.getByPlaceholderText("Enter text..."), "ab");
+      await new Promise((r) => setTimeout(r, 400));
+      expect(onCompleteArgument).not.toHaveBeenCalled();
+    });
+  });
 });