@marimo-team/islands 0.24.3-dev9 → 0.25.0

package/src/core/cells/__tests__/outputs.test.tsx

@@ -0,0 +1,117 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { notebookAtom } from "@/core/cells/cells";
+import { CellId } from "@/core/cells/ids";
+import { type AppMode, viewStateAtom } from "@/core/mode";
+import { useExpandedConsoleOutput, useExpandedOutput } from "../outputs";
+
+const saveCellConfig = vi.fn().mockResolvedValue(null);
+
+vi.mock("@/core/network/requests", () => ({
+  getRequestClient: () => ({ saveCellConfig }),
+}));
+
+function setup(opts: { mode: AppMode; expandOutput?: boolean }) {
+  const cellId = CellId.create();
+  const store = createStore();
+  store.set(
+    notebookAtom,
+    MockNotebook.notebookState({
+      cellData: {
+        [cellId]: { config: { expand_output: opts.expandOutput ?? false } },
+      },
+    }),
+  );
+  store.set(viewStateAtom, { mode: opts.mode, cellAnchor: null });
+
+  const { result } = renderHook(() => useExpandedOutput(cellId), {
+    wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+  });
+
+  return { cellId, store, result };
+}
+
+const configOf = (store: ReturnType<typeof createStore>, cellId: CellId) =>
+  store.get(notebookAtom).cellData[cellId].config;
+
+describe("useExpandedOutput", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("reads the initial state from the cell's expand_output config", () => {
+    expect(setup({ mode: "edit" }).result.current[0]).toBe(false);
+    expect(setup({ mode: "edit", expandOutput: true }).result.current[0]).toBe(
+      true,
+    );
+  });
+
+  it("persists the toggle to the cell's config in edit mode", () => {
+    const { cellId, store, result } = setup({ mode: "edit" });
+
+    act(() => result.current[1](true));
+
+    expect(result.current[0]).toBe(true);
+    expect(configOf(store, cellId).expand_output).toBe(true);
+    expect(saveCellConfig).toHaveBeenCalledWith({
+      configs: { [cellId]: { expand_output: true } },
+    });
+  });
+
+  it("collapses by clearing the config", () => {
+    const { cellId, store, result } = setup({
+      mode: "edit",
+      expandOutput: true,
+    });
+
+    act(() => result.current[1](false));
+
+    expect(result.current[0]).toBe(false);
+    expect(configOf(store, cellId).expand_output).toBe(false);
+    expect(saveCellConfig).toHaveBeenCalledWith({
+      configs: { [cellId]: { expand_output: false } },
+    });
+  });
+
+  it("keeps the toggle in memory outside of edit mode", () => {
+    const { cellId, store, result } = setup({ mode: "read" });
+
+    act(() => result.current[1](true));
+
+    expect(result.current[0]).toBe(true);
+    // Cell configs are read-only outside of edit mode.
+    expect(configOf(store, cellId).expand_output).toBe(false);
+    expect(saveCellConfig).not.toHaveBeenCalled();
+  });
+
+  it("still honors expand_output outside of edit mode", () => {
+    const { result } = setup({ mode: "read", expandOutput: true });
+    expect(result.current[0]).toBe(true);
+  });
+
+  // `expand_output` covers the cell's output area only. Console output is
+  // clamped independently and stays an in-memory, per-session toggle.
+  it("does not touch the config when console output is expanded", () => {
+    const cellId = CellId.create();
+    const store = createStore();
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookState({ cellData: { [cellId]: {} } }),
+    );
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+
+    const { result } = renderHook(() => useExpandedConsoleOutput(cellId), {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+
+    act(() => result.current[1](true));
+
+    expect(result.current[0]).toBe(true);
+    expect(configOf(store, cellId).expand_output).toBe(false);
+    expect(saveCellConfig).not.toHaveBeenCalled();
+  });
+});

package/src/core/cells/__tests__/pending-delete-service.test.tsx

@@ -194,9 +194,10 @@ describe("pending-delete-service", () => {
       wrapper,
     });
     expect(result.current.isPending).toBe(true);
