@marimo-team/islands 0.24.3-dev9 → 0.25.0

package/src/components/editor/__tests__/dynamic-favicon.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { useCellErrors } from "@/core/cells/cells";
 import { DynamicFavicon } from "../dynamic-favicon";
@@ -14,6 +14,10 @@ describe("DynamicFavicon", () => {
   let favicon: HTMLLinkElement;
 
   beforeEach(() => {
+    document
+      .querySelectorAll("link[rel~='icon']")
+      .forEach((element) => element.remove());
+
     // Mock favicon element
     favicon = document.createElement("link");
     favicon.rel = "icon";
@@ -28,7 +32,9 @@ describe("DynamicFavicon", () => {
   });
 
   afterEach(() => {
-    favicon.remove();
+    document
+      .querySelectorAll("link[rel~='icon']")
+      .forEach((element) => element.remove());
     vi.clearAllMocks();
     vi.useRealTimers();
   });
@@ -113,6 +119,34 @@ describe("DynamicFavicon", () => {
     expect(newFavicon).not.toBeNull();
   });
 
+  it("recreates a removed favicon when the window regains focus", async () => {
+    render(<DynamicFavicon isRunning={false} />);
+    favicon.remove();
+
+    window.dispatchEvent(new Event("focus"));
+
+    await waitFor(() => {
+      const currentFavicon =
+        document.querySelector<HTMLLinkElement>("link[rel~='icon']");
+      expect(currentFavicon?.href.endsWith("favicon.ico")).toBe(true);
+    });
+  });
+
+  it("resets the current favicon after the link is replaced", async () => {
+    render(<DynamicFavicon isRunning={false} />);
+    const replacement = document.createElement("link");
+    replacement.rel = "icon";
+    replacement.href = "./replacement.ico";
+    favicon.replaceWith(replacement);
+
+    window.dispatchEvent(new Event("focus"));
+
+    await waitFor(() => {
+      expect(replacement.href.endsWith("favicon.ico")).toBe(true);
+      expect(document.querySelector("link[rel~='icon']")).toBe(replacement);
+    });
+  });
+
   describe("notifications", () => {
     beforeEach(() => {
       vi.spyOn(document, "visibilityState", "get").mockReturnValue("hidden");

package/src/components/editor/actions/__tests__/pair-with-agent-commands.test.ts

@@ -10,10 +10,12 @@ import {
   maskToken,
 } from "../pair-with-agent-commands";
 import { shellQuote } from "@/utils/shell";
+import { PAIR_PREVIEW } from "@/__tests__/fixtures/pair-preview";
 
 const CONNECTION: ConnectionInfo = {
   url: "http://localhost:8000",
   file: "notebooks/example.py",
+  session: "s_ab12cd",
 };
 
 const CONNECTION_WITHOUT_FILE: ConnectionInfo = {
@@ -104,6 +106,61 @@ describe("getMarimoCommand", () => {
 });
 
 describe("getTerminalCommand", () => {
+  it("uses the preview launcher in production and quotes session-only targets", () => {
+    vi.stubEnv("DEV", false);
+    try {
+      expect(
+        getTerminalCommand(
+          "claude",
+          { url: "http://host:8000?a=1&b=2", session: "s_' {file}" },
+          false,
+          { ...PAIR_PREVIEW, command: "uvx marimo@latest" },
+        ),
+      ).toBe(
+        String.raw`claude "$(MARIMO_PAIR_NEXT=1 uvx marimo@latest pair prompt \
+  --url 'http://host:8000?a=1&b=2' \
+  --session 's_'"'"' {file}')"`,
+      );
+      expect(
+        getTerminalCommand(
+          "codex",
+          CONNECTION_WITHOUT_FILE,
+          false,
+          PAIR_PREVIEW,
+        ),
+      ).toBe(
+        String.raw`codex "$(MARIMO_PAIR_NEXT=1 uvx marimo@latest pair prompt \
+  --url http://localhost:8000)"`,
+      );
+    } finally {
+      vi.unstubAllEnvs();
+    }
+  });
+
+  it.each([
+    ["claude", "claude"],
+    ["codex", "codex"],
+    ["opencode", "opencode --prompt"],
+  ] as const)(
+    "enables the preview inside the %s prompt command",
+    (agent, cli) => {
+      expect(
+        getTerminalCommand(
+          agent,
+          { ...CONNECTION, session: "s_ab12cd" },
+          true,
+          PAIR_PREVIEW,
+        ),
+      ).toBe(
+        String.raw`${cli} "$(MARIMO_PAIR_NEXT=1 uvx marimo@latest pair prompt \
+  --url http://localhost:8000 \
+  --file notebooks/example.py \
+  --session s_ab12cd \
+  --with-token)"`,
+      );
+    },
+  );
+
   it("includes the url and file for each agent", () => {
     expect(getTerminalCommand("claude", CONNECTION, false)).toBe(
       `claude "$(uv run marimo pair prompt --url http://localhost:8000 --file notebooks/example.py --claude)"`,
@@ -169,6 +226,64 @@ describe("getTerminalCommand", () => {
 });
 
 describe("getRawPrompt", () => {
+  it("uses supplied templates without reinterpreting inserted values", () => {
+    expect(
+      getRawPrompt(
+        {
+          url: "http://host/{file}",
+          file: "{session}/it's.py",
+          session: "{command}",
+        },
+        "tok'en {file} $&",
+        {
+          ...PAIR_PREVIEW,
+          command: "custom marimo",
+          templates: {
+            ...PAIR_PREVIEW.templates,
+            prompt: "{command}\n{url}\n{file}{session}{authentication}",
+          },
+        },
+      ),
+    ).toBe(
+      "custom marimo\nhttp://host/{file}\nFile: {session}/it's.py\nSession: {command}\n" +
+        `\n\nFor authenticated Pair commands, set \`export MARIMO_TOKEN='tok'"'"'en {file} $&'\` in the shell that runs marimo.`,
+    );
+  });
+
+  it.each([
+    [CONNECTION_WITHOUT_FILE, ""],
+    [
+      { ...CONNECTION_WITHOUT_FILE, session: "s_ab12cd" },
+      "Session: s_ab12cd\n",
+    ],
+    [
+      { ...CONNECTION_WITHOUT_FILE, file: "notebook.py" },
+      "File: notebook.py\n",
+    ],
+  ])("omits absent preview fields for %j", (connection, fields) => {
+    expect(getRawPrompt(connection, null, PAIR_PREVIEW)).toBe(
+      "Pair with me on this running marimo notebook.\n\n" +
+        `URL: http://localhost:8000\n${fields}\n` +
+        "Run `uvx marimo@latest pair --help` first.\n" +
+        "Use `uvx marimo@latest` for all marimo commands.\n\n" +
+        "Once connected, send a fun toast using `mo.status.toast(...)` (`import marimo as mo`).",
+    );
+  });
+
+  it("renders the shared preview template with optional session context", () => {
+    expect(
+      getRawPrompt({ ...CONNECTION, session: "s_ab12cd" }, null, PAIR_PREVIEW),
+    ).toBe(
+      "Pair with me on this running marimo notebook.\n\n" +
+        "URL: http://localhost:8000\n" +
+        "File: notebooks/example.py\n" +
+        "Session: s_ab12cd\n\n" +
+        "Run `uvx marimo@latest pair --help` first.\n" +
+        "Use `uvx marimo@latest` for all marimo commands.\n\n" +
+        "Once connected, send a fun toast using `mo.status.toast(...)` (`import marimo as mo`).",
+    );
+  });
+
   it("references the file-scoped execute-code command", () => {
     const prompt = getRawPrompt(CONNECTION, null);
     expect(prompt).toContain(

package/src/components/editor/actions/__tests__/pair-with-agent-modal.test.tsx

@@ -0,0 +1,218 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PAIR_PREVIEW } from "@/__tests__/fixtures/pair-preview";
+import { Dialog } from "@/components/ui/dialog";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { pairPreviewAtom } from "@/core/config/pair";
+import { getSessionId } from "@/core/kernel/session";
+import { filenameAtom } from "@/core/saving/file-state";
+import {
+  DEFAULT_RUNTIME_CONFIG,
+  runtimeConfigAtom,
+} from "@/core/runtime/config";
+import { store } from "@/core/state/jotai";
+import { PairWithAgentModal } from "../pair-with-agent-modal";
+import { copyToClipboard } from "@/utils/copy";
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+function wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Provider store={store}>
+      <TooltipProvider>
+        <Dialog open={true}>{children}</Dialog>
+      </TooltipProvider>
+    </Provider>
+  );
+}
+
+describe("PairWithAgentModal", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    store.set(pairPreviewAtom, PAIR_PREVIEW);
+    store.set(filenameAtom, "/project/my notebook.py");
+    store.set(runtimeConfigAtom, {
+      ...DEFAULT_RUNTIME_CONFIG,
+      url: "http://localhost:8000",
+    });
+    window.history.replaceState({}, "", "/?file=notebook.py");
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue(new Response(JSON.stringify({ token: null }))),
+    );
+  });
+
+  afterEach(() => {
+    store.set(pairPreviewAtom, undefined);
+    store.set(filenameAtom, null);
+    vi.unstubAllGlobals();
+  });
+
+  it.each(["Claude", "Codex", "OpenCode", "Prompt"])(
+    "omits skill installation and includes the current session in %s preview",
+    async (tab) => {
+      await act(async () => {
+        render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+      });
+      fireEvent.mouseDown(screen.getByRole("tab", { name: tab }), {
+        button: 0,
+        ctrlKey: false,
+      });
+
+      const panel = screen.getByRole("tabpanel");
+      expect(within(panel).queryAllByText(/skill/i)).toEqual([]);
+      expect(panel).toHaveTextContent(getSessionId());
+      expect(panel).toHaveTextContent(
+        tab === "Prompt" ? "File: notebook.py" : "--file notebook.py",
+      );
+      expect(panel).not.toHaveTextContent("/project/my notebook.py");
+      expect(panel).toHaveTextContent(
+        tab === "Prompt" ? "1. Copy this prompt" : "1. Run in your terminal",
+      );
+    },
+  );
+
+  it.each(["Claude", "Codex", "OpenCode", "Prompt"])(
+    "includes the known notebook file in %s preview when the URL has no file",
+    async (tab) => {
+      window.history.replaceState({}, "", "/");
+      await act(async () => {
+        render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+      });
+      fireEvent.mouseDown(screen.getByRole("tab", { name: tab }), {
+        button: 0,
+        ctrlKey: false,
+      });
+
+      const panel = screen.getByRole("tabpanel");
+      const fileHint =
+        tab === "Prompt"
+          ? "File: /project/my notebook.py"
+          : "--file '/project/my notebook.py'";
+      expect(panel).toHaveTextContent(fileHint);
+      fireEvent.click(
+        within(panel).getByRole("button", {
+          name: tab === "Prompt" ? "Copy prompt" : "Copy command",
+        }),
+      );
+      await waitFor(() => expect(copyToClipboard).toHaveBeenCalledOnce());
+      expect(vi.mocked(copyToClipboard).mock.calls[0][0]).toContain(fileHint);
+    },
+  );
+
+  it.each([null, ""])(
+    "omits the file when the URL and notebook filename are absent (%s)",
+    async (filename) => {
+      window.history.replaceState({}, "", "/");
+      store.set(filenameAtom, filename);
+      await act(async () => {
+        render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+      });
+      expect(screen.getByRole("tabpanel")).not.toHaveTextContent("--file");
+      fireEvent.mouseDown(screen.getByRole("tab", { name: "Prompt" }), {
+        button: 0,
+        ctrlKey: false,
+      });
+      expect(screen.getByRole("tabpanel")).not.toHaveTextContent("File:");
+    },
+  );
+
+  it.each(["Claude", "Codex", "OpenCode", "Prompt"])(
+    "preserves the %s skill flow without preview configuration",
+    async (tab) => {
+      store.set(pairPreviewAtom, undefined);
+      window.history.replaceState({}, "", "/");
+      await act(async () => {
+        render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+      });
+      fireEvent.mouseDown(screen.getByRole("tab", { name: tab }), {
+        button: 0,
+        ctrlKey: false,
+      });
+
+      const panel = screen.getByRole("tabpanel");
+      expect(
+        within(panel).getByText("npx skills add marimo-team/marimo-pair"),
+      ).toBeVisible();
+      expect(panel).not.toHaveTextContent(getSessionId());
+      expect(panel).not.toHaveTextContent("MARIMO_PAIR_NEXT");
+      expect(panel).not.toHaveTextContent("/project/my notebook.py");
+      expect(panel).toHaveTextContent(
+        tab === "Prompt" ? "2. Copy this prompt" : "2. Run in your terminal",
+      );
+    },
+  );
+
+  it.each([true, false])(
+    "masks the raw token but copies it intact (preview=%s)",
+    async (preview) => {
+      store.set(pairPreviewAtom, preview ? PAIR_PREVIEW : undefined);
+      vi.mocked(fetch).mockResolvedValue(
+        new Response(JSON.stringify({ token: "secret-token" })),
+      );
+      await act(async () => {
+        render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+      });
+      fireEvent.mouseDown(screen.getByRole("tab", { name: "Prompt" }), {
+        button: 0,
+        ctrlKey: false,
+      });
+
+      const panel = screen.getByRole("tabpanel");
+      expect(panel).toHaveTextContent("********oken");
+      expect(panel).not.toHaveTextContent("secret-token");
+      fireEvent.click(
+        within(panel).getByRole("button", { name: "Copy prompt" }),
+      );
+      await waitFor(() => expect(copyToClipboard).toHaveBeenCalledOnce());
+      expect(vi.mocked(copyToClipboard).mock.calls[0][0]).toContain(
+        preview ? "export MARIMO_TOKEN=secret-token" : "--token secret-token",
+      );
+      expect(vi.mocked(copyToClipboard).mock.calls[0][0]).not.toContain(
+        "********oken",
+      );
+    },
+  );
+
+  it("copies a preview terminal command without the token and lets the user copy the token separately", async () => {
+    vi.mocked(fetch).mockResolvedValue(
+      new Response(JSON.stringify({ token: "secret-token" })),
+    );
+    await act(async () => {
+      render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+    });
+
+    const panel = screen.getByRole("tabpanel");
+    expect(panel).toHaveTextContent("2. Paste when prompted for a token");
+    expect(panel).not.toHaveTextContent("secret-token");
+    fireEvent.click(
+      within(panel).getByRole("button", { name: "Copy command" }),
+    );
+    await waitFor(() =>
+      expect(copyToClipboard).toHaveBeenCalledWith(
+        String.raw`claude "$(MARIMO_PAIR_NEXT=1 uvx marimo@latest pair prompt \
+  --url http://localhost:8000/ \
+  --file notebook.py \
+  --session ${getSessionId()} \
+  --with-token)"`,
+      ),
+    );
+    fireEvent.click(within(panel).getByRole("button", { name: "Copy token" }));
+    await waitFor(() =>
+      expect(copyToClipboard).toHaveBeenLastCalledWith("secret-token"),
+    );
+  });
+});

package/src/components/editor/actions/pair-with-agent-commands.ts

@@ -3,6 +3,7 @@
 import { assertNever } from "@/utils/assertNever";
 import { KnownQueryParams } from "@/core/constants";
 import { shellQuote } from "@/utils/shell";
+import type { PairPreviewConfig } from "@/core/config/pair";
 
 export type AgentTab = "claude" | "codex" | "opencode" | "prompt";
 
@@ -37,8 +38,9 @@ function getFileFlag(file: string | undefined): string {
 /** Identifies the specific running notebook to pair on. */
 export interface ConnectionInfo {
   url: string;
-  /** The server's file key, when the page URL identifies a notebook. */
+  /** The server's file key or notebook filename, when known. */
   file?: string;
+  session?: string;
 }
 
 /**
@@ -47,19 +49,29 @@ export interface ConnectionInfo {
  */
 export function getTerminalCommand(
   agent: Exclude<AgentTab, "prompt">,
-  { url, file }: ConnectionInfo,
+  { url, file, session }: ConnectionInfo,
   withToken: boolean,
+  preview?: PairPreviewConfig,
 ): string {
-  const fileFlag = getFileFlag(file);
-  const tokenFlag = withToken ? " --with-token" : "";
-  const base = `${getMarimoCommand()} pair prompt --url ${shellQuote(url)}${fileFlag}${tokenFlag}`;
+  const command = preview?.command ?? getMarimoCommand();
+  const prefix = preview ? "MARIMO_PAIR_NEXT=1 " : "";
+  const base = [
+    `${prefix}${command} pair prompt`,
+    `--url ${shellQuote(url)}`,
+    file ? `--file ${shellQuote(file)}` : "",
+    preview && session ? `--session ${shellQuote(session)}` : "",
+    withToken ? "--with-token" : "",
+    preview ? "" : `--${agent}`,
+  ]
+    .filter(Boolean)
+    .join(preview ? " \\\n  " : " ");
   switch (agent) {
     case "claude":
-      return `claude "$(${base} --claude)"`;
+      return `claude "$(${base})"`;
     case "codex":
-      return `codex "$(${base} --codex)"`;
+      return `codex "$(${base})"`;
     case "opencode":
-      return `opencode --prompt "$(${base} --opencode)"`;
+      return `opencode --prompt "$(${base})"`;
     default:
       assertNever(agent);
   }
@@ -71,9 +83,23 @@ export function getTerminalCommand(
  * an agent behaves the same as the terminal commands.
  */
 export function getRawPrompt(
-  { url, file }: ConnectionInfo,
+  { url, file, session }: ConnectionInfo,
   token: string | null,
+  preview?: PairPreviewConfig,
 ): string {
+  if (preview) {
+    const { command, templates } = preview;
+    return formatPrompt(templates.prompt, {
+      command,
+      url,
+      file: file ? formatPrompt(templates.file, { file }) : "",
+      session: session ? formatPrompt(templates.session, { session }) : "",
+      authentication: token
+        ? formatPrompt(templates.token, { token: shellQuote(token) })
+        : "",
+    });
+  }
+
   const fileFlag = getFileFlag(file);
   const fileHint = file ? ` (file ${file})` : "";
   const executeCmd = `execute-code.sh --url ${shellQuote(url)}${fileFlag}`;
@@ -91,6 +117,17 @@ export function getRawPrompt(
   ].join("\n");
 }
 
+function formatPrompt(
+  template: string,
+  values: Record<string, string>,
+): string {
+  // Replace once so inserted file names or tokens cannot become placeholders.
+  return template.replaceAll(
+    /\{(\w+)\}/g,
+    (placeholder, key: string) => values[key] ?? placeholder,
+  );
+}
+
 /** Mask all but the last 4 chars of a token for display. */
 export function maskToken(token: string): string {
   if (token.length <= 4) {

package/src/components/editor/actions/pair-with-agent-modal.tsx

@@ -2,6 +2,7 @@
 
 import { CheckIcon, CopyIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
+import { useAtomValue } from "jotai";
 import { Button } from "@/components/ui/button";
 import {
   DialogContent,
@@ -16,6 +17,9 @@ import { Events } from "@/utils/events";
 import { Tooltip } from "@/components/ui/tooltip";
 import { asRemoteURL, useRuntimeManager } from "@/core/runtime/config";
 import { API } from "@/core/network/api";
+import { pairPreviewAtom } from "@/core/config/pair";
+import { getSessionId } from "@/core/kernel/session";
+import { useFilename } from "@/core/saving/filename";
 import {
   AGENT_LABELS,
   AGENT_TABS,
@@ -49,11 +53,17 @@ export const PairWithAgentModal: React.FC<{
 }> = ({ onClose }) => {
   const [activeTab, setActiveTab] = useState<AgentTab>("claude");
   const runtimeManager = useRuntimeManager();
+  const preview = useAtomValue(pairPreviewAtom);
+  const filename = useFilename();
+  const commandStep = preview ? 1 : 2;
   const authToken = useAuthToken();
   const hasToken = Boolean(authToken);
   const connection: ConnectionInfo = {
     url: runtimeManager.httpURL.toString(),
-    file: getFileFromURL(window.location.href),
+    file:
+      getFileFromURL(window.location.href) ??
+      (preview ? filename || undefined : undefined),
+    session: preview ? getSessionId() : undefined,
   };
 
   return (
@@ -94,23 +104,34 @@ export const PairWithAgentModal: React.FC<{
               value={tab}
               className="mt-4 flex flex-col gap-4"
             >
-              <Step
-                index={1}
-                title="Install the skill"
-                hint="Run once per machine."
-              >
-                <CommandBlock command={SKILL_INSTALL} />
-              </Step>
-              <Step index={2} title="Run in your terminal">
+              {!preview && (
+                <Step
+                  index={1}
+                  title="Install the skill"
+                  hint="Run once per machine."
+                >
+                  <CommandBlock command={SKILL_INSTALL} />
+                </Step>
+              )}
+              <Step index={commandStep} title="Run in your terminal">
                 <CommandBlock
-                  command={getTerminalCommand(tab, connection, hasToken)}
+                  command={getTerminalCommand(
+                    tab,
+                    connection,
+                    hasToken,
+                    preview,
+                  )}
                 />
               </Step>
               {hasToken && authToken && (
-                <Step index={3} title="Paste when prompted for a token">
+                <Step
+                  index={commandStep + 1}
+                  title="Paste when prompted for a token"
+                >
                   <CommandBlock
                     command={authToken}
                     display={maskToken(authToken)}
+                    copyLabel="Copy token"
                   />
                 </Step>
               )}
@@ -118,15 +139,17 @@ export const PairWithAgentModal: React.FC<{
           ))}
 
           <TabsContent value="prompt" className="mt-4 flex flex-col gap-4">
+            {!preview && (
+              <Step
+                index={1}
+                title="Make sure the marimo-pair skill is available to your agent"
+                hint="Skip if your agent already has it."
+              >
+                <CommandBlock command={SKILL_INSTALL} />
+              </Step>
+            )}
             <Step
-              index={1}
-              title="Make sure the marimo-pair skill is available to your agent"
-              hint="Skip if your agent already has it."
-            >
-              <CommandBlock command={SKILL_INSTALL} />
-            </Step>
-            <Step
-              index={2}
+              index={commandStep}
               title="Copy this prompt into your agent"
               hint={
                 hasToken
@@ -135,10 +158,11 @@ export const PairWithAgentModal: React.FC<{
               }
             >
               <CommandBlock
-                command={getRawPrompt(connection, authToken)}
+                command={getRawPrompt(connection, authToken, preview)}
                 display={getRawPrompt(
                   connection,
                   authToken ? maskToken(authToken) : null,
+                  preview,
                 )}
                 multiline={true}
               />
@@ -177,7 +201,8 @@ const CommandBlock: React.FC<{
   command: string;
   display?: string;
   multiline?: boolean;
-}> = ({ command, display, multiline = false }) => {
+  copyLabel?: string;
+}> = ({ command, display, multiline = false, copyLabel = "Copy command" }) => {
   const [copied, setCopied] = useState(false);
 
   const copy = Events.stopPropagation(async (e) => {
@@ -195,6 +220,7 @@ const CommandBlock: React.FC<{
         </pre>
         <Tooltip content="Copied!" open={copied}>
           <Button
+            aria-label="Copy prompt"
             onClick={copy}
             size="xs"
             variant="ghost"
@@ -213,11 +239,11 @@ const CommandBlock: React.FC<{
 
   return (
     <div className="flex items-center gap-2 rounded-md bg-muted px-3 py-2 font-mono text-xs">
-      <code className="flex-1 select-all wrap-break-word">
+      <code className="flex-1 whitespace-pre-wrap select-all wrap-break-word">
         {display ?? command}
       </code>
       <Tooltip content="Copied!" open={copied}>
-        <Button onClick={copy} size="xs" variant="ghost">
+        <Button aria-label={copyLabel} onClick={copy} size="xs" variant="ghost">
           {copied ? (
             <CheckIcon size={14} strokeWidth={1.5} />
           ) : (

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -124,6 +124,7 @@ export const AddCellWithAI: React.FC<{
           );
           const body = {
             ...completionBody,
+            id: options.id,
             code: "",
             prompt: "", // Don't need prompt since we are using messages
             language: language,

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -124,7 +124,9 @@ export const AiCompletionEditor: React.FC<Props> = ({
       new DefaultChatTransport<CompletionUIMessage>({
         api: runtimeManager.getAiURL("completion").toString(),
         headers: () => runtimeManager.headers(),
-        prepareSendMessagesRequest: ({ body }) => ({ body: body ?? {} }),
+        prepareSendMessagesRequest: ({ body, id }) => ({
+          body: { ...body, id },
+        }),
       }),
     [runtimeManager],
   );