@marimo-team/islands 0.25.3-dev141 → 0.25.3-dev143

package/src/components/editor/errors/send-error-report-button.tsx

@@ -0,0 +1,69 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { SendIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  agentAttachmentsAtom,
+  attachmentLabel,
+} from "@/core/attachments/state";
+import { agentToast } from "@/core/attachments/toast";
+import { pairConfigAtom } from "@/core/config/pair";
+import { stableSessionIdAtom } from "@/core/kernel/session";
+import { API } from "@/core/network/api";
+import { HTTPError, prettyError } from "@/utils/errors";
+
+export function SendErrorReportButton({
+  getContent,
+}: {
+  getContent: () => unknown;
+}) {
+  const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
+  const agents = useAtomValue(agentAttachmentsAtom);
+  const stableSessionId = useAtomValue(stableSessionIdAtom);
+  const [sending, setSending] = useState(false);
+
+  if (!hostEnabled) {
+    return null;
+  }
+
+  const send = async () => {
+    if (sending || agents.length === 0 || !stableSessionId) {
+      return;
+    }
+    setSending(true);
+    try {
+      await API.post<unknown, string>(
+        `/pair/notebooks/${encodeURIComponent(stableSessionId)}/messages`,
+        getContent(),
+      );
+      agentToast({
+        title: `Sent to ${agents.map(attachmentLabel).join(", ")}`,
+      });
+    } catch (error) {
+      agentToast({
+        variant: "danger",
+        title:
+          error instanceof HTTPError && error.status === 409
+            ? "No agent attached"
+            : "Could not send error",
+        description: prettyError(error),
+      });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Button
+      size="xs"
+      variant="outline"
+      disabled={sending || agents.length === 0 || !stableSessionId}
+      onClick={send}
+    >
+      <SendIcon className="h-3 w-3 mr-2" />
+      Send error to agent
+    </Button>
+  );
+}

package/src/components/editor/file-tree/__tests__/file-explorer-interactions.test.tsx

@@ -137,5 +137,11 @@ describe("FileExplorer upload destination", () => {
       }),
     ).toBeVisible();
     expect(screen.queryByText(".hidden")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId("file-explorer-hidden-files-button"));
+    expect(await screen.findByText(".hidden")).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: "Upload files to workspace" }),
+    ).toBeVisible();
   });
 });

package/src/components/editor/file-tree/__tests__/file-explorer-navigation.test.tsx

@@ -17,6 +17,7 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { requestClientAtom } from "@/core/network/requests";
 import type { FileInfo, FileSearchResponse } from "@/core/network/types";
 import { Deferred } from "@/utils/Deferred";
+import { openNotebook } from "@/utils/links";
 import type { FilePath } from "@/utils/paths";
 import { TreeDndProvider } from "../dnd-wrapper";
 import { FileExplorer } from "../file-explorer";
@@ -29,6 +30,11 @@ vi.mock("../file-viewer", () => ({
   FileViewer: ({ file }: { file: FileInfo }) => <div>Preview: {file.name}</div>,
 }));
 
