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

package/dist/{vennDiagram-4TSXK5OY-CeY6Z1xZ.js → vennDiagram-4TSXK5OY-DrIOUHfb.js}

@@ -3,7 +3,7 @@ import { t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { $ as r, H as i, K as a, U as o, a as s, b as c, c as l, et as u, f as d, nt as f, tt as p, v as m, w as h, y as g } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import { t as _ } from "./rough.esm-CtV9AnV1.js";
-import { p as v } from "./mermaid-BA-Z6wGL.js";
+import { p as v } from "./mermaid-DFYN_PXd.js";
 //#region ../node_modules/.pnpm/khroma@2.1.0/node_modules/khroma/dist/methods/transparentize.js
 var y = (e, t) => p(e, "a", -t), b = 1e-10;
 function x(e, t) {

package/dist/{wardleyDiagram-VM6X3IG4-Cxs9NtVi.js → wardleyDiagram-VM6X3IG4-CJNjf4OH.js}

@@ -2,7 +2,7 @@ import { i as e } from "./chunk-75Z2AOVW-D7gxIs2Q.js";
 import { n as t } from "./src-CA_m4ONl.js";
 import { n } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as r, H as i, K as a, U as o, a as s, b as c, c as l, v as u, w as d, x as f, y as p } from "./chunk-DU6HZSFF-BwiyaNpg.js";
-import { p as m } from "./mermaid-BA-Z6wGL.js";
+import { p as m } from "./mermaid-DFYN_PXd.js";
 import { n as h } from "./mermaid-parser.core-DxuSfYwJ.js";
 import { t as g } from "./chunk-JWPE2WC7-DJvv1t8U.js";
 //#region ../node_modules/.pnpm/mermaid@11.17.2/node_modules/mermaid/dist/chunks/mermaid.core/wardleyDiagram-VM6X3IG4.mjs

package/dist/{xychartDiagram-S5SC5T6Z-DNWbvPK7.js → xychartDiagram-S5SC5T6Z-DEshFho-.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./linear-Cnaq3Tfb.js";
+import { t as e } from "./linear-DWERh7eI.js";
 import { n as t } from "./ordinal-c7efuCSS.js";
 import { t as n } from "./range-BAIvbVHp.js";
 import { q as r } from "./cubic-OaEBhQPK.js";
@@ -9,7 +9,7 @@ import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import "./chunk-PWAF6VOD-CQw5qATZ.js";
 import { t as b } from "./chunk-GMAD6QVW-BhaJx0X3.js";
-import { p as x } from "./mermaid-BA-Z6wGL.js";
+import { p as x } from "./mermaid-DFYN_PXd.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev26",
+  "version": "0.25.3-dev262",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -52,6 +52,7 @@
     "@lezer/lr": "^1.4.10",
     "@lezer/markdown": "^1.7.2",
     "@lezer/python": "^1.1.19",
+    "@marimo-team/client": "workspace:*",
     "@marimo-team/codemirror-ai": "^0.3.10",
     "@marimo-team/codemirror-languageserver": "^2.0.1",
     "@marimo-team/codemirror-mcp": "^0.1.7",
@@ -63,7 +64,7 @@
     "@paralleldrive/cuid2": "^2.3.1",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "~1.3.2",
-    "@radix-ui/react-use-controllable-state": "~1.2.6",
+    "@radix-ui/react-use-controllable-state": "~1.3.0",
     "@replit/codemirror-vim": "^6.4.0",
     "@revealjs/react": "^0.2.2",
     "@streamdown/math": "^1.0.2",
@@ -110,17 +111,14 @@
     "js-cookie": "^3.0.8",
     "katex": "^0.18.7",
     "lodash-es": "^4.18.1",
-    "loro-codemirror": "^0.3.3",
-    "loro-crdt": "^1.16.1",
     "lucide-react": "^0.577.0",
     "lz-string": "^1.5.0",
     "marked": "^15.0.12",
     "mermaid": "^11.17.2",
-    "partysocket": "1.3.0",
     "path-to-regexp": "^8.4.2",
     "plotly.js": "^3.7.0",
     "pyodide": "314.0.0",
-    "radix-ui": "1.6.7",
+    "radix-ui": "1.8.1",
     "react-arborist": "^3.16.0",
     "react-aria": "3.52.1",
     "react-aria-components": "1.21.1",
@@ -152,6 +150,7 @@
     "typescript-memoize": "^1.1.1",
     "use-acp": "0.2.6",
     "use-resize-observer": "^9.1.0",
+    "vega": "6.2.0",
     "vega-lite": "6.4.3",
     "vega-loader": "^5.1.3",
     "vega-parser": "^7.1.3",
@@ -184,8 +183,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "sync-katex-css": "node --experimental-strip-types scripts/sync-katex-css.ts",
-    "codegen": "node --experimental-strip-types scripts/generate-host-protocol.ts",
-    "codegen:check": "node --experimental-strip-types scripts/generate-host-protocol.ts --check"
+    "doctor": "npx react-doctor@latest"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
@@ -194,10 +192,10 @@
   "devDependencies": {
     "@codecov/vite-plugin": "^1.9.1",
     "@csstools/postcss-light-dark-function": "^2.0.11",
-    "@playwright/test": "^1.63.0",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/addon-links": "^10.6.0",
-    "@storybook/react-vite": "^10.6.0",
+    "@playwright/test": "^1.64.0",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/addon-links": "^10.6.2",
+    "@storybook/react-vite": "^10.6.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/dompurify": "^3.2.0",
@@ -207,28 +205,26 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/timestring": "^6.0.5",
-    "@vitejs/plugin-react": "^6.1.1",
+    "@vitejs/plugin-react": "^6.1.2",
     "@vitest/coverage-v8": "4.1.11",
     "blob-polyfill": "^7.0.20220408",
     "cross-env": "^7.0.3",
     "jsdom": "^24.1.3",
     "msw": "^2.15.0",
     "npm-run-all2": "^6.2.6",
-    "orval": "8.40.0",
     "oxc-transform-react": "0.145.0",
-    "oxfmt": "^0.68.0",
-    "oxlint": "^1.83.0",
-    "postcss": "^8.5.28",
+    "oxfmt": "^0.74.0",
+    "oxlint": "^1.88.0",
+    "postcss": "^8.5.29",
     "postcss-prefix-selector": "^2.2.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "storybook": "^10.6.0",
+    "storybook": "^10.6.2",
     "stylelint": "^16.26.1",
     "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^4.3.3",
     "vega-typings": "^2.3.0",
-    "vite": "^8.3.0",
-    "vite-plugin-wasm": "^3.6.0",
+    "vite": "^8.3.4",
     "vitest": "^4.1.11",
     "yaml": "^2.9.1"
   }

package/src/__mocks__/document.tsx

@@ -0,0 +1,63 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, type createStore, type PrimitiveAtom, Provider } from "jotai";
+import type { ReactNode } from "react";
+import {
+  createDocumentModel,
+  type DocumentModel,
+  DocumentProvider,
+} from "@/core/notebook/document";
+import { document as documentFixture } from "@/core/notebook/document/__tests__/fixtures";
+import type { Document } from "@/core/notebook/replica";
+import { fakeBackend } from "@/core/notebook/replica/__tests__/fixtures";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
+
+/**
+ * A started document model over `document`, for components that edit cells.
+ * Setting `documentAtom` delivers a document as the host would.
+ */
+export function mockDocumentModel(
+  store: ReturnType<typeof createStore>,
+  document: Document | null = documentFixture(),
+): {
+  model: DocumentModel;
+  documentAtom: PrimitiveAtom<Document | null>;
+  stop: () => void;
+} {
+  const controller = new AbortController();
+  const documentAtom = atom(document);
+  const model = createDocumentModel({
+    store,
+    documentAtom,
+    backendAtom: atom(fakeBackend()),
+  });
+  model.start({ signal: controller.signal });
+  store.set(activeDocumentModelAtom, model);
+  return {
+    model,
+    documentAtom,
+    stop: () => {
+      controller.abort();
+      if (store.get(activeDocumentModelAtom) === model) {
+        store.set(activeDocumentModelAtom, null);
+      }
+    },
+  };
+}
+
+/** Provide `store` and `model` to a rendered hook or component. */
+export function DocumentWrapper({
+  store,
+  model,
+  children,
+}: {
+  store: ReturnType<typeof createStore>;
+  model: DocumentModel;
+  children?: ReactNode;
+}) {
+  return (
+    <Provider store={store}>
+      <DocumentProvider model={model}>{children}</DocumentProvider>
+    </Provider>
+  );
+}

package/src/__mocks__/notebook.ts

@@ -2,7 +2,8 @@
 
 import { createRef } from "react";
 import { vi } from "vitest";
-import type { CellActions, NotebookState } from "@/core/cells/cells";
+import type { CellActions } from "@/core/cells/actions";
+import type { NotebookState } from "@/core/cells/cells";
 import { CellId } from "@/core/cells/ids";
 import {
   type CellData,
@@ -10,7 +11,6 @@ import {
   createCellRuntimeState,
 } from "@/core/cells/types";
 import type { MarimoError } from "@/core/kernel/messages";
-import { MultiColumn } from "@/utils/id-tree";
 import { Objects } from "@/utils/objects";
 
 export const MockNotebook = {
@@ -45,7 +45,7 @@ export const MockNotebook = {
         serializedEditorState: null,
         ...data,
       })),
-      cellIds: MultiColumn.from([Object.keys(cellData) as CellId[]]),
+      cellIds: Object.keys(cellData) as CellId[],
       cellRuntime: Objects.mapValues(cellData, (_data, cid) =>
         createCellRuntimeState({ ...cellRuntime[cid] }),
       ),
@@ -53,7 +53,6 @@ export const MockNotebook = {
       cellLogs: [],
       history: [],
       scrollKey: null,
-      untouchedNewCells: new Set(),
     };
   },
 

