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

package/src/components/editor/alerts/startup-output.tsx

@@ -0,0 +1,173 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { ArrowDownIcon, ChevronUpIcon } from "lucide-react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { CopyClipboardIcon } from "@/components/icons/copy-icon";
+import { useEventListener } from "@/hooks/useEventListener";
+import { cn } from "@/utils/cn";
+
+function hasSelection(element: HTMLElement) {
+  const selection = element.ownerDocument.getSelection();
+  return (
+    selection && !selection.isCollapsed && selection.containsNode(element, true)
+  );
+}
+
+export type StartupOutputState = "running" | "succeeded" | "failed";
+
+export function StartupOutput({
+  logs,
+  label,
+  state = "running",
+}: {
+  logs: string;
+  label: string;
+  /** Running keeps the newest line bright; failed keeps all of it bright. */
+  state?: StartupOutputState;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [following, setFollowing] = useState(true);
+  const outputRef = useRef<HTMLPreElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const outputId = useId();
+  const lines = logs.trimEnd().split(/\r?\n/);
+  const emphasis =
+    state === "failed"
+      ? "text-foreground"
+      : state === "running"
+        ? "last:text-foreground"
+        : undefined;
+
+  useEventListener(outputRef, "keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setExpanded(false);
+      toggleRef.current?.focus();
+    }
+  });
+
+  useEventListener(document, "selectionchange", () => {
+    if (outputRef.current && hasSelection(outputRef.current)) {
+      setFollowing(false);
+    }
+  });
+
+  useLayoutEffect(() => {
+    const output = outputRef.current;
+    if (!output) {
+      return;
+    }
+    const previous = output.textContent ?? "";
+    // Append without replacing selected text nodes as more output arrives.
+    if (logs.startsWith(previous)) {
+      if (logs.length > previous.length) {
+        output.append(document.createTextNode(logs.slice(previous.length)));
+      }
+    } else {
+      output.textContent = logs;
+    }
+    if (expanded && following && !hasSelection(output)) {
+      output.scrollTop = output.scrollHeight;
+    }
+  }, [logs, expanded, following]);
+
+  if (!logs.trim()) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative mt-2.5 min-w-0 contain-inline-size rounded text-muted-foreground",
+        // One surface: it washes on hover and the wash stays while open.
+        expanded ? "bg-muted/40" : "hover:bg-muted/40",
+      )}
+    >
+      <div className={cn(expanded && "flex items-center pr-1")}>
+        <button
+          ref={toggleRef}
+          type="button"
+          aria-label={`${expanded ? "Collapse" : "Expand"} ${label}`}
+          aria-expanded={expanded}
+          aria-controls={outputId}
+          title={expanded ? "Collapse output" : "Expand output"}
+          className={cn(
+            "flex w-full min-w-0 rounded px-2.5 py-1 text-left focus-visible:outline-2 focus-visible:outline-ring",
+            expanded &&
+              "items-center justify-between gap-2 text-xs hover:text-foreground",
+          )}
+          onClick={() => {
+            setExpanded(!expanded);
+            setFollowing(true);
+          }}
+        >
+          {expanded ? (
+            <>
+              <span className="leading-5">Logs</span>
+              <ChevronUpIcon className="size-3.5 shrink-0" aria-hidden={true} />
+            </>
+          ) : (
+            <span
+              className={cn(
+                "min-w-0 flex-1 font-mono text-[11px] leading-5",
+                // Fade the top of the tail so it reads as a stream, not as
+                // greyed-out prose.
+                lines.length > 1 &&
+                  "[mask-image:linear-gradient(to_bottom,transparent,#000_70%)]",
+              )}
+              aria-hidden={true}
+            >
+              {lines.slice(-3).map((line, index) => (
+                <span key={index} className={cn("block truncate", emphasis)}>
+                  {line || "\u00A0"}
+                </span>
+              ))}
+            </span>
+          )}
+        </button>
+        {expanded && (
+          <CopyClipboardIcon
+            value={logs}
+            ariaLabel={`Copy ${label}`}
+            tooltip="Copy output"
+            className="size-3.5"
+            buttonClassName="size-6 shrink-0 flex items-center justify-center rounded hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring"
+          />
+        )}
+      </div>
+      <pre
+        id={outputId}
+        ref={outputRef}
+        hidden={!expanded}
+        tabIndex={0}
+        aria-label={label}
+        className="max-h-48 overflow-auto overscroll-contain whitespace-pre px-2.5 pb-2.5 font-mono text-[11px] leading-5 scrollbar-thin focus-visible:outline-2 focus-visible:outline-ring"
+        onScroll={(event) => {
+          const output = event.currentTarget;
+          setFollowing(
+            !hasSelection(output) &&
+              output.scrollHeight - output.scrollTop - output.clientHeight < 12,
+          );
+        }}
+      />
+      {expanded && !following && (
+        <button
+          type="button"
+          className="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1 whitespace-nowrap rounded-full border bg-background px-2 py-1 text-xs shadow-xs hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring"
+          onClick={() => {
+            const output = outputRef.current;
+            if (output) {
+              if (hasSelection(output)) {
+                output.ownerDocument.getSelection()?.removeAllRanges();
+              }
+              output.focus({ preventScroll: true });
+            }
+            setFollowing(true);
+          }}
+        >
+          <ArrowDownIcon className="size-3" aria-hidden={true} />
+          Jump to latest
+        </button>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,204 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtomValue } from "jotai";
+import { AlertCircleIcon, CheckIcon, CircleIcon } from "lucide-react";
+import { Spinner } from "@/components/icons/spinner";
+import { preparationAtom } from "@/core/packages/sandbox-state";
+import { startupProgressAtom } from "@/core/network/connection";
+import type { DisplayConnectionNotice } from "@/core/network/useConnectionNotice";
+import { cn } from "@/utils/cn";
+import { StartupOutput, type StartupOutputState } from "./startup-output";
+
+const STEPS = [
+  {
+    phase: "preparing-environment",
+    titles: {
+      complete: "Environment prepared",
+      failed: "Environment setup failed",
+      pending: "Preparing environment",
+      waiting: "Prepare environment",
+    },
+    descriptions: {
+      complete: "Python and dependencies are available.",
+      failed: "Setup could not finish.",
+      pending: "Set up Python and dependencies.",
+      waiting: "Set up Python and dependencies.",
+    },
+  },
+  {
+    phase: "starting-kernel",
+    titles: {
+      complete: "Kernel started",
+      failed: "Kernel failed to start",
+      pending: "Starting kernel",
+      waiting: "Start kernel",
+    },
+    descriptions: {
+      complete: "The notebook is ready to run.",
+      failed: "The kernel could not connect.",
+      pending: "Connecting to this notebook.",
+      waiting: "After the environment is ready.",
+    },
+  },
+] as const;
+
+interface StartupProgressProps {
+  notice: DisplayConnectionNotice;
+  surface: "notebook" | "sidebar";
+}
+
+function StartupStepOutput({
+  phase,
+  state,
+}: {
+  phase: (typeof STEPS)[number]["phase"];
+  state: StartupOutputState;
+}) {
+  const preparation = useAtomValue(preparationAtom);
+  const progress = useAtomValue(startupProgressAtom);
+  const preparing = phase === "preparing-environment";
+  const logs = preparing
+    ? (preparation?.logs.environment ?? "")
+    : progress?.phase === phase
+      ? progress.logs
+      : "";
+
+  return (
+    <StartupOutput
+      key={preparation?.operation_id}
+      logs={logs}
+      state={state}
+      label={
+        preparing ? "environment preparation output" : "kernel startup output"
+      }
+    />
+  );
+}
+
+function StartupSummary({ notice }: { notice: DisplayConnectionNotice }) {
+  return (
+    <header>
+      <output className="sr-only">{notice.title}</output>
+      <h2 className="text-foreground font-heading text-2xl leading-8 tracking-tight font-normal">
+        {notice.ready
+          ? "Your notebook is ready"
+          : "Getting your notebook ready"}
+      </h2>
+      <p className="text-muted-foreground mt-3 text-sm leading-6">
+        {notice.ready
+          ? "Your environment and kernel are ready."
+          : notice.pending
+            ? "Preparing Python and dependencies for this notebook."
+            : "Review the setup details below to continue."}
+      </p>
+    </header>
+  );
+}
+
+export function ConnectionStatusIcon({
+  notice,
+}: {
+  notice: DisplayConnectionNotice;
+}) {
+  if (notice.ready) {
+    return (
+      <CheckIcon
+        className="size-4 shrink-0 text-(--grass-11)"
+        aria-hidden={true}
+      />
+    );
+  }
+  if (notice.pending) {
+    return (
+      <Spinner
+        className="size-4 shrink-0 motion-reduce:animate-none"
+        aria-hidden={true}
+      />
+    );
+  }
+  return (
+    <AlertCircleIcon
+      className="size-4 shrink-0 text-(--red-11)"
+      aria-hidden={true}
+    />
+  );
+}
+
+export function StartupProgress({ notice, surface }: StartupProgressProps) {
+  return (
+    <>
+      {surface === "notebook" && <StartupSummary notice={notice} />}
+      <ol
+        className={cn("space-y-6", surface === "notebook" && "mt-8")}
+        aria-label="Notebook startup stages"
+      >
+        {STEPS.map(({ phase, titles, descriptions }, index) => {
+          const complete =
+            notice.ready || (index === 0 && notice.phase === "starting-kernel");
+          const active = !notice.ready && notice.phase === phase;
+          const failed = active && !notice.pending;
+          const state = complete
+            ? "complete"
+            : failed
+              ? "failed"
+              : active
+                ? "pending"
+                : "waiting";
+          return (
+            <li
+              key={phase}
+              aria-current={active ? "step" : undefined}
+              className="relative flex items-start gap-3"
+            >
+              {index === 0 && (
+                <span
+                  aria-hidden={true}
+                  className="absolute left-2 top-6 -bottom-4 border-l border-border"
+                />
+              )}
+              <span
+                className={cn(
+                  "mt-0.5",
+                  complete ? "text-(--grass-11)" : "text-muted-foreground",
+                )}
+              >
+                {complete ? (
+                  <CheckIcon className="size-4" aria-hidden={true} />
+                ) : active ? (
+                  <ConnectionStatusIcon notice={notice} />
+                ) : (
+                  <CircleIcon
+                    className="size-4 text-muted-foreground/50"
+                    aria-hidden={true}
+                  />
+                )}
+              </span>
+              <div className="min-w-0 flex-1">
+                <div
+                  className={cn(
+                    "text-sm",
+                    failed
+                      ? "text-(--red-11)"
+                      : complete || active
+                        ? "text-foreground"
+                        : "text-muted-foreground",
+                  )}
+                >
+                  {titles[state]}
+                </div>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {descriptions[state]}
+                </p>
+                {surface === "sidebar" && (
+                  <StartupStepOutput
+                    phase={phase}
+                    state={failed ? "failed" : active ? "running" : "succeeded"}
+                  />
+                )}
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+    </>
+  );
+}

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

@@ -12,6 +12,7 @@ import { Provider } from "jotai";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import type {
   DependencyTreeNode,
@@ -21,7 +22,10 @@ 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 { WebSocketState } from "@/core/websocket/types";
 import PackagesPanel from "../packages-panel";
+import { PanelSectionProvider } from "../panel-context";
+import { SandboxToggle } from "../sandbox-toggle";
 
 const { openSettings } = vi.hoisted(() => ({
   openSettings: vi.fn(),
@@ -67,7 +71,8 @@ function renderPanel(
       ? { backend: context.backend, manifest: "", filename: "notebook.py" }
       : null,
   );
-  store.set(sandboxSyncAtom, { pending: false, error: null });
+  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(sandboxSyncAtom, { kind: "succeeded" });
   const getPackageList = vi.fn().mockResolvedValue({ packages: [] });
   const client = MockRequestClient.create({
     getPackageList,
@@ -81,7 +86,10 @@ function renderPanel(
     ...render(
       <Provider store={store}>
         <TooltipProvider>
-          <PackagesPanel />
+          <PanelSectionProvider value="sidebar">
+            <SandboxToggle section="sidebar" />
+            <PackagesPanel />
+          </PanelSectionProvider>
         </TooltipProvider>
       </Provider>,
     ),
@@ -178,7 +186,8 @@ it("refreshes an open panel when a package is installed elsewhere, after install
     manifest: "",
     filename: "notebook.py",
   });
-  store.set(sandboxSyncAtom, { pending: false, error: null });
+  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(sandboxSyncAtom, { kind: "succeeded" });
   store.set(requestClientAtom, withPackageInvalidation(client));
   function InstallElsewhere() {
     const { handleInstallPackages } = useInstallPackages();
@@ -191,7 +200,10 @@ it("refreshes an open panel when a package is installed elsewhere, after install
   render(
     <Provider store={store}>
       <TooltipProvider>
-        <PackagesPanel />
+        <PanelSectionProvider value="sidebar">
+          <SandboxToggle section="sidebar" />
+          <PackagesPanel />
+        </PanelSectionProvider>
         <InstallElsewhere />
       </TooltipProvider>
     </Provider>,
@@ -208,6 +220,43 @@ it("refreshes an open panel when a package is installed elsewhere, after install
   expect(await screen.findByText("polars")).toBeInTheDocument();
 });
 
+it("keeps packages and the install draft visible while blocking mutations during sync", async () => {
+  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  renderPanel({ kind: "sandbox", backend: "pixi" }, populatedTree);
+  await screen.findByRole("treeitem", { name: /polars/ });
+  const input = screen.getByPlaceholderText("Add packages to pixi sandbox...");
+  fireEvent.change(input, { target: { value: "altair" } });
+  act(() => store.set(sandboxSyncAtom, { kind: "running" }));
+  const row = screen.getByRole("treeitem", { name: /polars/ });
+  expect(
+    screen.getByPlaceholderText("Add packages to pixi sandbox..."),
+  ).toBeDisabled();
+  expect(within(row).getByRole("button", { name: "Remove" })).toBeDisabled();
+  expect(
+    screen.queryByRole("list", { name: "Notebook startup stages" }),
+  ).not.toBeInTheDocument();
+  const toggle = screen.getByRole("button", { name: "pixi sandbox" });
+  fireEvent.click(toggle);
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  act(() =>
+    store.set(sandboxSyncAtom, {
+      kind: "failed",
+      error: "Could not resolve dependencies",
+    }),
+  );
+  expect(screen.getByRole("treeitem", { name: /polars/ })).toBeInTheDocument();
+  expect(screen.getByLabelText("Error details")).toHaveTextContent(
+    "Could not resolve dependencies",
+  );
+  expect(toggle).toHaveAttribute("aria-expanded", "true");
+  expect(screen.getByRole("button", { name: "Retry sync" })).toBeVisible();
+  const restoredInput = screen.getByPlaceholderText(
+    "Add packages to pixi sandbox...",
+  );
+  expect(restoredInput).toHaveValue("altair");
+  expect(restoredInput).toBeEnabled();
+});
+
 it.each(["uv", "pixi", "list"] as const)(
   "allows upgrading marimo but not removing it in the %s view",
   async (view) => {