@marimo-team/frontend 0.23.7-dev2 → 0.23.7-dev20

package/src/core/cells/cells.ts

@@ -23,6 +23,7 @@ import {
   splitEditor,
   updateEditorCodeFromPython,
 } from "../codemirror/language/utils";
+import type { SerializedEditorState } from "../codemirror/types";
 import { findCollapseRange, mergeOutlines } from "../dom/outline";
 import type { CellMessage } from "../kernel/messages";
 import { isErrorMime } from "../mime";
@@ -50,11 +51,36 @@ import {
   canUndoDeletes,
   disabledCellIds,
   enabledCellIds,
+  getUndoLabel,
   notebookIsRunning,
   notebookNeedsRun,
   notebookQueueOrRunningCount,
 } from "./utils";
 
+/**
+ * History entry for undoing a cell deletion.
+ */
+export interface UndoDeleteEntry {
+  type: "delete";
+  name: string;
+  serializedEditorState: SerializedEditorState;
+  column: CellColumnId;
+  index: CellIndex;
+  isSetupCell: boolean;
+  config: CellConfig;
+}
+
+/**
+ * History entry for undoing a cut-paste (move).
+ */
+export interface UndoMoveEntry {
+  type: "move";
+  cellIds: CellId[];
+  placements: Array<{ columnId: CellColumnId; index: CellIndex }>;
+}
+
+export type HistoryEntry = UndoDeleteEntry | UndoMoveEntry;
+
 /**
  * The state of the notebook.
  */
