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

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-BtV91sqJ.js"></script>
+    <script type="module" crossorigin src="./assets/index-CqJKdR1j.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-CUdNIagt.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-BQ9S8nyo.js">
@@ -86,7 +86,7 @@
     <link rel="modulepreload" crossorigin href="./assets/utils-B4K466FK.js">
     <link rel="modulepreload" crossorigin href="./assets/session-BykGt6S3.js">
     <link rel="modulepreload" crossorigin href="./assets/Deferred-CrTnjj37.js">
-    <link rel="modulepreload" crossorigin href="./assets/config-BAnYSdpO.js">
+    <link rel="modulepreload" crossorigin href="./assets/config-D_c_6ce1.js">
     <link rel="modulepreload" crossorigin href="./assets/clsx-DB0hHKMi.js">
     <link rel="modulepreload" crossorigin href="./assets/cn-ldLVeaqm.js">
     <link rel="modulepreload" crossorigin href="./assets/jsx-runtime-B74pBk57.js">
@@ -139,7 +139,7 @@
     <link rel="modulepreload" crossorigin href="./assets/useTheme-BkPLyRl9.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-DucTwMkf.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es--06brOip.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-h5u00Nz8.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-CxY8RSp7.js">
     <link rel="modulepreload" crossorigin href="./assets/coerce-CZiN7rQ_.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DjNf4SIX.js">
     <link rel="modulepreload" crossorigin href="./assets/_hasPath-BmRQipI0.js">
@@ -152,43 +152,43 @@
     <link rel="modulepreload" crossorigin href="./assets/copy-D03Y7IMR.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-YOKDWASO-84E-_nIR.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-DHvAXF8E.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-mDlWBE1M.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-RyCOE8jo.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-wfSGfX8v.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-Bx3wXUWO.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DRMkieKn.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-BIYte8oT.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-zMO43eNR.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-C7QcdAgB.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-Bx8A10xl.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-BnUiViRu.js">
-    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-CCQcFc6U.js">
+    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-HTUlGg0U.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-D9vyuMar.js">
-    <link rel="modulepreload" crossorigin href="./assets/api-DYL9A86_.js">
+    <link rel="modulepreload" crossorigin href="./assets/api-DVLtXyp7.js">
     <link rel="modulepreload" crossorigin href="./assets/share-BZW3tzEX.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-7os84dnI.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-sbCCk7ZP.js">
     <link rel="modulepreload" crossorigin href="./assets/pair-_FSgYVX4.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-BKmN7zye.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-CG6gtgym.js">
     <link rel="modulepreload" crossorigin href="./assets/config-CR2d-XsP.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-DOPs2jx8.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-B2JUUcK7.js">
     <link rel="modulepreload" crossorigin href="./assets/html-to-image-CFVIG1VZ.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-CUgiCx7s.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-CPMAf7re.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-C-83e2fG.js">
     <link rel="modulepreload" crossorigin href="./assets/tabs-QRT1DYjj.js">
     <link rel="modulepreload" crossorigin href="./assets/table-B7KYyTxw.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-CfkK-QS3.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-CEGpOrzd.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-CShqSonp.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-D5clvgKl.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-CLMWXUqY.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-D2lKwXyB.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-CGdRKCnw.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-OTHnVlxO.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-DVgK5i5l.js">
     <link rel="modulepreload" crossorigin href="./assets/package-BeYhVWvM.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-BLHGFSsT.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-Tst92Pzi.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-MrQXRIin.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-BxJ_FX3k.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-BeZAiE1D.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DCu6fm2y.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-B85OOscw.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-DC1UZQr_.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-z5iFryzf.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-CTYCgKB-.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-B4U3zuiu.js">
     <link rel="modulepreload" crossorigin href="./assets/isValid-BEbe1fFs.js">
