@marimo-team/islands 0.25.3-dev18 → 0.25.3-dev182

package/src/components/pages/home-page.tsx

@@ -2,13 +2,11 @@
 
 import { useAtom, useSetAtom } from "jotai";
 import {
-  BookTextIcon,
   ChevronDownIcon,
   ChevronRightIcon,
   ChevronsDownUpIcon,
-  ClockIcon,
   ExternalLinkIcon,
-  PlayCircleIcon,
+  PlusIcon,
   PowerOffIcon,
   RefreshCcwIcon,
   SearchIcon,
@@ -44,6 +42,7 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { getSessionId, isSessionId } from "@/core/kernel/session";
@@ -64,7 +63,6 @@ import { ConfigButton } from "../app-config/app-config-button";
 import { ErrorBoundary } from "../editor/boundary/ErrorBoundary";
 import { ShutdownButton } from "../editor/controls/shutdown-button";
 import {
-  Header,
   OpenTutorialDropDown,
   ResourceLinks,
   TruncatedWorkspaceBanner,
@@ -83,6 +81,9 @@ function tabTarget(path: string) {
   return `${getSessionId()}-${encodeURIComponent(path)}`;
 }
 
+const NOTEBOOK_TAB_CLASS =
+  "-mb-px rounded-none border-b-2 border-transparent px-1 py-3 text-(--gray-11) transition-colors hover:text-foreground focus-visible:ring-inset focus-visible:ring-offset-0 data-[state=active]:border-(--green-11) data-[state=active]:bg-transparent data-[state=active]:text-(--green-11) data-[state=active]:shadow-none";
+
 const HomePage: React.FC = () => {
   const [nonce, setNonce] = useState(0);
   const { getRecentFiles, getRunningNotebooks } = useRequestClient();
@@ -123,28 +124,75 @@ const HomePage: React.FC = () => {
           setRunningNotebooks: runningResponse.setData,
         }}
       >
-        <div className="absolute top-3 right-5 flex gap-3 z-50">
-          <OpenTutorialDropDown />
-          <ConfigButton showAppConfig={false} />
-          <ShutdownButton
-            description={`This will shutdown the notebook server and terminate all running notebooks (${running.size}). You'll lose all data that's in memory.`}
-          />
-        </div>
-        <div className="flex flex-col gap-6 max-w-6xl container pt-5 pb-20 z-10">
-          <img src="logo.png" alt="marimo logo" className="w-48 mb-2" />
-          <CreateNewNotebook />
-          <ResourceLinks />
-          <NotebookList
-            header={<Header Icon={PlayCircleIcon}>Running notebooks</Header>}
-            files={[...running.values()]}
-          />
-          <NotebookList
-            header={<Header Icon={ClockIcon}>Recent notebooks</Header>}
-            files={recents.files}
-          />
-          <ErrorBoundary>
-            <WorkspaceNotebooks onRefreshRecents={recentsResponse.refetch} />
-          </ErrorBoundary>
+        <div className="min-h-screen bg-background">
+          <header className="border-b border-border/60">
+            <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-5 py-5 sm:px-10">
+              <img src="logo.png" alt="marimo" className="w-28" />
+              <div className="flex items-center gap-3">
+                <ConfigButton showAppConfig={false} />
+                <ShutdownButton
+                  description={`This will shutdown the notebook server and terminate all running notebooks (${running.size}). You'll lose all data that's in memory.`}
+                />
+              </div>
+            </div>
+          </header>
+          <main className="mx-auto max-w-7xl px-5 py-8 sm:px-10 sm:py-10">
+            <div className="mb-8">
+              <h1 className="text-2xl font-semibold tracking-tight">
+                Your notebooks
+              </h1>
+              <p className="mt-2 text-sm text-muted-foreground">
+                Pick up where you left off, or start something new.
+              </p>
+              <div className="mt-5 flex items-center gap-3">
+                <CreateNewNotebook />
+                <OpenTutorialDropDown />
+              </div>
+            </div>
+            <Tabs defaultValue="workspace">
+              <TabsList
+                aria-label="Notebooks"
+                className="mb-5 flex h-auto w-full justify-start gap-6 rounded-none border-b border-border/70 bg-transparent p-0"
+              >
+                <TabsTrigger value="workspace" className={NOTEBOOK_TAB_CLASS}>
+                  Workspace
+                </TabsTrigger>
+                <TabsTrigger value="recent" className={NOTEBOOK_TAB_CLASS}>
+                  Recent
+                </TabsTrigger>
+                <TabsTrigger value="running" className={NOTEBOOK_TAB_CLASS}>
+                  Running
+                  <span className="ml-1.5 text-xs font-normal tabular-nums text-(--gray-11)">
+                    {running.size}
+                  </span>
+                </TabsTrigger>
+              </TabsList>
+              <TabsContent
+                value="workspace"
+                forceMount={true}
+                className="mt-0 data-[state=inactive]:hidden"
+              >
+                <ErrorBoundary>
+                  <WorkspaceNotebooks
+                    onRefreshRecents={recentsResponse.refetch}
+                  />
+                </ErrorBoundary>
+              </TabsContent>
+              <TabsContent value="recent" className="mt-0">
+                <NotebookList
+                  files={recents.files}
+                  emptyMessage="Notebooks you open will appear here."
+                />
+              </TabsContent>
+              <TabsContent value="running" className="mt-0">
+                <NotebookList
+                  files={[...running.values()]}
+                  emptyMessage="No notebooks are running."
+                />
+              </TabsContent>
+            </Tabs>
+            <ResourceLinks />
+          </main>
         </div>
       </RunningNotebooksContext>
     </Suspense>
@@ -195,23 +243,37 @@ const WorkspaceNotebooks: React.FC<{ onRefreshRecents: () => void }> = ({
 
   return (
     <WorkspaceContext value={workspaceContextValue}>
-      <div className="flex flex-col gap-2">
+      <div className="flex min-w-0 flex-col gap-4">
         {workspace.hasMore && (
           <TruncatedWorkspaceBanner fileCount={workspace.fileCount} />
         )}
-        <Header
-          Icon={BookTextIcon}
-          control={
-            <div className="flex items-center gap-2">
+        <div className="overflow-hidden rounded-lg border border-border/70 bg-background">
+          <div className="flex flex-wrap items-center gap-3 border-b border-border/60 bg-muted/20 p-3">
+            <div className="min-w-40 flex-1">
               <Input
                 id="search"
+                aria-label="Search workspace"
                 value={searchText}
-                icon={<SearchIcon size={13} />}
+                icon={<SearchIcon size={15} />}
                 onChange={(e) => setSearchText(e.target.value)}
-                placeholder="Search"
-                className="mb-0 border-border"
+                placeholder="Find a notebook…"
+                className="mb-0 h-9 rounded-md border-border/60 bg-background font-sans shadow-none hover:shadow-none focus-visible:shadow-none"
               />
-              <CollapseAllButton />
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => refetch()}
+              aria-label="Refresh workspace"
+            >
+              {isFetching ? (
+                <Spinner size="small" />
+              ) : (
+                <RefreshCcwIcon className="w-4 h-4" />
+              )}
+            </Button>
+            <CollapseAllButton />
+            <div className="flex items-center gap-2">
               <Checkbox
                 data-testid="include-markdown-checkbox"
                 id="include-markdown"
@@ -220,23 +282,14 @@ const WorkspaceNotebooks: React.FC<{ onRefreshRecents: () => void }> = ({
                   setIncludeMarkdown(Boolean(checked))
                 }
               />
-              <Label htmlFor="include-markdown">Include markdown</Label>
+              <Label
+                htmlFor="include-markdown"
+                className="text-xs text-muted-foreground"
+              >
+                Include markdown
+              </Label>
             </div>
-          }
-        >
-          Workspace
-          <Button
-            variant="text"
-            size="icon"
-            className="w-4 h-4 ml-1 p-0 opacity-70 hover:opacity-100"
-            onClick={() => refetch()}
-            aria-label="Refresh workspace"
-          >
-            <RefreshCcwIcon className="w-4 h-4" />
-          </Button>
-          {isFetching && <Spinner size="small" />}
-        </Header>
-        <div className="flex flex-col divide-y divide-(--slate-3) border rounded overflow-hidden max-h-192 overflow-y-auto shadow-sm bg-background">
+          </div>
           <NotebookFileTree searchText={searchText} files={workspace.files} />
         </div>
       </div>
@@ -322,7 +375,7 @@ const NotebookFileTree: React.FC<{
         await handleRename(id, name);
       }}
       padding={5}
-      rowHeight={35}
+      rowHeight={44}
       indent={15}
       overscanCount={1000}
       // Hide the drop cursor
@@ -343,13 +396,15 @@ const Node = ({ node, style }: NodeRendererProps<FileInfo>) => {
     : guessFileType(node.data.name);
 
   const Icon = FILE_TYPE_ICONS[fileType];
-  const iconEl = <Icon className="w-5 h-5 shrink-0" strokeWidth={1.5} />;
+  const iconEl = (
+    <Icon className="w-4 h-4 shrink-0 text-(--gray-11)" strokeWidth={1.5} />
+  );
   const { root } = use(WorkspaceContext);
   const { runningNotebooks } = use(RunningNotebooksContext);
 
   const renderItem = () => {
     const itemClassName =
-      "flex items-center pl-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l flex-1 overflow-hidden h-full pr-3 gap-2";
+      "flex items-center pl-1 cursor-pointer hover:bg-(--sage-3) hover:text-foreground rounded-l flex-1 overflow-hidden h-full pr-3 gap-2";
 
     // Inline rename input; react-arborist flips `node.isEditing` when
     // `node.edit()` is called from the FileActions menu.
@@ -413,7 +468,7 @@ const Node = ({ node, style }: NodeRendererProps<FileInfo>) => {
     <div
       style={style}
       className={cn(
-        "flex items-center cursor-pointer ml-1 text-muted-foreground whitespace-nowrap group h-full",
+        "flex items-center cursor-pointer ml-1 text-sm text-foreground whitespace-nowrap group h-full",
       )}
       onClick={(evt) => {
         evt.stopPropagation();
@@ -479,21 +534,19 @@ const FolderArrow = ({ node }: { node: NodeApi<FileInfo> }) => {
 };
 
 const NotebookList: React.FC<{
-  header: React.ReactNode;
   files: MarimoFile[];
-}> = ({ header, files }) => {
-  if (files.length === 0) {
-    return null;
-  }
-
+  emptyMessage: string;
+}> = ({ files, emptyMessage }) => {
   return (
-    <div className="flex flex-col gap-2">
-      {header}
-      <div className="flex flex-col divide-y divide-(--slate-3) border rounded overflow-hidden max-h-192 overflow-y-auto shadow-sm bg-background">
-        {files.map((file) => {
-          return <MarimoFileComponent key={file.path} file={file} />;
-        })}
-      </div>
+    <div className="flex max-h-[500px] min-h-40 min-w-0 flex-col divide-y divide-border/50 overflow-y-auto rounded-lg border border-border/60">
+      {files.length === 0 && (
+        <p className="px-4 py-6 text-sm text-muted-foreground">
+          {emptyMessage}
+        </p>
+      )}
+      {files.map((file) => {
+        return <MarimoFileComponent key={file.path} file={file} />;
+      })}
     </div>
   );
 };
@@ -511,17 +564,19 @@ const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
     : asURL(`?file=${encodeURIComponent(file.path)}`);
 
   const isMarkdown = file.path.endsWith(".md");
+  const Icon = FILE_TYPE_ICONS[guessFileType(file.name)];
 
   return (
     <a
-      className="py-1.5 px-4 hover:bg-(--blue-2) hover:text-primary transition-all duration-300 cursor-pointer group relative flex gap-4 items-center"
+      className="py-3 px-4 hover:bg-(--sage-3) transition-colors cursor-pointer group relative flex gap-3 items-center focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
       key={file.path}
       href={href.toString()}
       target={tabTarget(file.initializationId || file.path)}
     >
-      <div className="flex flex-col justify-between flex-1">
-        <span className="flex items-center gap-2">
-          {file.name}
+      <Icon className="h-4 w-4 shrink-0 text-(--gray-11)" strokeWidth={1.5} />
+      <div className="flex min-w-0 flex-col gap-1 flex-1">
+        <span className="flex items-center gap-2 text-sm font-medium">
+          <span className="truncate">{file.name}</span>
           {isMarkdown && (
             <span className="opacity-80">
               <MarkdownIcon />
@@ -530,7 +585,7 @@ const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
         </span>
         <p
           title={file.path}
-          className="text-sm text-muted-foreground overflow-hidden whitespace-nowrap text-ellipsis"
+          className="text-xs text-muted-foreground overflow-hidden whitespace-nowrap text-ellipsis"
         >
           {file.path}
         </p>
@@ -541,8 +596,8 @@ const MarimoFileComponent = ({ file }: { file: MarimoFile }) => {
             <SessionShutdownButton filePath={file.path} />
           </div>
           <ExternalLinkIcon
-            size={20}
-            className="group-hover:opacity-100 opacity-0 transition-all duration-300 text-primary"
+            size={14}
+            className="opacity-40 group-hover:opacity-100"
           />
         </div>
         {!!file.lastModified && (
@@ -571,7 +626,8 @@ const SessionShutdownButton: React.FC<{ filePath: string }> = ({
       <Button
         size={"icon"}
         variant="outline"
-        className="opacity-80 hover:opacity-100 hover:bg-accent text-destructive border-destructive hover:border-destructive hover:text-destructive bg-background hover:bg-(--red-1)"
+        aria-label="Shutdown notebook"
+        className="border-transparent text-muted-foreground shadow-none hover:border-destructive hover:bg-(--red-1) hover:text-destructive"
         onClick={(e) => {
           e.stopPropagation();
           e.preventDefault();
@@ -611,23 +667,40 @@ const SessionShutdownButton: React.FC<{ filePath: string }> = ({
   );
 };
 
-const CreateNewNotebook: React.FC = () => {
-  const url = newNotebookURL();
+export const CreateNewNotebook: React.FC = () => {
+  // Reusing a `__new__` key reattaches to an old session; rotate it per open
+  const [url, setUrl] = useState(newNotebookURL);
+  const rotateUrl = () => {
+    const next = newNotebookURL();
+    setUrl(next);
+    return next;
+  };
+  const rotateDragPayload = (event: React.DragEvent<HTMLAnchorElement>) => {
+    // The browser copies the href into the drag payload before this handler
+    // runs, so the rotated URL must be written into the payload by hand
+    const next = rotateUrl();
+    event.dataTransfer.setData("text/uri-list", next);
+    event.dataTransfer.setData("text/plain", next);
+  };
   return (
-    <a
-      className="relative rounded-lg p-6 group
-      text-primary hover:bg-(--blue-2) shadow-md-solid shadow-accent border bg-(--blue-1)
-      transition-all duration-300 cursor-pointer
-      "
-      href={url}
-      target="_blank"
-      rel="noreferrer"
+    <Button
+      asChild={true}
+      size="sm"
+      className="gap-2 rounded-md border-(--brand) bg-(--brand) text-(--brand-foreground) shadow-none hover:bg-(--brand-hover)"
     >
-      <h2 className="text-lg font-semibold">Create a new notebook</h2>
-      <div className="group-hover:opacity-100 opacity-0 absolute right-5 top-0 bottom-0 rounded-lg flex items-center justify-center transition-all duration-300">
-        <ExternalLinkIcon size={24} />
-      </div>
-    </a>
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        onClick={rotateUrl}
+        onAuxClick={rotateUrl}
+        onContextMenu={rotateUrl}
+        onDragStart={rotateDragPayload}
+      >
+        <PlusIcon className="h-4 w-4" />
+        New notebook
+      </a>
+    </Button>
   );
 };
 

package/src/components/scratchpad/scratchpad.test.tsx

@@ -0,0 +1,97 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { EditorView } from "@codemirror/view";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { type ComponentProps, useEffect, useRef } from "react";
+import { expect, it, vi } from "vitest";
+import type { CellEditor } from "@/components/editor/cell/code/cell-editor";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { SCRATCH_CELL_ID } from "@/core/cells/ids";
+import { ScratchPad } from "./scratchpad";
+import {
+  historyVisibleAtom,
+  scratchpadHistoryAtom,
+} from "./scratchpad-history";
+
+const state = vi.hoisted(() => ({
+  editor: null as EditorView | null,
+  updateCellCode: vi.fn(),
+}));
+
+vi.mock("@/core/cells/cells", () => ({
+  useNotebook: () => ({ cellRuntime: {}, cellData: {} }),
+}));
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: () => ({
+    createCell: vi.fn(),
+    updateCellCode: state.updateCellCode,
+  }),
+}));
+vi.mock("@/core/cells/focus", () => ({ useLastFocusedCellId: () => null }));
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ sendRunScratchpad: vi.fn() }),
+}));
+vi.mock("@/components/editor/chrome/panels/panel-context", () => ({
+  usePanelOrientation: () => "vertical",
+  usePanelSection: () => "sidebar",
+}));
+vi.mock("@/components/editor/Output", () => ({ OutputArea: () => null }));
+vi.mock("@/components/editor/output/console/ConsoleOutput", () => ({
+  ConsoleOutput: () => null,
+}));
+vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
+  LazyAnyLanguageCodeMirror: () => null,
+}));
+vi.mock("@/components/shortcuts/renderShortcut", () => ({
+  renderShortcut: () => "",
+}));
+vi.mock("@/components/editor/cell/code/cell-editor", () => ({
+  CellEditor: ({ setEditorView }: ComponentProps<typeof CellEditor>) => {
+    const parent = useRef<HTMLDivElement>(null);
+    const setView = useRef(setEditorView);
+    useEffect(() => {
+      const view = new EditorView({
+        parent: parent.current ?? undefined,
+        extensions: [
+          EditorView.contentAttributes.of({
+            "aria-label": "Scratchpad editor",
+          }),
+        ],
+      });
+      state.editor = view;
+      setView.current(view);
+      return () => {
+        view.destroy();
+        state.editor = null;
+      };
+    }, []);
+    return <div ref={parent} />;
+  },
+}));
+
+it("focuses the editor after recalling history", () => {
+  const store = createStore();
+  store.set(scratchpadHistoryAtom, ["print(42)"]);
+  store.set(historyVisibleAtom, true);
+  render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <ScratchPad />
+      </TooltipProvider>
+    </Provider>,
+  );
+  const recall = screen.getByRole("button", { name: "Recall code" });
+  act(() => recall.focus());
+  fireEvent.click(recall, { detail: 0 });
+  expect(recall).not.toBeInTheDocument();
+  expect(
+    screen.getByRole("textbox", { name: "Scratchpad editor" }),
+  ).toHaveFocus();
+  expect(state.editor?.state.doc.toString()).toBe("print(42)");
+  expect(state.updateCellCode).toHaveBeenCalledExactlyOnceWith({
+    cellId: SCRATCH_CELL_ID,
+    code: "print(42)",
+    formattingChange: false,
+  });
+});

package/src/components/scratchpad/scratchpad.tsx

@@ -13,7 +13,8 @@ import type React from "react";
 import { Suspense, useRef, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import useEvent from "react-use-event-hook";
-import { useCellActions, useNotebook } from "@/core/cells/cells";
+import { useNotebook } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { DEFAULT_CELL_NAME } from "@/core/cells/names";
@@ -55,7 +56,7 @@ export const ScratchPad: React.FC = () => {
   const { theme } = useTheme();
   const ref = useRef<EditorView | null>(null);
   const lastFocusedCellId = useLastFocusedCellId();
-  const { createNewCell, updateCellCode } = useCellActions();
+  const { updateCellCode, createCell } = useCellActions();
   const { sendRunScratchpad } = useRequestClient();
   const orientation = usePanelOrientation();
   const section = usePanelSection();
@@ -81,11 +82,7 @@ export const ScratchPad: React.FC = () => {
     if (!code.trim()) {
       return;
     }
-    createNewCell({
-      code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-    });
+    createCell({ after: lastFocusedCellId, code });
   });
 
   const handleClearCode = useEvent(() => {
@@ -123,6 +120,7 @@ export const ScratchPad: React.FC = () => {
           insert: item,
         },
       });
+      ev.focus();
     }
   });
 
@@ -135,12 +133,24 @@ export const ScratchPad: React.FC = () => {
     return (
       <div className="absolute inset-0 z-100 bg-background p-3 border-none overflow-auto">
         <div className="overflow-auto flex flex-col gap-3">
-          {history.map((item, index) => (
+          {history.map((item) => (
+            // The Recall code button provides keyboard access without making the code preview a button.
+            // react-doctor-disable-next-line react-doctor/click-events-have-key-events, react-doctor/no-static-element-interactions
             <div
-              key={index}
-              className="border rounded-md hover:shadow-sm cursor-pointer hover:border-input overflow-hidden"
+              key={item}
+              className="relative border rounded-md hover:shadow-sm cursor-pointer hover:border-input overflow-hidden"
               onClick={() => handleSelectHistoryItem(item)}
             >
+              <button
+                type="button"
+                className="sr-only focus:not-sr-only focus:absolute focus:right-1 focus:top-1 focus:z-10 focus:bg-background focus:px-2 focus:py-1 focus:outline focus:outline-ring"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleSelectHistoryItem(item);
+                }}
+              >
+                Recall code
+              </button>
               <Suspense>
                 <LazyAnyLanguageCodeMirror
                   language="python"

package/src/components/slides/__tests__/minimap-actions.test.tsx

@@ -13,17 +13,19 @@ const A = cellId("a");
 const B = cellId("b");
 
 // Spies shared with the hoisted module mocks below.
-const { createNewCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
-  createNewCell: vi.fn(),
+const { createCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
+  createCell: vi.fn(),
   deleteCell: vi.fn(),
   moveCellToIndex: vi.fn(),
 }));
 
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: () => ({ moveCellToIndex, createCell }),
+}));
 vi.mock("@/core/cells/cells", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@/core/cells/cells")>();
   return {
     ...actual,
-    useCellActions: () => ({ moveCellToIndex, createNewCell }),
     useCellIds: () => MultiColumn.from([[A, B]]),
   };
 });
@@ -91,8 +93,6 @@ function renderMinimap() {
   return { ...utils, onSlideClick };
 }
 
-const EMPTY_CELL = { code: "", autoFocus: false } as const;
-
 describe("SlidesMinimap insert lines", () => {
   it("inserts a blank cell above the first row and below any row", () => {
     renderMinimap();
@@ -102,25 +102,13 @@ describe("SlidesMinimap insert lines", () => {
     expect(inserts).toHaveLength(3);
 
     fireEvent.click(inserts[0]);
-    expect(createNewCell).toHaveBeenLastCalledWith({
-      cellId: A,
-      before: true,
-      ...EMPTY_CELL,
-    });
+    expect(createCell).toHaveBeenLastCalledWith({ before: A, focus: false });
 
     fireEvent.click(inserts[1]);
-    expect(createNewCell).toHaveBeenLastCalledWith({
-      cellId: A,
-      before: false,
-      ...EMPTY_CELL,
-    });
+    expect(createCell).toHaveBeenLastCalledWith({ after: A, focus: false });
 
     fireEvent.click(inserts[2]);
-    expect(createNewCell).toHaveBeenLastCalledWith({
-      cellId: B,
-      before: false,
-      ...EMPTY_CELL,
-    });
+    expect(createCell).toHaveBeenLastCalledWith({ after: B, focus: false });
   });
 });
 
@@ -135,11 +123,7 @@ describe("SlidesMinimap context menu", () => {
     const { container } = renderMinimap();
     openRowMenu(container, A);
     fireEvent.click(screen.getByText("Add cell"));
-    expect(createNewCell).toHaveBeenCalledWith({
-      cellId: A,
-      before: false,
-      ...EMPTY_CELL,
-    });
+    expect(createCell).toHaveBeenCalledWith({ after: A, focus: false });
   });
 
   it('"Delete cell" deletes the row\'s cell', () => {

package/src/components/slides/minimap.tsx

@@ -2,7 +2,8 @@
 
 import { useDeleteCellCallback } from "@/components/editor/cell/useDeleteCell";
 import { outputIsStale } from "@/core/cells/cell";
-import { useCellActions, useCellIds } from "@/core/cells/cells";
+import { useCellIds } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import type { CellColumnId } from "@/utils/id-tree";
 import { useEffect, useRef, useState } from "react";
@@ -229,7 +230,7 @@ export const SlidesMinimap = ({
   onSlideClick,
 }: SlidesMinimapProps) => {
   const cellIds = useCellIds();
-  const { moveCellToIndex, createNewCell } = useCellActions();
+  const { moveCellToIndex, createCell } = useCellActions();
   const deleteCell = useDeleteCellCallback();
   const containerRef = useRef<HTMLDivElement>(null);
   const visibleIds = useVisibleCellIds(containerRef);
@@ -240,7 +241,10 @@ export const SlidesMinimap = ({
   const dimensions = computeThumbnailDimensions(thumbnailWidth);
 
   const insertCell = (cellId: CellId, before: boolean) => {
-    createNewCell({ cellId, before, code: "", autoFocus: false });
+    createCell({
+      ...(before ? { before: cellId } : { after: cellId }),
+      focus: false,
+    });
   };
 
   useEffect(() => {