-    if (result.current.isPending) {
-      expect(result.current.shouldConfirmDelete).toBe(false);
-      expect("confirm" in result.current).toBe(false);
+    if (!result.current.isPending) {
+      throw new Error("Expected cell deletion to be pending");
     }
+    expect(result.current.shouldConfirmDelete).toBe(false);
+    expect("confirm" in result.current).toBe(false);
   });
 });

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

@@ -59,6 +59,7 @@ describe("notebookStateFromSession", () => {
       column: config?.column ?? null,
       disabled: config?.disabled ?? null,
       hide_code: config?.hide_code ?? null,
+      expand_output: config?.expand_output ?? null,
     },
   });
 
@@ -298,6 +299,7 @@ describe("notebookStateFromSession", () => {
           hide_code: false,
           disabled: false,
           column: null,
+          expand_output: false,
         },
         serializedEditorState: null,
       });
@@ -309,6 +311,7 @@ describe("notebookStateFromSession", () => {
           hide_code: true,
           disabled: true,
           column: 1,
+          expand_output: true,
         }),
       ]);
       const result = notebookStateFromSession(null, notebook);
@@ -319,6 +322,7 @@ describe("notebookStateFromSession", () => {
         hide_code: true,
         disabled: true,
         column: 1,
+        expand_output: true,
       });
     });
 
@@ -350,6 +354,7 @@ describe("notebookStateFromSession", () => {
           hide_code: false,
           disabled: false,
           column: null,
+          expand_output: false,
         },
         serializedEditorState: null,
       });
@@ -386,6 +391,7 @@ describe("notebookStateFromSession", () => {
           hide_code: false,
           disabled: false,
           column: null,
+          expand_output: false,
         },
         serializedEditorState: null,
       });
@@ -426,6 +432,7 @@ describe("notebookStateFromSession", () => {
           hide_code: false,
           disabled: false,
           column: null,
+          expand_output: false,
         },
         serializedEditorState: null,
       });

package/src/core/cells/cell.ts

@@ -126,7 +126,15 @@ export function transitionCell(
     nextCell.debuggerActive = false;
     consoleOutputs = consoleOutputs.map((output) => {
       if (output.channel === "stdin") {
-        return { ...output, response: output.response ?? "" };
+        // StatefulOutputMessage exposes data through a getter, which object
+        // spread would omit.
+        return {
+          channel: output.channel,
+          mimetype: output.mimetype,
+          data: output.data,
+          timestamp: output.timestamp,
+          response: output.response ?? "",
+        };
       }
       return output;
     });

package/src/core/cells/cells.ts

@@ -125,7 +125,12 @@ export interface NotebookState {
 }
 
 function withScratchCell(notebookState: NotebookState): NotebookState {
-  const config = { column: 0, hide_code: false, disabled: false };
+  const config = {
+    column: 0,
+    hide_code: false,
+    disabled: false,
+    expand_output: false,
+  };
   return {
     ...notebookState,
     cellData: {
@@ -1365,10 +1370,7 @@ const {
 
         // Find the start/end of the collapsed ranges
         const nodes = [...column.nodes];
-        const rangeIndexes: {
-          start: CellIndex;
-          end: CellIndex;
-        }[] = [];
+        const visibleEndByOriginalEnd = new Map<CellIndex, CellIndex>();
         const reversedCollapseRanges = [];
 
         // Iterate in reverse order (bottom-up) to process children first
@@ -1377,20 +1379,13 @@ const {
           const range = findCollapseRange(i, outlines);
           if (range) {
             const startIndex = i;
-            let endIndex = range[1];
-
-            // Check if the parent's end point is inside any already-collapsed child range
-            const parentEndInChild = rangeIndexes.find(
-              (child) => child.start <= endIndex && child.end === endIndex,
-            );
-
-            if (parentEndInChild) {
-              // Adjust the new endIndex to the child's start
-              endIndex = parentEndInChild.start;
-            }
+            const originalEnd = range[1];
+            const endIndex =
+              visibleEndByOriginalEnd.get(originalEnd) ?? originalEnd;
 
-            // Store this range for future child checks
-            rangeIndexes.push({ start: startIndex, end: endIndex });
+            // After this section collapses, its heading represents this
+            // endpoint for any enclosing section that shares it.
+            visibleEndByOriginalEnd.set(originalEnd, startIndex);
 
             // Add the range to the list of ranges
             const cellId = column.atOrThrow(startIndex);

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

@@ -164,6 +164,7 @@ function columnChanges(
         column: newCol,
         disabled: cell?.config.disabled ?? false,
         hideCode: cell?.config.hide_code ?? false,
+        expandOutput: cell?.config.expand_output ?? false,
       });
     }
   }
@@ -277,6 +278,7 @@ export function toDocumentChanges(
           column: cell.config.column ?? null,
           disabled: cell.config.disabled ?? false,
           hideCode: cell.config.hide_code ?? false,
+          expandOutput: cell.config.expand_output ?? false,
         },
       ];
     }
@@ -452,7 +454,11 @@ export function fromDocumentChanges(
             payload: { cellId: change.cellId, name: change.name },
           });
         }
