@marimo-team/islands 0.19.2-dev0 → 0.19.3-dev10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.2-dev0",
+  "version": "0.19.3-dev10",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/KernelStartupErrorModal.tsx

@@ -0,0 +1,101 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtom } from "jotai";
+import { CopyIcon, HomeIcon, XCircleIcon } from "lucide-react";
+import { kernelStartupErrorAtom } from "@/core/errors/state";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import { toast } from "../ui/use-toast";
+
+/**
+ * Modal that displays kernel startup errors.
+ * Shows when the kernel fails to start in sandbox mode,
+ * displaying the stderr output so users can diagnose the issue.
+ */
+export const KernelStartupErrorModal: React.FC = () => {
+  const [error, setError] = useAtom(kernelStartupErrorAtom);
+
+  if (error === null) {
+    return null;
+  }
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(error);
+      toast({
+        title: "Copied to clipboard",
+        description: "Error details have been copied to your clipboard.",
+      });
+    } catch {
+      toast({
+        title: "Failed to copy",
+        description: "Could not copy to clipboard.",
+        variant: "danger",
+      });
+    }
+  };
+
+  const handleClose = () => {
+    setError(null);
+  };
+
+  const handleReturnHome = () => {
+    const withoutSearch = document.baseURI.split("?")[0];
+    window.open(withoutSearch, "_self");
+  };
+
+  return (
+    <AlertDialog open={true} onOpenChange={(open) => !open && handleClose()}>
+      <AlertDialogContent className="max-w-2xl">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2 text-destructive">
+            <XCircleIcon className="h-5 w-5" />
+            Kernel Startup Failed
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            The kernel failed to start. This usually happens when the package
+            manager can't install your notebook's dependencies.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="my-4">
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium text-muted-foreground">
+              Error Details
+            </span>
+            <Button
+              variant="outline"
+              size="xs"
+              onClick={handleCopy}
+              className="flex items-center gap-1"
+            >
+              <CopyIcon className="h-3 w-3" />
+              Copy
+            </Button>
+          </div>
+          <pre className="bg-muted p-4 rounded-md text-sm font-mono overflow-auto max-h-80 whitespace-pre-wrap break-words">
+            {error}
+          </pre>
+        </div>
+        <AlertDialogFooter>
+          <Button
+            variant="outline"
+            onClick={handleReturnHome}
+            className="flex items-center gap-2"
+          >
+            <HomeIcon className="h-4 w-4" />
+            Return to Home
+          </Button>
+          <AlertDialogAction onClick={handleClose}>Dismiss</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

package/src/components/editor/notebook-cell.tsx

@@ -585,7 +585,7 @@ const EditableCellComponent = ({
             className={cn(
               className,
               navigationProps.className,
-              "focus:ring-1 focus:ring-(--slate-7) focus:ring-offset-2",
+              "focus:ring-1 focus:ring-(--slate-8) focus:ring-offset-2",
             )}
             ref={cellContainerRef}
             {...cellDomProps(cellId, cellData.name)}
@@ -1032,16 +1032,12 @@ const SetupCellComponent = ({
   const hasConsoleOutput = cellRuntime.consoleOutputs.length > 0;
   const isErrorOutput = isErrorMime(cellRuntime.output?.mimetype);
 
-  const className = clsx(
-    "marimo-cell",
-    "hover-actions-parent z-10 border shadow-sm",
-    "border-(--blue-5)! rounded-sm!",
-    {
-      "needs-run": needsRun,
-      "has-error": cellRuntime.errored,
-      stopped: cellRuntime.stopped,
-    },
-  );
+  const className = clsx("marimo-cell", "hover-actions-parent z-10", {
+    interactive: true,
+    "needs-run": needsRun,
+    "has-error": cellRuntime.errored,
+    stopped: cellRuntime.stopped,
+  });
 
   const handleRefactorWithAI: OnRefactorWithAI = useEvent(
     (opts: { prompt: string; triggerImmediately: boolean }) => {
@@ -1076,7 +1072,7 @@ const SetupCellComponent = ({
             {...mergeProps(navigationProps, {
               className: cn(
                 className,
-                "focus:ring-1 focus:ring-(--blue-7) focus:ring-offset-0",
+                "focus:ring-1 focus:ring-(--slate-8) focus:ring-offset-2",
               ),
               onBlur: closeCompletionHandler,
               onKeyDown: resumeCompletionHandler,
@@ -1086,7 +1082,11 @@ const SetupCellComponent = ({
             tabIndex={-1}
             data-setup-cell={true}
           >
-            <div className={cn("tray")} data-hidden={!isCellCodeShown}>
+            <div
+              className={cn("tray")}
+              data-has-output-above={false}
+              data-hidden={!isCellCodeShown}
+            >
               <StagedAICellBackground
                 cellId={cellId}
                 className="mo-ai-setup-cell"

package/src/core/MarimoApp.tsx

@@ -12,6 +12,7 @@ import { getInitialAppMode } from "@/core/mode";
 import { CssVariables } from "@/theme/ThemeProvider";
 import { reactLazyWithPreload } from "@/utils/lazy";
 import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
+import { KernelStartupErrorModal } from "../components/editor/KernelStartupErrorModal";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
 import { TooltipProvider } from "../components/ui/tooltip";
@@ -91,6 +92,7 @@ const Providers = memo(({ children }: PropsWithChildren) => {
                 {children}
                 <Toaster />
                 <TailwindIndicator />
+                <KernelStartupErrorModal />
               </ModalProvider>
             </LocaleProvider>
           </SlotzProvider>

package/src/core/cells/cells.ts

@@ -1325,10 +1325,7 @@ const {
     };
   },
   addSetupCellIfDoesntExist: (state, action: { code?: string }) => {
-    let { code } = action;
-    if (code == null) {
-      code = "# Initialization code that runs before all other cells";
-    }
+    const { code } = action;
 
     if (state.cellIds.setupCellExists()) {
       // Just focus on the existing setup cell

package/src/core/errors/state.ts

@@ -1,11 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtomValue } from "jotai";
+import { atom, useAtomValue } from "jotai";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 import type { Identified } from "@/utils/typed";
 import { generateUUID } from "@/utils/uuid";
 import type { Banner } from "../kernel/messages";
 
+/**
+ * Atom for storing kernel startup error message.
+ * When set to a non-null value, shows a modal with the error details.
+ */
+export const kernelStartupErrorAtom = atom<string | null>(null);
+
 interface BannerState {
   banners: Identified<Banner>[];
 }

package/src/core/islands/main.ts

@@ -192,6 +192,8 @@ export async function initialize() {
         return;
       case "cache-info":
         return;
+      case "kernel-startup-error":
+        return;
       default:
         logNever(msg.data);
     }

package/src/core/websocket/types.ts

@@ -16,6 +16,7 @@ export const WebSocketClosedReason = {
   KERNEL_DISCONNECTED: "KERNEL_DISCONNECTED",
   ALREADY_RUNNING: "ALREADY_RUNNING",
   MALFORMED_QUERY: "MALFORMED_QUERY",
+  KERNEL_STARTUP_ERROR: "KERNEL_STARTUP_ERROR",
 } as const;
 
 export type WebSocketClosedReason =

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -40,7 +40,7 @@ import {
 } from "../datasets/request-registry";
 import { useDatasetsActions } from "../datasets/state";
 import { UI_ELEMENT_REGISTRY } from "../dom/uiregistry";
-import { useBannersActions } from "../errors/state";
+import { kernelStartupErrorAtom, useBannersActions } from "../errors/state";
 import { FUNCTIONS_REGISTRY } from "../functions/FunctionRegistry";
 import {
   handleCellNotificationeration,
@@ -105,6 +105,7 @@ export function useMarimoKernelConnection(opts: {
   const setCapabilities = useSetAtom(capabilitiesAtom);
   const runtimeManager = useRuntimeManager();
   const setCacheInfo = useSetAtom(cacheInfoAtom);
+  const setKernelStartupError = useSetAtom(kernelStartupErrorAtom);
 
   const handleMessage = (e: MessageEvent<JsonString<NotificationPayload>>) => {
     const msg = jsonParseWithSpecialChar(e.data);
@@ -134,6 +135,11 @@ export function useMarimoKernelConnection(opts: {
       case "interrupted":
         return;
 
+      case "kernel-startup-error":
+        // Full error received via message before websocket close
+        setKernelStartupError(msg.data.error);
+        return;
+
       case "send-ui-element-message": {
         const modelId = msg.data.model_id;
         const uiElement = msg.data.ui_element;
@@ -413,6 +419,17 @@ export function useMarimoKernelConnection(opts: {
           return;
 
         default:
+          // Check for kernel startup error (full error already received via message)
+          if (e.reason === "MARIMO_KERNEL_STARTUP_ERROR") {
+            setConnection({
+              state: WebSocketState.CLOSED,
+              code: WebSocketClosedReason.KERNEL_STARTUP_ERROR,
+              reason: "Failed to start kernel sandbox",
+            });
+            ws.close(); // prevent reconnecting
+            return;
+          }
+
           // Session should be valid
           // - browser tab might have been closed or re-opened
           // - computer might have just woken from sleep

package/src/css/app/Cell.css

@@ -319,6 +319,12 @@
   }
 }
 
+#cell-setup,
+#cell-setup .cm-editor,
+#cell-setup .cm-gutter {
+  background-color: var(--gray-2);
+}
+
 #App.disconnected {
   /* Background determined by disconnected gradient/noise. */