@marimo-team/islands 0.19.3-dev39 → 0.19.3-dev41

package/dist/main.js

@@ -39981,7 +39981,7 @@ ${c.sqlString}
       return (_a2 = r[e2]) == null ? void 0 : _a2.name;
     }).filter(Boolean);
   };
-  splitAtom(selectAtom(notebookAtom, (e) => e.cellIds.inOrderIds.map((r) => e.cellData[r]))), atom((e) => notebookIsRunning(e(notebookAtom))), atom((e) => notebookQueueOrRunningCount(e(notebookAtom))), atom((e) => e(notebookAtom).cellIds.colLength), atom((e) => e(notebookAtom).cellIds.idLength > 0), atom((e) => e(notebookAtom).cellIds.getColumnIds());
+  splitAtom(selectAtom(notebookAtom, (e) => e.cellIds.inOrderIds.map((r) => e.cellData[r]))), atom((e) => e(notebookAtom).cellRuntime), atom((e) => notebookIsRunning(e(notebookAtom))), atom((e) => notebookQueueOrRunningCount(e(notebookAtom))), atom((e) => e(notebookAtom).cellIds.colLength), atom((e) => e(notebookAtom).cellIds.idLength > 0), atom((e) => e(notebookAtom).cellIds.getColumnIds());
   const cellDataAtom = atomFamily((e) => atom((r) => r(notebookAtom).cellData[e]));
   var cellRuntimeAtom = atomFamily((e) => atom((r) => r(notebookAtom).cellRuntime[e]));
   const cellHandleAtom = atomFamily((e) => atom((r) => r(notebookAtom).cellHandles[e]));
