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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.24.3-dev82",
+  "version": "0.24.3-dev83",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -0,0 +1,186 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import type { EnvironmentOperation } from "@/core/alerts/environment";
+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 { connectionAtom } from "@/core/network/connection";
+import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
+import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
+import { chromeAtom } from "../../chrome/state";
+import { ConnectionNotice } from "../connection-notice";
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => vi.useRealTimers());
+
+function mount(existingCells = false) {
+  const store = createStore();
+  store.set(sandboxAtom, {
+    backend: "pixi",
+    manifest: "",
+    filename: "notebook.py",
+  });
+  store.set(connectionAtom, {
+    state: WebSocketState.CONNECTING,
+    phase: "preparing-environment",
+  });
+  if (existingCells) {
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookState({
+        cellData: { [CellId.create()]: { code: "1 + 1" } },
+      }),
+    );
+  }
+  render(
+    <Provider store={store}>
+      <ConnectionNotice
+        appConfig={AppConfigSchema.parse({})}
+        onRetry={vi.fn()}
+      />
+    </Provider>,
+  );
+  return store;
+}
+
+it("shows both stages in an empty notebook, checks them off, then dismisses Ready", () => {
+  const store = mount();
+  act(() => vi.advanceTimersByTime(500));
+  const steps = within(
+    screen.getByRole("list", { name: "Notebook startup stages" }),
+  );
+  expect(steps.getByText("Preparing environment")).toBeInTheDocument();
+  expect(steps.getByText("Start kernel")).toBeInTheDocument();
+  act(() =>
+    store.set(connectionAtom, {
+      state: WebSocketState.CONNECTING,
+      phase: "starting-kernel",
+    }),
+  );
+  expect(steps.getByText("Environment prepared")).toBeInTheDocument();
+  expect(steps.getByText("Starting kernel")).toBeInTheDocument();
+  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  expect(
+    screen.getByRole("heading", { name: "Your notebook is ready" }),
+  ).toBeInTheDocument();
+  expect(steps.getByText("Kernel started")).toBeInTheDocument();
+  act(() => vi.advanceTimersByTime(1000));
+  expect(screen.getByRole("status")).toHaveTextContent(
+    "Your notebook is ready",
+  );
+  act(() => vi.advanceTimersByTime(1000));
+  expect(
+    screen.queryByRole("region", { name: "Notebook startup" }),
+  ).not.toBeInTheDocument();
+});
+
+it("opens Packages from the minimal inline status when cells exist", () => {
+  const store = mount(true);
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.queryByRole("list")).not.toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", { name: /Open Packages/ }));
+  expect(store.get(chromeAtom)).toMatchObject({
+    isSidebarOpen: true,
+    selectedPanel: "packages",
+  });
+  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  expect(screen.getByRole("status")).toHaveTextContent(/^Ready$/);
+});
+
+it("does not flash Ready for a startup that finished before the notice appeared", () => {
+  const store = mount(true);
+  act(() => vi.advanceTimersByTime(200));
+  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  expect(screen.queryByRole("status")).not.toBeInTheDocument();
+  act(() => vi.advanceTimersByTime(2000));
+  expect(screen.queryByRole("status")).not.toBeInTheDocument();
+});
+
+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(() => vi.advanceTimersByTime(1000));
+  act(() =>
+    store.set(connectionAtom, {
+      state: WebSocketState.CONNECTING,
+      phase: "starting-kernel",
+    }),
+  );
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByText("Starting kernel")).toBeInTheDocument();
+  act(() =>
+    store.set(connectionAtom, {
+      state: WebSocketState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      phase: "starting-kernel",
+      reason: "Kernel startup failed",
+    }),
+  );
+  act(() => vi.advanceTimersByTime(10_000));
+  expect(screen.getByRole("status")).toHaveTextContent(
+    "Kernel failed to start",
+  );
+});
+
+it("shows a sync as a single operation, without pretending to restart the kernel", () => {
+  const store = mount(true);
+  act(() => {
+    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    store.set(sandboxSyncAtom, { kind: "running" });
+  });
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByRole("status")).toHaveTextContent("Syncing sandbox");
+  expect(screen.queryByRole("list")).not.toBeInTheDocument();
+  act(() => store.set(sandboxSyncAtom, { kind: "succeeded" }));
+  expect(screen.getByRole("status")).toHaveTextContent("Environment synced");
+});
+
+it("restores syncing in the existing status and stays quiet for a completed snapshot", () => {
+  const store = mount(true);
+  const operation: EnvironmentOperation = {
+    operation_id: "sync",
+    action: "sync",
+    source: "kernel",
+    status: { kind: "succeeded" },
+    packages: {},
+    logs: { environment: "Sync complete\n" },
+  };
+  const restore = (status: EnvironmentOperation["status"]) =>
+    store.set(alertAtom, (value) => ({
+      ...value,
+      environments: {
+        ...value.environments,
+        kernel: {
+          restart_required: false,
+          operations: [{ ...operation, status }],
+        },
+      },
+    }));
+  act(() => {
+    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    restore({ kind: "succeeded" });
+  });
+  act(() => vi.advanceTimersByTime(2000));
+  expect(screen.queryByRole("status")).not.toBeInTheDocument();
+
+  act(() => restore({ kind: "running" }));
+  act(() => vi.advanceTimersByTime(500));
+  expect(screen.getByRole("status")).toHaveTextContent("Syncing sandbox");
+  expect(getPackageAlert(store.get(alertAtom))).toBeNull();
+  for (const [status, title] of [
+    [{ kind: "failed", error: "Dependency conflict" }, "Sandbox sync failed"],
+    [
+      { kind: "restart-required", reason: "Restart the kernel" },
+      "Sandbox restart required",
+    ],
+    [{ kind: "cancelled" }, "Sandbox sync failed"],
+  ] as const) {
+    act(() => restore(status));
+    expect(screen.getByRole("status")).toHaveTextContent(title);
+  }
+});

