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

package/src/components/editor/dynamic-favicon.tsx

@@ -1,8 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { usePrevious } from "@dnd-kit/utilities";
+import { useAtomValue } from "jotai";
 import { useEffect } from "react";
-import { useCellErrors } from "@/core/cells/cells";
+import { cellErrorCount } from "@/core/cells/cells";
 import { useEventListener } from "@/hooks/useEventListener";
 import successFaviconUrl from "../../assets/circle-check.ico";
 import runningFaviconUrl from "../../assets/circle-play.ico";
@@ -15,13 +16,6 @@ const FAVICON_PATHS = {
   error: errorFaviconUrl,
 } as const;
 
-// Cache favicon object URLs lazily
-type FaviconKey = keyof typeof FAVICON_PATHS;
-
-async function getFaviconUrl(key: FaviconKey): Promise<string> {
-  return FAVICON_PATHS[key];
-}
-
 function getOrCreateFavicon(): HTMLLinkElement {
   const existingFavicon =
     document.querySelector<HTMLLinkElement>("link[rel~='icon']");
@@ -44,16 +38,16 @@ function maybeSendNotification(numErrors: number) {
     return;
   }
 
-  const sendNotification = async () => {
+  const sendNotification = () => {
     if (numErrors === 0) {
       new Notification("Execution completed", {
         body: "Your notebook run completed successfully.",
-        icon: await getFaviconUrl("success"),
+        icon: FAVICON_PATHS.success,
       });
     } else {
       new Notification("Execution failed", {
         body: `Your notebook run encountered ${numErrors} error(s).`,
-        icon: await getFaviconUrl("error"),
+        icon: FAVICON_PATHS.error,
       });
     }
   };
@@ -75,7 +69,7 @@ function maybeSendNotification(numErrors: number) {
 
 export const DynamicFavicon = (props: Props) => {
   const { isRunning } = props;
-  const errors = useCellErrors();
+  const numErrors = useAtomValue(cellErrorCount);
 
   useEffect(() => {
     const favicon = getOrCreateFavicon();
@@ -86,46 +80,33 @@ export const DynamicFavicon = (props: Props) => {
       return;
     }
 
-    const updateFavicon = async () => {
-      let key: FaviconKey;
-      // When notebook is running, display running favicon
-      if (isRunning) {
-        key = "running";
-      } else {
-        // When run is complete, display success or error favicon
-        key = errors.length === 0 ? "success" : "error";
-      }
-      favicon.href = await getFaviconUrl(key);
+    const key = isRunning ? "running" : numErrors === 0 ? "success" : "error";
+    favicon.href = FAVICON_PATHS[key];
 
-      // If notebook is in focus, reset favicon after 3 seconds
-      // If not in focus, the focus event listener handles it
-      if (!document.hasFocus()) {
-        return;
-      }
-
-      const timeoutId = setTimeout(async () => {
-        favicon.href = await getFaviconUrl("idle");
-      }, 3000);
-
-      return () => clearTimeout(timeoutId);
-    };
+    if (!document.hasFocus()) {
+      // The focus listener resets the favicon when the user returns.
+      return;
+    }
 
-    updateFavicon();
-  }, [isRunning, errors]);
+    const timeoutId = setTimeout(() => {
+      favicon.href = FAVICON_PATHS.idle;
+    }, 3000);
+    return () => clearTimeout(timeoutId);
+  }, [isRunning, numErrors]);
 
   // Send user notification when run has completed
   const prevRunning = usePrevious(isRunning) ?? isRunning;
   useEffect(() => {
     if (prevRunning && !isRunning) {
-      maybeSendNotification(errors.length);
+      maybeSendNotification(numErrors);
     }
-  }, [errors, prevRunning, isRunning]);
+  }, [numErrors, prevRunning, isRunning]);
 
   // When notebook comes back in focus, reset favicon
