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

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}`;

package/src/core/websocket/__tests__/useMarimoKernelConnection.hook.test.tsx

@@ -0,0 +1,155 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { act, renderHook } from "@testing-library/react";
+import { createStore, Provider as JotaiProvider } from "jotai";
+import type React from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/core/websocket/useWebSocket", async () => {
+  const actual =
+    await vi.importActual<typeof import("../useWebSocket")>("../useWebSocket");
+  return {
+    ...actual,
+    useConnectionTransport: vi.fn(),
+  };
+});
+
+vi.mock("@/core/runtime/config", async () => {
+  const actual = await vi.importActual<typeof import("@/core/runtime/config")>(
+    "@/core/runtime/config",
+  );
+  return {
+    ...actual,
+    useRuntimeManager: vi.fn(),
+  };
+});
+
+import { useRuntimeManager } from "@/core/runtime/config";
+import { connectionAtom } from "../../network/connection";
+import type { SessionId } from "../../kernel/session";
+import { WebSocketClosedReason, WebSocketState } from "../types";
+import { useMarimoKernelConnection } from "../useMarimoKernelConnection";
+import { useConnectionTransport } from "../useWebSocket";
+
+interface MockTransport {
+  readyState: 0 | 1 | 2 | 3;
+  retryCount: number;
+  reconnect: ReturnType<typeof vi.fn>;
+  close: ReturnType<typeof vi.fn>;
+  send: ReturnType<typeof vi.fn>;
+  addEventListener: ReturnType<typeof vi.fn>;
+  removeEventListener: ReturnType<typeof vi.fn>;
+}
+
+function makeTransport(
+  readyState: 0 | 1 | 2 | 3 = WebSocket.CLOSED,
+): MockTransport {
+  return {
+    readyState,
+    retryCount: 0,
+    reconnect: vi.fn(),
+    close: vi.fn(),
+    send: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  };
+}
+
+function makeRuntimeManager(isHealthy = vi.fn().mockResolvedValue(true)) {
+  return {
+    isHealthy,
+    getWsURL: () => new URL("ws://localhost/ws"),
+    waitForHealthy: vi.fn().mockResolvedValue(undefined),
+    isSameOrigin: true,
+  };
+}
+
+describe("useMarimoKernelConnection.reconnect()", () => {
+  let transport: MockTransport;
+  let isHealthy: ReturnType<typeof vi.fn>;
+  let store: ReturnType<typeof createStore>;
+
+  beforeEach(() => {
+    transport = makeTransport(WebSocket.CLOSED);
+    isHealthy = vi.fn().mockResolvedValue(true);
+    store = createStore();
+    store.set(connectionAtom, {
+      state: WebSocketState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      reason: "kernel not found",
+    });
+    vi.mocked(useConnectionTransport).mockReturnValue(transport);
+    vi.mocked(useRuntimeManager).mockReturnValue(
+      makeRuntimeManager(isHealthy) as unknown as ReturnType<
+        typeof useRuntimeManager
+      >,
+    );
+  });
+
+  function renderUseHook() {
+    const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+      <JotaiProvider store={store}>
+        <ErrorBoundary fallback={null}>{children}</ErrorBoundary>
+      </JotaiProvider>
+    );
+    return renderHook(
+      () =>
+        useMarimoKernelConnection({
+          sessionId: "test-session" as SessionId,
+          autoInstantiate: false,
+          setCells: () => {},
+        }),
+      { wrapper },
+    );
+  }
+
+  it("is a no-op when the transport is already OPEN", async () => {
+    transport.readyState = WebSocket.OPEN;
+    const { result } = renderUseHook();
+    await act(async () => {
+      await result.current.reconnect();
+    });
+    expect(isHealthy).not.toHaveBeenCalled();
+    expect(transport.reconnect).not.toHaveBeenCalled();
+  });
+
+  it("is a no-op when the transport is already CONNECTING", async () => {
+    transport.readyState = WebSocket.CONNECTING;
+    const { result } = renderUseHook();
+    await act(async () => {
+      await result.current.reconnect();
+    });
+    expect(isHealthy).not.toHaveBeenCalled();
+    expect(transport.reconnect).not.toHaveBeenCalled();
+  });
+
+  it("probes /health and reconnects when the runtime is healthy", async () => {
+    isHealthy.mockResolvedValue(true);
+    const { result } = renderUseHook();
+    await act(async () => {
+      await result.current.reconnect();
+    });
+    expect(isHealthy).toHaveBeenCalledOnce();
+    expect(transport.reconnect).toHaveBeenCalledOnce();
+    expect(store.get(connectionAtom)).toEqual({
+      state: WebSocketState.CONNECTING,
+    });
+  });
+
+  it("transitions to CLOSED and does not call ws.reconnect when the probe fails", async () => {
+    isHealthy.mockResolvedValue(false);
+    const { result } = renderUseHook();
+    await act(async () => {
+      await result.current.reconnect();
+    });
+    expect(isHealthy).toHaveBeenCalledOnce();
+    expect(transport.reconnect).not.toHaveBeenCalled();
+    expect(store.get(connectionAtom)).toEqual({
+      state: WebSocketState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      reason: "kernel not found",
+    });
+  });
+});

package/src/core/websocket/__tests__/useMarimoKernelConnection.test.ts

@@ -0,0 +1,137 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Logger } from "@/utils/Logger";
+import { WebSocketClosedReason, WebSocketState } from "../types";
+import { classifyCloseEvent } from "../useMarimoKernelConnection";
+import { MAX_RETRIES } from "../useWebSocket";
+
+function classify(
+  reason: string | undefined,
+  retryCount = 0,
+  maxRetries = MAX_RETRIES,
+) {
+  return classifyCloseEvent({ reason }, { retryCount, maxRetries });
+}
+
+describe("classifyCloseEvent", () => {
+  describe("transient closes (default branch)", () => {
+    it("retries when retryCount < maxRetries", () => {
+      const decision = classify(undefined, 0);
+      expect(decision.kind).toBe("retry");
+      expect(decision.status).toEqual({ state: WebSocketState.CONNECTING });
+    });
+
+    it("retries on each intermediate close event during a retry storm", () => {
+      for (let n = 0; n < MAX_RETRIES; n++) {
+        const decision = classify(undefined, n);
+        expect(decision.kind).toBe("retry");
+        expect(decision.status).toEqual({ state: WebSocketState.CONNECTING });
+      }
+    });
+
+    it("transitions to CLOSED when retryCount reaches maxRetries", () => {
+      const decision = classify(undefined, MAX_RETRIES);
+      expect(decision.kind).toBe("gave-up");
+      expect(decision.status).toEqual({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      });
+    });
+
+    it("transitions to CLOSED when retryCount exceeds maxRetries", () => {
+      const decision = classify(undefined, MAX_RETRIES + 5);
+      expect(decision.kind).toBe("gave-up");
+    });
+
+    it("treats unknown reason strings as transient and logs a warning", () => {
+      const logger = vi.spyOn(Logger, "warn").mockImplementation(() => {});
+      const decision = classify("something-else", 3);
+      expect(decision.kind).toBe("retry");
+      expect(logger).toHaveBeenCalled();
+      logger.mockRestore();
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("terminal closes (server-initiated)", () => {
+    it("MARIMO_ALREADY_CONNECTED → terminal + closeTransport, with takeover", () => {
+      const decision = classify("MARIMO_ALREADY_CONNECTED", 0);
+      expect(decision.kind).toBe("terminal");
+      expect(decision.status).toMatchObject({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.ALREADY_RUNNING,
+        canTakeover: true,
+      });
+      if (decision.kind === "terminal") {
+        expect(decision.closeTransport).toBe(true);
+      }
+    });
+
+    it.each([
+      "MARIMO_WRONG_KERNEL_ID",
+      "MARIMO_NO_FILE_KEY",
+      "MARIMO_NO_SESSION_ID",
+      "MARIMO_NO_SESSION",
+      "MARIMO_SHUTDOWN",
+    ])("%s → terminal with KERNEL_DISCONNECTED, closes transport", (reason) => {
+      const decision = classify(reason, 0);
+      expect(decision.kind).toBe("terminal");
+      expect(decision.status).toMatchObject({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      });
+      if (decision.kind === "terminal") {
+        expect(decision.closeTransport).toBe(true);
+      }
+    });
+
+    it("MARIMO_MALFORMED_QUERY → terminal but does NOT close transport", () => {
+      const decision = classify("MARIMO_MALFORMED_QUERY", 0);
+      expect(decision.kind).toBe("terminal");
+      expect(decision.status).toMatchObject({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.MALFORMED_QUERY,
+      });
+      if (decision.kind === "terminal") {
+        expect(decision.closeTransport).toBe(false);
+      }
+    });
+
+    it("MARIMO_KERNEL_STARTUP_ERROR → terminal + closeTransport", () => {
+      const decision = classify("MARIMO_KERNEL_STARTUP_ERROR", 0);
+      expect(decision.kind).toBe("terminal");
+      expect(decision.status).toMatchObject({
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      });
+      if (decision.kind === "terminal") {
+        expect(decision.closeTransport).toBe(true);
+      }
+    });
+
+    it("terminal closes ignore retryCount entirely", () => {
+      const decision = classify("MARIMO_SHUTDOWN", 99);
+      expect(decision.kind).toBe("terminal");
+    });
+  });
+
+  describe("retry budget exhaustion", () => {
+    it("yields retry on attempts 1..maxRetries-1 and gave-up on the final close", () => {
+      const states: string[] = [];
+      for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+        states.push(classify(undefined, attempt - 1).kind);
+      }
+      states.push(classify(undefined, MAX_RETRIES).kind);
+
+      expect(states).toEqual([
+        ...Array.from({ length: MAX_RETRIES }, () => "retry"),
+        "gave-up",
+      ]);
+    });
+  });
+});

package/src/core/websocket/transports/basic.ts

@@ -43,6 +43,8 @@ export class BasicTransport implements IConnectionTransport {
     return WebSocket.OPEN;
   }
 
+  readonly retryCount = 0;
+
   reconnect(code?: number | undefined, reason?: string | undefined): void {
     this.close();
     this.connect();

package/src/core/websocket/transports/transport.ts

@@ -25,6 +25,7 @@ export interface IConnectionTransport {
     callback: ConnectionTransportCallback<T>,
   ): void;
   readyState: WebSocket["readyState"];
+  readonly retryCount: number;
 }
 
 export class ConnectionSubscriptions {