@@ -101153,7 +101153,7 @@ Defaulting to \`null\`.`;
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev39"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.3-dev41"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {
@@ -102286,6 +102286,7 @@ ${r}
       __publicField(this, "autoExportAsHTML", throwNotImplemented);
       __publicField(this, "autoExportAsMarkdown", throwNotImplemented);
       __publicField(this, "autoExportAsIPYNB", throwNotImplemented);
+      __publicField(this, "updateCellOutputs", throwNotImplemented);
       __publicField(this, "addPackage", throwNotImplemented);
       __publicField(this, "removePackage", throwNotImplemented);
       __publicField(this, "getPackageList", throwNotImplemented);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.3-dev39",
+  "version": "0.19.3-dev41",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__mocks__/requests.ts

@@ -63,6 +63,7 @@ export const MockRequestClient = {
       autoExportAsHTML: vi.fn().mockResolvedValue({}),
       autoExportAsMarkdown: vi.fn().mockResolvedValue({}),
       autoExportAsIPYNB: vi.fn().mockResolvedValue({}),
+      updateCellOutputs: vi.fn().mockResolvedValue({}),
       addPackage: vi.fn().mockResolvedValue({}),
       removePackage: vi.fn().mockResolvedValue({}),
       getPackageList: vi.fn().mockResolvedValue({ packages: [] }),

package/src/core/cells/cells.ts

@@ -1594,6 +1594,8 @@ const cellDataAtoms = splitAtom(
 );
 export const useCellDataAtoms = () => useAtom(cellDataAtoms);
 
+export const cellsRuntimeAtom = atom((get) => get(notebookAtom).cellRuntime);
+
 export const notebookIsRunningAtom = atom((get) =>
   notebookIsRunning(get(notebookAtom)),
 );

package/src/core/export/__tests__/hooks.test.ts

@@ -0,0 +1,504 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import type { ReactNode } from "react";
+import * as React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { CellId } from "@/core/cells/ids";
+import { CellOutputId } from "@/core/cells/ids";
+import type { CellRuntimeState } from "@/core/cells/types";
+import { useEnrichCellOutputs } from "../hooks";
+
+// Mock html-to-image
+vi.mock("html-to-image", () => ({
+  toPng: vi.fn(),
+}));
+
+// Mock Logger
+vi.mock("@/utils/Logger", () => ({
+  Logger: {
+    error: vi.fn(),
+  },
+}));
+
+// Mock cellsRuntimeAtom - must be defined inline in the factory function
+vi.mock("@/core/cells/cells", async () => {
+  const { atom } = await import("jotai");
+  return {
+    cellsRuntimeAtom: atom({}),
+  };
+});
+
+import { toPng } from "html-to-image";
+import { cellsRuntimeAtom } from "@/core/cells/cells";
+import { Logger } from "@/utils/Logger";
+
+describe("useEnrichCellOutputs", () => {
+  let store: ReturnType<typeof createStore>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    store = createStore();
+  });
+
+  const wrapper = ({ children }: { children: ReactNode }) =>
+    React.createElement(Provider, { store }, children);
+
+  // Helper to set the mocked atom (cast to any to work around type mismatch)
+  const setCellsRuntime = (value: Record<CellId, CellRuntimeState>) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    store.set(cellsRuntimeAtom as any, value);
+  };
+
+  const createMockCellRuntimes = (
+    cells: Record<string, Partial<CellRuntimeState>>,
+  ): Record<CellId, CellRuntimeState> => {
+    return Object.fromEntries(
+      Object.entries(cells).map(([cellId, cell]) => [
+        cellId as CellId,
+        {
+          output: cell.output || null,
+          status: cell.status || "idle",
+          interrupted: false,
+          errored: false,
+          runStartTimestamp: null,
+          runElapsedTimeMs: null,
+          stallTime: null as unknown as number,
+          ...cell,
+        } as CellRuntimeState,
+      ]),
+    ) as Record<CellId, CellRuntimeState>;
+  };
+
+  it("should return empty object when no cells need screenshots", async () => {
+    vi.spyOn(document, "getElementById");
+
+    // Set up cell runtimes with no text/html outputs
+    setCellsRuntime(
+      createMockCellRuntimes({
+        "cell-1": {
+          output: {
+            channel: "output",
+            mimetype: "text/plain",
+            data: "Hello World",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    expect(output).toEqual({});
+    expect(document.getElementById).not.toHaveBeenCalled();
+    expect(toPng).not.toHaveBeenCalled();
+  });
+
+  it("should capture screenshots for cells with text/html output", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockElement = document.createElement("div");
+    const mockDataUrl = "data:image/png;base64,mockImageData";
+
+    // Mock document.getElementById
+    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
+    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    expect(document.getElementById).toHaveBeenCalledWith(
+      CellOutputId.create(cellId),
+    );
+    expect(toPng).toHaveBeenCalledWith(mockElement);
+    expect(output).toEqual({
+      [cellId]: ["image/png", mockDataUrl],
+    });
+  });
+
+  it("should skip cells where output has not changed", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockElement = document.createElement("div");
+    const mockDataUrl = "data:image/png;base64,mockImageData";
+    const htmlData = "<div>Chart</div>";
+
+    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
+    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: htmlData,
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result, rerender } = renderHook(() => useEnrichCellOutputs(), {
+      wrapper,
+    });
+
+    // First call - should capture
+    let enrichCellOutputs = result.current;
+    let output = await enrichCellOutputs();
+    expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl] });
+    expect(toPng).toHaveBeenCalledTimes(1);
+
+    // Rerender to get updated atom state
+    rerender();
+
+    // Second call with same output - should not capture again
+    enrichCellOutputs = result.current;
+    output = await enrichCellOutputs();
+    expect(output).toEqual({}); // Empty because output hasn't changed
+    expect(toPng).toHaveBeenCalledTimes(1); // Still only 1 call
+  });
+
+  it("should handle screenshot errors gracefully", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockElement = document.createElement("div");
+    const error = new Error("Screenshot failed");
+
+    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
+    vi.mocked(toPng).mockRejectedValue(error);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    expect(output).toEqual({}); // Failed screenshot should be filtered out
+    expect(Logger.error).toHaveBeenCalledWith(
+      `Error screenshotting cell ${cellId}:`,
+      error,
+    );
+  });
+
+  it("should handle missing DOM elements", async () => {
+    const cellId = "cell-1" as CellId;
+
+    vi.spyOn(document, "getElementById").mockReturnValue(null);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    expect(output).toEqual({});
+    expect(Logger.error).toHaveBeenCalledWith(
+      `Output element not found for cell ${cellId}`,
+    );
+    expect(toPng).not.toHaveBeenCalled();
+  });
+
+  it("should process multiple cells in parallel", async () => {
+    const cell1 = "cell-1" as CellId;
+    const cell2 = "cell-2" as CellId;
+    const mockElement1 = document.createElement("div");
+    const mockElement2 = document.createElement("div");
+    const mockDataUrl1 = "data:image/png;base64,image1";
+    const mockDataUrl2 = "data:image/png;base64,image2";
+
+    vi.spyOn(document, "getElementById")
+      .mockReturnValueOnce(mockElement1)
+      .mockReturnValueOnce(mockElement2);
+
+    vi.mocked(toPng)
+      .mockResolvedValueOnce(mockDataUrl1)
+      .mockResolvedValueOnce(mockDataUrl2);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cell1]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart 1</div>",
+            timestamp: 0,
+          },
+        },
+        [cell2]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart 2</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    expect(output).toEqual({
+      [cell1]: ["image/png", mockDataUrl1],
+      [cell2]: ["image/png", mockDataUrl2],
+    });
+    expect(toPng).toHaveBeenCalledTimes(2);
+  });
+
+  it("should filter out null results from failed screenshots", async () => {
+    // Setup: one successful, one failed screenshot
+    const cell1 = "cell-1" as CellId;
+    const cell2 = "cell-2" as CellId;
+    const mockElement1 = document.createElement("div");
+    const mockDataUrl = "data:image/png;base64,image1";
+
+    vi.spyOn(document, "getElementById")
+      .mockReturnValueOnce(mockElement1)
+      .mockReturnValueOnce(null); // Second cell fails to find element
+
+    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cell1]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart 1</div>",
+            timestamp: 0,
+          },
+        },
+        [cell2]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart 2</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    // Only the successful screenshot should be in the result
+    expect(output).toEqual({
+      [cell1]: ["image/png", mockDataUrl],
+    });
+    expect(Logger.error).toHaveBeenCalledWith(
+      `Output element not found for cell ${cell2}`,
+    );
+  });
+
+  it("should only capture screenshots for cells with changed output", async () => {
+    const cellId = "cell-1" as CellId;
+    const mockElement = document.createElement("div");
+    const mockDataUrl1 = "data:image/png;base64,image1";
+    const mockDataUrl2 = "data:image/png;base64,image2";
+
+    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
+    vi.mocked(toPng)
+      .mockResolvedValueOnce(mockDataUrl1)
+      .mockResolvedValueOnce(mockDataUrl2);
+
+    // First call - cell should be captured
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart v1</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result, rerender } = renderHook(() => useEnrichCellOutputs(), {
+      wrapper,
+    });
+
+    // First screenshot
+    let enrichCellOutputs = result.current;
+    let output = await enrichCellOutputs();
+    expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl1] });
+
+    // Second call - same output, should not be captured
+    rerender();
+    enrichCellOutputs = result.current;
+    output = await enrichCellOutputs();
+    expect(output).toEqual({});
+
+    // Third call - output changed, should be captured
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Chart v2</div>", // Changed!
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    rerender();
+    enrichCellOutputs = result.current;
+    output = await enrichCellOutputs();
+    expect(output).toEqual({ [cellId]: ["image/png", mockDataUrl2] });
+    expect(toPng).toHaveBeenCalledTimes(2);
+  });
+
+  it("should ignore cells with non-text/html mimetype", async () => {
+    vi.spyOn(document, "getElementById");
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        "cell-1": {
+          output: {
+            channel: "output",
+            mimetype: "application/json",
+            data: '{"key": "value"}',
+            timestamp: 0,
+          },
+        },
+        "cell-2": {
+          output: {
+            channel: "output",
+            mimetype: "text/plain",
+            data: "Plain text",
+            timestamp: 0,
+          },
+        },
+        "cell-3": {
+          output: {
+            channel: "output",
+            mimetype: "image/png",
+            data: "data:image/png;base64,existing",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    // None of these should trigger screenshots
+    expect(output).toEqual({});
+    expect(document.getElementById).not.toHaveBeenCalled();
+    expect(toPng).not.toHaveBeenCalled();
+  });
+
+  it("should ignore cells with null or undefined output", async () => {
+    vi.spyOn(document, "getElementById");
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        "cell-1": {
+          output: null,
+        },
+        "cell-2": {
+          output: undefined,
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    expect(output).toEqual({});
+    expect(document.getElementById).not.toHaveBeenCalled();
+    expect(toPng).not.toHaveBeenCalled();
+  });
+
+  it("should return correctly formatted result with CellId and tuple", async () => {
+    // Expected format: Record<CellId, ["image/png", string]>
+    const cellId = "test-cell" as CellId;
+    const mockElement = document.createElement("div");
+    const mockDataUrl = "data:image/png;base64,testData";
+
+    vi.spyOn(document, "getElementById").mockReturnValue(mockElement);
+    vi.mocked(toPng).mockResolvedValue(mockDataUrl);
+
+    setCellsRuntime(
+      createMockCellRuntimes({
+        [cellId]: {
+          output: {
+            channel: "output",
+            mimetype: "text/html",
+            data: "<div>Content</div>",
+            timestamp: 0,
+          },
+        },
+      }),
+    );
+
+    const { result } = renderHook(() => useEnrichCellOutputs(), { wrapper });
+
+    const enrichCellOutputs = result.current;
+    const output = await enrichCellOutputs();
+
+    // Verify the exact return type structure
+    expect(output).toHaveProperty(cellId);
+    const cellOutput = output[cellId];
+    expect(cellOutput).toBeDefined();
+    expect(Array.isArray(cellOutput)).toBe(true);
+    if (cellOutput) {
+      expect(cellOutput[0]).toBe("image/png");
+      expect(cellOutput[1]).toBe(mockDataUrl);
+    }
+  });
+});

package/src/core/export/hooks.ts

@@ -1,7 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useAtomValue } from "jotai";
+import { toPng } from "html-to-image";
+import { atom, useAtom, useAtomValue } from "jotai";
 import { appConfigAtom } from "@/core/config/config";
 import { useInterval } from "@/hooks/useInterval";
