address review comments from #8019 (#9549)

<img width="1055" height="321" alt="image"
src="https://github.com/user-attachments/assets/53ab00ed-4bd5-4fbf-990f-c4029b69541d"
/>

## 📝 Summary

Follow-up to #8019, which merged before a few unresolved review threads
were addressed. This PR addresses the actionable items.

Closes #

## 📋 Pre-Review Checklist

- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [x] Any AI generated code has been reviewed line-by-line by the human
PR author, who stands by it.
- [x] Video or media evidence is provided for any visual changes
(optional). <!-- PR is more likely to be merged if evidence is provided
for changes made -->

## ✅ Merge Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [x] Documentation has been updated where applicable, including
docstrings for API changes.
- [x] Tests have been added for the changes made.

Made with [Cursor](https://cursor.com)

Author: Light2Dark

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

@@ -28,7 +28,6 @@ vi.mock("@/core/cells/pending-cut-service", () => ({
   }),
   usePendingCutState: () => ({
     cellIds: new Set(),
-    clipboardData: null,
   }),
 }));
 

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

@@ -42,9 +42,19 @@ const ClipboardCellDataSchema = z.object({
   version: z.literal("1.0"),
 });
 
-function buildClipboardPayload(
-  cells: Array<{ code: string; name?: string; config?: CellConfig }>,
-): { clipboardData: ClipboardCellData; plainText: string } {
+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,
@@ -53,17 +63,9 @@ function buildClipboardPayload(
     })),
     version: "1.0",
   };
-  const plainText = cells.map((cell) => cell.code).join("\n\n");
-  return { clipboardData, plainText };
-}
-
-async function writeCellsToClipboard(
-  clipboardData: ClipboardCellData,
-  plainText: string,
-): Promise<void> {
   const clipboardItem = new ClipboardItemBuilder()
     .add(MARIMO_CELL_MIMETYPE, clipboardData)
-    .add("text/plain", plainText)
+    .add("text/plain", toPlainText(cells))
     .build();
   await navigator.clipboard.write([clipboardItem]);
 }
