@marimo-team/islands 0.23.7-dev2 → 0.23.7-dev20

package/src/components/editor/controls/Controls.tsx

@@ -27,6 +27,7 @@ import { Functions } from "@/utils/functions";
 import {
   canUndoDeletesAtom,
   needsRunAtom,
+  undoLabelAtom,
   useCellActions,
 } from "../../../core/cells/cells";
 import { ConfigButton } from "../../app-config/app-config-button";
@@ -56,6 +57,7 @@ export const Controls = ({
   running,
 }: ControlsProps): JSX.Element => {
   const undoAvailable = useAtomValue(canUndoDeletesAtom);
+  const undoLabel = useAtomValue(undoLabelAtom);
   const needsRun = useAtomValue(needsRunAtom);
   const { undoDeleteCell } = useCellActions();
   const closed = connectionState === WebSocketState.CLOSED;
@@ -63,7 +65,7 @@ export const Controls = ({
   let undoControl: JSX.Element | null = null;
   if (!closed && undoAvailable) {
     undoControl = (
-      <Tooltip content="Undo cell deletion">
+      <Tooltip content={undoLabel}>
         <Button
           data-testid="undo-delete-cell"
           size="medium"

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

@@ -11,6 +11,9 @@ import { prettyError } from "@/utils/errors";
 import { Functions } from "@/utils/functions";
 import { type FilePath, PathBuilder } from "@/utils/paths";
 import { resolvePaths } from "@/utils/pathUtils";
+import { mapWithConcurrency } from "@/utils/semaphore";
+
+const FILE_OP_CONCURRENCY = 5;
 
 /**
  * Normalized result of a file mutation: the server response when successful,
@@ -159,28 +162,26 @@ export class RequestingTree {
       ? (this.delegate.find(parentId)?.data.path ?? parentId)
       : this.rootPath;
 
-    await Promise.all(
-      fromIds.map(async (id) => {
-        const node = this.delegate.find(id);
-        if (!node) {
-          return;
-        }
-        const originalPath = node.data.path;
-        const newPath = this.path.join(
-          parentPath,
-          this.path.basename(originalPath as FilePath),
-        );
-        const result = await this.callbacks
-          .renameFileOrFolder({ path: originalPath, newPath })
-          .then(handleFileResponse);
-        if (!result) {
-          return;
-        }
+    await mapWithConcurrency(fromIds, FILE_OP_CONCURRENCY, async (id) => {
+      const node = this.delegate.find(id);
+      if (!node) {
+        return;
+      }
+      const originalPath = node.data.path;
+      const newPath = this.path.join(
+        parentPath,
+        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 } });
-      }),
-    );
+      this.delegate.move({ id, parentId, index: 0 });
+      this.delegate.update({ id, changes: { path: newPath } });
+    });
 
     this.onChange(this.delegate.data);
 
@@ -262,11 +263,12 @@ export class RequestingTree {
       this.rootPath,
       ...ids.map((id) => this.delegate.find(id)?.data.path),
     ].filter(Boolean);
-    // Request all folders in parallel, and catch any errors
-    const data = await Promise.all(
-      openFolders.map((path) =>
+    // Request open folders with bounded concurrency; swallow per-folder errors.
+    const data = await mapWithConcurrency(
+      openFolders,
+      FILE_OP_CONCURRENCY,
+      (path) =>
         this.callbacks.listFiles({ path: path }).catch(() => ({ files: [] })),
-      ),
     );
 
     for (const [idx, openFolder] of openFolders.entries()) {

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

@@ -3,13 +3,14 @@
 import { type DropzoneOptions, useDropzone } from "react-dropzone";
 import { toast } from "@/components/ui/use-toast";
 import { useRequestClient } from "@/core/network/requests";
-import { serializeBlob } from "@/utils/blob";
 import { withLoadingToast } from "@/utils/download";
 import { Logger } from "@/utils/Logger";
 import { type FilePath, PathBuilder } from "@/utils/paths";
+import { mapWithConcurrency } from "@/utils/semaphore";
 import { refreshRoot } from "./state";
 
 const MAX_SIZE = 1024 * 1024 * 100; // 100MB
+const UPLOAD_CONCURRENCY = 5;
 
 export function useFileExplorerUpload(options: DropzoneOptions = {}) {
   const { sendCreateFileOrFolder } = useRequestClient();
@@ -59,30 +60,28 @@ export function useFileExplorerUpload(options: DropzoneOptions = {}) {
         loadingTitle,
         async (progress) => {
           progress.addTotal(acceptedFiles.length);
-          for (const file of acceptedFiles) {
-            // We strip the leading slash since File.path can return
-            // `/path/to/file`.
-            const filePath = stripLeadingSlash(getPath(file));
-            let directoryPath = "" as FilePath;
-            if (filePath) {
-              directoryPath =
-                PathBuilder.guessDeliminator(filePath).dirname(filePath);
-            }
+          await mapWithConcurrency(
+            acceptedFiles,
+            UPLOAD_CONCURRENCY,
+            async (file) => {
+              // We strip the leading slash since File.path can return
+              // `/path/to/file`.
+              const filePath = stripLeadingSlash(getPath(file));
+              let directoryPath = "" as FilePath;
+              if (filePath) {
+                directoryPath =
+                  PathBuilder.guessDeliminator(filePath).dirname(filePath);
+              }
 
-            // File contents are sent base64-encoded to support arbitrary
-            // bytes data
-            //
-            // get the raw base64-encoded data from a string starting with
-            // data:*/*;base64,
-            const base64 = (await serializeBlob(file)).split(",")[1];
-            await sendCreateFileOrFolder({
-              path: directoryPath,
-              type: "file",
-              name: file.name,
-              contents: base64,
-            });
-            progress.increment(1);
-          }
+              await sendCreateFileOrFolder({
+                path: directoryPath,
+                type: "file",
+                name: file.name,
+                file,
+              });
+              progress.increment(1);
+            },
+          );
           await refreshRoot();
         },
         onFinish,

package/src/components/editor/header/__tests__/status.test.tsx

@@ -0,0 +1,108 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { fireEvent, render } from "@testing-library/react";
+import { createStore, Provider as JotaiProvider } from "jotai";
+import type React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { viewStateAtom } from "@/core/mode";
+import {
+  type ConnectionStatus,
+  WebSocketClosedReason,
+  WebSocketState,
+} from "@/core/websocket/types";
+import { StatusOverlay } from "../status";
+
+function renderOverlay(
+  connection: ConnectionStatus,
+  onReconnect?: () => void,
+): ReturnType<typeof render> {
+  const store = createStore();
+  store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+  const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+    <JotaiProvider store={store}>
+      <TooltipProvider>{children}</TooltipProvider>
+    </JotaiProvider>
+  );
+  return render(
+    <StatusOverlay
+      connection={connection}
+      isRunning={false}
+      onReconnect={onReconnect}
+    />,
+    { wrapper },
+  );
+}
+
+describe("StatusOverlay disconnect indicator", () => {
+  it("invokes onReconnect when the disconnect icon is clicked", () => {
+    const onReconnect = vi.fn();
+    const { getByTestId } = renderOverlay(
+      {
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+        reason: "kernel not found",
+      },
+      onReconnect,
+    );
+
+    const icon = getByTestId("disconnected-indicator") as HTMLButtonElement;
+    expect(icon.tagName).toBe("BUTTON");
+    expect(icon.disabled).toBe(false);
+    expect(icon.getAttribute("aria-label")).toBe("Reconnect to app");
+    fireEvent.click(icon);
+    expect(onReconnect).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders a disabled button when no onReconnect is provided", () => {
+    const { getByTestId } = renderOverlay({
+      state: WebSocketState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
+      reason: "kernel not found",
+    });
+
+    const button = getByTestId("disconnected-indicator");
+    expect((button as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it.each([
+    [
+      WebSocketClosedReason.MALFORMED_QUERY,
+      "the kernel did not recognize a request; please file a bug with marimo",
+    ],
+    [
+      WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      "Failed to start kernel sandbox",
+    ],
+  ])(
+    "renders a disabled button for non-recoverable close reason %s",
+    (code, reason) => {
+      const onReconnect = vi.fn();
+      const { getByTestId } = renderOverlay(
+        { state: WebSocketState.CLOSED, code, reason },
+        onReconnect,
+      );
+
+      const button = getByTestId("disconnected-indicator") as HTMLButtonElement;
+      expect(button.disabled).toBe(true);
+      fireEvent.click(button);
+      expect(onReconnect).not.toHaveBeenCalled();
+    },
+  );
+
+  it("does not render the disconnect icon when another tab has taken over", () => {
+    const onReconnect = vi.fn();
+    const { queryByTestId } = renderOverlay(
+      {
+        state: WebSocketState.CLOSED,
+        code: WebSocketClosedReason.ALREADY_RUNNING,
+        reason: "another browser tab is already connected to the kernel",
+        canTakeover: true,
+      },
+      onReconnect,
+    );
+
+    expect(queryByTestId("disconnected-indicator")).toBeNull();
+  });
+});

package/src/components/editor/header/status.tsx

@@ -7,16 +7,26 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { notebookScrollToRunning } from "@/core/cells/actions";
 import { onlyScratchpadIsRunningAtom } from "@/core/cells/cells";
 import { viewStateAtom } from "@/core/mode";
-import { type ConnectionStatus, WebSocketState } from "@/core/websocket/types";
+import {
+  type ConnectionStatus,
+  WebSocketClosedReason,
+  WebSocketState,
+} from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 
 export const StatusOverlay: React.FC<{
   connection: ConnectionStatus;
   isRunning: boolean;
-}> = ({ connection, isRunning }) => {
+  onReconnect?: () => void;
+}> = ({ connection, isRunning, onReconnect }) => {
   const { mode } = useAtomValue(viewStateAtom);
   const isClosed = connection.state === WebSocketState.CLOSED;
   const isOpen = connection.state === WebSocketState.OPEN;
+  // Only KERNEL_DISCONNECTED is recoverable by a retry. Other terminal
+  // reasons (MALFORMED_QUERY, KERNEL_STARTUP_ERROR) would deterministically
+  // fail the same way; ALREADY_RUNNING is handled by `LockedIcon` below.
+  const canReconnect =
+    isClosed && connection.code === WebSocketClosedReason.KERNEL_DISCONNECTED;
 
   return (
     <>
@@ -28,7 +38,11 @@ export const StatusOverlay: React.FC<{
         )}
       >
         {isOpen && isRunning && <RunningIcon />}
-        {isClosed && !connection.canTakeover && <DisconnectedIcon />}
+        {isClosed && !connection.canTakeover && (
+          <DisconnectedIcon
+            onReconnect={canReconnect ? onReconnect : undefined}
+          />
+        )}
         {isClosed && connection.canTakeover && <LockedIcon />}
       </div>
     </>
@@ -37,13 +51,33 @@ export const StatusOverlay: React.FC<{
 
 const topLeftStatus = "print:hidden pointer-events-auto hover:cursor-pointer";
 
-const DisconnectedIcon = () => (
-  <Tooltip content="App disconnected">
-    <div className={topLeftStatus}>
-      <UnlinkIcon className="w-[25px] h-[25px] text-(--red-11)" />
-    </div>
-  </Tooltip>
-);
+const DisconnectedIcon: React.FC<{ onReconnect?: () => void }> = ({
+  onReconnect,
+}) => {
+  const disabled = !onReconnect;
+  return (
+    <Tooltip
+      content={
+        disabled ? "App disconnected" : "App disconnected — click to reconnect"
+      }
+    >
+      {/* Wrapper span keeps the tooltip reachable when the button is
+          disabled — a disabled <button> swallows pointer events. */}
+      <span tabIndex={disabled ? 0 : -1}>
+        <button
+          type="button"
+          className={cn(topLeftStatus, "bg-transparent border-0 p-0")}
+          aria-label={disabled ? "App disconnected" : "Reconnect to app"}
+          data-testid="disconnected-indicator"
+          onClick={onReconnect}
+          disabled={disabled}
+        >
+          <UnlinkIcon className="w-[25px] h-[25px] text-(--red-11)" />
+        </button>
+      </span>
+    </Tooltip>
+  );
+};
 
 const LockedIcon = () => (
   <Tooltip content="Notebook locked">

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -20,6 +20,17 @@ vi.mock("@/utils/Logger", () => ({
   Logger: Mocks.quietLogger(),
 }));
 
+const mockClearPendingCut = vi.hoisted(() => vi.fn());
+vi.mock("@/core/cells/pending-cut-service", () => ({
+  usePendingCutActions: () => ({
+    markForCut: vi.fn(),
+    clear: mockClearPendingCut,
+  }),
+  usePendingCutState: () => ({
+    cellIds: new Set(),
+  }),
+}));
+
 import { MockNotebook } from "@/__mocks__/notebook";
 import { toast } from "@/components/ui/use-toast";
 import { getNotebook, useCellActions } from "@/core/cells/cells";
@@ -198,6 +209,101 @@ describe("useCellClipboard", () => {
         description: "Cell has been copied to clipboard.",
       });
     });
+
+    it("should clear pending cut when copy succeeds", async () => {
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.copyCells([mockCellId1]);
+      });
+
+      expect(mockClearPendingCut).toHaveBeenCalled();
+    });
+
+    it("should clear pending cut when copy falls back to writeText", async () => {
+      mockClipboard.write.mockRejectedValue(new Error("Write failed"));
+      mockClipboard.writeText.mockResolvedValue(undefined);
+
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.copyCells([mockCellId1]);
+      });
+
+      expect(mockClearPendingCut).toHaveBeenCalled();
+    });
+  });
+
+  describe("cutCells", () => {
+    it("should cut single cell to clipboard with custom mimetype and plain text", async () => {
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.cutCells([mockCellId1]);
+      });
+
+      expect(mockClipboard.write).toHaveBeenCalledWith([
+        expect.objectContaining({
+          types: ["web application/x-marimo-cell", "text/plain"],
+        }),
+      ]);
+    });
+
+    it("should cut multiple cells to clipboard with custom mimetype and plain text", async () => {
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.cutCells([mockCellId1, mockCellId2]);
+      });
+
+      expect(mockClipboard.write).toHaveBeenCalledWith([
+        expect.objectContaining({
+          types: ["web application/x-marimo-cell", "text/plain"],
+        }),
+      ]);
+    });
+
+    it("should not write when no cells found", async () => {
+      asMock(getNotebook).mockReturnValue(MockNotebook.notebookState());
+
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.cutCells([mockCellId1]);
+      });
+
+      expect(mockClipboard.write).not.toHaveBeenCalled();
+    });
+
+    it("should fallback to writeText when clipboard.write fails", async () => {
+      mockClipboard.write.mockRejectedValue(new Error("Write failed"));
+      mockClipboard.writeText.mockResolvedValue(undefined);
+
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.cutCells([mockCellId1]);
+      });
+
+      expect(mockClipboard.write).toHaveBeenCalled();
+      expect(mockClipboard.writeText).toHaveBeenCalledWith(mockCellCode1);
+    });
+
+    it("should show error toast when both clipboard methods fail", async () => {
+      mockClipboard.write.mockRejectedValue(new Error("Write failed"));
+      mockClipboard.writeText.mockRejectedValue(new Error("WriteText failed"));
+
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.cutCells([mockCellId1]);
+      });
+
+      expect(Logger.error).toHaveBeenCalledWith(
+        "Failed to cut cells to clipboard",
+        expect.any(Error),
+      );
+    });
   });
 
   describe("pasteCell", () => {

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -44,6 +44,11 @@ vi.mock("../../cell/useRunCells", () => ({
   useRunCells: vi.fn(),
 }));
 
+vi.mock("../../cell/useDeleteCell", () => ({
+  useDeleteCellCallback: vi.fn(),
+  useDeleteManyCellsCallback: vi.fn(),
+}));
+
 vi.mock("../clipboard", () => ({
   useCellClipboard: vi.fn(),
 }));
@@ -112,6 +117,7 @@ const mockSaveIfNotebookIsPersistent = vi.fn();
 const mockSaveNotebook = vi.fn();
 const mockRunCell = vi.fn();
 const mockCopyCell = vi.fn();
+const mockCutCell = vi.fn().mockResolvedValue(undefined);
 const mockPasteCell = vi.fn();
 
 const mockCellActions = MockNotebook.cellActions({
@@ -165,7 +171,9 @@ describe("useCellNavigationProps", () => {
     mockUseRunCells.mockReturnValue(mockRunCell);
     mockUseCellClipboard.mockReturnValue({
       copyCells: mockCopyCell,
+      cutCells: mockCutCell,
       pasteAtCell: mockPasteCell,
+      clearPendingCut: vi.fn(),
     });
 
     // Setup default config in store
@@ -237,6 +245,45 @@ describe("useCellNavigationProps", () => {
       expect(mockEvent.preventDefault).toHaveBeenCalled();
     });
 
+    it("should cut cell when 'x' key is pressed", async () => {
+      const { result } = renderWithProvider(() =>
+        useCellNavigationProps(mockCellId, options),
+      );
+
+      const mockEvent = Mocks.keyboardEvent({ key: "x" });
+
+      await act(async () => {
+        result.current.onKeyDown?.(mockEvent);
+        await Promise.resolve();
+      });
+
+      expect(mockCutCell).toHaveBeenCalledWith([mockCellId]);
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it("should cut multiple selected cells when 'x' key is pressed", async () => {
+      const selectionActions = setupSelection();
+      selectionActions.select({ cellId: cellId1 });
+      selectionActions.extend({
+        cellId: cellId2,
+        allCellIds: store.get(notebookAtom).cellIds,
+      });
+
+      const { result } = renderWithProvider(() =>
+        useCellNavigationProps(cellId1, options),
+      );
+
+      const mockEvent = Mocks.keyboardEvent({ key: "x" });
+
+      await act(async () => {
+        result.current.onKeyDown?.(mockEvent);
+        await Promise.resolve();
+      });
+
+      expect(mockCutCell).toHaveBeenCalledWith([cellId1, cellId2]);
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
     it("should paste cell when 'v' key is pressed", () => {
       const { result } = renderWithProvider(() =>
         useCellNavigationProps(mockCellId, options),
@@ -775,6 +822,29 @@ describe("useCellNavigationProps", () => {
       expect(mockEvent.preventDefault).toHaveBeenCalled();
     });
 
+    it("should cut multiple cells when multiple cells selected", () => {
+      // Set up selection of multiple cells
+      const selectionActions = setupSelection();
+      selectionActions.select({ cellId: cellId1 });
+      selectionActions.extend({
+        cellId: cellId3,
+        allCellIds: store.get(notebookAtom).cellIds,
+      });
+
+      const { result } = renderWithProvider(() =>
+        useCellNavigationProps(cellId2, options),
+      );
+
+      const mockEvent = Mocks.keyboardEvent({ key: "x" });
+
+      act(() => {
+        result.current.onKeyDown?.(mockEvent);
+      });
+
+      expect(mockCutCell).toHaveBeenCalledWith([cellId1, cellId2, cellId3]);
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
     it("should move multiple cells up when multiple cells selected", () => {
       // Set up selection of multiple cells
       const selectionActions = setupSelection();