@marimo-team/frontend 0.23.2-dev8 → 0.23.3-dev1

package/src/components/data-table/sentinel-cell.tsx

@@ -0,0 +1,118 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { CellValueSentinel, CellValueSentinelType } from "./types";
+
+const WHITESPACE_CHARS: Record<string, { marker: string; name: string }> = {
+  " ": { marker: "\u2423", name: "space" },
+  "\t": { marker: "\\t", name: "tab" },
+  "\n": { marker: "\\n", name: "newline" },
+  "\r": { marker: "\\r", name: "carriage return" },
+};
+
+function renderWhitespaceMarkers(str: string): React.ReactNode[] {
+  return [...str].map((ch, i) => {
+    const entry = WHITESPACE_CHARS[ch];
+    const marker = entry
+      ? entry.marker
+      : `\\u${(ch.codePointAt(0) ?? 0).toString(16).padStart(4, "0")}`;
+    return (
+      <span key={i} className="mr-0.5 last:mr-0">
+        {marker}
+      </span>
+    );
+  });
+}
+
+function describeWhitespace(str: string): string {
+  const counts: Record<string, number> = {};
+  for (const ch of str) {
+    const name = WHITESPACE_CHARS[ch]?.name ?? "unicode whitespace";
+    counts[name] = (counts[name] ?? 0) + 1;
+  }
+  return Object.entries(counts)
+    .map(([name, count]) => `${count} ${name}${count > 1 ? "s" : ""}`)
+    .join(", ");
+}
+
+interface SentinelConfig {
+  label: (value: CellValueSentinel["value"]) => string | React.ReactNode[];
+  tooltip: (value: CellValueSentinel["value"]) => string;
+  ariaLabel: (value: CellValueSentinel["value"]) => string;
+}
+
+const SENTINEL_CONFIG: Record<CellValueSentinelType, SentinelConfig> = {
+  null: {
+    label: () => "None",
+    tooltip: () => "None",
+    ariaLabel: () => "None",
+  },
+  "empty-string": {
+    label: () => "<empty>",
+    tooltip: () => "<empty>",
+    ariaLabel: () => "empty string",
+  },
+  whitespace: {
+    label: (value) => renderWhitespaceMarkers(String(value)),
+    tooltip: (value) => describeWhitespace(String(value)),
+    ariaLabel: (value) => describeWhitespace(String(value)),
+  },
+  nan: {
+    label: () => "NaN",
+    tooltip: () => "NaN",
+    ariaLabel: () => "NaN",
+  },
+  "positive-infinity": {
+    label: () => "inf",
+    tooltip: () => "Infinity",
+    ariaLabel: () => "infinity",
+  },
+  "negative-infinity": {
+    label: () => "-inf",
+    tooltip: () => "-Infinity",
+    ariaLabel: () => "negative infinity",
+  },
+  nat: {
+    label: () => "NaT",
+    tooltip: () => "NaT (Not a Time)",
+    ariaLabel: () => "Not a Time",
+  },
+};
+
+export function WhitespaceMarkers({ value }: { value: string }) {
+  if (!value) {
+    return null;
+  }
+
+  const description = describeWhitespace(value);
+
+  return (
+    <span
+      className="text-muted-foreground opacity-60"
+      aria-label={description}
+      title={description}
+    >
+      {renderWhitespaceMarkers(value)}
+    </span>
+  );
+}
+
+export function SentinelCell({
+  sentinel,
+}: {
+  sentinel: CellValueSentinel;
+}): React.ReactElement {
+  const config = SENTINEL_CONFIG[sentinel.type];
+  const label = config.label(sentinel.value);
+  const tooltip = config.tooltip(sentinel.value);
+  const ariaLabel = config.ariaLabel(sentinel.value);
+
+  return (
+    <span
+      className="italic text-muted-foreground bg-muted rounded px-1"
+      aria-label={ariaLabel}
+      title={tooltip}
+    >
+      <span className="opacity-70">{label}</span>
+    </span>
+  );
+}

package/src/components/data-table/types.ts

