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

package/src/components/editor/SortableCell.tsx

@@ -71,7 +71,6 @@ export const SortableCell = React.forwardRef(
     return (
       <SortableCellInternal
         ref={ref}
-        cellId={cellId}
         canMoveX={canMoveX}
         {...props}
         attributes={attributes}
@@ -86,7 +85,7 @@ export const SortableCell = React.forwardRef(
 );
 SortableCell.displayName = "SortableCell";
 
-interface SortableCellInternalProps extends Props {
+interface SortableCellInternalProps extends Omit<Props, "cellId"> {
   children: React.ReactNode;
   attributes: DraggableAttributes;
   listeners: SyntheticListenerMap | undefined;
@@ -99,7 +98,6 @@ interface SortableCellInternalProps extends Props {
 const SortableCellInternal = React.forwardRef(
   (
     {
-      cellId,
       canMoveX,
       children,
       attributes,

package/src/components/editor/__tests__/Output.test.tsx

@@ -1,10 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createStore, Provider } from "jotai";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { cellId } from "@/__tests__/branded";
+import { DocumentProvider } from "@/core/notebook/document";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { OutputArea, OutputRenderer } from "../Output";
 
+const store = createStore();
+const { model } = mockDocumentModel(store, null);
+
 describe("OutputRenderer renderFallback prop", () => {
   it("should use renderFallback for unsupported mimetypes", () => {
     const renderFallback = (mimetype: string) => (
@@ -70,31 +76,39 @@ describe("OutputRenderer renderFallback prop", () => {
 describe("OutputArea null/undefined handling", () => {
   it("should render null when output is null", () => {
     const { container } = render(
-      <TooltipProvider>
-        <OutputArea
-          output={null}
-          cellId={cellId("test")}
-          stale={false}
-          loading={false}
-          allowExpand={true}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <OutputArea
+              output={null}
+              cellId={cellId("test")}
+              stale={false}
+              loading={false}
+              allowExpand={true}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
     expect(container.innerHTML).toBe("");
   });
 
   it("should render null when output is undefined", () => {
     const { container } = render(
-      <TooltipProvider>
-        <OutputArea
-          // @ts-expect-error -- testing runtime safety for undefined output
-          output={undefined}
-          cellId={cellId("test")}
-          stale={false}
-          loading={false}
-          allowExpand={true}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <OutputArea
+              // @ts-expect-error -- testing runtime safety for undefined output
+              output={undefined}
+              cellId={cellId("test")}
+              stale={false}
+              loading={false}
+              allowExpand={true}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
     expect(container.innerHTML).toBe("");
   });
@@ -184,19 +198,23 @@ describe("OutputArea fullscreen exit control", () => {
 
   const renderOutput = () =>
     render(
-      <TooltipProvider>
-        <OutputArea
-          output={{
-            channel: "output",
-            data: "Hello World",
-            mimetype: "text/plain",
-          }}
-          cellId={cellId("test")}
-          stale={false}
-          loading={false}
-          allowExpand={true}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <OutputArea
+              output={{
+                channel: "output",
+                data: "Hello World",
+                mimetype: "text/plain",
+              }}
+              cellId={cellId("test")}
+              stale={false}
+              loading={false}
+              allowExpand={true}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
   const enterFullscreen = (container: HTMLElement) => {

package/src/{core/attachments/__tests__/toast.test.tsx → components/editor/__tests__/agent-toast.test.tsx}

@@ -5,7 +5,7 @@ import { act, render, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Toaster } from "@/components/ui/toaster";
 import { clearToasts, toast, useToast } from "@/components/ui/use-toast";
-import { agentToast } from "../toast";
+import { agentToast } from "../agent-toast";
 
 describe("agent notifications", () => {
   beforeEach(() => {

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -3,11 +3,13 @@ import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeAll, describe, expect, it } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
+import { DocumentProvider } from "@/core/notebook/document";
 import { createCellRuntimeState } from "@/core/cells/types";
 import type { UserConfig } from "@/core/config/config-schema";
 import type { OutputMessage } from "@/core/kernel/messages";
@@ -18,9 +20,12 @@ import { OutputArea } from "../Output";
 
 function createTestWrapper() {
   const store = createStore();
+  const { model } = mockDocumentModel(store, null);
   store.set(requestClientAtom, MockRequestClient.create());
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <Provider store={store}>{children}</Provider>
+    <Provider store={store}>
+      <DocumentProvider model={model}>{children}</DocumentProvider>
+    </Provider>
   );
   return { wrapper, store };
 }
@@ -57,7 +62,7 @@ describe("Cell data attributes", () => {
           signature_hint_on_typing: false,
           copilot: false,
         },
-        formatting: { line_length: 88 },
+        formatting: { line_length: 88, infer_types: "off" },
         package_management: { manager: "pip" },
         runtime: {
           auto_instantiate: false,
@@ -75,7 +80,11 @@ describe("Cell data attributes", () => {
           browser: "default",
           follow_symlink: false,
         },
-        save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
+        save: {
+          autosave: "off",
+          autosave_delay: 1000,
+          format_on_save: false,
+        },
         ai: {},
       } as UserConfig;
 
@@ -85,7 +94,6 @@ describe("Cell data attributes", () => {
             code: "",
             name: cellName,
             edited: false,
-            serializedEditorState: null,
             config: {
               disabled: false,
               hide_code: false,
@@ -146,17 +154,23 @@ describe("Output data attributes", () => {
       timestamp: 0,
     };
 
+    const store = createStore();
+    const { model } = mockDocumentModel(store, null);
     const { container } = render(
-      <TooltipProvider>
-        <OutputArea
-          output={output}
-          cellId={cid}
-          stale={false}
-          loading={false}
-          allowExpand={true}
-          className="test-output"
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <OutputArea
+              output={output}
+              cellId={cid}
+              stale={false}
+              loading={false}
+              allowExpand={true}
+              className="test-output"
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     const outputElement = container.querySelector('[data-cell-role="output"]');

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

@@ -1,17 +1,41 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { render, waitFor } from "@testing-library/react";
+import {
+  act,
+  render as renderComponent,
+  waitFor,
+} from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { useCellErrors } from "@/core/cells/cells";
+import { Provider, createStore } from "jotai";
+import type { ReactNode } from "react";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import { notebookAtom } from "@/core/cells/cells";
 import { DynamicFavicon } from "../dynamic-favicon";
 
-// Mock useCellErrors hook
-vi.mock("@/core/cells/cells", () => ({
-  useCellErrors: vi.fn(),
-}));
-
 describe("DynamicFavicon", () => {
   let favicon: HTMLLinkElement;
+  let store: ReturnType<typeof createStore>;
+  const id = cellId("cell");
+
+  function render(ui: ReactNode) {
+    return renderComponent(ui, {
+      wrapper: ({ children }) => <Provider store={store}>{children}</Provider>,
+    });
+  }
+
+  function setErrors() {
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookStateWithErrors([
+        {
+          cellId: id,
+          cellName: "cell",
+          errorData: [MockNotebook.errors.syntax("Invalid syntax")],
+        },
+      ]),
+    );
+  }
 
   beforeEach(() => {
     document
@@ -27,15 +51,20 @@ describe("DynamicFavicon", () => {
     // Mock document.hasFocus
     vi.spyOn(document, "hasFocus").mockReturnValue(true);
 
-    // Mock useCellErrors to return no errors by default
-    (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([]);
+    store = createStore();
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookState({
+        cellData: { [id]: { code: "x = 1" } },
+      }),
+    );
   });
 
   afterEach(() => {
     document
       .querySelectorAll("link[rel~='icon']")
       .forEach((element) => element.remove());
-    vi.clearAllMocks();
+    vi.restoreAllMocks();
     vi.useRealTimers();
   });
 
@@ -67,9 +96,7 @@ describe("DynamicFavicon", () => {
   });
 
   it("should show error favicon when run completes with errors", async () => {
-    (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([
-      { error: "mock error" },
-    ]);
+    setErrors();
 
     const { rerender } = render(<DynamicFavicon isRunning={true} />);
 
@@ -147,6 +174,72 @@ describe("DynamicFavicon", () => {
     });
   });
 
+  it("does not look up or rewrite the favicon when code changes", async () => {
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-play.ico"));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+    const lookup = vi.spyOn(document, "querySelector");
+    const write = vi.spyOn(favicon, "href", "set");
+
+    await act(async () => {
+      store.set(notebookAtom, (state) => ({
+        ...state,
+        cellData: {
+          ...state.cellData,
+          [id]: { ...state.cellData[id], code: "x = 2" },
+        },
+      }));
+    });
+
+    expect(
+      lookup.mock.calls.filter(
+        ([selector]) => selector === "link[rel~='icon']",
+      ),
+    ).toEqual([]);
+    expect(write).not.toHaveBeenCalled();
+    lookup.mockRestore();
+    write.mockRestore();
+  });
+
+  it("updates the favicon when the error count changes", async () => {
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-play.ico"));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+
+    act(() => setErrors());
+    await waitFor(() => expect(favicon.href).toContain("circle-x.ico"));
+
+    act(() =>
+      store.set(
+        notebookAtom,
+        MockNotebook.notebookState({ cellData: { [id]: {} } }),
+      ),
+    );
+    await waitFor(() => expect(favicon.href).toContain("circle-check.ico"));
+  });
+
+  it("keeps the completion icon until its own reset timer expires", async () => {
+    vi.useFakeTimers();
+    const { rerender } = render(<DynamicFavicon isRunning={true} />);
+    await act(() => vi.advanceTimersByTimeAsync(1000));
+    rerender(<DynamicFavicon isRunning={false} />);
+    await act(() => vi.advanceTimersByTimeAsync(2000));
+    expect(favicon.href).toContain("circle-check.ico");
+    await act(() => vi.advanceTimersByTimeAsync(1000));
+    expect(favicon.href).toContain("favicon.ico");
+  });
+
+  it("cancels the reset timer when unmounted", async () => {
+    vi.useFakeTimers();
+    const { unmount } = render(<DynamicFavicon isRunning={true} />);
+    await act(() => vi.advanceTimersByTimeAsync(0));
+    expect(vi.getTimerCount()).toBe(1);
+    unmount();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
   describe("notifications", () => {
     beforeEach(() => {
       vi.spyOn(document, "visibilityState", "get").mockReturnValue("hidden");
@@ -156,7 +249,7 @@ describe("DynamicFavicon", () => {
       global.Notification.permission = "granted";
     });
 
-    it("should send success notification when run completes without errors", () => {
+    it("should send success notification when run completes without errors", async () => {
       // @ts-expect-error ok in tests
       global.Notification = vi
         .fn()
@@ -172,12 +265,11 @@ describe("DynamicFavicon", () => {
 
       const { rerender } = render(<DynamicFavicon isRunning={true} />);
       rerender(<DynamicFavicon isRunning={false} />);
+      await waitFor(() => expect(Notification).toHaveBeenCalledOnce());
     });
 
-    it("should send error notification when run completes with errors", () => {
-      (useCellErrors as ReturnType<typeof vi.fn>).mockReturnValue([
-        { error: "mock error" },
-      ]);
+    it("should send error notification when run completes with errors", async () => {
+      setErrors();
 
       // @ts-expect-error ok in tests
       global.Notification = vi
@@ -194,6 +286,7 @@ describe("DynamicFavicon", () => {
 
       const { rerender } = render(<DynamicFavicon isRunning={true} />);
       rerender(<DynamicFavicon isRunning={false} />);
+      await waitFor(() => expect(Notification).toHaveBeenCalledOnce());
     });
 
     it("should not send notification when document is visible", () => {

package/src/components/editor/__tests__/output-persistence.test.tsx

@@ -3,11 +3,13 @@ import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeAll, describe, expect, it } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
+import { DocumentProvider } from "@/core/notebook/document";
 import type { CellRuntimeState } from "@/core/cells/types";
 import { createCellRuntimeState } from "@/core/cells/types";
 import { defaultUserConfig } from "@/core/config/config-schema";
@@ -19,9 +21,12 @@ const cid = cellId("test");
 
 function createTestWrapper() {
   const store = createStore();
+  const { model } = mockDocumentModel(store, null);
   store.set(requestClientAtom, MockRequestClient.create());
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <Provider store={store}>{children}</Provider>
+    <Provider store={store}>
+      <DocumentProvider model={model}>{children}</DocumentProvider>
+    </Provider>
   );
   return { wrapper, store };
 }
@@ -36,7 +41,6 @@ function seedNotebook(
         code: "1 + 1",
         name: "test_cell",
         edited: false,
-        serializedEditorState: null,
         config: {
           disabled: false,
           hide_code: false,

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/actions/__tests__/name-cell-input.test.tsx

@@ -0,0 +1,69 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import { afterEach, describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import {
+  createDocumentModel,
+  DocumentProvider,
+} from "@/core/notebook/document";
+import {
+  cell,
+  document as documentOf,
+  withCells,
+} from "@/core/notebook/document/__tests__/fixtures";
+import { fakeBackend } from "@/core/notebook/replica/__tests__/fixtures";
+import { NameCellContentEditable } from "../name-cell-input";
+
+const controllers: AbortController[] = [];
+
+afterEach(() => {
+  for (const controller of controllers.splice(0)) {
+    controller.abort();
+  }
+});
+
+describe("NameCellContentEditable", () => {
+  it("renames the cell in the document when the name is committed", () => {
+    const store = createStore();
+    const source = atom(
+      withCells(documentOf(), {
+        c1: cell("c1", "x = 1", { name: "first" }),
+      }),
+    );
+    const model = createDocumentModel({
+      store,
+      documentAtom: source,
+      backendAtom: atom(fakeBackend()),
+    });
+    const controller = new AbortController();
+    controllers.push(controller);
+    model.start({ signal: controller.signal });
+
+    render(
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <NameCellContentEditable
+              cellId={cellId("c1")}
+              value="first"
+              className=""
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
+    );
+
+    const field = screen.getByText("first");
+    // jsdom does not lay text out, so it has no innerText of its own.
+    Object.defineProperty(field, "innerText", { value: " renamed " });
+    fireEvent.blur(field);
+
+    expect(store.get(model.documentAtom)?.cells.get("c1")?.name).toBe(
+      "renamed",
+    );
+  });
+});