fix(ui-rewrite): reset prompt preview when Code-tab language changes (#5665)

Switching snippet language on the prompt details drawer left the previous
run's response body visible and kept the button on "Re-run". The Preview
state is prompt-scoped, but the visible affordances sit outside the language
tabs — so state persisted across tab switches.

- Add `reset()` to `usePromptPreview` that aborts any in-flight request,
  clears result/error, and explicitly clears `isLoading` (run's finally
  skips setLoading(false) when the signal is aborted).
- Make `PromptSnippetTabs` fully controlled via `value` + `onValueChange`.
- `PromptCodeTab` owns the active language and calls `preview.reset()`
  before switching, so the button returns to "Preview" and the response
  block unmounts.

Signed-off-by: a-effort <anna.effort@ibm.com>

Author: a-effort

client/src/components/prompts/PromptCodeTab.test.tsx

@@ -99,4 +99,26 @@ describe("PromptCodeTab", () => {
     expect(screen.queryByRole("heading", { name: /^arguments$/i })).not.toBeInTheDocument();
     expect(screen.getByRole("tab", { name: "curl" })).toBeInTheDocument();
   });
+
+  it("resets the Preview button and hides the response when the language tab changes", async () => {
+    vi.mocked(promptsApi.render).mockResolvedValue({
+      rendered: { messages: [{ role: "user", content: { type: "text", text: "hi" } }] },
+      status: 200,
+    });
+    const user = userEvent.setup();
+    render(<PromptCodeTab prompt={mockPrompt()} />);
+
+    await user.click(screen.getByRole("button", { name: /^preview$/i }));
+    await waitFor(() =>
+      expect(screen.getByRole("button", { name: /re-run/i })).toBeInTheDocument(),
+    );
+    // Status row is announced live once the run completes.
+    expect(screen.getByRole("status")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("tab", { name: "Python" }));
+
+    expect(screen.getByRole("button", { name: /^preview$/i })).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /re-run/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  });
 });

client/src/components/prompts/PromptCodeTab.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 import type { PromptRead } from "@/generated/types";
 import { PromptArgsForm } from "./PromptArgsForm";
@@ -7,6 +7,8 @@ import { PromptPreviewResult } from "./PromptPreviewResult";
 import { PromptSnippetTabs } from "./PromptSnippetTabs";
 import { usePromptPreview } from "@/hooks/usePromptPreview";
 
+const DEFAULT_LANGUAGE = "curl";
+
 export interface PromptCodeTabProps {
   prompt: NonNullable<PromptRead>;
 }