+import { Logger } from "@/utils/Logger";
+import { Objects } from "@/utils/objects";
+import { cellsRuntimeAtom } from "../cells/cells";
+import { type CellId, CellOutputId } from "../cells/ids";
 import { connectionAtom } from "../network/connection";
 import { useRequestClient } from "../network/requests";
 import { VirtualFileTracker } from "../static/virtual-file-tracker";
@@ -21,8 +26,13 @@ export function useAutoExport() {
   const markdownDisabled = !markdownEnabled || !isConnected;
   const htmlDisabled = !htmlEnabled || !isConnected;
   const ipynbDisabled = !ipynbEnabled || !isConnected;
-  const { autoExportAsHTML, autoExportAsIPYNB, autoExportAsMarkdown } =
-    useRequestClient();
+  const {
+    autoExportAsHTML,
+    autoExportAsIPYNB,
+    autoExportAsMarkdown,
+    updateCellOutputs,
+  } = useRequestClient();
+  const takeScreenshots = useEnrichCellOutputs();
 
   useInterval(
     async () => {
@@ -50,12 +60,91 @@ export function useAutoExport() {
 
   useInterval(
     async () => {
+      const cellsToOutput = await takeScreenshots();
+      if (Object.keys(cellsToOutput).length > 0) {
+        await updateCellOutputs({
+          cellIdsToOutput: cellsToOutput,
+        });
+      }
       await autoExportAsIPYNB({
         download: false,
       });
     },
     // Run every 5 seconds, or when the document becomes visible
     // Ignore if the document is not visible
-    { delayMs: DELAY, whenVisible: true, disabled: ipynbDisabled },
+    // Skip if running to ensure no race conditions between screenshot and export
+    {
+      delayMs: DELAY,
+      whenVisible: true,
+      disabled: ipynbDisabled,
+      skipIfRunning: true,
+    },
   );
 }
+
+// We track cells that need screenshots, these will be exported to IPYNB
+const richCellsToOutputAtom = atom<Record<CellId, unknown>>({});
+
+/**
+ * Take screenshots of cells with HTML outputs. These images will be sent to the backend to be exported to IPYNB.
+ * @returns A map of cell IDs to their screenshots data.
+ */
+export function useEnrichCellOutputs() {
+  const [richCellsOutput, setRichCellsOutput] = useAtom(richCellsToOutputAtom);
+  const cellRuntimes = useAtomValue(cellsRuntimeAtom);
+
+  return async (): Promise<Record<CellId, ["image/png", string]>> => {
+    const trackedCellsOutput: Record<CellId, unknown> = {};
+
+    const cellsToCaptureScreenshot: [CellId, unknown][] = [];
+    for (const [cellId, runtime] of Objects.entries(cellRuntimes)) {
+      const outputData = runtime.output?.data;
+      const outputHasChanged = richCellsOutput[cellId] !== outputData;
+      // Track latest output for this cell
+      trackedCellsOutput[cellId] = outputData;
+      if (
+        runtime.output?.mimetype === "text/html" &&
+        outputData &&
+        outputHasChanged
+      ) {
+        cellsToCaptureScreenshot.push([cellId, runtime]);
+      }
+    }
+    // Always update tracked outputs, this ensures data is fresh for the next run
+    setRichCellsOutput(trackedCellsOutput);
+
+    if (cellsToCaptureScreenshot.length === 0) {
+      return {};
+    }
+
+    // Capture screenshots
+    const results = await Promise.all(
+      cellsToCaptureScreenshot.map(async ([cellId]) => {
+        const outputElement = document.getElementById(
+          CellOutputId.create(cellId),
+        );
+        if (!outputElement) {
+          Logger.error(`Output element not found for cell ${cellId}`);
+          return null;
+        }
+
+        try {
+          const dataUrl = await toPng(outputElement);
+          return [cellId, ["image/png", dataUrl]] as [
+            CellId,
+            ["image/png", string],
+          ];
+        } catch (error) {
+          Logger.error(`Error screenshotting cell ${cellId}:`, error);
+          return null;
+        }
+      }),
+    );
+
+    return Objects.fromEntries(
+      results.filter(
+        (result): result is [CellId, ["image/png", string]] => result !== null,
+      ),
+    );
+  };
+}

package/src/core/islands/bridge.ts

@@ -171,6 +171,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   autoExportAsHTML = throwNotImplemented;
   autoExportAsMarkdown = throwNotImplemented;
   autoExportAsIPYNB = throwNotImplemented;
+  updateCellOutputs = throwNotImplemented;
   addPackage = throwNotImplemented;
   removePackage = throwNotImplemented;
   getPackageList = throwNotImplemented;

package/src/core/network/requests-lazy.ts

@@ -67,6 +67,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   autoExportAsHTML: "waitForConnectionOpen",
   autoExportAsMarkdown: "waitForConnectionOpen",
   autoExportAsIPYNB: "waitForConnectionOpen",
+  updateCellOutputs: "waitForConnectionOpen",
 
   // Sidebar operations that wait for connection
   listSecretKeys: "throwError",

package/src/core/network/requests-network.ts

@@ -405,6 +405,14 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
+    updateCellOutputs: async (request) => {
+      return getClient()
+        .POST("/api/export/update_cell_outputs", {
+          body: request,
+          params: getParams(),
+        })
+        .then(handleResponseReturnNull);
+    },
     addPackage: (request) => {
       return getClient()
         .POST("/api/packages/add", {

package/src/core/network/requests-static.ts

@@ -79,6 +79,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     autoExportAsHTML: throwNotInEditMode,
     autoExportAsMarkdown: throwNotInEditMode,
     autoExportAsIPYNB: throwNotInEditMode,
+    updateCellOutputs: throwNotInEditMode,
     addPackage: throwNotInEditMode,
     removePackage: throwNotInEditMode,
     getPackageList: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -64,6 +64,7 @@ export function createErrorToastingRequests(
     autoExportAsHTML: "", // No toast
     autoExportAsMarkdown: "", // No toast
     autoExportAsIPYNB: "", // No toast
+    updateCellOutputs: "", // No toast
     addPackage: "Failed to add package",
     removePackage: "Failed to remove package",
     getPackageList: "Failed to get package list",

package/src/core/network/types.ts

@@ -21,6 +21,7 @@ export type ExportAsHTMLRequest = schemas["ExportAsHTMLRequest"];
 export type ExportAsMarkdownRequest = schemas["ExportAsMarkdownRequest"];
 export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
 export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
+export type UpdateCellOutputsRequest = schemas["UpdateCellOutputsRequest"];
 export type FileCreateRequest = schemas["FileCreateRequest"];
 export type FileCreateResponse = schemas["FileCreateResponse"];
 export type FileDeleteRequest = schemas["FileDeleteRequest"];
@@ -175,6 +176,7 @@ export interface EditRequests {
   autoExportAsHTML: (request: ExportAsHTMLRequest) => Promise<null>;
   autoExportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<null>;
   autoExportAsIPYNB: (request: ExportAsIPYNBRequest) => Promise<null>;
+  updateCellOutputs: (request: UpdateCellOutputsRequest) => Promise<null>;
   // Package requests
   getPackageList: () => Promise<ListPackagesResponse>;
   getDependencyTree: () => Promise<DependencyTreeResponse>;

package/src/core/wasm/bridge.ts

@@ -589,6 +589,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
   autoExportAsHTML = throwNotImplemented;
   autoExportAsMarkdown = throwNotImplemented;
   autoExportAsIPYNB = throwNotImplemented;
+  updateCellOutputs = throwNotImplemented;
   writeSecret = throwNotImplemented;
   invokeAiTool = throwNotImplemented;
   clearCache = throwNotImplemented;

package/src/hooks/__tests__/useInterval.test.tsx

@@ -67,4 +67,108 @@ describe("useInterval", () => {
     vi.advanceTimersByTime(1000);
     expect(callback).not.toHaveBeenCalled();
   });
+
+  describe("skipIfRunning", () => {
+    it("should allow overlapping async calls by default", async () => {
+      let concurrentCalls = 0;
+      let maxConcurrentCalls = 0;
+
+      const callback = vi.fn(async () => {
+        concurrentCalls++;
+        maxConcurrentCalls = Math.max(maxConcurrentCalls, concurrentCalls);
+        // Simulate slow async work
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        concurrentCalls--;
+      });
+
+      renderHook(() =>
+        useInterval(callback, { delayMs: 500, whenVisible: false }),
+      );
+
+      // First call at 500ms
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second call at 1000ms (while first is still running)
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      // Third call at 1500ms
+      vi.advanceTimersByTime(500);
+      expect(callback).toHaveBeenCalledTimes(3);
+
+      // Multiple concurrent calls should have occurred
+      expect(maxConcurrentCalls).toBeGreaterThan(1);
+    });
+
+    it("should skip calls when skipIfRunning is true", async () => {
+      let concurrentCalls = 0;
+      let maxConcurrentCalls = 0;
+
+      const callback = vi.fn(async () => {
+        concurrentCalls++;
+        maxConcurrentCalls = Math.max(maxConcurrentCalls, concurrentCalls);
+        // Simulate slow async work (3 seconds)
+        await new Promise<void>((resolve) => setTimeout(resolve, 3000));
+        concurrentCalls--;
+      });
+
+      renderHook(() =>
+        useInterval(callback, {
+          delayMs: 500,
+          whenVisible: false,
+          skipIfRunning: true,
+        }),
+      );
+
+      // First call at 500ms
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second interval tick at 1000ms - should be skipped since first is still running
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1); // Still 1, not 2
+
+      // Third interval tick at 1500ms - should still be skipped
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(1); // Still 1
+
+      // Only one concurrent call should have occurred
+      expect(maxConcurrentCalls).toBe(1);
+
+      // Advance past the 3 second timeout to complete first callback
+      await vi.advanceTimersByTimeAsync(2000);
+
+      // Next interval tick should now be able to run
+      await vi.advanceTimersByTimeAsync(500);
+      expect(callback).toHaveBeenCalledTimes(2);
+    });
+
+    it("should allow next call after previous async call completes with skipIfRunning true", async () => {
+      const callback = vi.fn(async () => {
+        // Quick async operation
+        await Promise.resolve();
+      });
+
+      renderHook(() =>
+        useInterval(callback, {
+          delayMs: 1000,
+          whenVisible: false,
+          skipIfRunning: true,
+        }),
+      );
+
+      // First call
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second call - should proceed since first completed
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      // Third call
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(callback).toHaveBeenCalledTimes(3);
+    });
+  });
 });

package/src/hooks/useInterval.ts

@@ -1,9 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useEventListener } from "./useEventListener";
 
 /**
  * Creates an interval that runs a callback every `delayMs` milliseconds.
+ *
+ * @param callback - The callback to run.
+ * @param opts - The options for the interval.
+ * @param opts.delayMs - The delay in milliseconds between runs.
+ * @param opts.whenVisible - Whether to run the callback when the document is visible.
+ * @param opts.disabled - Whether to disable the interval.
+ * @param opts.skipIfRunning - Whether to skip the callback if it is already running.
  */
 export function useInterval(
   callback: () => void,
@@ -11,16 +18,35 @@ export function useInterval(
     delayMs: number | null;
     whenVisible: boolean;
     disabled?: boolean;
+    skipIfRunning?: boolean;
   },
 ) {
-  const { delayMs, whenVisible, disabled = false } = opts;
-  const savedCallback = useRef<() => void>(undefined);
+  const {
+    delayMs,
+    whenVisible,
+    disabled = false,
+    skipIfRunning = false,
+  } = opts;
+  const savedCallback = useRef<() => void | Promise<void>>(undefined);
+  const isRunning = useRef(false);
 
   // Store the callback
   useEffect(() => {
     savedCallback.current = callback;
   }, [callback]);
 
+  const runCallback = useCallback(async () => {
+    if (isRunning.current && skipIfRunning) {
+      return;
+    }
+    isRunning.current = true;
+    try {
+      await savedCallback.current?.();
+    } finally {
+      isRunning.current = false;
+    }
+  }, [skipIfRunning]);
+
   // Run the interval
   useEffect(() => {
     if (delayMs === null || disabled) {
@@ -32,16 +58,16 @@ export function useInterval(
         return;
       }
 
-      savedCallback.current?.();
+      runCallback();
     }, delayMs);
 
     return () => clearInterval(id);
-  }, [delayMs, whenVisible, disabled]);
+  }, [delayMs, whenVisible, disabled, runCallback]);
 
   // When the document becomes visible, run the callback
   useEventListener(document, "visibilitychange", () => {
     if (document.visibilityState === "visible" && whenVisible && !disabled) {
-      savedCallback.current?.();
+      runCallback();
     }
   });