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

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

@@ -0,0 +1,202 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtom, useAtomValue } from "jotai";
+import { RefreshCwIcon } from "lucide-react";
+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,
+  sandboxActionsAtom,
+  sandboxAtom,
+  sandboxSyncAtom,
+  sandboxSyncOperationAtom,
+} from "@/core/packages/sandbox-state";
+import { cn } from "@/utils/cn";
+import { StartupOutput } from "../../alerts/startup-output";
+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);
+  const actions = useAtomValue(sandboxActionsAtom);
+  const sync = useAtomValue(sandboxSyncAtom);
+  if (notice.pending || notice.ready) {
+    return null;
+  }
+  return (
+    <>
+      <div className="flex items-center gap-2 mt-3">
+        <Button
+          variant="outline"
+          size="xs"
+          disabled={!actions || sandbox?.manifest == null}
+          onClick={() => actions?.editManifest()}
+        >
+          Edit manifest…
+        </Button>
+        {notice.kind === "sync" && sync.kind === "restart-required" ? (
+          <SandboxRestart />
+        ) : (
+          <Button
+            variant="text"
+            size="xs"
+            disabled={!actions}
+            onClick={() => actions?.sync()}
+          >
+            Retry sync
+          </Button>
+        )}
+      </div>
+      {sandbox?.manifest == null && (
+        <p className="mt-3 text-xs text-muted-foreground">
+          A manifest will be available once this new notebook starts.
+        </p>
+      )}
+    </>
+  );
+}
+
+function SandboxRestart() {
+  const restartKernel = useRestartKernel();
+  return (
+    <Button variant="text" size="xs" onClick={restartKernel}>
+      Restart Kernel
+    </Button>
+  );
+}
+
+function RuntimeNoticeDetails({ notice }: { notice: DisplayConnectionNotice }) {
+  return (
+    <ConnectionDetails notice={notice}>
+      {notice.sandbox && <SandboxRecovery notice={notice} />}
+    </ConnectionDetails>
+  );
+}
+
+function SandboxSyncDetails({
+  notice,
+}: {
+  notice: DisplayConnectionNotice | null;
+}) {
+  const operation = useAtomValue(sandboxSyncOperationAtom);
+  if (!operation && !notice) {
+    return null;
+  }
+  return (
+    <div className="mt-5 min-w-0">
+      {notice ? (
+        <div className="mb-5">
+          <RuntimeNoticeDetails notice={notice} />
+        </div>
+      ) : (
+        <p className="text-sm">Environment synced</p>
+      )}
+      <StartupOutput
+        key={operation?.operation_id}
+        logs={operation?.logs.environment ?? ""}
+        state={
+          operation?.status.kind === "running"
+            ? "running"
+            : operation?.status.kind === "succeeded"
+              ? "succeeded"
+              : "failed"
+        }
+        label="sandbox sync output"
+      />
+    </div>
+  );
+}
+
+export function RuntimeDetails() {
+  const section = usePanelSection();
+  const sandbox = Boolean(useAtomValue(sandboxAtom)?.backend);
+  const connected = useAtomValue(isConnectedAtom);
+  const connectionNotice = useAtomValue(connectionNoticeAtom);
+  const notice: DisplayConnectionNotice | null = connectionNotice && {
+    ...connectionNotice,
+    ready: false,
+  };
+  const preparation = useAtomValue(preparationAtom);
+  const progress = useAtomValue(startupProgressAtom);
+  const [expanded, setExpanded] = useAtom(runtimeDetailsExpandedAtom);
+  const startup: DisplayConnectionNotice | null =
+    notice?.kind === "startup"
+      ? notice
+      : preparation || progress || (connected && !sandbox)
+        ? {
+            kind: "startup",
+            sandbox,
+            title: "Notebook started",
+            description: "The notebook is ready to run.",
+            pending: false,
+            ready: true,
+            error: null,
+          }
+        : null;
+  return (
+    <section
+      id={`runtime-details-${section}`}
+      aria-label={sandbox ? "Sandbox details" : "Runtime details"}
+      hidden={!expanded}
+      className={cn(
+        "min-w-0 overflow-auto p-4",
+        connected ? "shrink-0 max-h-[65%] border-b" : "flex-1",
+      )}
+      onPointerDownCapture={() => setExpanded(true)}
+      onFocusCapture={() => setExpanded(true)}
+    >
+      {notice?.kind === "connection" && (
+        <div className="mb-5">
+          <RuntimeNoticeDetails notice={notice} />
+        </div>
+      )}
+      {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>
+      )}
+    </section>
+  );
+}
+
+function SandboxActions() {
+  const sandbox = useAtomValue(sandboxAtom);
+  const actions = useAtomValue(sandboxActionsAtom);
+  const pending = useAtomValue(sandboxSyncAtom).kind === "running";
+  return (
+    <div className="flex items-center gap-4 mt-5 border-t pt-3">
+      <Button
+        variant="text"
+        size="xs"
+        className="text-muted-foreground gap-1.5 p-0"
+        disabled={pending || !actions}
+        onClick={() => actions?.sync()}
+      >
+        <RefreshCwIcon className="size-3" aria-hidden={true} />
+        Sync
+      </Button>
+      <Button
+        variant="text"
+        size="xs"
+        className="text-muted-foreground p-0"
+        disabled={!actions || sandbox?.manifest == null}
+        onClick={() => actions?.editManifest()}
+      >
+        Edit manifest…
+      </Button>
+    </div>
+  );
+}

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"

