@marimo-team/islands 0.25.3-dev19 → 0.25.3-dev192

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,7 +116,7 @@ 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.{" "}
           <a

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

@@ -37,8 +37,10 @@ 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 { 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 {
@@ -53,7 +55,6 @@ import {
   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 { canLinkToCell, createCellLink } from "@/utils/cell-urls";
 import { copyToClipboard } from "@/utils/copy";
@@ -83,16 +84,15 @@ interface Props {
 
 export function useCellActionButtons({ cell, closePopover }: Props) {
   const {
-    createNewCell: createCell,
-    updateCellConfig,
-    updateCellName,
     moveCell,
     sendToTop,
     sendToBottom,
     addColumnBreakpoint,
     clearCellOutput,
     markUntouched,
+    createCell,
   } = useCellActions();
+  const edit = useNotebookDocumentEdit();
   const splitCell = useSplitCellCallback();
   const runCell = useRunCell(cell?.cellId);
   const hasOnlyOneCell = useAtomValue(hasOnlyOneCellAtom);
@@ -104,7 +104,6 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const kioskMode = useAtomValue(kioskModeAtom);
   const appWidth = useAtomValue(appWidthAtom);
-  const { saveCellConfig } = useRequestClient();
 
   if (!cell || kioskMode) {
     return [];
@@ -120,16 +119,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,20 +217,18 @@ 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 },
-            });
+            edit((tx) =>
+              tx.updateConfig(cellId, {
+                hide_code: MARKDOWN_INITIAL_HIDE_CODE,
+              }),
+            );
             markUntouched({ cellId });
           }
         },
@@ -266,7 +260,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
               }
               maybeAddMarimoImport({
                 autoInstantiate,
-                createNewCell: createCell,
+                createCell,
               });
               switchLanguage(editorView, {
                 language: "sql",
@@ -288,7 +282,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 +295,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 +400,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
                     }
                   }}
                   onChange={(newName) =>
-                    updateCellName({ cellId, name: newName })
+                    edit((tx) => tx.setName(cellId, newName))
                   }
                 />
               </div>
@@ -417,7 +411,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?.()}
           />
         ),

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

@@ -62,8 +62,9 @@ import {
   getNotebook,
   hasDisabledCellsAtom,
   undoLabelAtom,
-  useCellActions,
 } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
+import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import { disabledCellIds } from "@/core/cells/utils";
 import { capabilitiesAtom } from "@/core/config/capabilities";
 import { aiEnabledAtom, useResolvedMarimoConfig } from "@/core/config/config";
@@ -77,7 +78,6 @@ import { createShareableLink } from "@/core/wasm/share";
 import { isWasm } from "@/core/wasm/utils";
 import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
 import { copyToClipboard } from "@/utils/copy";
-import { Objects } from "@/utils/objects";
 import { Strings } from "@/utils/strings";
 import { newNotebookURL } from "@/utils/urls";
 import { useRunAllCells } from "../cell/useRunCells";
