@marimo-team/frontend 0.25.2-dev9 → 0.25.2-dev90

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

@@ -1,41 +1,44 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { useAtomValue } from "jotai";
-import { AlertCircleIcon, CheckIcon, CircleIcon } from "lucide-react";
-import { Spinner } from "@/components/icons/spinner";
+import {
+  ProgressStages,
+  ProgressStatusIcon,
+  type ProgressStage,
+  type ProgressState,
+} from "@/components/ui/progress-stages";
 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";
+import { StartupOutput } from "./startup-output";
 
 const STEPS = [
   {
     phase: "preparing-environment",
     titles: {
-      complete: "Environment prepared",
+      succeeded: "Environment prepared",
       failed: "Environment setup failed",
-      pending: "Preparing environment",
+      running: "Preparing environment",
       waiting: "Prepare environment",
     },
     descriptions: {
-      complete: "Python and dependencies are available.",
+      succeeded: "Python and dependencies are available.",
       failed: "Setup could not finish.",
-      pending: "Set up Python and dependencies.",
+      running: "Set up Python and dependencies.",
       waiting: "Set up Python and dependencies.",
     },
   },
   {
     phase: "starting-kernel",
     titles: {
-      complete: "Kernel started",
+      succeeded: "Kernel started",
       failed: "Kernel failed to start",
-      pending: "Starting kernel",
+      running: "Starting kernel",
       waiting: "Start kernel",
     },
     descriptions: {
-      complete: "The notebook is ready to run.",
+      succeeded: "The notebook is ready to run.",
       failed: "The kernel could not connect.",
-      pending: "Connecting to this notebook.",
+      running: "Connecting to this notebook.",
       waiting: "After the environment is ready.",
     },
   },
@@ -46,31 +49,13 @@ interface StartupProgressProps {
   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
-      : "";
-
+export function hasStartupStages(notice: DisplayConnectionNotice): boolean {
   return (
-    <StartupOutput
-      key={preparation?.operation_id}
-      logs={logs}
-      state={state}
-      label={
-        preparing ? "environment preparation output" : "kernel startup output"
-      }
-    />
+    notice.kind === "startup" &&
+    (!notice.sandbox ||
+      notice.ready ||
+      notice.phase === "preparing-environment" ||
+      notice.phase === "starting-kernel")
   );
 }
 
@@ -85,9 +70,13 @@ function StartupSummary({ notice }: { notice: DisplayConnectionNotice }) {
       </h2>
       <p className="text-muted-foreground mt-3 text-sm leading-6">
         {notice.ready
-          ? "Your environment and kernel are ready."
+          ? notice.sandbox
+            ? "Your environment and kernel are ready."
+            : "Your kernel is ready."
           : notice.pending
-            ? "Preparing Python and dependencies for this notebook."
+            ? notice.sandbox
+              ? "Preparing Python and dependencies for this notebook."
+              : "Connecting to this notebook’s Python kernel."
             : "Review the setup details below to continue."}
       </p>
     </header>
@@ -99,106 +88,61 @@ export function ConnectionStatusIcon({
 }: {
   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}
+    <ProgressStatusIcon
+      state={notice.ready ? "succeeded" : notice.pending ? "running" : "failed"}
     />
   );
 }
 
 export function StartupProgress({ notice, surface }: StartupProgressProps) {
+  const preparation = useAtomValue(preparationAtom);
+  const progress = useAtomValue(startupProgressAtom);
+  const activePhase = notice.sandbox ? notice.phase : "starting-kernel";
+  const stages: ProgressStage[] = STEPS.filter(
+    (step) => notice.sandbox || step.phase === "starting-kernel",
+  ).map(({ phase, titles, descriptions }) => {
+    const preparing = phase === "preparing-environment";
+    const state: ProgressState =
+      notice.ready || (preparing && activePhase === "starting-kernel")
+        ? "succeeded"
+        : activePhase === phase
+          ? notice.pending
+            ? "running"
+            : "failed"
+          : "waiting";
+    const logs = preparing
+      ? (preparation?.logs.environment ?? "")
+      : progress?.phase === phase
+        ? progress.logs
+        : "";
+    return {
+      id: phase,
+      state,
+      title: titles[state],
+      description: descriptions[state],
+      details: surface === "sidebar" && (
+        <StartupOutput
+          key={preparation?.operation_id}
+          logs={logs}
+          state={state === "waiting" ? "succeeded" : state}
+          label={
+            preparing
+              ? "environment preparation output"
+              : "kernel startup output"
+          }
+        />
+      ),
+    };
+  });
   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>
+      <ProgressStages
+        stages={stages}
+        label="Notebook startup stages"
+        className={surface === "notebook" ? "mt-8" : undefined}
+      />
     </>
   );
 }

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

@@ -7,7 +7,7 @@ import { PyodideLoader } from "@/core/wasm/PyodideLoader";
 import {
   type ConnectionStatus,
   WebSocketClosedReason,
-  WebSocketState,
+  ConnectionState,
 } from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 import { DynamicFavicon } from "./dynamic-favicon";
@@ -47,7 +47,7 @@ export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
             data-connection-state={connectionState}
             className={cn(
               "mathjax_ignore",
-              connection.state === WebSocketState.CLOSED &&
+              connection.state === ConnectionState.CLOSED &&
                 connection.code !==
                   WebSocketClosedReason.KERNEL_STARTUP_ERROR &&
                 "disconnected",

package/src/components/editor/boundary/__tests__/ErrorBoundary.test.tsx

@@ -14,7 +14,7 @@ import { requestClientAtom } from "@/core/network/requests";
 import type { EnvironmentInfo } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { ErrorBoundary } from "../ErrorBoundary";
 
 vi.mock("@/utils/copy", () => ({
@@ -144,7 +144,7 @@ function resetSharedState() {
   store.set(requestClientAtom, null);
   store.set(notebookAtom, initialNotebookState());
   store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(filenameAtom, "/project/example.py");
 }
 

package/src/components/editor/cell/CreateCellButton.tsx

@@ -17,7 +17,7 @@ import {
   getConnectionTooltip,
   isAppInteractionDisabled,
 } from "@/core/websocket/connection-utils";
-import type { WebSocketState } from "@/core/websocket/types";
+import type { ConnectionState } from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 import { Tooltip } from "../../ui/tooltip";
 import { MarkdownIcon, PythonIcon } from "./code/icons";
@@ -28,7 +28,7 @@ export const CreateCellButton = ({
   tooltipContent,
   oneClickShortcut,
 }: {
-  connectionState: WebSocketState;
+  connectionState: ConnectionState;
   tooltipContent: React.ReactNode;
   onClick: ((opts: { code: string; hideCode?: boolean }) => void) | undefined;
   oneClickShortcut: "shift" | "mod";

package/src/components/editor/cell/DeleteButton.tsx

@@ -6,7 +6,7 @@ import {
   getConnectionTooltip,
   isAppInteractionDisabled,
 } from "@/core/websocket/connection-utils";
-import type { WebSocketState } from "@/core/websocket/types";
+import type { ConnectionState } from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { Button } from "../../ui/button";
@@ -14,7 +14,7 @@ import { Tooltip } from "../../ui/tooltip";
 
 export const DeleteButton = (props: {
   status: RuntimeState;
-  connectionState: WebSocketState;
+  connectionState: ConnectionState;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }): JSX.Element => {
   const { status, connectionState, onClick } = props;

package/src/components/editor/cell/RunButton.tsx

@@ -6,7 +6,7 @@ import {
   getConnectionTooltip,
   isAppInteractionDisabled,
 } from "@/core/websocket/connection-utils";
-import type { WebSocketState } from "@/core/websocket/types";
+import type { ConnectionState } from "@/core/websocket/types";
 import { renderShortcut } from "../../shortcuts/renderShortcut";
 import { ToolbarItem } from "./toolbar";
 
@@ -16,7 +16,7 @@ function computeColor({
   loading,
   inactive,
 }: {
-  connectionState: WebSocketState;
+  connectionState: ConnectionState;
   needsRun: boolean;
   loading: boolean;
   inactive: boolean;
@@ -37,7 +37,7 @@ export const RunButton = (props: {
   edited: boolean;
   status: RuntimeState;
   needsRun: boolean;
-  connectionState: WebSocketState;
+  connectionState: ConnectionState;
   config: CellConfig;
   onClick?: () => void;
 }): JSX.Element => {

package/src/components/editor/cell/StopButton.tsx

@@ -4,7 +4,7 @@ import type { JSX } from "react";
 import { useRequestClient } from "@/core/network/requests";
 import type { RuntimeState } from "@/core/network/types";
 import { isAppInteractionDisabled } from "@/core/websocket/connection-utils";
-import type { WebSocketState } from "@/core/websocket/types";
+import type { ConnectionState } from "@/core/websocket/types";
 import { Functions } from "@/utils/functions";
 import { renderShortcut } from "../../shortcuts/renderShortcut";
 import { ToolbarItem } from "./toolbar";
@@ -12,7 +12,7 @@ import { useShouldShowInterrupt } from "./useShouldShowInterrupt";
 
 export const StopButton = (props: {
   status: RuntimeState;
-  connectionState: WebSocketState;
+  connectionState: ConnectionState;
 }): JSX.Element => {
   const { connectionState, status } = props;
   const { sendInterrupt } = useRequestClient();

package/src/components/editor/chrome/components/__tests__/feedback-button.test.tsx

@@ -14,7 +14,7 @@ import { requestClientAtom } from "@/core/network/requests";
 import type { EnvironmentInfo } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import * as copyModule from "@/utils/copy";
 import { FeedbackModal } from "../feedback-button";
 
@@ -53,7 +53,7 @@ describe("FeedbackModal issue reporting", () => {
     localStorage.clear();
     store.set(requestClientAtom, MockRequestClient.create());
     store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
-    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    store.set(connectionAtom, { state: ConnectionState.OPEN });
     store.set(filenameAtom, "/project/example.py");
   });
 
@@ -156,7 +156,7 @@ describe("FeedbackModal issue reporting", () => {
   });
 
   it("disables include code and explains why when disconnected", async () => {
-    store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+    store.set(connectionAtom, { state: ConnectionState.CONNECTING });
     store.set(
       requestClientAtom,
       MockRequestClient.create({
@@ -244,7 +244,7 @@ describe("FeedbackModal issue reporting", () => {
       "marimo:issue-report:include-code",
       JSON.stringify(true),
     );
-    store.set(connectionAtom, { state: WebSocketState.CONNECTING });
+    store.set(connectionAtom, { state: ConnectionState.CONNECTING });
     store.set(requestClientAtom, null);
     render(<FeedbackModal onClose={vi.fn()} />, { wrapper });
 

package/src/components/editor/chrome/components/feedback-button.tsx

@@ -39,7 +39,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { cn } from "@/utils/cn";
@@ -78,7 +78,7 @@ function getNotebookSourceUnavailableReason(args: {
   hasRequestClient: boolean;
   filename: string | null;
   codeAvailable: boolean;
-  connectionState: WebSocketState;
+  connectionState: ConnectionState;
 }): string | undefined {
   if (!args.hasRequestClient) {
     return "Notebook source is unavailable.";
@@ -89,7 +89,7 @@ function getNotebookSourceUnavailableReason(args: {
   if (!args.codeAvailable) {
     return "Notebook source is hidden in this view.";
   }
-  if (args.connectionState !== WebSocketState.OPEN) {
+  if (args.connectionState !== ConnectionState.OPEN) {
     return "Connect the notebook to include its source.";
   }
   return undefined;

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

@@ -22,10 +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 { ConnectionState } from "@/core/websocket/types";
 import PackagesPanel from "../packages-panel";
 import { PanelSectionProvider } from "../panel-context";
-import { SandboxToggle } from "../sandbox-toggle";
+import { RuntimeStatusToggle } from "../runtime-status-toggle";
 
 const { openSettings } = vi.hoisted(() => ({
   openSettings: vi.fn(),
@@ -71,7 +71,7 @@ function renderPanel(
       ? { backend: context.backend, manifest: "", filename: "notebook.py" }
       : null,
   );
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(sandboxSyncAtom, { kind: "succeeded" });
   const getPackageList = vi.fn().mockResolvedValue({ packages: [] });
   const client = MockRequestClient.create({
@@ -87,7 +87,7 @@ function renderPanel(
       <Provider store={store}>
         <TooltipProvider>
           <PanelSectionProvider value="sidebar">
-            <SandboxToggle section="sidebar" />
+            <RuntimeStatusToggle section="sidebar" />
             <PackagesPanel />
           </PanelSectionProvider>
         </TooltipProvider>
@@ -186,7 +186,7 @@ it("refreshes an open panel when a package is installed elsewhere, after install
     manifest: "",
     filename: "notebook.py",
   });
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(sandboxSyncAtom, { kind: "succeeded" });
   store.set(requestClientAtom, withPackageInvalidation(client));
   function InstallElsewhere() {
@@ -201,7 +201,7 @@ it("refreshes an open panel when a package is installed elsewhere, after install
     <Provider store={store}>
       <TooltipProvider>
         <PanelSectionProvider value="sidebar">
-          <SandboxToggle section="sidebar" />
+          <RuntimeStatusToggle section="sidebar" />
           <PackagesPanel />
         </PanelSectionProvider>
         <InstallElsewhere />
@@ -221,7 +221,7 @@ it("refreshes an open panel when a package is installed elsewhere, after install
 });
 
 it("keeps packages and the install draft visible while blocking mutations during sync", async () => {
-  store.set(connectionAtom, { state: WebSocketState.OPEN });
+  store.set(connectionAtom, { state: ConnectionState.OPEN });
   renderPanel({ kind: "sandbox", backend: "pixi" }, populatedTree);
   await screen.findByRole("treeitem", { name: /polars/ });
   const input = screen.getByPlaceholderText("Add packages to pixi sandbox...");
@@ -235,7 +235,7 @@ it("keeps packages and the install draft visible while blocking mutations during
   expect(
     screen.queryByRole("list", { name: "Notebook startup stages" }),
   ).not.toBeInTheDocument();
-  const toggle = screen.getByRole("button", { name: "pixi sandbox" });
+  const toggle = screen.getByRole("button", { name: /^pixi sandbox, / });
   fireEvent.click(toggle);
   expect(toggle).toHaveAttribute("aria-expanded", "false");
   act(() =>