@marimo-team/frontend 0.24.3-dev36 → 0.24.3-dev39

package/src/components/editor/alerts/connecting-alert.tsx

@@ -1,76 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtomValue } from "jotai";
-import { LoadingEllipsis } from "@/components/icons/loading-ellipsis";
-import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
-import { DelayMount } from "@/components/utils/delay-mount";
-import {
-  isClosedAtom,
-  isConnectingAtom,
-  isNotStartedAtom,
-} from "@/core/network/connection";
+import { isNotStartedAtom } from "@/core/network/connection";
 import { useConnectToRuntime } from "@/core/runtime/config";
-import { Banner } from "@/plugins/impl/common/error-banner";
-import { Tooltip } from "../../ui/tooltip";
 import { FloatingAlert } from "./floating-alert";
 
-const SHORT_DELAY_MS = 1000; // 1 second
-const LONG_DELAY_MS = 5000; // 5 seconds
-
-export const ConnectingAlert: React.FC = () => {
-  const isConnecting = useAtomValue(isConnectingAtom);
-  const isClosed = useAtomValue(isClosedAtom);
-
-  if (isConnecting) {
-    const subtleNotification = (
-      <Tooltip content="Connecting to a marimo runtime">
-        <div className="flex items-center">
-          <LoadingEllipsis size={5} className="text-yellow-500" />
-        </div>
-      </Tooltip>
-    );
-
-    const longNotification = (
-      <Banner
-        kind="info"
-        className="flex flex-col rounded py-2 px-4 animate-in slide-in-from-top w-fit"
-      >
-        <div className="flex flex-col gap-4 justify-between items-start text-muted-foreground text-base">
-          <div className="flex items-center gap-2">
-            <Spinner className="h-4 w-4" />
-            <p>Connecting to a marimo runtime ...</p>
-          </div>
-        </div>
-      </Banner>
-    );
-
-    // This waits for 1 second to show the subtle notification, then shows the long notification after 5 seconds.
-    return (
-      <DelayMount milliseconds={SHORT_DELAY_MS}>
-        <div className="m-0 flex items-center min-h-[28px] fixed top-5 left-1/2 transform -translate-x-1/2 z-200">
-          <DelayMount
-            milliseconds={LONG_DELAY_MS}
-            fallback={subtleNotification}
-          >
-            {longNotification}
-          </DelayMount>
-        </div>
-      </DelayMount>
-    );
-  }
-
-  if (isClosed) {
-    return (
-      <FloatingAlert show={isClosed} kind="danger">
-        <div className="flex items-center gap-2">
-          <p>Failed to connect.</p>
-        </div>
-      </FloatingAlert>
-    );
-  }
-};
-
 export const NotStartedConnectionAlert: React.FC = () => {
   const isNotStarted = useAtomValue(isNotStartedAtom);
   const connectToRuntime = useConnectToRuntime();

package/src/components/editor/alerts/connection-notice.tsx

@@ -0,0 +1,140 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtomValue } from "jotai";
+import { AlertCircleIcon, ArrowRightIcon } from "lucide-react";
+import { useState } from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { Button } from "@/components/ui/button";
+import { hasCellsAtom } from "@/core/cells/cells";
+import type { AppConfig } from "@/core/config/config-schema";
+import { connectionAtom } from "@/core/network/connection";
+import { connectionNoticeAtom } from "@/core/network/connection-notice";
+import { WebSocketState } from "@/core/websocket/types";
+import { useDelayElapsed } from "@/hooks/useDelayElapsed";
+import { useInterval } from "@/hooks/useInterval";
+import { cn } from "@/utils/cn";
+import { SandboxErrorOutput } from "../chrome/panels/sandbox-panel";
+import { chromeAtom, useChromeActions } from "../chrome/state";
+import { VerticalLayoutWrapper } from "../renderers/vertical-layout/vertical-layout-wrapper";
+
+export const ConnectionNotice = ({
+  appConfig,
+  onRetry,
+}: {
+  appConfig: AppConfig;
+  onRetry: () => void;
+}) => {
+  const notice = useAtomValue(connectionNoticeAtom);
+  const connection = useAtomValue(connectionAtom);
+  const hasCells = useAtomValue(hasCellsAtom);
+  const chrome = useAtomValue(chromeAtom);
+  const packagesOpen =
+    (chrome.isSidebarOpen && chrome.selectedPanel === "packages") ||
+    (chrome.isDeveloperPanelOpen &&
+      chrome.selectedDeveloperPanelTab === "packages");
+  const elapsed = useDelayElapsed(notice?.pending ? 500 : 0);
+  const { openApplication } = useChromeActions();
+
+  // Reconnection uses the footer indicator while existing cells stay visible.
+  if (
+    !notice ||
+    !elapsed ||
+    (hasCells &&
+      connection.state === WebSocketState.CONNECTING &&
+      connection.phase === "reconnecting")
+  ) {
+    return null;
+  }
+
+  return (
+    <VerticalLayoutWrapper
+      appConfig={appConfig}
+      className="shrink-0 pb-0 sm:pb-0 print:hidden"
+      innerClassName="pb-0 sm:pb-0 pr-4"
+    >
+      <section
+        aria-label="Notebook startup"
+        className={cn(
+          "text-muted-foreground",
+          hasCells
+            ? "mt-4 mb-8 border rounded-lg px-5 py-5"
+            : "max-w-sm mx-auto mt-16 sm:mt-24 px-4",
+          hasCells && !notice.pending && "border-(--red-7)",
+        )}
+      >
+        <div role="status" className="flex items-center gap-2.5">
+          {notice.pending ? (
+            <Spinner className="size-4 shrink-0" aria-hidden={true} />
+          ) : (
+            <AlertCircleIcon
+              className="size-4 shrink-0 text-(--red-11)"
+              aria-hidden={true}
+            />
+          )}
+          <h2
+            className={cn(
+              "text-base",
+              notice.pending
+                ? "font-normal text-foreground"
+                : "font-medium text-(--red-11)",
+            )}
+          >
+            {notice.title}
+          </h2>
+        </div>
+        <div className="ml-6.5">
+          <p
+            className={cn(
+              "mt-3 text-sm leading-7",
+              !notice.pending && "text-foreground",
+            )}
+          >
+            {notice.description}
+          </p>
+          {!notice.sandbox && notice.error && (
+            <SandboxErrorOutput error={notice.error} />
+          )}
+          <div className="mt-5 flex flex-wrap items-center gap-x-6 gap-y-3">
+            {!packagesOpen && (notice.sandbox || notice.pending) && (
+              <Button
+                variant="text"
+                size="xs"
+                className="h-auto p-0 text-xs gap-1.5"
+                onClick={() => openApplication("packages")}
+              >
+                {notice.pending ? "View setup details" : "Open Packages"}
+                <ArrowRightIcon className="size-3" aria-hidden={true} />
+              </Button>
+            )}
+            {!notice.pending && !notice.sandbox && (
+              <Button variant="outline" size="xs" onClick={onRetry}>
+                Try again
+              </Button>
+            )}
+            {notice.pending && <StartupElapsedTime />}
+          </div>
+        </div>
+      </section>
+    </VerticalLayoutWrapper>
+  );
+};
+
+function StartupElapsedTime() {
+  const [startedAt] = useState(Date.now);
+  const [seconds, setSeconds] = useState(0);
+  useInterval(() => setSeconds(Math.floor((Date.now() - startedAt) / 1000)), {
+    delayMs: 1000,
+    whenVisible: true,
+  });
+  const duration =
+    seconds < 60
+      ? `${seconds}s`
+      : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+  return (
+    <span
+      className="text-xs text-muted-foreground/70 tabular-nums"
+      aria-live="off"
+    >
+      Elapsed {duration}
+    </span>
+  );
+}

