@marimo-team/frontend 0.23.3-dev3 → 0.23.3-dev33

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

@@ -0,0 +1,266 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { CopyIcon, Edit3Icon, Trash2Icon } from "lucide-react";
+import type React from "react";
+import { useCallback } from "react";
+import type { NodeApi } from "react-arborist";
+import useEvent from "react-use-event-hook";
+import { useImperativeModal } from "@/components/modal/ImperativeModal";
+import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useRequestClient } from "@/core/network/requests";
+import type { FileInfo } from "@/core/network/types";
+import {
+  makeDuplicateName,
+  resolvePaths,
+  toAbsolutePath,
+} from "@/utils/pathUtils";
+import {
+  type FileOperationResult,
+  handleFileResponse,
+} from "./requesting-tree";
+import { MENU_ITEM_ICON_CLASS, MoreActionsButton } from "./tree-actions";
+
+/**
+ * Hook that exposes rename / duplicate / delete operations against absolute
+ * paths, handling path resolution (via `resolvePaths`) and error toasting.
+ *
+ * `root` is the workspace / tree root used to turn relative node paths into
+ * absolute paths for the API. Pass `""` if all node paths are already
+ * absolute (in which case `resolvePaths` is a no-op transformation).
+ */
+export function useFileOperations({ root }: { root: string }) {
+  const {
+    sendRenameFileOrFolder,
+    sendCopyFileOrFolder,
+    sendDeleteFileOrFolder,
+  } = useRequestClient();
+
+  const renameFile = useCallback(
+    async (
+      file: Pick<FileInfo, "path">,
+      newName: string,
+    ): Promise<FileOperationResult> => {
+      const { path, newPath } = resolvePaths({
+        path: file.path,
+        name: newName,
+        root,
+      });
+      const resp = await sendRenameFileOrFolder({ path, newPath });
+      return handleFileResponse(resp);
+    },
+    [root, sendRenameFileOrFolder],
+  );
+
+  const duplicateFile = useCallback(
+    async (
+      file: Pick<FileInfo, "path" | "name">,
+    ): Promise<FileOperationResult> => {
+      const { path, newPath } = resolvePaths({
+        path: file.path,
+        name: makeDuplicateName(file.name),
+        root,
+      });
+      const resp = await sendCopyFileOrFolder({ path, newPath });
+      return handleFileResponse(resp);
+    },
+    [root, sendCopyFileOrFolder],
+  );
+
+  const deleteFile = useCallback(
+    async (file: Pick<FileInfo, "path">): Promise<FileOperationResult> => {
+      const resp = await sendDeleteFileOrFolder({
+        path: toAbsolutePath(file.path, root),
+      });
+      return handleFileResponse(resp);
+    },
+    [root, sendDeleteFileOrFolder],
+  );
+
+  return { renameFile, duplicateFile, deleteFile };
+}
+
+export type FileItemKind = "file" | "folder" | "notebook";
+
+const DELETE_TITLE_BY_KIND: Record<FileItemKind, string> = {
+  file: "Delete file",
+  folder: "Delete folder",
+  notebook: "Delete notebook",
+};
+
+export function useConfirmDeleteFile() {
+  const { openConfirm } = useImperativeModal();
+
+  return useCallback(
+    (
+      target: { name: string; kind?: FileItemKind },
+      onConfirm: () => void | Promise<void>,
+    ) => {
+      const kind = target.kind ?? "file";
+      openConfirm({
+        title: DELETE_TITLE_BY_KIND[kind],
+        description: `Are you sure you want to delete ${target.name}?`,
+        confirmAction: (
+          <AlertDialogDestructiveAction
+            onClick={async () => {
+              await onConfirm();
+            }}
+            aria-label="Confirm"
+          >
+            Delete
+          </AlertDialogDestructiveAction>
+        ),
+      });
+    },
+    [openConfirm],
+  );
+}
+
+/**
+ * High-level handlers for rename/duplicate/delete against a single node
+ *
+ * All successful operations fire `onAfterChange` so callers can refresh their
+ * data sources (workspace tree + recent notebooks on the homepage).
+ */
+export function useNotebookFileActions({
+  node,
+  root,
+  onAfterChange,
+}: {
+  node: NodeApi<FileInfo>;
+  root: string;
+  onAfterChange?: () => void;
+}) {
+  const { duplicateFile, deleteFile } = useFileOperations({ root });
+  const confirmDelete = useConfirmDeleteFile();
+
+  const handleRename = useEvent(() => {
+    node.edit();
+  });
+
+  const handleDuplicate = useEvent(async () => {
+    const result = await duplicateFile(node.data);
+    if (result) {
+      onAfterChange?.();
+    }
+  });
+
+  const handleDelete = useEvent(() => {
+    const kind: FileItemKind = node.data.isDirectory
+      ? "folder"
+      : node.data.isMarimoFile
+        ? "notebook"
+        : "file";
+    confirmDelete({ name: node.data.name, kind }, async () => {
+      const result = await deleteFile(node.data);
+      if (result) {
+        onAfterChange?.();
+      }
+    });
+  });
+
+  return { handleRename, handleDuplicate, handleDelete };
+}
+
+export const FileActionsDropdown = ({
+  testId,
+  buttonClassName,
+  iconClassName,
+  contentClassName,
+  preventDefaultOnTrigger = false,
+  children,
+}: {
+  testId?: string;
+  buttonClassName?: string;
+  iconClassName?: string;
+  contentClassName?: string;
+  /**
+   * When true, the trigger also calls `preventDefault()` on click — needed
+   * when the dropdown is nested inside an `<a>` or other element whose
+   * default click behavior (navigation, submit, etc.) should be suppressed.
+   */
+  preventDefaultOnTrigger?: boolean;
+  children: React.ReactNode;
+}) => (
+  <DropdownMenu modal={false}>
+    <DropdownMenuTrigger
+      asChild={true}
+      tabIndex={-1}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (preventDefaultOnTrigger) {
+          e.preventDefault();
+        }
+      }}
+    >
+      <MoreActionsButton
+        data-testid={testId}
+        className={buttonClassName}
+        iconClassName={iconClassName}
+      />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      align="end"
+      className={contentClassName ?? "print:hidden w-[220px]"}
+      onClick={(e) => e.stopPropagation()}
+      onCloseAutoFocus={(e) => e.preventDefault()}
+    >
+      {children}
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+export const RenameMenuItem = ({
+  onSelect,
+  disabled,
+  title,
+}: {
+  onSelect: (evt: Event) => void;
+  disabled?: boolean;
+  title?: string;
+}) => (
+  <DropdownMenuItem onSelect={onSelect} disabled={disabled} title={title}>
+    <Edit3Icon className={MENU_ITEM_ICON_CLASS} />
+    Rename
+  </DropdownMenuItem>
+);
+
+export const DuplicateMenuItem = ({
+  onSelect,
+  disabled,
+  title,
+}: {
+  onSelect: (evt: Event) => void;
+  disabled?: boolean;
+  title?: string;
+}) => (
+  <DropdownMenuItem onSelect={onSelect} disabled={disabled} title={title}>
+    <CopyIcon className={MENU_ITEM_ICON_CLASS} />
+    Duplicate
+  </DropdownMenuItem>
+);
+
+export const DeleteMenuItem = ({
+  onSelect,
+  disabled,
+  title,
+}: {
+  onSelect: (evt: Event) => void;
+  disabled?: boolean;
+  title?: string;
+}) => (
+  <DropdownMenuItem
+    onSelect={onSelect}
+    variant="danger"
+    disabled={disabled}
+    title={title}
+  >
+    <Trash2Icon className={MENU_ITEM_ICON_CLASS} />
+    Delete
+  </DropdownMenuItem>
+);

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