package/src/__mocks__/partial.ts

@@ -0,0 +1,26 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * A partial mock of `T` that throws when a member the test did not provide
+ * is read, so a test cannot silently depend on an undefined field.
+ */
+export function partial<T extends object>(
+  members: Partial<T>,
+  name = "mock",
+): T {
+  return new Proxy(members as T, {
+    get(target, key, receiver) {
+      // Only the members the test gave count as provided, not those every
+      // object inherits. Promise detection and well-known symbols may probe
+      // any object.
+      if (
+        Object.hasOwn(target, key) ||
+        typeof key === "symbol" ||
+        key === "then"
+      ) {
+        return Reflect.get(target, key, receiver);
+      }
+      throw new Error(`${name}.${String(key)} is not implemented in this test`);
+    },
+  });
+}

package/src/__mocks__/requests.ts

@@ -17,8 +17,7 @@ export const MockRequestClient = {
       sendModelValue: vi.fn().mockResolvedValue({}),
       sendRename: vi.fn().mockResolvedValue({}),
       sendRestart: vi.fn().mockResolvedValue({}),
-      sendDocumentTransaction: vi.fn().mockResolvedValue({}),
-      sendSave: vi.fn().mockResolvedValue({}),
+      saveLayout: vi.fn().mockResolvedValue({}),
       sendCopy: vi.fn().mockResolvedValue({}),
       sendStdin: vi.fn().mockResolvedValue({}),
       sendFormat: vi.fn().mockResolvedValue({ codes: {} }),
@@ -27,11 +26,9 @@ export const MockRequestClient = {
       sendRun: vi.fn().mockResolvedValue({}),
       sendRunScratchpad: vi.fn().mockResolvedValue({}),
       sendInstantiate: vi.fn().mockResolvedValue({}),
-      sendDeleteCell: vi.fn().mockResolvedValue({}),
       sendCodeCompletionRequest: vi.fn().mockResolvedValue({ items: [] }),
       saveUserConfig: vi.fn().mockResolvedValue({}),
       saveAppConfig: vi.fn().mockResolvedValue({}),
-      saveCellConfig: vi.fn().mockResolvedValue({}),
       sendFunctionRequest: vi.fn().mockResolvedValue({}),
       sendInstallMissingPackages: vi.fn().mockResolvedValue({}),
       readCode: vi.fn().mockResolvedValue({ contents: "" }),

package/src/__tests__/fixtures/pair-config.ts

@@ -6,7 +6,7 @@ import { pairConfigSchema } from "@/core/config/pair";
 
 // Read the Python-owned resource only in tests to check the shared contract.
 export const PAIR_CONFIG = pairConfigSchema.parse({
-  command: "uvx marimo@latest",
+  command: "marimo",
   hostEnabled: true,
   templates: JSON.parse(
     readFileSync(

package/src/__tests__/main.test.tsx

@@ -10,8 +10,11 @@ import {
 import {
   appConfigAtom,
   configOverridesAtom,
+  pageAppConfigAtom,
   userConfigAtom,
 } from "../core/config/config";
+import { exportedForTesting, notebookAtom } from "../core/cells/cells";
+import { SCRATCH_CELL_ID } from "../core/cells/ids";
 import { marimoVersionAtom, showCodeInRunModeAtom } from "../core/meta/state";
 import { type AppMode, viewStateAtom } from "../core/mode";
 import { codeAtom, filenameAtom } from "../core/saving/file-state";
@@ -40,7 +43,8 @@ describe("main", () => {
     store.set(filenameAtom, null);
     store.set(showCodeInRunModeAtom, false);
     store.set(marimoVersionAtom, "unknown");
-    store.set(appConfigAtom, parseAppConfig({}));
+    store.set(notebookAtom, exportedForTesting.initialNotebookState());
+    store.set(pageAppConfigAtom, {});
     store.set(userConfigAtom, defaultUserConfig());
     store.set(configOverridesAtom, {});
   });
@@ -99,6 +103,25 @@ describe("main", () => {
     expect(store.get(viewStateAtom).mode).toBe("edit");
   });
 
+  it("seeds runtime from a session snapshot without dropping the scratch cell", () => {
+    const el = document.createElement("div");
+    const error = mount(
+      {
+        mode: "edit",
+        session: {
+          version: "1",
+          metadata: { marimo_version: "1", script_metadata_hash: null },
+          cells: [{ id: "cell-1", code_hash: null, console: [], outputs: [] }],
+        },
+      },
+      el,
+    );
+    expect(error).toBeUndefined();
+    const { cellRuntime } = store.get(notebookAtom);
+    expect(cellRuntime["cell-1" as never]).toBeDefined();
+    expect(cellRuntime[SCRATCH_CELL_ID]).toBeDefined();
+  });
+
   it("should mount with empty config", () => {
     const el = document.createElement("div");
     const error = mount(

package/src/__tests__/module-entry.test.ts

@@ -0,0 +1,44 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { expect, it } from "vitest";
+import { moduleEntry } from "../../lint/module-entry.js";
+
+/** Whether the rule reports importing `source` from `file`. */
+function reports(file: string, source: string): boolean {
+  let reported = false;
+  const visitors = moduleEntry.createOnce({
+    filename: `/repo/frontend/src/${file}`,
+    report: () => {
+      reported = true;
+    },
+  });
+  visitors.ImportDeclaration({ source: { value: source } });
+  return reported;
+}
+
+it.each([
+  ["components/editor.tsx", "@/core/notebook", false],
+  ["components/editor.tsx", "@/core/notebook/attachments", true],
+  ["core/notebook/index.ts", "./attachments", false],
+  ["core/notebook/index.ts", "./document/hooks", true],
+  ["core/session/active-notebook.ts", "@/core/notebook/replica", false],
+  ["core/session/active-notebook.ts", "../notebook/replica", false],
+  ["core/session/active-notebook.ts", "@/core/notebook/document", false],
+  ["core/notebook/replica/replica.ts", "./resources/document", false],
+  [
+    "core/notebook/replica/replica.ts",
+    "@/core/notebook/replica/backend",
+    false,
+  ],
+  ["core/session/__tests__/a.test.ts", "../../notebook/replica/replica", false],
+  ["core/session/fixtures.ts", "../notebook/replica/__tests__/fixtures", false],
+  ["core/session/active-notebook.ts", "@/core/notebook/replica/replica", true],
+  [
+    "core/session/active-notebook.ts",
+    "../notebook/replica/resources/document",
+    true,
+  ],
+  ["core/session/active-notebook.ts", "../notebook/document/hooks", true],
+])("from %s, importing %s reports %s", (file, source, expected) => {
+  expect(reports(file, source)).toBe(expected);
+});

package/src/__tests__/mount.test.ts

@@ -6,9 +6,8 @@ import { initialLayoutState, layoutStateAtom } from "@/core/layout/state";
 import { kioskModeAtom } from "@/core/mode";
 import { connectionAtom } from "@/core/network/connection";
 import { store } from "@/core/state/jotai";
-import { runtimeConfigAtom } from "@/core/runtime/config";
 import { isStaticNotebook } from "@/core/static/static-state";
-import { ConnectionState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/session/types";
 import { pairConfigAtom } from "@/core/config/pair";
 import { PAIR_CONFIG } from "./fixtures/pair-config";
 import { mount, visibleForTesting } from "../mount";
@@ -102,25 +101,6 @@ describe("mount", () => {
   });
 
   describe("connection state initialization", () => {
-    it("passes the host notebook identity to the local runtime", () => {
-      mount({ ...baseOptions, notebookId: "nb_local" }, mockElement);
-      expect(store.get(runtimeConfigAtom).notebookId).toBe("nb_local");
-    });
-
-    it("uses a remote runtime's own notebook identity", () => {
-      mount(
-        {
-          ...baseOptions,
-          notebookId: "nb_local",
-          runtimeConfig: [
-            { url: "https://remote.example", notebookId: "nb_remote" },
-          ],
-        },
-        mockElement,
-      );
-      expect(store.get(runtimeConfigAtom).notebookId).toBe("nb_remote");
-    });
-
     it("should set connection to CONNECTING when runtimeConfig has lazy=false", () => {
       mount(
         {

package/src/__tests__/{host-imports.test.ts → replica-imports.test.ts}

@@ -8,30 +8,31 @@ import NodeUrl from "node:url";
 import { expect, it } from "vitest";
 import { z } from "zod";
 
-it("enforces host dependencies for runtime and type imports", () => {
+it("enforces replica dependencies for runtime and type imports", () => {
   const frontend = NodeUrl.fileURLToPath(
-    new NodeUrl.URL("../../", import.meta.url),
+    new NodeUrl.URL("../..", import.meta.url),
   );
   const directory = NodeFs.mkdtempSync(
-    NodePath.join(NodeOs.tmpdir(), "host-imports-"),
+    NodePath.join(NodeOs.tmpdir(), "replica-imports-"),
   );
   const files = {
-    "src/core/host/allowed.ts": `
+    "src/core/notebook/replica/allowed.ts": `
       import { atom } from "jotai/vanilla";
       import { z } from "zod";
+      import * as Protocol from "@marimo-team/client/protocol";
       import { Logger } from "@/utils/Logger";
       import type { Document } from "./document";
-      export * from "@/core/host/events";
+      export * from "@/core/notebook/replica/events";
       type Event = import("./events").NotebookEvent;
       void import("./protocol");
     `,
-    "src/core/host/protocol.ts": `
+    "src/core/notebook/replica/protocol.ts": `
       import type { NotificationMessage as A } from "../kernel/messages";
       import { type NotificationMessage as B } from "@/core/kernel/messages";
       import { NotificationMessage as C } from "../kernel/messages";
       import type { NotificationPayload } from "../kernel/messages";
     `,
-    "src/core/host/forbidden.ts": `
+    "src/core/notebook/replica/forbidden.ts": `
       import { useEffect } from "react";
       import type { NotificationMessage } from "../kernel/messages";
       export * from "../kernel/messages";
@@ -43,10 +44,10 @@ it("enforces host dependencies for runtime and type imports", () => {
       import "./__tests__/allowed";
       import "./allowed.test";
     `,
-    "src/core/host/__tests__/allowed.ts": `import { useEffect } from "react";`,
-    "src/core/host/allowed.test.ts": `import { useEffect } from "react";`,
-    "src/core/host/allowed.spec.ts": `import { useEffect } from "react";`,
-    "src/core/websocket/allowed.ts": `import { useEffect } from "react";`,
+    "src/core/notebook/replica/__tests__/allowed.ts": `import { useEffect } from "react";`,
+    "src/core/notebook/replica/allowed.test.ts": `import { useEffect } from "react";`,
+    "src/core/notebook/replica/allowed.spec.ts": `import { useEffect } from "react";`,
+    "src/core/session/allowed.ts": `import { useEffect } from "react";`,
   };
   try {
     for (const [path, source] of Object.entries(files)) {

package/src/components/ai/__tests__/ai-model-dropdown.test.tsx

@@ -0,0 +1,63 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { getKnownModelMaps } from "@/core/ai/model-registry";
+import { AIModelDropdown } from "../ai-model-dropdown";
+import * as aiUtils from "../ai-utils";
+
+vi.mock("@/core/ai/config", () => ({
+  useAIConfigActions: () => ({ saveModelChange: vi.fn() }),
+}));
+vi.mock("@/components/app-config/state", () => ({
+  useOpenSettingsToTab: () => ({ handleClick: vi.fn() }),
+}));
+
+it.each(["Enter", " "])(
+  "selects a model with %j while ArrowRight retains information access",
+  async (key) => {
+    const knownModel = [...getKnownModelMaps().modelMap.values()].find(
+      (model) => model.provider === "openai",
+    );
+    if (!knownModel) {
+      throw new Error("Expected a known OpenAI model");
+    }
+    const model = { ...knownModel, capabilities: [] };
+    vi.spyOn(aiUtils, "listModelsForAiSettings").mockReturnValue([
+      [model.provider, [model]],
+    ]);
+    const onSelect = vi.fn();
+    render(
+      <Provider store={createStore()}>
+        <TooltipProvider>
+          <AIModelDropdown
+            forRole="chat"
+            placeholder="Choose model"
+            onSelect={onSelect}
+          />
+        </TooltipProvider>
+      </Provider>,
+    );
+    fireEvent.keyDown(screen.getByRole("button", { name: "Choose model" }), {
+      key: "ArrowDown",
+    });
+    fireEvent.keyDown(
+      await screen.findByRole("menuitem", { name: /OpenAI$/ }),
+      { key: "ArrowRight" },
+    );
+    const option = await screen.findByRole("menuitem", {
+      name: (name) => name.endsWith(model.name),
+    });
+    fireEvent.keyDown(option, { key: "ArrowRight" });
+    expect(
+      await screen.findByRole("heading", { name: model.name }),
+    ).toBeInTheDocument();
+    expect(onSelect).not.toHaveBeenCalled();
+    fireEvent.keyDown(option, { key });
+    expect(onSelect).toHaveBeenCalledExactlyOnceWith(
+      `${model.provider}/${model.model}`,
+    );
+  },
+);

package/src/components/ai/ai-model-dropdown.tsx

@@ -276,13 +276,18 @@ const ProviderDropdownContent = ({
             const qualifiedModelId: QualifiedModelId = `${provider}/${model.model}`;
             return (
               <DropdownMenuSub key={qualifiedModelId}>
-                <DropdownMenuSubTrigger showChevron={false} className="py-2">
-                  <div
-                    className="flex items-center gap-2 w-full cursor-pointer"
-                    onClick={() => {
+                <DropdownMenuSubTrigger
+                  showChevron={false}
+                  className="py-2"
+                  onClick={() => onSelect(qualifiedModelId)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
                       onSelect(qualifiedModelId);
-                    }}
-                  >
+                    }
+                  }}
+                >
+                  <div className="flex items-center gap-2 w-full cursor-pointer">
                     <AiModelDropdownItem model={model} provider={provider} />
                   </div>
                 </DropdownMenuSubTrigger>

package/src/components/app-config/__tests__/state.test.tsx

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ConfigButton } from "../app-config-button";
+import { aiSettingsSubTabAtom, useOpenSettingsToTab } from "../state";
+import { activeUserConfigCategoryAtom } from "../user-config-form";
+
+vi.mock("../user-config-form", async () => {
+  const { atom } = await import("jotai");
+  return {
+    activeUserConfigCategoryAtom: atom("editor"),
+    UserConfigForm: () => <div>Settings form</div>,
+  };
+});
+vi.mock("../app-config-form", () => ({
+  AppConfigForm: () => null,
+}));
+
+function OpenAiSettings() {
+  const { handleClick } = useOpenSettingsToTab();
+  return (
+    <button type="button" onClick={() => handleClick("ai")}>
+      AI Settings
+    </button>
+  );
+}
+
+describe("useOpenSettingsToTab", () => {
+  it("opens the settings dialog on the AI category from an external button", () => {
+    const store = createStore();
+    store.set(aiSettingsSubTabAtom, "ai-providers");
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <OpenAiSettings />
+          <ConfigButton />
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "AI Settings" }));
+
+    expect(screen.getByRole("dialog", { name: "User settings" })).toBeVisible();
+    expect(store.get(activeUserConfigCategoryAtom)).toBe("ai");
+    expect(store.get(aiSettingsSubTabAtom)).toBe("ai-features");
+  });
+});