package/src/components/editor/alerts/__tests__/startup-progress.test.tsx

@@ -0,0 +1,185 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { expect, it } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { EnvironmentOperation } from "@/core/alerts/environment";
+import { alertAtom } from "@/core/alerts/state";
+import { startupProgressAtom } from "@/core/network/connection";
+import type { DisplayConnectionNotice } from "@/core/network/useConnectionNotice";
+import { StartupOutput } from "../startup-output";
+import { StartupProgress } from "../startup-progress";
+
+const notice: DisplayConnectionNotice = {
+  kind: "startup",
+  phase: "starting-kernel",
+  sandbox: true,
+  title: "Starting kernel",
+  description: "Connecting to this notebook.",
+  pending: true,
+  ready: false,
+  error: null,
+};
+
+const preparation: EnvironmentOperation = {
+  operation_id: "prepare-1",
+  action: "prepare",
+  source: "kernel",
+  status: { kind: "succeeded" },
+  packages: {},
+  logs: {
+    environment:
+      "Using Python\nResolving dependencies\nDownloading numpy\nInstalled 24 packages\n",
+  },
+};
+
+function restorePreparation(
+  store: ReturnType<typeof createStore>,
+  operation: EnvironmentOperation,
+) {
+  store.set(alertAtom, (state) => ({
+    ...state,
+    environments: {
+      ...state.environments,
+      kernel: { restart_required: false, operations: [operation] },
+    },
+  }));
+}
+
+it("restores separate compact previews and keeps expanded output open through snapshots and live updates", () => {
+  const store = createStore();
+  restorePreparation(store, preparation);
+  store.set(startupProgressAtom, {
+    phase: "starting-kernel",
+    logs: "Using Python\nLoading runtime\nLaunching kernel\nConnecting\n",
+    log_mode: "replace",
+  });
+  render(
+    <Provider store={store}>
+      <StartupProgress notice={notice} surface="sidebar" />
+    </Provider>,
+    { wrapper: TooltipProvider },
+  );
+  const prepareButton = screen.getByRole("button", {
+    name: "Expand environment preparation output",
+  });
+  expect(prepareButton).toHaveTextContent("Installed 24 packages");
+  expect(prepareButton).toHaveTextContent("Resolving dependencies");
+  expect(prepareButton).toHaveTextContent("Downloading numpy");
+  expect(prepareButton).not.toHaveTextContent("Using Python");
+  const kernelButton = screen.getByRole("button", {
+    name: "Expand kernel startup output",
+  });
+  expect(kernelButton).toHaveAttribute("aria-expanded", "false");
+  expect(kernelButton).toHaveTextContent(
+    "Loading runtimeLaunching kernelConnecting",
+  );
+  expect(kernelButton).not.toHaveTextContent("Using Python");
+
+  fireEvent.click(prepareButton);
+  const prepareOutput = screen.getByLabelText("environment preparation output");
+  expect(prepareOutput).toBeVisible();
+  expect(prepareOutput.textContent).toBe(preparation.logs.environment);
+  act(() => restorePreparation(store, { ...preparation }));
+  expect(prepareOutput).toBeVisible();
+
+  fireEvent.click(kernelButton);
+  act(() =>
+    store.set(startupProgressAtom, {
+      phase: "starting-kernel",
+      logs: "Kernel connected\n",
+      log_mode: "append",
+    }),
+  );
+  const output = screen.getByLabelText("kernel startup output");
+  expect(output).toBeVisible();
+  expect(output.textContent).toBe(
+    "Using Python\nLoading runtime\nLaunching kernel\nConnecting\nKernel connected\n",
+  );
+  expect(prepareOutput.textContent).toBe(preparation.logs.environment);
+});
+
+it("starts a new preparation compact and offers no disclosure before output arrives", () => {
+  const store = createStore();
+  const { rerender } = render(
+    <Provider store={store}>
+      <StartupProgress
+        notice={{ ...notice, phase: "preparing-environment" }}
+        surface="sidebar"
+      />
+    </Provider>,
+    { wrapper: TooltipProvider },
+  );
+  expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  act(() => restorePreparation(store, preparation));
+  fireEvent.click(screen.getByRole("button", { name: /Expand environment/ }));
+  act(() =>
+    restorePreparation(store, {
+      ...preparation,
+      operation_id: "prepare-2",
+      status: { kind: "running" },
+      logs: { environment: "Trying again\n" },
+    }),
+  );
+  expect(
+    screen.getByRole("button", { name: /Expand environment/ }),
+  ).toHaveTextContent("Trying again");
+  expect(
+    screen.getByLabelText("environment preparation output"),
+  ).not.toBeVisible();
+
+  rerender(
+    <Provider store={store}>
+      <StartupProgress notice={notice} surface="notebook" />
+    </Provider>,
+  );
+  expect(screen.queryByRole("button")).not.toBeInTheDocument();
+});
+
+it("preserves reading position and selected text while output streams, then resumes following", () => {
+  const logs = "Resolving dependencies\nDownloading numpy\n";
+  const { rerender } = render(
+    <StartupOutput logs={logs} label="preparation output" />,
+    { wrapper: TooltipProvider },
+  );
+  fireEvent.click(
+    screen.getByRole("button", { name: "Expand preparation output" }),
+  );
+  const output = screen.getByLabelText("preparation output");
+  Object.defineProperties(output, {
+    scrollHeight: { value: 1000 },
+    clientHeight: { value: 200 },
+  });
+  fireEvent.scroll(output, { target: { scrollTop: 100 } });
+  expect(screen.getByRole("button", { name: "Jump to latest" })).toBeVisible();
+
+  const selection = document.getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(output);
+  act(() => {
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    document.dispatchEvent(new Event("selectionchange"));
+  });
+  rerender(
+    <StartupOutput
+      logs={`${logs}Downloaded numpy\n`}
+      label="preparation output"
+    />,
+  );
+  expect(selection?.toString()).toBe(logs);
+  expect(output.scrollTop).toBe(100);
+  expect(output.textContent).toBe(`${logs}Downloaded numpy\n`);
+
+  fireEvent.click(screen.getByRole("button", { name: "Jump to latest" }));
+  expect(selection?.isCollapsed).toBe(true);
+  expect(output.scrollTop).toBeGreaterThan(100);
+  expect(
+    screen.queryByRole("button", { name: "Jump to latest" }),
+  ).not.toBeInTheDocument();
+
+  fireEvent.click(
+    screen.getByRole("button", { name: "Collapse preparation output" }),
+  );
+  expect(output).not.toBeVisible();
+});

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

