@marimo-team/frontend 0.25.3-dev91 → 0.25.3-dev94

package/src/components/datasources/datasources.tsx

@@ -702,7 +702,40 @@ const SchemaNode: React.FC<SchemaNodeProps> = (props) => {
   );
 };
 
-const TableList: React.FC<{
+// Kept outside the component because the React Compiler does not yet
+// support try/finally inside component bodies.
+async function loadTableList(
+  sqlTableContext: SQLTableContext,
+  addTableList: ReturnType<typeof useDataSourceActions>["addTableList"],
+  setLoading: (loading: boolean) => void,
+) {
+  setLoading(true);
+  try {
+    const { engine, database, schema, schemaPath } = sqlTableContext;
+    const previewTableList = await PreviewSQLTableList.request({
+      engine: engine,
+      database: database,
+      schema: schema,
+      schemaPath: schemaPath ?? [],
+    });
+
+    if (!previewTableList?.tables) {
+      throw new Error("No tables available");
+    }
+
+    addTableList({
+      tables: previewTableList.tables,
+      sqlTableContext: sqlTableContext,
+    });
+  } finally {
+    setLoading(false);
+  }
+}
+
+/**
+ * This is exported for testing purposes only.
+ */
+export const TableList: React.FC<{
   tables: DataTable[];
   sqlTableContext?: SQLTableContext;
   searchValue?: string;
@@ -731,26 +764,7 @@ const TableList: React.FC<{
   // resets tablesResolved to false).
   const { isPending, error } = useAsyncData(async () => {
     if (!tablesResolved && sqlTableContext) {
-      setTablesLoading(true);
-
-      const { engine, database, schema, schemaPath } = sqlTableContext;
-      const previewTableList = await PreviewSQLTableList.request({
-        engine: engine,
-        database: database,
-        schema: schema,
-        schemaPath: schemaPath ?? [],
-      });
-
-      if (!previewTableList?.tables) {
-        setTablesLoading(false);
-        throw new Error("No tables available");
-      }
-
-      addTableList({
-        tables: previewTableList.tables,
-        sqlTableContext: sqlTableContext,
-      });
-      setTablesLoading(false);
+      await loadTableList(sqlTableContext, addTableList, setTablesLoading);
     }
   }, [tablesResolved, sqlTableContext]);
 

package/src/components/editor/SortableCell.tsx

@@ -71,7 +71,6 @@ export const SortableCell = React.forwardRef(
     return (
       <SortableCellInternal
         ref={ref}
-        cellId={cellId}
         canMoveX={canMoveX}
         {...props}
         attributes={attributes}
@@ -86,7 +85,7 @@ export const SortableCell = React.forwardRef(
 );
 SortableCell.displayName = "SortableCell";
 
-interface SortableCellInternalProps extends Props {
+interface SortableCellInternalProps extends Omit<Props, "cellId"> {
   children: React.ReactNode;
   attributes: DraggableAttributes;
   listeners: SyntheticListenerMap | undefined;
@@ -99,7 +98,6 @@ interface SortableCellInternalProps extends Props {
 const SortableCellInternal = React.forwardRef(
   (
     {
-      cellId,
       canMoveX,
       children,
       attributes,

package/src/components/editor/chrome/wrapper/footer-items/runtime-settings.tsx

@@ -26,13 +26,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
 import { FooterItem } from "../footer-item";
 
-interface RuntimeSettingsProps {
-  className?: string;
-}
-
-export const RuntimeSettings: React.FC<RuntimeSettingsProps> = ({
-  className,
-}) => {
+export const RuntimeSettings: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
   const [config, setUserConfig] = useResolvedMarimoConfig();
 

package/src/components/editor/chrome/wrapper/storage.ts

@@ -15,7 +15,7 @@ let storedValue: string | null = null;
  */
 export function createStorage(location: "left" | "bottom"): PanelGroupStorage {
   return {
-    getItem(name) {
+    getItem(_name) {
       if (!storedValue) {
         return storedValue ?? null;
       }

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -274,7 +274,7 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
     return (
       <div
         className="inline-block cursor-pointer text-destructive hover:underline"
-        onClick={(_) => {
+        onClick={() => {
           getRequestClient().openFile({
             path: info.filePath,
             lineNumber: info.lineNumber,

package/src/components/icons/spinner.tsx

@@ -25,7 +25,7 @@ const spinnerVariants = cva("animate-spin", {
 const Spinner = React.forwardRef<
   SVGSVGElement,
   React.SVGProps<SVGSVGElement> & VariantProps<typeof spinnerVariants>
->(({ className, children, centered, size, ...props }, ref) => (
+>(({ className, children: _children, centered, size, ...props }, ref) => (
   <Loader2Icon
     ref={ref}
     className={cn(spinnerVariants({ centered, size }), className)}

package/src/components/ui/alert-dialog.tsx

@@ -28,7 +28,7 @@ AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, children, ...props }, ref) => (
+>(({ className, children: _children, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-xs transition-opacity animate-in fade-in",

package/src/core/ai/context/providers/datasource.ts

@@ -98,8 +98,12 @@ export class DatasourceContextProvider extends AIContextProvider<DatasourceConte
   public formatContext(item: DatasourceContextItem): string {
     const data = item.data;
     // Remove certain fields that are not needed in the context
-    const { name, display_name, source, ...filteredDatasource } =
-      data.connection;
+    const {
+      name,
+      display_name: _displayName,
+      source: _source,
+      ...filteredDatasource
+    } = data.connection;
 
     let datasource = filteredDatasource;
     const isInternalEngine = INTERNAL_SQL_ENGINES.has(name as ConnectionName);

package/src/core/cells/session.ts

@@ -56,7 +56,7 @@ function mergeSessionAndNotebookCells(
     return {
       cellIds,
       sessionCellData: new Map(
-        cellIds.map((id, idx) => [id, null] as [CellId, SessionCell | null]),
+        cellIds.map((id) => [id, null] as [CellId, SessionCell | null]),
       ),
       notebookCellData: new Map(
         cellIds.map(

package/src/core/codemirror/__tests__/setup.test.ts

@@ -100,7 +100,7 @@ function getDuplicateKeymaps(state: EditorState) {
     (keymap) => keymap,
   );
   const duplicates = Objects.fromEntries(
-    Object.entries(groupBy).filter(([key, value]) => value.length > 1),
+    Object.entries(groupBy).filter(([_key, value]) => value.length > 1),
   );
   return duplicates;
 }

package/src/core/codemirror/keymaps/vim.ts

@@ -369,7 +369,7 @@ class CodeMirrorVimSync {
       // We use onIdle to keep the focused editor snappy
       onIdle(() => {
         if (!skipBroadcast) {
-          this.broadcastModeChange(instance, e.mode, e.subMode);
+          this.broadcastModeChange(instance, e.mode);
         }
         this.isBroadcasting = false;
       });
@@ -380,11 +380,7 @@ class CodeMirrorVimSync {
     this.instances.delete(instance);
   }
 
-  public broadcastModeChange(
-    originInstance: EditorView,
-    mode: string,
-    subMode?: string,
-  ) {
+  public broadcastModeChange(originInstance: EditorView, mode: string) {
     invariant(
       "exitInsertMode" in Vim,
       "Vim does not have an exitInsertMode method",

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

@@ -73,7 +73,7 @@ export class MarkdownLanguageAdapter implements LanguageAdapter<MarkdownLanguage
     _cellId: CellId,
     _completionConfig: CompletionConfig,
     hotkeys: HotkeyProvider,
-    _: PlaceholderType,
+    _placeholderType: PlaceholderType,
   ): Extension[] {
     const markdownLanguageData = markdown().language.data;
     let view: EditorView | undefined;

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

@@ -157,7 +157,7 @@ const pylspClient = once((lspConfig: LSPConfig) => {
   return notebookClient;
 });
 
-const tyLspClient = once((_: LSPConfig) => {
+const tyLspClient = once((_config: LSPConfig) => {
   // oxlint-disable-next-line prefer-const -- reassigned after closure capture
   let resyncCallback: (() => Promise<void>) | undefined;
 
@@ -176,7 +176,7 @@ const tyLspClient = once((_: LSPConfig) => {
   const notebookClient = new NotebookLanguageServerClient(
     new LanguageServerClient({
       ...lspClientOpts,
-      getWorkspaceConfiguration: (_) => [{ disableLanguageServices: true }],
+      getWorkspaceConfiguration: () => [{ disableLanguageServices: true }],
     }),
     {},
   );
@@ -226,7 +226,7 @@ const pyreflyClient = once(
   },
 );
 
-const pyrightClient = once((_: LSPConfig) => {
+const pyrightClient = once((_config: LSPConfig) => {
   // oxlint-disable-next-line prefer-const -- reassigned after closure capture
   let resyncCallback: (() => Promise<void>) | undefined;
 

package/src/core/document/__tests__/draft.test.ts

@@ -0,0 +1,322 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import {
+  acknowledge,
+  createCell,
+  deleteCell,
+  type Draft,
+  type EditableCell,
+  editCell,
+  EMPTY_DRAFT,
+  setOrder,
+  toChanges,
+  viewDocument,
+} from "../draft";
+import { cell, CONFIG, document, withCells } from "./fixtures";
+
+const confirmed = document();
+
+function edits(...steps: Parameters<typeof editCell>[3][]): Draft {
+  return steps.reduce(
+    (draft, edit) => editCell(confirmed, draft, "c1", edit),
+    EMPTY_DRAFT,
+  );
+}
+
+describe("editCell", () => {
+  it("lets later fields win and merges config field by field", () => {
+    const draft = edits(
+      { code: "a", config: { hide_code: true } },
+      { name: "n", config: { column: 1, hide_code: undefined } },
+    );
+    expect(viewDocument(confirmed, draft).cells.get("c1")).toEqual({
+      id: "c1",
+      code: "a",
+      name: "n",
+      config: { ...CONFIG, hide_code: true, column: 1 },
+    });
+  });
+
+  it("keeps a reversal to the confirmed value as a draft", () => {
+    const draft = edits({ code: "local" }, { code: "x = 1" });
+    const remote = withCells(confirmed, { c1: cell("c1", "earlier edit") });
+    expect(viewDocument(remote, draft).cells.get("c1")?.code).toBe("x = 1");
+  });
+
+  it("accepts empty strings, false and null while ignoring undefined", () => {
+    const draft = edits(
+      { code: "", config: { column: 1, disabled: true } },
+      {
+        code: undefined,
+        config: { column: null, disabled: false, hide_code: undefined },
+      },
+    );
+    expect(viewDocument(confirmed, draft).cells.get("c1")).toEqual({
+      id: "c1",
+      code: "",
+      name: "_",
+      config: CONFIG,
+    });
+  });
+});
+
+describe("createCell and deleteCell", () => {
+  it("fills protocol defaults and places the cell in the view", () => {
+    const atEnd = createCell(EMPTY_DRAFT, { id: "c3", code: "3" });
+    const after = createCell(
+      EMPTY_DRAFT,
+      { id: "c3", code: "3" },
+      { after: "c1" },
+    );
+    const before = createCell(
+      EMPTY_DRAFT,
+      { id: "c3", code: "3" },
+      { before: "c1" },
+    );
+    const orphan = createCell(
+      EMPTY_DRAFT,
+      { id: "c3", code: "3" },
+      { after: "gone" },
+    );
+    expect(viewDocument(confirmed, atEnd).order).toEqual(["c1", "c2", "c3"]);
+    expect(viewDocument(confirmed, after).order).toEqual(["c1", "c3", "c2"]);
+    expect(viewDocument(confirmed, before).order).toEqual(["c3", "c1", "c2"]);
+    expect(viewDocument(confirmed, orphan).order).toEqual(["c1", "c2", "c3"]);
+    expect(viewDocument(confirmed, atEnd).cells.get("c3")).toEqual({
+      id: "c3",
+      code: "3",
+      name: "_",
+      config: CONFIG,
+    });
+  });
+
+  it("forgets a created cell when it is deleted", () => {
+    const draft = deleteCell(
+      createCell(EMPTY_DRAFT, { id: "c3", code: "" }),
+      "c3",
+    );
+    expect(toChanges(confirmed, draft)).toEqual([]);
+    expect(viewDocument(confirmed, draft).order).toEqual(["c1", "c2"]);
+  });
+});
+
+describe("viewDocument", () => {
+  it("preserves withheld source separately from an empty cell", () => {
+    const hidden = cell("c1", "", { code: null });
+    const empty = cell("c2", "");
+    const source = withCells(confirmed, { c1: hidden, c2: empty });
+    expect(viewDocument(source, EMPTY_DRAFT)).toEqual({
+      order: ["c1", "c2"],
+      cells: new Map([
+        ["c1", hidden],
+        ["c2", empty],
+      ]),
+    });
+    expect(toChanges(source, EMPTY_DRAFT)).toEqual([]);
+  });
+
+  it("follows the host for untouched fields, cells and order", () => {
+    const draft = edits({ code: "local", config: { hide_code: true } });
+    const remote = withCells(
+      confirmed,
+      {
+        c1: cell("c1", "remote", {
+          name: "renamed",
+          config: { ...CONFIG, disabled: true },
+          version: 2,
+        }),
+        c2: cell("c2", "remote too"),
+      },
+      ["c2", "c1"],
+    );
+    expect(viewDocument(remote, draft)).toEqual({
+      order: ["c2", "c1"],
+      cells: new Map<string, EditableCell | undefined>([
+        [
+          "c1",
+          {
+            id: "c1",
+            code: "local",
+            name: "renamed",
+            config: { ...CONFIG, disabled: true, hide_code: true },
+          },
+        ],
+        ["c2", remote.cells.get("c2")],
+      ]),
+    });
+  });
+});
+
+describe("toChanges", () => {
+  it.each([{ name: "renamed" }, { config: { hide_code: true } }])(
+    "withholds the whole request when an edited cell lacks source: %o",
+    (edit) => {
+      const hidden = withCells(confirmed, {
+        c1: cell("c1", "", { code: null }),
+      });
+      const created = createCell(EMPTY_DRAFT, { id: "c3", code: "" });
+      const draft = editCell(hidden, created, "c1", edit);
+      expect(toChanges(hidden, draft)).toBeNull();
+      expect(viewDocument(hidden, draft).cells.get("c1")?.code).toBeNull();
+    },
+  );
+
+  it.each(["replacement", ""])(
+    "uses explicitly supplied source %j when the host withholds it",
+    (code) => {
+      const hidden = withCells(confirmed, {
+        c1: cell("c1", "", { code: null }),
+      });
+      const draft = editCell(hidden, EMPTY_DRAFT, "c1", {
+        name: "renamed",
+        code,
+      });
+      expect(toChanges(hidden, draft)).toEqual([
+        {
+          kind: "put_cell",
+          base_etag: "c1-etag",
+          cell: { id: "c1", code, name: "renamed", config: CONFIG },
+        },
+      ]);
+    },
+  );
+
+  it("can delete and reorder cells without their source", () => {
+    const hidden = withCells(confirmed, {
+      c1: cell("c1", "", { code: null }),
+      c2: cell("c2", "", { code: null }),
+    });
+    expect(toChanges(hidden, deleteCell(EMPTY_DRAFT, "c1"))).toEqual([
+      { kind: "delete_cell", id: "c1", base_etag: "c1-etag" },
+    ]);
+    expect(toChanges(hidden, setOrder(EMPTY_DRAFT, ["c2", "c1"]))).toEqual([
+      { kind: "set_order", base_etag: "order-1", order: ["c2", "c1"] },
+    ]);
+  });
+
+  it("is empty for an empty draft and omits puts that change nothing", () => {
+    expect(toChanges(confirmed, EMPTY_DRAFT)).toEqual([]);
+    expect(
+      toChanges(confirmed, edits({ code: "local" }, { code: "x = 1" })),
+    ).toEqual([]);
+  });
+
+  it("puts the merged cell against the confirmed etag", () => {
+    const draft = edits({ code: "local" });
+    const remote = withCells(confirmed, {
+      c1: cell("c1", "remote", { name: "renamed", etag: "c1-etag-2" }),
+    });
+    expect(toChanges(remote, draft)).toEqual([
+      {
+        kind: "put_cell",
+        base_etag: "c1-etag-2",
+        cell: { id: "c1", code: "local", name: "renamed", config: CONFIG },
+      },
+    ]);
+  });
+
+  it.each([{ after: "c3" }, { before: "c3" }])(
+    "can anchor to a cell created earlier in the request: %o",
+    (placement) => {
+      let draft = createCell(EMPTY_DRAFT, { id: "c3", code: "3" });
+      draft = createCell(draft, { id: "c4", code: "4" }, placement);
+      expect(toChanges(confirmed, draft)).toEqual([
+        {
+          kind: "put_cell",
+          base_etag: null,
+          cell: { id: "c3", code: "3", name: "_", config: CONFIG },
+        },
+        {
+          kind: "put_cell",
+          base_etag: null,
+          cell: { id: "c4", code: "4", name: "_", config: CONFIG },
+          ...placement,
+        },
+      ]);
+    },
+  );
+
+  it.each([{ after: "c2" }, { before: "c2" }])(
+    "omits an anchor deleted earlier in the request: %o",
+    (placement) => {
+      let draft = deleteCell(EMPTY_DRAFT, "c2");
+      draft = createCell(draft, { id: "c3", code: "3" }, placement);
+      expect(toChanges(confirmed, draft)).toEqual([
+        { kind: "delete_cell", id: "c2", base_etag: "c2-etag" },
+        {
+          kind: "put_cell",
+          base_etag: null,
+          cell: { id: "c3", code: "3", name: "_", config: CONFIG },
+        },
+      ]);
+    },
+  );
+
+  it("creates, deletes, then sets the reconciled order", () => {
+    let draft = setOrder(EMPTY_DRAFT, ["c2", "c1"]);
+    draft = createCell(draft, { id: "c3", code: "3" }, { after: "c2" });
+    draft = deleteCell(draft, "c1");
+    expect(toChanges(confirmed, draft)).toEqual([
+      {
+        kind: "put_cell",
+        base_etag: null,
+        cell: { id: "c3", code: "3", name: "_", config: CONFIG },
+        after: "c2",
+      },
+      { kind: "delete_cell", id: "c1", base_etag: "c1-etag" },
+      { kind: "set_order", base_etag: "order-1", order: ["c2", "c3"] },
+    ]);
+  });
+});
+
+describe("acknowledge", () => {
+  it("releases accepted fields independently, keeping later code and config edits", () => {
+    const sent = edits({
+      code: "sent",
+      config: { hide_code: true, column: 1 },
+    });
+    const later = editCell(confirmed, sent, "c1", {
+      code: "typed more",
+      config: { column: 2 },
+    });
+    const remote = withCells(confirmed, {
+      c1: cell("c1", "remote", { config: { ...CONFIG, column: 1 } }),
+    });
+    expect(
+      viewDocument(remote, acknowledge(later, sent)).cells.get("c1"),
+    ).toEqual({
+      id: "c1",
+      code: "typed more",
+      name: "_",
+      config: { ...CONFIG, column: 2 },
+    });
+  });
+
+  it("turns an accepted creation into an edit of only the fields changed since", () => {
+    const sent = createCell(EMPTY_DRAFT, { id: "c3", code: "3" });
+    const later = editCell(confirmed, sent, "c3", { name: "named" });
+    const remote = withCells(confirmed, { c3: cell("c3", "remote code") });
+    expect(toChanges(remote, acknowledge(later, sent))).toEqual([
+      {
+        kind: "put_cell",
+        base_etag: "c3-etag",
+        cell: { id: "c3", code: "remote code", name: "named", config: CONFIG },
+      },
+    ]);
+  });
+
+  it("releases an accepted order but preserves a subsequent reorder", () => {
+    const sent = setOrder(EMPTY_DRAFT, ["c2", "c1"]);
+    const later = setOrder(sent, ["c1", "c2"]);
+    const remote = withCells(confirmed, {}, ["c2", "c1"]);
+    expect(toChanges(remote, acknowledge(sent, sent))).toEqual([]);
+    expect(toChanges(remote, acknowledge(later, sent))).toEqual([
+      {
+        kind: "set_order",
+        base_etag: remote.revision.order_etag,
+        order: ["c1", "c2"],
+      },
+    ]);
+  });
+});

package/src/core/document/__tests__/fixtures.ts

@@ -0,0 +1,92 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { Document } from "../../host/resources/document";
+import type * as Protocol from "@marimo-team/client/protocol";
+
+export const CONFIG: Protocol.CellConfig = {
+  column: null,
+  disabled: false,
+  hide_code: false,
+  expand_output: false,
+};
+
+export function cell(
+  id: Protocol.CellId,
+  code: string,
+  overrides: Partial<Protocol.Cell> = {},
+): Protocol.Cell {
+  return {
+    id,
+    notebook_id: "n1",
+    code,
+    name: "_",
+    config: CONFIG,
+    etag: `${id}-etag`,
+    code_hash: `${id}-hash`,
+    version: 1,
+    ...overrides,
+  };
+}
+
+/** A two-cell document, `c1` then `c2`. */
+export function document(notebookId: Protocol.NotebookId = "n1"): Document {
+  const cells = [
+    cell("c1", "x = 1", { notebook_id: notebookId }),
+    cell("c2", "y = 2", { notebook_id: notebookId }),
+  ];
+  return {
+    revision: {
+      notebook_id: notebookId,
+      order: cells.map((c) => c.id),
+      app_config: { width: "medium" },
+      etag: "document-1",
+      saved_etag: "document-1",
+      order_etag: "order-1",
+      app_config_etag: "config-1",
+      version: 1,
+    },
+    cells: new Map(cells.map((c) => [c.id, c])),
+  };
+}
+
+/** The document with some cells replaced or removed and the order updated. */
+export function withCells(
+  base: Document,
+  changes: Record<Protocol.CellId, Protocol.Cell | null>,
+  order?: readonly Protocol.CellId[],
+): Document {
+  const cells = new Map(base.cells);
+  for (const [id, next] of Object.entries(changes)) {
+    if (next === null) {
+      cells.delete(id);
+    } else {
+      cells.set(id, next);
+    }
+  }
+  const nextOrder = order
+    ? [...order]
+    : [
+        ...base.revision.order.filter((id) => cells.has(id)),
+        ...[...cells.keys()].filter((id) => !base.cells.has(id)),
+      ];
+  const orderChanged =
+    nextOrder.length !== base.revision.order.length ||
+    nextOrder.some((id, index) => id !== base.revision.order[index]);
+  const orderEtag = orderChanged
+    ? `order:${JSON.stringify(nextOrder)}`
+    : base.revision.order_etag;
+  return {
+    revision: {
+      ...base.revision,
+      order: nextOrder,
+      order_etag: orderEtag,
+      version: base.revision.version + 1,
+      etag: JSON.stringify([
+        orderEtag,
+        base.revision.app_config_etag,
+        ...nextOrder.map((id) => cells.get(id)?.etag),
+      ]),
+    },
+    cells,
+  };
+}