package/src/components/editor/app-container.tsx

@@ -4,8 +4,11 @@ import type React from "react";
 import type { PropsWithChildren } from "react";
 import type { AppConfig } from "@/core/config/config-schema";
 import { PyodideLoader } from "@/core/wasm/PyodideLoader";
-import { isAppClosed } from "@/core/websocket/connection-utils";
-import type { ConnectionStatus } from "@/core/websocket/types";
+import {
+  type ConnectionStatus,
+  WebSocketClosedReason,
+  WebSocketState,
+} from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 import { DynamicFavicon } from "./dynamic-favicon";
 import { StatusOverlay } from "./header/status";
@@ -44,7 +47,10 @@ export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
             data-connection-state={connectionState}
             className={cn(
               "mathjax_ignore",
-              isAppClosed(connectionState) && "disconnected",
+              connection.state === WebSocketState.CLOSED &&
+                connection.code !==
+                  WebSocketClosedReason.KERNEL_STARTUP_ERROR &&
+                "disconnected",
               "bg-background w-full h-full text-textColor",
               "flex flex-col overflow-y-auto",
               width === "full" && "config-width-full",

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

@@ -1,6 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
@@ -10,6 +17,9 @@ import type {
   DependencyTreeNode,
   DependencyTreeResponse,
 } from "@/core/network/types";
+import { withPackageInvalidation } from "@/core/packages/package-data";
+import { useInstallPackages } from "@/core/packages/useInstallPackage";
+import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
 import { store } from "@/core/state/jotai";
 import PackagesPanel from "../packages-panel";
 
@@ -51,16 +61,22 @@ function renderPanel(
   context: DependencyTreeResponse["context"],
   tree: DependencyTreeNode = emptyTree,
 ) {
-  const getPackageList = vi.fn().mockResolvedValue({ packages: [] });
   store.set(
-    requestClientAtom,
-    MockRequestClient.create({
-      getPackageList,
-      getDependencyTree: vi.fn().mockResolvedValue({ tree, context }),
-    }),
+    sandboxAtom,
+    context.kind === "sandbox"
+      ? { backend: context.backend, manifest: "", filename: "notebook.py" }
+      : null,
   );
+  store.set(sandboxSyncAtom, { pending: false, error: null });
+  const getPackageList = vi.fn().mockResolvedValue({ packages: [] });
+  const client = MockRequestClient.create({
+    getPackageList,
+    getDependencyTree: vi.fn().mockResolvedValue({ tree, context }),
+  });
+  store.set(requestClientAtom, client);
 
   return {
+    client,
     getPackageList,
     ...render(
       <Provider store={store}>
@@ -141,3 +157,94 @@ describe("PackagesPanel", () => {
     expect(getPackageList).toHaveBeenCalledOnce();
   });
 });
+
+it("refreshes an open panel when a package is installed elsewhere, after installation succeeds", async () => {
+  const { promise, resolve } = Promise.withResolvers<{ success: boolean }>();
+  const client = MockRequestClient.create({
+    addPackage: vi.fn(() => promise),
+    getDependencyTree: vi
+      .fn()
+      .mockResolvedValueOnce({
+        tree: emptyTree,
+        context: { kind: "sandbox", backend: "uv" },
+      })
+      .mockResolvedValue({
+        tree: populatedTree,
+        context: { kind: "sandbox", backend: "uv" },
+      }),
+  });
+  store.set(sandboxAtom, {
+    backend: "uv",
+    manifest: "",
+    filename: "notebook.py",
+  });
+  store.set(sandboxSyncAtom, { pending: false, error: null });
+  store.set(requestClientAtom, withPackageInvalidation(client));
+  function InstallElsewhere() {
+    const { handleInstallPackages } = useInstallPackages();
+    return (
+      <button onClick={() => handleInstallPackages(["polars"])}>
+        Install from another panel
+      </button>
+    );
+  }
+  render(
+    <Provider store={store}>
+      <TooltipProvider>
+        <PackagesPanel />
+        <InstallElsewhere />
+      </TooltipProvider>
+    </Provider>,
+  );
+  await screen.findByPlaceholderText("Add packages to uv sandbox...");
+  fireEvent.click(
+    screen.getByRole("button", { name: "Install from another panel" }),
+  );
+  expect(client.getDependencyTree).toHaveBeenCalledTimes(1);
+  await act(async () => resolve({ success: true }));
+  await waitFor(() =>
+    expect(client.getDependencyTree).toHaveBeenCalledTimes(2),
+  );
+  expect(await screen.findByText("polars")).toBeInTheDocument();
+});
+
+it.each(["uv", "pixi", "list"] as const)(
+  "allows upgrading marimo but not removing it in the %s view",
+  async (view) => {
+    const tree = {
+      ...populatedTree,
+      dependencies: [
+        ...populatedTree.dependencies,
+        { name: "marimo", version: "0.24.0", tags: [], dependencies: [] },
+      ],
+    };
+    const { client, getPackageList } = renderPanel(
+      view === "list"
+        ? { kind: "package-manager", name: "pip" }
+        : { kind: "sandbox", backend: view },
+      tree,
+    );
+    getPackageList.mockResolvedValue({ packages: tree.dependencies });
+    vi.mocked(client.addPackage).mockResolvedValue({ success: true });
+    if (view === "list") {
+      fireEvent.click(await screen.findByRole("button", { name: "List" }));
+    }
+    const role = view === "list" ? "row" : "treeitem";
+    const marimo = within(await screen.findByRole(role, { name: /marimo/ }));
+    expect(marimo.getByText(/0\.24\.0/)).toBeInTheDocument();
+    expect(
+      marimo.queryByRole("button", { name: "Remove" }),
+    ).not.toBeInTheDocument();
+    const polars = within(screen.getByRole(role, { name: /polars/ }));
+    expect(polars.getByRole("button", { name: "Remove" })).toBeInTheDocument();
+    fireEvent.click(marimo.getByRole("button", { name: "Upgrade" }));
+    await waitFor(() =>
+      expect(client.addPackage).toHaveBeenCalledWith({
+        package: "marimo",
+        upgrade: true,
+        group: undefined,
+      }),
+    );
+    expect(client.removePackage).not.toHaveBeenCalled();
+  },
+);

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

@@ -0,0 +1,165 @@
+/* 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 { 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, { pending: false, error: null });
+  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}
+        />
+        <PackagesPanel />
+      </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(),
+  );
+});