-  useEventListener(window, "focus", async (_) => {
+  useEventListener(window, "focus", () => {
     if (!isRunning) {
       const favicon = getOrCreateFavicon();
-      favicon.href = await getFaviconUrl("idle");
+      favicon.href = FAVICON_PATHS.idle;
     }
   });
 

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

@@ -16,7 +16,7 @@ import { cellId } from "@/__tests__/branded";
 import { PAIR_CONFIG } from "@/__tests__/fixtures/pair-config";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
-import type { Attachment } from "@/core/attachments/state";
+import type { Attachment } from "@/core/notebook/attachments";
 import { exportedForTesting, notebookAtom } from "@/core/cells/cells";
 import {
   type CellOutputMessage,
@@ -24,7 +24,7 @@ import {
   ERROR_MESSAGE_INSTRUCTIONS,
 } from "@/core/cells/error-report";
 import { pairConfigAtom } from "@/core/config/pair";
-import { notebookStateFromSession } from "@/core/cells/session";
+import { readExport } from "@/core/cells/session";
 import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import {
   type StableSessionId,
@@ -32,8 +32,7 @@ import {
 } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
 import { connectionAtom } from "@/core/network/connection";
-import { notebookClientAtom } from "@/core/websocket/state";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { Deferred } from "@/utils/Deferred";
 import { HTTPError } from "@/utils/errors";
 import { MarimoErrorOutput } from "../../output/MarimoErrorOutput";
@@ -50,6 +49,10 @@ vi.mock("@/components/editor/chrome/wrapper/useOpenAiAssistant", () => ({
 const CELL_ID = cellId("test-cell");
 const STABLE_ID = "stable/test" as StableSessionId;
 const attachmentsAtom = atom<Attachment[]>([]);
+vi.mock("@/core/session/active-notebook", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@/core/session/active-notebook")>()),
+  activeNotebookReplicaAtom: atom(() => ({ attachmentsAtom })),
+}));
 
 const AGENT: Attachment = {
   id: "a1",
@@ -96,12 +99,6 @@ function renderButton({
   const store = createStore();
   store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: preview });
-  store.set(notebookClientAtom, {
-    connectionAtom: atom({ state: ConnectionState.OPEN }),
-    documentAtom: atom(null),
-    attachmentsAtom,
-    reconnect: async () => undefined,
-  });
   store.set(attachmentsAtom, attachments);
   store.set(stableSessionIdAtom, stableId);
   const wrapper = ({ children }: { children: React.ReactNode }) => (
@@ -320,8 +317,8 @@ describe("SendErrorReportButton", () => {
   });
 
   it("sends the restored exception type and complete traceback", async () => {
-    const state = notebookStateFromSession(
-      {
+    const { cellRuntime } = readExport({
+      session: {
         version: "1",
         metadata: { marimo_version: "1", script_metadata_hash: null },
         cells: [
@@ -345,9 +342,11 @@ describe("SendErrorReportButton", () => {
           },
         ],
       },
-      null,
-    );
-    const message = state?.cellRuntime[CELL_ID].output;
+      notebook: null,
+      filename: null,
+      appConfig: {},
+    });
+    const message = cellRuntime[CELL_ID].output;
     expect(message).toBeDefined();
     renderButton({
       content: message && <OutputRenderer cellId={CELL_ID} message={message} />,
@@ -423,11 +422,17 @@ describe("SendErrorReportButton", () => {
             cellRuntime: { [CELL_ID]: { output } },
           }),
         );
-        actions.updateCellCode({
-          cellId: CELL_ID,
-          code: "print('edited')",
-          formattingChange: false,
-        });
+        store.set(notebookAtom, (state) => ({
+          ...state,
+          cellData: {
+            ...state.cellData,
+            [CELL_ID]: {
+              ...state.cellData[CELL_ID],
+              code: "print('edited')",
+              edited: true,
+            },
+          },
+        }));
         if (queue) {
           actions.prepareForRun({ cellId: CELL_ID });
           actions.handleCellMessage({

package/src/components/editor/errors/auto-fix.tsx

@@ -18,7 +18,8 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
 import { aiCompletionCellAtom } from "@/core/ai/state";
-import { notebookAtom, useCellActions } from "@/core/cells/cells";
+import { notebookAtom } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import { aiFeaturesEnabledAtom } from "@/core/config/config";
 import { getAutoFixes } from "@/core/errors/errors";
@@ -51,7 +52,7 @@ export const AutoFixButton = ({
   className?: string;
 }) => {
   const store = useStore();
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const autoFixes = errors.flatMap((error) =>
     getAutoFixes(error, { aiEnabled: aiFeaturesEnabled }),
@@ -72,12 +73,7 @@ export const AutoFixButton = ({
       store.get(notebookAtom).cellHandles[cellId].current?.editorView;
     firstFix.onFix({
       addCodeBelow: (code: string) => {
-        createNewCell({
-          cellId: cellId,
-          autoFocus: false,
-          before: false,
-          code: code,
-        });
+        createCell({ after: cellId, code, focus: false });
       },
       editor: editorView,
       cellId: cellId,

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

@@ -4,11 +4,8 @@ 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 { attachmentLabel, useNotebookAttachments } from "@/core/notebook";
+import { agentToast } from "@/components/editor/agent-toast";
 import { pairConfigAtom } from "@/core/config/pair";
 import { stableSessionIdAtom } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
@@ -20,7 +17,7 @@ export function SendErrorReportButton({
   getContent: () => unknown;
 }) {
   const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
-  const agents = useAtomValue(agentAttachmentsAtom);
+  const agents = useNotebookAttachments("agent");
   const stableSessionId = useAtomValue(stableSessionIdAtom);
   const [sending, setSending] = useState(false);
 

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

@@ -59,7 +59,7 @@ import {
 import { Tooltip } from "@/components/ui/tooltip";
 import { SearchInput } from "@/components/ui/input";
 import { toast } from "@/components/ui/use-toast";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { disableFileDownloadsAtom } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
@@ -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>
   );
@@ -660,15 +697,11 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileTreeNode>) => {
 
   const Icon = FILE_ICON[fileType];
   const { openPrompt } = useImperativeModal();
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
 
   const handleInsertCode = (code: string) => {
-    createNewCell({
-      code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-    });
+    createCell({ after: lastFocusedCellId, code });
   };
 
   const fileExplorer = use(RequestingTreeContext);

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 (