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

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(() =>

package/src/components/editor/chrome/panels/__tests__/{sandbox-details.test.tsx → runtime-details.test.tsx}

@@ -11,10 +11,10 @@ import { kernelStartupErrorAtom } from "@/core/errors/state";
 import { connectionAtom, startupProgressAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { sandboxAtom } from "@/core/packages/sandbox-state";
-import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
+import { WebSocketClosedReason, 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";
 
 vi.mock("@/utils/reload-safe", () => ({ reloadSafe: vi.fn() }));
 
@@ -43,8 +43,8 @@ function mount({
   store.set(
     connectionAtom,
     preparing
-      ? { state: WebSocketState.CONNECTING, phase: "preparing-environment" }
-      : { state: WebSocketState.OPEN },
+      ? { state: ConnectionState.CONNECTING, phase: "preparing-environment" }
+      : { state: ConnectionState.OPEN },
   );
   store.set(alertAtom, (state) => ({
     ...state,
@@ -89,7 +89,7 @@ function mount({
     <Provider store={store}>
       <TooltipProvider>
         <ModalProvider>
-          <SandboxToggle section="sidebar" />
+          <RuntimeStatusToggle section="sidebar" />
           <PanelSectionProvider value="sidebar">
             <PackagesPanel />
           </PanelSectionProvider>
@@ -103,7 +103,7 @@ function mount({
 it("opens restored preparation and kernel logs without reopening completed startup on refresh", async () => {
   mount();
   await screen.findByText("numpy");
-  const toggle = screen.getByRole("button", { name: "uv sandbox" });
+  const toggle = screen.getByRole("button", { name: /^uv sandbox, / });
   expect(toggle).toHaveAttribute("aria-expanded", "false");
   expect(
     screen.queryByRole("region", { name: "Sandbox details" }),
@@ -164,7 +164,9 @@ it("restores a restart-required sync with the kernel restart action", async () =
     })),
   );
   await screen.findByText("numpy");
-  expect(screen.getByText("Sandbox restart required")).toBeVisible();
+  expect(
+    screen.getByRole("heading", { name: "Sandbox restart required" }),
+  ).toBeVisible();
   expect(
     screen.queryByRole("button", { name: "Retry sync" }),
   ).not.toBeInTheDocument();
@@ -194,7 +196,9 @@ it("restores a restart-required sync with the kernel restart action", async () =
       },
     })),
   );
-  expect(screen.getByText("Sandbox restart required")).toBeVisible();
+  expect(
+    screen.getByRole("heading", { name: "Sandbox restart required" }),
+  ).toBeVisible();
   fireEvent.click(screen.getByRole("button", { name: "Restart Kernel" }));
   expect(screen.getByRole("alertdialog")).toHaveTextContent("Restart Kernel");
   expect(client.sendRestart).not.toHaveBeenCalled();
@@ -251,7 +255,7 @@ it("keeps sync output open through completion and restores it quietly after refr
   unmount();
   const refreshed = mount();
   act(() => refreshed.store.set(alertAtom, snapshot));
-  const toggle = screen.getByRole("button", { name: "uv sandbox" });
+  const toggle = screen.getByRole("button", { name: /^uv sandbox, / });
   expect(toggle).toHaveAttribute("aria-expanded", "false");
   fireEvent.click(toggle);
   fireEvent.click(
@@ -266,7 +270,7 @@ it.each([false, true])(
   "retains the progression after completion with inspecting=%s",
   async (inspecting) => {
     const { store, client } = mount({ preparing: true });
-    const toggle = screen.getByRole("button", { name: "uv sandbox" });
+    const toggle = screen.getByRole("button", { name: /^uv sandbox, / });
     expect(toggle).toHaveAttribute("aria-expanded", "true");
     expect(client.getDependencyTree).not.toHaveBeenCalled();
     if (inspecting) {
@@ -283,11 +287,11 @@ it.each([false, true])(
         log_mode: "replace",
       });
       store.set(connectionAtom, {
-        state: WebSocketState.CONNECTING,
+        state: ConnectionState.CONNECTING,
         phase: "starting-kernel",
       });
     });
-    act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+    act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
     await screen.findByText("numpy");
     expect(toggle).toHaveAttribute("aria-expanded", String(inspecting));
     if (!inspecting) {
@@ -308,7 +312,7 @@ it.each([false, true])(
 
 it("opens a startup error even after collapsing preparation and keeps both step outputs available", () => {
   const { store } = mount({ preparing: true, backend: "pixi" });
-  const toggle = screen.getByRole("button", { name: "pixi sandbox" });
+  const toggle = screen.getByRole("button", { name: /^pixi sandbox, / });
   fireEvent.click(toggle);
   act(() => {
     store.set(startupProgressAtom, {
@@ -318,13 +322,14 @@ it("opens a startup error even after collapsing preparation and keeps both step
     });
     store.set(kernelStartupErrorAtom, "Could not import the runtime");
     store.set(connectionAtom, {
-      state: WebSocketState.CLOSED,
+      state: ConnectionState.CLOSED,
       phase: "starting-kernel",
       code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
       reason: "Kernel startup failed",
     });
   });
   expect(toggle).toHaveAttribute("aria-expanded", "true");
+  expect(toggle).toHaveTextContent("pixi sandbox");
   expect(within(toggle).getByRole("status")).toHaveAccessibleName(
     "Kernel failed to start",
   );
@@ -346,13 +351,80 @@ it("opens a startup error even after collapsing preparation and keeps both step
   expect(screen.getByLabelText("Error details")).toBeVisible();
 });
 
-it("does not add a toggle or startup details to an existing environment", async () => {
-  mount({ backend: null });
+it.each(["uv", "pixi"] as const)(
+  "shows connection status and errors before the %s startup phase arrives",
+  (backend) => {
+    const { store } = mount({ backend, preparing: true });
+    act(() => store.set(connectionAtom, { state: ConnectionState.CONNECTING }));
+    const details = within(
+      screen.getByRole("region", { name: "Sandbox details" }),
+    );
+    expect(details.getByRole("status")).toHaveTextContent("Connecting…");
+    expect(details.queryByRole("list")).not.toBeInTheDocument();
+
+    act(() => {
+      store.set(kernelStartupErrorAtom, "Kernel process exited unexpectedly");
+      store.set(connectionAtom, {
+        state: ConnectionState.CLOSED,
+        code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+        reason: "Kernel startup failed",
+      });
+    });
+    expect(details.getByRole("status")).toHaveTextContent(
+      "Kernel failed to start",
+    );
+    expect(details.getByLabelText("Error details")).toHaveTextContent(
+      "Kernel process exited unexpectedly",
+    );
+    expect(details.queryByRole("list")).not.toBeInTheDocument();
+  },
+);
+
+it("uses the same disclosure for an existing environment and updates it through connection changes", async () => {
+  const { store } = mount({ backend: null });
   await screen.findByText("numpy");
-  expect(
-    screen.queryByRole("button", { name: /sandbox/ }),
-  ).not.toBeInTheDocument();
-  expect(
-    screen.queryByRole("region", { name: "Sandbox details" }),
-  ).not.toBeInTheDocument();
+  const toggle = screen.getByRole("button", { name: /^Runtime details, / });
+  expect(toggle).toHaveTextContent(/^Runtime$/);
+  expect(toggle).toHaveAccessibleName("Runtime details, Kernel ready");
+  expect(within(toggle).getByRole("status")).toHaveAccessibleName(
+    "Kernel ready",
+  );
+  expect(toggle).toHaveAttribute("aria-expanded", "false");
+  fireEvent.click(toggle);
+  const details = screen.getByRole("region", { name: "Runtime details" });
+  expect(toggle).toHaveAttribute("aria-controls", details.id);
+  expect(within(details).getByText("Kernel started")).toBeVisible();
+  expect(within(details).getAllByRole("listitem")).toHaveLength(1);
+  expect(within(details).queryByRole("button", { name: "Sync" })).toBeNull();
+
+  act(() => store.set(connectionAtom, { state: ConnectionState.CONNECTING }));
+  expect(toggle).toHaveTextContent(/^Runtime$/);
+  expect(within(toggle).getByRole("status")).toHaveAccessibleName(
+    "Connecting…",
+  );
+  expect(within(details).getByText("Starting kernel")).toBeVisible();
+  fireEvent.click(toggle);
+  expect(details).not.toBeVisible();
+  act(() =>
+    store.set(connectionAtom, {
+      state: ConnectionState.CLOSED,
+      code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+      reason: "Kernel startup failed",
+    }),
+  );
+  expect(toggle).toHaveAttribute("aria-expanded", "true");
+  expect(toggle).toHaveTextContent(/^Runtime$/);
+  expect(within(toggle).getByRole("status")).toHaveAccessibleName(
+    "Kernel failed to start",
+  );
+  expect(details).toBeVisible();
+  expect(toggle).toHaveAccessibleName(
+    "Runtime details, Kernel failed to start",
+  );
+
+  act(() => store.set(connectionAtom, { state: ConnectionState.NOT_STARTED }));
+  expect(toggle).toHaveTextContent(/^Runtime$/);
+  expect(within(toggle).getByRole("status")).toHaveAccessibleName(
+    "Kernel not connected",
+  );
 });

package/src/components/editor/chrome/panels/__tests__/sandbox-recovery.test.tsx

@@ -24,7 +24,7 @@ import {
 } from "@/core/packages/sandbox-state";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
-import { WebSocketClosedReason, WebSocketState } from "@/core/websocket/types";
+import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
 import { chromeAtom } from "../../state";
 import PackagesPanel from "../packages-panel";
 import { PanelSectionProvider } from "../panel-context";
@@ -52,7 +52,7 @@ vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
 const manifest =
   'dependencies = ["numpy==0.0.0"]\n\n[tool.custom]\nlabel = "experiment"\n';
 const failed = {
-  state: WebSocketState.CLOSED,
+  state: ConnectionState.CLOSED,
   code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
   phase: "preparing-environment",
   reason: "Kernel startup failed",
@@ -117,7 +117,7 @@ it("keeps a whole-manifest repair open through failure and closes only after syn
   const reconnect = vi.fn(async () => {
     store.set(kernelStartupErrorAtom, null);
     store.set(connectionAtom, {
-      state: WebSocketState.CONNECTING,
+      state: ConnectionState.CONNECTING,
       phase: "preparing-environment",
     });
   });
@@ -161,7 +161,7 @@ it("keeps a whole-manifest repair open through failure and closes only after syn
   );
   fireEvent.click(dialog.getByRole("button", { name: "Sync" }));
   await waitFor(() => expect(reconnect).toHaveBeenCalledTimes(2));
-  act(() => store.set(connectionAtom, { state: WebSocketState.OPEN }));
+  act(() => store.set(connectionAtom, { state: ConnectionState.OPEN }));
   await waitFor(() =>
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument(),
   );

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

@@ -7,7 +7,6 @@ import {
   HelpCircleIcon,
 } from "lucide-react";
 import React from "react";
-import { useConnectionNotice } from "@/core/network/useConnectionNotice";
 import { useOpenSettingsToTab } from "@/components/app-config/state";
 import { Spinner } from "@/components/icons/spinner";
 import { SearchInput } from "@/components/ui/input";
@@ -26,7 +25,7 @@ import type {
   DependencyTreeNode,
   DependencyTreeResponse,
 } from "@/core/network/types";
-import { sandboxAtom, sandboxSyncAtom } from "@/core/packages/sandbox-state";
+import { sandboxSyncAtom } from "@/core/packages/sandbox-state";
 import { stripPackageManagerPrefix } from "@/core/packages/package-input-utils";
 import { usePackageAction } from "@/core/packages/usePackageAction";
 import { usePackageDependencies } from "@/core/packages/usePackageDependencies";
@@ -36,7 +35,7 @@ import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { Events } from "@/utils/events";
-import { SandboxDetails } from "./sandbox-panel";
+import { RuntimeDetails } from "./runtime-panel";
 import { PanelEmptyState } from "./empty-state";
 import { PACKAGES_INPUT_ID, packagesToInstallAtom } from "./packages-utils";
 
@@ -69,33 +68,13 @@ const PackageActionButton: React.FC<{
 };
 
 const PackagesPanel: React.FC = () => {
-  const sandbox = useAtomValue(sandboxAtom);
   const connected = useAtomValue(isConnectedAtom);
-  const notice = useConnectionNotice(0);
-  if (sandbox?.backend) {
-    return (
-      <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
-        <SandboxDetails />
-        {connected && <PackageContents />}
-      </div>
-    );
-  }
-  if (notice) {
-    return (
-      <div className="p-4 text-sm text-muted-foreground">
-        <div className="flex items-center gap-2">
-          {notice.pending && <Spinner className="size-3" />}
-          {notice.title}
-        </div>
-        {notice.error && (
-          <pre className="mt-3 text-xs whitespace-pre-wrap break-words max-h-52 overflow-auto">
-            {notice.error}
-          </pre>
-        )}
-      </div>
-    );
-  }
-  return <PackageContents />;
+  return (
+    <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+      <RuntimeDetails />
+      {connected && <PackageContents />}
+    </div>
+  );
 };
 
 const PackageContents: React.FC = () => {

package/src/components/editor/chrome/panels/{sandbox-details-state.ts → runtime-details-state.ts}

@@ -17,7 +17,7 @@ const disclosureContextAtom = atom((get) => {
   };
 });
 
-export const sandboxDetailsExpandedAtom = atom(
+export const runtimeDetailsExpandedAtom = atom(
   (get) => {
     const context = get(disclosureContextAtom);
     const preference = get(preferenceAtom);

package/src/components/editor/chrome/panels/{sandbox-panel.tsx → runtime-panel.tsx}

@@ -1,13 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { useAtom, useAtomValue } from "jotai";
 import { RefreshCwIcon } from "lucide-react";
-import { connectionNoticeAtom } from "@/core/network/connection-notice";
 import { Button } from "@/components/ui/button";
 import { useRestartKernel } from "@/components/editor/actions/useRestartKernel";
 import {
   isConnectedAtom,
   startupProgressAtom,
 } from "@/core/network/connection";
+import { connectionNoticeAtom } from "@/core/network/connection-notice";
 import type { DisplayConnectionNotice } from "@/core/network/useConnectionNotice";
 import {
   preparationAtom,
@@ -17,25 +17,10 @@ import {
   sandboxSyncOperationAtom,
 } from "@/core/packages/sandbox-state";
 import { cn } from "@/utils/cn";
-import { usePanelSection } from "./panel-context";
-import { sandboxDetailsExpandedAtom } from "./sandbox-details-state";
 import { StartupOutput } from "../../alerts/startup-output";
-import {
-  ConnectionStatusIcon,
-  StartupProgress,
-} from "../../alerts/startup-progress";
-
-export function SandboxErrorOutput({ error }: { error: string }) {
-  return (
-    <pre
-      tabIndex={0}
-      aria-label="Error details"
-      className="mt-3 p-3 rounded border bg-muted/30 text-xs text-muted-foreground whitespace-pre min-w-0 max-w-full max-h-52 overflow-auto"
-    >
-      {error}
-    </pre>
-  );
-}
+import { ConnectionDetails } from "../../alerts/connection-details";
+import { usePanelSection } from "./panel-context";
+import { runtimeDetailsExpandedAtom } from "./runtime-details-state";
 
 function SandboxRecovery({ notice }: { notice: DisplayConnectionNotice }) {
   const sandbox = useAtomValue(sandboxAtom);
@@ -46,8 +31,6 @@ function SandboxRecovery({ notice }: { notice: DisplayConnectionNotice }) {
   }
   return (
     <>
-      <p className="mt-2 text-foreground">{notice.description}</p>
-      {notice.error && <SandboxErrorOutput error={notice.error} />}
       <div className="flex items-center gap-2 mt-3">
         <Button
           variant="outline"
@@ -88,36 +71,11 @@ function SandboxRestart() {
   );
 }
 
-function SandboxStartupPanel({ notice }: { notice: DisplayConnectionNotice }) {
-  const showSteps =
-    notice.kind === "startup" &&
-    (notice.ready ||
-      notice.phase === "preparing-environment" ||
-      notice.phase === "starting-kernel");
-  return (
-    <div className="min-w-0 text-sm">
-      {showSteps ? (
-        <StartupProgress notice={notice} surface="sidebar" />
-      ) : (
-        <div className="flex items-center gap-2" role="status">
-          <ConnectionStatusIcon notice={notice} />
-          <h2>{notice.title}</h2>
-        </div>
-      )}
-      <SandboxRecovery notice={notice} />
-    </div>
-  );
-}
-
-function SandboxSyncStatus({ notice }: { notice: DisplayConnectionNotice }) {
+function RuntimeNoticeDetails({ notice }: { notice: DisplayConnectionNotice }) {
   return (
-    <div className="mb-5 text-sm">
-      <output className="flex items-center gap-2 text-xs">
-        <ConnectionStatusIcon notice={notice} />
-        <span>{notice.title}</span>
-      </output>
-      <SandboxRecovery notice={notice} />
-    </div>
+    <ConnectionDetails notice={notice}>
+      {notice.sandbox && <SandboxRecovery notice={notice} />}
+    </ConnectionDetails>
   );
 }
 
@@ -133,7 +91,9 @@ function SandboxSyncDetails({
   return (
     <div className="mt-5 min-w-0">
       {notice ? (
-        <SandboxSyncStatus notice={notice} />
+        <div className="mb-5">
+          <RuntimeNoticeDetails notice={notice} />
+        </div>
       ) : (
         <p className="text-sm">Environment synced</p>
       )}
@@ -153,20 +113,25 @@ function SandboxSyncDetails({
   );
 }
 
-export function SandboxDetails() {
+export function RuntimeDetails() {
   const section = usePanelSection();
+  const sandbox = Boolean(useAtomValue(sandboxAtom)?.backend);
   const connected = useAtomValue(isConnectedAtom);
-  const notice = useAtomValue(connectionNoticeAtom);
+  const connectionNotice = useAtomValue(connectionNoticeAtom);
+  const notice: DisplayConnectionNotice | null = connectionNotice && {
+    ...connectionNotice,
+    ready: false,
+  };
   const preparation = useAtomValue(preparationAtom);
   const progress = useAtomValue(startupProgressAtom);
-  const [expanded, setExpanded] = useAtom(sandboxDetailsExpandedAtom);
+  const [expanded, setExpanded] = useAtom(runtimeDetailsExpandedAtom);
   const startup: DisplayConnectionNotice | null =
     notice?.kind === "startup"
-      ? { ...notice, ready: false }
-      : preparation || progress
+      ? notice
+      : preparation || progress || (connected && !sandbox)
         ? {
             kind: "startup",
-            sandbox: true,
+            sandbox,
             title: "Notebook started",
             description: "The notebook is ready to run.",
             pending: false,
@@ -176,8 +141,8 @@ export function SandboxDetails() {
         : null;
   return (
     <section
-      id={`sandbox-details-${section}`}
-      aria-label="Sandbox details"
+      id={`runtime-details-${section}`}
+      aria-label={sandbox ? "Sandbox details" : "Runtime details"}
       hidden={!expanded}
       className={cn(
         "min-w-0 overflow-auto p-4",
@@ -187,15 +152,22 @@ export function SandboxDetails() {
       onFocusCapture={() => setExpanded(true)}
     >
       {notice?.kind === "connection" && (
-        <SandboxSyncStatus notice={{ ...notice, ready: false }} />
+        <div className="mb-5">
+          <RuntimeNoticeDetails notice={notice} />
+        </div>
       )}
-      {startup && <SandboxStartupPanel notice={startup} />}
-      {connected && (
-        <SandboxSyncDetails
-          notice={notice?.kind === "sync" ? { ...notice, ready: false } : null}
-        />
+      {startup && <RuntimeNoticeDetails notice={startup} />}
+      {sandbox && connected && (
+        <SandboxSyncDetails notice={notice?.kind === "sync" ? notice : null} />
+      )}
+      {sandbox && connected && (!notice || notice.pending) && (
+        <SandboxActions />
+      )}
+      {!notice && !startup && !sandbox && (
+        <p className="text-sm text-muted-foreground">
+          Not connected to a runtime.
+        </p>
       )}
-      {connected && (!notice || notice.pending) && <SandboxActions />}
     </section>
   );
 }

package/src/components/editor/chrome/panels/runtime-status-toggle.tsx

@@ -0,0 +1,56 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtom, useAtomValue } from "jotai";
+import { ChevronDownIcon } from "lucide-react";
+import {
+  ProgressStatusIcon,
+  type ProgressState,
+} from "@/components/ui/progress-stages";
+import { isConnectedAtom } from "@/core/network/connection";
+import { connectionNoticeAtom } from "@/core/network/connection-notice";
+import { sandboxAtom } from "@/core/packages/sandbox-state";
+import { cn } from "@/utils/cn";
+import type { PanelSection } from "./panel-context";
+import { runtimeDetailsExpandedAtom } from "./runtime-details-state";
+
+export function RuntimeStatusToggle({ section }: { section: PanelSection }) {
+  const sandbox = useAtomValue(sandboxAtom);
+  const notice = useAtomValue(connectionNoticeAtom);
+  const [expanded, setExpanded] = useAtom(runtimeDetailsExpandedAtom);
+  const connected = useAtomValue(isConnectedAtom);
+  const label = sandbox?.backend ? `${sandbox.backend} sandbox` : "Runtime";
+  const statusLabel =
+    notice?.title ?? (connected ? "Kernel ready" : "Kernel not connected");
+  const status: ProgressState = notice
+    ? notice.pending
+      ? "running"
+      : "failed"
+    : connected
+      ? "succeeded"
+      : "waiting";
+  return (
+    <button
+      type="button"
+      aria-label={`${sandbox?.backend ? label : "Runtime details"}, ${statusLabel}`}
+      aria-expanded={expanded}
+      aria-controls={`runtime-details-${section}`}
+      title={statusLabel}
+      className={cn(
+        "flex min-w-0 items-center gap-1.5 rounded px-1.5 py-1 text-xs whitespace-nowrap hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring",
+        status === "failed" ? "text-(--red-11)" : "text-foreground",
+      )}
+      onClick={() => setExpanded(!expanded)}
+    >
+      <ProgressStatusIcon state={status} variant="dot" />
+      <output aria-label={statusLabel} className="truncate">
+        {label}
+      </output>
+      <ChevronDownIcon
+        aria-hidden={true}
+        className={cn(
+          "size-3 shrink-0 text-muted-foreground",
+          expanded && "rotate-180",
+        )}
+      />
+    </button>
+  );
+}

package/src/components/editor/chrome/panels/sandbox-controller.tsx

@@ -14,7 +14,7 @@ import { useSandboxController } from "@/core/packages/useSandboxController";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
 import { useTheme } from "@/theme/useTheme";
 import { Paths } from "@/utils/paths";
-import { SandboxErrorOutput } from "./sandbox-panel";
+import { ConnectionErrorOutput } from "../../alerts/connection-details";
 
 export function SandboxController({
   onReconnect,
@@ -64,7 +64,7 @@ export function SandboxController({
         ) : (
           !error && <Spinner />
         )}
-        {diagnostic && <SandboxErrorOutput error={diagnostic} />}
+        {diagnostic && <ConnectionErrorOutput error={diagnostic} />}
         {conflict && (
           <Button variant="text" size="sm" onClick={loadManifest}>
             Discard draft and reload manifest

package/src/components/editor/chrome/wrapper/app-chrome.tsx

@@ -34,7 +34,7 @@ import { ErrorBoundary } from "../../boundary/ErrorBoundary";
 import { raf2 } from "../../navigation/focus-utils";
 import { ContextAwarePanel } from "../panels/context-aware-panel/context-aware-panel";
 import { PanelSectionProvider } from "../panels/panel-context";
-import { SandboxToggle } from "../panels/sandbox-toggle";
+import { RuntimeStatusToggle } from "../panels/runtime-status-toggle";
 import { useTheme } from "@/theme/useTheme";
 import {
   LazyAgentPanel,
@@ -391,7 +391,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
               </span>
             )}
             {selectedPanel === "packages" && (
-              <SandboxToggle section="sidebar" />
+              <RuntimeStatusToggle section="sidebar" />
             )}
             <Button
               data-testid="close-helper-pane"
@@ -549,7 +549,7 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
           <LspStatus />
           <div className="flex-1" />
           {selectedDeveloperPanelTab === "packages" && (
-            <SandboxToggle section="developer-panel" />
+            <RuntimeStatusToggle section="developer-panel" />
           )}
           <Button
             size="xs"