@@ -1,20 +1,20 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { useAtomValue } from "jotai";
-import { AlertCircleIcon, ArrowRightIcon } from "lucide-react";
+import { ArrowRightIcon, ChevronRightIcon } 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 { useConnectionNotice } from "@/core/network/useConnectionNotice";
+import { sandboxAtom } from "@/core/packages/sandbox-state";
 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";
+import { ConnectionStatusIcon, StartupProgress } from "./startup-progress";
 
 export const ConnectionNotice = ({
   appConfig,
@@ -23,28 +23,61 @@ export const ConnectionNotice = ({
   appConfig: AppConfig;
   onRetry: () => void;
 }) => {
-  const notice = useAtomValue(connectionNoticeAtom);
+  const notice = useConnectionNotice();
   const connection = useAtomValue(connectionAtom);
   const hasCells = useAtomValue(hasCellsAtom);
+  const sandbox = useAtomValue(sandboxAtom);
   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")
-  ) {
+  const reconnecting =
+    connection.state === WebSocketState.CONNECTING &&
+    connection.phase === "reconnecting";
+
+  if (sandbox?.backend && hasCells) {
+    const title =
+      notice?.ready && notice.kind === "startup" ? "Ready" : notice?.title;
+    return (
+      <VerticalLayoutWrapper
+        appConfig={appConfig}
+        // Reserve the status row and gutter so completion never shifts cells.
+        className="shrink-0 h-12 pb-0 sm:pb-0 print:hidden"
+        innerClassName="pb-0 sm:pb-0 pr-4"
+      >
+        {notice && !reconnecting && (
+          <section aria-label="Notebook startup">
+            <button
+              type="button"
+              onClick={() => openApplication("packages")}
+              aria-label={`${title} Open Packages`}
+              aria-expanded={packagesOpen}
+              className="flex h-6 items-center gap-2 whitespace-nowrap text-xs text-muted-foreground hover:text-foreground rounded focus-visible:outline-2 focus-visible:outline-ring"
+            >
+              <ConnectionStatusIcon notice={notice} />
+              <output>{title}</output>
+              <ChevronRightIcon className="size-3" aria-hidden={true} />
+            </button>
+          </section>
+        )}
+      </VerticalLayoutWrapper>
+    );
+  }
+
+  if (!notice || (hasCells && reconnecting)) {
     return null;
   }
 
+  const showSteps =
+    notice.sandbox &&
+    notice.kind === "startup" &&
+    (notice.ready ||
+      notice.phase === "preparing-environment" ||
+      notice.phase === "starting-kernel");
   return (
     <VerticalLayoutWrapper
       appConfig={appConfig}
@@ -57,60 +90,73 @@ export const ConnectionNotice = ({
           "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",
+            : "max-w-md 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}
-            />
+        {showSteps ? (
+          <StartupProgress notice={notice} surface="notebook" />
+        ) : (
+          <div role="status" className="flex items-center gap-2.5">
+            <ConnectionStatusIcon notice={notice} />
+            <h2
+              className={cn(
+                "text-base",
+                notice.pending || notice.ready
+                  ? "font-normal text-foreground"
+                  : "font-medium text-(--red-11)",
+              )}
+            >
+              {notice.title}
+            </h2>
+          </div>
+        )}
+        <div className={showSteps ? "mt-8" : "ml-6.5"}>
+          {!showSteps && (
+            <p
+              className={cn(
+                "mt-3 text-sm leading-7",
+                !notice.pending && "text-foreground",
+              )}
+            >
+              {notice.description}
+            </p>
           )}
-          <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>
+          <div
+            className={cn(
+              "flex flex-wrap items-center gap-x-6 gap-y-3",
+              showSteps ? "border-t border-border/60 pt-4" : "mt-5",
             )}
+          >
+            {!notice.ready &&
+              !packagesOpen &&
+              (notice.sandbox || notice.pending) && (
+                <Button
+                  variant="text"
+                  size="xs"
+                  className={cn(
+                    "p-0 text-xs gap-1.5",
+                    showSteps ? "h-6" : "h-auto",
+                  )}
+                  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 />}
+            {notice.pending && (
+              <div className={showSteps ? "ml-auto" : undefined}>
+                <StartupElapsedTime />
+              </div>
+            )}
           </div>
         </div>
       </section>