@marimo-team/frontend 0.23.16-dev4 → 0.23.16-dev40

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

@@ -22,6 +22,7 @@ vi.mock("../api", async () => {
   return {
     ...actual,
     API: {
+      handleExportResponse: vi.fn((response) => response.data),
       handleResponse: vi.fn((response) => response.data),
       handleResponseReturnNull: vi.fn(() => null),
     },
@@ -32,6 +33,7 @@ vi.mock("../api", async () => {
 vi.mock("../connection", () => ({
   isConnectedAtom: { read: vi.fn(() => true) },
   waitForConnectionOpen: vi.fn().mockResolvedValue(undefined),
+  waitForConnectionOpenIfNotebook: vi.fn().mockResolvedValue(undefined),
 }));
 
 describe("createNetworkRequests", () => {
@@ -121,6 +123,25 @@ describe("createNetworkRequests", () => {
       expect(mockClient.GET).toHaveBeenCalledWith("/api/environment");
     });
 
+    it("getExportAvailability should GET /api/export/availability", async () => {
+      const requests = createNetworkRequests();
+      await requests.getExportAvailability();
+
+      expect(mockClient.GET).toHaveBeenCalledWith("/api/export/availability");
+    });
+
+    it("getPackageList should not require a kernel connection", async () => {
+      const { waitForConnectionOpen, waitForConnectionOpenIfNotebook } =
+        await import("../connection");
+
+      const requests = createNetworkRequests();
+      await requests.getPackageList();
+
+      expect(mockClient.GET).toHaveBeenCalledWith("/api/packages/list");
+      expect(waitForConnectionOpenIfNotebook).toHaveBeenCalled();
+      expect(waitForConnectionOpen).not.toHaveBeenCalled();
+    });
+
     it("exportAsIPYNB should call the new endpoint as text", async () => {
       const requests = createNetworkRequests();
       await requests.exportAsIPYNB({

package/src/core/network/api.ts

@@ -6,6 +6,7 @@ import { Logger } from "../../utils/Logger";
 import { Strings } from "../../utils/strings";
 import { getRuntimeManager } from "../runtime/config";
 import type { RuntimeManager } from "../runtime/runtime";
+import type { ExportedFile } from "./types";
 
 function getBaseUriWithoutQueryParams(): string {
   // Remove query params and hash
@@ -15,6 +16,15 @@ function getBaseUriWithoutQueryParams(): string {
   return url.toString();
 }
 
+function getExportFilename(response: Response): string {
+  const contentDisposition = response.headers.get("Content-Disposition");
+  const match = contentDisposition?.match(/filename\*=UTF-8''([^;]+)/i);
+  if (!match) {
+    throw new Error("Export response is missing a filename");
+  }
+  return decodeURIComponent(match[1]);
+}
+
 /**
  * Wrapper around fetch that adds XSRF token and session ID to the request and
  * strong types.
@@ -119,6 +129,23 @@ export const API = {
     }
     return Promise.resolve(response.data as T);
   },
+  handleExportResponse: async <T extends BlobPart>(response: {
+    data?: T | undefined;
+    error?: Record<string, unknown>;
+    response: Response;
+  }): Promise<ExportedFile<T>> => {
+    const contents = await API.handleResponse<T>(response);
+    const mediaType = response.response.headers.get("Content-Type");
+    if (!mediaType) {
+      throw new Error("Export response is missing a media type");
+    }
+
+    return {
+      contents,
+      filename: getExportFilename(response.response),
+      mediaType,
+    };
+  },
   handleResponseReturnNull: (response: {
     error?: Record<string, unknown>;
     response: Response;

package/src/core/network/connection.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atom } from "jotai";
+import { isNotebookPage } from "../mode";
 import { waitFor } from "../state/jotai";
 import { type ConnectionStatus, WebSocketState } from "../websocket/types";
 
@@ -17,6 +18,20 @@ export function waitForConnectionOpen() {
   });
 }
 
+/**
+ * Waits for the kernel connection, but only on pages that open one. Non-notebook
+ * pages (home, gallery) never connect, so waiting there would hang forever.
+ *
+ * Use for requests that the marimo server can serve without a session, but that
+ * should still wait for the kernel when a notebook is open.
+ */
+export function waitForConnectionOpenIfNotebook() {
+  if (!isNotebookPage()) {
+    return Promise.resolve();
+  }
+  return waitForConnectionOpen();
+}
+
 export const isConnectingAtom = atom((get) => {
   const connection = get(connectionAtom);
   return connection.state === WebSocketState.CONNECTING;

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

@@ -103,6 +103,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
 
   // Served by the marimo server without a kernel session
   getEnvironmentInfo: "serverOnly",
+  getExportAvailability: "serverOnly",
 
   // Home operations throw errors
   getRecentFiles: "startConnection",

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

@@ -3,7 +3,10 @@
 import { once } from "@/utils/once";
 import { getRuntimeManager } from "../runtime/config";
 import { API, createClientWithRuntimeManager } from "./api";
-import { waitForConnectionOpen } from "./connection";
+import {
+  waitForConnectionOpen,
+  waitForConnectionOpenIfNotebook,
+} from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
 /**
@@ -19,7 +22,7 @@ function multipartInit(formData: FormData) {
   };
 }
 
-const { handleResponse, handleResponseReturnNull } = API;
+const { handleExportResponse, handleResponse, handleResponseReturnNull } = API;
 
 export function createNetworkRequests(): EditRequests & RunRequests {
   const getClient = once(() => {
@@ -399,6 +402,9 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponse);
     },
+    getExportAvailability: () => {
+      return getClient().GET("/api/export/availability").then(handleResponse);
+    },
     exportAsHTML: async (request) => {
       if (
         process.env.NODE_ENV === "development" ||
@@ -412,7 +418,7 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "text",
           params: getParams(),
         })
-        .then(handleResponse);
+        .then(handleExportResponse);
     },
     exportAsMarkdown: async (request) => {
       return getClient()
@@ -421,7 +427,7 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "text",
           params: getParams(),
         })
-        .then(handleResponse);
+        .then(handleExportResponse);
     },
     exportAsIPYNB: async (request) => {
       return getClient()
@@ -430,7 +436,7 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "text",
           params: getParams(),
         })
-        .then(handleResponse);
+        .then(handleExportResponse);
     },
     exportAsPDF: async (request) => {
       return getClient()
@@ -439,7 +445,7 @@ export function createNetworkRequests(): EditRequests & RunRequests {
           parseAs: "blob",
           params: getParams(),
         })
-        .then(handleResponse);
+        .then(handleExportResponse);
     },
     autoExportAsHTML: async (request) => {
       return getClient()
@@ -489,12 +495,12 @@ export function createNetworkRequests(): EditRequests & RunRequests {
     },
     getPackageList: async () => {
       // If the sidebar is already open, it may try to load before the session has been initialized
-      await waitForConnectionOpen();
+      await waitForConnectionOpenIfNotebook();
       return getClient().GET("/api/packages/list").then(handleResponse);
     },
     getDependencyTree: async () => {
       // If the sidebar is already open, it may try to load before the session has been initialized
-      await waitForConnectionOpen();
+      await waitForConnectionOpenIfNotebook();
       return getClient().GET("/api/packages/tree").then(handleResponse);
     },
     listSecretKeys: async (request) => {

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

@@ -82,6 +82,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     getWorkspaceFiles: throwNotInEditMode,
     getRunningNotebooks: throwNotInEditMode,
     shutdownSession: throwNotInEditMode,
+    getExportAvailability: throwNotInEditMode,
     exportAsHTML: throwNotInEditMode,
     exportAsIPYNB: throwNotInEditMode,
     exportAsMarkdown: throwNotInEditMode,

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

@@ -63,6 +63,7 @@ export function createErrorToastingRequests(
     getWorkspaceFiles: "Failed to get workspace files",
     getRunningNotebooks: "Failed to get running notebooks",
     shutdownSession: "Failed to shutdown session",
+    getExportAvailability: "", // No toast
     exportAsHTML: "Failed to export HTML",
     exportAsIPYNB: "Failed to export ipynb",
     exportAsMarkdown: "Failed to export Markdown",

package/src/core/network/types.ts

@@ -17,12 +17,23 @@ export type CellConfig = schemas["CellConfig"];
 export type RuntimeState = schemas["CellNotification"]["status"];
 export type CodeCompletionRequest = schemas["CodeCompletionRequest"];
 export type DeleteCellRequest = schemas["DeleteCellRequest"];
+export type AutoExportAsIPYNBRequest = schemas["AutoExportAsIPYNBRequest"];
+export type AutoExportAsMarkdownRequest =
+  schemas["AutoExportAsMarkdownRequest"];
 export type ExportAsHTMLRequest = schemas["ExportAsHTMLRequest"];
 export type ExportAsMarkdownRequest = schemas["ExportAsMarkdownRequest"];
 export type ExportAsIPYNBRequest = schemas["ExportAsIPYNBRequest"];
 export type ExportAsScriptRequest = schemas["ExportAsScriptRequest"];
 export type ExportAsPDFRequest = schemas["ExportAsPDFRequest"];
+export type ExportAvailabilityResponse = schemas["ExportAvailabilityResponse"];
 export type UpdateCellOutputsRequest = schemas["UpdateCellOutputsRequest"];
+
+export interface ExportedFile<T extends BlobPart = BlobPart> {
+  contents: T;
+  filename: string;
+  mediaType: string;
+}
+
 export type FileCopyRequest = schemas["FileCopyRequest"];
 export type FileCopyResponse = schemas["FileCopyResponse"];
 export type FileCreateRequest = schemas["FileCreateRequest"];
@@ -205,13 +216,18 @@ export interface EditRequests {
     request: ShutdownSessionRequest,
   ) => Promise<RunningNotebooksResponse>;
   // Export requests
-  exportAsHTML: (request: ExportAsHTMLRequest) => Promise<string>;
-  exportAsIPYNB: (request: ExportAsIPYNBRequest) => Promise<string>;
-  exportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<string>;
-  exportAsPDF: (request: ExportAsPDFRequest) => Promise<Blob>;
+  getExportAvailability: () => Promise<ExportAvailabilityResponse>;
+  exportAsHTML: (request: ExportAsHTMLRequest) => Promise<ExportedFile<string>>;
+  exportAsIPYNB: (
+    request: ExportAsIPYNBRequest,
+  ) => Promise<ExportedFile<string>>;
+  exportAsMarkdown: (
+    request: ExportAsMarkdownRequest,
+  ) => Promise<ExportedFile<string>>;
+  exportAsPDF: (request: ExportAsPDFRequest) => Promise<ExportedFile<Blob>>;
   autoExportAsHTML: (request: ExportAsHTMLRequest) => Promise<null>;
-  autoExportAsMarkdown: (request: ExportAsMarkdownRequest) => Promise<null>;
-  autoExportAsIPYNB: (request: ExportAsIPYNBRequest) => Promise<null>;
+  autoExportAsMarkdown: (request: AutoExportAsMarkdownRequest) => Promise<null>;
+  autoExportAsIPYNB: (request: AutoExportAsIPYNBRequest) => Promise<null>;
   updateCellOutputs: (request: UpdateCellOutputsRequest) => Promise<null>;
   // Package requests
   getPackageList: () => Promise<ListPackagesResponse>;

package/src/core/rtc/state.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { atomWithStorage } from "jotai/utils";
+import { SCRATCH_CELL_ID, type CellId } from "@/core/cells/ids";
 import { once } from "@/utils/once";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { getFeatureFlag } from "../config/feature-flag";
@@ -23,3 +24,11 @@ export const usernameAtom = atomWithStorage<string>(
 export const isRtcEnabled = once(() => {
   return getFeatureFlag("rtc_v2");
 });
+
+/**
+ * Whether this cell type can participate in real-time collaboration.
+ * Scratchpad cells are local-only.
+ */
+export function canUseRtc(cellId: CellId): boolean {
+  return cellId !== SCRATCH_CELL_ID;
+}

package/src/core/static/download-html.ts

@@ -1,31 +1,22 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { downloadBlob } from "@/utils/download";
-import { Filenames } from "@/utils/filenames";
-import { Paths } from "@/utils/paths";
+import { downloadExportedFile } from "@/utils/download";
 import { getRequestClient } from "../network/requests";
 import { VirtualFileTracker } from "./virtual-file-tracker";
 
 /**
  * Downloads the current notebook as an HTML file.
  */
-export async function downloadAsHTML(opts: {
-  filename: string;
-  includeCode: boolean;
-}) {
+export async function downloadAsHTML(opts: { includeCode: boolean }) {
   const client = getRequestClient();
-  const { filename, includeCode } = opts;
-  const html = await client.exportAsHTML({
+  const { includeCode } = opts;
+  const exportedFile = await client.exportAsHTML({
     download: true,
     includeCode: includeCode,
     files: VirtualFileTracker.INSTANCE.filenames(),
   });
-  const filenameWithoutPath = Paths.basename(filename) ?? "notebook.py";
 
-  downloadBlob(
-    new Blob([html], { type: "text/html" }),
-    Filenames.toHTML(filenameWithoutPath),
-  );
+  downloadExportedFile(exportedFile);
 }
 
 function updateAssetUrl(existingUrl: string, assetBaseUrl: string) {

package/src/core/wasm/bridge.ts

@@ -19,6 +19,7 @@ import type {
   EnvironmentInfo,
   ExportAsHTMLRequest,
   ExportAsMarkdownRequest,
+  ExportedFile,
   FileCopyResponse,
   FileCreateResponse,
   FileDeleteResponse,
@@ -520,7 +521,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
       functionName: "export_html",
       payload: request,
     });
-    return response as string;
+    return response as ExportedFile<string>;
   };
 
   exportAsMarkdown: EditRequests["exportAsMarkdown"] = async (
@@ -530,7 +531,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
       functionName: "export_markdown",
       payload: request,
     });
-    return response as string;
+    return response as ExportedFile<string>;
   };
 
   previewDatasetColumn: EditRequests["previewDatasetColumn"] = async (
@@ -642,6 +643,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
   getWorkspaceFiles = throwNotImplemented;
   getRunningNotebooks = throwNotImplemented;
   shutdownSession = throwNotImplemented;
+  getExportAvailability = throwNotImplemented;
   exportAsIPYNB = throwNotImplemented;
   exportAsPDF = throwNotImplemented;
   autoExportAsHTML = throwNotImplemented;

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

@@ -12,6 +12,7 @@ import type {
   EnvironmentInfo,
   ExportAsHTMLRequest,
   ExportAsMarkdownRequest,
+  ExportedFile,
   FileCopyRequest,
   FileCopyResponse,
   FileCreateRequest,
@@ -96,8 +97,10 @@ export interface RawBridge {
   load_packages(request: string): Promise<string>;
   read_file(request: string): Promise<string>;
   set_interrupt_buffer(request: Uint8Array): Promise<string>;
-  export_html(request: ExportAsHTMLRequest): Promise<string>;
-  export_markdown(request: ExportAsMarkdownRequest): Promise<string>;
+  export_html(request: ExportAsHTMLRequest): Promise<ExportedFile<string>>;
+  export_markdown(
+    request: ExportAsMarkdownRequest,
+  ): Promise<ExportedFile<string>>;
 }
 
 export type BridgePayload<T extends keyof RawBridge> = T extends keyof RawBridge

package/src/css/app/codemirror.css

@@ -90,8 +90,22 @@
     @apply bg-muted border border-border rounded-md px-1;
   }
 
-  .cm-diagnosticText > div {
-    display: inline-flex;
+  /* The message, the docs link, and related info are siblings; stack them. */
+  .cm-lsp-diagnostic-message {
+    @apply flex flex-col items-start gap-1;
+
+    /* Rendered markdown, so the `pre-wrap` on `.cm-diagnostic` would only turn
+       the whitespace between block tags into blank lines. */
+    white-space: normal;
+  }
+
+  .cm-diagnostic-code-link {
+    @apply text-xs;
+  }
+
+  /* The docs link already reads `source(code)`; don't repeat it below. */
+  .cm-diagnostic:has(.cm-diagnostic-code-link) .cm-diagnosticSource {
+    @apply hidden;
   }
 }
 

package/src/plugins/impl/FormPlugin.tsx

@@ -148,7 +148,7 @@ export const FormWrapper = <T,>({
           if (evt.key === "Enter" && (evt.ctrlKey || evt.metaKey)) {
             evt.preventDefault();
             evt.stopPropagation();
-            setValue(newValue);
+            formDiv.current?.requestSubmit();
           }
         }}
       >

package/src/plugins/impl/__tests__/FormPlugin.test.tsx

@@ -0,0 +1,162 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { FormWrapper } from "../FormPlugin";
+
+describe("FormPlugin", () => {
+  it("submits the form on Ctrl+Enter and calls setValue", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(setValue).toHaveBeenCalledWith("new-val");
+    });
+  });
+
+  it("submits the form on Ctrl+Enter and runs validation when shouldValidate is true", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue("Validation failed message");
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={true}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(validate).toHaveBeenCalledWith({ value: "new-val" });
+      // should not submit (setValue not called) due to validation failure
+      expect(setValue).not.toHaveBeenCalled();
+      // error message displayed
+      expect(screen.getByText("Validation failed message")).toBeInTheDocument();
+    });
+  });
+
+  it("clears inputs on submission when clearOnSubmit is true", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    let mockUIElement: (HTMLElement & { reset?: () => void }) | null = null;
+    const mockReset = vi.fn();
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={true}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <div
+          ref={(el) => {
+            if (el && !mockUIElement) {
+              mockUIElement = document.createElement("marimo-ui-element");
+              mockUIElement.setAttribute("data-testid", "mock-ui-element");
+              mockUIElement.reset = mockReset;
+              const inputEl = document.createElement("input");
+              inputEl.type = "text";
+              mockUIElement.appendChild(inputEl);
+              el.appendChild(mockUIElement);
+            }
+          }}
+        />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByRole("textbox");
+
+    // Simulate Ctrl+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", ctrlKey: true });
+
+    await waitFor(() => {
+      expect(setValue).toHaveBeenCalledWith("new-val");
+      expect(mockReset).toHaveBeenCalled();
+    });
+  });
+
+  it("does not submit on Shift+Enter", async () => {
+    const setValue = vi.fn();
+    const validate = vi.fn().mockResolvedValue(null);
+
+    render(
+      <FormWrapper
+        currentValue="old-val"
+        newValue="new-val"
+        setValue={setValue}
+        validate={validate}
+        shouldValidate={false}
+        clearOnSubmit={false}
+        submitButtonLabel="Submit"
+        bordered={true}
+        loading={false}
+        submitButtonDisabled={false}
+        showClearButton={false}
+        clearButtonLabel="Clear"
+        label={null}
+      >
+        <input data-testid="input" />
+      </FormWrapper>,
+    );
+
+    const input = screen.getByTestId("input");
+
+    // Simulate Shift+Enter on input
+    fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
+
+    expect(setValue).not.toHaveBeenCalled();
+    expect(validate).not.toHaveBeenCalled();
+  });
+});

package/src/stories/log-viewer.stories.tsx

@@ -23,37 +23,43 @@ export const Primary: Story = {
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: cellId("cell1"),
+              source: { type: "cell", cellId: cellId("cell1") },
               message: "Hello world!",
             },
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: cellId("cell1"),
+              source: { type: "cell", cellId: cellId("cell1") },
               message: "Running cell...",
             },
             {
               timestamp: Date.now(),
               level: "stdout",
-              cellId: cellId("cell1"),
+              source: { type: "cell", cellId: cellId("cell1") },
               message: "Done!",
             },
             {
               timestamp: Date.now(),
               level: "stderr",
-              cellId: cellId("cell2"),
+              source: { type: "cell", cellId: cellId("cell2") },
               message: "Output is too large!",
             },
             {
               timestamp: Date.now(),
               level: "stderr",
-              cellId: cellId("cell2"),
+              source: { type: "cell", cellId: cellId("cell2") },
               message: "String length is too short.".repeat(100),
             },
+            {
+              timestamp: Date.now(),
+              level: "stderr",
+              source: { type: "lsp", name: "pylsp" },
+              message: "Failed to load plugin 'ruff': not installed",
+            },
             ...Array.from({ length: 100 }).map(() => ({
               timestamp: Date.now(),
               level: "stdout" as const,
-              cellId: cellId("cell1"),
+              source: { type: "cell", cellId: cellId("cell1") } as const,
               message: "Running cell...",
             })),
           ]}