@marimo-team/islands 0.25.3-dev26 → 0.25.3-dev262

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

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { PAIR_CONFIG } from "@/__tests__/fixtures/pair-config";
 import { shellQuote } from "@/utils/shell";
 import {
@@ -44,18 +44,6 @@ describe("shellQuote", () => {
   });
 });
 
-describe("getMarimoCommand", () => {
-  afterEach(() => vi.unstubAllEnvs());
-  it("uses the checkout command in development", () => {
-    vi.stubEnv("DEV", true);
-    expect(getMarimoCommand()).toBe("uv run marimo");
-  });
-  it("uses uvx outside development", () => {
-    vi.stubEnv("DEV", false);
-    expect(getMarimoCommand()).toBe("uvx marimo@latest");
-  });
-});
-
 describe("getTerminalCommand", () => {
   it.each([
     ["claude", "claude"],
@@ -63,7 +51,7 @@ describe("getTerminalCommand", () => {
     ["opencode", "opencode --prompt"],
   ] as const)("launches %s through the public CLI", (agent, cli) => {
     expect(getTerminalCommand(agent, CONNECTION, true, PAIR_CONFIG)).toBe(
-      `${cli} "$(uvx marimo@latest pair prompt \\\n  --url http://localhost:8000 \\\n  --notebook nb-one \\\n  --with-token)"`,
+      `${cli} "$(marimo pair prompt \\\n  --url http://localhost:8000 \\\n  --notebook nb-one \\\n  --with-token)"`,
     );
   });
   it("uses a stable Session ID for editor execution", () => {
@@ -89,20 +77,15 @@ describe("getTerminalCommand", () => {
     expect(command).not.toContain("--with-token");
   });
   it("uses the CLI without injected configuration", () => {
-    vi.stubEnv("DEV", true);
-    try {
-      const command = getTerminalCommand(
-        "claude",
-        CONNECTION_WITHOUT_TARGET,
-        false,
-      );
-      expect(command).toContain("uv run marimo pair prompt");
-      expect(command).not.toMatch(
-        /--claude|MARIMO_PAIR_NEXT|--file|--session|--notebook/,
-      );
-    } finally {
-      vi.unstubAllEnvs();
-    }
+    const command = getTerminalCommand(
+      "claude",
+      CONNECTION_WITHOUT_TARGET,
+      false,
+    );
+    expect(command).toContain(`${getMarimoCommand()} pair prompt`);
+    expect(command).not.toMatch(
+      /--claude|MARIMO_PAIR_NEXT|--file|--session|--notebook/,
+    );
   });
 });
 
@@ -121,33 +104,31 @@ describe("getRawPrompt", () => {
       },
     );
     expect(prompt).toBe(
-      "custom marimo\nhttp://host/{session}\nNotebook: {command}/it's\n" +
-        `\n\nFor authenticated notebook discovery, set \`export MARIMO_TOKEN='tok'"'"'en {session} $&'\` in the shell that runs marimo.`,
+      "custom marimo\nhttp://host/{session}\nNotebook: {command}/it's (use --session for execution)\n" +
+        `\n\nFor explicit server authentication, set \`export MARIMO_TOKEN='tok'"'"'en {session} $&'\` in the shell that runs marimo.`,
     );
   });
   it.each([
     [CONNECTION_WITHOUT_TARGET, ""],
-    [CONNECTION, "Notebook: nb-one\n"],
+    [CONNECTION, "Notebook: nb-one (use --session for execution)\n"],
     [
       { ...CONNECTION_WITHOUT_TARGET, session: "stable-one" },
       "Session: stable-one\n",
     ],
   ])("renders the shared CLI prompt for %j", (connection, target) => {
-    const expected = `Pair with me on this running marimo notebook.\n\nURL: http://localhost:8000\n${target}\nRun \`uvx marimo@latest pair --help\` first.\nUse \`uvx marimo@latest\` for all marimo commands.`;
+    const expected = `Pair with me on this running marimo notebook.\n\nURL: http://localhost:8000\n${target}\nRun \`marimo pair --help\` first.\nUse \`marimo\` for all marimo commands.`;
     expect(getRawPrompt(connection, null, PAIR_CONFIG)).toBe(expected);
     expect(
       getRawPrompt(connection, null, { ...PAIR_CONFIG, hostEnabled: false }),
     ).toBe(expected);
   });
   it("matches the shared prompt without injected templates", () => {
-    vi.stubEnv("DEV", false);
-    try {
-      expect(getRawPrompt(CONNECTION, "secret-token")).toBe(
-        getRawPrompt(CONNECTION, "secret-token", PAIR_CONFIG),
-      );
-    } finally {
-      vi.unstubAllEnvs();
-    }
+    expect(getRawPrompt(CONNECTION, "secret-token")).toBe(
+      getRawPrompt(CONNECTION, "secret-token", {
+        ...PAIR_CONFIG,
+        command: getMarimoCommand(),
+      }),
+    );
   });
 });
 

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

