@marimo-team/islands 0.25.3-dev20 → 0.25.3-dev200

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

@@ -8,13 +8,13 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
-import { createStore, Provider } from "jotai";
+import { atom, createStore, Provider } from "jotai";
 import { userEvent } from "storybook/test";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { PAIR_CONFIG } from "@/__tests__/fixtures/pair-config";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
-import { type Attachment, attachmentsAtom } from "@/core/attachments/state";
+import type { Attachment } from "@/core/notebook/attachments";
 import { pairConfigAtom } from "@/core/config/pair";
 import {
   type StableSessionId,
@@ -22,13 +22,19 @@ import {
 } from "@/core/kernel/session";
 import { API } from "@/core/network/api";
 import { connectionAtom } from "@/core/network/connection";
-import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { Deferred } from "@/utils/Deferred";
 import { AttachmentStatus } from "../footer-items/attachment-status";
 
 vi.mock("@/components/ui/use-toast", () => ({ toast: vi.fn() }));
 vi.mock("@/core/network/api", () => ({ API: { post: vi.fn() } }));
 
+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",
   kind: "agent",
@@ -342,21 +348,6 @@ describe("AttachmentStatus", () => {
     ).toBeDisabled();
   });
 
-  it.each([
-    { state: ConnectionState.CONNECTING },
-    { state: ConnectionState.CLOSING },
-    { state: ConnectionState.NOT_STARTED },
-    {
-      state: ConnectionState.CLOSED,
-      code: WebSocketClosedReason.KERNEL_DISCONNECTED,
-      reason: "offline",
-    },
-  ])("hides connected claims while the browser is %j", (connection) => {
-    const { store, container } = renderStatus();
-    act(() => store.set(connectionAtom, connection));
-    expect(container).toBeEmptyDOMElement();
-  });
-
   it("removes detached agents when the list is replaced", () => {
     const { store, container } = renderStatus([
       AGENT,

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

@@ -0,0 +1,92 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { createDocumentModel } from "@/core/notebook/document";
+import { document } from "@/core/notebook/document/__tests__/fixtures";
+import {
+  type FakeEdit,
+  fakeBackend,
+} from "@/core/notebook/replica/__tests__/fixtures";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
+import { DocumentSyncStatus } from "../footer-items/document-sync-status";
+
+const lifetimes: AbortController[] = [];
+
+afterEach(() => {
+  act(() => lifetimes.splice(0).forEach((controller) => controller.abort()));
+});
+
+const conflict = {
+  ok: false as const,
+  status: 409,
+  problem: {
+    type: "tag:marimo.io,2026:host/conflict",
+    title: "Conflict",
+    status: 409,
+    detail: "cell c1 has changed since it was read.",
+  },
+};
+
+function setup(edit: FakeEdit) {
+  const store = createStore();
+  const model = createDocumentModel({
+    store,
+    documentAtom: atom(document()),
+    backendAtom: atom(fakeBackend({ edit })),
+  });
+  const controller = new AbortController();
+  lifetimes.push(controller);
+  model.start({ signal: controller.signal });
+  store.set(activeDocumentModelAtom, model);
+  render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <DocumentSyncStatus />
+      </TooltipProvider>
+    </Provider>,
+  );
+  return { store, model };
+}
+
+describe("DocumentSyncStatus", () => {
+  it("renders nothing while edits reach the server", () => {
+    setup(vi.fn<FakeEdit>());
+    expect(screen.queryByTestId("footer-document-sync")).toBeNull();
+  });
+
+  it("shows a rejected edit and resubmits it on click", async () => {
+    const accepted = document().revision;
+    const edit = vi
+      .fn<FakeEdit>()
+      .mockResolvedValueOnce(conflict)
+      .mockResolvedValueOnce({
+        ok: true,
+        status: 200,
+        data: {
+          document: { ...accepted, version: 2, etag: "document-2" },
+          cells: {},
+        },
+      });
+    const { store, model } = setup(edit);
+
+    await act(async () => {
+      store.set(model.editAtom, (tx) => tx.setCode("c1", "x = 2"));
+      await model.flush().catch(() => undefined);
+    });
+    const item = screen.getByTestId("footer-document-sync");
+    expect(item).toHaveAttribute(
+      "aria-label",
+      "Edits are not reaching the server",
+    );
+
+    await act(async () => {
+      fireEvent.click(item);
+      await Promise.resolve();
+    });
+    expect(edit).toHaveBeenCalledTimes(2);
+    expect(screen.queryByTestId("footer-document-sync")).toBeNull();
+  });
+});

package/src/components/editor/chrome/wrapper/__tests__/pending-ai-cells.test.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { act, render, screen, within } from "@testing-library/react";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { stagedAICellsAtom, visibleForTesting } from "@/core/ai/staged-cells";
+import { scrollAndHighlightCell } from "../../../links/cell-link";
 import { PendingAICells } from "../pending-ai-cells";
 
 vi.mock("@/components/editor/cell/useDeleteCell", () => ({
@@ -14,8 +15,10 @@ vi.mock("@/components/editor/cell/useDeleteCell", () => ({
 
 vi.mock("@/core/cells/cells", () => ({
   getCellEditorView: vi.fn(),
+}));
+vi.mock("@/core/cells/actions", () => ({
   useCellActions: () => ({
-    createNewCell: vi.fn(),
+    createCell: vi.fn(),
     updateCellCode: vi.fn(),
   }),
 }));
@@ -29,6 +32,62 @@ vi.mock("@/components/editor/links/cell-link", () => ({
 }));
 
 describe("PendingAICells", () => {
+  it("navigates between pending cells through named controls", () => {
+    const store = createStore();
+    const first = cellId("first-pending-cell");
+    const second = cellId("second-pending-cell");
+    const third = cellId("third-pending-cell");
+    store.set(
+      stagedAICellsAtom,
+      new Map([
+        [first, { type: "add_cell" }],
+        [second, { type: "add_cell" }],
+        [third, { type: "add_cell" }],
+      ]),
+    );
+
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <PendingAICells />
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    const next = screen.getByRole("button", { name: "Next pending AI cell" });
+    const previous = screen.getByRole("button", {
+      name: "Previous pending AI cell",
+    });
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(second, "focus");
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    fireEvent.click(previous);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(second, "focus");
+    expect(screen.getByText("2 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(third, "focus");
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+
+    fireEvent.click(next);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(first, "focus");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
+
+    fireEvent.click(previous);
+    expect(scrollAndHighlightCell).toHaveBeenLastCalledWith(third, "focus");
+    expect(screen.getByText("3 / 3")).toBeInTheDocument();
+  });
+
   it("disables bulk actions while cells are still generating", () => {
     const store = createStore();
     const generationId = Symbol("staged-cell-generation");

package/src/components/editor/chrome/wrapper/footer-items/attachment-status.tsx

@@ -17,10 +17,10 @@ import {
 } from "@/components/ui/popover";
 import {
   type Attachment,
-  agentAttachmentsAtom,
   attachmentLabel,
-} from "@/core/attachments/state";
-import { agentToast } from "@/core/attachments/toast";
+  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";
@@ -29,7 +29,7 @@ import { FooterItem } from "../footer-item";
 
 export function AttachmentStatus() {
   const hostEnabled = useAtomValue(pairConfigAtom)?.hostEnabled;
-  const agents = useAtomValue(agentAttachmentsAtom);
+  const agents = useNotebookAttachments("agent");
   const [open, setOpen] = useState(false);
   const previous = useRef(new Set<string>());
   const automatic = useRef(false);

package/src/components/editor/chrome/wrapper/footer-items/backend-status.tsx

@@ -14,7 +14,7 @@ import {
   isAppConnected,
   isAppConnecting,
   isAppNotStarted,
-} from "@/core/websocket/connection-utils";
+} from "@/core/session/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 import { Strings } from "@/utils/strings";

package/src/components/editor/chrome/wrapper/footer-items/document-sync-status.tsx

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, useAtomValue } from "jotai";
+import { AlertCircleIcon } from "lucide-react";
+import type React from "react";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
+import { FooterItem } from "../footer-item";
+
+/** The active notebook's document sync status, or null without a model. */
+const syncStatusAtom = atom((get) => {
+  const model = get(activeDocumentModelAtom);
+  return model === null ? null : get(model.syncStatusAtom);
+});
+
+/**
+ * Shown when this client's edits stop reaching the server.
+ *
+ * Typing keeps working locally and Run still uses the editor's code, but
+ * other clients stop seeing the edits and Save fails until they are
+ * through. A rejected edit is retried on click.
+ */
+export const DocumentSyncStatus: React.FC = () => {
+  const model = useAtomValue(activeDocumentModelAtom);
+  const status = useAtomValue(syncStatusAtom);
+  if (model === null || status === null || status.status !== "error") {
+    return null;
+  }
+  const retry = status.retryable
+    ? () => {
+        // The status shows the outcome, so a failed retry needs no handling.
+        model.retry().catch(() => undefined);
+      }
+    : undefined;
+  const detail = status.problem?.detail ?? status.error.message;
+  return (
+    <FooterItem
+      tooltip={
+        <div className="w-[260px] space-y-1">
+          <div>Edits are not reaching the server.</div>
+          <div className="text-muted-foreground">{detail}</div>
+          <div>
+            {retry ? "Click to retry." : "Reload the page to continue."}
+          </div>
+        </div>
+      }
+      selected={false}
+      onClick={retry}
+      aria-label="Edits are not reaching the server"
+      data-testid="footer-document-sync"
+    >
+      <AlertCircleIcon className="w-4 h-4 text-destructive" />
+    </FooterItem>
+  );
+};

package/src/components/editor/chrome/wrapper/footer-items/lsp-status.tsx

@@ -14,7 +14,7 @@ import type {
   LspRestartResponse,
 } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
-import { isAppConnected } from "@/core/websocket/connection-utils";
+import { isAppConnected } from "@/core/session/connection-utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 

package/src/components/editor/chrome/wrapper/footer-items/machine-stats.tsx

@@ -10,7 +10,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
 import type { UsageResponse } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 import { cn } from "@/utils/cn";

package/src/components/editor/chrome/wrapper/footer-items/runtime-settings.tsx

@@ -26,13 +26,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { cn } from "@/utils/cn";
 import { FooterItem } from "../footer-item";
 
-interface RuntimeSettingsProps {
-  className?: string;
-}
-
-export const RuntimeSettings: React.FC<RuntimeSettingsProps> = ({
-  className,
-}) => {
+export const RuntimeSettings: React.FC = () => {
   const { saveUserConfig } = useRequestClient();
   const [config, setUserConfig] = useResolvedMarimoConfig();
 

package/src/components/editor/chrome/wrapper/footer.tsx

@@ -18,6 +18,7 @@ import {
   connectionStatusAtom,
 } from "./footer-items/backend-status";
 import { CopilotStatusIcon } from "./footer-items/copilot-status";
+import { DocumentSyncStatus } from "./footer-items/document-sync-status";
 import { MachineStats } from "./footer-items/machine-stats";
 import { PyodideStatus } from "./footer-items/pyodide-status";
 import { RTCStatus } from "./footer-items/rtc-status";
@@ -107,6 +108,7 @@ export const Footer: React.FC = () => {
       </ShowInKioskMode>
 
       <div className="flex items-center shrink-0 min-w-0">
+        <DocumentSyncStatus />
         <MachineStats />
         <AttachmentStatus />
         <AIStatusIcon />

package/src/components/editor/chrome/wrapper/minimap-state.ts

@@ -104,7 +104,7 @@ export function buildCellGraph(
 export const cellGraphsAtom = atom((get) => {
   const cellIds = get(cellIdsAtom);
   const variables = get(variablesAtom);
-  return buildCellGraph(cellIds.inOrderIds, variables);
+  return buildCellGraph(cellIds, variables);
 });
 
 /**

package/src/components/editor/chrome/wrapper/pending-ai-cells.tsx

@@ -79,7 +79,12 @@ export const PendingAICells: React.FC = () => {
       <SparklesIcon className="h-4 w-4 text-primary" />
 
       <div className="flex items-center">
-        <Button variant="ghost" size="icon" onClick={() => clickNext("up")}>
+        <Button
+          aria-label="Previous pending AI cell"
+          variant="ghost"
+          size="icon"
+          onClick={() => clickNext("down")}
+        >
           <ChevronUp className="h-3.5 w-3.5" />
         </Button>
         <span className="text-xs font-mono min-w-14 text-center">
@@ -87,7 +92,12 @@ export const PendingAICells: React.FC = () => {
             ? `${listStagedCells.length} pending`
             : `${currentIndex + 1} / ${listStagedCells.length}`}
         </span>
-        <Button variant="ghost" size="icon" onClick={() => clickNext("down")}>
+        <Button
+          aria-label="Next pending AI cell"
+          variant="ghost"
+          size="icon"
+          onClick={() => clickNext("up")}
+        >
           <ChevronDown className="h-3.5 w-3.5" />
         </Button>
       </div>

package/src/components/editor/chrome/wrapper/storage.ts

@@ -15,7 +15,7 @@ let storedValue: string | null = null;
  */
 export function createStorage(location: "left" | "bottom"): PanelGroupStorage {
   return {
-    getItem(name) {
+    getItem(_name) {
       if (!storedValue) {
         return storedValue ?? null;
       }

package/src/components/editor/columns/__tests__/cell-column.test.tsx

@@ -3,7 +3,7 @@ import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { Column } from "../cell-column";
 
 const columnId = "col-1" as CellColumnId;

package/src/components/editor/columns/cell-column.tsx

@@ -4,7 +4,7 @@ import React, { memo, useRef } from "react";
 import type { AppConfig } from "@/core/config/config-schema";
 import { useResizeHandle } from "@/hooks/useResizeHandle";
 import { cn } from "@/utils/cn";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { SortableColumn } from "./sortable-column";
 import { storageFn } from "./storage";
 

package/src/components/editor/columns/sortable-column.tsx

@@ -19,9 +19,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Tooltip } from "@/components/ui/tooltip";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { cn } from "@/utils/cn";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { mergeRefs } from "../../../utils/mergeRefs";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/editor/connections/components.tsx

@@ -18,7 +18,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
 import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
@@ -48,7 +48,7 @@ export const SelectorButton: React.FC<{
 }> = ({ name, color, icon, onSelect }) => (
   <button
     type="button"
-    className="py-3 flex flex-col items-center justify-center gap-1 transition-all hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
+    className="py-3 flex flex-col items-center justify-center gap-1 transition-[scale,filter,box-shadow] hover:scale-105 hover:brightness-110 rounded shadow-sm-solid hover:shadow-md-solid"
     style={{ backgroundColor: color }}
     onClick={onSelect}
   >
@@ -112,7 +112,7 @@ export const ConnectionFormFooter = <L extends string>({
  * Returns a callback that inserts code into a new cell after the last focused cell.
  */
 export function useInsertCode() {
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const lastFocusedCellId = useLastFocusedCellId();
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
 
@@ -121,17 +121,12 @@ export function useInsertCode() {
     if (/\bmo\./.test(code)) {
       maybeAddMarimoImport({
         autoInstantiate,
-        createNewCell,
+        createCell,
         fromCellId: lastFocusedCellId,
       });
     }
 
-    createNewCell({
-      code,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-      skipIfCodeExists: true,
-    });
+    createCell({ after: lastFocusedCellId, code, skipIfCodeExists: true });
   };
 }
 

package/src/components/editor/controls/Controls.tsx

@@ -20,16 +20,16 @@ import { SaveComponent } from "@/core/saving/save-component";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
-} from "@/core/websocket/connection-utils";
-import { ConnectionState } from "@/core/websocket/types";
+} from "@/core/session/connection-utils";
+import { ConnectionState } from "@/core/session/types";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import {
   canUndoDeletesAtom,
   needsRunAtom,
   undoLabelAtom,
-  useCellActions,
 } from "../../../core/cells/cells";
+import { useCellActions } from "../../../core/cells/actions";
 import { ConfigButton } from "../../app-config/app-config-button";
 import { renderShortcut } from "../../shortcuts/renderShortcut";
 import { Tooltip } from "../../ui/tooltip";
@@ -111,7 +111,7 @@ export const Controls = ({
         className={cn(bottomRightControls)}
       >
         <HideInKioskMode>
-          <SaveComponent kioskMode={false} />
+          <SaveComponent />
         </HideInKioskMode>
 
         <Tooltip content={renderShortcut("global.hideCode")}>

package/src/components/editor/controls/__tests__/command-palette.test.tsx

@@ -0,0 +1,53 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { useNotebookActions } from "../../actions/useNotebookActions";
+import CommandPalette from "../command-palette";
+
+vi.mock("../../actions/useNotebookActions", () => ({
+  useNotebookActions: vi.fn(),
+}));
+vi.mock("../../actions/useCellActionButton", () => ({
+  useCellActionButtons: () => [],
+}));
+vi.mock("../../actions/useConfigActions", () => ({
+  useConfigActions: () => [],
+}));
+
+it("builds current actions only while open and keeps the opening shortcut active", async () => {
+  HTMLElement.prototype.scrollIntoView = vi.fn();
+  const firstAction = vi.fn();
+  const nextAction = vi.fn();
+  vi.mocked(useNotebookActions).mockReturnValue([
+    { label: "First action", handle: firstAction },
+  ]);
+  render(
+    <Provider store={createStore()}>
+      <CommandPalette />
+    </Provider>,
+  );
+  expect(useNotebookActions).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+  await screen.findByPlaceholderText("Type to search...");
+  fireEvent.click(screen.getByText("First action"));
+  await waitFor(() => expect(firstAction).toHaveBeenCalledOnce());
+  await waitFor(() =>
+    expect(screen.queryByPlaceholderText("Type to search...")).toBeNull(),
+  );
+
+  vi.mocked(useNotebookActions)
+    .mockClear()
+    .mockReturnValue([{ label: "Updated action", handle: nextAction }]);
+  fireEvent.keyDown(document, { key: "x" });
+  expect(useNotebookActions).not.toHaveBeenCalled();
+
+  fireEvent.keyDown(document, { key: "k", ctrlKey: true });
+  await screen.findByPlaceholderText("Type to search...");
+  expect(screen.queryByText("First action")).toBeNull();
+  fireEvent.click(screen.getByText("Updated action"));
+  await waitFor(() => expect(nextAction).toHaveBeenCalledOnce());
+  expect(firstAction).toHaveBeenCalledOnce();
+});

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: {} } },
+    });
+  });
+});