@@ -2,7 +2,6 @@
 
 import type { RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
-import { Objects } from "@/utils/objects";
 
 declare module "@tanstack/react-table" {
   interface TableMeta<TData extends RowData> {
@@ -56,16 +55,19 @@ export type FieldTypesWithExternalType = [
   columnName: string,
   [dataType: DataType, externalType: string],
 ][];
-export type FieldTypes = Record<string, DataType>;
+// Ordered map of column name -> data type.
+//
+// `Map` (not `Record`) because JS objects reorder integer-string keys
+// to the front in numeric order per `OrdinaryOwnPropertyKeys`; a
+// DataFrame with a `"2010"` column alongside `"here"` would otherwise
+// lose its column order on iteration (#9269). `Map` preserves insertion
+// order for all keys.
+export type FieldTypes = Map<string, DataType>;
 
 export function toFieldTypes(
   fieldTypes: FieldTypesWithExternalType,
 ): FieldTypes {
-  return Objects.collect(
-    fieldTypes,
-    ([columnName]) => columnName,
-    ([, [type]]) => type,
-  );
+  return new Map(fieldTypes.map(([columnName, [type]]) => [columnName, type]));
 }
 
 interface BinValue {
@@ -95,6 +97,29 @@ export type DataTableSelection =
   | "multi-cell"
   | null;
 
+export type CellValueSentinel =
+  | { type: "null"; value: null | undefined }
+  | { type: "empty-string"; value: string }
+  | { type: "whitespace"; value: string }
+  | { type: "nan"; value: number | string }
+  | { type: "positive-infinity"; value: number | string }
+  | { type: "negative-infinity"; value: number | string }
+  | { type: "nat"; value: string };
+
+export type CellValueSentinelType = CellValueSentinel["type"];
+
+export function isNumericType(
+  dataType: DataType | undefined,
+): dataType is "number" | "integer" {
+  return dataType === "number" || dataType === "integer";
+}
+
+export function isTemporalType(
+  dataType: DataType | undefined,
+): dataType is "date" | "datetime" | "time" {
+  return dataType === "date" || dataType === "datetime" || dataType === "time";
+}
+
 export function extractTimezone(dtype: string | undefined): string | undefined {
   if (!dtype) {
     return undefined;
@@ -105,7 +130,3 @@ export function extractTimezone(dtype: string | undefined): string | undefined {
   const match = /^datetime(?:64)?\[[^,]+,([^,]+)]$/.exec(dtype);
   return match?.[1]?.trim();
 }
-
-export type PageRange =
-  | { type: "page"; page: number }
-  | { type: "ellipsis"; key: string };

package/src/components/data-table/utils.ts

@@ -5,7 +5,60 @@ import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
 import { getMimeValues } from "./mime-cell";
-import { INDEX_COLUMN_NAME } from "./types";
+import type { DataType } from "@/core/kernel/messages";
+import {
+  type CellValueSentinel,
+  INDEX_COLUMN_NAME,
+  isNumericType,
+  isTemporalType,
+} from "./types";
+
+const WHITESPACE_ONLY_RE = /^[\s]+$/;
+const WHITESPACE_CHAR_RE = /\s/;
+const EDGE_WHITESPACE_RE = /^(\s*)([\s\S]*?)(\s*)$/;
+
+/**
+ * checks for leading and trailing whitespaces.
+ * Will run for every cell, so fast exits for common cases
+ *
+ * @param value - to split
+ * @returns - leading, middle, and trailing string where leading and trailing are whitespace string
+ */
+export function splitLeadingTrailingWhitespace(value: string): {
+  leading: string;
+  middle: string;
+  trailing: string;
+} {
+  const parts = {
+    leading: "",
+    middle: "",
+    trailing: "",
+  };
+  if (value.length === 0) {
+    return parts;
+  }
+
+  const firstWhitespaceCh = WHITESPACE_CHAR_RE.test(value[0]);
+  const lastWhitespaceCh = WHITESPACE_CHAR_RE.test(value[value.length - 1]);
+
+  // if does not start or end with ws
+  if (!firstWhitespaceCh && !lastWhitespaceCh) {
+    parts.middle = value;
+    return parts;
+  }
+
+  const match = EDGE_WHITESPACE_RE.exec(value);
+  if (!match) {
+    parts.middle = value;
+    return parts;
+  }
+
+  parts.leading = match[1] ?? "";
+  parts.middle = match[2] ?? "";
+  parts.trailing = match[3] ?? "";
+
+  return parts;
+}
 
 /**
  * Convenience function to load table data.
@@ -85,6 +138,71 @@ export function getPageIndexForRow(
   return null;
 }
 
+// String representations of numeric special values.
+// Only matched when the caller indicates the column is numeric.
+type StringValueSentinelType = Extract<
+  CellValueSentinel,
+  { value: number | string }
+>["type"];
+
+const NUMERIC_STRING_SPECIALS: Record<string, StringValueSentinelType> = {
+  NaN: "nan",
+  Infinity: "positive-infinity",
+  "-Infinity": "negative-infinity",
+  inf: "positive-infinity",
+  "-inf": "negative-infinity",
+};
+
+/**
+ * Detect if a cell value is a sentinel (null, empty string, whitespace,
+ * NaN, infinity, NaT). Column-type-dependent sentinels (string "NaN",
+ * "NaT", etc.) are matched based on `dataType`.
+ */
+export function detectSentinel(
+  value: unknown,
+  dataType: DataType | undefined,
+): CellValueSentinel | null {
+  if (value == null) {
+    return { type: "null", value };
+  }
+
+  if (typeof value === "string") {
+    if (value === "") {
+      return { type: "empty-string", value };
+    }
+    if (WHITESPACE_ONLY_RE.test(value)) {
+      return { type: "whitespace", value };
+    }
+    // String "NaN"/"Infinity" in a numeric column = actual special float value
+    if (isNumericType(dataType)) {
+      const type = NUMERIC_STRING_SPECIALS[value];
+      if (type) {
+        return { type, value };
+      }
+    }
+    // String "NaT" in a temporal column = pandas Not-a-Time sentinel
+    if (isTemporalType(dataType) && value === "NaT") {
+      return { type: "nat", value };
+    }
+    return null;
+  }
+
+  if (typeof value === "number") {
+    if (Number.isNaN(value)) {
+      return { type: "nan", value };
+    }
+    if (value === Number.POSITIVE_INFINITY) {
+      return { type: "positive-infinity", value };
+    }
+    if (value === Number.NEGATIVE_INFINITY) {
+      return { type: "negative-infinity", value };
+    }
+    return null;
+  }
+
+  return null;
+}
+
 /**
  * Stringify an unknown value. Converts objects to JSON strings.
  * @param opts.value - The value to stringify.

package/src/components/datasources/__tests__/missing-package-prompt.test.tsx

@@ -0,0 +1,103 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { viewStateAtom } from "@/core/mode";
+import { requestClientAtom } from "@/core/network/requests";
+import { store } from "@/core/state/jotai";
+import { MissingPackagePrompt } from "../missing-package-prompt";
+
+const mockOpenApplication = vi.fn();
+vi.mock("@/components/editor/chrome/state", () => ({
+  useChromeActions: () => ({
+    openApplication: mockOpenApplication,
+  }),
+}));
+
+vi.mock("@/components/editor/chrome/panels/packages-state", () => ({
+  packagesToInstallAtom: {},
+}));
+
+const mockRequestAnimationFrame = vi.fn((callback) => {
+  callback();
+  return 1;
+});
+vi.stubGlobal("requestAnimationFrame", mockRequestAnimationFrame);
+
+const mockInput = {
+  focus: vi.fn(),
+  value: "",
+  dispatchEvent: vi.fn(),
+};
+vi.spyOn(document, "getElementById").mockReturnValue(
+  mockInput as unknown as HTMLInputElement,
+);
+
+function createTestWrapper() {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+  return { wrapper };
+}
+
+describe("MissingPackagePrompt", () => {
+  const { wrapper } = createTestWrapper();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    store.set(requestClientAtom, MockRequestClient.create());
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+  });
+
+  it("should render backend description and install button in edit mode", () => {
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+        description="Parquet export requires a DataFrame library."
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export requires a DataFrame library."),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Install polars")).toBeInTheDocument();
+  });
+
+  it("should fall back to generic copy when description is absent", () => {
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export requires polars"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Install polars")).toBeInTheDocument();
+  });
+
+  it("should render generic line in read mode and not leak packages or description", () => {
+    store.set(viewStateAtom, { mode: "read", cellAnchor: null });
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+        description="Install polars to enable Parquet."
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export isn't available in this notebook"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Install polars to enable Parquet."),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Install polars")).not.toBeInTheDocument();
+    expect(screen.queryByText(/polars/)).not.toBeInTheDocument();
+  });
+});

package/src/components/datasources/missing-package-prompt.tsx

@@ -0,0 +1,49 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useInstallAllowed } from "@/core/mode";
+import { cn } from "@/utils/cn";
+import { InstallPackageButton } from "./install-package-button";
+
+interface MissingPackagePromptProps {
+  packages: string[];
+  featureName: string;
+  description?: string | null; // server message, suppressing this in read-only mode
+  onInstall?: () => void;
+  className?: string;
+}
+
+/**
+ * display missing-package requirement with mode-aware copy. In edit mode,
+ * shows the backend explanation (if any) plus an install button for missing-packages.
+ * read mode, shows a generic "isn't available"
+ */
+export const MissingPackagePrompt: React.FC<MissingPackagePromptProps> = ({
+  packages,
+  featureName,
+  description,
+  onInstall,
+  className,
+}) => {
+  const installAllowed = useInstallAllowed();
+
+  if (!installAllowed) {
+    return (
+      <span className={cn("text-xs", className)}>
+        {featureName} isn't available in this notebook
+      </span>
+    );
+  }
+
+  return (
+    <div className={cn("text-xs flex flex-col items-end gap-2", className)}>
+      <span className="self-start">
+        {description || `${featureName} requires ${packages.join(", ")}`}
+      </span>
+      <InstallPackageButton
+        packages={packages}
+        onInstall={onInstall}
+        className="ml-0"
+      />
+    </div>
+  );
+};

package/src/components/editor/actions/useNotebookActions.tsx

@@ -381,6 +381,18 @@ export function useNotebookActions() {
             });
           },
         },
+        {
+          icon: <MarimoPlusIcon size={14} strokeWidth={1.5} />,
+          label: "Create molab notebook",
+          handle: async () => {
+            const code = await readCode();
+            const url = createShareableLink({
+              code: code.contents,
+              baseUrl: `${Constants.molab}/new`,
+            });
+            window.open(url, "_blank");
+          },
+        },
       ],
     },
 

package/src/components/editor/cell/code/cell-editor.tsx

@@ -270,6 +270,7 @@ const CellEditorInternal = ({
     userConfig.language_servers,
     userConfig.display,
     userConfig.diagnostics,
+    userConfig.ai?.inline_tooltip,
     aiEnabled,
     theme,
     showPlaceholder,

package/src/components/editor/file-tree/__tests__/requesting-tree.test.ts

@@ -8,6 +8,7 @@ import { RequestingTree } from "../requesting-tree";
 const sendListFiles = vi.fn();
 const sendCreateFileOrFolder = vi.fn();
 const sendDeleteFileOrFolder = vi.fn();
+const sendCopyFileOrFolder = vi.fn();
 const sendRenameFileOrFolder = vi.fn();
 
 vi.mock("@/components/ui/use-toast", () => MockModules.toast());
@@ -21,6 +22,7 @@ describe("RequestingTree", () => {
       listFiles: sendListFiles,
       createFileOrFolder: sendCreateFileOrFolder,
       deleteFileOrFolder: sendDeleteFileOrFolder,
+      copyFileOrFolder: sendCopyFileOrFolder,
       renameFileOrFolder: sendRenameFileOrFolder,
     });
     sendListFiles.mockResolvedValue({
@@ -169,6 +171,17 @@ describe("RequestingTree", () => {
     `);
   });
 
+  test("copy should duplicate a file", async () => {
+    sendCopyFileOrFolder.mockResolvedValue({ success: true });
+
+    await requestingTree.copy("1.1", "file1_copy");
+    expect(sendCopyFileOrFolder).toHaveBeenCalledWith({
+      path: "/root/file1",
+      newPath: "/root/file1_copy",
+    });
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
   test("createFile should create a new file", async () => {
     sendCreateFileOrFolder.mockResolvedValue({ success: true });
 
@@ -236,6 +249,7 @@ describe("RequestingTree", () => {
         listFiles: sendListFiles,
         createFileOrFolder: sendCreateFileOrFolder,
         deleteFileOrFolder: sendDeleteFileOrFolder,
+        copyFileOrFolder: sendCopyFileOrFolder,
         renameFileOrFolder: sendRenameFileOrFolder,
       });
       sendListFiles.mockRejectedValue(new Error("Network error"));
@@ -263,6 +277,23 @@ describe("RequestingTree", () => {
       });
     });
 
+    test("copy should handle API failure", async () => {
+      sendCopyFileOrFolder.mockResolvedValue({
+        success: false,
+        message: "Error duplicating",
+      });
+
+      await requestingTree.copy("1.1", "file1_copy");
+      expect(sendCopyFileOrFolder).toHaveBeenCalledWith({
+        path: "/root/file1",
+        newPath: "/root/file1_copy",
+      });
+      expect(toast).toHaveBeenCalledWith({
+        title: "Failed",
+        description: "Error duplicating",
+      });
+    });
+
     test("move should handle missing parent node gracefully", async () => {
       await requestingTree.move(["1.x"], "2");
       expect(sendRenameFileOrFolder).not.toHaveBeenCalled();
@@ -284,6 +315,7 @@ describe("RequestingTree", () => {
         listFiles: sendListFiles,
         createFileOrFolder: sendCreateFileOrFolder,
         deleteFileOrFolder: sendDeleteFileOrFolder,
+        copyFileOrFolder: sendCopyFileOrFolder,
         renameFileOrFolder: sendRenameFileOrFolder,
       });
 
@@ -305,6 +337,7 @@ describe("RequestingTree", () => {
         listFiles: sendListFiles,
         createFileOrFolder: sendCreateFileOrFolder,
         deleteFileOrFolder: sendDeleteFileOrFolder,
+        copyFileOrFolder: sendCopyFileOrFolder,
         renameFileOrFolder: sendRenameFileOrFolder,
       });
 

package/src/components/editor/file-tree/file-explorer.tsx

@@ -381,6 +381,7 @@ const Show = ({
       {node.data.name}
       {node.data.isMarimoFile && !isWasm() && (
         <span
+          data-testid="file-explorer-open-marimo-button"
           className="shrink-0 ml-2 text-sm hidden group-hover:inline hover:underline"
           onClick={onOpenMarimoFile}
         >
@@ -419,8 +420,7 @@ const Edit = ({ node }: { node: NodeApi<FileInfo> }) => {
 };
 
 const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
-  const { openFile, sendCreateFileOrFolder, sendFileDetails } =
-    useRequestClient();
+  const { openFile, sendFileDetails } = useRequestClient();
   const disableFileDownloads = useAtomValue(disableFileDownloadsAtom);
 
   const fileType: FileIconType = node.data.isDirectory
@@ -502,37 +502,14 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
   });
 
   const handleDuplicate = useEvent(async () => {
-    if (!tree || node.data.isDirectory) {
+    if (!tree) {
       return;
     }
 
     const [name, extension] = fileSplit(node.data.name);
     const duplicateName = `${name}_copy${extension}`;
 
-    try {
-      // First get the file contents
-      const details = await sendFileDetails({ path: node.data.path });
-
-      // Get the parent directory path
-      const parentPath = node.parent?.data.path || "";
-
-      // Create the duplicate file by creating a new file with the same contents
-      await sendCreateFileOrFolder({
-        path: parentPath,
-        type: "file",
-        name: duplicateName,
-        contents: details.contents ? btoa(details.contents) : undefined,
-      });
-
-      // Refresh the parent folder to show the new file
-      await tree.refreshAll([parentPath]);
-    } catch {
-      toast({
-        title: "Failed to duplicate file",
-        description: "Unable to create a duplicate of the file",
-        variant: "danger",
-      });
-    }
+    await tree.copy(node.id, duplicateName);
   });
 
   const renderActions = () => {
@@ -581,12 +558,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           <Edit3Icon className={ic} />
           Rename
         </DropdownMenuItem>
-        {!node.data.isDirectory && (
-          <DropdownMenuItem onSelect={handleDuplicate}>
-            <CopyIcon className={ic} />
-            Duplicate
-          </DropdownMenuItem>
-        )}
+        <DropdownMenuItem onSelect={handleDuplicate}>
+          <CopyIcon className={ic} />
+          Duplicate
+        </DropdownMenuItem>
         <DropdownMenuItem
           onSelect={async () => {
             await copyToClipboard(node.data.path);