@marimo-team/islands 0.25.3-dev129 → 0.25.3-dev134

package/src/components/data-table/renderers.tsx

@@ -124,6 +124,7 @@ export const DataTableBody = <TData,>({
     handleCellMouseUp,
     handleCellMouseOver,
     handleCellsKeyDown,
+    handleCellFocus,
     handleCopy: handleCopyAllCells,
   } = useCellRangeSelection({ table });
 
@@ -147,10 +148,16 @@ export const DataTableBody = <TData,>({
       return (
         <TableCell
           tabIndex={0}
+          role={table.options.enableCellSelection ? "gridcell" : undefined}
+          aria-selected={
+            table.options.enableCellSelection
+              ? cell.getIsSelected?.()
+              : undefined
+          }
           {...getCellDomProps(cell.id)}
           key={cell.id}
           className={cn(
-            "whitespace-pre truncate outline-hidden border-r border-r-border/75",
+            "whitespace-pre truncate outline-hidden focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring border-r border-r-border/75",
             !fixedWidth && "max-w-[300px]",
             cell.column.getColumnWrapping &&
               cell.column.getColumnWrapping?.() === "wrap" &&
@@ -169,7 +176,13 @@ export const DataTableBody = <TData,>({
             hoverTooltip.handleCellMouseOver(e, cell);
           }}
           onMouseLeave={hoverTooltip.handleCellMouseLeave}
-          onFocus={(e) => hoverTooltip.handleCellFocus(e, cell)}
+          onFocus={(e) => {
+            if (e.target === e.currentTarget) {
+              handleCellFocus(cell);
+            }
+            hoverTooltip.handleCellFocus(e, cell);
+          }}
+          onKeyDown={(e) => handleCellsKeyDown(e, cell)}
           onBlur={hoverTooltip.handleCellBlur}
           onContextMenu={() => handleContextMenu(cell)}
         >
@@ -264,11 +277,7 @@ export const DataTableBody = <TData,>({
     return rows.map((row) => renderRow(row));
   };
 
-  const tableBody = (
-    <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
-      {renderRows()}
-    </TableBody>
-  );
+  const tableBody = <TableBody ref={tableRef}>{renderRows()}</TableBody>;
 
   return (
     <>

package/src/components/data-table/row-viewer-panel/__tests__/row-viewer.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -17,6 +17,29 @@ const renderWithProviders = (component: React.ReactNode) => {
 };
 
 describe("RowExpandedPanel", () => {
+  it("preserves Space activation on navigation buttons", async () => {
+    const select = vi.fn();
+    const navigate = vi.fn();
+    renderWithProviders(
+      <RowViewerPanel
+        rowIdx={0}
+        setRowIdx={navigate}
+        totalRows={2}
+        fieldTypes={[["name", ["string", "string"]]]}
+        getRow={async () => ({ rows: [{ name: "Alice" }] })}
+        isSelectable={true}
+        isRowSelected={false}
+        handleRowSelectionChange={select}
+      />,
+    );
+    await screen.findByText("Alice");
+    const next = screen.getByRole("button", { name: "Next row" });
+    expect(fireEvent.keyDown(next, { key: " " })).toBe(true);
+    expect(select).not.toHaveBeenCalled();
+    fireEvent.click(next);
+    expect(navigate).toHaveBeenCalledExactlyOnceWith(1);
+  });
+
   const mockFieldTypes: FieldTypesWithExternalType = [
     ["name", ["string", "string"]],
     ["age", ["number", "number"]],

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -37,6 +37,7 @@ import type { GetRowResult } from "@/plugins/impl/DataTablePlugin";
 import { Objects } from "@/utils/objects";
 import { NAMELESS_COLUMN_PREFIX, renderCellValue } from "../columns";
 import { prettifyRowCount } from "../pagination";
+import { isInteractiveTarget } from "../range-focus/use-cell-range-selection";
 import {
   type FieldTypesWithExternalType,
   INDEX_COLUMN_NAME,
@@ -102,8 +103,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
   }
 
   const handleKeyDown = (e: KeyboardEvent) => {
-    // Don't intercept keys when typing in an input
-    if (e.target instanceof HTMLInputElement) {
+    if (e.defaultPrevented || isInteractiveTarget(e)) {
       return;
     }
     switch (e.key) {

package/src/components/datasources/datasources.tsx

@@ -284,6 +284,7 @@ export const DataSources: React.FC = () => {
         {hasSearch && (
           <button
             type="button"
+            aria-label="Clear table search"
             className="float-right border-b px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
             onClick={() => setSearchValue("")}
           >

package/src/components/editor/__tests__/package-alert.test.tsx

@@ -27,10 +27,12 @@ function mountPackageAlert({
   configuredManager,
   sandboxBackend,
   source = "kernel",
+  packages = ["polars"],
 }: {
   configuredManager: PackageManagerName;
   sandboxBackend: "uv" | "pixi" | null;
   source?: "kernel" | "server";
+  packages?: string[];
 }) {
   const store = createStore();
   const client = MockRequestClient.create();
@@ -55,7 +57,7 @@ function mountPackageAlert({
     packageAlert: {
       id: "missing-package",
       kind: "missing",
-      packages: ["polars"],
+      packages,
       isolated: true,
       source,
     },
@@ -97,6 +99,25 @@ it("keeps the configured package manager selectable outside a sandbox", () => {
   expect(managerSelect).not.toBeDisabled();
 });
 
+it("removes an extra absent from available choices through a keyboard menu item", async () => {
+  const client = mountPackageAlert({
+    configuredManager: "uv",
+    sandboxBackend: null,
+    packages: ["polars[dev]"],
+  });
+  fireEvent.keyDown(screen.getByRole("button", { name: "dev" }), {
+    key: "ArrowDown",
+  });
+  const remove = await screen.findByRole("menuitem", { name: "Remove dev" });
+  fireEvent.keyDown(remove, { key: "Enter" });
+  fireEvent.click(screen.getByTestId("install-packages-button"));
+  expect(client.sendInstallMissingPackages).toHaveBeenCalledExactlyOnceWith({
+    manager: "uv",
+    source: "kernel",
+    versions: { polars: "" },
+  });
+});
+
 it("installs a selected version in a Pixi sandbox", () => {
   const client = mountPackageAlert({
     configuredManager: "uv",

package/src/components/editor/cell/collapse.tsx

@@ -67,10 +67,12 @@ export const CollapsedCellBanner: React.FC<{
   const states = getDescendantsStatus(notebook, cellId);
 
   return (
-    <div
+    <button
+      type="button"
+      aria-label={`Expand ${count} collapsed ${count === 1 ? "cell" : "cells"}`}
       onClick={onClick}
       className={cn(
-        "flex items-center justify-between w-[calc(100%-2rem)] h-9 bg-muted rounded-b mx-4 opacity-80 hover:opacity-100 cursor-pointer",
+        "flex items-center justify-between w-[calc(100%-2rem)] h-9 bg-muted rounded-b mx-4 opacity-80 hover:opacity-100 cursor-pointer focus-visible:outline focus-visible:outline-ring",
       )}
     >
       <Toolbar
@@ -102,7 +104,7 @@ export const CollapsedCellBanner: React.FC<{
           </>
         }
       />
-    </div>
+    </button>
   );
 });
 CollapsedCellBanner.displayName = "CollapsedCellBanner";

package/src/components/editor/chrome/panels/outline/__tests__/outline-keyboard.test.tsx

@@ -0,0 +1,84 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { OutlineItem } from "@/core/cells/outline";
+import { MiniMap, OutlineList } from "../floating-outline";
+import { scrollToOutlineItem } from "../useActiveOutline";
+
+vi.mock("../useActiveOutline", () => ({ scrollToOutlineItem: vi.fn() }));
+
+const items: OutlineItem[] = [
+  { name: "First", level: 1, by: { id: "first" } },
+  { name: "Second", html: "<em>Second</em>", level: 2, by: { id: "second" } },
+];
+
+describe("outline keyboard navigation", () => {
+  it.each([
+    { Component: MiniMap, role: "button" },
+    { Component: OutlineList, role: "link" },
+  ])(
+    "keeps the focused $role when other headings change",
+    ({ Component, role }) => {
+      const duplicate: OutlineItem = {
+        name: "Repeated second",
+        level: 2,
+        by: { id: "second" },
+      };
+      const initial = [...items, duplicate];
+      const props = {
+        activeHeaderId: undefined,
+        activeOccurrences: undefined,
+      };
+      const { rerender } = render(<Component {...props} items={initial} />);
+      const focused = screen.getByRole(role, { name: "Repeated second" });
+      focused.focus();
+
+      for (const by of [{ id: "inserted" }, { path: "second" }]) {
+        const inserted: OutlineItem = { name: "Inserted", level: 1, by };
+        rerender(<Component {...props} items={[inserted, ...initial]} />);
+        expect(screen.getByRole(role, { name: "Repeated second" })).toBe(
+          focused,
+        );
+        expect(focused).toHaveFocus();
+      }
+
+      rerender(
+        <Component {...props} items={[items[1], duplicate, items[0]]} />,
+      );
+      expect(screen.getByRole(role, { name: "Repeated second" })).toBe(focused);
+      expect(focused).toHaveFocus();
+      fireEvent.click(focused);
+      expect(scrollToOutlineItem).toHaveBeenLastCalledWith(duplicate, 1);
+    },
+  );
+
+  it("activates plain and rich headings with Enter", () => {
+    render(
+      <OutlineList
+        items={items}
+        activeHeaderId={undefined}
+        activeOccurrences={undefined}
+      />,
+    );
+    items.forEach((item) => {
+      const link = screen.getByRole("link", { name: item.name });
+      expect(link).toHaveAttribute("tabindex", "0");
+      fireEvent.keyDown(link, { key: "Enter" });
+      expect(scrollToOutlineItem).toHaveBeenLastCalledWith(item, 0);
+    });
+  });
+
+  it("names each minimap button", () => {
+    render(
+      <MiniMap
+        items={items}
+        activeHeaderId={undefined}
+        activeOccurrences={undefined}
+      />,
+    );
+    const button = screen.getByRole("button", { name: "Second" });
+    fireEvent.click(button);
+    expect(scrollToOutlineItem).toHaveBeenLastCalledWith(items[1], 0);
+  });
+});

package/src/components/editor/chrome/panels/outline/floating-outline.tsx

@@ -17,6 +17,8 @@ export const FloatingOutline: React.FC = () => {
     findOutlineElements(items),
   );
   const [isHovered, setIsHovered] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const isVisible = isHovered || isFocused;
 
   // Hide if < 2 items
   // It's kinda useless to have an outline with only one item
@@ -29,6 +31,12 @@ export const FloatingOutline: React.FC = () => {
     <div
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      onFocus={() => setIsFocused(true)}
+      onBlur={(e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          setIsFocused(false);
+        }
+      }}
       className={cn(
         "fixed top-[25vh] right-8 z-10000 print:hidden",
         // Hide on small screens
@@ -36,9 +44,10 @@ export const FloatingOutline: React.FC = () => {
       )}
     >
       <OutlineList
+        inert={!isVisible}
         className={cn(
           "-top-4 max-h-[70vh] bg-background rounded-lg shadow-lg absolute overflow-auto transition-all duration-300 w-[300px] border",
-          isHovered ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
+          isVisible ? "left-[-280px] opacity-100" : "left-[300px] opacity-0",
         )}
         items={items}
         activeHeaderId={activeHeaderId}
@@ -62,17 +71,20 @@ export const MiniMap: React.FC<{
   const seen = new Map<string, number>();
   return (
     <div className="flex flex-col gap-4 items-end max-h-[70vh] overflow-hidden">
-      {items.map((item, idx) => {
+      {items.map((item) => {
         const identifier = "id" in item.by ? item.by.id : item.by.path;
+        const selector = JSON.stringify(item.by);
         // Keep track of how many times we've seen this selector
-        const occurrences = seen.get(identifier) ?? 0;
-        seen.set(identifier, occurrences + 1);
+        const occurrences = seen.get(selector) ?? 0;
+        seen.set(selector, occurrences + 1);
 
         return (
-          <div
-            key={`${identifier}-${idx}`}
+          <button
+            type="button"
+            aria-label={item.name}
+            key={`${selector}-${occurrences}`}
             className={cn(
-              "h-[2px] bg-muted-foreground/60",
+              "h-[2px] bg-muted-foreground/60 focus-visible:outline focus-visible:outline-ring",
               item.level === 1 && "w-5",
               item.level === 2 && "w-4",
               item.level === 3 && "w-3",
@@ -91,24 +103,31 @@ export const MiniMap: React.FC<{
 
 export const OutlineList: React.FC<{
   className?: string;
+  inert?: boolean;
   items: OutlineItem[];
   activeHeaderId: string | undefined;
   activeOccurrences: number | undefined;
-}> = ({ items, activeHeaderId, activeOccurrences, className }) => {
+}> = ({ items, activeHeaderId, activeOccurrences, className, inert }) => {
   // Map of selector to its occurrences
   const seen = new Map<string, number>();
   return (
-    <div className={cn("flex flex-col overflow-auto py-4 pl-2", className)}>
-      {items.map((item, idx) => {
+    <div
+      inert={inert}
+      className={cn("flex flex-col overflow-auto py-4 pl-2", className)}
+    >
+      {items.map((item) => {
         const identifier = "id" in item.by ? item.by.id : item.by.path;
+        const selector = JSON.stringify(item.by);
         // Keep track of how many times we've seen this selector
-        const occurrences = seen.get(identifier) ?? 0;
-        seen.set(identifier, occurrences + 1);
+        const occurrences = seen.get(selector) ?? 0;
+        seen.set(selector, occurrences + 1);
 
-        const key = `${identifier}-${idx}`;
+        const key = `${selector}-${occurrences}`;
         const sharedProps = {
+          role: "link",
+          tabIndex: 0,
           className: cn(
-            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l",
+            "px-2 py-1 cursor-pointer hover:bg-accent/50 hover:text-accent-foreground rounded-l focus-visible:outline focus-visible:outline-ring",
             item.level === 1 && "font-semibold",
             item.level === 2 && "ml-3",
             item.level === 3 && "ml-6",
@@ -118,6 +137,12 @@ export const OutlineList: React.FC<{
               "text-accent-foreground",
           ),
           onClick: () => scrollToOutlineItem(item, occurrences),
+          onKeyDown: (e: React.KeyboardEvent) => {
+            if (e.target === e.currentTarget && e.key === "Enter") {
+              e.preventDefault();
+              scrollToOutlineItem(item, occurrences);
+            }
+          },
         };
 
         if (item.html) {

package/src/components/editor/chrome/panels/outline/useActiveOutline.tsx

@@ -113,9 +113,10 @@ export function findOutlineElements(items: OutlineItem[]) {
   return items
     .map((item) => {
       const identifier = "id" in item.by ? item.by.id : item.by.path;
+      const selector = JSON.stringify(item.by);
       // Keep track of how many times we've seen this selector
-      const occurrences = seen.get(identifier) ?? 0;
-      seen.set(identifier, occurrences + 1);
+      const occurrences = seen.get(selector) ?? 0;
+      seen.set(selector, occurrences + 1);
 
       const el = findOutlineItem(item, occurrences);
       if (!el) {

package/src/components/editor/chrome/panels/secrets-panel.tsx

@@ -66,6 +66,7 @@ const SecretsPanel: React.FC = () => {
           <div className="flex justify-start h-8 border-b">
             <button
               type="button"
+              aria-label="Add environment variable"
               className="border-r px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
               onClick={() =>
                 openModal(

package/src/components/editor/chrome/panels/snippets-panel.tsx

@@ -71,7 +71,11 @@ const SnippetsPanel: React.FC = () => {
                 rootClassName="flex-1 border-r"
               />
               <ContributeSnippetButton>
-                <button className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground">
+                <button
+                  type="button"
+                  aria-label="Contribute snippet"
+                  className="float-right px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
+                >
                   <PlusIcon className="h-4 w-4" />
                 </button>
               </ContributeSnippetButton>

package/src/components/editor/chrome/wrapper/__tests__/attachment-status.test.tsx

@@ -16,14 +16,14 @@ import { TooltipProvider } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import type { Attachment } from "@/core/attachments/state";
 import { pairConfigAtom } from "@/core/config/pair";
-import { createNotebookClient } from "@/core/host/notebook-client";
+import { createNotebookReplica } from "@/core/host/replica";
 import {
   type StableSessionId,
   stableSessionIdAtom,
 } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
 import { connectionAtom } from "@/core/network/connection";
-import { notebookClientAtom } from "@/core/websocket/state";
+import { notebookReplicaAtom } from "@/core/websocket/state";
 import { ConnectionState } from "@/core/websocket/types";
 import { Deferred } from "@/utils/Deferred";
 import { AttachmentStatus } from "../footer-items/attachment-status";
@@ -45,8 +45,8 @@ function renderStatus(attachments: Attachment[] = [AGENT], preview = true) {
   const store = createStore();
   store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: preview });
-  store.set(notebookClientAtom, {
-    ...createNotebookClient(store).client,
+  store.set(notebookReplicaAtom, {
+    ...createNotebookReplica(store),
     connectionAtom: atom({ state: ConnectionState.OPEN }),
     attachmentsAtom,
   });

package/src/components/editor/controls/__tests__/keyboard-shortcuts.test.tsx

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { getDefaultHotkey } from "@/core/hotkeys/hotkeys";
+import {
+  KeyboardShortcuts,
+  keyboardShortcutsAtom,
+} from "../keyboard-shortcuts";
+
+const saveUserConfig = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock("@/core/network/requests", () => ({
+  useRequestClient: () => ({ saveUserConfig }),
+}));
+
+describe("shortcut recorder keyboard navigation", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("allows Tab navigation and Reset without saving a shortcut", async () => {
+    const store = createStore();
+    const config = defaultUserConfig();
+    store.set(userConfigAtom, {
+      ...config,
+      keymap: { ...config.keymap, overrides: { "cell.run": "Ctrl-9" } },
+    });
+    store.set(keyboardShortcutsAtom, true);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <KeyboardShortcuts />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const edit = screen.getByRole("button", {
+      name: `Edit shortcut: ${getDefaultHotkey("cell.run").name}`,
+    });
+    act(() => edit.focus());
+    fireEvent.click(edit, { detail: 0 });
+    const recorder = screen.getByPlaceholderText(
+      getDefaultHotkey("cell.run").name,
+    );
+    expect(recorder).toHaveFocus();
+    expect(fireEvent.keyDown(recorder, { key: "Tab" })).toBe(true);
+    expect(fireEvent.keyDown(recorder, { key: "Tab", shiftKey: true })).toBe(
+      true,
+    );
+    expect(recorder).toBeInTheDocument();
+    expect(saveUserConfig).not.toHaveBeenCalled();
+    const reset = screen.getByRole("button", { name: /^Reset to default:/ });
+    act(() => reset.focus());
+    expect(reset).toHaveFocus();
+    await act(async () => fireEvent.click(reset, { detail: 0 }));
+    expect(saveUserConfig).toHaveBeenCalledExactlyOnceWith({
+      config: { keymap: { ...config.keymap, overrides: {} } },
+    });
+  });
+});

package/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -134,6 +134,9 @@ export const KeyboardShortcuts: React.FC = () => {
             defaultValue={newShortcut.join("+")}
             placeholder={hotkey.name}
             onKeyDown={(e) => {
+              if (e.key === "Tab" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                return;
+              }
               e.preventDefault();
               const next: string[] = [];
 
@@ -189,6 +192,7 @@ export const KeyboardShortcuts: React.FC = () => {
             autoFocus={true}
             endAdornment={
               <Button
+                aria-label="Cancel shortcut recording"
                 variant="text"
                 size="xs"
                 className="mb-0"
@@ -206,13 +210,14 @@ export const KeyboardShortcuts: React.FC = () => {
               Press a key combination
             </span>
             {defaultHotkey.key !== hotkey.key && (
-              <span
+              <button
+                type="button"
                 className="text-xs cursor-pointer text-primary"
                 onClick={handleResetShortcut}
               >
                 Reset to default:{" "}
                 <span className="font-mono">{defaultHotkey.key}</span>
-              </span>
+              </button>
             )}
           </div>
         </div>
@@ -228,13 +233,17 @@ export const KeyboardShortcuts: React.FC = () => {
         className="grid grid-cols-[auto_2fr_3fr] gap-2 items-center"
       >
         {hotkeys.isEditable(action) ? (
-          <EditIcon
-            className="cursor-pointer opacity-60 hover:opacity-100 text-muted-foreground w-3 h-3"
+          <button
+            type="button"
+            aria-label={`Edit shortcut: ${hotkey.name}`}
+            className="cursor-pointer opacity-60 hover:opacity-100 text-muted-foreground w-3 h-3 focus-visible:outline focus-visible:outline-ring"
             onClick={() => {
               setNewShortcut([]);
               setEditingShortcut(action);
             }}
-          />
+          >
+            <EditIcon className="w-3 h-3" />
+          </button>
         ) : (
           <div className="w-3 h-3" />
         )}

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

@@ -25,7 +25,7 @@ import {
 } from "@/core/cells/error-report";
 import { pairConfigAtom } from "@/core/config/pair";
 import { notebookStateFromSession } from "@/core/cells/session";
-import { createNotebookClient } from "@/core/host/notebook-client";
+import { createNotebookReplica } from "@/core/host/replica";
 import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import {
   type StableSessionId,
@@ -33,7 +33,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 { notebookReplicaAtom } from "@/core/websocket/state";
 import { ConnectionState } from "@/core/websocket/types";
 import { Deferred } from "@/utils/Deferred";
 import { HTTPError } from "@/utils/errors";
@@ -97,8 +97,8 @@ function renderButton({
   const store = createStore();
   store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(pairConfigAtom, { ...PAIR_CONFIG, hostEnabled: preview });
-  store.set(notebookClientAtom, {
-    ...createNotebookClient(store).client,
+  store.set(notebookReplicaAtom, {
+    ...createNotebookReplica(store),
     connectionAtom: atom({ state: ConnectionState.OPEN }),
     attachmentsAtom,
   });

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", {