@@ -207,13 +207,13 @@
     <link rel="modulepreload" crossorigin href="./assets/formats-DkOlpVdf.js">
     <link rel="modulepreload" crossorigin href="./assets/table-Dg1KxH-q.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-BL2E7f5c.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-nqqzL-n0.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-NVH7GWyC.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-B6FT5Xvu.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-DyFIOFp5.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-D9d9nT0z.js">
     <link rel="modulepreload" crossorigin href="./assets/semaphore-BjoL5P0h.js">
     <link rel="modulepreload" crossorigin href="./assets/fileToBase64-aqhlf6Jj.js">
-    <link rel="modulepreload" crossorigin href="./assets/useBoolean-BofUVeKg.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-Co-_MyFz.js">
     <link rel="modulepreload" crossorigin href="./assets/code-xml-CW65k2pN.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-DKocX1z0.js">
     <link rel="modulepreload" crossorigin href="./assets/file-mCR_SMtq.js">
@@ -221,11 +221,11 @@
     <link rel="modulepreload" crossorigin href="./assets/file-icons-e7tmeyP-.js">
     <link rel="modulepreload" crossorigin href="./assets/globe-CmFhHoL1.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-3WkPrffD.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-DesMfnE4.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-D4YGmSvB.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-Bhv6GT3m.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-DcYhdd1B.js">
     <link rel="modulepreload" crossorigin href="./assets/data-grid-types-DgHVN_Zz.js">
     <link rel="modulepreload" crossorigin href="./assets/glide-utils-BzwA3q-e.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-DtrgJzVI.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-sL_Jo0hX.js">
     <link rel="modulepreload" crossorigin href="./assets/square-DvOKKLHZ.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-BeRqoThc.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-Djf4O40e.js">
@@ -237,11 +237,11 @@
     <link rel="modulepreload" crossorigin href="./assets/icons-CVdkfEA3.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-DSlTt6u_.js">
     <link rel="modulepreload" crossorigin href="./assets/pathUtils-BKesuhdv.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-3PlTr0K1.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-K7cVdOlC.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-0PFKL3SH.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DjIHoF9Z.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B0GmlMnR.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-CF8Gfz1R.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-B7ZZVUcj.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.25.2-dev66",
+  "version": "0.25.2-dev89",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/__tests__/mount.test.ts

@@ -7,7 +7,7 @@ import { kioskModeAtom } from "@/core/mode";
 import { connectionAtom } from "@/core/network/connection";
 import { store } from "@/core/state/jotai";
 import { isStaticNotebook } from "@/core/static/static-state";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { pairPreviewAtom } from "@/core/config/pair";
 import { PAIR_PREVIEW } from "./fixtures/pair-preview";
 import { mount, visibleForTesting } from "../mount";