@@ -127,12 +127,11 @@ export function useNotebookActions({
   const aiEnabled = useAtomValue(aiEnabledAtom);
 
   const {
-    updateCellConfig,
     undoDeleteCell,
     clearAllCellOutputs,
-    addSetupCellIfDoesntExist,
     collapseAllCells,
     expandAllCells,
+    addSetupCell,
   } = useCellActions();
   const restartKernel = useRestartKernel();
   const runAllCells = useRunAllCells();
@@ -142,7 +141,8 @@ export function useNotebookActions({
   const { handleClick: openSettings } = useOpenSettingsToTab();
   const setKeyboardShortcutsOpen = useSetAtom(keyboardShortcutsAtom);
   const setExportOptions = useSetAtom(exportOptionsAtom);
-  const { readCode, saveCellConfig } = useRequestClient();
+  const { readCode } = useRequestClient();
+  const edit = useNotebookDocumentEdit();
   const detectedDatabaseSources = useDetectedDataSources("database");
   const detectedStorageSources = useDetectedDataSources("storage");
   const addDetectedDataSource = useAddDetectedDataSource();
@@ -301,7 +301,7 @@ export function useNotebookActions({
 
     {
       icon: <SparklesIcon size={14} strokeWidth={1.5} />,
-      label: "Connect your agent",
+      label: "Pair an agent",
       hidden: isWasm(),
       handle: async () => {
         openModal(<PairWithAgentModal onClose={closeModal} />);
@@ -449,18 +449,13 @@ export function useNotebookActions({
       icon: <ZapIcon size={14} strokeWidth={1.5} />,
       label: "Enable all cells",
       hidden: !hasDisabledCells || kioskMode,
-      handle: async () => {
-        const notebook = getNotebook();
-        const ids = disabledCellIds(notebook);
-        const newConfigs = Objects.fromEntries(
-          ids.map((cellId) => [cellId, { disabled: false }]),
-        );
-        // send to BE
-        await saveCellConfig({ configs: newConfigs });
-        // update on FE
-        for (const cellId of ids) {
-          updateCellConfig({ cellId, config: { disabled: false } });
-        }
+      handle: () => {
+        const ids = disabledCellIds(getNotebook());
+        edit((tx) => {
+          for (const cellId of ids) {
+            tx.updateConfig(cellId, { disabled: false });
+          }
+        });
       },
     },
 
@@ -469,7 +464,7 @@ export function useNotebookActions({
       icon: <DiamondPlusIcon size={14} strokeWidth={1.5} />,
       label: "Add setup cell",
       handle: () => {
-        addSetupCellIfDoesntExist({});
+        addSetupCell();
       },
     },
     {

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

@@ -5,7 +5,7 @@ import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
 import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { reloadSafe } from "@/utils/reload-safe";
 
 export function useRestartKernel() {

package/src/components/editor/actions/useSetCodeVisibility.ts

@@ -1,10 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useCallback } from "react";
-import { getNotebook, useCellActions } from "@/core/cells/cells";
+import { getNotebook } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { useRequestClient } from "@/core/network/requests";
+import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import type { CellConfig } from "@/core/network/types";
 import { Objects } from "@/utils/objects";
 
@@ -21,11 +21,10 @@ const cellCodeKind = (code: string): CellCodeKind =>
  * cell of the given kind.
  */
 export const useSetCodeVisibility = () => {
-  const { updateCellConfig } = useCellActions();
-  const { saveCellConfig } = useRequestClient();
+  const edit = useNotebookDocumentEdit();
 
   return useCallback(
-    async (hidden: boolean, kind: CellCodeKind) => {
+    (hidden: boolean, kind: CellCodeKind) => {
       const notebook = getNotebook();
 
       const newConfigs: Record<CellId, Partial<CellConfig>> = {};
@@ -46,12 +45,12 @@ export const useSetCodeVisibility = () => {
         return;
       }
 
-      await saveCellConfig({ configs: newConfigs });
-
-      for (const [cellId, config] of entries) {
-        updateCellConfig({ cellId, config });
-      }
+      edit((tx) => {
+        for (const [cellId, config] of entries) {
+          tx.updateConfig(cellId, config);
+        }
+      });
     },
-    [updateCellConfig, saveCellConfig],
+    [edit],
   );
 };

package/src/components/editor/actions/useSetOutputsExpanded.ts

@@ -1,14 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useCallback } from "react";
-import {
-  getNotebook,
-  type NotebookState,
-  useCellActions,
-} from "@/core/cells/cells";
+import { getNotebook, type NotebookState } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
-import { useRequestClient } from "@/core/network/requests";
+import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import type { CellConfig } from "@/core/network/types";
 import { Objects } from "@/utils/objects";
 
@@ -44,24 +40,23 @@ export function outputExpansionConfigs(
  * every output to a fixed height, by setting each cell's `expand_output` config.
  */
 export const useSetOutputsExpanded = () => {
-  const { updateCellConfig } = useCellActions();
-  const { saveCellConfig } = useRequestClient();
+  const edit = useNotebookDocumentEdit();
 
   return useCallback(
-    async (expanded: boolean) => {
-      const newConfigs = outputExpansionConfigs(getNotebook(), expanded);
-
-      const entries = Objects.entries(newConfigs);
+    (expanded: boolean) => {
+      const entries = Objects.entries(
+        outputExpansionConfigs(getNotebook(), expanded),
+      );
       if (entries.length === 0) {
         return;
       }
 
-      await saveCellConfig({ configs: newConfigs });
-
-      for (const [cellId, config] of entries) {
-        updateCellConfig({ cellId, config });
-      }
+      edit((tx) => {
+        for (const [cellId, config] of entries) {
+          tx.updateConfig(cellId, config);
+        }
+      });
     },
-    [updateCellConfig, saveCellConfig],
+    [edit],
   );
 };

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

@@ -106,9 +106,9 @@ export const AddCellWithAI: React.FC<{
   const runtimeManager = useRuntimeManager();
 
   const inputRef = useRef<ReactCodeMirrorRef>(null);
-  const submissionController = useRef(
-    new StagedCellSubmissionController(),
-  ).current;
+  const [submissionController] = useState(
+    () => new StagedCellSubmissionController(),
+  );
 
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { files, addFiles, removeFile } = useFileState();

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

@@ -408,6 +408,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
               </div>
             </Tooltip>
             <Button
+              aria-label="Discard AI completion"
               data-testid="decline-completion-button"
               variant="text"
               size="icon"

package/src/components/editor/alerts/__tests__/connection-notice.test.tsx

@@ -11,7 +11,7 @@ import { AppConfigSchema } from "@/core/config/config-schema";
 import { kernelStartupErrorAtom } from "@/core/errors/state";
 import { connectionAtom } from "@/core/network/connection";
 import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
-import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { WebSocketClosedReason, ConnectionState } from "@/core/session/types";
 import { chromeAtom } from "../../chrome/state";
 import { runtimeDetailsExpandedAtom } from "../../chrome/panels/runtime-details-state";
 import { ConnectionNotice } from "../connection-notice";

package/src/components/editor/alerts/connection-notice.tsx

@@ -8,7 +8,7 @@ import type { AppConfig } from "@/core/config/config-schema";
 import { connectionAtom } from "@/core/network/connection";
 import { useConnectionNotice } from "@/core/network/useConnectionNotice";
 import { sandboxAtom } from "@/core/packages/sandbox-state";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { useInterval } from "@/hooks/useInterval";
 import { cn } from "@/utils/cn";
 import { runtimeDetailsExpandedAtom } from "../chrome/panels/runtime-details-state";

package/src/components/editor/alerts/startup-logs-alert.tsx

@@ -51,6 +51,7 @@ export const StartupLogsAlert: React.FC = () => {
             {isRunning ? "Initializing..." : "Initialized"}
           </span>
           <Button
+            aria-label="Dismiss startup logs"
             variant="text"
             data-testid="remove-startup-logs-button"
             size="icon"

package/src/components/editor/app-container.tsx

@@ -8,7 +8,7 @@ import {
   type ConnectionStatus,
   WebSocketClosedReason,
   ConnectionState,
-} from "@/core/websocket/types";
+} from "@/core/session/types";
 import { cn } from "@/utils/cn";
 import { DynamicFavicon } from "./dynamic-favicon";
 import { StatusOverlay } from "./header/status";

package/src/components/editor/boundary/__tests__/ErrorBoundary.test.tsx

@@ -14,7 +14,7 @@ import { requestClientAtom } from "@/core/network/requests";
 import type { EnvironmentInfo } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { ErrorBoundary } from "../ErrorBoundary";
 
 vi.mock("@/utils/copy", () => ({

package/src/components/editor/cell/CreateCellButton.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { DatabaseIcon, DiamondPlusIcon, PlusIcon } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "@/components/editor/inputs/Inputs";
 import { MinimalHotkeys } from "@/components/shortcuts/renderShortcut";
 import {
@@ -10,14 +10,14 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
-} from "@/core/websocket/connection-utils";
-import type { ConnectionState } from "@/core/websocket/types";
+} from "@/core/session/connection-utils";
+import type { ConnectionState } from "@/core/session/types";
 import { cn } from "@/utils/cn";
 import { Tooltip } from "../../ui/tooltip";
 import { MarkdownIcon, PythonIcon } from "./code/icons";
@@ -33,10 +33,11 @@ export const CreateCellButton = ({
   onClick: ((opts: { code: string; hideCode?: boolean }) => void) | undefined;
   oneClickShortcut: "shift" | "mod";
 }) => {
-  const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
+  const { createCell, addSetupCell } = useCellActions();
   const shortcut = `${oneClickShortcut}-Click`;
   const [open, setOpen] = useState(false);
-  const [justOpened, setJustOpened] = useState(false);
+  // Time the dropdown last opened, to ignore the click that opened it
+  const openedAt = useRef(0);
 
   const baseTooltipContent =
     getConnectionTooltip(connectionState) || tooltipContent;
@@ -61,7 +62,7 @@ export const CreateCellButton = ({
   // enabled; the user experience is confusing otherwise (how does the user
   // know they need to run import marimo as mo. first?).
   const addMarkdownCell = () => {
-    maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
+    maybeAddMarimoImport({ autoInstantiate: true, createCell });
     onClick?.({
       code: LanguageAdapters.markdown.defaultCode,
       hideCode: MARKDOWN_INITIAL_HIDE_CODE,
@@ -69,23 +70,17 @@ export const CreateCellButton = ({
   };
 
   const addSQLCell = () => {
-    maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
+    maybeAddMarimoImport({ autoInstantiate: true, createCell });
     onClick?.({ code: LanguageAdapters.sql.defaultCode });
   };
 
-  const addSetupCell = () => {
-    addSetupCellIfDoesntExist({});
-  };
-
   const renderIcon = (icon: React.ReactNode) => {
     return <div className="mr-3 text-muted-foreground">{icon}</div>;
   };
 
   const openDropdown = () => {
     setOpen(true);
-    setJustOpened(true);
-    // Allow interactions after a brief delay to prevent the dropdown items immediately being clicked
-    setTimeout(() => setJustOpened(false), 200);
+    openedAt.current = Date.now();
   };
 
   // We use onPointerDownCapture (not onPointerDown) to intercept events in
@@ -121,15 +116,14 @@ export const CreateCellButton = ({
   const handleOpenChange = (isOpen: boolean) => {
     setOpen(isOpen);
     if (isOpen) {
-      setJustOpened(true);
-      // Allow interactions after a brief delay
-      setTimeout(() => setJustOpened(false), 200);
+      openedAt.current = Date.now();
     }
   };
 
   const handleFirstItemClick = (e: React.MouseEvent) => {
-    // Hack to prevent the first item from being clicked when the dropdown is opened
-    if (justOpened) {
+    // Hack to prevent the first item from being clicked when the dropdown is
+    // opened: allow interactions only after a brief delay
+    if (Date.now() - openedAt.current < 200) {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -172,7 +166,7 @@ export const CreateCellButton = ({
           {renderIcon(<DatabaseIcon size={13} strokeWidth={1.5} />)}
           SQL cell
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={addSetupCell}>
+        <DropdownMenuItem onClick={() => addSetupCell()}>
           {renderIcon(<DiamondPlusIcon size={13} strokeWidth={1.5} />)}
           Setup cell
         </DropdownMenuItem>

package/src/components/editor/cell/DeleteButton.tsx

@@ -5,8 +5,8 @@ import type { RuntimeState } from "@/core/network/types";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
-} from "@/core/websocket/connection-utils";
-import type { ConnectionState } from "@/core/websocket/types";
+} from "@/core/session/connection-utils";
+import type { ConnectionState } from "@/core/session/types";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { Button } from "../../ui/button";
@@ -37,6 +37,7 @@ export const DeleteButton = (props: {
   return (
     <Tooltip content={tooltipMsg} usePortal={false}>
       <Button
+        aria-label="Delete cell"
         variant="ghost"
         size="icon"
         onClick={onClick}