@marimo-team/islands 0.25.3-dev26 → 0.25.3-dev262

package/src/components/editor/file-tree/use-file-search.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useRequestClient } from "@/core/network/requests";
 import { useDebounce } from "@/hooks/useDebounce";
 import {
@@ -34,20 +34,29 @@ export function useFileSearch({
 }): { state: FileSearchState; refetch: () => void } {
   const { sendSearchFiles } = useRequestClient();
   const debouncedQuery = useDebounce(query, 300);
-  const pending = useRef<Promise<void>>(Promise.resolve());
+  // Nullable so the ref is not built on every render
+  const pending = useRef<Promise<void> | null>(null);
   const [revision, setRevision] = useState(0);
   const refetch = useCallback(() => setRevision((value) => value + 1), []);
-  const [result, setResult] = useState<FileSearchState>({ status: "idle" });
+  const requestIdentity = useMemo(
+    () => ({ query, tree, showHiddenFiles, revision, sendSearchFiles }),
+    [query, tree, showHiddenFiles, revision, sendSearchFiles],
+  );
+  const [result, setResult] = useState<{
+    requestIdentity: typeof requestIdentity;
+    state: FileSearchState;
+  }>();
 
   useEffect(() => {
+    // Read inputs through requestIdentity so it alone drives new requests
+    const { query, tree, showHiddenFiles, sendSearchFiles } = requestIdentity;
     let cancelled = false;
     if (!query || query !== debouncedQuery) {
       return;
     }
-    setResult({ status: "loading", query });
     // Let the in-flight server scan finish before starting another. Superseded
     // queued queries and remaining roots are skipped, keeping scan work bounded.
-    const request = pending.current.then(async () => {
+    const request = (pending.current ?? Promise.resolve()).then(async () => {
       const filesByPath = new Map<string, FileTreeNode>();
       let rootLimitReached = false;
       let failedRootCount = 0;
@@ -88,9 +97,12 @@ export function useFileSearch({
       if (!cancelled) {
         if (roots.length > 0 && failedRootCount === roots.length) {
           setResult({
-            status: "error",
-            query,
-            error: new Error("Could not search any root"),
+            requestIdentity,
+            state: {
+              status: "error",
+              query,
+              error: new Error("Could not search any root"),
+            },
           });
           return;
         }
@@ -110,33 +122,35 @@ export function useFileSearch({
             rank(left) - rank(right) || left.name.localeCompare(right.name),
         );
         setResult({
-          status: "success",
-          isPartial: failedRootCount > 0,
-          query,
-          files: sortedFiles.slice(0, RESULT_LIMIT),
-          hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+          requestIdentity,
+          state: {
+            status: "success",
+            isPartial: failedRootCount > 0,
+            query,
+            files: sortedFiles.slice(0, RESULT_LIMIT),
+            hasMore: rootLimitReached || sortedFiles.length > RESULT_LIMIT,
+          },
         });
       }
     });
     pending.current = request.catch((error: unknown) => {
       if (!cancelled) {
-        setResult({ status: "error", query, error });
+        setResult({
+          requestIdentity,
+          state: { status: "error", query, error },
+        });
       }
     });
     return () => {
       cancelled = true;
     };
-  }, [query, debouncedQuery, tree, showHiddenFiles, revision, sendSearchFiles]);
+  }, [debouncedQuery, requestIdentity]);
 
   if (!query) {
     return { state: { status: "idle" }, refetch };
   }
-  if (
-    query !== debouncedQuery ||
-    result.status === "idle" ||
-    result.query !== query
-  ) {
+  if (query !== debouncedQuery || result?.requestIdentity !== requestIdentity) {
     return { state: { status: "loading", query }, refetch };
   }
-  return { state: result, refetch };
+  return { state: result.state, refetch };
 }

package/src/components/editor/header/__tests__/filename-form.test.tsx

@@ -73,10 +73,7 @@ describe("FilenameForm", () => {
     });
 
     await waitFor(() => {
-      expect(mockSaveNotebook).toHaveBeenCalledWith(
-        "/path/to/new-file.py",
-        true,
-      );
+      expect(mockSaveNotebook).toHaveBeenCalledWith(true);
     });
   });
 

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

@@ -11,7 +11,7 @@ import {
   type ConnectionStatus,
   WebSocketClosedReason,
   ConnectionState,
-} from "@/core/websocket/types";
+} from "@/core/session/types";
 import { StatusOverlay } from "../status";
 
 function renderOverlay(
@@ -55,7 +55,7 @@ describe("StatusOverlay disconnect indicator", () => {
     expect(onReconnect).toHaveBeenCalledTimes(1);
   });
 
-  it("renders a disabled button when no onReconnect is provided", () => {
+  it("keeps the unavailable reconnect button focusable for its tooltip", () => {
     const { getByTestId } = renderOverlay({
       state: ConnectionState.CLOSED,
       code: WebSocketClosedReason.KERNEL_DISCONNECTED,
@@ -63,7 +63,9 @@ describe("StatusOverlay disconnect indicator", () => {
     });
 
     const button = getByTestId("disconnected-indicator");
-    expect((button as HTMLButtonElement).disabled).toBe(true);
+    expect(button).toHaveAttribute("aria-disabled", "true");
+    button.focus();
+    expect(button).toHaveFocus();
   });
 
   it("leaves editor startup failures to the inline notice", () => {

package/src/components/editor/header/app-header.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import React, { type PropsWithChildren } from "react";
-import { type ConnectionStatus, ConnectionState } from "@/core/websocket/types";
+import { type ConnectionStatus, ConnectionState } from "@/core/session/types";
 import { Disconnected } from "../Disconnected";
 
 interface Props {

package/src/components/editor/header/filename-form.tsx

@@ -19,7 +19,7 @@ export const FilenameForm = ({
     updateFilename(newFilename).then((name) => {
       // When creating a new file (was unnamed), also save the content
       if (name !== null && wasUnnamed) {
-        saveNotebook(name, true);
+        saveNotebook(true);
       }
     });
   };

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

@@ -11,7 +11,7 @@ import {
   type ConnectionStatus,
   WebSocketClosedReason,
   ConnectionState,
-} from "@/core/websocket/types";
+} from "@/core/session/types";
 import { cn } from "@/utils/cn";
 
 export const StatusOverlay: React.FC<{
@@ -61,20 +61,17 @@ const DisconnectedIcon: React.FC<{ onReconnect?: () => void }> = ({
         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>
+      <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}
+        // Keep the tooltip reachable by keyboard when reconnection is unavailable.
+        aria-disabled={disabled}
+      >
+        <UnlinkIcon className="w-[25px] h-[25px] text-(--red-11)" />
+      </button>
     </Tooltip>
   );
 };
@@ -85,15 +82,38 @@ const RunningIcon = () => {
     ? "Scratchpad is running"
     : "Jump to running cell";
 
+  const icon = (
+    <HourglassIcon className="running-app-icon" size={30} strokeWidth={1} />
+  );
+
+  if (scratchpadOnly) {
+    return (
+      <Tooltip content={tooltip} side="right">
+        <span
+          className={topLeftStatus}
+          data-testid="loading-indicator"
+          // Execution progress is advisory status, not a form result.
+          // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
+          role="status"
+          aria-label={tooltip}
+        >
+          {icon}
+        </span>
+      </Tooltip>
+    );
+  }
+
   return (
     <Tooltip content={tooltip} side="right">
-      <div
-        className={topLeftStatus}
+      <button
+        type="button"
+        aria-label={tooltip}
+        className={cn(topLeftStatus, "bg-transparent border-0 p-0")}
         data-testid="loading-indicator"
-        onClick={scratchpadOnly ? undefined : notebookScrollToRunning}
+        onClick={notebookScrollToRunning}
       >
-        <HourglassIcon className="running-app-icon" size={30} strokeWidth={1} />
-      </div>
+        {icon}
+      </button>
     </Tooltip>
   );
 };

package/src/components/editor/links/__tests__/cell-link.test.tsx

@@ -0,0 +1,148 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
+import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
+import { CellLink, CellLinkTraceback } from "../cell-link";
+
+const showCellIfHidden = vi.hoisted(() => vi.fn());
+const targetId = cellId("target");
+
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: () => ({ showCellIfHidden }),
+}));
+vi.mock("@/core/cells/cells", () => ({
+  useCellIds: () => [targetId],
+  useCellNames: () => ({ [targetId]: "Target" }),
+}));
+vi.mock("@/core/saving/filename", () => ({ useFilename: () => "notebook.py" }));
+vi.mock("@/core/codemirror/go-to-definition/utils", () => ({
+  goToCellLine: vi.fn(),
+}));
+
+function flushNavigation() {
+  act(() => vi.advanceTimersToNextFrame());
+}
+
+describe("CellLink navigation", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    showCellIfHidden.mockReset();
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it("focuses, scrolls, and highlights the target on keyboard activation", () => {
+    render(
+      <>
+        <CellLink cellId={targetId} />
+        <div
+          id={HTMLCellId.create(targetId)}
+          tabIndex={-1}
+          data-testid="target"
+        />
+      </>,
+    );
+    const target = screen.getByTestId("target");
+    target.scrollIntoView = vi.fn();
+    const focus = vi.spyOn(target, "focus");
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", `#${target.id}`);
+    link.focus();
+    // Native anchors emit a click with detail=0 when activated with Enter.
+    expect(fireEvent.click(link, { detail: 0 })).toBe(false);
+    flushNavigation();
+
+    expect(showCellIfHidden).toHaveBeenCalledExactlyOnceWith({
+      cellId: targetId,
+    });
+    expect(target).toHaveFocus();
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+    expect(target.scrollIntoView).toHaveBeenCalledExactlyOnceWith({
+      behavior: "smooth",
+      block: "center",
+    });
+    expect(target).toHaveClass("focus-outline");
+  });
+
+  it("reveals a hidden destination before moving focus", () => {
+    function HiddenCell() {
+      const [visible, setVisible] = useState(false);
+      showCellIfHidden.mockImplementation(() => setVisible(true));
+      return (
+        <>
+          <CellLink cellId={targetId} skipScroll={true} />
+          {visible && (
+            <div
+              id={HTMLCellId.create(targetId)}
+              tabIndex={-1}
+              data-testid="target"
+            />
+          )}
+        </>
+      );
+    }
+    render(<HiddenCell />);
+    expect(screen.queryByTestId("target")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("link"));
+    flushNavigation();
+    expect(screen.getByTestId("target")).toHaveFocus();
+  });
+
+  it.each([
+    { metaKey: true },
+    { ctrlKey: true },
+    { shiftKey: true },
+    { altKey: true },
+    { button: 1 },
+  ])("preserves browser activation for %o", (modifiers) => {
+    render(<CellLink cellId={targetId} />);
+    const link = screen.getByRole("link");
+    link.focus();
+    expect(fireEvent.click(link, modifiers)).toBe(true);
+    flushNavigation();
+    expect(showCellIfHidden).not.toHaveBeenCalled();
+    expect(link).toHaveFocus();
+  });
+
+  it("lets traceback line navigation choose the final focus", () => {
+    render(
+      <>
+        <CellLinkTraceback cellId={targetId} lineNumber={7} />
+        <div
+          id={HTMLCellId.create(targetId)}
+          tabIndex={-1}
+          data-testid="target"
+        >
+          <textarea aria-label="Editor" />
+        </div>
+      </>,
+    );
+    const target = screen.getByTestId("target");
+    target.scrollIntoView = vi.fn();
+    const editor = screen.getByRole("textbox", { name: "Editor" });
+    vi.mocked(goToCellLine).mockImplementation(() => {
+      expect(target).toHaveFocus();
+      editor.focus();
+      return true;
+    });
+    fireEvent.click(screen.getByRole("link"));
+    flushNavigation();
+    expect(goToCellLine).toHaveBeenCalledExactlyOnceWith(targetId, 7);
+    expect(editor).toHaveFocus();
+    expect(target.scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it("keeps scratch references non-navigable", () => {
+    render(
+      <CellLink cellId={SCRATCH_CELL_ID} formatCellName={() => "scratch"} />,
+    );
+    expect(screen.queryByRole("link")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("scratch"));
+    flushNavigation();
+    expect(showCellIfHidden).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/links/cell-link-list.tsx

@@ -25,7 +25,7 @@ export const CellLinkList: React.FC<Props> = ({
 }) => {
   const cellIndex = useCellIds();
   const sortedCellIds = cellIds.toSorted((a, b) => {
-    return cellIndex.inOrderIds.indexOf(a) - cellIndex.inOrderIds.indexOf(b);
+    return cellIndex.indexOf(a) - cellIndex.indexOf(b);
   });
 
   if (cellIds.length === 0) {

package/src/components/editor/links/cell-link.tsx

@@ -1,13 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { JSX } from "react"; /* Copyright 2026 Marimo. All rights reserved. */
-import { useCellActions, useCellIds, useCellNames } from "@/core/cells/cells";
+import { useCellIds, useCellNames } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { type CellId, HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { displayCellName } from "@/core/cells/names";
 import { goToCellLine } from "@/core/codemirror/go-to-definition/utils";
 import { useFilename } from "@/core/saving/filename";
 import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
 import { Logger } from "../../../utils/Logger";
+import { focusCell } from "../navigation/focus-utils";
 
 interface Props {
   cellId: CellId;
@@ -24,19 +27,25 @@ export const CellLink = (props: Props): JSX.Element => {
   const { className, cellId, variant, onClick, formatCellName, skipScroll } =
     props;
   const cellName = useCellNames()[cellId] ?? "";
-  const cellIndex = useCellIds().inOrderIds.indexOf(cellId);
+  const cellIndex = useCellIds().indexOf(cellId);
   const { showCellIfHidden } = useCellActions();
   const formatName = formatCellName ?? ((name: string) => name);
 
   return (
-    <div
+    // Reveal hidden cells before scrolling and focusing the destination.
+    // react-doctor-disable-next-line react-doctor/no-prevent-default
+    <a
+      href={
+        cellId === SCRATCH_CELL_ID ? undefined : `#${HTMLCellId.create(cellId)}`
+      }
       className={cn(
-        "inline-block cursor-pointer text-link hover:underline",
+        "inline-block cursor-pointer text-left text-link hover:underline focus-visible:outline focus-visible:outline-ring",
         className,
       )}
-      role="link"
-      tabIndex={-1}
       onClick={(e) => {
+        if (e.defaultPrevented || e.button !== 0 || Events.hasModifier(e)) {
+          return;
+        }
         // Scratch causes a crash since scratch is not registered like a
         // normal cell.
         if (cellId === SCRATCH_CELL_ID) {
@@ -48,13 +57,14 @@ export const CellLink = (props: Props): JSX.Element => {
         requestAnimationFrame(() => {
           const succeeded = scrollAndHighlightCell(cellId, variant, skipScroll);
           if (succeeded) {
+            focusCell(cellId, { preventScroll: true });
             onClick?.();
           }
         });
       }}
     >
       {formatName(displayCellName(cellName, cellIndex))}
-    </div>
+    </a>
   );
 };
 

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

@@ -5,15 +5,18 @@ import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { asMock, MockModules, Mocks, SetupMocks } from "@/__mocks__/common";
 import { cellId } from "@/__tests__/branded";
-import type { CellActions, NotebookState } from "@/core/cells/cells";
+import type { CellActions } from "@/core/cells/actions";
+import type { NotebookState } from "@/core/cells/cells";
 import { useCellClipboard } from "../clipboard";
 
 // Mock dependencies
 vi.mock("@/components/ui/use-toast", () => MockModules.toast());
 
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: vi.fn(),
+}));
 vi.mock("@/core/cells/cells", () => ({
   getNotebook: vi.fn(),
-  useCellActions: vi.fn(),
 }));
 
 vi.mock("@/utils/Logger", () => ({
@@ -33,14 +36,15 @@ vi.mock("@/core/cells/pending-cut-service", () => ({
 
 import { MockNotebook } from "@/__mocks__/notebook";
 import { toast } from "@/components/ui/use-toast";
-import { getNotebook, useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
+import { getNotebook } from "@/core/cells/cells";
 import { Logger } from "@/utils/Logger";
 
 describe("useCellClipboard", () => {
   const [mockCellId1, mockCellId2] = MockNotebook.cellIds();
   const mockCellCode1 = "print('hello world')";
   const mockCellCode2 = "x = 42";
-  const mockCreateNewCell = vi.fn();
+  const mockCreateCell = vi.fn();
 
   const mockClipboard = Mocks.clipboard();
 
@@ -70,7 +74,7 @@ describe("useCellClipboard", () => {
     } as NotebookState);
 
     asMock(useCellActions).mockReturnValue({
-      createNewCell: mockCreateNewCell,
+      createCell: mockCreateCell,
     } as unknown as CellActions);
   });
 
@@ -330,11 +334,40 @@ describe("useCellClipboard", () => {
         await result.current.pasteAtCell(mockCellId1);
       });
 
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
+        code: "x = 42",
+        config: {},
+      });
+    });
+
+    it("drops the copied column so the cell joins the column it is pasted into", async () => {
+      const clipboardData = {
+        cells: [{ code: "x = 42", config: { column: 1, hide_code: true } }],
+        version: "1.0",
+      };
+
+      const mockItem = {
+        types: ["web application/x-marimo-cell"],
+        getType: vi.fn().mockResolvedValue(
+          new Blob([JSON.stringify(clipboardData)], {
+            type: "web application/x-marimo-cell",
+          }),
+        ),
+      };
+
+      mockClipboard.read.mockResolvedValue([mockItem]);
+
+      const { result } = renderHook(() => useCellClipboard());
+
+      await act(async () => {
+        await result.current.pasteAtCell(mockCellId1);
+      });
+
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "x = 42",
-        autoFocus: true,
+        config: { hide_code: true },
       });
     });
 
@@ -365,24 +398,21 @@ describe("useCellClipboard", () => {
         await result.current.pasteAtCell(mockCellId1);
       });
 
-      expect(mockCreateNewCell).toHaveBeenCalledTimes(3);
-      expect(mockCreateNewCell).toHaveBeenNthCalledWith(3, {
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledTimes(3);
+      expect(mockCreateCell).toHaveBeenNthCalledWith(3, {
+        after: mockCellId1,
         code: "x = 42",
-        autoFocus: true,
+        config: {},
       });
-      expect(mockCreateNewCell).toHaveBeenNthCalledWith(2, {
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenNthCalledWith(2, {
+        after: mockCellId1,
         code: "y = x * 2",
-        autoFocus: true,
+        config: {},
       });
-      expect(mockCreateNewCell).toHaveBeenNthCalledWith(1, {
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenNthCalledWith(1, {
+        after: mockCellId1,
         code: "print(y)",
-        autoFocus: true,
+        config: {},
       });
     });
 
@@ -401,11 +431,9 @@ describe("useCellClipboard", () => {
         await result.current.pasteAtCell(mockCellId1);
       });
 
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "plain text code",
-        autoFocus: true,
       });
     });
 
@@ -432,11 +460,9 @@ describe("useCellClipboard", () => {
         "Failed to parse clipboard cell data",
         expect.any(Error),
       );
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "fallback text",
-        autoFocus: true,
       });
     });
 
@@ -522,11 +548,9 @@ describe("useCellClipboard", () => {
         "Failed to parse clipboard cell data",
         expect.any(Error),
       );
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "fallback text",
-        autoFocus: true,
       });
     });
 
@@ -554,11 +578,9 @@ describe("useCellClipboard", () => {
         await result.current.pasteAtCell(mockCellId1);
       });
 
-      expect(mockCreateNewCell).toHaveBeenCalledWith({
-        cellId: mockCellId1,
-        before: false,
+      expect(mockCreateCell).toHaveBeenCalledWith({
+        after: mockCellId1,
         code: "fallback text",
-        autoFocus: true,
       });
     });
   });