@marimo-team/islands 0.25.3-dev23 → 0.25.3-dev231

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 () => {
@@ -102,12 +102,17 @@ describe("PairWithAgentModal", () => {
       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",
-      );
+      expect(
+        within(panel).getByText(
+          tab === "Other Agents"
+            ? "Copy this prompt into your agent"
+            : "Run 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 +124,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 +142,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 +167,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 +190,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 +319,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,6 +367,7 @@ describe("PairWithAgentModal", () => {
     });
 
     const panel = screen.getByRole("tabpanel");
+    expect(panel).toHaveTextContent("1. Run in your terminal");
     expect(panel).toHaveTextContent("2. Paste when prompted for a token");
     expect(panel).not.toHaveTextContent("secret-token");
     fireEvent.click(

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

@@ -60,24 +60,22 @@ 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();
+    expect(screen.getByRole("dialog", { name: "Pair an agent" })).toBeVisible();
   });
 
   it("opens the pairing dialog and preserves a passed click handler", () => {
@@ -85,12 +83,10 @@ describe("PairWithAgent", () => {
     stubTokenFetch();
     render(<PairWithAgentButton onClick={onClick} />, { wrapper });
 
-    fireEvent.click(screen.getByRole("button", { name: "Connect your agent" }));
+    fireEvent.click(screen.getByRole("button", { name: "Pair your agent" }));
 
     expect(onClick).toHaveBeenCalledOnce();
-    expect(
-      screen.getByRole("dialog", { name: "Pair with an agent" }),
-    ).toBeVisible();
+    expect(screen.getByRole("dialog", { name: "Pair an agent" })).toBeVisible();
   });
 
   it("hides pairing controls in WASM", () => {

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,7 +14,7 @@ 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. */
@@ -67,7 +67,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.
  */

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,9 +116,9 @@ export const PairWithAgentModal: React.FC<{
   return (
     <DialogContent className="sm:max-w-2xl">
       <DialogHeader>
-        <DialogTitle>Pair with an agent</DialogTitle>
+        <DialogTitle>Pair an agent</DialogTitle>
         <DialogDescription>
-          Use an AI coding agent to pair-program on this notebook.{" "}
+          Use an AI coding agent to pair program on this notebook.{" "}
           <a
             href="https://links.marimo.app/marimo-pair"
             target="_blank"
@@ -156,7 +159,7 @@ export const PairWithAgentModal: React.FC<{
               className="mt-4 flex flex-col gap-4"
             >
               <Step
-                index={1}
+                index={hasToken ? 1 : undefined}
                 title="Run in your terminal"
                 hint={
                   hostEnabled && tab === "opencode"
@@ -188,7 +191,6 @@ 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"
               hint={
                 hasToken
@@ -221,7 +223,7 @@ export const PairWithAgentModal: React.FC<{
 };
 
 const Step: React.FC<{
-  index: number;
+  index?: number;
   title: string;
   hint?: string;
   children: React.ReactNode;
@@ -229,7 +231,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>

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

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { BotIcon } from "lucide-react";
+import { ArrowUpRightIcon, BotIcon } from "lucide-react";
 import React from "react";
 import { AiProviderIcon } from "@/components/ai/ai-provider-icon";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
@@ -33,7 +33,7 @@ export const usePairWithAgentModal = () => {
 
 export const PairWithAgentButton: React.FC<
   ButtonProps & { label?: string }
-> = ({ className, label = "Connect your agent", onClick, ...props }) => {
+> = ({ className, label = "Pair your agent", onClick, ...props }) => {
   const openPairWithAgentModal = usePairWithAgentModal();
 
   if (isWasm()) {
@@ -62,7 +62,7 @@ export const PairWithAgentButton: React.FC<
 export const PairWithAgentBanner: React.FC<{
   label?: string;
   className?: string;
-}> = ({ label = "Connect your agent", className }) => {
+}> = ({ label = "Pair your agent", className }) => {
   const openPairWithAgentModal = usePairWithAgentModal();
 
   if (isWasm()) {
@@ -72,7 +72,7 @@ export const PairWithAgentBanner: React.FC<{
   return (
     <div
       className={cn(
-        "rounded-lg border border-(--blue-6) bg-(--blue-2)/50 p-3",
+        "rounded-lg border border-border bg-muted/30 p-3",
         className,
       )}
     >
@@ -103,16 +103,21 @@ export const PairWithAgentBanner: React.FC<{
         </fieldset>
       </div>
       <div className="mt-1 text-xs leading-relaxed">
-        <p className="inline">
-          Use your AI coding agent to pair-program on this notebook.
+        <p>
+          Pair your coding agent with this notebook to edit and run cells,
+          inspect variables, and more, straight from your agent's CLI or user
+          interface.
         </p>
-        <button
+        <Button
           type="button"
+          variant="outline"
+          size="xs"
           onClick={openPairWithAgentModal}
-          className="text-link hover:underline ml-1"
+          className="mt-3 gap-1"
         >
-          Learn more.
-        </button>
+          Set up pairing
+          <ArrowUpRightIcon className="size-3.5" aria-hidden={true} />
+        </Button>
       </div>
     </div>
   );

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

@@ -14,6 +14,7 @@ import {
   DatabaseIcon,
   EyeIcon,
   EyeOffIcon,
+  HashIcon,
   ImageIcon,
   LinkIcon,
   PlayIcon,
@@ -37,8 +38,11 @@ import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/use-toast";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { hasOnlyOneCellAtom, useCellActions } from "@/core/cells/cells";
+import { hasOnlyOneCellAtom } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
+import { showHiddenCodeAtom } from "@/core/cells/editor";
 import { type CellId, SETUP_CELL_ID } from "@/core/cells/ids";
+import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import type { CellData } from "@/core/cells/types";
 import { formatEditorViews } from "@/core/codemirror/format";
 import {
@@ -52,9 +56,8 @@ import {
   appWidthAtom,
   autoInstantiateAtom,
 } from "@/core/config/config";
-import { kioskModeAtom } from "@/core/mode";
-import { useRequestClient } from "@/core/network/requests";
 import type { CellConfig, RuntimeState } from "@/core/network/types";
+import { canEditAtom } from "@/core/notebook";
 import { canLinkToCell, createCellLink } from "@/utils/cell-urls";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadCellOutputAsImage } from "@/utils/download";
@@ -83,16 +86,15 @@ interface Props {
 
 export function useCellActionButtons({ cell, closePopover }: Props) {
   const {
-    createNewCell: createCell,
-    updateCellConfig,
-    updateCellName,
     moveCell,
     sendToTop,
     sendToBottom,
     addColumnBreakpoint,
     clearCellOutput,
-    markUntouched,
+    createCell,
   } = useCellActions();
+  const showHiddenCode = useSetAtom(showHiddenCodeAtom);
+  const edit = useNotebookDocumentEdit();
   const splitCell = useSplitCellCallback();
   const runCell = useRunCell(cell?.cellId);
   const hasOnlyOneCell = useAtomValue(hasOnlyOneCellAtom);
@@ -102,11 +104,10 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
   const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
-  const kioskMode = useAtomValue(kioskModeAtom);
+  const canEdit = useAtomValue(canEditAtom);
   const appWidth = useAtomValue(appWidthAtom);
-  const { saveCellConfig } = useRequestClient();
 
-  if (!cell || kioskMode) {
+  if (!cell || !canEdit) {
     return [];
   }
 
@@ -120,16 +121,13 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
     status,
   } = cell;
 
-  const toggleDisabled = async () => {
-    const newConfig = { disabled: !config.disabled };
-    await saveCellConfig({ configs: { [cellId]: newConfig } });
-    updateCellConfig({ cellId, config: newConfig });
+  const toggleDisabled = () => {
+    edit((tx) => tx.updateConfig(cellId, { disabled: !config.disabled }));
   };
 
-  const toggleHideCode = async () => {
+  const toggleHideCode = () => {
     const newConfig: Partial<CellConfig> = { hide_code: !config.hide_code };
-    await saveCellConfig({ configs: { [cellId]: newConfig } });
-    updateCellConfig({ cellId, config: newConfig });
+    edit((tx) => tx.updateConfig(cellId, newConfig));
     const editorView = getEditorView();
     // If we're hiding the code, we should blur the editor
     // otherwise, we should focus it
@@ -221,21 +219,19 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
           if (!editorView) {
             return;
           }
-          maybeAddMarimoImport({ autoInstantiate, createNewCell: createCell });
+          maybeAddMarimoImport({ autoInstantiate, createCell });
           switchLanguage(editorView, {
             language: "markdown",
             keepCodeAsIs: false,
           });
           // Code stays visible until the user blurs the cell
           if (!config.hide_code && MARKDOWN_INITIAL_HIDE_CODE) {
-            await saveCellConfig({
-              configs: { [cellId]: { hide_code: MARKDOWN_INITIAL_HIDE_CODE } },
-            });
-            updateCellConfig({
-              cellId,
-              config: { hide_code: MARKDOWN_INITIAL_HIDE_CODE },
-            });
-            markUntouched({ cellId });
+            edit((tx) =>
+              tx.updateConfig(cellId, {
+                hide_code: MARKDOWN_INITIAL_HIDE_CODE,
+              }),
+            );
+            showHiddenCode({ cellId });
           }
         },
         hidden: isSetupCell,
@@ -266,7 +262,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
               }
               maybeAddMarimoImport({
                 autoInstantiate,
-                createNewCell: createCell,
+                createCell,
               });
               switchLanguage(editorView, {
                 language: "sql",
@@ -288,7 +284,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
         ),
         label: "Create cell above",
         hotkey: "cell.createAbove",
-        handle: () => createCell({ cellId, before: true }),
+        handle: () => createCell({ before: cellId }),
         hidden: isSetupCell,
         redundant: true,
       },
@@ -301,7 +297,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
         ),
         label: "Create cell below",
         hotkey: "cell.createBelow",
-        handle: () => createCell({ cellId, before: false }),
+        handle: () => createCell({ after: cellId }),
         redundant: true,
       },
       {
@@ -406,7 +402,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
                     }
                   }}
                   onChange={(newName) =>
-                    updateCellName({ cellId, name: newName })
+                    edit((tx) => tx.setName(cellId, newName))
                   }
                 />
               </div>
@@ -417,7 +413,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
           <NameCellInput
             placeholder={"cell name"}
             value={name}
-            onChange={(newName) => updateCellName({ cellId, name: newName })}
+            onChange={(newName) => edit((tx) => tx.setName(cellId, newName))}
             onEnterKey={() => closePopover?.()}
           />
         ),
@@ -435,6 +431,15 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
           toast({ description: "Link copied to clipboard" });
         },
       },
+      {
+        icon: <HashIcon size={13} strokeWidth={1.5} />,
+        label: "Copy cell ID",
+        additionalKeywords: ["cell_id", "identifier"],
+        handle: async () => {
+          await copyToClipboard(cellId);
+          toast({ description: "Cell ID copied to clipboard" });
+        },
+      },
     ],
 
     // Delete