@marimo-team/frontend 0.23.7-dev9 → 0.23.7-dev90

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();

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

@@ -5,15 +5,22 @@ import { z } from "zod";
 import { toast } from "@/components/ui/use-toast";
 import { getNotebook, useCellActions } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
+import {
+  usePendingCutActions,
+  usePendingCutState,
+} from "@/core/cells/pending-cut-service";
+import type { CellConfig } from "@/core/network/types";
 import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
 
 // According to MDN, custom mimetypes should start with "web "
 const MARIMO_CELL_MIMETYPE = "web application/x-marimo-cell";
 
-interface ClipboardCellData {
+export interface ClipboardCellData {
   cells: {
     code: string;
+    name?: string;
+    config?: CellConfig;
   }[];
   version: "1.0";
 }
@@ -22,19 +29,51 @@ const ClipboardCellDataSchema = z.object({
   cells: z.array(
     z.object({
       code: z.string(),
+      name: z.string().optional(),
+      config: z
+        .object({
+          column: z.union([z.number(), z.null()]).optional(),
+          disabled: z.boolean().optional(),
+          hide_code: z.boolean().optional(),
+        })
+        .optional(),
     }),
   ),
   version: z.literal("1.0"),
 });
 
-// NOTE: We don't support Cut yet. We can wait for feedback before implementing.
-// It is a bit more complex as will need to:
-// - include id, outputs, and name
-// - delete the existing cell, but don't place on the undo stack
-// - don't want to invalidate downstream cells
+interface ClipboardCellInput {
+  code: string;
+  name?: string;
+  config?: CellConfig;
+}
+
+function toPlainText(cells: ClipboardCellInput[]): string {
+  return cells.map((cell) => cell.code).join("\n\n");
+}
+
+async function writeCellsToClipboard(
+  cells: ClipboardCellInput[],
+): Promise<void> {
+  const clipboardData: ClipboardCellData = {
+    cells: cells.map((cell) => ({
+      code: cell.code,
+      name: cell.name,
+      config: cell.config,
+    })),
+    version: "1.0",
+  };
+  const clipboardItem = new ClipboardItemBuilder()
+    .add(MARIMO_CELL_MIMETYPE, clipboardData)
+    .add("text/plain", toPlainText(cells))
+    .build();
+  await navigator.clipboard.write([clipboardItem]);
+}
 
 export function useCellClipboard() {
   const actions = useCellActions();
+  const pendingCutActions = usePendingCutActions();
+  const pendingCutState = usePendingCutState();
 
   const copyCells = useEvent(async (cellIds: CellId[]) => {
     const notebook = getNotebook();
@@ -43,35 +82,20 @@ export function useCellClipboard() {
       .filter(Boolean);
 
     if (cells.length === 0) {
-      // No cells to copy
       return;
     }
 
     try {
-      const clipboardData: ClipboardCellData = {
-        cells: cells.map((cell) => ({ code: cell.code })),
-        version: "1.0",
-      };
-
-      // Create plain text representation (joined by newlines)
-      const plainText = cells.map((cell) => cell.code).join("\n\n");
-
-      // Create clipboard item with both custom mimetype and plain text
-      const clipboardItem = new ClipboardItemBuilder()
-        .add(MARIMO_CELL_MIMETYPE, clipboardData)
-        .add("text/plain", plainText)
-        .build();
-
-      await navigator.clipboard.write([clipboardItem]);
-
+      await writeCellsToClipboard(cells);
+      pendingCutActions.clear();
       toastSuccess(cells.length);
     } catch (error) {
       Logger.error("Failed to copy cells to clipboard", error);
 
       // Fallback to simple text copy
       try {
-        const plainText = cells.map((cell) => cell.code).join("\n\n");
-        await copyToClipboard(plainText);
+        await copyToClipboard(toPlainText(cells));
+        pendingCutActions.clear();
         toastSuccess(cells.length);
       } catch {
         toastError();
@@ -79,12 +103,57 @@ export function useCellClipboard() {
     }
   });
 
+  const cutCells = useEvent(async (cellIds: CellId[]) => {
+    const notebook = getNotebook();
+    const validCellIds = cellIds.filter((cellId) => notebook.cellData[cellId]);
+    const cells = validCellIds.map((cellId) => notebook.cellData[cellId]);
+
+    if (cells.length === 0) {
+      return;
+    }
+
+    try {
+      await writeCellsToClipboard(cells);
+      pendingCutActions.markForCut({ cellIds: validCellIds });
+    } catch (error) {
+      Logger.error("Failed to cut cells to clipboard", error);
+      try {
+        await copyToClipboard(toPlainText(cells));
+        // Mark cells as pending cut instead of deleting immediately
+        pendingCutActions.markForCut({ cellIds: validCellIds });
+      } catch {
+        toastError();
+      }
+    }
+  });
+
   interface PasteOptions {
     before?: boolean;
   }
 
   const pasteAtCell = useEvent(async (cellId: CellId, opts?: PasteOptions) => {
     const { before = false } = opts ?? {};
+
+    // Check if we have pending cut cells (internal move)
+    if (pendingCutState.cellIds.size > 0) {
+      const pendingCellIds = [...pendingCutState.cellIds];
+      const notebook = getNotebook();
+      const previousPlacements = pendingCellIds.map((id) => {
+        const column = notebook.cellIds.findWithId(id);
+        return { columnId: column.id, index: column.indexOfOrThrow(id) };
+      });
+
+      actions.moveCellsRelativeTo({
+        cellIds: pendingCellIds,
+        targetCellId: cellId,
+        position: before ? "before" : "after",
+        previousPlacements,
+      });
+
+      pendingCutActions.clear();
+      return;
+    }
+
     try {
       const clipboardItems = await navigator.clipboard.read();
 
@@ -112,6 +181,9 @@ export function useCellClipboard() {
                 cellId: currentCellId,
                 before,
                 code: cell.code,
+                name: cell.name,
+                config: cell.config,
+                hideCode: cell.config?.hide_code,
                 autoFocus: true,
               });
             }
@@ -143,7 +215,9 @@ export function useCellClipboard() {
 
   return {
     copyCells,
+    cutCells,
     pasteAtCell,
+    clearPendingCut: pendingCutActions.clear,
   };
 }
 

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

@@ -16,6 +16,10 @@ import { cellIdsAtom, notebookAtom, useCellActions } from "@/core/cells/cells";
 import { useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
 import { HTMLCellId } from "@/core/cells/ids";
+import {
+  clearPendingCutAtom,
+  pendingCutCellIdsAtom,
+} from "@/core/cells/pending-cut-service";
 import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
 import { scrollCellIntoView } from "@/core/cells/scrollCellIntoView";
 import {
@@ -185,7 +189,7 @@ export function useCellNavigationProps(
   const temporarilyShownCodeActions = useTemporarilyShownCodeActions();
   const runCells = useRunCells();
   const keymapPreset = useAtomValue(keymapPresetAtom);
-  const { copyCells, pasteAtCell } = useCellClipboard();
+  const { copyCells, pasteAtCell, cutCells } = useCellClipboard();
   const rawSelectionActions = useCellSelectionActions();
   const isSelected = useIsCellSelected(cellId);
   const pendingDeleteService = usePendingDeleteService();
@@ -317,6 +321,12 @@ export function useCellNavigationProps(
         },
         // Clear selection
         Escape: () => {
+          // Clear pending cut state if any
+          const pendingCutCellIds = store.get(pendingCutCellIdsAtom);
+          if (pendingCutCellIds.size > 0) {
+            store.set(clearPendingCutAtom);
+            return true;
+          }
           if (isSelected) {
             selectionActions.clear();
             return true;
@@ -510,6 +520,10 @@ export function useCellNavigationProps(
           copyCells(cellIds);
           return true;
         }),
+        "command.cutCell": addSingleHandler((cellIds) => {
+          cutCells(cellIds);
+          return true;
+        }),
         "command.pasteCell": (cellIds) => {
           pasteAtCell(cellIds);
           return true;

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

@@ -27,6 +27,7 @@ import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import { isOutputEmpty } from "@/core/cells/outputs";
+import { useIsPendingCut } from "@/core/cells/pending-cut-service";
 import { autocompletionKeymap } from "@/core/codemirror/cm";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { CSSClasses } from "@/core/constants";
@@ -391,6 +392,7 @@ const EditableCellComponent = ({
   const deleteCell = useDeleteCellCallback();
   const runCell = useRunCell(cellId);
   const { sendStdin } = useRequestClient();
+  const isPendingCut = useIsPendingCut(cellId);
 
   const [languageAdapter, setLanguageAdapter] = useState<LanguageAdapterType>();
 
@@ -545,6 +547,7 @@ const EditableCellComponent = ({
     }),
     borderless:
       isMarkdownCodeHidden && hasOutput && !navigationProps["data-selected"],
+    "pending-cut": isPendingCut,
   });
 
   const handleRefactorWithAI: OnRefactorWithAI = useEvent(
@@ -737,6 +740,7 @@ const EditableCellComponent = ({
             <ConsoleOutput
               consoleOutputs={cellRuntime.consoleOutputs}
               stale={consoleOutputStale}
+              interrupted={cellRuntime.interrupted}
               // Empty name if serialization triggered
               cellName={cellRuntime.serialization ? "_" : cellData.name}
               onRefactorWithAI={handleRefactorWithAI}
@@ -1201,6 +1205,7 @@ const SetupCellComponent = ({
             <ConsoleOutput
               consoleOutputs={cellRuntime.consoleOutputs}
               stale={consoleOutputStale}
+              interrupted={cellRuntime.interrupted}
               // Don't show name
               cellName={"_"}
               onRefactorWithAI={handleRefactorWithAI}

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -85,6 +85,7 @@ interface Props {
   className?: string;
   consoleOutputs: WithResponse<OutputMessage>[];
   stale: boolean;
+  interrupted: boolean;
   debuggerActive: boolean;
   onRefactorWithAI?: OnRefactorWithAI;
   onClear?: () => void;
@@ -111,6 +112,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
   const {
     consoleOutputs: rawConsoleOutputs,
     stale,
+    interrupted,
     cellName,
     cellId,
     onSubmitDebugger,
@@ -280,6 +282,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
                 output={output.data}
                 response={output.response}
                 isPassword={isPassword}
+                interrupted={interrupted}
               />
             );
           }
@@ -359,9 +362,9 @@ const StdInput = (props: {
           if (e.key === "Enter" && !e.shiftKey) {
             if (value) {
               addToHistory(value);
-              onSubmit(value);
-              setValue("");
             }
+            onSubmit(value);
+            setValue("");
             e.preventDefault();
             e.stopPropagation();
           }
@@ -382,12 +385,27 @@ const StdInputWithResponse = (props: {
   output: string;
   response?: string;
   isPassword?: boolean;
+  interrupted?: boolean;
 }) => {
+  const { output, response, isPassword, interrupted } = props;
+  const hasResponse = response != null && response !== "";
+  const wasInterruptedWithoutResponse = interrupted && !hasResponse;
+
   return (
     <div className="flex gap-2 items-center">
-      {renderText(props.output)}
-      {!props.isPassword && (
-        <span className="text-(--sky-11)">{props.response}</span>
+      {renderText(output)}
+      {!isPassword && !wasInterruptedWithoutResponse && (
+        <span
+          className="inline-flex items-center gap-1 text-(--sky-11)"
+          aria-label="stdin response"
+        >
+          <ChevronRightIcon className="w-4 h-4 shrink-0 opacity-70" />
+          {hasResponse ? (
+            response
+          ) : (
+            <span className="italic opacity-70">(empty)</span>
+          )}
+        </span>
       )}
     </div>
   );