@marimo-team/islands 0.23.9-dev4 → 0.23.9-dev6

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

@@ -17,15 +17,17 @@ import { Button } from "@/components/ui/button";
 import { Kbd } from "@/components/ui/kbd";
 import { ExternalLink } from "@/components/ui/links";
 import type { CellId } from "@/core/cells/ids";
+import { renderHTML } from "@/plugins/core/RenderHTML";
+import { splitMangledLocals } from "@/utils/local-variables";
 import type { MarimoError } from "../../../core/kernel/messages";
 import { cn } from "../../../utils/cn";
 import { Alert, AlertTitle } from "../../ui/alert";
 import { openPackageManager } from "../chrome/panels/packages-utils";
 import { useChromeActions } from "../chrome/state";
 import { AutoFixButton } from "../errors/auto-fix";
+import { MangledSegments } from "../errors/mangled-local-chip";
 import { CellLinkError } from "../links/cell-link";
 import { processTextForUrls } from "./console/text-rendering";
-import { renderHTML } from "@/plugins/core/RenderHTML";
 
 const Tip = (props: {
   title?: string;
@@ -454,10 +456,13 @@ export const MarimoErrorOutput = ({
               error.exception_type === "NameError" &&
               error.msg.startsWith("name '_")
             ) {
+              const segments = splitMangledLocals(error.msg);
               return (
                 <li className="my-2" key={`exception-${idx}`}>
                   <div>
-                    <p className="text-muted-foreground">{error.msg}</p>
+                    <p className="text-muted-foreground">
+                      <MangledSegments segments={segments} />
+                    </p>
                     <p className="text-muted-foreground mt-2">
                       Variables prefixed with an underscore are local to a cell{" "}
                       (

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

@@ -36,6 +36,10 @@ import { isWasm } from "@/core/wasm/utils";
 import { renderHTML } from "@/plugins/core/RenderHTML";
 import { sanitizeHtml } from "@/plugins/core/sanitize-html";
 import { copyToClipboard } from "@/utils/copy";
+import {
+  containsMangledLocal,
+  splitMangledLocals,
+} from "@/utils/local-variables";
 import {
   elementContainsMarimoCellFile,
   extractAllTracebackInfo,
@@ -43,6 +47,7 @@ import {
 } from "@/utils/traceback";
 import { cn } from "../../../utils/cn";
 import { AIFixButton } from "../errors/auto-fix";
+import { MangledSegments } from "../errors/mangled-local-chip";
 import { CellLinkTraceback } from "../links/cell-link";
 import type { OnRefactorWithAI } from "../Output";
 
@@ -64,7 +69,11 @@ export const MarimoTracebackOutput = ({
 }: Props): JSX.Element => {
   const htmlTraceback = renderHTML({
     html: traceback,
-    additionalReplacements: [replaceTracebackFilenames, replaceTracebackPrefix],
+    additionalReplacements: [
+      replaceTracebackFilenames,
+      replaceTracebackPrefix,
+      replaceMangledLocal,
+    ],
   });
   const [expanded, setExpanded] = useState(true);
 
@@ -94,6 +103,9 @@ export const MarimoTracebackOutput = ({
   };
 
   const [error, errorMessage] = lastTracebackLine.split(":", 2);
+  const errorMessageSegments = errorMessage
+    ? splitMangledLocals(errorMessage)
+    : [];
 
   return (
     <div className="flex flex-col gap-2 min-w-full w-fit">
@@ -111,7 +123,7 @@ export const MarimoTracebackOutput = ({
             />
             <div className="text-sm inline font-mono">
               <span className="text-destructive">{error || "Error"}:</span>{" "}
-              {errorMessage}
+              <MangledSegments segments={errorMessageSegments} />
             </div>
           </div>
           <AccordionContent className="text-muted-foreground px-4 pt-2 text-xs overflow-auto">
@@ -249,6 +261,23 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
   }
 };
 
+/**
+ * Replace any cell-local mangled name (`_cell_<id>_<name>`) inside a text
+ * node with a {@link MangledLocalChip}. The mangled name appears in both
+ * the final `NameError:` line and inside compiled-cell source lines because
+ * the compiler rewrites underscore-prefixed references at AST-visit time.
+ */
+export const replaceMangledLocal = (domNode: DOMNode) => {
+  if (!(domNode instanceof Text) || !domNode.nodeValue) {
+    return;
+  }
+  if (!containsMangledLocal(domNode.nodeValue)) {
+    return;
+  }
+  const segments = splitMangledLocals(domNode.nodeValue);
+  return <MangledSegments segments={segments} />;
+};
+
 export const replaceTracebackPrefix = (domNode: DOMNode) => {
   if (
     domNode instanceof Text &&

package/src/plugins/impl/DataTablePlugin.tsx

@@ -190,6 +190,7 @@ interface Data<T> {
   fieldTypes?: FieldTypesWithExternalType | null;
   freezeColumnsLeft?: string[];
   freezeColumnsRight?: string[];
+  hiddenColumns?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
   headerTooltip?: Record<string, string>;
@@ -265,6 +266,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       rowHeaders: columnToFieldTypesSchema,
       freezeColumnsLeft: z.array(z.string()).optional(),
       freezeColumnsRight: z.array(z.string()).optional(),
+      hiddenColumns: z.array(z.string()).optional(),
       textJustifyColumns: z
         .record(z.string(), z.enum(["left", "center", "right"]))
         .optional(),
@@ -814,6 +816,7 @@ const DataTableComponent = ({
   reloading,
   freezeColumnsLeft,
   freezeColumnsRight,
+  hiddenColumns,
   textJustifyColumns,
   wrappedColumns,
   headerTooltip,
@@ -1090,6 +1093,7 @@ const DataTableComponent = ({
             onRowSelectionChange={handleRowSelectionChange}
             freezeColumnsLeft={freezeColumnsLeft}
             freezeColumnsRight={freezeColumnsRight}
+            hiddenColumns={hiddenColumns}
             onCellSelectionChange={handleCellSelectionChange}
             getRowIds={get_row_ids}
             toggleDisplayHeader={toggleDisplayHeader}

package/src/utils/__tests__/local-variables.test.ts

@@ -0,0 +1,132 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import {
+  containsMangledLocal,
+  splitMangledLocals,
+  unmangleLocal,
+} from "../local-variables";
+
+describe("unmangleLocal", () => {
+  it("extracts the cell id and original name", () => {
+    expect(unmangleLocal("_cell_Hbol_a")).toEqual({
+      cellId: "Hbol",
+      name: "_a",
+    });
+  });
+
+  it("handles names with multiple underscore segments", () => {
+    expect(unmangleLocal("_cell_Hbol_a_b")).toEqual({
+      cellId: "Hbol",
+      name: "_a_b",
+    });
+  });
+
+  it("returns null for non-mangled strings", () => {
+    expect(unmangleLocal("just_a_variable")).toBeNull();
+    expect(unmangleLocal("_private")).toBeNull();
+  });
+
+  it("handles the single-underscore local", () => {
+    // `_` is a valid local name (variables.py:62-63), mangling to
+    // `_cell_<id>_` with no trailing suffix.
+    expect(unmangleLocal("_cell_Hbol_")).toEqual({
+      cellId: "Hbol",
+      name: "_",
+    });
+  });
+
+  it("handles UUID-style cell ids", () => {
+    // External / VSCode notebooks use `external_prefix()` which is a
+    // `uuid4()` (hyphenated).
+    expect(
+      unmangleLocal("_cell_c9bf9e57-1685-4c89-bafb-ff5af830be8a_a"),
+    ).toEqual({
+      cellId: "c9bf9e57-1685-4c89-bafb-ff5af830be8a",
+      name: "_a",
+    });
+  });
+
+  it("does not match marimo cell file paths", () => {
+    // The compiled cell file is `__marimo__cell_<id>_.py` (two leading
+    // underscores, trailing `_` with no name); it must not be confused with a
+    // mangled local.
+    expect(unmangleLocal("__marimo__cell_Hbol_.py")).toBeNull();
+    expect(unmangleLocal("/tmp/marimo_42/__marimo__cell_Hbol_.py")).toBeNull();
+  });
+});
+
+describe("splitMangledLocals", () => {
+  it("returns a single text segment when nothing matches", () => {
+    expect(splitMangledLocals("plain text")).toEqual(["plain text"]);
+  });
+
+  it("splits a NameError message", () => {
+    expect(splitMangledLocals("name '_cell_Hbol_a' is not defined")).toEqual([
+      "name '",
+      { cellId: "Hbol", name: "_a" },
+      "' is not defined",
+    ]);
+  });
+
+  it("handles multiple mangled names in one string", () => {
+    expect(splitMangledLocals("_cell_AAAA_x and _cell_BBBB_y")).toEqual([
+      { cellId: "AAAA", name: "_x" },
+      " and ",
+      { cellId: "BBBB", name: "_y" },
+    ]);
+  });
+
+  it("leaves the cell file path alone", () => {
+    const path = "/tmp/marimo_42/__marimo__cell_Hbol_.py";
+    expect(splitMangledLocals(path)).toEqual([path]);
+  });
+
+  it("ignores `_cell_...` substrings preceded by `_`", () => {
+    // Mirrors `(?<!_)` in `variables.py`: a leading `_` (e.g. inside
+    // `__marimo__cell_<id>_<...>`) means this is not a mangle the compiler
+    // produced, so we must not demangle it.
+    const text = "see __marimo__cell_Hbol_a for details";
+    expect(splitMangledLocals(text)).toEqual([text]);
+  });
+
+  it("splits a UUID-style cell id", () => {
+    expect(
+      splitMangledLocals(
+        "name '_cell_c9bf9e57-1685-4c89-bafb-ff5af830be8a_a' is not defined",
+      ),
+    ).toEqual([
+      "name '",
+      {
+        cellId: "c9bf9e57-1685-4c89-bafb-ff5af830be8a",
+        name: "_a",
+      },
+      "' is not defined",
+    ]);
+  });
+
+  it("splits the single-underscore local", () => {
+    expect(splitMangledLocals("name '_cell_Hbol_' is not defined")).toEqual([
+      "name '",
+      { cellId: "Hbol", name: "_" },
+      "' is not defined",
+    ]);
+  });
+});
+
+describe("containsMangledLocal", () => {
+  it("detects mangled names", () => {
+    expect(containsMangledLocal("name '_cell_Hbol_a' is not defined")).toBe(
+      true,
+    );
+  });
+
+  it("ignores the cell file path", () => {
+    expect(containsMangledLocal("/tmp/marimo_42/__marimo__cell_Hbol_.py")).toBe(
+      false,
+    );
+  });
+
+  it("ignores `_cell_...` substrings preceded by `_`", () => {
+    expect(containsMangledLocal("see __marimo__cell_Hbol_a")).toBe(false);
+  });
+});

package/src/utils/local-variables.ts

@@ -0,0 +1,67 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { CellId } from "@/core/cells/ids";
+
+/**
+ * The marimo compiler rewrites underscore-prefixed references inside a cell
+ * (which Python would treat as module-private) into `_cell_<cell_id>_<name>`
+ * so each cell gets its own private namespace. When such a reference fails at
+ * runtime (`NameError: name '_cell_Hbol_a' is not defined`), the mangled name
+ * leaks into the error UI. These helpers undo that mangling for display.
+ *
+ * Mirrors `marimo/_ast/variables.py`.
+ */
+
+// Matches `_cell_<cell_id><name>` for normal ids and UUIDs. The `[\w-]`
+// id class admits hyphens; the `_\w*` name group admits the bare `_`
+// local; the `(?<!_)` lookbehind skips `__marimo__cell_...` paths.
+// Mirrors `_MANGLED_LOCAL_IN_TEXT_RE` in `variables.py`.
+const MANGLED_LOCAL_BODY = String.raw`_cell_([^\W_][\w-]*?)(_\w*)`;
+const MANGLED_LOCAL_PATTERN = String.raw`(?<!_)${MANGLED_LOCAL_BODY}`;
+// Strict (whole-string) form for `unmangleLocal`; the leading `^` makes the
+// lookbehind trivially satisfied, so use the bare body.
+const ANCHORED_RE = new RegExp(`^${MANGLED_LOCAL_BODY}$`);
+const UNANCHORED_RE = new RegExp(MANGLED_LOCAL_PATTERN);
+const GLOBAL_RE = new RegExp(MANGLED_LOCAL_PATTERN, "g");
+
+export interface UnmangledLocal {
+  cellId: CellId;
+  /** The original underscore-prefixed name, e.g. "_a". */
+  name: string;
+}
+
+export function unmangleLocal(mangled: string): UnmangledLocal | null {
+  const match = ANCHORED_RE.exec(mangled);
+  if (!match) {
+    return null;
+  }
+  return { cellId: match[1] as CellId, name: match[2] };
+}
+
+export type MangledSegment = string | UnmangledLocal;
+
+/**
+ * Split a plain text string into alternating literal text and unmangled-local
+ * segments, so callers can render mixed React content.
+ */
+export function splitMangledLocals(text: string): MangledSegment[] {
+  const segments: MangledSegment[] = [];
+  GLOBAL_RE.lastIndex = 0;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = GLOBAL_RE.exec(text);
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      segments.push(text.slice(lastIndex, match.index));
+    }
+    segments.push({ cellId: match[1] as CellId, name: match[2] });
+    lastIndex = match.index + match[0].length;
+    match = GLOBAL_RE.exec(text);
+  }
+  if (lastIndex < text.length) {
+    segments.push(text.slice(lastIndex));
+  }
+  return segments;
+}
+
+export function containsMangledLocal(text: string): boolean {
+  return UNANCHORED_RE.test(text);
+}