-        if (change.config?.disabled != null || change.config?.column != null) {
+        if (
+          change.config?.disabled != null ||
+          change.config?.column != null ||
+          change.config?.expand_output != null
+        ) {
           actions.push({
             type: "updateCellConfig",
             payload: {
@@ -464,6 +470,9 @@ export function fromDocumentChanges(
                 ...(change.config.column != null && {
                   column: change.config.column,
                 }),
+                ...(change.config.expand_output != null && {
+                  expand_output: change.config.expand_output,
+                }),
               },
             },
           });
@@ -560,6 +569,7 @@ export function fromDocumentChanges(
               column: change.column,
               disabled: change.disabled,
               hide_code: change.hideCode,
+              expand_output: change.expandOutput,
             },
           },
         });

package/src/core/cells/outputs.ts

@@ -1,34 +1,91 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useEffect, useState } from "react";
+import { useAtomValue } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { useEffect, useMemo, useState } from "react";
+import { useEvent } from "@/hooks/useEvent";
+import { Logger } from "@/utils/Logger";
 import type { OutputMessage } from "../kernel/messages";
+import { viewStateAtom } from "../mode";
+import { getRequestClient } from "../network/requests";
+import { cellDataAtom, useCellActions } from "./cells";
 import type { CellId } from "./ids";
 
 // This does not need to be overcomplicated. We can just store the expanded
 // state in a global map instead of Jotai since state is not shared between cells.
+// The output area only falls back to its map where the `expand_output` config
+// cannot be edited; see `useExpandedOutput`.
 const expandedOutputs: Record<CellId, boolean> = {};
 const expandedConsoleOutputs: Record<CellId, boolean> = {};
 
+/**
+ * Whether a cell's output is shown in full, instead of clamped to a fixed
+ * height. Covers the cell's output area only; console output is clamped
+ * independently, via `useExpandedConsoleOutput`.
+ *
+ * In edit mode, we toggle the cell's `expand_output` config, so the choice is persisted.
+ */
 export function useExpandedOutput(cellId: CellId) {
-  const [state, setState] = useState(expandedOutputs[cellId] ?? false);
+  const { mode } = useAtomValue(viewStateAtom);
+  const { updateCellConfig } = useCellActions();
+  // Select just the flag: every output would otherwise re-render on each
+  // keystroke in its cell.
+  const isConfigExpanded = useAtomValue(
+    useMemo(
+      () =>
+        selectAtom(
+          cellDataAtom(cellId),
+          (data) => data?.config.expand_output ?? false,
+          Object.is,
+        ),
+      [cellId],
+    ),
+  );
+  const [isSessionExpanded, setIsSessionExpanded] = useState(
+    () => expandedOutputs[cellId] ?? isConfigExpanded,
+  );
 
   // Sync state to external storage
   useEffect(() => {
-    expandedOutputs[cellId] = state;
-  }, [cellId, state]);
+    expandedOutputs[cellId] = isSessionExpanded;
+  }, [cellId, isSessionExpanded]);
 
