@marimo-team/islands 0.24.3-dev9 → 0.25.0

package/src/components/editor/chrome/panels/__tests__/sandbox-details.test.tsx

@@ -0,0 +1,358 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { ModalProvider } from "@/components/modal/ImperativeModal";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { alertAtom } from "@/core/alerts/state";
+import type { EnvironmentOperation } from "@/core/alerts/environment";
+import { kernelStartupErrorAtom } from "@/core/errors/state";
+import { connectionAtom, startupProgressAtom } from "@/core/network/connection";
+import { requestClientAtom } from "@/core/network/requests";
+import { sandboxAtom } from "@/core/packages/sandbox-state";
+import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
+import PackagesPanel from "../packages-panel";
+import { PanelSectionProvider } from "../panel-context";
+import { SandboxToggle } from "../sandbox-toggle";
+
+vi.mock("@/utils/reload-safe", () => ({ reloadSafe: vi.fn() }));
+
+const preparation: EnvironmentOperation = {
+  operation_id: "prepare-1",
+  action: "prepare",
+  source: "kernel",
+  status: { kind: "succeeded" },
+  packages: {},
+  logs: {
+    environment:
+      "Using Python\nResolved dependencies\nDownloaded numpy\nInstalled numpy\n",
+  },
+};
+
+function mount({
+  preparing = false,
+  backend = "uv",
+}: { preparing?: boolean; backend?: "uv" | "pixi" | null } = {}) {
+  const store = createStore();
+  store.set(sandboxAtom, {
+    backend,
+    manifest: "dependencies = []",
+    filename: "notebook.py",
+  });
+  store.set(
+    connectionAtom,
+    preparing
+      ? { state: WebSocketState.CONNECTING, phase: "preparing-environment" }
+      : { state: WebSocketState.OPEN },
+  );
+  store.set(alertAtom, (state) => ({
+    ...state,
+    environments: {
+      ...state.environments,
+      kernel: {
+        restart_required: false,
+        operations: backend ? [preparation] : [],
+      },
+    },
+  }));
+  if (backend) {
+    store.set(startupProgressAtom, {
+      phase: preparing ? "preparing-environment" : "starting-kernel",
+      logs: preparing
+        ? ""
+        : "Loading runtime\nLaunching kernel\nKernel connected\n",
+      log_mode: "replace",
+    });
+  }
+  const client = MockRequestClient.create({
+    sendRestart: vi.fn(async () => null),
+    getDependencyTree: vi.fn(async () => ({
+      context: backend
+        ? { kind: "sandbox" as const, backend }
+        : { kind: "package-manager" as const, name: "pip" },
+      tree: {
+        name: "<root>",
+        version: null,
+        tags: [],
+        dependencies: [
+          { name: "numpy", version: "2.0.0", tags: [], dependencies: [] },
+        ],
+      },
+    })),
+    getPackageList: vi.fn(async () => ({
+      packages: [{ name: "numpy", version: "2.0.0" }],
+    })),
+  });
+  store.set(requestClientAtom, client);
+  const { unmount } = render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <ModalProvider>
+          <SandboxToggle section="sidebar" />
+          <PanelSectionProvider value="sidebar">
+            <PackagesPanel />
+          </PanelSectionProvider>
+        </ModalProvider>
+      </TooltipProvider>
+    </Provider>,
+  );
+  return { store, client, unmount };
+}
+
+it("opens restored preparation and kernel logs without reopening completed startup on refresh", async () => {
+  mount();
+  await screen.findByText("numpy");
+  const toggle = screen.getByRole("button", { name: "uv sandbox" });
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  expect(
+    screen.queryByRole("region", { name: "Sandbox details" }),
+  ).not.toBeInTheDocument();
+  fireEvent.click(toggle);
+  const details = within(
+    screen.getByRole("region", { name: "Sandbox details" }),
+  );
+  expect(details.getByText("Environment prepared")).toBeVisible();
+  expect(details.getByText("Kernel started")).toBeVisible();
+  fireEvent.click(
+    details.getByRole("button", {
+      name: "Expand environment preparation output",
+    }),
+  );
+  fireEvent.click(
+    details.getByRole("button", { name: "Expand kernel startup output" }),
+  );
+  expect(
+    details.getByLabelText("environment preparation output").textContent,
+  ).toBe(preparation.logs.environment);
+  expect(details.getByLabelText("kernel startup output")).toHaveTextContent(
+    "Loading runtime",
+  );
+  fireEvent.click(toggle);
+  fireEvent.click(toggle);
+  expect(
+    details.getByLabelText("environment preparation output"),
+  ).toBeVisible();
+  expect(details.getByLabelText("kernel startup output")).toBeVisible();
+});
+
+it("restores a restart-required sync with the kernel restart action", async () => {
+  const { store, client } = mount();
+  act(() =>
+    store.set(alertAtom, (state) => ({
+      ...state,
+      environments: {
+        ...state.environments,
+        kernel: {
+          restart_required: true,
+          operations: [
+            preparation,
+            {
+              operation_id: "sync-python",
+              action: "sync",
+              source: "kernel",
+              status: {
+                kind: "restart-required",
+                reason: "Python version changed",
+              },
+              packages: {},
+              logs: { environment: "Resolved Python 3.14\n" },
+            },
+          ],
+        },
+      },
+    })),
+  );
+  await screen.findByText("numpy");
+  expect(screen.getByText("Sandbox restart required")).toBeVisible();
+  expect(
+    screen.queryByRole("button", { name: "Retry sync" }),
+  ).not.toBeInTheDocument();
+  expect(screen.getByLabelText("Error details")).toHaveTextContent(
+    "Python version changed",
+  );
+  // A later package operation can displace the sync, but not its restart.
+  act(() =>
+    store.set(alertAtom, (state) => ({
+      ...state,
+      environments: {
+        ...state.environments,
+        kernel: {
+          restart_required: true,
+          operations: [
+            preparation,
+            {
+              operation_id: "install-1",
+              action: "install",
+              source: "kernel",
+              status: { kind: "succeeded" },
+              packages: { numpy: "succeeded" },
+              logs: {},
+            },
+          ],
+        },
+      },
+    })),
+  );
+  expect(screen.getByText("Sandbox restart required")).toBeVisible();
+  fireEvent.click(screen.getByRole("button", { name: "Restart Kernel" }));
+  expect(screen.getByRole("alertdialog")).toHaveTextContent("Restart Kernel");
+  expect(client.sendRestart).not.toHaveBeenCalled();
+  fireEvent.click(screen.getByRole("button", { name: "Confirm Restart" }));
+  expect(client.sendRestart).toHaveBeenCalledTimes(1);
+});
+
+it("keeps sync output open through completion and restores it quietly after refresh", () => {
+  const { store, unmount } = mount();
+  const restore = (status: EnvironmentOperation["status"], logs: string) =>
+    store.set(alertAtom, (state) => ({
+      ...state,
+      environments: {
+        ...state.environments,
+        kernel: {
+          restart_required: false,
+          operations: [
+            preparation,
+            {
+              operation_id: "sync-1",
+              action: "sync",
+              source: "kernel",
+              status,
+              packages: {},
+              logs: { environment: logs },
+            },
+          ],
+        },
+      },
+    }));
+  act(() => restore({ kind: "running" }, "Resolving dependencies\n"));
+  const preview = screen.getByRole("button", {
+    name: "Expand sandbox sync output",
+  });
+  fireEvent.pointerDown(preview);
+  fireEvent.click(preview);
+  const output = screen.getByLabelText("sandbox sync output");
+  act(() =>
+    restore({ kind: "running" }, "Resolving dependencies\nDownloading numpy\n"),
+  );
+  expect(output).toHaveTextContent("Downloading numpy");
+  act(() =>
+    restore(
+      { kind: "succeeded" },
+      "Resolving dependencies\nDownloading numpy\nDone\n",
+    ),
+  );
+  expect(output).toBeVisible();
+  expect(output).toHaveTextContent("Done");
+  expect(screen.getByText("Environment prepared")).toBeVisible();
+  expect(screen.getByText("Kernel started")).toBeVisible();
+
+  const snapshot = store.get(alertAtom);
+  unmount();
+  const refreshed = mount();
+  act(() => refreshed.store.set(alertAtom, snapshot));
+  const toggle = screen.getByRole("button", { name: "uv sandbox" });
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  fireEvent.click(toggle);
+  fireEvent.click(
+    screen.getByRole("button", { name: "Expand sandbox sync output" }),
+  );
+  expect(screen.getByLabelText("sandbox sync output").textContent).toBe(
+    "Resolving dependencies\nDownloading numpy\nDone\n",
+  );
+});
+
+it.each([false, true])(
+  "retains the progression after completion with inspecting=%s",
+  async (inspecting) => {
+    const { store, client } = mount({ preparing: true });
+    const toggle = screen.getByRole("button", { name: "uv sandbox" });
+    expect(toggle).toHaveAttribute("aria-expanded", "true");
+    expect(client.getDependencyTree).not.toHaveBeenCalled();
+    if (inspecting) {
+      const preview = screen.getByRole("button", {
+        name: "Expand environment preparation output",
+      });
+      fireEvent.pointerDown(preview);
+      fireEvent.click(preview);
+    }
+    act(() => {
+      store.set(startupProgressAtom, {
+        phase: "starting-kernel",
+        logs: "Launching kernel\n",
+        log_mode: "replace",
+      });
+      store.set(connectionAtom, {
+        state: WebSocketState.CONNECTING,
+        phase: "starting-kernel",
+      });
+    });
+    act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+    await screen.findByText("numpy");
+    expect(toggle).toHaveAttribute("aria-expanded", String(inspecting));
+    if (!inspecting) {
+      fireEvent.click(toggle);
+    }
+    expect(screen.getByText("Environment prepared")).toBeVisible();
+    expect(screen.getByText("Kernel started")).toBeVisible();
+    expect(
+      screen.getByRole("button", {
+        name: `${inspecting ? "Collapse" : "Expand"} environment preparation output`,
+      }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("button", { name: "Expand kernel startup output" }),
+    ).toHaveTextContent("Launching kernel");
+  },
+);
+
+it("opens a startup error even after collapsing preparation and keeps both step outputs available", () => {
+  const { store } = mount({ preparing: true, backend: "pixi" });
+  const toggle = screen.getByRole("button", { name: "pixi sandbox" });
+  fireEvent.click(toggle);
+  act(() => {
+    store.set(startupProgressAtom, {
+      phase: "starting-kernel",
+      logs: "Loading runtime\nImport failed\n",
+      log_mode: "replace",
+    });
+    store.set(kernelStartupErrorAtom, "Could not import the runtime");
+    store.set(connectionAtom, {
+      state: WebSocketState.CLOSED,
+      phase: "starting-kernel",
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Kernel startup failed",
+    });
+  });
+  expect(toggle).toHaveAttribute("aria-expanded", "true");
+  expect(within(toggle).getByRole("status")).toHaveAccessibleName(
+    "Kernel failed to start",
+  );
+  expect(screen.getByLabelText("Error details")).toHaveTextContent(
+    "Could not import the runtime",
+  );
+  expect(screen.getByText("Environment prepared")).toBeVisible();
+  expect(
+    screen.getByRole("button", {
+      name: "Expand environment preparation output",
+    }),
+  ).toHaveTextContent("Installed numpy");
+  expect(
+    screen.getByRole("button", { name: "Expand kernel startup output" }),
+  ).toHaveTextContent("Import failed");
+  fireEvent.click(toggle);
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  fireEvent.click(toggle);
+  expect(screen.getByLabelText("Error details")).toBeVisible();
+});
+
+it("does not add a toggle or startup details to an existing environment", async () => {
+  mount({ backend: null });
+  await screen.findByText("numpy");
+  expect(
+    screen.queryByRole("button", { name: /sandbox/ }),
+  ).not.toBeInTheDocument();
+  expect(
+    screen.queryByRole("region", { name: "Sandbox details" }),
+  ).not.toBeInTheDocument();
+});

package/src/components/editor/chrome/panels/__tests__/sandbox-recovery.test.tsx

@@ -0,0 +1,168 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import { Provider } from "jotai";
+import { beforeEach, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { AppConfigSchema } from "@/core/config/config-schema";
+import { ConnectionNotice } from "@/components/editor/alerts/connection-notice";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { kernelStartupErrorAtom } from "@/core/errors/state";
+import { connectionAtom } from "@/core/network/connection";
+import { requestClientAtom } from "@/core/network/requests";
+import {
+  sandboxActionsAtom,
+  sandboxAtom,
+  sandboxSyncAtom,
+} from "@/core/packages/sandbox-state";
+import { filenameAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
+import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
+import { chromeAtom } from "../../state";
+import PackagesPanel from "../packages-panel";
+import { PanelSectionProvider } from "../panel-context";
+import { SandboxController } from "../sandbox-controller";
+
+vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
+  LazyAnyLanguageCodeMirror: ({
+    value,
+    onChange,
+    editable,
+  }: {
+    value: string;
+    onChange: (value: string) => void;
+    editable: boolean;
+  }) => (
+    <textarea
+      aria-label="Notebook manifest"
+      value={value}
+      readOnly={!editable}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  ),
+}));
+
+const manifest =
+  'dependencies = ["numpy==0.0.0"]\n\n[tool.custom]\nlabel = "experiment"\n';
+const failed = {
+  state: WebSocketState.CLOSED,
+  code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+  phase: "preparing-environment",
+  reason: "Kernel startup failed",
+} as const;
+beforeEach(() => {
+  store.set(sandboxAtom, { backend: "uv", manifest, filename: "notebook.py" });
+  store.set(sandboxSyncAtom, { kind: "succeeded" });
+  store.set(sandboxActionsAtom, null);
+  store.set(connectionAtom, failed);
+  store.set(kernelStartupErrorAtom, "resolver output\n  no solution");
+  store.set(filenameAtom, "notebook.py");
+  store.set(chromeAtom, {
+    selectedPanel: "packages",
+    isSidebarOpen: false,
+    isDeveloperPanelOpen: false,
+    selectedDeveloperPanelTab: "errors",
+  });
+});
+function mount(
+  client: ReturnType<typeof MockRequestClient.create>,
+  reconnect = vi.fn(async () => {}),
+) {
+  store.set(requestClientAtom, client);
+  return render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <SandboxController onReconnect={reconnect} />
+        <ConnectionNotice
+          appConfig={AppConfigSchema.parse({})}
+          onRetry={reconnect}
+        />
+        <PanelSectionProvider value="sidebar">
+          <PackagesPanel />
+        </PanelSectionProvider>
+      </TooltipProvider>
+    </Provider>,
+  );
+}
+function requests() {
+  return MockRequestClient.create({
+    getSandbox: vi.fn(async () => ({
+      backend: "uv",
+      manifest,
+      filename: "notebook.py",
+    })),
+    updateManifest: vi.fn(async ({ contents }) => ({
+      backend: "uv",
+      manifest: contents,
+      filename: "notebook.py",
+    })),
+    syncSandbox: vi.fn(async () => ({ success: true, reconnect: true })),
+  });
+}
+
+it("keeps a whole-manifest repair open through failure and closes only after sync succeeds", async () => {
+  const client = requests();
+  const { promise: saved, resolve: finishSave } = Promise.withResolvers<void>();
+  vi.mocked(client.updateManifest).mockImplementation(async ({ contents }) => {
+    await saved;
+    return { backend: "uv", manifest: contents, filename: "notebook.py" };
+  });
+  const reconnect = vi.fn(async () => {
+    store.set(kernelStartupErrorAtom, null);
+    store.set(connectionAtom, {
+      state: WebSocketState.CONNECTING,
+      phase: "preparing-environment",
+    });
+  });
+  mount(client, reconnect);
+  fireEvent.click(await screen.findByRole("button", { name: "Open Packages" }));
+  expect(store.get(chromeAtom).isSidebarOpen).toBe(true);
+  expect(screen.getByLabelText("Error details")).toHaveTextContent(
+    "resolver output",
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Edit manifest…" }));
+  const editor = await screen.findByRole("textbox", {
+    name: "Notebook manifest",
+  });
+  const replacement =
+    '# A completely different manifest\n[tool.custom]\nlabel = "updated"\n';
+  fireEvent.change(editor, { target: { value: replacement } });
+  fireEvent.click(screen.getByRole("button", { name: "Save & sync" }));
+  expect(screen.getByRole("dialog")).toBeInTheDocument();
+  expect(reconnect).not.toHaveBeenCalled();
+  await act(async () => finishSave());
+  await waitFor(() => expect(reconnect).toHaveBeenCalledTimes(1));
+  expect(client.updateManifest).toHaveBeenCalledWith({
+    fileKey: "notebook.py",
+    previous: manifest,
+    contents: replacement,
+  });
+  expect(screen.getByRole("dialog")).toBeInTheDocument();
+  act(() => {
+    store.set(connectionAtom, failed);
+    store.set(kernelStartupErrorAtom, "another resolver failure");
+  });
+  const dialog = within(screen.getByRole("dialog"));
+  expect(await dialog.findByLabelText("Error details")).toHaveTextContent(
+    "another resolver failure",
+  );
+  expect(
+    dialog.getByRole("textbox", { name: "Notebook manifest" }),
+  ).toHaveValue(replacement);
+  await waitFor(() =>
+    expect(dialog.getByRole("button", { name: "Sync" })).toBeEnabled(),
+  );
+  fireEvent.click(dialog.getByRole("button", { name: "Sync" }));
+  await waitFor(() => expect(reconnect).toHaveBeenCalledTimes(2));
+  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  await waitFor(() =>
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),
+  );
+});