@marimo-team/islands 0.25.3-dev173 → 0.25.3-dev176

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -2,17 +2,29 @@
 
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createStore, Provider } from "jotai";
 import { SetupMocks } from "@/__mocks__/common";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { WithResponse } from "@/core/cells/types";
+import { DocumentProvider } from "@/core/notebook/document";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { CONSOLE_CLEAR_DEBOUNCE_MS, ConsoleOutput } from "../ConsoleOutput";
 
 SetupMocks.resizeObserver();
 
+const store = createStore();
+const { model } = mockDocumentModel(store, null);
+
 const renderWithProvider = (ui: React.ReactElement) => {
-  return render(<TooltipProvider>{ui}</TooltipProvider>);
+  return render(
+    <Provider store={store}>
+      <DocumentProvider model={model}>
+        <TooltipProvider>{ui}</TooltipProvider>
+      </DocumentProvider>
+    </Provider>,
+  );
 };
 
 describe("ConsoleOutput integration", () => {
@@ -104,13 +116,17 @@ describe("ConsoleOutput pdb history", () => {
     ];
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs2}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs2}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // New StdInput mounted — press ArrowUp to recall previous command
@@ -138,13 +154,17 @@ describe("ConsoleOutput pdb history", () => {
     fireEvent.keyDown(nameInput, { key: "Enter" });
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={[stdinPrompt("Name: ", "marimo"), passwordPrompt]}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={[stdinPrompt("Name: ", "marimo"), passwordPrompt]}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
     const input = screen.getByTestId("console-input");
     expect(input).toHaveAttribute("type", "password");
@@ -161,16 +181,20 @@ describe("ConsoleOutput pdb history", () => {
     expect(input).toHaveValue("");
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={[
-            stdinPrompt("Name: ", "marimo"),
-            { ...passwordPrompt, response: "" },
-            stdinPrompt("Name: "),
-          ]}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={[
+                stdinPrompt("Name: ", "marimo"),
+                { ...passwordPrompt, response: "" },
+                stdinPrompt("Name: "),
+              ]}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
     const nextInput = screen.getByTestId("console-input");
     fireEvent.keyDown(nextInput, { key: "ArrowUp" });
@@ -239,13 +263,17 @@ describe("ConsoleOutput pdb history", () => {
       stdinPrompt("(Pdb) "),
     ];
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs2}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs2}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // Submit an empty value; this should NOT enter the history stack.
@@ -258,13 +286,17 @@ describe("ConsoleOutput pdb history", () => {
       stdinPrompt("(Pdb) "),
     ];
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs3}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs3}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // ArrowUp should jump back to "step", skipping the empty submission.
@@ -299,13 +331,17 @@ describe("ConsoleOutput pdb history", () => {
     ];
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs2}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs2}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // Submit "print(x)"
@@ -321,13 +357,17 @@ describe("ConsoleOutput pdb history", () => {
     ];
 
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={outputs3}
-          onSubmitDebugger={onSubmitDebugger}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={outputs3}
+              onSubmitDebugger={onSubmitDebugger}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // ArrowUp should show most recent command first
@@ -370,13 +410,17 @@ describe("ConsoleOutput pdb history", () => {
     // Same outputs, but the cell isn't interrupted -- this is a real
     // bare-Enter submission, so we should render the (empty) placeholder.
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput
-          {...defaultProps}
-          consoleOutputs={interruptedOutputs}
-          interrupted={false}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput
+              {...defaultProps}
+              consoleOutputs={interruptedOutputs}
+              interrupted={false}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     expect(screen.getByLabelText("stdin response")).toBeInTheDocument();
@@ -426,9 +470,13 @@ describe("ConsoleOutput debounced clearing", () => {
 
     // Clear outputs (simulates cell re-run)
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // Old output should still be visible during debounce period
@@ -437,9 +485,13 @@ describe("ConsoleOutput debounced clearing", () => {
     // New outputs arrive before debounce fires
     const outputs2 = [createOutput("new output")];
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput {...defaultProps} consoleOutputs={outputs2} />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput {...defaultProps} consoleOutputs={outputs2} />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // New output should be shown immediately
@@ -458,9 +510,13 @@ describe("ConsoleOutput debounced clearing", () => {
 
     // Clear outputs
     rerender(
-      <TooltipProvider>
-        <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <ConsoleOutput {...defaultProps} consoleOutputs={[]} />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     // Still visible during debounce

package/src/components/editor/renderers/cell-array.tsx

@@ -33,10 +33,10 @@ import type { CellColumnId } from "@/utils/id-tree";
 import { invariant } from "@/utils/invariant";
 import {
   columnIdsAtom,
-  useCellActions,
   useCellIds,
   useScrollKey,
 } from "../../../core/cells/cells";
+import { useCellActions } from "../../../core/cells/actions";
 import { formatAll } from "../../../core/codemirror/format";
 import type { AppConfig, UserConfig } from "../../../core/config/config-schema";
 import type { AppMode } from "../../../core/mode";
@@ -267,7 +267,7 @@ const AddCellButtons: React.FC<{
   columnId: CellColumnId;
   className?: string;
 }> = ({ columnId, className }) => {
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const [isAiButtonOpen, isAiButtonOpenActions] = useBoolean(false);
   const aiEnabled = useAtomValue(aiEnabledAtom);
   const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
@@ -291,12 +291,7 @@ const AddCellButtons: React.FC<{
           variant="text"
           size="sm"
           disabled={!canInteractWithApp}
-          onClick={() =>
-            createNewCell({
-              cellId: { type: "__end__", columnId },
-              before: false,
-            })
-          }
+          onClick={() => createCell({ endOf: columnId })}
         >
           <SquareCodeIcon className="mr-2 size-4 shrink-0" />
           Python
@@ -307,13 +302,12 @@ const AddCellButtons: React.FC<{
           size="sm"
           disabled={!canInteractWithApp}
           onClick={() => {
-            maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
+            maybeAddMarimoImport({ autoInstantiate: true, createCell });
 
-            createNewCell({
-              cellId: { type: "__end__", columnId },
-              before: false,
+            createCell({
+              endOf: columnId,
               code: LanguageAdapters.markdown.defaultCode,
-              hideCode: MARKDOWN_INITIAL_HIDE_CODE,
+              config: { hide_code: MARKDOWN_INITIAL_HIDE_CODE },
             });
           }}
         >
@@ -326,11 +320,10 @@ const AddCellButtons: React.FC<{
           size="sm"
           disabled={!canInteractWithApp}
           onClick={() => {
-            maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
+            maybeAddMarimoImport({ autoInstantiate: true, createCell });
 
-            createNewCell({
-              cellId: { type: "__end__", columnId },
-              before: false,
+            createCell({
+              endOf: columnId,
               code: LanguageAdapters.sql.defaultCode,
             });
           }}

package/src/components/markdown/markdown-renderer.tsx

@@ -12,7 +12,7 @@ import {
 } from "streamdown";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
@@ -71,7 +71,7 @@ function maybeTransform(
 }
 
 const InsertCodeBlockButton = ({ code, language }: CodeBlockProps) => {
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
 
@@ -81,15 +81,11 @@ const InsertCodeBlockButton = ({ code, language }: CodeBlockProps) => {
     if (language === "sql") {
       maybeAddMarimoImport({
         autoInstantiate,
-        createNewCell,
+        createCell,
         fromCellId: lastFocusedCellId,
       });
     }
-    createNewCell({
-      code: result.code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-    });
+    createCell({ after: lastFocusedCellId, code: result.code });
   };
 
   return (

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

@@ -1,15 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { lazy } from "react";
+import { useSetAtom, useStore } from "jotai";
+import { notebookAtom } from "@/core/cells/cells";
+import { notebookCells } from "@/core/cells/utils";
 import type { AppConfig, UserConfig } from "@/core/config/config-schema";
 import { KnownQueryParams } from "@/core/constants";
 import { EditApp } from "@/core/edit-app";
+import { getSessionId } from "@/core/kernel/session";
+import { DocumentProvider } from "@/core/notebook/document";
+import { lastSavedNotebookAtom } from "@/core/saving/state";
+import { useNotebookSession } from "@/core/session/useNotebookSession";
 import { AppChrome } from "../editor/chrome/wrapper/app-chrome";
 
-const LazyCommandPalette = lazy(
-  () => import("../editor/controls/command-palette"),
-);
-
 interface Props {
   userConfig: UserConfig;
   appConfig: AppConfig;
@@ -20,21 +22,34 @@ const hideChrome = (() => {
   return url.searchParams.get(KnownQueryParams.showChrome) === "false";
 })();
 
+/** Own the notebook session and provide its document model to the editor and its chrome. */
 const EditPage = (props: Props) => {
-  if (hideChrome) {
-    return (
-      <>
-        <EditApp hideControls={true} {...props} />
-        <LazyCommandPalette />
-      </>
-    );
-  }
+  const store = useStore();
+  const setLastSavedNotebook = useSetAtom(lastSavedNotebookAtom);
+  const { connection, reconnect, documentModel } = useNotebookSession({
+    autoInstantiate: props.userConfig.runtime.auto_instantiate,
+    onKernelReady: (layout) => {
+      const cells = notebookCells(store.get(notebookAtom));
+      const names = cells.map((cell) => cell.name);
+      const codes = cells.map((cell) => cell.code);
+      const configs = cells.map((cell) => cell.config);
+      setLastSavedNotebook({ names, codes, configs, layout });
+    },
+    sessionId: getSessionId(),
+  });
+  const app = (
+    <EditApp
+      {...props}
+      hideControls={hideChrome}
+      connection={connection}
+      reconnect={reconnect}
+    />
+  );
 
   return (
-    <AppChrome>
-      <EditApp {...props} />
-      <LazyCommandPalette />
-    </AppChrome>
+    <DocumentProvider model={documentModel}>
+      {hideChrome ? app : <AppChrome>{app}</AppChrome>}
+    </DocumentProvider>
   );
 };
 

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

@@ -21,8 +21,10 @@ const state = vi.hoisted(() => ({
 
 vi.mock("@/core/cells/cells", () => ({
   useNotebook: () => ({ cellRuntime: {}, cellData: {} }),
+}));
+vi.mock("@/core/cells/actions", () => ({
   useCellActions: () => ({
-    createNewCell: vi.fn(),
+    createCell: vi.fn(),
     updateCellCode: state.updateCellCode,
   }),
 }));

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(() => {

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(() => {

package/src/components/slides/slide-cell-view.tsx

@@ -14,7 +14,7 @@ import { useRunCell } from "@/components/editor/cell/useRunCells";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { outputIsStale } from "@/core/cells/cell";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { autoInstantiateAtom, useUserConfig } from "@/core/config/config";
 import {
   cellNeedsRun,
@@ -42,7 +42,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   const { theme } = useTheme();
   const runCell = useRunCell(cell.id);
   const connection = useAtomValue(connectionAtom);
-  const cellActions = useCellActions();
+  const { createCell } = useCellActions();
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const editorViewRef = useRef<EditorView | null>(null);
   const editorViewParentRef = useRef<HTMLDivElement | null>(null);
@@ -53,7 +53,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   const afterToggleLanguage = useEvent(() => {
     maybeAddMarimoImport({
       autoInstantiate,
-      createNewCell: cellActions.createNewCell,
+      createCell,
     });
   });
 

package/src/components/sort/SortableCellsProvider.tsx

@@ -24,7 +24,8 @@ import { useAppConfig } from "@/core/config/config";
 import { Arrays } from "@/utils/arrays";
 import type { CellColumnId, MultiColumn } from "@/utils/id-tree";
 import { invariant } from "@/utils/invariant";
-import { getNotebook, useCellActions } from "../../core/cells/cells";
+import { getNotebook } from "../../core/cells/cells";
+import { useCellActions } from "../../core/cells/actions";
 import { useEvent } from "../../hooks/useEvent";
 
 interface SortableCellsProviderProps {