@marimo-team/frontend 0.25.2-dev7 → 0.25.2-dev89

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

@@ -1,358 +0,0 @@
-/* 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/sandbox-details-state.ts

@@ -1,38 +0,0 @@
-/* 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 });
-  },
-);

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

@@ -1,230 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { useAtom, useAtomValue } from "jotai";
-import { RefreshCwIcon } from "lucide-react";
-import { connectionNoticeAtom } from "@/core/network/connection-notice";
-import { Button } from "@/components/ui/button";
-import { useRestartKernel } from "@/components/editor/actions/useRestartKernel";
-import {
-  isConnectedAtom,
-  startupProgressAtom,
-} from "@/core/network/connection";
-import type { DisplayConnectionNotice } from "@/core/network/useConnectionNotice";
-import {
-  preparationAtom,
-  sandboxActionsAtom,
-  sandboxAtom,
-  sandboxSyncAtom,
-  sandboxSyncOperationAtom,
-} from "@/core/packages/sandbox-state";
-import { cn } from "@/utils/cn";
-import { usePanelSection } from "./panel-context";
-import { sandboxDetailsExpandedAtom } from "./sandbox-details-state";
-import { StartupOutput } from "../../alerts/startup-output";
-import {
-  ConnectionStatusIcon,
-  StartupProgress,
-} from "../../alerts/startup-progress";
-
-export function SandboxErrorOutput({ error }: { error: string }) {
-  return (
-    <pre
-      tabIndex={0}
-      aria-label="Error details"
-      className="mt-3 p-3 rounded border bg-muted/30 text-xs text-muted-foreground whitespace-pre min-w-0 max-w-full max-h-52 overflow-auto"
-    >
-      {error}
-    </pre>
-  );
-}
-
-function SandboxRecovery({ notice }: { notice: DisplayConnectionNotice }) {
-  const sandbox = useAtomValue(sandboxAtom);
-  const actions = useAtomValue(sandboxActionsAtom);
-  const sync = useAtomValue(sandboxSyncAtom);
-  if (notice.pending || notice.ready) {
-    return null;
-  }
-  return (
-    <>
-      <p className="mt-2 text-foreground">{notice.description}</p>
-      {notice.error && <SandboxErrorOutput error={notice.error} />}
-      <div className="flex items-center gap-2 mt-3">
-        <Button
-          variant="outline"
-          size="xs"
-          disabled={!actions || sandbox?.manifest == null}
-          onClick={() => actions?.editManifest()}
-        >
-          Edit manifest…
-        </Button>
-        {notice.kind === "sync" && sync.kind === "restart-required" ? (
-          <SandboxRestart />
-        ) : (
-          <Button
-            variant="text"
-            size="xs"
-            disabled={!actions}
-            onClick={() => actions?.sync()}
-          >
-            Retry sync
-          </Button>
-        )}
-      </div>
-      {sandbox?.manifest == null && (
-        <p className="mt-3 text-xs text-muted-foreground">
-          A manifest will be available once this new notebook starts.
-        </p>
-      )}
-    </>
-  );
-}
-
-function SandboxRestart() {
-  const restartKernel = useRestartKernel();
-  return (
-    <Button variant="text" size="xs" onClick={restartKernel}>
-      Restart Kernel
-    </Button>
-  );
-}
-
-function SandboxStartupPanel({ notice }: { notice: DisplayConnectionNotice }) {
-  const showSteps =
-    notice.kind === "startup" &&
-    (notice.ready ||
-      notice.phase === "preparing-environment" ||
-      notice.phase === "starting-kernel");
-  return (
-    <div className="min-w-0 text-sm">
-      {showSteps ? (
-        <StartupProgress notice={notice} surface="sidebar" />
-      ) : (
-        <div className="flex items-center gap-2" role="status">
-          <ConnectionStatusIcon notice={notice} />
-          <h2>{notice.title}</h2>
-        </div>
-      )}
-      <SandboxRecovery notice={notice} />
-    </div>
-  );
-}
-
-function SandboxSyncStatus({ notice }: { notice: DisplayConnectionNotice }) {
-  return (
-    <div className="mb-5 text-sm">
-      <output className="flex items-center gap-2 text-xs">
-        <ConnectionStatusIcon notice={notice} />
-        <span>{notice.title}</span>
-      </output>
-      <SandboxRecovery notice={notice} />
-    </div>
-  );
-}
-
-function SandboxSyncDetails({
-  notice,
-}: {
-  notice: DisplayConnectionNotice | null;
-}) {
-  const operation = useAtomValue(sandboxSyncOperationAtom);
-  if (!operation && !notice) {
-    return null;
-  }
-  return (
-    <div className="mt-5 min-w-0">
-      {notice ? (
-        <SandboxSyncStatus notice={notice} />
-      ) : (
-        <p className="text-sm">Environment synced</p>
-      )}
-      <StartupOutput
-        key={operation?.operation_id}
-        logs={operation?.logs.environment ?? ""}
-        state={
-          operation?.status.kind === "running"
-            ? "running"
-            : operation?.status.kind === "succeeded"
-              ? "succeeded"
-              : "failed"
-        }
-        label="sandbox sync output"
-      />
-    </div>
-  );
-}
-
-export function SandboxDetails() {
-  const section = usePanelSection();
-  const connected = useAtomValue(isConnectedAtom);
-  const notice = useAtomValue(connectionNoticeAtom);
-  const preparation = useAtomValue(preparationAtom);
-  const progress = useAtomValue(startupProgressAtom);
-  const [expanded, setExpanded] = useAtom(sandboxDetailsExpandedAtom);
-  const startup: DisplayConnectionNotice | null =
-    notice?.kind === "startup"
-      ? { ...notice, ready: false }
-      : preparation || progress
-        ? {
-            kind: "startup",
-            sandbox: true,
-            title: "Notebook started",
-            description: "The notebook is ready to run.",
-            pending: false,
-            ready: true,
-            error: null,
-          }
-        : null;
-  return (
-    <section
-      id={`sandbox-details-${section}`}
-      aria-label="Sandbox details"
-      hidden={!expanded}
-      className={cn(
-        "min-w-0 overflow-auto p-4",
-        connected ? "shrink-0 max-h-[65%] border-b" : "flex-1",
-      )}
-      onPointerDownCapture={() => setExpanded(true)}
-      onFocusCapture={() => setExpanded(true)}
-    >
-      {notice?.kind === "connection" && (
-        <SandboxSyncStatus notice={{ ...notice, ready: false }} />
-      )}
-      {startup && <SandboxStartupPanel notice={startup} />}
-      {connected && (
-        <SandboxSyncDetails
-          notice={notice?.kind === "sync" ? { ...notice, ready: false } : null}
-        />
-      )}
-      {connected && (!notice || notice.pending) && <SandboxActions />}
-    </section>
-  );
-}
-
-function SandboxActions() {
-  const sandbox = useAtomValue(sandboxAtom);
-  const actions = useAtomValue(sandboxActionsAtom);
-  const pending = useAtomValue(sandboxSyncAtom).kind === "running";
-  return (
-    <div className="flex items-center gap-4 mt-5 border-t pt-3">
-      <Button
-        variant="text"
-        size="xs"
-        className="text-muted-foreground gap-1.5 p-0"
-        disabled={pending || !actions}
-        onClick={() => actions?.sync()}
-      >
-        <RefreshCwIcon className="size-3" aria-hidden={true} />
-        Sync
-      </Button>
-      <Button
-        variant="text"
-        size="xs"
-        className="text-muted-foreground p-0"
-        disabled={!actions || sandbox?.manifest == null}
-        onClick={() => actions?.editManifest()}
-      >
-        Edit manifest…
-      </Button>
-    </div>
-  );
-}

package/src/components/editor/chrome/panels/sandbox-toggle.tsx

@@ -1,52 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { useAtom, useAtomValue } from "jotai";
-import { ChevronDownIcon } from "lucide-react";
-import { connectionNoticeAtom } from "@/core/network/connection-notice";
-import { sandboxAtom } from "@/core/packages/sandbox-state";
-import { cn } from "@/utils/cn";
-import type { PanelSection } from "./panel-context";
-import { sandboxDetailsExpandedAtom } from "./sandbox-details-state";
-
-export function SandboxToggle({ section }: { section: PanelSection }) {
-  const sandbox = useAtomValue(sandboxAtom);
-  const notice = useAtomValue(connectionNoticeAtom);
-  const [expanded, setExpanded] = useAtom(sandboxDetailsExpandedAtom);
-  if (!sandbox?.backend) {
-    return null;
-  }
-  const status = notice ? (notice.pending ? "pending" : "error") : "healthy";
-  return (
-    <button
-      type="button"
-      aria-label={`${sandbox.backend} sandbox`}
-      aria-expanded={expanded}
-      aria-controls={`sandbox-details-${section}`}
-      title={notice?.title ?? "Sandbox details"}
-      className={cn(
-        "flex items-center gap-1.5 rounded px-1.5 py-1 text-xs whitespace-nowrap hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring",
-        status === "error" ? "text-(--red-11)" : "text-foreground",
-      )}
-      onClick={() => setExpanded(!expanded)}
-    >
-      <output
-        aria-label={notice?.title ?? "Sandbox healthy"}
-        className={cn(
-          "size-1.5 shrink-0 rounded-full",
-          status === "error"
-            ? "bg-(--red-9)"
-            : status === "pending"
-              ? "bg-muted-foreground motion-safe:animate-pulse"
-              : "bg-(--grass-9)",
-        )}
-      />
-      {sandbox.backend} sandbox
-      <ChevronDownIcon
-        aria-hidden={true}
-        className={cn(
-          "size-3 shrink-0 text-muted-foreground",
-          expanded && "rotate-180",
-        )}
-      />
-    </button>
-  );
-}