@marimo-team/islands 0.23.6-dev2 → 0.23.6-dev21

package/src/core/cells/__tests__/apply-transaction.test.ts

@@ -469,10 +469,34 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: b, column: 1 },
-      { type: "set-config", cellId: c, column: 0 },
-      { type: "set-config", cellId: d, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: b,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: d,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     // a and c in col0; b and d in col1. Order within each column follows
     // the reorder-cells order.
@@ -487,7 +511,15 @@ describe("applyTransactionChanges column rebuild", () => {
   it("set-config without reorder-cells moves the cell to the new column", () => {
     setup("a", "b", "c");
     const [, b] = state.cellIds.inOrderIds;
-    apply([{ type: "set-config", cellId: b, column: 1 }]);
+    apply([
+      {
+        type: "set-config",
+        cellId: b,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
+    ]);
     // Without reorder-cells, the flat order comes from the current tree.
     // b gets explicit col=1; a and c stay with default null → follow the
     // previous cell's column (a → col0 because prev=0; c → col1 because
@@ -503,7 +535,15 @@ describe("applyTransactionChanges column rebuild", () => {
   it("no column change: set-config only touching other fields does not repartition", () => {
     setup("a", "b", "c");
     const [, b] = state.cellIds.inOrderIds;
-    apply([{ type: "set-config", cellId: b, hideCode: true }]);
+    apply([
+      {
+        type: "set-config",
+        cellId: b,
+        column: null,
+        disabled: false,
+        hideCode: true,
+      },
+    ]);
     // All three cells remain in a single column. No rebuild triggered.
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -525,8 +565,20 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: b, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: b,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -550,8 +602,20 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -562,8 +626,20 @@ describe("applyTransactionChanges column rebuild", () => {
     // Now merge everything back to col 0.
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: c, column: 0 },
-      { type: "set-config", cellId: d, column: 0 },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: d,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -609,8 +685,20 @@ describe("applyTransactionChanges column rebuild", () => {
       { type: "reorder-cells", cellIds: [a, b, c] },
       { type: "set-code", cellId: a, code: "x = 1" },
       { type: "set-name", cellId: b, name: "middle" },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: b, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: b,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -658,8 +746,20 @@ describe("applyTransactionChanges column rebuild", () => {
     // Split into two columns. Only a and c are anchors.
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -670,7 +770,13 @@ describe("applyTransactionChanges column rebuild", () => {
     // Move the c anchor to col 0. d has no explicit column so it follows c.
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: c, column: 0 },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -686,9 +792,27 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
-      { type: "set-config", cellId: d, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: d,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -700,7 +824,13 @@ describe("applyTransactionChanges column rebuild", () => {
     // does NOT follow c.
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: c, column: 0 },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -719,8 +849,20 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       // set-config appears FIRST in the transaction.
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
       // reorder-cells comes afterwards.
       { type: "reorder-cells", cellIds: [a, b, c, d] },
     ]);
@@ -741,9 +883,21 @@ describe("applyTransactionChanges column rebuild", () => {
     setup("a", "b", "c", "d");
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
-      { type: "set-config", cellId: a, column: 0 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
       { type: "set-code", cellId: a, code: "x = 1" },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
       { type: "reorder-cells", cellIds: [a, b, c, d] },
       { type: "set-name", cellId: d, name: "last" },
     ]);
@@ -769,8 +923,20 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "

package/src/core/cells/__tests__/cells.test.ts

@@ -46,6 +46,9 @@ vi.mock("@/core/codemirror/editing/commands", () => ({
   foldAllBulk: vi.fn(),
   unfoldAllBulk: vi.fn(),
 }));
+vi.mock("@/core/wasm/utils", () => ({
+  isWasm: vi.fn(() => false),
+}));
 vi.mock("../scrollCellIntoView", async (importOriginal) => {
   const actual = await importOriginal();
   return {
@@ -3428,3 +3431,99 @@ describe("createTracebackInfoAtom", () => {
     expect(traceback).toBeUndefined();
   });
 });
+
+describe("setCells snapshot preservation", () => {
+  const CELL_A = cellId("A");
+  const CELL_B = cellId("B");
+  const newCells: CellData[] = [
+    {
+      id: CELL_A,
+      name: "a",
+      code: "1",
+      edited: false,
+      lastCodeRun: null,
+      lastExecutionTime: null,
+      config: { hide_code: false, disabled: false, column: null },
+      serializedEditorState: null,
+    },
+    {
+      id: CELL_B,
+      name: "b",
+      code: "2",
+      edited: false,
+      lastCodeRun: null,
+      lastExecutionTime: null,
+      config: { hide_code: false, disabled: false, column: null },
+      serializedEditorState: null,
+    },
+  ];
+
+  const hydratedState = () =>
+    MockNotebook.notebookState({
+      cellData: {
+        [CELL_A]: { id: CELL_A, code: "1" },
+        [CELL_B]: { id: CELL_B, code: "2" },
+      },
+      cellRuntime: {
+        [CELL_A]: {
+          output: {
+            channel: "output",
+            mimetype: "text/plain",
+            data: "hydrated-A",
+            timestamp: 0,
+          },
+        },
+        [CELL_B]: {
+          consoleOutputs: [
+            {
+              channel: "stdout",
+              mimetype: "text/plain",
+              data: "hydrated-B-stdout",
+              timestamp: 0,
+            },
+          ],
+        },
+      },
+    });
+
+  beforeEach(async () => {
+    const { isWasm } = await import("@/core/wasm/utils");
+    vi.mocked(isWasm).mockReturnValue(true);
+  });
+
+  it("preserves hydrated output in WASM", () => {
+    const next = exportedForTesting.reducer(hydratedState(), {
+      type: "setCells",
+      payload: newCells,
+    });
+
+    expect(next.cellRuntime[CELL_A].output).toMatchObject({
+      data: "hydrated-A",
+    });
+  });
+
+  it("preserves console-only hydration in WASM", () => {
+    const next = exportedForTesting.reducer(hydratedState(), {
+      type: "setCells",
+      payload: newCells,
+    });
+
+    expect(next.cellRuntime[CELL_B].consoleOutputs).toHaveLength(1);
+    expect(next.cellRuntime[CELL_B].consoleOutputs[0]).toMatchObject({
+      data: "hydrated-B-stdout",
+    });
+  });
+
+  it("resets cells with no prior runtime even in WASM", () => {
+    const empty = MockNotebook.notebookState({ cellData: {} });
+    const next = exportedForTesting.reducer(empty, {
+      type: "setCells",
+      payload: newCells,
+    });
+
+    expect(next.cellRuntime[CELL_A].output).toBeNull();
+    expect(next.cellRuntime[CELL_A].consoleOutputs).toEqual([]);
+    expect(next.cellRuntime[CELL_B].output).toBeNull();
+    expect(next.cellRuntime[CELL_B].consoleOutputs).toEqual([]);
+  });
+});

package/src/core/cells/__tests__/document-changes.test.ts

@@ -203,6 +203,8 @@ describe("toDocumentChanges", () => {
         [
           {
             "cellId": "0",
+            "column": null,
+            "disabled": false,
             "hideCode": true,
             "type": "set-config",
           },
@@ -246,6 +248,8 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -273,11 +277,15 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
             "cellId": "2",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -310,11 +318,15 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 0,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
             "cellId": "2",
             "column": 0,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -358,6 +370,8 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {

package/src/core/cells/cells.ts

@@ -29,6 +29,7 @@ import { isErrorMime } from "../mime";
 import type { CellConfig } from "../network/types";
 import { isRtcEnabled } from "../rtc/state";
 import { createDeepEqualAtom, store } from "../state/jotai";
+import { isWasm } from "../wasm/utils";
 import { prepareCellForExecution, transitionCell } from "./cell";
 import { documentTransactionMiddleware } from "./document-changes";
 import { CellId, SCRATCH_CELL_ID, SETUP_CELL_ID } from "./ids";
@@ -1032,8 +1033,20 @@ const {
   setCells: (state, cells: CellData[]) => {
     const cellData = Object.fromEntries(cells.map((cell) => [cell.id, cell]));
 
+    // WASM has no server-side SessionView to replay outputs, so the
+    // snapshot hydrated by notebookStateFromSession is the only source.
+    const preserveSnapshot = isWasm();
+    const runtimeFor = (cellId: CellId): CellRuntimeState => {
+      if (!preserveSnapshot) {
+        return createCellRuntimeState();
+      }
+      const prev = state.cellRuntime[cellId];
+      const hasSnapshot =
+        prev && (prev.output != null || prev.consoleOutputs.length > 0);
+      return hasSnapshot ? prev : createCellRuntimeState();
+    };
     const cellRuntime = Object.fromEntries(
-      cells.map((cell) => [cell.id, createCellRuntimeState()]),
+      cells.map((cell) => [cell.id, runtimeFor(cell.id)]),
     );
 
     return withScratchCell({

package/src/core/cells/document-changes.ts

@@ -156,10 +156,13 @@ function columnChanges(
   for (const [cellId, newCol] of newColumns) {
     const prevCol = prevColumns.get(cellId);
     if (prevCol !== newCol) {
+      const cell = getCell(cellId, newState);
       changes.push({
         type: "set-config",
         cellId: cellId,
         column: newCol,
+        disabled: cell?.config.disabled ?? false,
+        hideCode: cell?.config.hide_code ?? false,
       });
     }
   }
@@ -257,18 +260,21 @@ export function toDocumentChanges(
     }
 
     // updateCellConfig → set-config
-    // Maps CellConfig's snake_case hide_code to the change's camelCase hideCode.
-    // Only includes fields that were actually specified in the partial config
-    // (from the action payload, not the full cell config).
+    // SetConfig is full-replacement: emit the cell's complete config from
+    // newState (which already merged the action's partial payload).
     case "updateCellConfig": {
-      const { cellId, config } = action.payload;
+      const { cellId } = action.payload;
+      const cell = getCell(cellId, newState);
+      if (!cell) {
+        return [];
+      }
       return [
         {
           type: "set-config",
           cellId: cellId,
-          ...(config.hide_code != null && { hideCode: config.hide_code }),
-          ...(config.disabled != null && { disabled: config.disabled }),
-          ...(config.column != null && { column: config.column }),
+          column: cell.config.column ?? null,
+          disabled: cell.config.disabled ?? false,
+          hideCode: cell.config.hide_code ?? false,
         },
       ];
     }
@@ -538,18 +544,15 @@ export function fromDocumentChanges(
         break;
 
       // set-config → updateCellConfig
-      // Maps the change's camelCase hideCode back to CellConfig's snake_case
-      // hide_code. Only includes fields that are non-null (null means
-      // "not specified" on the wire, not "clear the value").
       case "set-config":
         actions.push({
           type: "updateCellConfig",
           payload: {
             cellId: change.cellId,
             config: {
-              ...(change.hideCode != null && { hide_code: change.hideCode }),
-              ...(change.disabled != null && { disabled: change.disabled }),
-              ...(change.column != null && { column: change.column }),
+              column: change.column,
+              disabled: change.disabled,
+              hide_code: change.hideCode,
             },
           },
         });
@@ -650,7 +653,7 @@ export function applyTransactionChanges(
     ) {
       continue;
     }
-    if (change.type === "set-config" && change.column != null) {
+    if (change.type === "set-config") {
       hasColumnChange = true;
     }
     if (change.type === "create-cell" && change.config?.column != null) {

package/src/core/config/config-schema.ts

@@ -166,6 +166,7 @@ export const UserConfigSchema = z
         ollama: AiConfigSchema.optional(),
         openrouter: AiConfigSchema.optional(),
         wandb: AiConfigSchema.optional(),
+        opencode_go: AiConfigSchema.optional(),
         open_ai_compatible: AiConfigSchema.optional(),
         azure: AiConfigSchema.optional(),
         bedrock: z

package/src/plugins/core/RenderHTML.tsx

@@ -6,6 +6,7 @@ import parse, {
   type HTMLReactParserOptions,
 } from "html-react-parser";
 import React, {
+  cloneElement,
   isValidElement,
   type JSX,
   type ReactNode,
@@ -169,6 +170,35 @@ const addCopyButtonToCodehilite: TransformFn = (
   }
 };
 
+// Decorator (not a match-and-replace transform): applies a src-based key
+// to <img> elements so they remount on src change. Reusing an <img> across
+// src changes can leave the previous image painted (e.g. when the new
+// request is slow/blocked, served stale by a CDN, or fails CORS), so the
+// user sees the old image even though the HTML source is up to date.
+//
+// Runs unconditionally after the match-and-replace transforms so it still
+// applies when an <img> was already wrapped by, say, wrapTooltipTargets.
+const keyImagesBySrc: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+  index: number,
+): JSX.Element | undefined => {
+  if (!(domNode instanceof Element) || domNode.name !== "img") {
+    return undefined;
+  }
+  const src = domNode.attribs?.src;
+  if (!src || !isValidElement(reactNode)) {
+    return undefined;
+  }
+  // data: URIs are inline — no network fetch — so they can't go stale.
+  // Skip to avoid bloating the React key with a megabyte base64 payload.
+  // URI schemes are case-insensitive per RFC 3986.
+  if (/^data:/i.test(src)) {
+    return undefined;
+  }
+  return cloneElement(reactNode, { key: `${src}-${index}` });
+};
+
 // Wrap elements with data-marimo-doc attribute in a DocHoverTarget
 const wrapDocHoverTargets: TransformFn = (
   reactNode: ReactNode,
@@ -281,6 +311,8 @@ function parseHtml({
     ...additionalReplacements,
   ];
 
+  // Match-and-replace transforms: the first one that returns a value wins
+  // (short-circuits the rest).
   const transformFunctions: TransformFn[] = [
     addCopyButtonToCodehilite,
     preserveQueryParamsInAnchorLinks,
@@ -290,6 +322,12 @@ function parseHtml({
     removeWrappingHtmlTags,
   ];
 
+  // Decorators: run unconditionally on the result of the transform pipeline
+  // and may further wrap/clone it. Used for cross-cutting concerns that
+  // should apply regardless of which (if any) match-and-replace transform
+  // ran above.
+  const decoratorFunctions: TransformFn[] = [keyImagesBySrc];
+
   return parse(html, {
     replace: (domNode: DOMNode, index: number) => {
       for (const renderFunction of renderFunctions) {
@@ -301,13 +339,21 @@ function parseHtml({
       return domNode;
     },
     transform: (reactNode: ReactNode, domNode: DOMNode, index: number) => {
+      let result: ReactNode = reactNode as JSX.Element;
       for (const transformFunction of transformFunctions) {
-        const transformed = transformFunction(reactNode, domNode, index);
+        const transformed = transformFunction(result, domNode, index);
         if (transformed) {
-          return transformed;
+          result = transformed;
+          break;
+        }
+      }
+      for (const decorate of decoratorFunctions) {
+        const decorated = decorate(result, domNode, index);
+        if (decorated) {
+          result = decorated;
         }
       }
-      return reactNode as JSX.Element;
+      return result as JSX.Element;
     },
   });
 }