@marimo-team/islands 0.24.3-dev5 → 0.24.3-dev52

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 uv run marimo 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],
   );

package/src/components/editor/alerts/connecting-alert.tsx

@@ -1,76 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { LoadingEllipsis } from "@/components/icons/loading-ellipsis";
-import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
-import { DelayMount } from "@/components/utils/delay-mount";
-import {
-  isClosedAtom,
-  isConnectingAtom,
-  isNotStartedAtom,
-} from "@/core/network/connection";
+import { isNotStartedAtom } from "@/core/network/connection";
 import { useConnectToRuntime } from "@/core/runtime/config";
-import { Banner } from "@/plugins/impl/common/error-banner";
-import { Tooltip } from "../../ui/tooltip";
 import { FloatingAlert } from "./floating-alert";
 
-const SHORT_DELAY_MS = 1000; // 1 second
-const LONG_DELAY_MS = 5000; // 5 seconds
-
-export const ConnectingAlert: React.FC = () => {
-  const isConnecting = useAtomValue(isConnectingAtom);
-  const isClosed = useAtomValue(isClosedAtom);
-
-  if (isConnecting) {
-    const subtleNotification = (
-      <Tooltip content="Connecting to a marimo runtime">
-        <div className="flex items-center">
-          <LoadingEllipsis size={5} className="text-yellow-500" />
-        </div>
-      </Tooltip>
-    );
-
-    const longNotification = (
-      <Banner
-        kind="info"
-        className="flex flex-col rounded py-2 px-4 animate-in slide-in-from-top w-fit"
-      >
-        <div className="flex flex-col gap-4 justify-between items-start text-muted-foreground text-base">
-          <div className="flex items-center gap-2">
-            <Spinner className="h-4 w-4" />
-            <p>Connecting to a marimo runtime ...</p>
-          </div>
-        </div>
-      </Banner>
-    );
-
-    // This waits for 1 second to show the subtle notification, then shows the long notification after 5 seconds.
-    return (
-      <DelayMount milliseconds={SHORT_DELAY_MS}>
-        <div className="m-0 flex items-center min-h-[28px] fixed top-5 left-1/2 transform -translate-x-1/2 z-200">
-          <DelayMount
-            milliseconds={LONG_DELAY_MS}
-            fallback={subtleNotification}
-          >
-            {longNotification}
-          </DelayMount>
-        </div>
-      </DelayMount>
-    );
-  }
-
-  if (isClosed) {
-    return (
-      <FloatingAlert show={isClosed} kind="danger">
-        <div className="flex items-center gap-2">
-          <p>Failed to connect.</p>
-        </div>
-      </FloatingAlert>
-    );
-  }
-};
-
 export const NotStartedConnectionAlert: React.FC = () => {
   const isNotStarted = useAtomValue(isNotStartedAtom);
   const connectToRuntime = useConnectToRuntime();