-  return [state, setState] as const;
+  const isEditable = mode === "edit";
+  const isExpanded = isEditable ? isConfigExpanded : isSessionExpanded;
+
+  const setIsExpanded = useEvent((expanded: boolean) => {
+    setIsSessionExpanded(expanded);
+    if (!isEditable) {
+      return;
+    }
+    const config = { expand_output: expanded };
+    updateCellConfig({ cellId, config });
+    getRequestClient()
+      .saveCellConfig({ configs: { [cellId]: config } })
+      .catch((error) => {
+        Logger.error("Failed to save expand_output config", error);
+      });
+  });
+
+  return [isExpanded, setIsExpanded] as const;
 }
 
+/**
+ * Whether a cell's console output is shown in full. Deliberately not backed by
+ * `expand_output`: that config covers the cell's output area only, so console
+ * output stays a per-session, in-memory toggle.
+ */
 export function useExpandedConsoleOutput(cellId: CellId) {
-  const [state, setState] = useState(expandedConsoleOutputs[cellId] ?? false);
+  const [isExpanded, setIsExpanded] = useState(
+    expandedConsoleOutputs[cellId] ?? false,
+  );
 
   // Sync state to external storage
   useEffect(() => {
-    expandedConsoleOutputs[cellId] = state;
-  }, [cellId, state]);
+    expandedConsoleOutputs[cellId] = isExpanded;
+  }, [cellId, isExpanded]);
 
-  return [state, setState] as const;
+  return [isExpanded, setIsExpanded] as const;
 }
 
 export function isOutputEmpty(

package/src/core/cells/pending-delete-service.ts

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue, useStore } from "jotai";
-import { useMemo } from "react";
 import {
   useDeleteCellCallback,
   useDeleteManyCellsCallback,
@@ -130,21 +129,18 @@ export function usePendingDeleteService() {
   const { entries } = useAtomValue(pendingDeleteStateAtom);
   const deleteCell = useDeleteCellCallback();
   const deleteManyCells = useDeleteManyCellsCallback();
-  return useMemo(
-    () => ({
-      submit: (cellIds: CellId[]) => {
-        submit({ cellIds, deleteCell, deleteManyCells, store });
-      },
-      clear,
-      get idle() {
-        return entries.size === 0;
-      },
-      get shouldConfirmDelete() {
-        return entries.size > 1;
-      },
-    }),
-    [store, submit, clear, entries, deleteCell, deleteManyCells],
-  );
+  return {
+    submit: (cellIds: CellId[]) => {
+      submit({ cellIds, deleteCell, deleteManyCells, store });
+    },
+    clear,
+    get idle() {
+      return entries.size === 0;
+    },
+    get shouldConfirmDelete() {
+      return entries.size > 1;
+    },
+  };
 }
 
 export function usePendingDelete(cellId: CellId) {

package/src/core/cells/session.ts

@@ -149,6 +149,7 @@ function createEmptyNotebookCell(): NotebookCell {
       column: null,
       disabled: false,
       hide_code: false,
+      expand_output: false,
     },
   };
 }
@@ -177,6 +178,7 @@ function createCellDataFromNotebook(
       column: notebookCell.config?.column ?? null,
       disabled: notebookCell.config?.disabled ?? false,
       hide_code: notebookCell.config?.hide_code ?? false,
+      expand_output: notebookCell.config?.expand_output ?? false,
     },
     serializedEditorState: null,
   };

package/src/core/cells/types.ts

@@ -27,6 +27,7 @@ export function createCell({
       hide_code: false,
       disabled: false,
       column: null,
+      expand_output: false,
     },
     name: name,
     code: code,
@@ -42,6 +43,7 @@ export function createCellConfig(config?: Partial<CellConfig>): CellConfig {
     hide_code: false,
     disabled: false,
     column: null,
+    expand_output: false,
     ...config,
   };
 }