@@ -88,7 +88,7 @@ export const CsvViewer: React.FC<{ contents: string }> = ({ contents }) => {
       setPaginationState={setPagination}
       wrapperClassName="h-full justify-between pb-1 px-1"
       pagination={true}
-      className="rounded-none border-b flex overflow-hidden"
+      className="rounded-none border-b flex flex-col overflow-hidden"
       rowSelection={Objects.EMPTY}
     />
   );

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

@@ -10,6 +10,26 @@ import type {
 import { prettyError } from "@/utils/errors";
 import { Functions } from "@/utils/functions";
 import { type FilePath, PathBuilder } from "@/utils/paths";
+import { resolvePaths } from "@/utils/pathUtils";
+
+/**
+ * Normalized result of a file mutation: the server response when successful,
+ * `null` when the server rejected the request and a toast was surfaced.
+ */
+export type FileOperationResult = FileUpdateResponse | null;
+
+export function handleFileResponse(
+  response: FileUpdateResponse,
+): FileOperationResult {
+  if (!response.success) {
+    toast({
+      title: "Failed",
+      description: response.message,
+    });
+    return null;
+  }
+  return response;
+}
 
 export class RequestingTree {
   private delegate = new SimpleTree<FileInfo>([]);
@@ -85,15 +105,15 @@ export class RequestingTree {
       });
       return;
     }
