@marimo-team/islands 0.25.3-dev30 → 0.25.3-dev302

package/src/__tests__/CellStatus.test.tsx

@@ -3,7 +3,8 @@
 import { render } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { formatElapsedTime, type Seconds } from "@/utils/time";
+import type { CellFreshness } from "@/core/executions";
+import { formatElapsedTime, type Milliseconds } from "@/utils/time";
 import {
   CellStatusComponent,
   ElapsedTime,
@@ -70,14 +71,13 @@ describe("CellStatusComponent", () => {
   // Base props that will be modified for different test cases
   const baseProps = {
     editing: true,
-    edited: false,
     disabled: false,
-    staleInputs: false,
+    freshness: { sourceChanged: false, inputsChanged: false } as CellFreshness,
     status: "idle" as const,
     interrupted: false,
     elapsedTime: null,
-    runStartTimestamp: null,
-    lastRunStartTimestamp: null,
+    startedAt: null,
+    blocked: false,
     uninstantiated: false,
   };
 
@@ -94,8 +94,8 @@ describe("CellStatusComponent", () => {
     const props = {
       ...baseProps,
       disabled: true,
-      staleInputs: true,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds, // Jan 1, 2024 12:00:00
+      freshness: { sourceChanged: false, inputsChanged: true } as CellFreshness,
+      startedAt: 1_704_096_000_000 as Milliseconds, // Jan 1, 2024 12:00:00
     };
 
     const { container } = render(
@@ -110,7 +110,7 @@ describe("CellStatusComponent", () => {
     const props = {
       ...baseProps,
       disabled: true,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(
@@ -124,8 +124,8 @@ describe("CellStatusComponent", () => {
   test("renders disabled transitively state", () => {
     const props = {
       ...baseProps,
-      status: "disabled-transitively" as const,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      blocked: true,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(
@@ -139,9 +139,9 @@ describe("CellStatusComponent", () => {
   test("renders stale and disabled transitively state", () => {
     const props = {
       ...baseProps,
-      status: "disabled-transitively" as const,
-      staleInputs: true,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      blocked: true,
+      freshness: { sourceChanged: false, inputsChanged: true } as CellFreshness,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(
@@ -156,8 +156,7 @@ describe("CellStatusComponent", () => {
     const props = {
       ...baseProps,
       status: "running" as const,
-      runStartTimestamp: 1_704_096_000 as Seconds,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(
@@ -172,7 +171,7 @@ describe("CellStatusComponent", () => {
     const props = {
       ...baseProps,
       status: "queued" as const,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(
@@ -201,8 +200,8 @@ describe("CellStatusComponent", () => {
     const props = {
       ...baseProps,
       interrupted: true,
-      elapsedTime: 1500,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      elapsedTime: 1500 as Milliseconds,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(
@@ -216,9 +215,9 @@ describe("CellStatusComponent", () => {
   test("renders edited state", () => {
     const props = {
       ...baseProps,
-      edited: true,
-      elapsedTime: 1500,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      freshness: { sourceChanged: true, inputsChanged: false } as CellFreshness,
+      elapsedTime: 1500 as Milliseconds,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(
@@ -232,9 +231,9 @@ describe("CellStatusComponent", () => {
   test("renders stale inputs state", () => {
     const props = {
       ...baseProps,
-      staleInputs: true,
-      elapsedTime: 1500,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      freshness: { sourceChanged: false, inputsChanged: true } as CellFreshness,
+      elapsedTime: 1500 as Milliseconds,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(
@@ -248,8 +247,8 @@ describe("CellStatusComponent", () => {
   test("renders completed run with elapsed time", () => {
     const props = {
       ...baseProps,
-      elapsedTime: 1500,
-      lastRunStartTimestamp: 1_704_096_000 as Seconds,
+      elapsedTime: 1500 as Milliseconds,
+      startedAt: 1_704_096_000_000 as Milliseconds,
     };
 
     const { container } = render(

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/__tests__/ai-utils.test.ts

@@ -1,5 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { defaultUserConfig } from "@/core/config/config-schema";
+
 import type { AiModel } from "@marimo-team/llm-info";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { UserConfig } from "@/core/config/config-schema";
@@ -75,6 +77,7 @@ describe("ai-utils", () => {
     it("returns known providers with credentials, then custom providers with a base URL", () => {
       expect(
         listConfiguredProviders({
+          ...defaultUserConfig().ai,
           wandb: { api_key: "unused" },
           open_ai: { api_key: "sk-test" },
           open_ai_compatible: { api_key: "unused", base_url: "https://x" },
@@ -89,6 +92,7 @@ describe("ai-utils", () => {
     it("treats marimo as configured when open_ai_compatible has a base URL", () => {
       expect(
         listConfiguredProviders({
+          ...defaultUserConfig().ai,
           open_ai_compatible: { api_key: "unused", base_url: "https://x" },
         }),
       ).toEqual(["marimo"]);
@@ -97,6 +101,7 @@ describe("ai-utils", () => {
     it("omits openai-compatible as its own provider id", () => {
       expect(
         listConfiguredProviders({
+          ...defaultUserConfig().ai,
           open_ai: {},
           open_ai_compatible: { api_key: "unused" },
         }),
@@ -115,6 +120,7 @@ describe("ai-utils", () => {
     it("returns all groups when provider config is allowed", () => {
       expect(
         listModelsForAiSettings(entries, {
+          ...defaultUserConfig().ai,
           allow_provider_config: true,
           wandb: { api_key: "unused" },
         }),
@@ -124,6 +130,7 @@ describe("ai-utils", () => {
     it("filters to configured providers when provider config is locked", () => {
       expect(
         listModelsForAiSettings(entries, {
+          ...defaultUserConfig().ai,
           allow_provider_config: false,
           wandb: { api_key: "unused" },
         }),
@@ -133,6 +140,7 @@ describe("ai-utils", () => {
     it("keeps marimo models when locked with an openai-compatible gateway", () => {
       expect(
         listModelsForAiSettings(entries, {
+          ...defaultUserConfig().ai,
           allow_provider_config: false,
           open_ai_compatible: { base_url: "https://ai.marimo.app/molab/v1" },
         }),

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");
+  });
+});