@@ -24,18 +26,33 @@ export interface PromptCodeTabProps {
  */
 export function PromptCodeTab({ prompt }: PromptCodeTabProps) {
   const [args, setArgs] = useState<Record<string, string>>(() => seedArgs(prompt));
+  const [language, setLanguage] = useState<string>(DEFAULT_LANGUAGE);
   // Address the prompt by name — same identifier the snippets show and what
   // MCP-spec clients use on the wire. See `promptsApi.render` for the full
   // rationale and the tracked "server-scoped MCP transport" follow-up.
   const preview = usePromptPreview(prompt.name, args);
 
+  // Switching languages clears the previous run so the Preview affordances
+  // match the active snippet — the button returns to "Preview" and the
+  // rendered response is unmounted. Same wire call regardless of language,
+  // so nothing useful is discarded.
+  const handleLanguageChange = useCallback(
+    (next: string) => {
+      preview.reset();
+      setLanguage(next);
+    },
+    [preview],
+  );
+
   return (
     <div className="space-y-6">
       <PromptArgsForm args={args} schema={prompt.arguments} onChange={setArgs} />
       <div className="space-y-4">
         <PromptSnippetTabs
           promptName={prompt.name}
           args={args}
+          value={language}
+          onValueChange={handleLanguageChange}
           actions={<PromptPreviewButton preview={preview} />}
         />
         <PromptPreviewResult preview={preview} />

client/src/components/prompts/PromptSnippetTabs.test.tsx

@@ -1,3 +1,4 @@
+import { useState, type ReactNode } from "react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -13,36 +14,69 @@ function activeCode(): string {
   return pre?.textContent ?? "";
 }
 
+// Thin wrapper that supplies the controlled `value` + `onValueChange` — most
+// tests only care about the snippet behavior, not the wiring, so keep the
+// controller boilerplate out of each case.
+function ControlledSnippetTabs(props: {
+  promptName: string;
+  args: Record<string, string>;
+  actions?: ReactNode;
+  onChange?: (value: string) => void;
+  initialValue?: string;
+}) {
+  const [value, setValue] = useState(props.initialValue ?? "curl");
+  return (
+    <PromptSnippetTabs
+      promptName={props.promptName}
+      args={props.args}
+      value={value}
+      onValueChange={(next) => {
+        props.onChange?.(next);
+        setValue(next);
+      }}
+      actions={props.actions}
+    />
+  );
+}
+
 beforeEach(() => {
   vi.clearAllMocks();
 });
 
 describe("PromptSnippetTabs", () => {
   it("renders all four language tabs", () => {
-    render(<PromptSnippetTabs promptName="greet" args={{}} />);
+    render(<ControlledSnippetTabs promptName="greet" args={{}} />);
     expect(screen.getByRole("tab", { name: "curl" })).toBeInTheDocument();
     expect(screen.getByRole("tab", { name: "JSON-RPC" })).toBeInTheDocument();
     expect(screen.getByRole("tab", { name: "Python" })).toBeInTheDocument();
     expect(screen.getByRole("tab", { name: "TypeScript" })).toBeInTheDocument();
   });
 
-  it("defaults to the curl snippet on first render", () => {
-    render(<PromptSnippetTabs promptName="greet" args={{ user: "Alice" }} />);
+  it("shows the curl snippet when the controlled value is 'curl'", () => {
+    render(<ControlledSnippetTabs promptName="greet" args={{ user: "Alice" }} />);
     expect(activeCode()).toContain("curl -X POST");
     expect(activeCode()).toContain('"user":"Alice"');
   });
 
   it("switches to the JSON-RPC snippet when its tab is activated", async () => {
     const user = userEvent.setup();
-    render(<PromptSnippetTabs promptName="greet" args={{}} />);
+    render(<ControlledSnippetTabs promptName="greet" args={{}} />);
     await user.click(screen.getByRole("tab", { name: "JSON-RPC" }));
     expect(activeCode()).toContain('"method": "prompts/get"');
   });
 
+  it("calls onValueChange with the newly-activated language", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ControlledSnippetTabs promptName="greet" args={{}} onChange={onChange} />);
+    await user.click(screen.getByRole("tab", { name: "Python" }));
+    expect(onChange).toHaveBeenCalledWith("python");
+  });
+
   it("copies the active snippet to the clipboard on click", async () => {
     const user = userEvent.setup();
     const writeText = vi.spyOn(navigator.clipboard, "writeText").mockResolvedValue();
-    render(<PromptSnippetTabs promptName="greet" args={{ user: "Alice" }} />);
+    render(<ControlledSnippetTabs promptName="greet" args={{ user: "Alice" }} />);
     await user.click(screen.getByRole("button", { name: /copy curl snippet/i }));
     expect(writeText).toHaveBeenCalledTimes(1);
     expect(writeText.mock.calls[0][0]).toContain("curl -X POST");
@@ -51,15 +85,17 @@ describe("PromptSnippetTabs", () => {
   });
 
   it("rebuilds the snippet when args change", () => {
-    const { rerender } = render(<PromptSnippetTabs promptName="greet" args={{ user: "Alice" }} />);
+    const { rerender } = render(
+      <ControlledSnippetTabs promptName="greet" args={{ user: "Alice" }} />,
+    );
     expect(activeCode()).toContain('"user":"Alice"');
-    rerender(<PromptSnippetTabs promptName="greet" args={{ user: "Bob" }} />);
+    rerender(<ControlledSnippetTabs promptName="greet" args={{ user: "Bob" }} />);
     expect(activeCode()).toContain('"user":"Bob"');
   });
 
   it("renders the trailing actions slot beside the tab list", () => {
     render(
-      <PromptSnippetTabs
+      <ControlledSnippetTabs
         promptName="greet"
         args={{}}
         actions={<button type="button">Preview</button>}

client/src/components/prompts/PromptSnippetTabs.tsx

@@ -11,6 +11,10 @@ import { buildTypescript } from "./snippets/buildTypescript";
 export interface PromptSnippetTabsProps {
   promptName: string;
   args: Record<string, string>;
+  /** Currently-active language tab. Controlled by the parent. */
+  value: string;
+  /** Fired when the user activates a different language tab. */
+  onValueChange: (value: string) => void;
   /** Rendered to the right of the tab row — typically the Preview button. */
   actions?: ReactNode;
 }
@@ -54,7 +58,13 @@ const SNIPPETS: SnippetSpec[] = [
   },
 ];
 
-export function PromptSnippetTabs({ promptName, args, actions }: PromptSnippetTabsProps) {
+export function PromptSnippetTabs({
+  promptName,
+  args,
+  value,
+  onValueChange,
+  actions,
+}: PromptSnippetTabsProps) {
   const intl = useIntl();
 
   const rendered = useMemo(
@@ -65,7 +75,7 @@ export function PromptSnippetTabs({ promptName, args, actions }: PromptSnippetTa
   const copiedLabel = intl.formatMessage({ id: "prompts.details.code.copySuccess" });
 
   return (
-    <Tabs defaultValue="curl">
+    <Tabs value={value} onValueChange={onValueChange}>
       <div className="mb-2 flex items-center justify-between gap-4">
         <TabsList>
           {SNIPPETS.map((spec) => (

client/src/hooks/usePromptPreview.test.tsx

@@ -177,4 +177,70 @@ describe("usePromptPreview", () => {
     });
     expect(result.current.isLoading).toBe(false);
   });
+
+  it("reset() clears a completed run so hasRun returns to false", async () => {
+    vi.mocked(promptsApi.render).mockResolvedValue({ rendered: { messages: [] }, status: 200 });
+    const { result } = setup();
+
+    await act(async () => {
+      await result.current.run();
+    });
+    expect(result.current.hasRun).toBe(true);
+
+    act(() => {
+      result.current.reset();
+    });
+    expect(result.current.result).toBeNull();
+    expect(result.current.error).toBeNull();
+    expect(result.current.hasRun).toBe(false);
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it("reset() clears a captured error", async () => {
+    vi.mocked(promptsApi.render).mockRejectedValue(new Error("boom"));
+    const { result } = setup();
+
+    await act(async () => {
+      await result.current.run();
+    });
+    expect(result.current.error).not.toBeNull();
+
+    act(() => {
+      result.current.reset();
+    });
+    expect(result.current.error).toBeNull();
+    expect(result.current.hasRun).toBe(false);
+  });
+
+  it("reset() aborts an in-flight request and clears isLoading", async () => {
+    let capturedSignal: AbortSignal | undefined;
+    let resolve: ((v: { rendered: { messages: never[] }; status: number }) => void) | undefined;
+    vi.mocked(promptsApi.render).mockImplementation((_name, _args, opts) => {
+      capturedSignal = opts?.signal;
+      return new Promise((r) => {
+        resolve = r;
+      });
+    });
+    const { result } = setup();
+
+    act(() => {
+      void result.current.run();
+    });
+    await waitFor(() => expect(result.current.isLoading).toBe(true));
+    expect(capturedSignal?.aborted).toBe(false);
+
+    act(() => {
+      result.current.reset();
+    });
+    expect(capturedSignal?.aborted).toBe(true);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.result).toBeNull();
+    expect(result.current.error).toBeNull();
+
+    // Late resolution after reset must not repopulate state.
+    resolve?.({ rendered: { messages: [] }, status: 200 });
+    await new Promise((r) => setTimeout(r, 0));
+    expect(result.current.result).toBeNull();
+    expect(result.current.hasRun).toBe(false);
+  });
 });

client/src/hooks/usePromptPreview.ts

@@ -20,6 +20,7 @@ export interface PreviewFailure {
 
 export interface PromptPreviewState {
   run: () => Promise<void>;
+  reset: () => void;
   isLoading: boolean;
   result: PreviewSuccess | null;
   error: PreviewFailure | null;
@@ -61,6 +62,22 @@ export function usePromptPreview(
     };
   }, []);
 
+  // Clears result/error and cancels any in-flight request. Callers use this
+  // to return the Preview affordances to their pristine state — e.g. when the
+  // user switches the Code-tab language, we don't want the previous run's
+  // response body to appear under a different snippet.
+  //
+  // Explicitly clears isLoading: run()'s finally-clause skips setLoading(false)
+  // when the signal is aborted (so a late resolution can't touch state after
+  // unmount), which would otherwise leave the button stuck on "Rendering…".
+  const reset = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    setResult(null);
+    setError(null);
+    setLoading(false);
+  }, []);
+
   const run = useCallback(async () => {
     abortRef.current?.abort();
     const controller = new AbortController();
@@ -93,6 +110,7 @@ export function usePromptPreview(
 
   return {
     run,
+    reset,
     isLoading,
     result,
     error,