@marimo-team/islands 0.24.3-dev9 → 0.25.1-dev1

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/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,186 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtomValue } from "jotai";
+import { ArrowRightIcon, ChevronRightIcon } from "lucide-react";
+import { useState } from "react";
+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 { useConnectionNotice } from "@/core/network/useConnectionNotice";
+import { sandboxAtom } from "@/core/packages/sandbox-state";
+import { WebSocketState } from "@/core/websocket/types";
+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,
+  onRetry,
+}: {
+  appConfig: AppConfig;
+  onRetry: () => void;
+}) => {
+  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 { openApplication } = useChromeActions();
+
+  // Reconnection uses the footer indicator while existing cells stay visible.
+  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}
+      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-md mx-auto mt-16 sm:mt-24 px-4",
+          hasCells && !notice.pending && "border-(--red-7)",
+        )}
+      >
+        {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>
+          )}
+          {!notice.sandbox && notice.error && (
+            <SandboxErrorOutput error={notice.error} />
+          )}
+          <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 && (
+              <div className={showSteps ? "ml-auto" : undefined}>
+                <StartupElapsedTime />
+              </div>
+            )}
+          </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>
+  );
+}