@@ -59,7 +59,7 @@ describe("mount", () => {
     store.set(layoutStateAtom, initialLayoutState());
     store.set(kioskModeAtom, false);
     // Reset connection atom to initial state
-    store.set(connectionAtom, { state: WebSocketState.NOT_STARTED });
+    store.set(connectionAtom, { state: ConnectionState.NOT_STARTED });
   });
 
   afterEach(() => {
@@ -111,7 +111,7 @@ describe("mount", () => {
       );
 
       const connection = store.get(connectionAtom);
-      expect(connection.state).toBe(WebSocketState.CONNECTING);
+      expect(connection.state).toBe(ConnectionState.CONNECTING);
     });
 
     it("should keep connection as NOT_STARTED when runtimeConfig has lazy=true", () => {
@@ -124,7 +124,7 @@ describe("mount", () => {
       );
 
       const connection = store.get(connectionAtom);
-      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+      expect(connection.state).toBe(ConnectionState.NOT_STARTED);
     });
 
     it("should keep connection as NOT_STARTED when no runtimeConfig is provided", () => {
@@ -137,7 +137,7 @@ describe("mount", () => {
       );
 
       const connection = store.get(connectionAtom);
-      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+      expect(connection.state).toBe(ConnectionState.NOT_STARTED);
     });
 
     it("should keep connection as NOT_STARTED for static notebooks even with lazy=false", () => {
@@ -155,7 +155,7 @@ describe("mount", () => {
       );
 
       const connection = store.get(connectionAtom);
-      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+      expect(connection.state).toBe(ConnectionState.NOT_STARTED);
     });
   });
 

package/src/components/editor/actions/useRestartKernel.tsx

@@ -5,7 +5,7 @@ import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { AlertDialogDestructiveAction } from "@/components/ui/alert-dialog";
 import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { reloadSafe } from "@/utils/reload-safe";
 
 export function useRestartKernel() {
@@ -22,7 +22,7 @@ export function useRestartKernel() {
       confirmAction: (
         <AlertDialogDestructiveAction
           onClick={async () => {
-            setConnection({ state: WebSocketState.CLOSING });
+            setConnection({ state: ConnectionState.CLOSING });
             await sendRestart();
             reloadSafe();
           }}

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

@@ -8,16 +8,22 @@ import { alertAtom, getPackageAlert } from "@/core/alerts/state";
 import { notebookAtom } from "@/core/cells/cells";
 import { CellId } from "@/core/cells/ids";
 import { AppConfigSchema } from "@/core/config/config-schema";
+import { kernelStartupErrorAtom } from "@/core/errors/state";
 import { connectionAtom } from "@/core/network/connection";
 import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
-import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
+import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
 import { chromeAtom } from "../../chrome/state";
+import { runtimeDetailsExpandedAtom } from "../../chrome/panels/runtime-details-state";
 import { ConnectionNotice } from "../connection-notice";
 
 beforeEach(() => vi.useFakeTimers());
 afterEach(() => vi.useRealTimers());
 
-function mount(existingCells = false) {
+function mount({
+  existingCells = false,
+  onRetry = vi.fn(),
+  canOpenPackages = true,
+} = {}) {
   const store = createStore();
   store.set(sandboxAtom, {
     backend: "pixi",
@@ -25,7 +31,7 @@ function mount(existingCells = false) {
     filename: "notebook.py",
   });
   store.set(connectionAtom, {
-    state: WebSocketState.CONNECTING,
+    state: ConnectionState.CONNECTING,
     phase: "preparing-environment",
   });
   if (existingCells) {
@@ -40,7 +46,8 @@ function mount(existingCells = false) {
     <Provider store={store}>
       <ConnectionNotice
         appConfig={AppConfigSchema.parse({})}
-        onRetry={vi.fn()}
+        onRetry={onRetry}
+        canOpenPackages={canOpenPackages}
       />
     </Provider>,
   );
@@ -57,13 +64,13 @@ it("shows both stages in an empty notebook, checks them off, then dismisses Read
   expect(steps.getByText("Start kernel")).toBeInTheDocument();
   act(() =>
     store.set(connectionAtom, {
-      state: WebSocketState.CONNECTING,
+      state: ConnectionState.CONNECTING,
       phase: "starting-kernel",
     }),
   );
   expect(steps.getByText("Environment prepared")).toBeInTheDocument();
   expect(steps.getByText("Starting kernel")).toBeInTheDocument();
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   expect(
     screen.getByRole("heading", { name: "Your notebook is ready" }),
   ).toBeInTheDocument();
@@ -78,8 +85,122 @@ it("shows both stages in an empty notebook, checks them off, then dismisses Read
   ).not.toBeInTheDocument();
 });
 
+it("uses the shared kernel stage for an ordinary connection and dismisses it when connected", () => {
+  const store = mount();
+  act(() => {
+    store.set(sandboxAtom, null);
+    store.set(connectionAtom, { state: ConnectionState.CONNECTING });
+  });
+  act(() => vi.advanceTimersByTime(500));
+  const stages = within(
+    screen.getByRole("list", {
+      name: "Notebook startup stages",
+    }),
+  );
+  expect(stages.getAllByRole("listitem")).toHaveLength(1);
+  expect(stages.getByText("Starting kernel")).toBeVisible();
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
+  expect(screen.queryByRole("region", { name: "Notebook startup" })).toBeNull();
+});
+
+it("shows connection status until a sandbox reports its startup phase", () => {
+  const store = mount();
+  act(() => store.set(connectionAtom, { state: ConnectionState.CONNECTING }));
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByRole("heading", { name: "Connecting…" })).toBeVisible();
+  expect(screen.queryByRole("list")).not.toBeInTheDocument();
+
+  act(() =>
+    store.set(connectionAtom, {
+      state: ConnectionState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Kernel startup failed",
+    }),
+  );
+  expect(
+    screen.getByRole("heading", { name: "Kernel failed to start" }),
+  ).toBeVisible();
+  expect(screen.queryByRole("list")).not.toBeInTheDocument();
+
+  act(() =>
+    store.set(connectionAtom, {
+      state: ConnectionState.CONNECTING,
+      phase: "preparing-environment",
+    }),
+  );
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByRole("list")).toHaveTextContent("Preparing environment");
+});
+
+it("shows kernel startup while sandbox metadata is loading, then adds environment preparation", () => {
+  const store = mount();
+  const sandbox = store.get(sandboxAtom);
+  act(() => store.set(sandboxAtom, null));
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByText("Starting kernel")).toBeVisible();
+  expect(screen.getAllByRole("listitem")).toHaveLength(1);
+
+  act(() => store.set(sandboxAtom, sandbox));
+  const stages = within(screen.getByRole("list"));
+  expect(stages.getByText("Preparing environment")).toBeVisible();
+  expect(stages.getByText("Start kernel")).toBeVisible();
+});
+
+it("shows ordinary environment preparation failures in the kernel stage", () => {
+  const store = mount();
+  act(() => store.set(sandboxAtom, null));
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByText("Starting kernel")).toBeVisible();
+  expect(screen.getAllByRole("listitem")).toHaveLength(1);
+  act(() => {
+    store.set(
+      kernelStartupErrorAtom,
+      "Configured Python environment is missing",
+    );
+    store.set(connectionAtom, {
+      state: ConnectionState.CLOSED,
+      phase: "preparing-environment",
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Kernel startup failed",
+    });
+  });
+  expect(screen.getByRole("listitem")).toHaveTextContent(
+    "Kernel failed to start",
+  );
+  expect(screen.getByRole("status")).toHaveTextContent(
+    "Kernel failed to start",
+  );
+  expect(screen.getByLabelText("Error details")).toHaveTextContent(
+    "Configured Python environment is missing",
+  );
+});
+
+it("reports the inline disclosure as expanded only when Packages and runtime details are open", () => {
+  const store = mount({ existingCells: true });
+  act(() => {
+    store.set(chromeAtom, (value) => ({
+      ...value,
+      isSidebarOpen: true,
+      selectedPanel: "packages",
+    }));
+    store.set(runtimeDetailsExpandedAtom, false);
+  });
+  act(() => vi.advanceTimersByTime(500));
+  const toggle = screen.getByRole("button", { name: /Open Packages/ });
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  fireEvent.click(toggle);
+  expect(toggle).toHaveAttribute("aria-expanded", "true");
+  act(() => store.set(runtimeDetailsExpandedAtom, false));
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  act(() => {
+    store.set(runtimeDetailsExpandedAtom, true);
+    store.set(chromeAtom, (value) => ({ ...value, isSidebarOpen: false }));
+  });
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+});
+
 it("opens Packages from the minimal inline status when cells exist", () => {
-  const store = mount(true);
+  const store = mount({ existingCells: true });
   act(() => vi.advanceTimersByTime(500));
   expect(screen.queryByRole("list")).not.toBeInTheDocument();
   fireEvent.click(screen.getByRole("button", { name: /Open Packages/ }));
@@ -87,14 +208,100 @@ it("opens Packages from the minimal inline status when cells exist", () => {
     isSidebarOpen: true,
     selectedPanel: "packages",
   });
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   expect(screen.getByRole("status")).toHaveTextContent(/^Ready$/);
 });
 
+it("uses an inline notice for an existing ordinary notebook, opens collapsed details, and offers retry on failure", () => {
+  const onRetry = vi.fn();
+  const store = mount({ existingCells: true, onRetry });
+  act(() => {
+    store.set(sandboxAtom, null);
+    store.set(connectionAtom, { state: ConnectionState.CONNECTING });
+    store.set(runtimeDetailsExpandedAtom, false);
+  });
+  act(() => vi.advanceTimersByTime(500));
+  const statusRow = screen.getByRole("region", {
+    name: "Notebook startup",
+  }).parentElement;
+  fireEvent.click(screen.getByRole("button", { name: /Open Packages/ }));
+  expect(store.get(chromeAtom)).toMatchObject({
+    isSidebarOpen: true,
+    selectedPanel: "packages",
+  });
+  expect(store.get(runtimeDetailsExpandedAtom)).toBe(true);
+  act(() =>
+    store.set(connectionAtom, {
+      state: ConnectionState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Kernel startup failed",
+    }),
+  );
+  expect(
+    screen.getByRole("button", {
+      name: /Kernel failed to start Open Packages/,
+    }),
+  ).toBeVisible();
+  fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+  expect(onRetry).toHaveBeenCalledOnce();
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
+  expect(screen.queryByRole("region", { name: "Notebook startup" })).toBeNull();
+  expect(statusRow).not.toBeInTheDocument();
+});
+
+it.each([
+  { existingCells: false, sandbox: false },
+  { existingCells: true, sandbox: false },
+  { existingCells: false, sandbox: true },
+  { existingCells: true, sandbox: true },
+])(
+  "keeps errors in the notebook without chrome (cells=$existingCells, sandbox=$sandbox)",
+  ({ existingCells, sandbox }) => {
+    const onRetry = vi.fn();
+    const store = mount({ existingCells, onRetry, canOpenPackages: false });
+    act(() => {
+      if (!sandbox) {
+        store.set(sandboxAtom, null);
+      }
+      store.set(connectionAtom, {
+        state: ConnectionState.CONNECTING,
+        phase: "starting-kernel",
+      });
+    });
+    act(() => vi.advanceTimersByTime(500));
+    expect(screen.getByText("Starting kernel")).toBeVisible();
+    expect(screen.getByRole("status")).toHaveTextContent("Starting kernel…");
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+
+    act(() => {
+      store.set(kernelStartupErrorAtom, "Could not import the runtime");
+      store.set(connectionAtom, {
+        state: ConnectionState.CLOSED,
+        phase: "starting-kernel",
+        code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+        reason: "Kernel startup failed",
+      });
+    });
+    expect(screen.getByLabelText("Error details")).toHaveTextContent(
+      "Could not import the runtime",
+    );
+    expect(screen.getByRole("status")).toHaveTextContent(
+      "Kernel failed to start",
+    );
+    expect(
+      screen.queryByRole("button", { name: /Open Packages/ }),
+    ).not.toBeInTheDocument();
+    if (!sandbox) {
+      fireEvent.click(screen.getByRole("button", { name: "Try again" }));
+    }
+    expect(onRetry).toHaveBeenCalledTimes(sandbox ? 0 : 1);
+  },
+);
+
 it("does not flash Ready for a startup that finished before the notice appeared", () => {
-  const store = mount(true);
+  const store = mount({ existingCells: true });
   act(() => vi.advanceTimersByTime(200));
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   expect(screen.queryByRole("status")).not.toBeInTheDocument();
   act(() => vi.advanceTimersByTime(2000));
   expect(screen.queryByRole("status")).not.toBeInTheDocument();
@@ -103,11 +310,11 @@ it("does not flash Ready for a startup that finished before the notice appeared"
 it("replaces Ready with a new attempt and never dismisses a failure", () => {
   const store = mount();
   act(() => vi.advanceTimersByTime(500));
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   act(() => vi.advanceTimersByTime(1000));
   act(() =>
     store.set(connectionAtom, {
-      state: WebSocketState.CONNECTING,
+      state: ConnectionState.CONNECTING,
       phase: "starting-kernel",
     }),
   );
@@ -115,7 +322,7 @@ it("replaces Ready with a new attempt and never dismisses a failure", () => {
   expect(screen.getByText("Starting kernel")).toBeInTheDocument();
   act(() =>
     store.set(connectionAtom, {
-      state: WebSocketState.CLOSED,
+      state: ConnectionState.CLOSED,
       code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
       phase: "starting-kernel",
       reason: "Kernel startup failed",
@@ -128,9 +335,9 @@ it("replaces Ready with a new attempt and never dismisses a failure", () => {
 });
 
 it("shows a sync as a single operation, without pretending to restart the kernel", () => {
-  const store = mount(true);
+  const store = mount({ existingCells: true });
   act(() => {
-    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    store.set(connectionAtom, { state: ConnectionState.OPEN });
     store.set(sandboxSyncAtom, { kind: "running" });
   });
   act(() => vi.advanceTimersByTime(500));
@@ -141,7 +348,7 @@ it("shows a sync as a single operation, without pretending to restart the kernel
 });
 
 it("restores syncing in the existing status and stays quiet for a completed snapshot", () => {
-  const store = mount(true);
+  const store = mount({ existingCells: true });
   const operation: EnvironmentOperation = {
     operation_id: "sync",
     action: "sync",
@@ -162,7 +369,7 @@ it("restores syncing in the existing status and stays quiet for a completed snap
       },
     }));
   act(() => {
-    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    store.set(connectionAtom, { state: ConnectionState.OPEN });
     restore({ kind: "succeeded" });
   });
   act(() => vi.advanceTimersByTime(2000));

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

@@ -0,0 +1,61 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { PropsWithChildren } from "react";
+import type { DisplayConnectionNotice } from "@/core/network/useConnectionNotice";
+import { cn } from "@/utils/cn";
+import {
+  ConnectionStatusIcon,
+  hasStartupStages,
+  StartupProgress,
+} from "./startup-progress";
+
+export function ConnectionErrorOutput({ 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>
+  );
+}
+
+export function ConnectionDetails({
+  notice,
+  surface = "sidebar",
+  children,
+}: PropsWithChildren<{
+  notice: DisplayConnectionNotice;
+  surface?: "notebook" | "sidebar";
+}>) {
+  const showSteps = hasStartupStages(notice);
+  const failed = !notice.pending && !notice.ready;
+  return (
+    <div className="min-w-0 text-sm">
+      {showSteps ? (
+        <StartupProgress notice={notice} surface={surface} />
+      ) : (
+        <div className="flex items-center gap-2" role="status">
+          <ConnectionStatusIcon notice={notice} />
+          <h2
+            className={cn(
+              surface === "notebook" && "text-base",
+              failed ? "font-medium text-(--red-11)" : "text-foreground",
+            )}
+          >
+            {notice.title}
+          </h2>
+        </div>
+      )}
+      {(failed || (!showSteps && surface === "notebook")) && (
+        <p className={cn("mt-2", failed && "text-foreground")}>
+          {notice.description}
+        </p>
+      )}
+      {notice.error && (surface === "sidebar" || !notice.sandbox) && (
+        <ConnectionErrorOutput error={notice.error} />
+      )}
+      {children}
+    </div>
+  );
+}