@marimo-team/islands 0.24.3-dev82 → 0.24.3-dev87

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

@@ -27,6 +27,7 @@ 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", () => ({
@@ -58,7 +59,7 @@ const failed = {
 } as const;
 beforeEach(() => {
   store.set(sandboxAtom, { backend: "uv", manifest, filename: "notebook.py" });
-  store.set(sandboxSyncAtom, { pending: false, error: null });
+  store.set(sandboxSyncAtom, { kind: "succeeded" });
   store.set(sandboxActionsAtom, null);
   store.set(connectionAtom, failed);
   store.set(kernelStartupErrorAtom, "resolver output\n  no solution");
@@ -83,7 +84,9 @@ function mount(
           appConfig={AppConfigSchema.parse({})}
           onRetry={reconnect}
         />
-        <PackagesPanel />
+        <PanelSectionProvider value="sidebar">
+          <PackagesPanel />
+        </PanelSectionProvider>
       </TooltipProvider>
     </Provider>,
   );

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -7,7 +7,7 @@ import {
   HelpCircleIcon,
 } from "lucide-react";
 import React from "react";
-import { connectionNoticeAtom } from "@/core/network/connection-notice";
+import { useConnectionNotice } from "@/core/network/useConnectionNotice";
 import { useOpenSettingsToTab } from "@/components/app-config/state";
 import { Spinner } from "@/components/icons/spinner";
 import { SearchInput } from "@/components/ui/input";
@@ -36,7 +36,7 @@ import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { Events } from "@/utils/events";
-import { SandboxFooter, SandboxStartupPanel } from "./sandbox-panel";
+import { SandboxDetails } from "./sandbox-panel";
 import { PanelEmptyState } from "./empty-state";
 import { PACKAGES_INPUT_ID, packagesToInstallAtom } from "./packages-utils";
 
@@ -71,17 +71,12 @@ const PackageActionButton: React.FC<{
 const PackagesPanel: React.FC = () => {
   const sandbox = useAtomValue(sandboxAtom);
   const connected = useAtomValue(isConnectedAtom);
-  const notice = useAtomValue(connectionNoticeAtom);
-  const operation = useAtomValue(sandboxSyncAtom);
+  const notice = useConnectionNotice(0);
   if (sandbox?.backend) {
     return (
       <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
-        {notice && (!operation.pending || !connected) ? (
-          <SandboxStartupPanel />
-        ) : (
-          <PackageContents />
-        )}
-        <SandboxFooter />
+        <SandboxDetails />
+        {connected && <PackageContents />}
       </div>
     );
   }
@@ -104,13 +99,18 @@ const PackagesPanel: React.FC = () => {
 };
 
 const PackageContents: React.FC = () => {
-  const { pending: syncing } = useAtomValue(sandboxSyncAtom);
+  const syncing = useAtomValue(sandboxSyncAtom).kind === "running";
   const [userViewMode, setUserViewMode] = React.useState<ViewMode | null>(null);
   const { data: dependencies, error, isPending } = usePackageDependencies();
 
   // Only show on the first load
   if (isPending) {
-    return <Spinner size="medium" centered={true} />;
+    return (
+      <output className="flex flex-1 items-center justify-center gap-2 text-xs text-muted-foreground">
+        <Spinner className="size-4" />
+        Loading installed packages…
+      </output>
+    );
   }
 
   if (error) {
@@ -179,15 +179,26 @@ const PackageContents: React.FC = () => {
           </div>
         </div>
       )}
-      {viewMode === "list" ? (
-        <PackagesList packages={dependencies.list} />
-      ) : (
-        <DependencyTree
-          tree={dependencies.tree}
-          error={error}
-          sandboxBackend={sandboxBackend}
-        />
-      )}
+      <fieldset
+        disabled={syncing}
+        className="flex flex-col flex-1 min-h-0"
+        aria-busy={syncing}
+      >
+        {syncing && (
+          <p className="px-3 py-2 text-xs text-muted-foreground">
+            Showing packages from the last sync.
+          </p>
+        )}
+        {viewMode === "list" ? (
+          <PackagesList packages={dependencies.list} />
+        ) : (
+          <DependencyTree
+            tree={dependencies.tree}
+            error={error}
+            sandboxBackend={sandboxBackend}
+          />
+        )}
+      </fieldset>
     </div>
   );
 };

package/src/components/editor/chrome/panels/sandbox-details-state.ts

@@ -0,0 +1,38 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { atom } from "jotai";
+import { connectionNoticeAtom } from "@/core/network/connection-notice";
+import { preparationAtom } from "@/core/packages/sandbox-state";
+
+const preferenceAtom = atom<{
+  preparationId: string | undefined;
+  error: string | null;
+  expanded: boolean;
+} | null>(null);
+
+const disclosureContextAtom = atom((get) => {
+  const notice = get(connectionNoticeAtom);
+  return {
+    preparationId: get(preparationAtom)?.operation_id,
+    error: notice && !notice.pending ? (notice.error ?? notice.title) : null,
+  };
+});
+
+export const sandboxDetailsExpandedAtom = atom(
+  (get) => {
+    const context = get(disclosureContextAtom);
+    const preference = get(preferenceAtom);
+    if (
+      preference &&
+      preference.preparationId === context.preparationId &&
+      preference.error === context.error
+    ) {
+      return preference.expanded;
+    }
+    // New work and failures open automatically. Completed startup stays quiet
+    // unless the user chose to inspect it.
+    return get(connectionNoticeAtom) !== null;
+  },
+  (get, set, expanded: boolean) => {
+    set(preferenceAtom, { ...get(disclosureContextAtom), expanded });
+  },
+);