@@ -80,22 +82,19 @@ export function useCellClipboard() {
       .filter(Boolean);
 
     if (cells.length === 0) {
-      // No cells to copy
       return;
     }
 
-    const { clipboardData, plainText } = buildClipboardPayload(cells);
-
     try {
-      await writeCellsToClipboard(clipboardData, plainText);
+      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 {
-        await copyToClipboard(plainText);
+        await copyToClipboard(toPlainText(cells));
         pendingCutActions.clear();
         toastSuccess(cells.length);
       } catch {
@@ -110,21 +109,18 @@ export function useCellClipboard() {
     const cells = validCellIds.map((cellId) => notebook.cellData[cellId]);
 
     if (cells.length === 0) {
-      // No cells to cut
       return;
     }
 
-    const { clipboardData, plainText } = buildClipboardPayload(cells);
-
     try {
-      await writeCellsToClipboard(clipboardData, plainText);
-      pendingCutActions.markForCut({ cellIds: validCellIds, clipboardData });
+      await writeCellsToClipboard(cells);
+      pendingCutActions.markForCut({ cellIds: validCellIds });
     } catch (error) {
       Logger.error("Failed to cut cells to clipboard", error);
       try {
-        await copyToClipboard(plainText);
+        await copyToClipboard(toPlainText(cells));
         // Mark cells as pending cut instead of deleting immediately
-        pendingCutActions.markForCut({ cellIds: validCellIds, clipboardData });
+        pendingCutActions.markForCut({ cellIds: validCellIds });
       } catch {
         toastError();
       }

frontend/src/core/cells/__tests__/cells.test.ts

@@ -622,7 +622,7 @@ describe("cell reducer", () => {
       before: false,
     });
     actions.createNewCell({
-      cellId: "1" as CellId,
+      cellId: cellId("1"),
       before: false,
     });
     expect(formatCells(state)).toMatchInlineSnapshot(`
@@ -637,8 +637,8 @@ describe("cell reducer", () => {
 
     // Move first two cells after the third
     actions.moveCellsRelativeTo({
-      cellIds: [firstCellId, "1" as CellId],
-      targetCellId: "2" as CellId,
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
       position: "after",
     });
     expect(formatCells(state)).toMatchInlineSnapshot(`
@@ -658,7 +658,7 @@ describe("cell reducer", () => {
       before: false,
     });
     actions.createNewCell({
-      cellId: "1" as CellId,
+      cellId: cellId("1"),
       before: false,
     });
     expect(formatCells(state)).toMatchInlineSnapshot(`
@@ -682,14 +682,14 @@ describe("cell reducer", () => {
       {
         columnId: col.id,
         index: col.indexOfOrThrow(
-          "1" as CellId,
+          cellId("1"),
         ) as import("@/utils/id-tree").CellIndex,
       },
     ];
 
     actions.moveCellsRelativeTo({
-      cellIds: [firstCellId, "1" as CellId],
-      targetCellId: "2" as CellId,
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
       position: "after",
       previousPlacements,
     });
@@ -721,7 +721,7 @@ describe("cell reducer", () => {
       before: false,
     });
     actions.createNewCell({
-      cellId: "1" as CellId,
+      cellId: cellId("1"),
       before: false,
     });
 
@@ -736,14 +736,14 @@ describe("cell reducer", () => {
       {
         columnId: col.id,
         index: col.indexOfOrThrow(
-          "1" as CellId,
+          cellId("1"),
         ) as import("@/utils/id-tree").CellIndex,
       },
     ];
 
     actions.moveCellsRelativeTo({
-      cellIds: [firstCellId, "1" as CellId],
-      targetCellId: "2" as CellId,
+      cellIds: [firstCellId, cellId("1")],
+      targetCellId: cellId("2"),
       position: "after",
       previousPlacements,
     });
@@ -757,7 +757,7 @@ describe("cell reducer", () => {
       "
     `);
 
-    actions.deleteCell({ cellId: "2" as CellId });
+    actions.deleteCell({ cellId: cellId("2") });
     expect(formatCells(state)).toMatchInlineSnapshot(`
       "
       [0] ''

frontend/src/core/cells/__tests__/pending-cut-service.test.tsx

@@ -3,6 +3,7 @@
 import { act, renderHook } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import type { CellId } from "@/core/cells/ids";
 import {
   pendingCutStateAtom,
@@ -20,15 +21,10 @@ function createTestWrapper() {
   return { wrapper, store };
 }
 
-const mockClipboardData = {
-  cells: [{ code: "x = 1", name: "cell1" }],
-  version: "1.0" as const,
-};
-
 describe("pending-cut-service", () => {
-  it("markForCut sets cellIds and clipboardData", () => {
+  it("markForCut sets cellIds", () => {
     const { wrapper, store } = createTestWrapper();
-    const cellIds: CellId[] = ["cell-1" as CellId, "cell-2" as CellId];
+    const cellIds: CellId[] = [cellId("cell-1"), cellId("cell-2")];
 
     const { result } = renderHook(
       () => ({
@@ -39,20 +35,16 @@ describe("pending-cut-service", () => {
     );
 
     act(() => {
-      result.current.actions.markForCut({
-        cellIds,
-        clipboardData: mockClipboardData,
-      });
+      result.current.actions.markForCut({ cellIds });
     });
 
     const state = store.get(pendingCutStateAtom);
     expect(state.cellIds).toEqual(new Set(cellIds));
-    expect(state.clipboardData).toEqual(mockClipboardData);
   });
 
   it("clear resets to initial state", () => {
     const { wrapper, store } = createTestWrapper();
-    const cellIds: CellId[] = ["cell-1" as CellId];
+    const cellIds: CellId[] = [cellId("cell-1")];
 
     const { result } = renderHook(
       () => ({
@@ -63,10 +55,7 @@ describe("pending-cut-service", () => {
     );
 
     act(() => {
-      result.current.actions.markForCut({
-        cellIds,
-        clipboardData: mockClipboardData,
-      });
+      result.current.actions.markForCut({ cellIds });
     });
     expect(store.get(pendingCutStateAtom).cellIds.size).toBe(1);
 
@@ -75,48 +64,40 @@ describe("pending-cut-service", () => {
     });
     const state = store.get(pendingCutStateAtom);
     expect(state.cellIds.size).toBe(0);
-    expect(state.clipboardData).toBeNull();
   });
 
   it("useIsPendingCut returns true when cellId is marked for cut", () => {
     const { wrapper } = createTestWrapper();
-    const cellId = "cell-1" as CellId;
+    const targetCellId = cellId("cell-1");
 
     const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
       wrapper,
     });
     const { result: isPendingResult } = renderHook(
-      () => useIsPendingCut(cellId),
+      () => useIsPendingCut(targetCellId),
       { wrapper },
     );
 
     expect(isPendingResult.current).toBe(false);
 
     act(() => {
-      actionsResult.current.markForCut({
-        cellIds: [cellId],
-        clipboardData: mockClipboardData,
-      });
+      actionsResult.current.markForCut({ cellIds: [targetCellId] });
     });
 
     expect(isPendingResult.current).toBe(true);
   });
 
   it("useIsPendingCut returns false when cellId is not marked for cut", () => {
     const { wrapper } = createTestWrapper();
-    const { result } = renderHook(
-      () => useIsPendingCut("other-cell" as CellId),
-      { wrapper },
-    );
+    const { result } = renderHook(() => useIsPendingCut(cellId("other-cell")), {
+      wrapper,
+    });
 
     const { result: actionsResult } = renderHook(() => usePendingCutActions(), {
       wrapper,
     });
     act(() => {
-      actionsResult.current.markForCut({
-        cellIds: ["cell-1" as CellId],
-        clipboardData: mockClipboardData,
-      });
+      actionsResult.current.markForCut({ cellIds: [cellId("cell-1")] });
     });
 
     expect(result.current).toBe(false);
@@ -134,10 +115,7 @@ describe("pending-cut-service", () => {
     expect(hasPendingResult.current).toBe(false);
 
     act(() => {
-      actionsResult.current.markForCut({
-        cellIds: ["cell-1" as CellId],
-        clipboardData: mockClipboardData,
-      });
+      actionsResult.current.markForCut({ cellIds: [cellId("cell-1")] });
     });
 
     expect(hasPendingResult.current).toBe(true);

frontend/src/core/cells/pending-cut-service.ts

@@ -1,42 +1,33 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { atom, useAtomValue } from "jotai";
-import type { ClipboardCellData } from "@/components/editor/navigation/clipboard";
 import type { CellId } from "@/core/cells/ids";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 
 interface PendingCutState {
   cellIds: Set<CellId>;
-  clipboardData: ClipboardCellData | null;
 }
 
 const initialState = (): PendingCutState => ({
   cellIds: new Set(),
-  clipboardData: null,
 });
 
 const {
   valueAtom: pendingCutStateAtom,
   useActions: usePendingCutActionsInternal,
 } = createReducerAndAtoms(initialState, {
-  markForCut: (
-    _state,
-    action: { cellIds: CellId[]; clipboardData: ClipboardCellData },
-  ) => {
+  markForCut: (_state, action: { cellIds: CellId[] }) => {
     return {
       cellIds: new Set(action.cellIds),
-      clipboardData: action.clipboardData,
     };
   },
   clear: () => {
     return initialState();
   },
 });
 
-// Re-export the state atom
 export { pendingCutStateAtom };
 
-// Derived atom just for cell IDs (for easier consumption)
 export const pendingCutCellIdsAtom = atom(
   (get) => get(pendingCutStateAtom).cellIds,
 );

frontend/src/css/app/Cell.css

@@ -75,14 +75,11 @@
 
   /* Styling for cells marked for cut */
   &.pending-cut {
-    opacity: 0.6;
-    border-style: dashed;
-    border-color: var(--amber-7);
-
     .output-area,
     .cm-gutters,
     .cm {
-      background-color: var(--amber-2);
+      background-color: var(--gray-2);
+      opacity: 0.55;
     }
   }