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

package/src/core/MarimoApp.tsx

@@ -39,14 +39,18 @@ const LazyGalleryPage = reactLazyWithPreload(
 );
 
 export function preloadPage(mode: string) {
-  if (mode === "home") {
-    LazyHomePage.preload();
-  } else if (mode === "gallery") {
-    LazyGalleryPage.preload();
-  } else if (mode === "read") {
-    LazyRunPage.preload();
-  } else {
-    LazyEditPage.preload();
+  switch (mode) {
+    case "home":
+      LazyHomePage.preload();
+      break;
+    case "gallery":
+      LazyGalleryPage.preload();
+      break;
+    case "read":
+      LazyRunPage.preload();
+      break;
+    default:
+      LazyEditPage.preload();
   }
 }
 

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

@@ -237,7 +237,7 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
                 fileDetails.contents as Base64String,
                 mimeType,
               );
-              blob = await deserializeBlob(dataURL);
+              blob = deserializeBlob(dataURL);
             } catch {
               // Fallback to treating as text
               blob = new Blob([fileDetails.contents], { type: mimeType });

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

@@ -2561,6 +2561,126 @@ describe("cell reducer", () => {
       expect(state.untouchedNewCells.has(newCellId)).toBe(false);
       expect(exportedForTesting.isCellCodeHidden(state, newCellId)).toBe(true);
     });
+
+    it("can mark an existing cell as untouched", () => {
+      // Create a cell without hideCode (not in untouchedNewCells)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark it as untouched
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched is idempotent", () => {
+      // Create a cell without hideCode
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched multiple times
+      actions.markUntouched({ cellId: newCellId });
+      actions.markUntouched({ cellId: newCellId });
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched does not affect already untouched cells", () => {
+      // Create a cell with hideCode (already in untouchedNewCells)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: true,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+
+      // Calling markUntouched should not change anything
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markTouched and markUntouched can toggle cell state", () => {
+      // Create a cell without hideCode
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+
+      // Initially not untouched
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched
+      actions.markUntouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+
+      // Mark as touched
+      actions.markTouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched again
+      actions.markUntouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched works for markdown cell conversion scenario", () => {
+      // Simulates converting a Python cell to Markdown
+      // 1. Create a regular cell (no hideCode)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const cellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+
+      // Cell starts without hide_code and not in untouchedNewCells
+      expect(state.cellData[cellId].config.hide_code).toBe(false);
+      expect(state.untouchedNewCells.has(cellId)).toBe(false);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(false);
+
+      // 2. Convert to markdown: set hide_code and mark as untouched
+      actions.updateCellConfig({
+        cellId,
+        config: { hide_code: true },
+      });
+      actions.markUntouched({ cellId });
+
+      // Code should NOT be hidden because cell is untouched (user can edit)
+      expect(state.cellData[cellId].config.hide_code).toBe(true);
+      expect(state.untouchedNewCells.has(cellId)).toBe(true);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(false);
+
+      // 3. User blurs the cell (markTouched)
+      actions.markTouched({ cellId });
+
+      // Now code should be hidden
+      expect(state.untouchedNewCells.has(cellId)).toBe(false);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(true);
+    });
   });
 
   describe("releaseCellAtoms", () => {

package/src/core/cells/__tests__/session.test.ts

@@ -7,7 +7,7 @@ import { parseOutline } from "@/core/dom/outline";
 import { MultiColumn, visibleForTesting } from "@/utils/id-tree";
 import { invariant } from "@/utils/invariant";
 import { Logger } from "@/utils/Logger";
-import type { CellId } from "../ids";
+import { type CellId, SETUP_CELL_ID } from "../ids";
 import { notebookStateFromSession } from "../session";
 
 // Mock dependencies
@@ -358,6 +358,42 @@ describe("notebookStateFromSession", () => {
         serializedEditorState: null,
       });
     });