package/src/core/codemirror/find-replace/__tests__/navigate.test.ts

@@ -500,17 +500,15 @@ describe("navigate", () => {
       const view1Positions = result.position.get(view1);
       const view2Positions = result.position.get(view2);
 
-      if (view1Positions) {
-        expect(view1Positions.size).toBeGreaterThan(0);
-        // Check that position keys are in "from:to" format
-        for (const key of view1Positions.keys()) {
-          expect(key).toMatch(/^\d+:\d+$/);
-        }
+      invariant(view1Positions, "Expected positions for the first view");
+      expect(view1Positions.size).toBeGreaterThan(0);
+      // Check that position keys are in "from:to" format
+      for (const key of view1Positions.keys()) {
+        expect(key).toMatch(/^\d+:\d+$/);
       }
 
-      if (view2Positions) {
-        expect(view2Positions.size).toBeGreaterThan(0);
-      }
+      invariant(view2Positions, "Expected positions for the second view");
+      expect(view2Positions.size).toBeGreaterThan(0);
     });
 
     it("should handle regex patterns", () => {
@@ -654,13 +652,7 @@ describe("navigate", () => {
 
       const result = findNext();
       // Should still work by starting from index 0
-      if (result) {
-        expect(result).toBeTruthy();
-        invariant(result, "findNext should return a result");
-      } else {
-        // It's ok if no match is found since "hello" might not be in the mock views
-        expect(result).toBe(false);
-      }
+      expect(result).toMatchObject({ from: 0, to: 5 });
     });
 
     it("should handle malformed regex in replace pattern", () => {

package/src/core/codemirror/language/__tests__/sql.test.ts

@@ -17,6 +17,7 @@ import type {
 import type { DataSourceConnection } from "@/core/datasets/data-source-connections";
 import {
   dataSourceConnectionsAtom,
+  exportedForTesting as dataSourceTesting,
   setLatestEngineSelected,
 } from "@/core/datasets/data-source-connections";
 import { type ConnectionName, DUCKDB_ENGINE } from "@/core/datasets/engines";
@@ -550,8 +551,8 @@ _df = mo.sql(
     const getLatestEngine = () =>
       store.get(dataSourceConnectionsAtom).latestEngineSelected;
 
-    it("should use default engine initially", () => {
-      expect(getLatestEngine()).toBe(DUCKDB_ENGINE);
+    it("should have no selected engine initially", () => {
+      expect(getLatestEngine()).toBeNull();
     });
 
     it("should persist the selected engine", () => {
@@ -622,6 +623,73 @@ _df = mo.sql(
   });
 
   describe("defaultCode", () => {
+    it("should prefer the newest usable connection until an engine is selected", () => {
+      const previousState = store.get(dataSourceConnectionsAtom);
+      const connection: DataSourceConnection = {
+        name: "first_connection" as ConnectionName,
+        source: "sqlite",
+        display_name: "SQLite",
+        dialect: "sqlite",
+        databases: [],
+      };
+      const newestConnection = {
+        ...connection,
+        name: "newest_connection" as ConnectionName,
+      };
+      const icebergConnection = {
+        ...connection,
+        name: "catalog" as ConnectionName,
+        source: "iceberg",
+      };
+      try {
+        store.set(dataSourceConnectionsAtom, {
+          latestEngineSelected: null,
+          connectionsMap: new Map(),
+        });
+        expect(adapter.defaultMetadata.engine).toBe(DUCKDB_ENGINE);
+        expect(adapter.defaultCode).toBe('_df = mo.sql(f"""SELECT * FROM """)');
+
+        store.set(dataSourceConnectionsAtom, {
+          latestEngineSelected: null,
+          connectionsMap: new Map([
+            [connection.name, connection],
+            [newestConnection.name, newestConnection],
+            [icebergConnection.name, icebergConnection],
+            [DUCKDB_ENGINE, { ...connection, name: DUCKDB_ENGINE }],
+          ]),
+        });
+        expect(adapter.defaultMetadata.engine).toBe(newestConnection.name);
+        expect(adapter.defaultCode).toContain("engine=newest_connection");
+        expect(
+          store.get(dataSourceConnectionsAtom).latestEngineSelected,
+        ).toBeNull();
+
+        const refreshConnection = (connection: DataSourceConnection) => {
+          store.set(
+            dataSourceConnectionsAtom,
+            dataSourceTesting.reducer(store.get(dataSourceConnectionsAtom), {
+              type: "addDataSourceConnection",
+              payload: { connections: [connection] },
+            }),
+          );
+        };
+        refreshConnection(connection);
+        expect(adapter.defaultMetadata.engine).toBe(connection.name);
+        expect(adapter.defaultCode).toContain("engine=first_connection");
+
+        setLatestEngineSelected(connection.name);
+        refreshConnection(newestConnection);
+        expect(adapter.defaultCode).toContain("engine=first_connection");
+
+        setLatestEngineSelected(DUCKDB_ENGINE);
+        refreshConnection(connection);
+        expect(adapter.defaultMetadata.engine).toBe(DUCKDB_ENGINE);
+        expect(adapter.defaultCode).toBe('_df = mo.sql(f"""SELECT * FROM """)');
+      } finally {
+        store.set(dataSourceConnectionsAtom, previousState);
+      }
+    });
+
     it("should include engine in defaultCode when selected", () => {
       const engine = "postgres_engine" as ConnectionName;
       setLatestEngineSelected(engine);

package/src/core/codemirror/language/embedded/__tests__/embedded-python.test.ts

@@ -17,14 +17,10 @@ describe("parsePython", () => {
     const pythonParser = python().language.parser;
     const config = parsePython(pythonParser, IS_ACTIVE);
 
-    expect(config.defineNodes).toBeDefined();
-    if (config.defineNodes) {
-      expect(config.defineNodes).toHaveLength(2);
-      // @ts-expect-error - we know that the defineNodes are NodeSpec
-      expect(config.defineNodes[0].name).toBe("Python");
-      // @ts-expect-error - we know that the defineNodes are NodeSpec
-      expect(config.defineNodes[1].name).toBe("PythonMark");
-    }
+    expect(config.defineNodes).toMatchObject([
+      { name: "Python" },
+      { name: "PythonMark" },
+    ]);
   });
 
   it("should not parse double curly braces", () => {

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -76,7 +76,22 @@ export interface SQLLanguageAdapterMetadata extends SQLMetadata {
 }
 
 function getLatestEngine(): ConnectionName {
-  return store.get(dataSourceConnectionsAtom).latestEngineSelected;
+  const { latestEngineSelected, connectionsMap } = store.get(
+    dataSourceConnectionsAtom,
+  );
+  if (latestEngineSelected !== null) {
+    return latestEngineSelected;
+  }
+
+  // Map insertion order prefers the most recently discovered connection.
+  const connections = [...connectionsMap.values()].reverse();
+  return (
+    connections.find(
+      (connection) =>
+        !INTERNAL_SQL_ENGINES.has(connection.name) &&
+        connection.source !== "iceberg",
+    )?.name ?? DUCKDB_ENGINE
+  );
 }
 
 /**

package/src/core/codemirror/rtc/extension.ts

@@ -47,7 +47,10 @@ const awarenessLogger = logger.get("awareness").disabled();
 const AWARENESS_PREFIX = "awareness:";
 
 // Utility functions for message handling
-function prefixMessage(token: string, message: Uint8Array): Uint8Array {
+function prefixMessage(
+  token: string,
+  message: Uint8Array,
+): Uint8Array<ArrayBuffer> {
   const tokenBytes = new TextEncoder().encode(token);
   return new Uint8Array([...tokenBytes, ...message]);
 }
@@ -154,7 +157,7 @@ if (isRtcEnabled()) {
 doc.subscribeLocalUpdates((update) => {
   logger.debug("local update, sending to server");
   const ws = getWs();
-  ws.send(update);
+  ws.send(new Uint8Array(update));
 });
 
 // Handle awareness changes