-    const currentPath = node.data.path as FilePath;
-    const parentPath = this.path.dirname(currentPath);
-    const newPath = this.path.join(parentPath, newName);
+    const { path, newPath } = resolvePaths({
+      path: node.data.path,
+      name: newName,
+      root: this.rootPath,
+    });
+    const parentPath = this.path.dirname(path);
     const newFile = await this.callbacks
-      .copyFileOrFolder({
-        path: currentPath,
-        newPath: newPath,
-      })
-      .then(this.handleResponse);
+      .copyFileOrFolder({ path, newPath })
+      .then(handleFileResponse);
     if (!newFile?.info) {
       return;
     }
@@ -116,14 +136,18 @@ export class RequestingTree {
       });
       return;
     }
-    const currentPath = node.data.path as FilePath;
-    const newPath = this.path.join(this.path.dirname(currentPath), name);
-    await this.callbacks
-      .renameFileOrFolder({
-        path: currentPath,
-        newPath: newPath,
-      })
-      .then(this.handleResponse);
+    const { path, newPath } = resolvePaths({
+      path: node.data.path,
+      name,
+      root: this.rootPath,
+    });
+    const result = await this.callbacks
+      .renameFileOrFolder({ path, newPath })
+      .then(handleFileResponse);
+    if (!result) {
+      return;
+    }
+
     this.delegate.update({ id, changes: { name, path: newPath } });
     this.onChange(this.delegate.data);
     // Rename all of its children