+
+    it("uses SETUP_CELL_ID for setup cell with null id", () => {
+      const notebookCell = {
+        id: null,
+        code: "import marimo as mo",
+        name: "setup",
+        code_hash: null,
+        config: {
+          hide_code: null,
+          disabled: null,
+          column: null,
+        },
+      };
+      const notebook = createNotebook([notebookCell as any]);
+      const result = notebookStateFromSession(null, notebook);
+
+      expect(result).not.toBeNull();
+      invariant(result, "result is null");
+      expect(result.cellIds.inOrderIds).toEqual(
+        MultiColumn.from([[SETUP_CELL_ID]]).inOrderIds,
+      );
+      expect(result.cellData[SETUP_CELL_ID]).toEqual({
+        id: SETUP_CELL_ID,
+        name: "setup",
+        code: "import marimo as mo",
+        edited: false,
+        lastCodeRun: null,
+        lastExecutionTime: null,
+        config: {
+          hide_code: false,
+          disabled: false,
+          column: null,
+        },
+        serializedEditorState: null,
+      });
+    });
   });
 
   describe("both session and notebook scenarios", () => {

package/src/core/cells/cells.ts

@@ -1033,6 +1033,20 @@ const {
 
     return state;
   },
+  markUntouched: (state, action: { cellId: CellId }) => {
+    const { cellId } = action;
+
+    if (!state.untouchedNewCells.has(cellId)) {
+      const nextUntouchedNewCells = new Set(state.untouchedNewCells);
+      nextUntouchedNewCells.add(cellId);
+      return {
+        ...state,
+        untouchedNewCells: nextUntouchedNewCells,
+      };
+    }
+
+    return state;
+  },
   scrollToTarget: (state) => {
     // Scroll to the specified cell and clear the scroll key.
     const scrollKey = state.scrollKey;

package/src/core/cells/session.ts

@@ -6,7 +6,7 @@ import { MultiColumn } from "@/utils/id-tree";
 import { Logger } from "@/utils/Logger";
 import { parseOutline } from "../dom/outline";
 import type { NotebookState } from "./cells";
-import { CellId } from "./ids";
+import { CellId, SETUP_CELL_ID } from "./ids";
 import {
   type CellData,
   type CellRuntimeState,
@@ -20,6 +20,22 @@ const EMPTY_STRING = "";
 type SessionCell = api.Session["NotebookSessionV1"]["cells"][0];
 type NotebookCell = api.Notebook["NotebookV1"]["cells"][0];
 
+/**
+ * Get the cell ID from a cell object.
+ * If the cell has an ID, use it.
+ * If the cell has a name of "setup", use the special SETUP_CELL_ID.
+ * Otherwise, generate a new random ID.
+ */
+function getCellId(cell: { id?: string | null; name?: string | null }): CellId {
+  if (cell.id) {
+    return cell.id as CellId;
+  }
+  if (cell.name === SETUP_CELL_ID) {
+    return SETUP_CELL_ID;
+  }
+  return CellId.create();
+}
+
 function mergeSessionAndNotebookCells(
   session: api.Session["NotebookSessionV1"] | null | undefined,
   notebook: api.Notebook["NotebookV1"] | null | undefined,
@@ -36,9 +52,7 @@ function mergeSessionAndNotebookCells(
   }
 
   if (!session) {
-    const cellIds = (notebook?.cells.map(
-      (cell) => cell.id ?? CellId.create(),
-    ) || []) as CellId[];
+    const cellIds = notebook?.cells.map((cell) => getCellId(cell)) || [];
     return {
       cellIds,
       sessionCellData: new Map(
@@ -57,9 +71,7 @@ function mergeSessionAndNotebookCells(
   }
 
   if (!notebook) {
-    const cellIds = session.cells.map(
-      (cell) => cell.id ?? CellId.create(),
-    ) as CellId[];
+    const cellIds = session.cells.map((cell) => getCellId(cell));
     return {
       cellIds,
       sessionCellData: new Map(
@@ -105,7 +117,7 @@ function mergeSessionAndNotebookCells(
   for (let i = 0; i < notebook.cells.length; i++) {
     const notebookCell = notebook.cells[i];
     if (notebookCell) {
-      const id = (notebookCell.id ?? CellId.create()) as CellId;
+      const id = getCellId(notebookCell);
       mergedCellIdsTyped.push(id);
 
       // Should always be set, but good typing fallback too.

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

@@ -28,6 +28,13 @@ import type { LanguageAdapter } from "../types";
 
 export type MarkdownLanguageAdapterMetadata = MarkdownMetadata;
 
+/**
+ * Default hide_code setting for markdown cells.
+ * When true, the markdown code is hidden after the cell is blurred,
+ * showing only the rendered output.
+ */
+export const MARKDOWN_INITIAL_HIDE_CODE = true;
+
 /**
  * Language adapter for Markdown.
  */

package/src/core/config/feature-flag.tsx

@@ -9,8 +9,6 @@ export interface ExperimentalFeatures {
   markdown: boolean; // Used in playground (community cloud)
   wasm_layouts: boolean; // Used in playground (community cloud)
   rtc_v2: boolean;
-  performant_table_charts: boolean;
-  chat_modes: boolean;
   cache_panel: boolean;
   external_agents: boolean;
   server_side_pdf_export: boolean;
@@ -21,8 +19,6 @@ const defaultValues: ExperimentalFeatures = {
   markdown: true,
   wasm_layouts: false,
   rtc_v2: false,
-  performant_table_charts: false,
-  chat_modes: false,
   cache_panel: false,
   external_agents: import.meta.env.DEV,
   server_side_pdf_export: true,

package/src/core/dom/uiregistry.ts

@@ -51,7 +51,10 @@ export class UIElementRegistry {
 
   set(objectId: UIElementId, value: ValueType): void {
     if (this.entries.has(objectId)) {
-      throw new Error(`UIElement ${objectId} already registered`);
+      Logger.debug(
+        "UIElementRegistry overwriting entry for objectId.",
+        objectId,
+      );
     }
     this.entries.set(objectId, {
       objectId: objectId,

package/src/core/run-app.tsx

@@ -1,11 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
+import { ArrowLeftIcon } from "lucide-react";
 import { useEffect } from "react";
 import { AppContainer } from "@/components/editor/app-container";
 import { AppHeader } from "@/components/editor/header/app-header";
 import { Spinner } from "@/components/icons/spinner";
+import { buttonVariants } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
+import { cn } from "@/utils/cn";
 import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
 import { notebookIsRunningAtom, useCellActions } from "./cells/cells";
 import type { AppConfig } from "./config/config-schema";
@@ -75,15 +78,19 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
       isRunning={isRunning}
       width={appConfig.width}
     >
-      <AppHeader connection={connection} className={"sm:pt-8"}>
+      <AppHeader connection={connection} className="sm:pt-8">
         {galleryHref && (
-          <div className="flex items-center px-6 pt-4">
+          <div className="flex items-center px-6 pt-4 sm:-mt-8">
             <a
               href={galleryHref}
               aria-label="Back to gallery"
-              className="inline-flex items-center"
+              className={cn(
+                buttonVariants({ variant: "text", size: "sm" }),
+                "gap-2 px-0 text-muted-foreground hover:text-foreground",
+              )}
             >
-              <img src="logo.png" alt="marimo logo" className="h-6 w-auto" />
+              <ArrowLeftIcon className="size-4" aria-hidden={true} />
+              <span>Back</span>
             </a>
           </div>
         )}

package/src/core/static/__tests__/files.test.ts

@@ -6,7 +6,7 @@ import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 import { createLoader } from "@/plugins/impl/vega/vega-loader";
 import { Functions } from "@/utils/functions";
 import type { DataURLString } from "@/utils/json/base64";
-import { patchFetch, patchVegaLoader } from "../files";
+import { patchFetch, patchVegaLoader, resolveVirtualFileURL } from "../files";
 
 // Start a tiny server to serve virtual files
 const server = http.createServer((request, response) => {
@@ -350,6 +350,181 @@ describe("patchVegaLoader - loader.load", () => {
   });
 });
 
+describe("resolveVirtualFileURL", () => {
+  // Mock URL.createObjectURL for jsdom environment
+  const mockBlobURLs = new Map<string, Blob>();
+  let blobCounter = 0;
+
+  beforeAll(() => {
+    URL.createObjectURL = vi.fn((blob: Blob) => {
+      const url = `blob:test-${blobCounter++}`;
+      mockBlobURLs.set(url, blob);
+      return url;
+    });
+    URL.revokeObjectURL = vi.fn((url: string) => {
+      mockBlobURLs.delete(url);
+    });
+  });
+
+  afterAll(() => {
+    mockBlobURLs.clear();
+  });
+
+  it("should return a blob URL for virtual files", () => {
+    const virtualFiles = {
+      "/@file/widget.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQgeyByZW5kZXI6ICgpID0+IHt9IH0=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL("/@file/widget.js", virtualFiles);
+
+    expect(result).toMatch(/^blob:/);
+  });
+
+  it("should return the original URL for non-virtual files", () => {
+    const virtualFiles = {};
+
+    const result = resolveVirtualFileURL(
+      "http://example.com/widget.js",
+      virtualFiles,
+    );
+
+    expect(result).toBe("http://example.com/widget.js");
+  });
+
+  it("should handle various URL formats", () => {
+    const virtualFiles = {
+      "/@file/module.js":
+        "data:text/javascript;base64,Y29uc29sZS5sb2coJ3Rlc3QnKQ==" as DataURLString,
+    };
+
+    const testUrls = [
+      "/@file/module.js",
+      "./@file/module.js",
+      "http://example.com/@file/module.js",
+    ];
+
+    for (const url of testUrls) {
+      const result = resolveVirtualFileURL(url, virtualFiles);
+      expect(result).toMatch(/^blob:/);
+    }
+  });
+
+  it("should create blob URL with correct content", async () => {
+    const jsCode = "export default { render: () => {} }";
+    const base64Code = btoa(jsCode);
+    const virtualFiles = {
+      "/@file/test-module.js":
+        `data:text/javascript;base64,${base64Code}` as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL(
+      "/@file/test-module.js",
+      virtualFiles,
+    );
+
+    expect(blobUrl).toMatch(/^blob:/);
+    expect(URL.createObjectURL).toHaveBeenCalled();
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe(jsCode);
+  });
+
+  it("should handle file:// URLs with @file/ paths", () => {
+    const virtualFiles = {
+      "/@file/local-module.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL(
+      "file:///Users/test/@file/local-module.js",
+      virtualFiles,
+    );
+
+    expect(result).toMatch(/^blob:/);
+  });
+
+  it("should handle different MIME types", async () => {
+    const virtualFiles = {
+      "/@file/script.js":
+        "data:application/javascript;base64,Y29uc3QgeCA9IDE=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL("/@file/script.js", virtualFiles);
+
+    // Should still be a valid blob URL
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("const x = 1");
+  });
+
+  it("should handle blob: base URIs correctly", () => {
+    // Mock document.baseURI to simulate blob: protocol
+    const originalBaseURI = document.baseURI;
+    Object.defineProperty(document, "baseURI", {
+      value: "blob:https://example.com/uuid",
+      configurable: true,
+    });
+
+    const virtualFiles = {
+      "/@file/blob-module.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL("/@file/blob-module.js", virtualFiles);
+
+    expect(result).toMatch(/^blob:/);
+
+    // Restore original baseURI
+    Object.defineProperty(document, "baseURI", {
+      value: originalBaseURI,
+      configurable: true,
+    });
+  });
+
+  it("should handle data URLs with no explicit MIME type", async () => {
+    const virtualFiles = {
+      "/@file/generic.bin": "data:;base64,SGVsbG8gV29ybGQ=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL("/@file/generic.bin", virtualFiles);
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("Hello World");
+  });
+
+  it("should match URLs with prefix paths before /@file/", async () => {
+    const virtualFiles = {
+      "/@file/4263-66-yUGhgQXp.js":
+        "data:application/javascript;base64,ZnVuY3Rpb24gcmVuZGVyKCkge30=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL(
+      "https://molab.marimo.app/preview/@file/4263-66-yUGhgQXp.js",
+      virtualFiles,
+    );
+
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("function render() {}");
+  });
+});
+
 describe("maybeGetVirtualFile utility function", () => {
   it("should handle URLs without leading dots correctly", async () => {
     const virtualFiles = {
@@ -370,6 +545,25 @@ describe("maybeGetVirtualFile utility function", () => {
     expect(text2).toBe("test");
   });
 
+  it("should match URLs with prefix paths before /@file/", async () => {
+    const virtualFiles = {
+      "/@file/4263-66-yUGhgQXp.js":
+        "data:application/javascript;base64,ZnVuY3Rpb24gcmVuZGVyKCkge30=" as DataURLString,
+    };
+
+    const unpatch = patchFetch(virtualFiles);
+
+    // Test URL with a prefix path before /@file/
+    const response = await window.fetch(
+      "https://molab.marimo.app/preview/@file/4263-66-yUGhgQXp.js",
+    );
+    const text = await response.text();
+
+    expect(text).toBe("function render() {}");
+
+    unpatch();
+  });
+
   it("should handle complex file:// URLs with nested paths", async () => {
     const virtualFiles = {
       "/@file/nested/data.json":

package/src/core/static/files.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { Loader } from "@/plugins/impl/vega/vega-loader";
+import { deserializeBlob } from "@/utils/blob";
+import type { DataURLString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { getStaticVirtualFiles } from "./static-state";
 import type { StaticVirtualFiles } from "./types";
@@ -120,6 +122,24 @@ function withoutLeadingDot(path: string): string {
   return path.startsWith(".") ? path.slice(1) : path;
 }
 
+/**
+ * Resolve a URL to a blob URL if it's a virtual file, for use with dynamic import().
+ * Unlike fetch, import() can't be patched, so we need to convert data URLs to blob URLs.
+ *
+ * @returns The original URL if not a virtual file, or a blob URL if it is
+ */
+export function resolveVirtualFileURL(
+  url: string,
+  files: StaticVirtualFiles = getStaticVirtualFiles(),
+): string {
+  const vfile = maybeGetVirtualFile(url, files);
+  if (!vfile) {
+    return url;
+  }
+  const blob = deserializeBlob(vfile as DataURLString);
+  return URL.createObjectURL(blob);
+}
+
 function maybeGetVirtualFile(
   url: string,
   files: StaticVirtualFiles,
@@ -130,14 +150,11 @@ function maybeGetVirtualFile(
   }
   const pathname = new URL(url, base).pathname;
 
-  // If if the URL starts with file://, then using the document.baseURI
-  // will not work. In this case, should just chop off from /@file/...
-  if (url.startsWith("file://")) {
-    const indexOfFile = url.indexOf("/@file/");
-    if (indexOfFile !== -1) {
-      url = url.slice(indexOfFile);
-    }
-  }
+  // Extract the /@file/... suffix from the URL or pathname
+  // This handles URLs like https://example.com/prefix/@file/foo.js
+  // or file:///path/to/@file/foo.js
+  const filePathFromUrl = extractFilePath(url);
+  const filePathFromPathname = extractFilePath(pathname);
 
   // Few variations to grab the URL.
   // This can happen if a static file was open at file:// or https://
@@ -145,6 +162,19 @@ function maybeGetVirtualFile(
     files[url] ||
     files[withoutLeadingDot(url)] ||
     files[pathname] ||
-    files[withoutLeadingDot(pathname)]
+    files[withoutLeadingDot(pathname)] ||
+    (filePathFromUrl && files[filePathFromUrl]) ||
+    (filePathFromPathname && files[filePathFromPathname])
   );
 }
+
+/**
+ * Extract the /@file/... path from a URL string
+ */
+function extractFilePath(url: string): string | null {
+  const indexOfFile = url.indexOf("/@file/");
+  if (indexOfFile !== -1) {
+    return url.slice(indexOfFile);
+  }
+  return null;
+}