@marimo-team/islands 0.24.3-dev9 → 0.25.1-dev1

package/src/components/editor/boundary/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,311 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { PropsWithChildren, ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { ModalProvider } from "@/components/modal/ImperativeModal";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { clearToasts } from "@/components/ui/use-toast";
+import { initialNotebookState, notebookAtom } from "@/core/cells/cells";
+import { viewStateAtom } from "@/core/mode";
+import { connectionAtom } from "@/core/network/connection";
+import { requestClientAtom } from "@/core/network/requests";
+import type { EnvironmentInfo } from "@/core/network/types";
+import { filenameAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
+import { WebSocketState } from "@/core/websocket/types";
+import { ErrorBoundary } from "../ErrorBoundary";
+
+vi.mock("@/utils/copy", () => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+const environment: EnvironmentInfo = {
+  marimo: "1.2.3",
+  editable: false,
+  location: "~/.venv/site-packages/marimo",
+  OS: "Darwin",
+  "OS Version": "25.0",
+  Processor: "arm",
+  "Python Version": "3.12.9",
+  Locale: "en_US",
+  Binaries: { Browser: "chrome 140", Node: "v22", uv: "0.11" },
+  Dependencies: { click: "8.4.2" },
+  "Optional Dependencies": { pandas: "3.0.0" },
+  "Experimental Flags": {},
+};
+
+const CRASH_MESSAGE = "cell output crashed";
+
+function CrashingChild(): never {
+  throw new Error(CRASH_MESSAGE);
+}
+
+function RecoverableChild({ crash }: { crash: boolean }) {
+  if (crash) {
+    throw new Error(CRASH_MESSAGE);
+  }
+  return <p>recovered child</p>;
+}
+
+function DescendantProviders({ children }: PropsWithChildren) {
+  return (
+    <TooltipProvider>
+      <ModalProvider>{children}</ModalProvider>
+    </TooltipProvider>
+  );
+}
+
+function isExpectedReactExceptionOutput(args: unknown[]): boolean {
+  return args.some((arg) => {
+    if (arg instanceof Error) {
+      return arg.message.includes(CRASH_MESSAGE);
+    }
+    return (
+      typeof arg === "string" &&
+      (arg.includes(CRASH_MESSAGE) ||
+        arg.includes("The above error occurred") ||
+        arg.includes("React will try to recreate this component tree"))
+    );
+  });
+}
+
+function suppressExpectedReactException() {
+  return vi.spyOn(console, "error").mockImplementation((...args) => {
+    if (isExpectedReactExceptionOutput(args)) {
+      return;
+    }
+    throw new Error(`Unexpected console.error: ${args.map(String).join(" ")}`);
+  });
+}
+
+let consoleError: ReturnType<typeof vi.spyOn> | undefined;
+
+function renderCrashedBoundary(child: ReactNode = <CrashingChild />) {
+  consoleError?.mockRestore();
+  consoleError = suppressExpectedReactException();
+  return render(<ErrorBoundary>{child}</ErrorBoundary>);
+}
+
+function setRequestClient(
+  overrides?: Parameters<typeof MockRequestClient.create>[0],
+) {
+  const client = MockRequestClient.create(overrides);
+  store.set(requestClientAtom, client);
+  return client;
+}
+
+async function openReportDialog() {
+  const trigger = screen.getByRole("button", { name: "Report an issue" });
+  trigger.focus();
+  fireEvent.click(trigger);
+  return screen.findByRole("dialog");
+}
+
+async function expectReportButtonFocused() {
+  await waitFor(() => {
+    expect(
+      screen.getByRole("button", { name: "Report an issue" }),
+    ).toHaveFocus();
+  });
+}
+
+async function closeReportDialog(method: "escape" | "close") {
+  const dialog = await screen.findByRole("dialog");
+  if (method === "escape") {
+    fireEvent.keyDown(dialog, { key: "Escape" });
+  } else {
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+  }
+  await waitFor(() => {
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+  await expectReportButtonFocused();
+}
+
+async function expectRealReportModal() {
+  const dialog = await openReportDialog();
+  expect(dialog).toHaveTextContent("Report an issue");
+  expect(screen.getByRole("link", { name: "Open GitHub issue" })).toBeVisible();
+  expect(
+    screen.getByRole("checkbox", { name: "Include errors" }),
+  ).toBeVisible();
+  expect(
+    screen.getByRole("checkbox", { name: "Include notebook code" }),
+  ).toBeVisible();
+  await screen.findByText("Environment details");
+  return dialog;
+}
+
+function resetSharedState() {
+  localStorage.clear();
+  clearToasts();
+  store.set(requestClientAtom, null);
+  store.set(notebookAtom, initialNotebookState());
+  store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(filenameAtom, "/project/example.py");
+}
+
+describe("ErrorBoundary report dialog", () => {
+  beforeEach(() => {
+    resetSharedState();
+  });
+
+  afterEach(() => {
+    consoleError?.mockRestore();
+    consoleError = undefined;
+    resetSharedState();
+  });
+
+  it("opens the report modal after a child render exception", async () => {
+    const { getEnvironmentInfo } = setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+    });
+
+    renderCrashedBoundary();
+
+    expect(screen.getByText("Something went wrong")).toBeVisible();
+    expect(screen.getByText("cell output crashed")).toBeVisible();
+    expect(screen.getByTestId("reset-error-boundary-button")).toBeVisible();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(getEnvironmentInfo).not.toHaveBeenCalled();
+
+    await expectRealReportModal();
+    await waitFor(() => expect(getEnvironmentInfo).toHaveBeenCalledOnce());
+  });
+
+  it("still opens one report dialog after descendant providers disappear", async () => {
+    const { getEnvironmentInfo } = setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+    });
+
+    renderCrashedBoundary(
+      <DescendantProviders>
+        <CrashingChild />
+      </DescendantProviders>,
+    );
+
+    await expectRealReportModal();
+    expect(screen.getAllByRole("dialog")).toHaveLength(1);
+    await waitFor(() => expect(getEnvironmentInfo).toHaveBeenCalledOnce());
+  });
+
+  it("shows partial diagnostics when the request client is missing", async () => {
+    renderCrashedBoundary();
+
+    await openReportDialog();
+    await screen.findByText("Environment details");
+
+    expect(
+      screen.getByText("Server environment information unavailable"),
+    ).toBeVisible();
+    expect(
+      screen.queryByText("Loading environment details…"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Retry" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("checkbox", { name: "Include notebook code" }),
+    ).toBeDisabled();
+    expect(screen.getByText("Notebook source is unavailable.")).toBeVisible();
+    const link = screen.getByRole("link", { name: "Open GitHub issue" });
+    expect(link.getAttribute("href") ?? "").toContain("&env=");
+  });
+
+  it("does not request environment or source while the report dialog is closed", async () => {
+    localStorage.setItem(
+      "marimo:issue-report:include-code",
+      JSON.stringify(true),
+    );
+    const { getEnvironmentInfo, readCode } = setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+      readCode: vi.fn().mockResolvedValue({ contents: "import marimo" }),
+    });
+
+    renderCrashedBoundary();
+
+    expect(screen.getByText("Something went wrong")).toBeVisible();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(getEnvironmentInfo).not.toHaveBeenCalled();
+    expect(readCode).not.toHaveBeenCalled();
+  });
+
+  it("restores focus to the report button after closing with Escape", async () => {
+    setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+    });
+    renderCrashedBoundary();
+    await openReportDialog();
+    await closeReportDialog("escape");
+    expect(screen.getByText(CRASH_MESSAGE)).toBeVisible();
+  });
+
+  it("restores focus to the report button after closing with the close control", async () => {
+    setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+    });
+    renderCrashedBoundary();
+    await openReportDialog();
+    await closeReportDialog("close");
+    expect(screen.getByText(CRASH_MESSAGE)).toBeVisible();
+  });
+
+  it("reopens the report dialog while the original error remains", async () => {
+    setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+    });
+    renderCrashedBoundary();
+    await openReportDialog();
+    await closeReportDialog("escape");
+    expect(screen.getByText(CRASH_MESSAGE)).toBeVisible();
+    await expectRealReportModal();
+    expect(screen.getByText(CRASH_MESSAGE)).toBeVisible();
+  });
+
+  it("restores the child after try again once the failure is cleared", () => {
+    setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+    });
+    const view = renderCrashedBoundary(<RecoverableChild crash={true} />);
+    expect(screen.getByText("Something went wrong")).toBeVisible();
+
+    view.rerender(
+      <ErrorBoundary>
+        <RecoverableChild crash={false} />
+      </ErrorBoundary>,
+    );
+    fireEvent.click(screen.getByTestId("reset-error-boundary-button"));
+
+    expect(screen.getByText("recovered child")).toBeVisible();
+    expect(screen.queryByText("Something went wrong")).not.toBeInTheDocument();
+  });
+
+  it("does not read notebook source when opened with fresh inclusion preferences", async () => {
+    const { readCode } = setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+      readCode: vi.fn().mockResolvedValue({ contents: "import marimo" }),
+    });
+
+    renderCrashedBoundary();
+    await expectRealReportModal();
+
+    expect(readCode).not.toHaveBeenCalled();
+  });
+
+  it("renders the copy toast after the ancestor toaster is gone", async () => {
+    setRequestClient({
+      getEnvironmentInfo: vi.fn().mockResolvedValue(environment),
+    });
+    renderCrashedBoundary();
+    await expectRealReportModal();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Copy environment JSON" }),
+    );
+
+    expect(await screen.findByText("Environment details copied")).toBeVisible();
+  });
+});

