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

package/src/components/storage/__tests__/storage-snippets.test.ts

@@ -44,6 +44,94 @@ describe("read-file snippet", () => {
     `);
   });
 
+  it("huggingface backend (dataset)", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          backendType: "huggingface",
+          entry: {
+            path: "datasets/scikit-learn/Fish/Fish.csv",
+            kind: "file",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "from huggingface_hub import hf_hub_download
+
+      local_path = hf_hub_download(
+          repo_id="scikit-learn/Fish",
+          filename="Fish.csv",
+          repo_type="dataset",
+      )
+
+      with open(local_path, "rb") as f:
+          _data = f.read()
+      _data"
+    `);
+  });
+
+  it("huggingface backend (model)", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          backendType: "huggingface",
+          entry: {
+            path: "google-bert/bert-base-uncased/config.json",
+            kind: "file",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "from huggingface_hub import hf_hub_download
+
+      local_path = hf_hub_download(
+          repo_id="google-bert/bert-base-uncased",
+          filename="config.json",
+          repo_type="model",
+      )
+
+      with open(local_path, "rb") as f:
+          _data = f.read()
+      _data"
+    `);
+  });
+
+  it("huggingface backend returns null for unparsable paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          backendType: "huggingface",
+          entry: {
+            path: "buckets/my-bucket/file.csv",
+            kind: "file",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toBeNull();
+  });
+
+  it("huggingface backend does not misparse a dataset/space root as a model repo", () => {
+    // These paths are missing a filename segment, so they aren't valid
+    // dataset/space repo files. They must not fall through and be treated
+    // as the model repo "datasets/scikit-learn" or "spaces/gradio".
+    for (const path of ["datasets/scikit-learn/Fish", "spaces/gradio/demo"]) {
+      expect(
+        readSnippet.getCode(
+          makeCtx({
+            backendType: "huggingface",
+            entry: { path, kind: "file", size: 100, lastModified: null },
+          }),
+        ),
+      ).toBeNull();
+    }
+  });
+
   it("returns null for directories", () => {
     expect(
       readSnippet.getCode(

package/src/components/storage/components.tsx

@@ -9,6 +9,7 @@ import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?in
 import { DatabaseZapIcon, GlobeIcon, HardDriveIcon } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
 import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
+import HuggingfaceIcon from "@/components/databases/icons/huggingface.svg?inline";
 import { GitHubIcon } from "@/components/icons/github";
 import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
@@ -28,6 +29,7 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
   file: HardDriveIcon,
   "in-memory": DatabaseZapIcon,
   gdrive: { src: GoogleDriveIcon },
+  hf: { src: HuggingfaceIcon },
   github: GitHubIcon,
 };
 

package/src/components/storage/storage-snippets.ts

@@ -27,6 +27,50 @@ function escapeForPythonString(value: string): string {
   return JSON.stringify(value).slice(1, -1);
 }
 
+interface ParsedHfRepoPath {
+  repoType: "model" | "dataset" | "space";
+  repoId: string;
+  filename: string;
+}
+
+// Namespaced prefixes are reserved: they can never be the first segment of a
+// model repo id, so a path like "datasets/org" that is missing a filename
+// must not fall through and be misparsed as the model repo "datasets/org".
+const RESERVED_PREFIXES = new Set(["datasets", "spaces", "buckets"]);
+
+function parseHfRepoPath(path: string): ParsedHfRepoPath | null {
+  const parts = path.split("/").filter(Boolean);
+  if (parts[0] === "datasets" && parts.length >= 4) {
+    return {
+      repoType: "dataset",
+      repoId: `${parts[1]}/${parts[2]}`,
+      filename: parts.slice(3).join("/"),
+    };
+  }
+  if (parts[0] === "spaces" && parts.length >= 4) {
+    return {
+      repoType: "space",
+      repoId: `${parts[1]}/${parts[2]}`,
+      filename: parts.slice(3).join("/"),
+    };
+  }
+  if (parts.length >= 3 && !RESERVED_PREFIXES.has(parts[0])) {
+    return {
+      repoType: "model",
+      repoId: `${parts[0]}/${parts[1]}`,
+      filename: parts.slice(2).join("/"),
+    };
+  }
+  return null;
+}
+
+function hfHubDownloadSnippet(parsed: ParsedHfRepoPath): string {
+  const repoId = escapeForPythonString(parsed.repoId);
+  const filename = escapeForPythonString(parsed.filename);
+  const repoType = escapeForPythonString(parsed.repoType);
+  return `from huggingface_hub import hf_hub_download\n\nlocal_path = hf_hub_download(\n    repo_id="${repoId}",\n    filename="${filename}",\n    repo_type="${repoType}",\n)`;
+}
+
 export const STORAGE_SNIPPETS: StorageSnippet[] = [
   {
     id: "read-file",
@@ -37,6 +81,13 @@ export const STORAGE_SNIPPETS: StorageSnippet[] = [
         return null;
       }
       const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "huggingface") {
+        const parsed = parseHfRepoPath(ctx.entry.path);
+        if (!parsed) {
+          return null;
+        }
+        return `${hfHubDownloadSnippet(parsed)}\n\nwith open(local_path, "rb") as f:\n    _data = f.read()\n_data`;
+      }
       if (ctx.backendType === "obstore") {
         return `_data = ${ctx.variableName}.get("${path}").bytes()\n_data`;
       }
@@ -52,6 +103,13 @@ export const STORAGE_SNIPPETS: StorageSnippet[] = [
         return null;
       }
       const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "huggingface") {
+        const parsed = parseHfRepoPath(ctx.entry.path);
+        if (!parsed) {
+          return null;
+        }
+        return `${hfHubDownloadSnippet(parsed)}\nlocal_path`;
+      }
       if (ctx.backendType === "obstore") {
         if (NOT_SIGNABLE_PROTOCOLS.has(ctx.protocol)) {
           return null;

package/src/core/__tests__/mode.test.ts

@@ -0,0 +1,85 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CellId } from "@/core/cells/ids";
+import { runDuringPresentMode, viewStateAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+
+const requestAnimationFrameMock = vi.fn((callback: FrameRequestCallback) => {
+  callback(0);
+  return 0;
+});
+
+async function runAfterRender(fn: () => void | Promise<void>): Promise<void> {
+  const result = runDuringPresentMode(fn);
+  await vi.runAllTimersAsync();
+  return result;
+}
+
+describe("runDuringPresentMode", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal("requestAnimationFrame", requestAnimationFrameMock);
+    requestAnimationFrameMock.mockClear();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("runs in present mode and restores the captured view state", async () => {
+    const state = { mode: "edit" as const, cellAnchor: CellId.create() };
+    store.set(viewStateAtom, state);
+
+    await runAfterRender(() => {
+      expect(store.get(viewStateAtom)).toEqual({
+        ...state,
+        mode: "present",
+      });
+    });
+
+    expect(store.get(viewStateAtom)).toEqual(state);
+    expect(requestAnimationFrameMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("restores the captured view state when the callback rejects", async () => {
+    const state = { mode: "edit" as const, cellAnchor: CellId.create() };
+    const error = new Error("capture failed");
+    store.set(viewStateAtom, state);
+
+    const result = runDuringPresentMode(() => Promise.reject(error));
+    const rejection = expect(result).rejects.toBe(error);
+    await vi.runAllTimersAsync();
+    await rejection;
+
+    expect(store.get(viewStateAtom)).toEqual(state);
+  });
+
+  it("runs directly when already in present mode", async () => {
+    const state = { mode: "present" as const, cellAnchor: CellId.create() };
+    store.set(viewStateAtom, state);
+
+    await runDuringPresentMode(() => {
+      expect(store.get(viewStateAtom)).toEqual(state);
+    });
+
+    expect(store.get(viewStateAtom)).toEqual(state);
+    expect(requestAnimationFrameMock).not.toHaveBeenCalled();
+  });
+
+  it.each(["read", "home", "gallery"] as const)(
+    "runs directly without changing %s mode",
+    async (mode) => {
+      const state = { mode, cellAnchor: CellId.create() };
+      store.set(viewStateAtom, state);
+
+      await runDuringPresentMode(() => {
+        expect(store.get(viewStateAtom)).toEqual(state);
+      });
+
+      expect(store.get(viewStateAtom)).toEqual(state);
+      expect(requestAnimationFrameMock).not.toHaveBeenCalled();
+    },
+  );
+});

package/src/core/ai/constants.ts

@@ -0,0 +1,7 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Throttle wait (ms) for AI SDK React hooks (`useChat` / `useCompletion`).
+ * Limits UI re-renders while streaming tokens.
+ */
+export const AI_SDK_UI_THROTTLE_MS = 100;

package/src/core/ai/staged-cells.ts

@@ -176,14 +176,17 @@ export function useStagedCells(store: JotaiStore) {
       case "message-metadata":
       case "tool-input-available":
       case "tool-output-available":
+      case "tool-approval-response":
       case "reasoning-start":
       case "reasoning-delta":
       case "reasoning-end":
       case "file":
+      case "reasoning-file":
       case "source-document":
       case "source-url":
       case "tool-input-start":
       case "tool-input-delta":
+      case "custom":
         Logger.debug(chunk.type, { chunk });
         break;
       default:

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

@@ -68,7 +68,7 @@ function getOpts() {
     diagnosticsConfig: {},
     hotkeys: new OverridingHotkeyProvider({}),
     theme: "light",
-    displayConfig: { reference_highlighting: false },
+    displayConfig: { reference_highlighting: false, code_lens: true },
     inlineAiTooltip: false,
   } as const;
 }

package/src/core/codemirror/cm.ts

@@ -82,7 +82,7 @@ export interface CodeMirrorSetupOpts {
   hotkeys: HotkeyProvider;
   lspConfig: LSPConfig;
   diagnosticsConfig: DiagnosticsConfig;
-  displayConfig: Pick<DisplayConfig, "reference_highlighting">;
+  displayConfig: Pick<DisplayConfig, "reference_highlighting" | "code_lens">;
   inlineAiTooltip: boolean;
   /**
    * CSS selector for the element that CodeMirror tooltips (completions, hover,
@@ -200,7 +200,7 @@ export const setupCodeMirror = (opts: CodeMirrorSetupOpts): Extension[] => {
       displayConfig.reference_highlighting ?? true,
     ),
     // Inline icons linking datasources/buckets/caches to their panels
-    codeLensBundle(cellId),
+    codeLensBundle(cellId, displayConfig.code_lens ?? true),
   ];
 };
 

package/src/core/codemirror/code-lens/__tests__/extension.test.ts

@@ -103,7 +103,7 @@ describe("codeLensBundle", () => {
 
   beforeEach(() => {
     vi.useFakeTimers();
-    mockFlags({ editor_code_lens: true, cache_panel: true });
+    mockFlags({ cache_panel: true });
     seedStore({});
   });
 
@@ -141,9 +141,8 @@ describe("codeLensBundle", () => {
     return [...v.dom.querySelectorAll<HTMLElement>(".mo-code-lens")];
   }
 
-  it("returns an empty extension when the flag is off", () => {
-    mockFlags({ editor_code_lens: false });
-    expect(codeLensBundle(cellId("cell1"))).toEqual([]);
+  it("returns an empty extension when disabled via `display.code_lens`", () => {
+    expect(codeLensBundle(cellId("cell1"), false)).toEqual([]);
   });
 
   it("renders a lens at a dataframe declaration", async () => {
@@ -293,7 +292,7 @@ describe("codeLensBundle", () => {
   );
 
   it("does not render cache lenses when the cache panel is disabled", async () => {
-    mockFlags({ editor_code_lens: true, cache_panel: false });
+    mockFlags({ cache_panel: false });
     const v = await mount("@mo.cache\ndef f():\n    return 1");
 
     expect(lenses(v)).toHaveLength(0);

package/src/core/codemirror/code-lens/extension.ts

@@ -281,10 +281,10 @@ const codeLensTheme = EditorView.baseTheme({
 /**
  * Inline icons linking datasource/bucket variables and `mo.cache` /
  * `mo.persistent_cache` calls to their panels.
- * Gated behind the `editor_code_lens` feature flag.
+ * Configurable via the `display.code_lens` user config (on by default).
  */
-export function codeLensBundle(cellId: CellId): Extension {
-  if (!getFeatureFlag("editor_code_lens")) {
+export function codeLensBundle(cellId: CellId, enabled = true): Extension {
+  if (!enabled) {
     return [];
   }
   return [

package/src/core/codemirror/find-replace/search-highlight.ts

@@ -140,11 +140,16 @@ export const searchHighlighter = ViewPlugin.fromClass(
 );
 
 export const highlightTheme = EditorView.baseTheme({
-  "&light .cm-searchMatch": { backgroundColor: "#99ff7780" },
-  "&dark .cm-searchMatch": { backgroundColor: "#22bb0070" },
+  "&light .cm-searchMatch": {
+    backgroundColor: "var(--cm-search-match-background-light)",
+  },
+  "&dark .cm-searchMatch": {
+    backgroundColor: "var(--cm-search-match-background-dark)",
+  },
 
   "&light .cm-searchMatch-selected": { backgroundColor: "transparent" },
   "&dark .cm-searchMatch.cm-searchMatch-selected": {
-    backgroundColor: "#6199ff88 !important",
+    backgroundColor:
+      "var(--cm-search-match-selected-background-dark) !important",
   },
 });

package/src/core/codemirror/language/languages/sql/__tests__/renderers.test.tsx

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import type {
+  DataTable,
+  DataTableColumn,
+  DataType,
+} from "@/core/kernel/messages";
+import { renderColumnInfo, renderTableInfo } from "../renderers";
+
+const geometryColumn = {
+  name: "geom",
+  type: "geometry" as DataType,
+  external_type: "geometry",
+  sample_values: [],
+} as DataTableColumn;
+
+describe("SQL renderers", () => {
+  it("renders table information with an unrecognized column type", () => {
+    const table: DataTable = {
+      name: "shapes",
+      type: "table",
+      source: "local",
+      source_type: "local",
+      num_rows: null,
+      num_columns: 1,
+      variable_name: null,
+      columns: [geometryColumn],
+      primary_keys: [],
+      indexes: [],
+    };
+
+    const result = render(renderTableInfo(table));
+
+    expect(result.container.querySelector("svg")).not.toBeNull();
+  });
+
+  it("renders column information with an unrecognized column type", () => {
+    const result = render(renderColumnInfo(geometryColumn));
+
+    expect(result.container.querySelector("svg")).not.toBeNull();
+  });
+});

package/src/core/codemirror/language/languages/sql/renderers.tsx

@@ -13,7 +13,7 @@ import {
   TableIcon,
   ViewIcon,
 } from "@/components/databases/namespace-icons";
-import { DATA_TYPE_ICON } from "@/components/datasets/icons";
+import { DATA_TYPE_ICON, resolveDataType } from "@/components/datasets/icons";
 import { Badge } from "@/components/ui/badge";
 import {
   type ConnectionName,
@@ -149,7 +149,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
   );
 
   const columnItems = table.columns.map((column) => {
-    const TypeIcon = DATA_TYPE_ICON[column.type];
+    const TypeIcon = DATA_TYPE_ICON[resolveDataType(column.type)];
     return (
       <div
         key={column.name}
@@ -288,7 +288,7 @@ export const renderTableInfo = (table: DataTable): React.ReactNode => {
 };
 
 export const renderColumnInfo = (column: DataTableColumn): React.ReactNode => {
-  const TypeIcon = DATA_TYPE_ICON[column.type];
+  const TypeIcon = DATA_TYPE_ICON[resolveDataType(column.type)];
 
   const typeBadge = (
     <Badge

package/src/core/codemirror/theme/__tests__/light.test.ts

@@ -1,136 +1,72 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { type Tag, tags as t } from "@lezer/highlight";
-import { describe, expect, it } from "vitest";
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { afterEach, describe, expect, it } from "vitest";
+import { darkTheme } from "../dark";
 import { lightTheme } from "../light";
 
-// Helper function to get theme configuration from the source
-const getThemeConfig = () => ({
-  variant: "light",
-  settings: {
-    background: "#ffffff",
-    foreground: "#000000",
-    caret: "#000000",
-    selection: "#d7d4f0",
-    lineHighlight: "#cceeff44",
-    gutterBackground: "var(--color-background)",
-    gutterForeground: "var(--gray-10)",
-  },
-  styles: [
-    { tag: t.comment, color: "#708090" },
-    { tag: t.variableName, color: "#000000" },
-    { tag: [t.string, t.special(t.brace)], color: "#a11" },
-    { tag: t.number, color: "#164" },
-    { tag: t.bool, color: "#219" },
-    { tag: t.null, color: "#219" },
-    { tag: t.keyword, color: "#708", fontWeight: 500 },
-    { tag: t.className, color: "#00f" },
-    { tag: t.definition(t.typeName), color: "#00f" },
-    { tag: t.typeName, color: "#085" },
-    { tag: t.angleBracket, color: "#000000" },
-    { tag: t.tagName, color: "#170" },
-    { tag: t.attributeName, color: "#00c" },
-    { tag: t.operator, color: "#a2f", fontWeight: 500 },
-    { tag: [t.function(t.variableName)], color: "#00c" },
-    { tag: [t.propertyName], color: "#05a" },
-  ],
-});
-
-describe("lightTheme", () => {
-  it("should export a theme", () => {
-    expect(lightTheme).toBeDefined();
-    expect(typeof lightTheme).toBe("object");
-  });
-
-  describe("theme configuration", () => {
-    const config = getThemeConfig();
-
-    it("should have correct basic settings", () => {
-      expect(config.variant).toBe("light");
-      expect(config.settings).toEqual({
-        background: "#ffffff",
-        foreground: "#000000",
-        caret: "#000000",
-        selection: "#d7d4f0",
-        lineHighlight: "#cceeff44",
-        gutterBackground: "var(--color-background)",
-        gutterForeground: "var(--gray-10)",
-      });
-    });
+const mounted: Array<{ host: HTMLDivElement; view: EditorView }> = [];
 
-    describe("syntax highlighting", () => {
-      const findStyle = (tag: Tag | readonly Tag[]) =>
-        config.styles.find((s) =>
-          Array.isArray(s.tag) ? s.tag.includes(tag as Tag) : s.tag === tag,
-        );
+function mountTheme(extension: Extension) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = host.attachShadow({ mode: "open" });
+  const parent = document.createElement("div");
+  root.append(parent);
+  const view = new EditorView({ extensions: extension, parent, root });
+  mounted.push({ host, view });
 
-      it("should style comments", () => {
-        expect(findStyle(t.comment)).toEqual({
-          tag: t.comment,
-          color: "#708090",
-        });
-      });
+  const style = root.querySelector("style");
+  if (!style) {
+    throw new Error("CodeMirror did not mount its theme styles");
+  }
+  return { css: style.textContent ?? "", view };
+}
 
-      it("should style strings", () => {
-        const style = findStyle(t.string);
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#a11");
-        expect(Array.isArray(style?.tag)).toBe(true);
-        expect(style?.tag).toContain(t.string);
-        expect(style?.tag).toContain(t.special(t.brace));
-      });
-
-      it("should style numbers and boolean values", () => {
-        expect(findStyle(t.number)).toEqual({
-          tag: t.number,
-          color: "#164",
-        });
-        expect(findStyle(t.bool)).toEqual({
-          tag: t.bool,
-          color: "#219",
-        });
-      });
-
-      it("should style keywords with emphasis", () => {
-        expect(findStyle(t.keyword)).toEqual({
-          tag: t.keyword,
-          color: "#708",
-          fontWeight: 500,
-        });
-      });
+afterEach(() => {
+  for (const { host, view } of mounted.splice(0)) {
+    view.destroy();
+    host.remove();
+  }
+});
 
-      it("should style operators with emphasis", () => {
-        expect(findStyle(t.operator)).toEqual({
-          tag: t.operator,
-          color: "#a2f",
-          fontWeight: 500,
-        });
-      });
+const themeCases = [
+  {
+    name: "light",
+    extension: lightTheme,
+    dark: false,
+    selectionAlias: "var(--cm-selection-background-light)",
+    reactiveColor: "var(--cm-reactive-reference-color-light)",
+  },
+  {
+    name: "dark",
+    extension: darkTheme,
+    dark: true,
+    selectionAlias: "var(--cm-selection-background-dark)",
+    reactiveColor: "var(--cm-reactive-reference-color-dark)",
+  },
+] as const;
 
-      it("should style class and type names", () => {
-        expect(findStyle(t.className)).toEqual({
-          tag: t.className,
-          color: "#00f",
-        });
-        expect(findStyle(t.typeName)).toEqual({
-          tag: t.typeName,
-          color: "#085",
-        });
-      });
+describe.each(themeCases)("$name theme", (theme) => {
+  it("uses the production theme tokens", () => {
+    const { css, view } = mountTheme(theme.extension);
 
-      it("should style function names", () => {
-        const style = findStyle(t.function(t.variableName));
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#00c");
-        expect(Array.isArray(style?.tag)).toBe(true);
-      });
+    expect(view.state.facet(EditorView.darkTheme)).toBe(theme.dark);
+    expect(css).toContain(
+      `--cm-selection-background: ${theme.selectionAlias};`,
+    );
+    expect(css).toContain("background-color: var(--cm-selection-background);");
+    expect(css).toContain(`color: ${theme.reactiveColor};`);
+    expect(css).toContain(
+      "border-bottom: 2px solid var(--cm-reactive-reference-border-color);",
+    );
 
-      it("should style property names", () => {
-        const style = findStyle(t.propertyName);
-        expect(style).toBeDefined();
-        expect(style?.color).toBe("#05a");
-        expect(Array.isArray(style?.tag)).toBe(true);
-      });
-    });
+    const hoverRule = css
+      .split("\n")
+      .find((rule) => rule.includes(".mo-cm-reactive-reference-hover"));
+    expect(hoverRule).toBeDefined();
+    expect(hoverRule).toContain("cursor: pointer;");
+    expect(hoverRule).not.toContain("border-bottom");
   });
 });