package/src/components/editor/chrome/wrapper/footer-items/machine-stats.tsx

@@ -10,7 +10,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { useRequestClient } from "@/core/network/requests";
 import type { UsageResponse } from "@/core/network/types";
 import { isWasm } from "@/core/wasm/utils";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useInterval } from "@/hooks/useInterval";
 import { cn } from "@/utils/cn";
@@ -29,7 +29,7 @@ export const MachineStats: React.FC = () => {
     if (isWasm()) {
       return null;
     }
-    if (connection.state !== WebSocketState.OPEN) {
+    if (connection.state !== ConnectionState.OPEN) {
       return null;
     }
     return getUsageStats();

package/src/components/editor/controls/Controls.tsx

@@ -21,7 +21,7 @@ import {
   getConnectionTooltip,
   isAppInteractionDisabled,
 } from "@/core/websocket/connection-utils";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
 import {
@@ -43,7 +43,7 @@ interface ControlsProps {
   onTogglePresenting: () => void;
   onInterrupt: () => void;
   onRun: () => void;
-  connectionState: WebSocketState;
+  connectionState: ConnectionState;
   running: boolean;
   appConfig: AppConfig;
 }
@@ -60,7 +60,7 @@ export const Controls = ({
   const undoLabel = useAtomValue(undoLabelAtom);
   const needsRun = useAtomValue(needsRunAtom);
   const { undoDeleteCell } = useCellActions();
-  const closed = connectionState === WebSocketState.CLOSED;
+  const closed = connectionState === ConnectionState.CLOSED;
 
   let undoControl: JSX.Element | null = null;
   if (!closed && undoAvailable) {

package/src/components/editor/controls/__tests__/notebook-menu-dropdown.test.tsx

@@ -25,7 +25,7 @@ import { requestClientAtom } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
 import { isWasm } from "@/core/wasm/utils";
-import { WebSocketState } from "@/core/websocket/types";
+import { ConnectionState } from "@/core/websocket/types";
 import {
   DEFAULT_EXPORT_OPTIONS,
   exportOptionsAtom,
@@ -111,7 +111,7 @@ describe("NotebookMenuDropdown", () => {
     store.set(requestClientAtom, MockRequestClient.create());
     store.set(filenameAtom, "/project/notebook.py");
     store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
-    store.set(connectionAtom, { state: WebSocketState.OPEN });
+    store.set(connectionAtom, { state: ConnectionState.OPEN });
     store.set(kioskModeAtom, false);
     store.set(layoutStateAtom, {
       selectedLayout: "vertical",

package/src/components/editor/header/__tests__/status.test.tsx

@@ -10,7 +10,7 @@ import { viewStateAtom } from "@/core/mode";
 import {
   type ConnectionStatus,
   WebSocketClosedReason,
-  WebSocketState,
+  ConnectionState,
 } from "@/core/websocket/types";
 import { StatusOverlay } from "../status";
 
@@ -40,7 +40,7 @@ describe("StatusOverlay disconnect indicator", () => {
     const onReconnect = vi.fn();
     const { getByTestId } = renderOverlay(
       {
-        state: WebSocketState.CLOSED,
+        state: ConnectionState.CLOSED,
         code: WebSocketClosedReason.KERNEL_DISCONNECTED,
         reason: "kernel not found",
       },
@@ -57,7 +57,7 @@ describe("StatusOverlay disconnect indicator", () => {
 
   it("renders a disabled button when no onReconnect is provided", () => {
     const { getByTestId } = renderOverlay({
-      state: WebSocketState.CLOSED,
+      state: ConnectionState.CLOSED,
       code: WebSocketClosedReason.KERNEL_DISCONNECTED,
       reason: "kernel not found",
     });
@@ -68,7 +68,7 @@ describe("StatusOverlay disconnect indicator", () => {
 
   it("leaves editor startup failures to the inline notice", () => {
     const { queryByTestId } = renderOverlay({
-      state: WebSocketState.CLOSED,
+      state: ConnectionState.CLOSED,
       code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
       reason: "Failed to start kernel sandbox",
     });

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

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import React, { type PropsWithChildren } from "react";
-import { type ConnectionStatus, WebSocketState } from "@/core/websocket/types";
+import { type ConnectionStatus, ConnectionState } from "@/core/websocket/types";
 import { Disconnected } from "../Disconnected";
 
 interface Props {
@@ -17,7 +17,7 @@ export const AppHeader: React.FC<PropsWithChildren<Props>> = ({
   return (
     <div className={className}>
       {children}
-      {connection.state === WebSocketState.CLOSED && (
+      {connection.state === ConnectionState.CLOSED && (
         <Disconnected reason={connection.reason} />
       )}
     </div>

package/src/components/editor/header/status.tsx

@@ -10,7 +10,7 @@ import { viewStateAtom } from "@/core/mode";
 import {
   type ConnectionStatus,
   WebSocketClosedReason,
-  WebSocketState,
+  ConnectionState,
 } from "@/core/websocket/types";
 import { cn } from "@/utils/cn";
 
@@ -21,10 +21,10 @@ export const StatusOverlay: React.FC<{
 }> = ({ connection, isRunning, onReconnect }) => {
   const { mode } = useAtomValue(viewStateAtom);
   const isClosed =
-    connection.state === WebSocketState.CLOSED &&
+    connection.state === ConnectionState.CLOSED &&
     (mode === "read" ||
       connection.code !== WebSocketClosedReason.KERNEL_STARTUP_ERROR);
-  const isOpen = connection.state === WebSocketState.OPEN;
+  const isOpen = connection.state === ConnectionState.OPEN;
   // Editor startup failures have their own recovery UI.
   const canReconnect =
     isClosed && connection.code === WebSocketClosedReason.KERNEL_DISCONNECTED;

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -703,7 +703,7 @@ describe("useCellNavigationProps", () => {
       });
 
       expect(mockCopyCell).not.toHaveBeenCalled();
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
     });
   });
 
@@ -714,7 +714,7 @@ describe("useCellNavigationProps", () => {
       );
 
       const mockEvent = Mocks.keyboardEvent({
-        key: "x",
+        key: "F24",
         target: document.createElement("div"),
       });
 
@@ -722,7 +722,7 @@ describe("useCellNavigationProps", () => {
         result.current.onKeyDown?.(mockEvent);
       });
 
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
     });
   });
 
@@ -1749,7 +1749,7 @@ describe("useCellEditorNavigationProps", () => {
       });
 
       expect(focusCell).toHaveBeenCalledWith(mockCellId);
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
     });
 
     it("should clear text selection when Escape is pressed with selection", () => {
@@ -1901,7 +1901,7 @@ describe("useCellEditorNavigationProps", () => {
       });
 
       expect(focusCell).not.toHaveBeenCalled();
-      expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+      expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
     });
   });
 
@@ -1932,7 +1932,7 @@ describe("useCellEditorNavigationProps", () => {
         });
 
         expect(focusCell).toHaveBeenCalledWith(mockCellId);
-        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
       });
     });
 
@@ -1954,7 +1954,7 @@ describe("useCellEditorNavigationProps", () => {
         });
 
         expect(focusCell).toHaveBeenCalledWith(mockCellId);
-        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
       });
     });
 
@@ -1979,7 +1979,7 @@ describe("useCellEditorNavigationProps", () => {
         });
 
         expect(focusCell).toHaveBeenCalledWith(mockCellId);
-        expect(mockEvent.continuePropagation).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
       });
     });
   });

package/src/components/ui/__tests__/slider.test.tsx

@@ -0,0 +1,30 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { Slider } from "../slider";
+
+SetupMocks.resizeObserver();
+
+describe("Slider", () => {
+  // Regression for #2593: steps below 1e-6 stringify in exponent notation
+  // ("1e-7"), which older radix versions counted as 0 decimal places, so
+  // every value was rounded to an integer and the slider never moved.
+  it.each([1e-6, 1e-7, 1e-9])("moves by a tiny step of %s", (step) => {
+    const onValueChange = vi.fn();
+    const { getByRole } = render(
+      <Slider
+        value={[step]}
+        min={step}
+        max={100 * step}
+        step={step}
+        onValueChange={onValueChange}
+        valueMap={(v) => v}
+      />,
+    );
+
+    fireEvent.keyDown(getByRole("slider"), { key: "ArrowRight" });
+
+    expect(onValueChange).toHaveBeenCalledWith([2 * step]);
+  });
+});

package/src/components/ui/progress-stages.tsx

@@ -0,0 +1,114 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { AlertCircleIcon, CheckIcon, CircleIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { Spinner } from "@/components/icons/spinner";
+import { cn } from "@/utils/cn";
+
+export type ProgressState = "waiting" | "running" | "succeeded" | "failed";
+
+export interface ProgressStage {
+  id: string;
+  state: ProgressState;
+  title: string;
+  description: string;
+  details?: ReactNode;
+}
+
+export function ProgressStatusIcon({
+  state,
+  variant = "icon",
+}: {
+  state: ProgressState;
+  variant?: "icon" | "dot";
+}) {
+  if (variant === "dot") {
+    return (
+      <span
+        aria-hidden={true}
+        className={cn(
+          "size-1.5 shrink-0 rounded-full",
+          {
+            waiting: "bg-muted-foreground",
+            running: "bg-muted-foreground motion-safe:animate-pulse",
+            succeeded: "bg-(--grass-9)",
+            failed: "bg-(--red-9)",
+          }[state],
+        )}
+      />
+    );
+  }
+  const Icon = {
+    waiting: CircleIcon,
+    running: Spinner,
+    succeeded: CheckIcon,
+    failed: AlertCircleIcon,
+  }[state];
+  return (
+    <Icon
+      aria-hidden={true}
+      className={cn(
+        "size-4 shrink-0",
+        {
+          waiting: "text-muted-foreground/50",
+          running: "motion-reduce:animate-none",
+          succeeded: "text-(--grass-11)",
+          failed: "text-(--red-11)",
+        }[state],
+      )}
+    />
+  );
+}
+
+export function ProgressStages({
+  stages,
+  label,
+  className,
+}: {
+  stages: readonly ProgressStage[];
+  label: string;
+  className?: string;
+}) {
+  return (
+    <ol aria-label={label} className={cn("space-y-6", className)}>
+      {stages.map((stage, index) => (
+        <li
+          key={stage.id}
+          aria-current={
+            stage.state === "running" || stage.state === "failed"
+              ? "step"
+              : undefined
+          }
+          className="relative flex items-start gap-3"
+        >
+          {index < stages.length - 1 && (
+            <span
+              aria-hidden={true}
+              className="absolute left-2 top-4.5 -bottom-6.5 border-l border-border"
+            />
+          )}
+          <span className="mt-0.5 text-muted-foreground">
+            <ProgressStatusIcon state={stage.state} />
+          </span>
+          <div className="min-w-0 flex-1">
+            <div
+              className={cn(
+                "text-sm",
+                stage.state === "failed"
+                  ? "text-(--red-11)"
+                  : stage.state === "waiting"
+                    ? "text-muted-foreground"
+                    : "text-foreground",
+              )}
+            >
+              {stage.title}
+            </div>
+            <p className="mt-1 text-xs text-muted-foreground">
+              {stage.description}
+            </p>
+            {stage.details}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}