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

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

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useAtomValue } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import { ArrowRightIcon, ChevronRightIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -8,25 +8,31 @@ 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 { ConnectionState } from "@/core/websocket/types";
 import { useInterval } from "@/hooks/useInterval";
 import { cn } from "@/utils/cn";
-import { SandboxErrorOutput } from "../chrome/panels/sandbox-panel";
+import { runtimeDetailsExpandedAtom } from "../chrome/panels/runtime-details-state";
 import { chromeAtom, useChromeActions } from "../chrome/state";
 import { VerticalLayoutWrapper } from "../renderers/vertical-layout/vertical-layout-wrapper";
-import { ConnectionStatusIcon, StartupProgress } from "./startup-progress";
+import { ConnectionDetails } from "./connection-details";
+import { ConnectionStatusIcon, hasStartupStages } from "./startup-progress";
 
 export const ConnectionNotice = ({
   appConfig,
   onRetry,
+  canOpenPackages = true,
 }: {
   appConfig: AppConfig;
   onRetry: () => void;
+  canOpenPackages?: boolean;
 }) => {
   const notice = useConnectionNotice();
   const connection = useAtomValue(connectionAtom);
   const hasCells = useAtomValue(hasCellsAtom);
   const sandbox = useAtomValue(sandboxAtom);
+  const [detailsExpanded, setDetailsExpanded] = useAtom(
+    runtimeDetailsExpandedAtom,
+  );
   const chrome = useAtomValue(chromeAtom);
   const packagesOpen =
     (chrome.isSidebarOpen && chrome.selectedPanel === "packages") ||
@@ -36,48 +42,60 @@ export const ConnectionNotice = ({
 
   // Reconnection uses the footer indicator while existing cells stay visible.
   const reconnecting =
-    connection.state === WebSocketState.CONNECTING &&
+    connection.state === ConnectionState.CONNECTING &&
     connection.phase === "reconnecting";
 
-  if (sandbox?.backend && hasCells) {
+  const openDetails = () => {
+    setDetailsExpanded(true);
+    openApplication("packages");
+  };
+
+  if (!notice && !sandbox?.backend) {
+    return null;
+  }
+
+  if (hasCells && canOpenPackages) {
     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.
+        // Sandboxes retain this row for subsequent environment syncs.
         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">
+          <section
+            aria-label="Notebook startup"
+            className="flex items-center gap-4"
+          >
             <button
               type="button"
-              onClick={() => openApplication("packages")}
+              onClick={openDetails}
               aria-label={`${title} Open Packages`}
-              aria-expanded={packagesOpen}
+              aria-expanded={packagesOpen && detailsExpanded}
               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>
+            {!notice.pending && !notice.ready && !notice.sandbox && (
+              <Button variant="text" size="xs" onClick={onRetry}>
+                Try again
+              </Button>
+            )}
           </section>
         )}
       </VerticalLayoutWrapper>
     );
   }
 
-  if (!notice || (hasCells && reconnecting)) {
+  if (!notice) {
     return null;
   }
 
-  const showSteps =
-    notice.sandbox &&
-    notice.kind === "startup" &&
-    (notice.ready ||
-      notice.phase === "preparing-environment" ||
-      notice.phase === "starting-kernel");
+  const showSteps = hasStartupStages(notice);
   return (
     <VerticalLayoutWrapper
       appConfig={appConfig}
@@ -87,51 +105,26 @@ export const ConnectionNotice = ({
       <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)",
+          "text-muted-foreground max-w-md mx-auto px-4",
+          hasCells ? "mt-4 mb-8" : "mt-16 sm:mt-24",
         )}
       >
-        {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>
+        {!canOpenPackages && showSteps && (
+          <output className="sr-only">{notice.title}</output>
         )}
+        <ConnectionDetails
+          notice={notice}
+          surface={canOpenPackages ? "notebook" : "sidebar"}
+        />
         <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 &&
+            {canOpenPackages &&
+              !notice.ready &&
               !packagesOpen &&
               (notice.sandbox || notice.pending) && (
                 <Button
@@ -141,7 +134,7 @@ export const ConnectionNotice = ({
                     "p-0 text-xs gap-1.5",
                     showSteps ? "h-6" : "h-auto",
                   )}
-                  onClick={() => openApplication("packages")}
+                  onClick={openDetails}
                 >
                   {notice.pending ? "View setup details" : "Open Packages"}
                   <ArrowRightIcon className="size-3" aria-hidden={true} />

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;