@marimo-team/islands 0.23.3-dev71 → 0.23.3-dev8

package/src/components/pages/home-page.tsx

@@ -14,7 +14,7 @@ import {
   SearchIcon,
 } from "lucide-react";
 import type React from "react";
-import { Suspense, use, useEffect, useRef, useState } from "react";
+import { Suspense, use, useEffect, useMemo, useRef, useState } from "react";
 import {
   type NodeApi,
   type NodeRendererProps,
@@ -22,16 +22,27 @@ import {
   type TreeApi,
 } from "react-arborist";
 import { useLocale } from "react-aria";
+import useEvent from "react-use-event-hook";
 import { MarkdownIcon } from "@/components/editor/cell/code/icons";
 import {
   FILE_ICON as FILE_TYPE_ICONS,
   type FileIconType as FileType,
   guessFileIconType as guessFileType,
 } from "@/components/editor/file-tree/file-icons";
+import { FileNameInput } from "@/components/editor/file-tree/file-name-input";
+import {
+  DeleteMenuItem,
+  DuplicateMenuItem,
+  FileActionsDropdown,
+  RenameMenuItem,
+  useFileOperations,
+  useNotebookFileActions,
+} from "@/components/editor/file-tree/file-operations";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import { DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
@@ -61,7 +72,7 @@ import {
   expandedFoldersAtom,
   includeMarkdownAtom,
   RunningNotebooksContext,
-  WorkspaceRootContext,
+  WorkspaceContext,
 } from "../home/state";
 import { Spinner } from "../icons/spinner";
 import { Input } from "../ui/input";
@@ -131,7 +142,7 @@ const HomePage: React.FC = () => {
             files={recents.files}
           />
           <ErrorBoundary>
-            <WorkspaceNotebooks />
+            <WorkspaceNotebooks onRefreshRecents={recentsResponse.refetch} />
           </ErrorBoundary>
         </div>
       </RunningNotebooksContext>
@@ -139,7 +150,9 @@ const HomePage: React.FC = () => {
   );
 };
 
-const WorkspaceNotebooks: React.FC = () => {
+const WorkspaceNotebooks: React.FC<{ onRefreshRecents: () => void }> = ({
+  onRefreshRecents,
+}) => {
   const { getWorkspaceFiles } = useRequestClient();
   const [includeMarkdown, setIncludeMarkdown] = useAtom(includeMarkdownAtom);
   const [searchText, setSearchText] = useState("");
@@ -154,6 +167,19 @@ const WorkspaceNotebooks: React.FC = () => {
     [includeMarkdown],
   );
 
+  // Fire-and-forget refresh of both the workspace tree and the "Recent
+  // notebooks" list — file mutations on the workspace tree can affect both,
+  // so we invalidate them together rather than having two refresh triggers.
+  const refreshWorkspace = useEvent(() => {
+    refetch();
+    onRefreshRecents();
+  });
+
+  const workspaceContextValue = useMemo(
+    () => ({ root: workspace?.root ?? "", refreshWorkspace }),
+    [workspace?.root, refreshWorkspace],
+  );
+
   if (isPending) {
     return <Spinner centered={true} size="xlarge" className="mt-6" />;
   }
@@ -167,7 +193,7 @@ const WorkspaceNotebooks: React.FC = () => {
   }
 
   return (
-    <WorkspaceRootContext value={workspace.root}>
+    <WorkspaceContext value={workspaceContextValue}>
       <div className="flex flex-col gap-2">
         {workspace.hasMore && (
           <Banner kind="warn" className="rounded p-4">
@@ -216,7 +242,7 @@ const WorkspaceNotebooks: React.FC = () => {
           <NotebookFileTree searchText={searchText} files={workspace.files} />
         </div>
       </div>
-    </WorkspaceRootContext>
+    </WorkspaceContext>
   );
 };
 
@@ -244,6 +270,8 @@ const NotebookFileTree: React.FC<{
   const [openState, setOpenState] = useAtom(expandedFoldersAtom);
   const openStateIsEmpty = Object.keys(openState).length === 0;
   const ref = useRef<TreeApi<FileInfo>>(undefined);
+  const { root, refreshWorkspace } = use(WorkspaceContext);
+  const { renameFile } = useFileOperations({ root });
 
   useEffect(() => {
     // If empty, collapse all
@@ -252,6 +280,21 @@ const NotebookFileTree: React.FC<{
     }
   }, [openStateIsEmpty]);
 
+  const handleRename = useEvent(async (id: string, name: string) => {
+    const node = ref.current?.get(id);
+    if (!node) {
+      toast({
+        title: "Failed",
+        description: `Node with id ${id} not found in the tree`,
+      });
+      return;
+    }
+    const result = await renameFile(node.data, name);
+    if (result) {
+      refreshWorkspace();
+    }
+  });
+
   if (files.length === 0) {
     return (
       <div className="flex flex-col px-5 py-10 items-center justify-center">
@@ -277,6 +320,9 @@ const NotebookFileTree: React.FC<{
         const prevOpen = openState[id] ?? false;
         setOpenState({ ...openState, [id]: !prevOpen });
       }}
+      onRename={async ({ id, name }) => {
+        await handleRename(id, name);
+      }}
       padding={5}
       rowHeight={35}
       indent={15}
@@ -286,7 +332,6 @@ const NotebookFileTree: React.FC<{
       // Disable interactions
       disableDrop={true}
       disableDrag={true}
-      disableEdit={true}
       disableMultiSelection={true}
     >
       {Node}
@@ -301,11 +346,24 @@ const Node = ({ node, style }: NodeRendererProps<FileInfo>) => {
 
   const Icon = FILE_TYPE_ICONS[fileType];
   const iconEl = <Icon className="w-5 h-5 shrink-0" strokeWidth={1.5} />;
-  const root = use(WorkspaceRootContext);
+  const { root } = use(WorkspaceContext);
+  const { runningNotebooks } = use(RunningNotebooksContext);
 
   const renderItem = () => {
     const itemClassName =
       "flex items-center pl-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l flex-1 overflow-hidden h-full pr-3 gap-2";
+
+    // Inline rename input; react-arborist flips `node.isEditing` when
+    // `node.edit()` is called from the FileActions menu.
+    if (node.isEditing) {
+      return (
+        <div className={itemClassName}>
+          {iconEl}
+          <FileNameInput node={node} />
+        </div>
+      );
+    }
+
     if (node.data.isDirectory) {
       return (
         <span className={itemClassName}>
@@ -322,6 +380,7 @@ const Node = ({ node, style }: NodeRendererProps<FileInfo>) => {
 
     const isMarkdown =
       relativePath.endsWith(".md") || relativePath.endsWith(".qmd");
+    const isRunning = runningNotebooks.has(relativePath);
 
     return (
       <a
@@ -334,10 +393,19 @@ const Node = ({ node, style }: NodeRendererProps<FileInfo>) => {
           {node.data.name}
           {isMarkdown && <MarkdownIcon className="ml-2 inline opacity-80" />}
         </span>
-        <SessionShutdownButton filePath={relativePath} />
+
+        <FileActions node={node} isRunning={isRunning} />
+        {/*
+          Trailing action slots. Using a fixed-width row here (rather than
+          conditionally rendered inline elements) keeps every row's right
+          edge aligned even though any individual slot may be empty.
+        */}
+        <div className="w-8 h-8 flex items-center justify-center shrink-0">
+          <SessionShutdownButton filePath={relativePath} />
+        </div>
         <ExternalLinkIcon
           size={20}
-          className="group-hover:opacity-100 opacity-0 text-primary"
+          className="group-hover:opacity-100 opacity-0 text-primary shrink-0"
         />
       </a>
     );
@@ -362,6 +430,44 @@ const Node = ({ node, style }: NodeRendererProps<FileInfo>) => {
   );
 };
 
+const FileActions = ({
+  node,
+  isRunning,
+}: {
+  node: NodeApi<FileInfo>;
+  isRunning: boolean;
+}) => {
+  const { root, refreshWorkspace } = use(WorkspaceContext);
+  const { handleRename, handleDuplicate, handleDelete } =
+    useNotebookFileActions({ node, root, onAfterChange: refreshWorkspace });
+
+  const lockedReason = isRunning
+    ? "Stop the notebook's kernel before renaming or deleting."
+    : undefined;
+
+  return (
+    <FileActionsDropdown
+      testId="workspace-more-button"
+      buttonClassName="w-8 h-8 p-0 shrink-0"
+      contentClassName="print:hidden w-fit min-w-[140px]"
+      preventDefaultOnTrigger={true}
+    >
+      <RenameMenuItem
+        onSelect={handleRename}
+        disabled={isRunning}
+        title={lockedReason}
+      />
+      <DuplicateMenuItem onSelect={handleDuplicate} />
+      <DropdownMenuSeparator />
+      <DeleteMenuItem
+        onSelect={handleDelete}
+        disabled={isRunning}
+        title={lockedReason}
+      />
+    </FileActionsDropdown>
+  );
+};
+
 const FolderArrow = ({ node }: { node: NodeApi<FileInfo> }) => {
   if (!node.data.isDirectory) {
     return <span className="w-5 h-5 shrink-0" />;

package/src/core/network/requests-network.ts

@@ -305,7 +305,6 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         .then(handleResponse);
     },
     sendDeleteFileOrFolder: async (request) => {
-      await waitForConnectionOpen();
       return getClient()
         .POST("/api/files/delete", {
           body: request,
@@ -313,7 +312,6 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         .then(handleResponse);
     },
     sendCopyFileOrFolder: async (request) => {
-      await waitForConnectionOpen();
       return getClient()
         .POST("/api/files/copy", {
           body: request,
@@ -321,7 +319,6 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         .then(handleResponse);
     },
     sendRenameFileOrFolder: async (request) => {
-      await waitForConnectionOpen();
       return getClient()
         .POST("/api/files/move", {
           body: request,

package/src/utils/__tests__/path.test.ts

@@ -9,6 +9,26 @@ describe("Paths", () => {
     expect(Paths.isAbsolute("/user/docs/Letter.txt")).toBe(true);
     expect(Paths.isAbsolute("C:\\user\\docs\\Letter.txt")).toBe(true);
     expect(Paths.isAbsolute("user/docs/Letter.txt")).toBe(false);
+
+    // Any Windows drive letter, either separator, and any case
+    expect(Paths.isAbsolute("D:\\Users\\x\\a.py")).toBe(true);
+    expect(Paths.isAbsolute("z:/tmp/file")).toBe(true);
+    expect(Paths.isAbsolute("e:\\")).toBe(true);
+
+    // UNC / server paths
+    expect(Paths.isAbsolute("\\\\server\\share\\file")).toBe(true);
+
+    // URI schemes
+    expect(Paths.isAbsolute("s3://bucket/key")).toBe(true);
+    expect(Paths.isAbsolute("gs://bucket/key")).toBe(true);
+    expect(Paths.isAbsolute("file:///tmp/file")).toBe(true);
+    expect(Paths.isAbsolute("http://example.com/x")).toBe(true);
+
+    // Negative cases
+    expect(Paths.isAbsolute("C:file")).toBe(false); // drive without separator
+    expect(Paths.isAbsolute("notebook.py")).toBe(false);
+    expect(Paths.isAbsolute("./relative")).toBe(false);
+    expect(Paths.isAbsolute("")).toBe(false);
   });
 
   describe("dirname", () => {

package/src/utils/pathUtils.test.ts

@@ -1,6 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
-import { fileSplit, getProtocolAndParentDirectories } from "./pathUtils";
+import {
+  fileSplit,
+  getProtocolAndParentDirectories,
+  makeDuplicateName,
+  resolvePaths,
+  toAbsolutePath,
+} from "./pathUtils";
 
 describe("getProtocolAndParentDirectories", () => {
   it("should extract protocol and list parent directories correctly", () => {
@@ -111,3 +117,137 @@ describe("fileSplit", () => {
     ]);
   });
 });
+
+describe("makeDuplicateName", () => {
+  it("appends _copy before the extension", () => {
+    expect(makeDuplicateName("notebook.py")).toBe("notebook_copy.py");
+    expect(makeDuplicateName("foo.tar.gz")).toBe("foo.tar_copy.gz");
+  });
+
+  it("appends _copy for extensionless names", () => {
+    expect(makeDuplicateName("README")).toBe("README_copy");
+  });
+});
+
+describe("toAbsolutePath", () => {
+  it("joins relative paths against the root", () => {
+    expect(toAbsolutePath("notebooks/a.py", "/workspaces/marimo")).toBe(
+      "/workspaces/marimo/notebooks/a.py",
+    );
+  });
+
+  it("returns absolute POSIX paths unchanged", () => {
+    expect(toAbsolutePath("/abs/a.py", "/workspaces/marimo")).toBe("/abs/a.py");
+  });
+
+  it("returns absolute Windows paths unchanged", () => {
+    expect(toAbsolutePath("C:\\Users\\x\\a.py", "C:\\Users\\marimo")).toBe(
+      "C:\\Users\\x\\a.py",
+    );
+  });
+
+  it("joins relative paths using the Windows delimiter", () => {
+    expect(toAbsolutePath("a.py", "C:\\Users\\marimo")).toBe(
+      "C:\\Users\\marimo\\a.py",
+    );
+  });
+});
+
+describe("resolvePaths", () => {
+  it("resolves relative paths against the root", () => {
+    expect(
+      resolvePaths({
+        path: "notebooks/notebook.py",
+        name: "notebook_copy.py",
+        root: "/workspaces/marimo",
+      }),
+    ).toEqual({
+      path: "/workspaces/marimo/notebooks/notebook.py",
+      newPath: "/workspaces/marimo/notebooks/notebook_copy.py",
+    });
+  });
+
+  it("keeps absolute source paths untouched", () => {
+    expect(
+      resolvePaths({
+        path: "/abs/path/notebook.py",
+        name: "notebook_copy.py",
+        root: "/workspaces/marimo",
+      }),
+    ).toEqual({
+      path: "/abs/path/notebook.py",
+      newPath: "/abs/path/notebook_copy.py",
+    });
+  });
+
+  it("handles Windows roots for relative paths", () => {
+    expect(
+      resolvePaths({
+        path: "notebook.py",
+        name: "notebook_copy.py",
+        root: "C:\\Users\\marimo",
+      }),
+    ).toEqual({
+      path: "C:\\Users\\marimo\\notebook.py",
+      newPath: "C:\\Users\\marimo\\notebook_copy.py",
+    });
+  });
+
+  it("handles Windows absolute source paths", () => {
+    // The tricky case: `path` is an absolute Windows path with a drive letter,
+    // so it must be detected by `Paths.isAbsolute` AND the deliminator must be
+    // picked up from the root so the join uses backslashes.
+    expect(
+      resolvePaths({
+        path: "C:\\Users\\marimo\\folder\\notebook.py",
+        name: "notebook_copy.py",
+        root: "C:\\Users\\marimo",
+      }),
+    ).toEqual({
+      path: "C:\\Users\\marimo\\folder\\notebook.py",
+      newPath: "C:\\Users\\marimo\\folder\\notebook_copy.py",
+    });
+  });
+
+  it("keeps the file in its current directory when renaming", () => {
+    expect(
+      resolvePaths({
+        path: "/root/a/b/file.py",
+        name: "renamed.py",
+        root: "/root",
+      }),
+    ).toEqual({
+      path: "/root/a/b/file.py",
+      newPath: "/root/a/b/renamed.py",
+    });
+  });
+
+  it("handles an empty root with an absolute POSIX path", () => {
+    // Callers that already hold absolute paths pass `root: ""`. In that case
+    // the delimiter must be inferred from the path itself, not from `""` (which
+    // would otherwise default to Windows backslashes).
+    expect(
+      resolvePaths({
+        path: "/abs/path/file.py",
+        name: "renamed.py",
+        root: "",
+      }),
+    ).toEqual({
+      path: "/abs/path/file.py",
+      newPath: "/abs/path/renamed.py",
+    });
+  });
+
+  it("handles an empty root with an absolute Windows path", () => {
+    expect(
+      resolvePaths({
+        path: "C:\\Users\\marimo\\file.py",
+        name: "renamed.py",
+        root: "",
+      }),
+    ).toEqual({
+      path: "C:\\Users\\marimo\\file.py",
+      newPath: "C:\\Users\\marimo\\renamed.py",
+    });
+  });
+});

package/src/utils/pathUtils.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { type FilePath, Paths, PathBuilder } from "./paths";
+
 /**
  * Get the protocol and parent directories of a path.
  */
@@ -74,3 +76,47 @@ export function fileSplit(path: string): [name: string, extension: string] {
   const extension = lastDotIndex > 0 ? path.slice(lastDotIndex) : "";
   return [name, extension];
 }
+
+/**
+ * Build the "_copy" filename used for duplicate operations.
+ * e.g. `foo.py` → `foo_copy.py`, `README` → `README_copy`.
+ */
+export function makeDuplicateName(name: string): string {
+  const [base, extension] = fileSplit(name);
+  return `${base}_copy${extension}`;
+}
+
+/**
+ * Return `path` as an absolute path, joining against `root` when it's
+ * workspace-relative. `root`'s delimiter determines the join style so
+ * Windows and POSIX paths both behave correctly.
+ */
+export function toAbsolutePath(path: string, root: string): FilePath {
+  if (Paths.isAbsolute(path)) {
+    return path as FilePath;
+  }
+  return PathBuilder.guessDeliminator(root).join(root, path as FilePath);
+}
+
+/**
+ * Resolve absolute current/new paths for a rename- or copy-style operation.
+ * Given a node's current `path` (absolute or workspace-relative) and a
+ * desired new `name` (basename only), returns the absolute source and the
+ * absolute destination, keeping the file in the same parent directory.
+ */
+export function resolvePaths({
+  path,
+  name,
+  root,
+}: {
+  path: string;
+  name: string;
+  root: string;
+}): { path: FilePath; newPath: FilePath } {
+  const absPath = toAbsolutePath(path, root);
+  // When `root` is empty (callers with already-absolute paths), fall back to
+  // the resolved absolute path so we don't default to the Windows delimiter.
+  const pathBuilder = PathBuilder.guessDeliminator(root || absPath);
+  const newPath = pathBuilder.join(pathBuilder.dirname(absPath), name);
+  return { path: absPath, newPath };
+}

package/src/utils/paths.ts

@@ -4,10 +4,18 @@ import type { TypedString } from "./typed";
 
 export type FilePath = TypedString<"FilePath">;
 
+// Windows drive-letter prefix like `C:\`, `d:/`, `Z:\`.
+const WINDOWS_DRIVE_PREFIX = /^[A-Za-z]:[/\\]/;
+// URI scheme prefix like `s3://`, `gs://`, `http://`, `file://`.
+const URI_SCHEME_PREFIX = /^[A-Za-z][\dA-Za-z+.-]*:\/\//;
+
 export const Paths = {
   isAbsolute: (path: string): boolean => {
     return (
-      path.startsWith("/") || path.startsWith("\\") || path.startsWith("C:\\")
+      path.startsWith("/") ||
+      path.startsWith("\\") ||
+      WINDOWS_DRIVE_PREFIX.test(path) ||
+      URI_SCHEME_PREFIX.test(path)
     );
   },
   dirname: (path: string) => {