@marimo-team/frontend 0.24.3-dev82 → 0.24.3-dev83

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

@@ -1,28 +1,29 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { useAtomValue } from "jotai";
-import {
-  AlertCircleIcon,
-  ChevronUpIcon,
-  FileCodeIcon,
-  RefreshCwIcon,
-} from "lucide-react";
+import { useAtom, useAtomValue } from "jotai";
+import { RefreshCwIcon } from "lucide-react";
 import { connectionNoticeAtom } from "@/core/network/connection-notice";
-import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
+import { useRestartKernel } from "@/components/editor/actions/useRestartKernel";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Tooltip } from "@/components/ui/tooltip";
-import { isConnectedAtom } from "@/core/network/connection";
+  isConnectedAtom,
+  startupProgressAtom,
+} from "@/core/network/connection";
+import type { DisplayConnectionNotice } from "@/core/network/useConnectionNotice";
 import {
+  preparationAtom,
   sandboxActionsAtom,
   sandboxAtom,
   sandboxSyncAtom,
+  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 (
@@ -36,138 +37,194 @@ export function SandboxErrorOutput({ error }: { error: string }) {
   );
 }
 
-export function SandboxStartupPanel() {
-  const notice = useAtomValue(connectionNoticeAtom);
+function SandboxRecovery({ notice }: { notice: DisplayConnectionNotice }) {
   const sandbox = useAtomValue(sandboxAtom);
   const actions = useAtomValue(sandboxActionsAtom);
-  if (!notice) {
+  const sync = useAtomValue(sandboxSyncAtom);
+  if (notice.pending || notice.ready) {
     return null;
   }
   return (
-    <div className="flex-1 min-h-0 overflow-auto p-4 text-sm">
-      <div
-        className={cn(
-          "flex items-center gap-2",
-          notice.pending
-            ? "text-muted-foreground"
-            : "font-medium text-(--red-11)",
-        )}
-      >
-        {notice.pending ? (
-          <Spinner className="size-4 shrink-0" aria-hidden={true} />
+    <>
+      <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"
+          size="xs"
+          disabled={!actions || sandbox?.manifest == null}
+          onClick={() => actions?.editManifest()}
+        >
+          Edit manifest…
+        </Button>
+        {notice.kind === "sync" && sync.kind === "restart-required" ? (
+          <SandboxRestart />
         ) : (
-          <AlertCircleIcon className="size-4 shrink-0" aria-hidden={true} />
+          <Button
+            variant="text"
+            size="xs"
+            disabled={!actions}
+            onClick={() => actions?.sync()}
+          >
+            Retry sync
+          </Button>
         )}
-        <h2>{notice.title}</h2>
       </div>
-      {!notice.pending && (
-        <>
-          <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"
-              size="xs"
-              disabled={!actions || sandbox?.manifest == null}
-              onClick={() => actions?.editManifest()}
-            >
-              Edit manifest…
-            </Button>
-            <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>
-          )}
-        </>
+      {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 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>
   );
 }
 
-export function SandboxFooter() {
-  const sandbox = useAtomValue(sandboxAtom);
-  const connected = useAtomValue(isConnectedAtom);
-  const actions = useAtomValue(sandboxActionsAtom);
-  const operation = useAtomValue(sandboxSyncAtom);
-  const notice = useAtomValue(connectionNoticeAtom);
-  if (!sandbox?.backend) {
+function SandboxSyncStatus({ 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>
+  );
+}
+
+function SandboxSyncDetails({
+  notice,
+}: {
+  notice: DisplayConnectionNotice | null;
+}) {
+  const operation = useAtomValue(sandboxSyncOperationAtom);
+  if (!operation && !notice) {
     return null;
   }
-  const pending = operation.pending || notice?.pending;
-  const status = operation.pending
-    ? "Syncing sandbox…"
-    : (notice?.title ?? (connected ? "Sandbox ready" : "Sandbox not started"));
   return (
-    <div className="border-t p-1.5 shrink-0">
-      <DropdownMenu>
-        <Tooltip content={status}>
-          <DropdownMenuTrigger asChild={true}>
-            <button
-              type="button"
-              className="flex items-center gap-2 w-full px-2 py-1.5 rounded text-xs text-muted-foreground hover:bg-accent data-[state=open]:bg-accent"
-              aria-label={`${sandbox.backend} sandbox actions`}
-            >
-              <span
-                role="status"
-                aria-label={status}
-                className={cn(
-                  "size-1.5 shrink-0 rounded-full",
-                  pending
-                    ? "bg-amber-500 motion-safe:animate-pulse"
-                    : notice
-                      ? "bg-(--red-9)"
-                      : connected
-                        ? "bg-emerald-500"
-                        : "bg-muted-foreground",
-                )}
-              />
-              <span>{sandbox.backend} sandbox</span>
-              <span className="ml-auto">
-                {pending
-                  ? operation.pending
-                    ? "Syncing…"
-                    : notice?.title
-                  : ""}
-              </span>
-              <ChevronUpIcon className="size-3" />
-            </button>
-          </DropdownMenuTrigger>
-        </Tooltip>
-        <DropdownMenuContent
-          side="top"
-          align="start"
-          className="w-52"
-          sideOffset={8}
-        >
-          <DropdownMenuItem
-            disabled={pending || !actions}
-            onSelect={() => {
-              void actions?.sync();
-            }}
-          >
-            <RefreshCwIcon className="size-3.5 mr-2" />
-            Sync
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            disabled={!actions || sandbox.manifest === null}
-            onSelect={() => {
-              void actions?.editManifest();
-            }}
-          >
-            <FileCodeIcon className="size-3.5 mr-2" />
-            Edit manifest…
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+    <div className="mt-5 min-w-0">
+      {notice ? (
+        <SandboxSyncStatus notice={notice} />
+      ) : (
+        <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 SandboxDetails() {
+  const section = usePanelSection();
+  const connected = useAtomValue(isConnectedAtom);
+  const notice = useAtomValue(connectionNoticeAtom);
+  const preparation = useAtomValue(preparationAtom);
+  const progress = useAtomValue(startupProgressAtom);
+  const [expanded, setExpanded] = useAtom(sandboxDetailsExpandedAtom);
+  const startup: DisplayConnectionNotice | null =
+    notice?.kind === "startup"
+      ? { ...notice, ready: false }
+      : preparation || progress
+        ? {
+            kind: "startup",
+            sandbox: true,
+            title: "Notebook started",
+            description: "The notebook is ready to run.",
+            pending: false,
+            ready: true,
+            error: null,
+          }
+        : null;
+  return (
+    <section
+      id={`sandbox-details-${section}`}
+      aria-label="Sandbox 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" && (
+        <SandboxSyncStatus notice={{ ...notice, ready: false }} />
+      )}
+      {startup && <SandboxStartupPanel notice={startup} />}
+      {connected && (
+        <SandboxSyncDetails
+          notice={notice?.kind === "sync" ? { ...notice, ready: false } : null}
+        />
+      )}
+      {connected && (!notice || notice.pending) && <SandboxActions />}
+    </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/sandbox-toggle.tsx

@@ -0,0 +1,52 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { useAtom, useAtomValue } from "jotai";
+import { ChevronDownIcon } from "lucide-react";
+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 { sandboxDetailsExpandedAtom } from "./sandbox-details-state";
+
+export function SandboxToggle({ section }: { section: PanelSection }) {
+  const sandbox = useAtomValue(sandboxAtom);
+  const notice = useAtomValue(connectionNoticeAtom);
+  const [expanded, setExpanded] = useAtom(sandboxDetailsExpandedAtom);
+  if (!sandbox?.backend) {
+    return null;
+  }
+  const status = notice ? (notice.pending ? "pending" : "error") : "healthy";
+  return (
+    <button
+      type="button"
+      aria-label={`${sandbox.backend} sandbox`}
+      aria-expanded={expanded}
+      aria-controls={`sandbox-details-${section}`}
+      title={notice?.title ?? "Sandbox details"}
+      className={cn(
+        "flex 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 === "error" ? "text-(--red-11)" : "text-foreground",
+      )}
+      onClick={() => setExpanded(!expanded)}
+    >
+      <output
+        aria-label={notice?.title ?? "Sandbox healthy"}
+        className={cn(
+          "size-1.5 shrink-0 rounded-full",
+          status === "error"
+            ? "bg-(--red-9)"
+            : status === "pending"
+              ? "bg-muted-foreground motion-safe:animate-pulse"
+              : "bg-(--grass-9)",
+        )}
+      />
+      {sandbox.backend} sandbox
+      <ChevronDownIcon
+        aria-hidden={true}
+        className={cn(
+          "size-3 shrink-0 text-muted-foreground",
+          expanded && "rotate-180",
+        )}
+      />
+    </button>
+  );
+}

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

@@ -34,6 +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 { useTheme } from "@/theme/useTheme";
 import {
   LazyAgentPanel,
@@ -389,6 +390,9 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
                 {selectedPanel}
               </span>
             )}
+            {selectedPanel === "packages" && (
+              <SandboxToggle section="sidebar" />
+            )}
             <Button
               data-testid="close-helper-pane"
               className="m-0"
@@ -544,6 +548,9 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
           <BackendConnectionStatus />
           <LspStatus />
           <div className="flex-1" />
+          {selectedDeveloperPanelTab === "packages" && (
+            <SandboxToggle section="developer-panel" />
+          )}
           <Button
             size="xs"
             variant="text"