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

package/src/components/editor/connections/storage/__tests__/as-code.test.ts

@@ -309,6 +309,26 @@ describe("generateStorageCode", () => {
     });
   });
 
+  describe("Hugging Face", () => {
+    it("default connection", () => {
+      expect(
+        generateStorageCode({ type: "huggingface" }, { library: "fsspec" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with token from secrets", () => {
+      expect(
+        generateStorageCode(
+          {
+            type: "huggingface",
+            token: prefixSecret("HF_TOKEN"),
+          },
+          { library: "fsspec" },
+        ),
+      ).toMatchSnapshot();
+    });
+  });
+
   describe("invalid cases", () => {
     it("throws for empty S3 bucket", () => {
       expect(() =>

package/src/components/editor/connections/storage/add-storage-form.tsx

@@ -17,6 +17,7 @@ import {
   CoreWeaveStorageSchema,
   GCSStorageSchema,
   GoogleDriveStorageSchema,
+  HuggingfaceStorageSchema,
   S3StorageSchema,
   type StorageConnection,
 } from "./schemas";
@@ -79,6 +80,15 @@ const STORAGE_PROVIDERS = [
       preferred: "fsspec",
     },
   },
+  {
+    name: "Hugging Face Hub",
+    schema: HuggingfaceStorageSchema,
+    protocol: "hf",
+    storageLibraries: {
+      libraries: ["huggingface_hub"],
+      preferred: "huggingface_hub",
+    },
+  },
 ] satisfies StorageProviderSchema[];
 
 const StorageProviderSelector: React.FC<{

package/src/components/editor/connections/storage/as-code.ts

@@ -10,7 +10,7 @@ import {
   StorageConnectionSchema,
 } from "./schemas";
 
-export type StorageLibrary = "obstore" | "fsspec";
+export type StorageLibrary = "obstore" | "fsspec" | "huggingface_hub";
 
 export interface StorageCodeOptions {
   library: StorageLibrary;
@@ -20,6 +20,7 @@ export interface StorageCodeOptions {
 export const StorageLibraryDisplayNames: Record<StorageLibrary, string> = {
   obstore: "obstore",
   fsspec: "fsspec",
+  huggingface_hub: "huggingface_hub",
 };
 
 class SecretContainer {
@@ -245,6 +246,20 @@ function generateGDriveCode(
   return { imports, code };
 }
 
+function generateHuggingfaceCode(
+  connection: Extract<StorageConnection, { type: "huggingface" }>,
+  secrets: SecretContainer,
+): { imports: Set<string>; code: string } {
+  const imports = new Set(["from huggingface_hub import HfApi"]);
+
+  if (!connection.token) {
+    return { imports, code: "hf = HfApi()" };
+  }
+
+  const token = secrets.print("token", connection.token);
+  return { imports, code: `hf = HfApi(token=${token})` };
+}
+
 export function generateStorageCode(
   connection: StorageConnection,
   options: StorageCodeOptions,
@@ -273,6 +288,9 @@ export function generateStorageCode(
         isEmbedded: options.isEmbedded,
       });
       break;
+    case "huggingface":
+      result = generateHuggingfaceCode(connection, secrets);
+      break;
     default:
       assertNever(connection);
   }

package/src/components/editor/connections/storage/schemas.ts

@@ -220,12 +220,31 @@ export const GoogleDriveStorageSchema = z
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 
+export const HuggingfaceStorageSchema = z
+  .object({
+    type: z.literal("huggingface"),
+    token: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Access Token",
+          description:
+            "Leave empty to use the HF_TOKEN environment variable or cached login",
+          inputType: "password",
+          optionRegex: "(hf.?token|hugging.?face.?token|hub.?token)",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
 export const StorageConnectionSchema = z.discriminatedUnion("type", [
   S3StorageSchema,
   GCSStorageSchema,
   AzureStorageSchema,
   CoreWeaveStorageSchema,
   GoogleDriveStorageSchema,
+  HuggingfaceStorageSchema,
 ]);
 
 export type StorageConnection = z.infer<typeof StorageConnectionSchema>;

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