@@ -82,7 +82,7 @@ describe("PairWithAgentModal", () => {
     vi.unstubAllGlobals();
   });
 
-  it.each(["Claude", "Codex", "OpenCode", "Prompt"])(
+  it.each(["Claude", "Codex", "OpenCode", "Other Agents"])(
     "targets the verified host Notebook in %s",
     async (tab) => {
       await act(async () => {
@@ -100,14 +100,16 @@ describe("PairWithAgentModal", () => {
       expect(panel).not.toHaveTextContent("File:");
       expect(panel).not.toHaveTextContent("notebook.py");
       expect(
-        panel.textContent?.includes("Agent connections require OpenCode 2.x"),
-      ).toBe(tab === "OpenCode");
-      expect(panel).toHaveTextContent(
-        tab === "Prompt" ? "1. Copy this prompt" : "1. Run in your terminal",
-      );
+        within(panel).getByText(
+          tab === "Other Agents"
+            ? "Paste this prompt into your coding agent:"
+            : "Run this command in your terminal:",
+          { exact: true },
+        ),
+      ).toBeInTheDocument();
       fireEvent.click(
         within(panel).getByRole("button", {
-          name: tab === "Prompt" ? "Copy prompt" : "Copy command",
+          name: tab === "Other Agents" ? "Copy prompt" : "Copy command",
         }),
       );
       await waitFor(() => expect(copyToClipboard).toHaveBeenCalledOnce());
@@ -119,7 +121,7 @@ describe("PairWithAgentModal", () => {
     },
   );
 
-  it.each(["Claude", "Prompt"])(
+  it.each(["Claude", "Other Agents"])(
     "waits for kernel-ready before copying the %s target",
     async (tab) => {
       store.set(stableSessionIdAtom, null);
@@ -137,13 +139,13 @@ describe("PairWithAgentModal", () => {
       expect(panel).toHaveTextContent("http://localhost:8000");
       expect(
         within(panel).getByRole("button", {
-          name: tab === "Prompt" ? "Copy prompt" : "Copy command",
+          name: tab === "Other Agents" ? "Copy prompt" : "Copy command",
         }),
       ).toBeDisabled();
     },
   );
 
-  it.each(["Claude", "Codex", "OpenCode", "Prompt"])(
+  it.each(["Claude", "Codex", "OpenCode", "Other Agents"])(
     "uses the editor CLI in %s when host is disabled",
     async (tab) => {
       store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: false });
@@ -162,7 +164,7 @@ describe("PairWithAgentModal", () => {
       expect(panel).not.toHaveTextContent("MARIMO_PAIR_NEXT");
       fireEvent.click(
         within(panel).getByRole("button", {
-          name: tab === "Prompt" ? "Copy prompt" : "Copy command",
+          name: tab === "Other Agents" ? "Copy prompt" : "Copy command",
         }),
       );
       await waitFor(() => expect(copyToClipboard).toHaveBeenCalledOnce());
@@ -185,7 +187,7 @@ describe("PairWithAgentModal", () => {
       await act(async () => {
         render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
       });
-      fireEvent.mouseDown(screen.getByRole("tab", { name: "Prompt" }), {
+      fireEvent.mouseDown(screen.getByRole("tab", { name: "Other Agents" }), {
         button: 0,
         ctrlKey: false,
       });
@@ -314,6 +316,30 @@ describe("PairWithAgentModal", () => {
     expect(screen.getByRole("tabpanel")).not.toHaveTextContent("--notebook");
   });
 
+  it("reverifies the target when host mode is enabled again for the same Session", async () => {
+    await act(async () => {
+      render(<PairWithAgentModal onClose={vi.fn()} />, { wrapper });
+    });
+    expect(screen.getByRole("tabpanel")).toHaveTextContent(NOTEBOOK_ID);
+    act(() =>
+      store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: false }),
+    );
+
+    const pending = new Deferred<Response>();
+    vi.mocked(fetch).mockImplementation((url) =>
+      String(url).endsWith("/api/sessions")
+        ? pending.promise
+        : responseFor(url),
+    );
+    act(() => store.set(pairConfigAtom, PAIR_CONFIG));
+    expect(screen.getByRole("button", { name: "Copy command" })).toBeDisabled();
+    expect(screen.getByRole("tabpanel")).not.toHaveTextContent(NOTEBOOK_ID);
+
+    await act(async () => pending.resolve(await responseFor("/api/sessions")));
+    expect(screen.getByRole("button", { name: "Copy command" })).toBeEnabled();
+    expect(screen.getByRole("tabpanel")).toHaveTextContent(NOTEBOOK_ID);
+  });
+
   it("keeps copying disabled when Notebook verification fails", async () => {
     vi.mocked(fetch).mockImplementation((url) =>
       String(url).endsWith("/api/sessions")
@@ -338,14 +364,15 @@ describe("PairWithAgentModal", () => {
     });
 
     const panel = screen.getByRole("tabpanel");
-    expect(panel).toHaveTextContent("2. Paste when prompted for a token");
+    expect(panel).toHaveTextContent("1. Run this command in your terminal:");
+    expect(panel).toHaveTextContent("2. When prompted, paste this token:");
     expect(panel).not.toHaveTextContent("secret-token");
     fireEvent.click(
       within(panel).getByRole("button", { name: "Copy command" }),
     );
     await waitFor(() =>
       expect(copyToClipboard).toHaveBeenCalledWith(
-        String.raw`claude "$(uvx marimo@latest pair prompt \
+        String.raw`claude "$(marimo pair prompt \
   --url http://localhost:8000/ \
   --notebook ${NOTEBOOK_ID} \
   --with-token)"`,

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

@@ -7,7 +7,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { ModalProvider } from "@/components/modal/ImperativeModal";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { store } from "@/core/state/jotai";
-import { PairWithAgentBanner, PairWithAgentButton } from "../pair-with-agent";
+import { PairWithAgentBanner } from "../pair-with-agent";
 
 const mocks = vi.hoisted(() => ({
   isWasm: vi.fn(() => false),
@@ -60,48 +60,30 @@ describe("PairWithAgent", () => {
     ).toBeVisible();
     expect(
       screen.getByRole("button", {
-        name: "Learn more.",
+        name: "Set up pairing",
       }),
     ).toBeVisible();
   });
 
-  it("opens the pairing dialog from the banner description", () => {
+  it("opens the pairing dialog from the banner button", () => {
     stubTokenFetch();
     render(<PairWithAgentBanner />, { wrapper });
 
     fireEvent.click(
       screen.getByRole("button", {
-        name: "Learn more.",
+        name: "Set up pairing",
       }),
     );
 
     expect(
-      screen.getByRole("dialog", { name: "Pair with an agent" }),
-    ).toBeVisible();
-  });
-
-  it("opens the pairing dialog and preserves a passed click handler", () => {
-    const onClick = vi.fn();
-    stubTokenFetch();
-    render(<PairWithAgentButton onClick={onClick} />, { wrapper });
-
-    fireEvent.click(screen.getByRole("button", { name: "Connect your agent" }));
-
-    expect(onClick).toHaveBeenCalledOnce();
-    expect(
-      screen.getByRole("dialog", { name: "Pair with an agent" }),
+      screen.getByRole("dialog", { name: "Pair an agent to this notebook" }),
     ).toBeVisible();
   });
 
   it("hides pairing controls in WASM", () => {
     mocks.isWasm.mockReturnValue(true);
 
-    const { container, rerender } = render(<PairWithAgentButton />, {
-      wrapper,
-    });
-    expect(container).toBeEmptyDOMElement();
-
-    rerender(<PairWithAgentBanner />);
+    const { container } = render(<PairWithAgentBanner />, { wrapper });
     expect(container).toBeEmptyDOMElement();
   });
 });

package/src/components/editor/actions/__tests__/useCellActionButton.test.tsx

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { NotebookOutput } from "@marimo-team/client/protocol";
+import { renderHook } from "@testing-library/react";
+import { atom, createStore } from "jotai";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, onTestFinished, vi } from "vitest";
+import { DocumentWrapper, mockDocumentModel } from "@/__mocks__/document";
+import { partial } from "@/__mocks__/partial";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { ModalProvider } from "@/components/modal/ImperativeModal";
+import { toast } from "@/components/ui/use-toast";
+import { CellId } from "@/core/cells/ids";
+import { requestClientAtom } from "@/core/network/requests";
+import type { NotebookReplica } from "@/core/notebook/replica";
+import { activeNotebookReplicaAtom } from "@/core/session/active-notebook";
+import { copyToClipboard } from "@/utils/copy";
+import type { ActionButton } from "../types";
+import { useCellActionButtons } from "../useCellActionButton";
+
+vi.mock("@/utils/copy", () => ({ copyToClipboard: vi.fn() }));
+vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
+
+function renderActions(cellId: CellId, name: string) {
+  const store = createStore();
+  const { model, documentAtom, stop } = mockDocumentModel(store);
+  onTestFinished(stop);
+  store.set(requestClientAtom, MockRequestClient.create());
+  store.set(
+    activeNotebookReplicaAtom,
+    partial<NotebookReplica>({
+      documentAtom,
+      notebookAtom: atom(
+        partial<NotebookOutput>({ operations: ["notebook.edit"] }),
+      ),
+    }),
+  );
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <DocumentWrapper store={store} model={model}>
+      <ModalProvider>{children}</ModalProvider>
+    </DocumentWrapper>
+  );
+  const { result } = renderHook(
+    () =>
+      useCellActionButtons({
+        cell: {
+          cellId,
+          name,
+          config: { disabled: false, hide_code: false, column: null },
+          status: "idle",
+          hasOutput: false,
+          hasConsoleOutput: false,
+          getEditorView: () => null,
+        },
+      }),
+    { wrapper },
+  );
+  return result.current;
+}
+
+function getAction(groups: ActionButton[][], label: string): ActionButton {
+  const action = groups.flat().find((a) => a.label === label);
+  if (!action) {
+    throw new Error(`Action "${label}" not found`);
+  }
+  return action;
+}
+
+describe("useCellActionButtons", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("places Copy cell ID right after Copy link to cell", () => {
+    const groups = renderActions(CellId.create(), "_");
+    const linkGroup = groups.find((group) =>
+      group.some((a) => a.label === "Copy link to cell"),
+    );
+    expect(linkGroup?.map((a) => a.label)).toEqual([
+      "Name",
+      "Copy link to cell",
+      "Copy cell ID",
+    ]);
+  });
+
+  it("copies the cell ID of an unnamed cell", async () => {
+    const cellId = CellId.create();
+    const groups = renderActions(cellId, "_");
+
+    await getAction(groups, "Copy cell ID").handle();
+
+    expect(copyToClipboard).toHaveBeenCalledWith(cellId);
+    expect(toast).toHaveBeenCalledWith({
+      description: "Cell ID copied to clipboard",
+    });
+  });
+
+  it("copies the cell ID, not the name, of a named cell", async () => {
+    const cellId = CellId.create();
+    const groups = renderActions(cellId, "my_cell");
+
+    await getAction(groups, "Copy cell ID").handle();
+
+    expect(copyToClipboard).toHaveBeenCalledWith(cellId);
+  });
+
+  it("keeps Copy link to cell disabled for unnamed cells", () => {
+    const groups = renderActions(CellId.create(), "_");
+
+    expect(getAction(groups, "Copy link to cell").disabled).toBe(true);
+    expect(getAction(groups, "Copy cell ID").disabled).toBeUndefined();
+  });
+});

package/src/components/editor/actions/name-cell-input.tsx

@@ -3,13 +3,14 @@
 import React, { useRef, useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Tooltip } from "@/components/ui/tooltip";
-import { getCellNames, useCellActions } from "@/core/cells/cells";
+import { getCellNames } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import {
   getValidName,
   isInternalCellName,
   normalizeName,
 } from "@/core/cells/names";
+import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import { useOnMount } from "@/hooks/useLifecycle";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
@@ -71,9 +72,9 @@ export const NameCellContentEditable: React.FC<{
   value: string;
   className: string;
 }> = ({ value, cellId, className }) => {
-  const { updateCellName } = useCellActions();
+  const edit = useNotebookDocumentEdit();
   const inputProps = useCellNameInput(value, (newName) =>
-    updateCellName({ cellId, name: newName }),
+    edit((tx) => tx.setName(cellId, newName)),
   );
 
   // If the name is the default, don't render the content editable

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

@@ -14,10 +14,9 @@ export const AGENT_LABELS: Record<AgentTab, string> = {
   claude: "Claude",
   codex: "Codex",
   opencode: "OpenCode",
-  prompt: "Prompt",
+  prompt: "Other Agents",
 };
 
-/** How to invoke marimo: from the local checkout in dev, else via uvx. */
 export function getMarimoCommand(): string {
   return import.meta.env.DEV ? "uv run marimo" : "uvx marimo@latest";
 }
@@ -67,7 +66,7 @@ export function getTerminalCommand(
 }
 
 /**
- * The raw prompt for the "Prompt" tab. Mirrors the output of
+ * The raw prompt for the "Other Agents" tab. Mirrors the output of
  * `marimo pair prompt` (see `marimo/_cli/pair/commands.py`) so pasting it into
  * an agent behaves the same as the terminal commands.
  */
@@ -81,7 +80,7 @@ export function getRawPrompt(
   const authentication = token
     ? formatPrompt(
         templates?.token ??
-          "\n\nFor authenticated notebook discovery, set `export MARIMO_TOKEN={token}` in the shell that runs marimo.",
+          "\n\nFor explicit server authentication, set `export MARIMO_TOKEN={token}` in the shell that runs marimo.",
         { token: shellQuote(token) },
       )
     : "";
@@ -92,9 +91,13 @@ export function getRawPrompt(
       command,
       url,
       notebook: notebook
-        ? formatPrompt(templates?.notebook ?? "Notebook: {notebook}\n", {
-            notebook,
-          })
+        ? formatPrompt(
+            templates?.notebook ??
+              "Notebook: {notebook} (use --session for execution)\n",
+            {
+              notebook,
+            },
+          )
         : "",
       session:
         session && !notebook

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { CheckIcon, CopyIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
 import { Button } from "@/components/ui/button";
 import {
@@ -53,21 +53,20 @@ export const PairWithAgentModal: React.FC<{
   const config = useAtomValue(pairConfigAtom);
   const hostEnabled = config?.hostEnabled ?? false;
   const stableSessionId = useAtomValue(stableSessionIdAtom);
+  const lookupIdentity = useMemo(
+    () => ({ hostEnabled, stableSessionId }),
+    [hostEnabled, stableSessionId],
+  );
   const [lookup, setLookup] = useState<
     {
-      sessionId: string;
-    } & (
-      | { status: "ready"; notebookId: string | null }
-      | { status: "loading" | "error" }
-    )
+      identity: typeof lookupIdentity;
+    } & ({ status: "ready"; notebookId: string | null } | { status: "error" })
   >();
   useEffect(() => {
-    if (!hostEnabled || !stableSessionId) {
-      setLookup(undefined);
+    const { hostEnabled, stableSessionId: sessionId } = lookupIdentity;
+    if (!hostEnabled || !sessionId) {
       return;
     }
-    const sessionId = stableSessionId;
-    setLookup({ sessionId, status: "loading" });
     let cancelled = false;
     API.get<Record<string, { session_id: string; notebook_id: string | null }>>(
       "/sessions",
@@ -79,22 +78,26 @@ export const PairWithAgentModal: React.FC<{
           );
           setLookup(
             session
-              ? { sessionId, status: "ready", notebookId: session.notebook_id }
-              : { sessionId, status: "error" },
+              ? {
+                  identity: lookupIdentity,
+                  status: "ready",
+                  notebookId: session.notebook_id,
+                }
+              : { identity: lookupIdentity, status: "error" },
           );
         }
       })
       .catch(() => {
         if (!cancelled) {
-          setLookup({ sessionId, status: "error" });
+          setLookup({ identity: lookupIdentity, status: "error" });
         }
       });
     return () => {
       cancelled = true;
     };
-  }, [hostEnabled, stableSessionId]);
+  }, [lookupIdentity]);
   const currentLookup =
-    lookup?.sessionId === stableSessionId ? lookup : undefined;
+    lookup?.identity === lookupIdentity ? lookup : undefined;
   const verified = !hostEnabled || currentLookup?.status === "ready";
   const notebookId =
     hostEnabled && currentLookup?.status === "ready"
@@ -113,11 +116,12 @@ export const PairWithAgentModal: React.FC<{
   return (
     <DialogContent className="sm:max-w-2xl">
       <DialogHeader>
-        <DialogTitle>Pair with an agent</DialogTitle>
+        <DialogTitle>Pair an agent to this notebook</DialogTitle>
         <DialogDescription>
-          Use an AI coding agent to pair-program on this notebook.{" "}
+          Choose your coding agent, then follow the instructions below to
+          connect it to this notebook using marimo pair.{" "}
           <a
-            href="https://links.marimo.app/marimo-pair"
+            href="https://links.marimo.app/docs-marimo-pair"
             target="_blank"
             rel="noopener noreferrer"
             className="underline"
@@ -156,13 +160,8 @@ export const PairWithAgentModal: React.FC<{
               className="mt-4 flex flex-col gap-4"
             >
               <Step
-                index={1}
-                title="Run in your terminal"
-                hint={
-                  hostEnabled && tab === "opencode"
-                    ? "Agent connections require OpenCode 2.x."
-                    : undefined
-                }
+                index={hasToken ? 1 : undefined}
+                title="Run this command in your terminal:"
               >
                 <CommandBlock
                   command={getTerminalCommand(
@@ -175,7 +174,7 @@ export const PairWithAgentModal: React.FC<{
                 />
               </Step>
               {hasToken && authToken && (
-                <Step index={2} title="Paste when prompted for a token">
+                <Step index={2} title="When prompted, paste this token:">
                   <CommandBlock
                     command={authToken}
                     display={maskToken(authToken)}
@@ -188,8 +187,7 @@ export const PairWithAgentModal: React.FC<{
 
           <TabsContent value="prompt" className="mt-4 flex flex-col gap-4">
             <Step
-              index={1}
-              title="Copy this prompt into your agent"
+              title="Paste this prompt into your coding agent:"
               hint={
                 hasToken
                   ? "Includes your auth token — keep it private."
@@ -221,7 +219,7 @@ export const PairWithAgentModal: React.FC<{
 };
 
 const Step: React.FC<{
-  index: number;
+  index?: number;
   title: string;
   hint?: string;
   children: React.ReactNode;
@@ -229,7 +227,8 @@ const Step: React.FC<{
   <div className="flex flex-col gap-2">
     <div className="flex items-baseline gap-2">
       <span className="text-sm font-medium">
-        {index}. {title}
+        {index !== undefined && `${index}. `}
+        {title}
       </span>
       {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
     </div>