@@ -136,23 +160,25 @@ export class RequestingTree {
       : this.rootPath;
 
     await Promise.all(
-      fromIds.map((id) => {
-        this.delegate.move({ id, parentId, index: 0 });
+      fromIds.map(async (id) => {
         const node = this.delegate.find(id);
         if (!node) {
-          return Promise.resolve();
+          return;
         }
+        const originalPath = node.data.path;
         const newPath = this.path.join(
           parentPath,
-          this.path.basename(node.data.path as FilePath),
+          this.path.basename(originalPath as FilePath),
         );
+        const result = await this.callbacks
+          .renameFileOrFolder({ path: originalPath, newPath })
+          .then(handleFileResponse);
+        if (!result) {
+          return;
+        }
+
+        this.delegate.move({ id, parentId, index: 0 });
         this.delegate.update({ id, changes: { path: newPath } });
-        return this.callbacks
-          .renameFileOrFolder({
-            path: node.data.path,
-            newPath: newPath,
-          })
-          .then(this.handleResponse);
       }),
     );
 
@@ -162,17 +188,21 @@ export class RequestingTree {
     await this.refreshAll([parentPath]);
   }
 
-  async createFile(
-    name: string,
-    parentId: string | null,
-    type: "file" | "notebook" = "file",
-  ): Promise<void> {
+  async createFile({
+    name,
+    parentId,
+    type = "file",
+  }: {
+    name: string;
+    parentId: string | null;
+    type?: "file" | "notebook";
+  }): Promise<void> {
     const parentPath = parentId
       ? (this.delegate.find(parentId)?.data.path ?? parentId)
       : this.rootPath;
     const newFile = await this.callbacks
       .createFileOrFolder({ path: parentPath, type: type, name: name })
-      .then(this.handleResponse);
+      .then(handleFileResponse);
     if (!newFile?.info) {
       return;
     }
@@ -192,7 +222,7 @@ export class RequestingTree {
       : this.rootPath;
     const newFolder = await this.callbacks
       .createFileOrFolder({ path: parentPath, type: "directory", name: name })
-      .then(this.handleResponse);
+      .then(handleFileResponse);
     if (!newFolder?.info) {
       return;
     }
@@ -216,9 +246,12 @@ export class RequestingTree {
       return;
     }
 
-    await this.callbacks
+    const result = await this.callbacks
       .deleteFileOrFolder({ path: node.data.path })
-      .then(this.handleResponse);
+      .then(handleFileResponse);
+    if (!result) {
+      return;
+    }
     this.delegate.drop({ id });
     this.onChange(this.delegate.data);
   }
@@ -262,18 +295,4 @@ export class RequestingTree {
     }
     return path;
   };
-
-  private handleResponse = (
-    response: FileUpdateResponse,
-  ): FileUpdateResponse | null => {
-    if (!response.success) {
-      toast({
-        title: "Failed",
-        description: response.message,
-      });
-      return null;
-    }
-
-    return response;
-  };
 }

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

@@ -8,6 +8,7 @@ import {
   floatType,
   intType,
   JsonViewer,
+  type JsonViewerKeyRenderer,
   nullType,
   objectType,
   stringType,
@@ -130,6 +131,9 @@ export const JsonOutput: React.FC<Props> = memo(
             collapseStringsAfterLength={COLLAPSED_TEXT_LENGTH}
             // leave the default valueTypes as it was - 'python', only 'json' is changed
             valueTypes={valueTypesMap[valueTypes]}
+            // Render dict keys that carry Python type info (e.g. `int`, `tuple`).
+            // See `_key_formatter` in marimo/_output/formatters/structures.py.
+            keyRenderer={valueTypes === "python" ? keyRenderer : undefined}
             // Don't group arrays, it will make the tree view look like there are nested arrays
             groupArraysAfterLength={Number.MAX_SAFE_INTEGER}
             // Built-in clipboard shifts content on hover
@@ -207,7 +211,10 @@ const LEAF_RENDERERS: Record<string, LeafRenderer> = {
   ),
   "text/plain+float:": (value) => <span>{value}</span>,
   "text/plain+bigint:": (value) => <span>{value}</span>,
-  "text/plain+set:": (value) => <span>set{value}</span>,
+  "text/plain+set:": (value) => <span>{formatSetPayload(value)}</span>,
+  "text/plain+frozenset:": (value) => (
+    <span>{formatFrozensetPayload(value)}</span>
+  ),
   "text/plain+tuple:": (value) => <span>{value}</span>,
   "text/plain:": (value) => <CollapsibleTextOutput text={value} />,
   "application/json:": (value) => (
@@ -375,6 +382,99 @@ function renderLeaf(leaf: string, render: LeafRenderer): React.ReactNode {
   return <span>{leaf}</span>;
 }
 
+// Prefix marking keys that carry encoded type information from Python.
+// See `_key_formatter` in marimo/_output/formatters/structures.py.
+const KEY_ENCODED_PREFIX = "text/plain+";
+
+// Format a JSON-list payload as a Python tuple literal. 1-element tuples
+// need a trailing comma — `(1)` is just `1` in Python, `(1,)` is the tuple.
+function formatTuplePayload(jsonList: string): string {
+  const items = JSON.parse(jsonList) as unknown[];
+  const inner = items.map((x) => JSON.stringify(x)).join(", ");
+  if (items.length === 0) {
+    return "()";
+  }
+  if (items.length === 1) {
+    return `(${inner},)`;
+  }
+  return `(${inner})`;
+}
+
+// Format a JSON-list payload as a Python frozenset literal. Empty → `frozenset()`
+// rather than `frozenset({})` (which reads like a dict).
+function formatFrozensetPayload(jsonList: string): string {
+  const items = JSON.parse(jsonList) as unknown[];
+  if (items.length === 0) {
+    return "frozenset()";
+  }
+  const inner = items.map((x) => JSON.stringify(x)).join(", ");
+  return `frozenset({${inner}})`;
+}
+
+// Format a JSON-list payload as a Python set literal. Empty → `set()`
+// (not `{}`, which is a dict literal in Python).
+function formatSetPayload(jsonList: string): string {
+  try {
+    const items = JSON.parse(jsonList) as unknown[];
+    if (items.length === 0) {
+      return "set()";
+    }
+    const inner = items.map((x) => JSON.stringify(x)).join(", ");
+    return `{${inner}}`;
+  } catch {
+    // Back-compat: older wire form was `text/plain+set:{1, 2, 3}` (Python
+    // set-literal string, not JSON). Pass it through as-is rather than crash.
+    return jsonList;
+  }
+}
+
+// Renderers for decoded non-string keys. Visual affordances match Python:
+// unquoted primitives, parens for tuple, `frozenset({...})` for frozenset,
+// and the `text/plain+str:` escape re-quotes the original string.
+const KEY_DECODERS: Record<string, (data: string) => React.ReactNode> = {
+  "text/plain+int:": (v) => <span>{v}</span>,
+  "text/plain+float:": (v) => <span>{v}</span>,
+  "text/plain+bool:": (v) => <span>{v === "True" ? "True" : "False"}</span>,
+  "text/plain+none:": () => <span>None</span>,
+  "text/plain+tuple:": (v) => <span>{formatTuplePayload(v)}</span>,
+  "text/plain+frozenset:": (v) => <span>{formatFrozensetPayload(v)}</span>,
+  "text/plain+str:": (v) => <span>"{v}"</span>,
+};
+
+function isEncodedKey(key: unknown): key is string {
+  return typeof key === "string" && key.startsWith(KEY_ENCODED_PREFIX);
+}
+
+// `@textea/json-viewer` drops quotes from integer-like string keys, which
+// makes the string `"2"` visually identical to the decoded int `2`. Match
+// the same keys the viewer strips and render them with explicit quotes.
+const INT_LIKE_STRING = /^-?\d+$/;
+
+const keyRenderer: JsonViewerKeyRenderer = Object.assign(
+  ({ path }: DataItemProps) => {
+    const key = path[path.length - 1];
+    if (typeof key !== "string") {
+      return <span>{String(key)}</span>;
+    }
+    if (isEncodedKey(key)) {
+      const [data, mimeType] = leafDataAndMimeType(key);
+      const render = KEY_DECODERS[`${mimeType}:`];
+      return render ? render(data) : <span>{key}</span>;
+    }
+    // Plain integer-like string — quote it so it's distinct from a decoded int.
+    return <span>"{key}"</span>;
+  },
+  {
+    when: ({ path }: DataItemProps) => {
+      const key = path[path.length - 1];
+      return (
+        isEncodedKey(key) ||
+        (typeof key === "string" && INT_LIKE_STRING.test(key))
+      );
+    },
+  },
+);
+
 const MIME_PREFIXES = Object.keys(LEAF_RENDERERS);
 const REPLACE_PREFIX = "<marimo-replace>";
 const REPLACE_SUFFIX = "</marimo-replace>";
@@ -413,8 +513,10 @@ function pythonJsonReplacer(_key: string, value: unknown): unknown {
       return `${REPLACE_PREFIX}(${leafData(value).slice(1, -1)})${REPLACE_SUFFIX}`;
     }
     if (value.startsWith("text/plain+set:")) {
-      // replace first and last characters [] with {}
-      return `${REPLACE_PREFIX}{${leafData(value).slice(1, -1)}}${REPLACE_SUFFIX}`;
+      return `${REPLACE_PREFIX}${formatSetPayload(leafData(value))}${REPLACE_SUFFIX}`;
+    }
+    if (value.startsWith("text/plain+frozenset:")) {
+      return `${REPLACE_PREFIX}${formatFrozensetPayload(leafData(value))}${REPLACE_SUFFIX}`;
     }
 
     if (MIME_PREFIXES.some((prefix) => value.startsWith(prefix))) {
@@ -428,10 +530,61 @@ function pythonJsonReplacer(_key: string, value: unknown): unknown {
   return value;
 }
 
+// Rewrite an encoded key string into the Python literal that should appear
+// unquoted in the copy output. Wrapping in REPLACE_PREFIX/SUFFIX makes the
+// final regex pass strip the surrounding JSON quotes.
+function decodeKeyForCopy(key: string): string {
+  const [data, mimeType] = leafDataAndMimeType(key);
+  const wrap = (s: string) => `${REPLACE_PREFIX}${s}${REPLACE_SUFFIX}`;
+  switch (`${mimeType}:`) {
+    case "text/plain+int:":
+      return wrap(data);
+    case "text/plain+float:":
+      if (data === "nan") {
+        return wrap("float('nan')");
+      }
+      if (data === "inf") {
+        return wrap("float('inf')");
+      }
+      if (data === "-inf") {
+        return wrap("-float('inf')");
+      }
+      return wrap(data);
+    case "text/plain+bool:":
+      return wrap(data === "True" ? "True" : "False");
+    case "text/plain+none:":
+      return wrap("None");
+    case "text/plain+tuple:":
+      return wrap(formatTuplePayload(data));
+    case "text/plain+frozenset:":
+      return wrap(formatFrozensetPayload(data));
+    case "text/plain+str:":
+      // `data` is the original Python string; it stays quoted.
+      return data;
+    default:
+      return key;
+  }
+}
+
+function rewriteEncodedKeys(value: unknown): unknown {
+  if (Array.isArray(value)) {
+    return value.map(rewriteEncodedKeys);
+  }
+  if (typeof value === "object" && value !== null) {
+    const out: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(value)) {
+      const newKey = isEncodedKey(k) ? decodeKeyForCopy(k) : k;
+      out[newKey] = rewriteEncodedKeys(v);
+    }
+    return out;
+  }
+  return value;
+}
+
 export function getCopyValue(value: unknown): string {
   // Because this results in valid json, it adds quotes around None and True/False.
   // but we want to make this look like Python, so we remove the quotes.
-  return JSON.stringify(value, pythonJsonReplacer, 2)
+  return JSON.stringify(rewriteEncodedKeys(value), pythonJsonReplacer, 2)
     .replaceAll(`"${REPLACE_PREFIX}`, "")
     .replaceAll(`${REPLACE_SUFFIX}"`, "");
 }