+vi.mock("@/utils/links", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/utils/links")>()),
+  openNotebook: vi.fn(),
+}));
+
 function file(name: string, isDirectory = false): FileInfo {
   return {
     id: name,
@@ -91,6 +97,47 @@ beforeEach(() => {
 });
 
 describe("file browser navigation", () => {
+  it("tabs into the notebook action, returns to its row, and exits the tree", async () => {
+    client.sendListFiles.mockResolvedValue({
+      root: "/workspace",
+      files: [
+        { ...file("notebook.py"), isMarimoFile: true },
+        file("notes.txt"),
+      ],
+    });
+    render(
+      <>
+        <FileExplorer height={300} />
+        <button type="button">After tree</button>
+      </>,
+      { wrapper },
+    );
+    const row = await screen.findByRole("treeitem", { name: "notebook.py" });
+    act(() => row.focus());
+    fireEvent.keyDown(row, { key: "Tab" });
+    const open = screen.getByRole("button", {
+      name: "Open notebook notebook.py",
+    });
+    expect(open).toHaveFocus();
+    fireEvent.keyDown(open, { key: "Tab", shiftKey: true });
+    expect(row).toHaveFocus();
+    fireEvent.keyDown(row, { key: "Tab" });
+    for (const key of ["Enter", " "]) {
+      expect(fireEvent.keyDown(open, { key })).toBe(true);
+      expect(
+        screen.queryByText("Preview: notebook.py"),
+      ).not.toBeInTheDocument();
+    }
+    fireEvent.click(open);
+    expect(openNotebook).toHaveBeenCalledExactlyOnceWith("notebook.py");
+    fireEvent.keyDown(open, { key: "Tab" });
+    expect(screen.getByRole("button", { name: "After tree" })).toHaveFocus();
+    const plain = screen.getByRole("treeitem", { name: "notes.txt" });
+    act(() => plain.focus());
+    fireEvent.keyDown(plain, { key: "Tab" });
+    expect(screen.getByRole("button", { name: "After tree" })).toHaveFocus();
+  });
+
   it("debounces the first character, subsequent edits, and searches after clearing", async () => {
     render(<FileExplorer height={300} />, { wrapper });
     const input = await screen.findByRole("textbox", {

package/src/components/editor/file-tree/__tests__/use-file-search.test.tsx

@@ -0,0 +1,91 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { EditRequests } from "@/core/network/types";
+import { Deferred } from "@/utils/Deferred";
+import { RequestingTree } from "../requesting-tree";
+import { useFileSearch } from "../use-file-search";
+
+const sendSearchFiles = vi.hoisted(() =>
+  vi.fn<EditRequests["sendSearchFiles"]>(),
+);
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ sendSearchFiles }),
+}));
+
+describe("useFileSearch", () => {
+  let tree: RequestingTree;
+
+  beforeEach(async () => {
+    sendSearchFiles.mockReset();
+    tree = new RequestingTree({
+      getRoots: vi.fn().mockResolvedValue({
+        roots: [{ path: "/root", name: "workspace", isPrimary: true }],
+      }),
+      listFiles: vi.fn().mockResolvedValue({ files: [], root: "/root" }),
+      createFileOrFolder: vi.fn(),
+      deleteFileOrFolder: vi.fn(),
+      copyFileOrFolder: vi.fn(),
+      renameFileOrFolder: vi.fn(),
+    });
+    await tree.initialize(() => undefined);
+  });
+
+  it("derives loading for a refetch and a changed hidden-file filter", async () => {
+    sendSearchFiles.mockResolvedValue({
+      files: [],
+      query: "file",
+      totalFound: 0,
+    });
+    const { result, rerender } = renderHook(
+      ({ showHiddenFiles }) =>
+        useFileSearch({ query: "file", tree, showHiddenFiles }),
+      { initialProps: { showHiddenFiles: false } },
+    );
+    await waitFor(() => expect(result.current.state.status).toBe("success"));
+
+    const pending = new Deferred<
+      Awaited<ReturnType<EditRequests["sendSearchFiles"]>>
+    >();
+    sendSearchFiles.mockReturnValue(pending.promise);
+    act(() => result.current.refetch());
+    expect(result.current.state.status).toBe("loading");
+    await act(async () =>
+      pending.resolve({ files: [], query: "file", totalFound: 0 }),
+    );
+    expect(result.current.state.status).toBe("success");
+
+    sendSearchFiles.mockReturnValue(new Promise(() => undefined));
+    rerender({ showHiddenFiles: true });
+    expect(result.current.state.status).toBe("loading");
+    await waitFor(() =>
+      expect(sendSearchFiles).toHaveBeenLastCalledWith(
+        expect.objectContaining({ includeHidden: true }),
+      ),
+    );
+  });
+
+  it("keeps superseded scans serial and ignores their results", async () => {
+    const first = new Deferred<
+      Awaited<ReturnType<EditRequests["sendSearchFiles"]>>
+    >();
+    sendSearchFiles
+      .mockReturnValueOnce(first.promise)
+      .mockResolvedValue({ files: [], query: "file", totalFound: 0 });
+    const { result } = renderHook(() =>
+      useFileSearch({ query: "file", tree, showHiddenFiles: false }),
+    );
+    await waitFor(() => expect(sendSearchFiles).toHaveBeenCalledOnce());
+
+    act(() => result.current.refetch());
+    expect(sendSearchFiles).toHaveBeenCalledOnce();
+    expect(result.current.state.status).toBe("loading");
+    await act(async () =>
+      first.resolve({ files: [], query: "file", totalFound: 0 }),
+    );
+
+    expect(sendSearchFiles).toHaveBeenCalledTimes(2);
+    expect(result.current.state.status).toBe("success");
+  });
+});

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

@@ -201,11 +201,16 @@ export const FileExplorer: React.FC<{
     () => filterHiddenTree(data, showHiddenFiles),
     [data, showHiddenFiles],
   );
-  React.useEffect(() => {
-    if (selectedFolder && !treeContainsId(visibleData, selectedFolder.id)) {
-      setSelectedFolder(null);
-    }
-  }, [selectedFolder, visibleData]);
+  const selectedFolderId = selectedFolder?.id;
+  const selectedFolderVisible = React.useMemo(
+    () =>
+      selectedFolderId === undefined ||
+      treeContainsId(visibleData, selectedFolderId),
+    [visibleData, selectedFolderId],
+  );
+  if (!selectedFolderVisible) {
+    setSelectedFolder(null);
+  }
   const contextValue = React.useMemo<FileExplorerContextValue>(
     () => ({
       tree,
@@ -258,6 +263,27 @@ export const FileExplorer: React.FC<{
       event.target instanceof Element
         ? event.target.getAttribute("role")
         : null;
+    if (event.key === "Tab" && event.target instanceof HTMLElement) {
+      if (!event.shiftKey && role === "treeitem") {
+        const action = event.target.querySelector<HTMLButtonElement>(
+          '[data-file-tree-action="open"]',
+        );
+        if (action) {
+          event.preventDefault();
+          event.stopPropagation();
+          action.focus();
+          return;
+        }
+      } else if (
+        event.shiftKey &&
+        event.target.dataset.fileTreeAction === "open"
+      ) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.target.closest<HTMLElement>('[role="treeitem"]')?.focus();
+        return;
+      }
+    }
     if (query.trim() || (role !== "treeitem" && role !== "tree")) {
       return;
     }
@@ -632,13 +658,24 @@ const Show = ({
     <span className="flex-1 overflow-hidden text-ellipsis">
       {node.data.name}
       {node.data.isMarimoFile && node.data.isPrimaryRoot && !isWasm() && (
-        <span
+        <button
+          type="button"
+          aria-label={`Open notebook ${node.data.name}`}
           data-testid="file-explorer-open-marimo-button"
-          className="shrink-0 ml-2 text-sm hidden group-hover:inline hover:underline"
+          data-file-tree-action="open"
+          onKeyDown={(event) => {
+            if (event.key !== "Tab") {
+              event.stopPropagation();
+            }
+          }}
+          className={cn(
+            "shrink-0 ml-2 text-sm hidden group-hover:inline group-focus-within:inline hover:underline",
+            node.isFocused && "inline",
+          )}
           onClick={onOpenMarimoFile}
         >
           open <ExternalLinkIcon className="inline ml-1" size={12} />
-        </span>
+        </button>
       )}
     </span>
   );

package/src/components/editor/file-tree/file-name-input.tsx

@@ -28,6 +28,7 @@ export const FileNameInput = <T extends FileInfo>({
   return (
     <input
       ref={ref}
+      aria-label="File name"
       className="flex-1 bg-transparent border border-border text-muted-foreground"
       defaultValue={node.data.name}
       onClick={(e) => e.stopPropagation()}

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

@@ -9,7 +9,7 @@ import {
   SaveIcon,
 } from "lucide-react";
 import type React from "react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { renderShortcut } from "@/components/shortcuts/renderShortcut";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -82,7 +82,9 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   // carry no draft to preserve.
   // We use a ref for internalValue so we don't call this effect on each keystroke
   const internalValueRef = useRef<string>(internalValue);
-  internalValueRef.current = internalValue;
+  useLayoutEffect(() => {
+    internalValueRef.current = internalValue;
+  }, [internalValue]);
   useEffect(() => {
     return () => {
       if (

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/status.tsx

@@ -85,15 +85,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,146 @@
+/* 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/cells", () => ({
+  useCellActions: () => ({ showCellIfHidden }),
+  useCellIds: () => ({ inOrderIds: [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();
+  });
+});