package/src/components/editor/cell/__tests__/toolbar.test.tsx

@@ -0,0 +1,73 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ToolbarItem } from "../toolbar";
+
+describe("ToolbarItem keyboard activation", () => {
+  it.each(["Enter", " "])(
+    "keeps native %s activation out of cell navigation and calls the consumer handler",
+    (key) => {
+      const onCellKeyDown = vi.fn();
+      const onKeyDown = vi.fn();
+      render(
+        <div onKeyDown={onCellKeyDown}>
+          <ToolbarItem tooltip={null} onKeyDown={onKeyDown}>
+            Run
+          </ToolbarItem>
+        </div>,
+      );
+      const button = screen.getByRole("button", { name: "Run" });
+
+      expect(fireEvent.keyDown(button, { key })).toBe(true);
+      expect(onCellKeyDown).not.toHaveBeenCalled();
+      expect(onKeyDown).toHaveBeenCalledOnce();
+      expect(onKeyDown.mock.calls[0][0].defaultPrevented).toBe(false);
+    },
+  );
+
+  it.each([
+    { key: "Enter", ctrlKey: true },
+    { key: "Enter", metaKey: true },
+    { key: "Enter", shiftKey: true },
+    { key: "Enter", altKey: true },
+    { key: " ", ctrlKey: true },
+    { key: "ArrowLeft" },
+    { key: "ArrowRight" },
+    { key: "Tab" },
+    { key: "Escape" },
+  ])("preserves propagation for %j", (event) => {
+    const onCellKeyDown = vi.fn();
+    render(
+      <div onKeyDown={onCellKeyDown}>
+        <ToolbarItem tooltip={null}>Run</ToolbarItem>
+      </div>,
+    );
+
+    expect(fireEvent.keyDown(screen.getByRole("button"), event)).toBe(true);
+    expect(onCellKeyDown).toHaveBeenCalledOnce();
+  });
+
+  it("does not submit forms and preserves disabled and mouse-focus behavior", () => {
+    const onClick = vi.fn();
+    const { rerender } = render(
+      <ToolbarItem tooltip={null} onClick={onClick}>
+        Run
+      </ToolbarItem>,
+    );
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("type", "button");
+    expect(fireEvent.mouseDown(button)).toBe(false);
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledOnce();
+
+    rerender(
+      <ToolbarItem tooltip={null} onClick={onClick} disabled={true}>
+        Run
+      </ToolbarItem>,
+    );
+    expect(button).toBeDisabled();
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/src/components/editor/cell/code/__tests__/rtc-editor-config.test.ts

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { EditorState } from "@codemirror/state";
+import { describe, expect, it } from "vitest";
+import { composeRtcEditorConfig } from "../cell-editor";
+
+describe("composeRtcEditorConfig", () => {
+  it("does not accumulate RTC extensions across reconfigurations", () => {
+    const baseExtension = EditorState.readOnly.of(false);
+    const baseExtensions = [baseExtension];
+    const firstRtc = {
+      code: "first RTC code",
+      extension: EditorState.tabSize.of(2),
+    };
+    const secondRtc = {
+      code: "second RTC code",
+      extension: EditorState.tabSize.of(4),
+    };
+
+    const firstConfig = composeRtcEditorConfig(
+      "local code",
+      baseExtensions,
+      firstRtc,
+    );
+    const secondConfig = composeRtcEditorConfig(
+      "local code",
+      baseExtensions,
+      secondRtc,
+    );
+
+    expect(baseExtensions).toEqual([baseExtension]);
+    expect(firstConfig).toEqual({
+      code: firstRtc.code,
+      extensions: [baseExtension, firstRtc.extension],
+    });
+    expect(secondConfig).toEqual({
+      code: secondRtc.code,
+      extensions: [baseExtension, secondRtc.extension],
+    });
+  });
+
+  it("reuses the base configuration when RTC is disabled", () => {
+    const extensions = [EditorState.readOnly.of(false)];
+
+    const config = composeRtcEditorConfig("local code", extensions, undefined);
+
+    expect(config).toEqual({ code: "local code", extensions });
+    expect(config.extensions).toBe(extensions);
+  });
+});

package/src/components/editor/cell/code/cell-editor.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { historyField } from "@codemirror/commands";
-import { EditorState, StateEffect } from "@codemirror/state";
+import { EditorState, type Extension, StateEffect } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
 import { useIntersectionObserver } from "@uidotdev/usehooks";
 import { useAtom, useAtomValue } from "jotai";
@@ -95,6 +95,21 @@ export interface CellEditorProps
   tooltipParentSelector?: string;
 }
 
+export function composeRtcEditorConfig(
+  code: string,
+  extensions: Extension[],
+  rtc: ReturnType<typeof realTimeCollaboration> | undefined,
+): { code: string; extensions: Extension[] } {
+  if (!rtc) {
+    return { code, extensions };
+  }
+
+  return {
+    code: rtc.code,
+    extensions: [...extensions, rtc.extension],
+  };
+}
+
 const CellEditorInternal = ({
   theme,
   showPlaceholder,
@@ -343,27 +358,31 @@ const CellEditorInternal = ({
   ]);
 
   const rtcEnabled = isRtcEnabled() && canUseRtc(cellId);
-  const handleInitializeEditor = useEvent(() => {
-    // If rtc is enabled, use collaborative editing
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(
-        cellId,
-        (code) => {
-          // It's not really a formatting change,
-          // but this means it won't be marked as stale
-          cellActions.updateCellCode({ cellId, code, formattingChange: true });
-        },
-        code,
-      );
-      extensions.push(rtc.extension);
-      code = rtc.code;
+  const createEditorConfig = (initialCode?: string) => {
+    if (!rtcEnabled) {
+      return composeRtcEditorConfig(code, extensions, undefined);
     }
 
+    const rtc = realTimeCollaboration(
+      cellId,
+      (code) => {
+        // It's not really a formatting change,
+        // but this means it won't be marked as stale
+        cellActions.updateCellCode({ cellId, code, formattingChange: true });
+      },
+      initialCode,
+    );
+    return composeRtcEditorConfig(code, extensions, rtc);
+  };
+
+  const handleInitializeEditor = useEvent(() => {
+    const editorConfig = createEditorConfig(code);
+
     // Create a new editor
     const ev = new EditorView({
       state: EditorState.create({
-        doc: code,
-        extensions: extensions,
+        doc: editorConfig.code,
+        extensions: editorConfig.extensions,
       }),
     });
     setEditorView(ev);
@@ -377,19 +396,11 @@ const CellEditorInternal = ({
 
   const handleReconfigureEditor = useEvent(() => {
     invariant(editorViewRef.current !== null, "Editor view is not initialized");
-    // If rtc is enabled, use collaborative editing
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(cellId, (code) => {
-        // It's not really a formatting change,
-        // but this means it won't be marked as stale
-        cellActions.updateCellCode({ cellId, code, formattingChange: true });
-      });
-      extensions.push(rtc.extension);
-    }
+    const editorConfig = createEditorConfig();
 
     editorViewRef.current.dispatch({
       effects: [
-        StateEffect.reconfigure.of([extensions]),
+        StateEffect.reconfigure.of([editorConfig.extensions]),
         reconfigureLanguageEffect(editorViewRef.current, {
           completionConfig: userConfig.completion,
           hotkeysProvider: new OverridingHotkeyProvider(
@@ -406,26 +417,14 @@ const CellEditorInternal = ({
 
   const handleDeserializeEditor = useEvent(() => {
     invariant(serializedEditorState, "Editor view is not initialized");
-    if (rtcEnabled) {
-      const rtc = realTimeCollaboration(
-        cellId,
-        (code) => {
-          // It's not really a formatting change,
-          // but this means it won't be marked as stale
-          cellActions.updateCellCode({ cellId, code, formattingChange: true });
-        },
-        code,
-      );
-      extensions.push(rtc.extension);
-      code = rtc.code;
-    }
+    const editorConfig = createEditorConfig(code);
 
     const ev = new EditorView({
       state: EditorState.fromJSON(
         serializedEditorState,
         {
-          doc: code,
-          extensions: extensions,
+          doc: editorConfig.code,
+          extensions: editorConfig.extensions,
         },
         { history: historyField },
       ),

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

@@ -43,8 +43,19 @@ export const ToolbarItem: React.FC<ToolbarItemProps> = ({
 }) => {
   const content = (
     <button
+      type="button"
       disabled={disabled}
       {...rest}
+      onKeyDown={(evt) => {
+        // Preserve native button activation without triggering cell navigation.
+        if (
+          !Events.hasModifier(evt) &&
+          (evt.key === "Enter" || evt.key === " ")
+        ) {
+          evt.stopPropagation();
+        }
+        rest.onKeyDown?.(evt);
+      }}
       onClick={(evt) => {
         if (!disabled) {
           rest.onClick?.(evt);

package/src/components/editor/chrome/components/__tests__/feedback-button.test.tsx

@@ -208,4 +208,98 @@ describe("FeedbackModal issue reporting", () => {
       expect(href).toContain(encodeURIComponent('"marimo": "1.2.3"'));
     });
   });
+
+  it("shows partial environment details when the request client is missing", async () => {
+    store.set(requestClientAtom, null);
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Environment details");
+    expect(
+      screen.getByText("Server environment information unavailable"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Loading environment details…"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Retry" }),
+    ).not.toBeInTheDocument();
+
+    const link = screen.getByRole("link", { name: "Open GitHub issue" });
+    const href = link.getAttribute("href") ?? "";
+    expect(href).toContain("&env=");
+    expect(href).toContain(encodeURIComponent("Environment Collection Error"));
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Copy environment JSON" }),
+    );
+    await waitFor(() =>
+      expect(copyModule.copyToClipboard).toHaveBeenCalledWith(
+        expect.stringContaining("Environment Collection Error"),
+      ),
+    );
+  });
+
+  it("disables source collection when the request client is missing", async () => {
+    localStorage.setItem(
+      "marimo:issue-report:include-code",
+      JSON.stringify(true),
+    );
+    store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+    store.set(requestClientAtom, null);
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Environment details");
+    expect(
+      screen.getByRole("checkbox", { name: "Include notebook code" }),
+    ).toBeDisabled();
+    expect(
+      screen.getByText("Notebook source is unavailable."),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Connect the notebook to include its source."),
+    ).not.toBeInTheDocument();
+    const link = screen.getByRole("link", { name: "Open GitHub issue" });
+    expect(link.getAttribute("href") ?? "").not.toContain("reproduction-code=");
+  });
+
+  it("preserves partial diagnostics when the environment request throws", async () => {
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getEnvironmentInfo: vi.fn().mockImplementation(() => {
+          throw new Error("offline");
+        }),
+      }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Server environment information unavailable");
+    expect(screen.getByRole("button", { name: "Retry" })).toBeInTheDocument();
+    expect(
+      screen.getByText(/Environment Collection Error/),
+    ).toBeInTheDocument();
+  });
+
+  it("replaces partial diagnostics after a successful environment retry", async () => {
+    const getEnvironmentInfo = vi
+      .fn()
+      .mockRejectedValueOnce(new Error("offline"))
+      .mockResolvedValueOnce(environment);
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({ getEnvironmentInfo }),
+    );
+    render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
+
+    await screen.findByText("Server environment information unavailable");
+    fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+
+    await screen.findByText(/"marimo": "1.2.3"/);
+    expect(
+      screen.queryByText("Server environment information unavailable"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Retry" }),
+    ).not.toBeInTheDocument();
+  });
 });