@@ -76,19 +102,9 @@ export interface NotebookState {
    */
   cellHandles: Record<CellId, React.RefObject<CellHandle | null>>;
   /**
-   * Array of deleted cells (with their data and index) so that cell deletion can be undone
-   *
-   * (CodeMirror types the serialized config as any.)
+   * Undo stack: deleted cells and cut-paste moves, in chronological order.
    */
-  history: {
-    name: string;
-    // oxlint-disable-next-line typescript/no-explicit-any
-    serializedEditorState: any;
-    column: CellColumnId;
-    index: CellIndex;
-    isSetupCell: boolean;
-    config: CellConfig;
-  }[];
+  history: HistoryEntry[];
   /**
    * Key of cell to scroll to; typically set by actions that re-order the cell
    * array. Call the SCROLL_TO_TARGET action to scroll to the specified cell
@@ -158,6 +174,10 @@ export interface CreateNewCellAction {
   before: boolean;
   /** Initial code content for the new cell */
   code?: string;
+  /** Optional name for the new cell */
+  name?: string;
+  /** Optional cell configuration */
+  config?: CellConfig;
   /** The last executed code for the new cell */
   lastCodeRun?: string;
   /** Timestamp of the last execution */
@@ -187,11 +207,13 @@ const {
       cellId,
       before,
       code,
+      name,
+      config,
       lastCodeRun = null,
       lastExecutionTime = null,
       autoFocus = true,
       skipIfCodeExists = false,
-      hideCode = false,
+      hideCode = undefined,
     } = action;
 
     let columnId: CellColumnId;
@@ -234,8 +256,12 @@ const {
         [newCellId]: createCell({
           id: newCellId,
           code,
+          name,
           lastCodeRun,
-          config: createCellConfig({ hide_code: hideCode }),
+          config: createCellConfig({
+            ...config,
+            ...(hideCode != null && { hide_code: hideCode }),
+          }),
           lastExecutionTime,
           edited: Boolean(code) && code !== lastCodeRun,
         }),
@@ -417,6 +443,40 @@ const {
       scrollKey: null,
     };
   },
+  moveCellsRelativeTo: (
+    state,
+    action: {
+      cellIds: CellId[];
+      targetCellId: CellId;
+      position: "before" | "after";
+      previousPlacements?: Array<{ columnId: CellColumnId; index: CellIndex }>;
+    },
+  ) => {
+    const { cellIds, targetCellId, position, previousPlacements } = action;
+    if (cellIds.length === 0) {
+      return state;
+    }
+    const newCellIds = state.cellIds.moveCellsRelativeTo(
+      cellIds,
+      targetCellId,
+      position,
+    );
+    // Only record undo when caller provided full before-state
+    const canUndoMove =
+      previousPlacements && previousPlacements.length === cellIds.length;
+    const history = canUndoMove
+      ? [
+          ...state.history,
+          { type: "move" as const, cellIds, placements: previousPlacements },
+        ]
+      : state.history;
+    return {
+      ...state,
+      cellIds: newCellIds,
+      history,
+      scrollKey: null,
+    };
+  },
   dropCellOverColumn: (
     state,
     action: { cellId: CellId; columnId: CellColumnId },
@@ -659,6 +719,7 @@ const {
       history: [
         ...state.history,
         {
+          type: "delete",
           name: prevData.name,
           serializedEditorState: serializedEditorState,
           column: column.id,
@@ -675,7 +736,29 @@ const {
       return state;
     }
 
-    const mostRecentlyDeleted = state.history[state.history.length - 1];
+    const last = state.history[state.history.length - 1];
+
+    if (last.type === "move") {
+      const { cellIds, placements } = last;
+      if (
+        cellIds.length === 0 ||
+        placements.length !== cellIds.length ||
+        cellIds.some((id) => !state.cellData[id])
+      ) {
+        return { ...state, history: state.history.slice(0, -1) };
+      }
+      const toRestore = cellIds.map((id, i) => ({
+        id,
+        columnId: placements[i].columnId,
+        index: placements[i].index,
+      }));
+      return {
+        ...state,
+        cellIds: state.cellIds.placeCells(toRestore),
+        history: state.history.slice(0, -1),
+        scrollKey: cellIds[0] ?? null,
+      };
+    }
 
     const {
       name,
@@ -684,7 +767,7 @@ const {
       index,
       isSetupCell,
       config,
-    } = mostRecentlyDeleted;
+    } = last;
 
     const cellId = isSetupCell ? SETUP_CELL_ID : CellId.create();
     const undoCell = createCell({
@@ -790,7 +873,7 @@ const {
       cellReducer: (cell) => {
         return {
           ...cell,
-          config: { ...cell.config, ...config },
+          config: createCellConfig({ ...cell.config, ...config }),
         };
       },
     });
@@ -1633,6 +1716,8 @@ export const canUndoDeletesAtom = atom((get) =>
   canUndoDeletes(get(notebookAtom)),
 );
 
+export const undoLabelAtom = atom((get) => getUndoLabel(get(notebookAtom)));
+
 export const needsRunAtom = atom((get) => notebookNeedsRun(get(notebookAtom)));
 
 export const cellErrorsAtom = atom((get) => {

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

@@ -218,13 +218,14 @@ export function toDocumentChanges(
       ];
     }
 
-    // dropCellOverCell/dropCellOverColumn/moveCellToIndex → set-config + reorder-cells
+    // dropCellOverCell/dropCellOverColumn/moveCellToIndex/moveCellsRelativeTo → set-config + reorder-cells
     // Drag-and-drop reorders can move cells within or across columns.
     // We emit config changes for cells whose column changed, then
     // the full ordering.
     case "dropCellOverCell":
     case "dropCellOverColumn":
     case "moveCellToIndex":
+    case "moveCellsRelativeTo":
       return columnChanges(prevState, newState);
 
     // updateCellCode → set-code
@@ -302,6 +303,10 @@ export function toDocumentChanges(
     case "undoDeleteCell": {
       const changes = newCellChanges(prevState, newState);
       const colChanges = columnChanges(prevState, newState);
+      // Undo-cut has no new cells — always emit reorder to sync the move.
+      if (changes.length === 0) {
+        return colChanges;
+      }
       // Only include column changes if layout actually changed
       // (colChanges always has at least a reorder-cells change)
       return colChanges.length > 1 ? [...changes, ...colChanges] : changes;

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

@@ -0,0 +1,55 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, useAtomValue } from "jotai";
+import type { CellId } from "@/core/cells/ids";
+import { createReducerAndAtoms } from "@/utils/createReducer";
+
+interface PendingCutState {
+  cellIds: Set<CellId>;
+}
+
+const initialState = (): PendingCutState => ({
+  cellIds: new Set(),
+});
+
+const {
+  valueAtom: pendingCutStateAtom,
+  useActions: usePendingCutActionsInternal,
+} = createReducerAndAtoms(initialState, {
+  markForCut: (_state, action: { cellIds: CellId[] }) => {
+    return {
+      cellIds: new Set(action.cellIds),
+    };
+  },
+  clear: () => {
+    return initialState();
+  },
+});
+
+export { pendingCutStateAtom };
+
+export const pendingCutCellIdsAtom = atom(
+  (get) => get(pendingCutStateAtom).cellIds,
+);
+
+export const clearPendingCutAtom = atom(null, (_get, set) => {
+  set(pendingCutStateAtom, initialState());
+});
+
+export function usePendingCutActions() {
+  return usePendingCutActionsInternal();
+}
+
+export function useIsPendingCut(cellId: CellId): boolean {
+  const cellIds = useAtomValue(pendingCutCellIdsAtom);
+  return cellIds.has(cellId);
+}
+
+export function usePendingCutState() {
+  return useAtomValue(pendingCutStateAtom);
+}
+
+export function useHasPendingCut(): boolean {
+  const state = useAtomValue(pendingCutStateAtom);
+  return state.cellIds.size > 0;
+}

package/src/core/cells/utils.ts

@@ -65,6 +65,17 @@ export function canUndoDeletes(state: NotebookState) {
   return state.history.length > 0;
 }
 
+/**
+ * Label for the undo action based on the last history entry type.
+ */
+export function getUndoLabel(state: NotebookState): string {
+  const last = state.history[state.history.length - 1];
+  if (!last) {
+    return "Undo cell deletion";
+  }
+  return last.type === "move" ? "Undo move" : "Undo cell deletion";
+}
+
 /**
  * Get the status of the descendants of the given cell.
  */

package/src/core/codemirror/cells/extensions.ts

@@ -10,6 +10,10 @@ import {
 } from "@codemirror/view";
 import { createTracebackInfoAtom } from "@/core/cells/cells";
 import { type CellId, HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
+import {
+  clearPendingCutAtom,
+  pendingCutCellIdsAtom,
+} from "@/core/cells/pending-cut-service";
 import { loroSyncAnnotation } from "@/core/codemirror/rtc/loro/sync";
 import type { KeymapConfig } from "@/core/config/config-schema";
 import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
@@ -326,6 +330,12 @@ function cellCodeEditing(hotkeys: HotkeyProvider): Extension[] {
         code: nextCode,
         formattingChange: isFormattingChange,
       });
+
+      // Clear pending cut state if this cell was marked for cut
+      const pendingCutCellIds = store.get(pendingCutCellIdsAtom);
+      if (pendingCutCellIds.has(cellId)) {
+        store.set(clearPendingCutAtom);
+      }
     }
   });
 

package/src/core/codemirror/markdown/__tests__/commands.test.ts

@@ -246,7 +246,7 @@ describe("insertImage", () => {
       path: "public",
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     expect(view.state.doc.toString()).toMatchInlineSnapshot(
@@ -291,7 +291,7 @@ describe("insertImage", () => {
       path: "nested/public", // store in public folder of notebook directory
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     expect(view.state.doc.toString()).toMatchInlineSnapshot(
@@ -337,7 +337,7 @@ describe("insertImage", () => {
       path: "/Users/user/Development/project/public",
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     // Should convert absolute path to relative path

package/src/core/codemirror/markdown/commands.ts

@@ -313,7 +313,6 @@ export async function insertImage(view: EditorView, file: File) {
   // If the file is base64 encoded, we can save it locally to prevent large file strings
   try {
     if (dataUrl.startsWith("data:")) {
-      const base64 = dataUrl.split(",")[1];
       let inputFilename = prompt(
         "We can save your image as a file. Enter a filename.",
         file.name,
@@ -348,7 +347,7 @@ export async function insertImage(view: EditorView, file: File) {
           path: publicFolderPath as FilePath,
           type: "file",
           name: inputFilename,
-          contents: base64,
+          file,
         });
 
         if (createFileRes.success) {

package/src/core/edit-app.tsx

@@ -79,7 +79,7 @@ export const EditApp: React.FC<AppProps> = ({
     };
   }, []);
 
-  const { connection } = useMarimoKernelConnection({
+  const { connection, reconnect } = useMarimoKernelConnection({
     autoInstantiate: userConfig.runtime.auto_instantiate,
     setCells: (cells, layout) => {
       setCells(cells);
@@ -147,6 +147,7 @@ export const EditApp: React.FC<AppProps> = ({
         connection={connection}
         isRunning={isRunning}
         width={appConfig.width}
+        onReconnect={reconnect}
       >
         <AppHeader
           connection={connection}

package/src/core/hotkeys/hotkeys.ts

@@ -442,6 +442,11 @@ const DEFAULT_HOT_KEY = {
     group: "Command",
     key: "c",
   },
+  "command.cutCell": {
+    name: "Cut cell",
+    group: "Command",
+    key: "x",
+  },
   "command.pasteCell": {
     name: "Paste cell",
     group: "Command",

package/src/core/islands/worker/worker.tsx

@@ -9,6 +9,7 @@ import {
 } from "rpc-anywhere";
 import type { NotificationPayload } from "@/core/kernel/messages";
 import type { ParentSchema } from "@/core/wasm/rpc";
+import { shouldLoadDuckDBPackages } from "@/core/wasm/utils";
 import { TRANSPORT_ID } from "@/core/wasm/worker/constants";
 import { getPyodideVersion } from "@/core/wasm/worker/getPyodideVersion";
 import { MessageBuffer } from "@/core/wasm/worker/message-buffer";
@@ -85,8 +86,8 @@ const requestHandler = createRPCRequestHandler({
   loadPackages: async (code: string) => {
     await pyodideReadyPromise; // Make sure loading is done
 
-    if (code.includes("mo.sql")) {
-      // Add pandas and duckdb to the code
+    if (shouldLoadDuckDBPackages(code)) {
+      // Add pandas and duckdb to the code for mo.sql and for remote duckdb sources
       code = `import pandas\n${code}`;
       code = `import duckdb\n${code}`;
       code = `import sqlglot\n${code}`;

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

@@ -6,6 +6,19 @@ import { API, createClientWithRuntimeManager } from "./api";
 import { waitForConnectionOpen } from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
+/**
+ * Options for POSTing FormData via openapi-fetch. openapi-fetch types
+ * request bodies from the JSON schema, so we bypass the body type and
+ * override the serializer to pass the FormData through unchanged; the
+ * browser then sets the multipart Content-Type with boundary.
+ */
+function multipartInit(formData: FormData) {
+  return {
+    body: formData as never,
+    bodySerializer: (body: unknown) => body as never,
+  };
+}
+
 const { handleResponse, handleResponseReturnNull } = API;
 
 export function createNetworkRequests(): EditRequests & RunRequests {
@@ -298,10 +311,15 @@ export function createNetworkRequests(): EditRequests & RunRequests {
     },
     sendCreateFileOrFolder: async (request) => {
       await waitForConnectionOpen();
+      const formData = new FormData();
+      formData.append("path", request.path);
+      formData.append("type", request.type);
+      formData.append("name", request.name);
+      if (request.file) {
+        formData.append("file", request.file, request.name);
+      }
       return getClient()
-        .POST("/api/files/create", {
-          body: request,
-        })
+        .POST("/api/files/create", multipartInit(formData))
         .then(handleResponse);
     },
     sendDeleteFileOrFolder: async (request) => {

package/src/core/network/types.ts

@@ -80,6 +80,17 @@ export type SaveUserConfigurationRequest =
 export interface SetCellConfigRequest {
   configs: Record<CellId, Partial<CellConfig>>;
 }
+/**
+ * Client-side shape for creating a file/directory/notebook. The HTTP
+ * transport sends this as multipart/form-data; the WASM bridge base64-encodes
+ * `file` internally and crosses the JS<->Py boundary as JSON.
+ */
+export interface FileCreateInput {
+  path: string;
+  type: "file" | "directory" | "notebook";
+  name: string;
+  file?: Blob;
+}
 export type UpdateUIElementRequest = schemas["UpdateUIElementRequest"];
 export type ModelRequest = schemas["ModelRequest"];
 export type NotebookDocumentTransactionRequest =
@@ -165,7 +176,7 @@ export interface EditRequests {
   sendListFiles: (request: FileListRequest) => Promise<FileListResponse>;
   sendSearchFiles: (request: FileSearchRequest) => Promise<FileSearchResponse>;
   sendCreateFileOrFolder: (
-    request: FileCreateRequest,
+    request: FileCreateInput,
   ) => Promise<FileCreateResponse>;
   sendDeleteFileOrFolder: (
     request: FileDeleteRequest,

package/src/core/run-app.tsx

@@ -38,7 +38,7 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
     };
   }, []);
 
-  const { connection } = useMarimoKernelConnection({
+  const { connection, reconnect } = useMarimoKernelConnection({
     autoInstantiate: true,
     setCells: setCells,
     sessionId: getSessionId(),
@@ -84,6 +84,7 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
       connection={connection}
       isRunning={isRunning}
       width={appConfig.width}
+      onReconnect={reconnect}
     >
       <AppHeader connection={connection} className="sm:pt-8">
         {galleryHref && (

package/src/core/wasm/__tests__/utils.test.ts

@@ -0,0 +1,34 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { shouldLoadDuckDBPackages } from "../utils";
+
+describe("shouldLoadDuckDBPackages", () => {
+  it("loads for mo.sql", () => {
+    expect(shouldLoadDuckDBPackages('df = mo.sql("SELECT 1")')).toBe(true);
+  });
+
+  it("loads for duckdb imports and usage", () => {
+    expect(shouldLoadDuckDBPackages("import duckdb")).toBe(true);
+    expect(shouldLoadDuckDBPackages("from duckdb import sql")).toBe(true);
+    expect(shouldLoadDuckDBPackages("import pandas, duckdb")).toBe(true);
+    expect(shouldLoadDuckDBPackages("rows = duckdb.sql('SELECT 1')")).toBe(
+      true,
+    );
+  });
+
+  it("loads when package discovery found duckdb", () => {
+    expect(
+      shouldLoadDuckDBPackages("print('hello')", new Set(["duckdb"])),
+    ).toBe(true);
+  });
+
+  it("does not load for incidental duckdb text", () => {
+    expect(shouldLoadDuckDBPackages("name = 'duckdb'")).toBe(false);
+    expect(shouldLoadDuckDBPackages("# import duckdb")).toBe(false);
+  });
+
+  it("does not load without mo.sql, duckdb usage, or discovery", () => {
+    expect(shouldLoadDuckDBPackages("print('hello')")).toBe(false);
+  });
+});

package/src/core/wasm/bridge.ts

@@ -3,6 +3,7 @@
 
 import { toast } from "@/components/ui/use-toast";
 import { userConfigAtom } from "@/core/config/config";
+import { serializeBlob } from "@/utils/blob";
 import { Deferred } from "@/utils/Deferred";
 import { throwNotImplemented } from "@/utils/functions";
 import { Logger } from "@/utils/Logger";
@@ -431,9 +432,21 @@ export class PyodideBridge implements RunRequests, EditRequests {
   sendCreateFileOrFolder: EditRequests["sendCreateFileOrFolder"] = async (
     request,
   ) => {
+    // The WASM RPC boundary can only carry JSON, so we base64-encode the
+    // file bytes here. The HTTP transport uses multipart/form-data instead.
+    let contents: string | null = null;
+    if (request.file) {
+      const dataUrl = await serializeBlob(request.file);
+      contents = dataUrl.split(",")[1] ?? "";
+    }
     const response = await this.rpc.proxy.request.bridge({
       functionName: "create_file_or_directory",
-      payload: request,
+      payload: {
+        path: request.path,
+        type: request.type,
+        name: request.name,
+        contents,
+      },
     });
     return response as FileCreateResponse;
   };

package/src/core/wasm/utils.ts

@@ -10,3 +10,17 @@ export function isWasm(): boolean {
     document.querySelector("marimo-wasm") !== null
   );
 }
+
+const DUCKDB_USAGE_PATTERN =
+  /(^|\n)\s*(?:import\s+[^\n#]*\bduckdb\b|from\s+duckdb\b|[^\n#]*\bduckdb\s*\.)/;
+
+export function shouldLoadDuckDBPackages(
+  code: string,
+  foundPackages?: ReadonlySet<string>,
+): boolean {
+  return (
+    code.includes("mo.sql") ||
+    DUCKDB_USAGE_PATTERN.test(code) ||
+    foundPackages?.has("duckdb") === true
+  );
+}

package/src/core/wasm/worker/bootstrap.ts

@@ -9,6 +9,7 @@ import { WasmFileSystem } from "./fs";
 import { getMarimoWheel } from "./getMarimoWheel";
 import { t } from "./tracer";
 import type { SerializedBridge, WasmController } from "./types";
+import { shouldLoadDuckDBPackages } from "../utils";
 
 const MAKE_SNAPSHOT = false;
 
@@ -163,8 +164,8 @@ export class DefaultWasmController implements WasmController {
   private async loadNotebookDeps(code: string, foundPackages: Set<string>) {
     const pyodide = this.requirePyodide;
 
-    if (code.includes("mo.sql")) {
-      // We need pandas and duckdb for mo.sql
+    if (shouldLoadDuckDBPackages(code, foundPackages)) {
+      // We need pandas and duckdb for mo.sql and for remote duckdb sources
       code = `import pandas\n${code}`;
       code = `import duckdb\n${code}`;
       code = `import sqlglot\n${code}`;

package/src/core/wasm/worker/worker.ts

@@ -34,6 +34,7 @@ import type {
   SerializedBridge,
   WasmController,
 } from "./types";
+import { shouldLoadDuckDBPackages } from "../utils";
 
 /**
  * Web worker responsible for running the notebook.
@@ -141,8 +142,8 @@ const requestHandler = createRPCRequestHandler({
     const span = t.startSpan("loadPackages");
     await pyodideReadyPromise; // Make sure loading is done
 
-    if (code.includes("mo.sql")) {
-      // Add pandas and duckdb to the code
+    if (shouldLoadDuckDBPackages(code)) {
+      // Add pandas and duckdb to the code for mo.sql and for remote duckdb sources
       code = `import pandas\n${code}`;
       code = `import duckdb\n${code}`;
       code = `import sqlglot\n${code}`;