@marimo-team/frontend 0.19.3-dev4 → 0.19.3-dev42

package/src/__tests__/mount.test.ts

@@ -0,0 +1,128 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { connectionAtom } from "@/core/network/connection";
+import { store } from "@/core/state/jotai";
+import { WebSocketState } from "@/core/websocket/types";
+import { mount, visibleForTesting } from "../mount";
+
+// Mock React DOM
+vi.mock("react-dom/client", () => ({
+  createRoot: vi.fn(() => ({
+    render: vi.fn(),
+  })),
+}));
+
+// Mock static state
+vi.mock("@/core/static/static-state", () => ({
+  isStaticNotebook: vi.fn(() => false),
+}));
+
+// Mock other side-effect modules
+vi.mock("@/core/vscode/vscode-bindings", () => ({
+  maybeRegisterVSCodeBindings: vi.fn(),
+}));
+
+vi.mock("@/plugins/plugins", () => ({
+  initializePlugins: vi.fn(),
+}));
+
+vi.mock("@/core/network/auth", () => ({
+  cleanupAuthQueryParams: vi.fn(),
+}));
+
+vi.mock("@/utils/vitals", () => ({
+  reportVitals: vi.fn(),
+}));
+
+// Mock preloadPage
+vi.mock("@/core/MarimoApp", () => ({
+  MarimoApp: () => null,
+  preloadPage: vi.fn(),
+}));
+
+describe("mount", () => {
+  const mockElement = document.createElement("div");
+
+  beforeEach(() => {
+    visibleForTesting.reset();
+    // Reset connection atom to initial state
+    store.set(connectionAtom, { state: WebSocketState.NOT_STARTED });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const baseOptions = {
+    filename: "test.py",
+    code: "",
+    version: "0.0.1",
+    mode: "edit" as const,
+    config: {},
+    configOverrides: {},
+    appConfig: {},
+    view: { showAppCode: true },
+    serverToken: "",
+  };
+
+  describe("connection state initialization", () => {
+    it("should set connection to CONNECTING when runtimeConfig has lazy=false", () => {
+      mount(
+        {
+          ...baseOptions,
+          runtimeConfig: [{ url: "http://localhost:8080", lazy: false }],
+        },
+        mockElement,
+      );
+
+      const connection = store.get(connectionAtom);
+      expect(connection.state).toBe(WebSocketState.CONNECTING);
+    });
+
+    it("should keep connection as NOT_STARTED when runtimeConfig has lazy=true", () => {
+      mount(
+        {
+          ...baseOptions,
+          runtimeConfig: [{ url: "http://localhost:8080", lazy: true }],
+        },
+        mockElement,
+      );
+
+      const connection = store.get(connectionAtom);
+      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+    });
+
+    it("should keep connection as NOT_STARTED when no runtimeConfig is provided", () => {
+      mount(
+        {
+          ...baseOptions,
+          runtimeConfig: [],
+        },
+        mockElement,
+      );
+
+      const connection = store.get(connectionAtom);
+      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+    });
+
+    it("should keep connection as NOT_STARTED for static notebooks even with lazy=false", async () => {
+      const { isStaticNotebook } = await import("@/core/static/static-state");
+      vi.mocked(isStaticNotebook).mockReturnValue(true);
+
+      // Reset mount state to allow another mount
+      visibleForTesting.reset();
+
+      mount(
+        {
+          ...baseOptions,
+          runtimeConfig: [{ url: "http://localhost:8080", lazy: false }],
+        },
+        mockElement,
+      );
+
+      const connection = store.get(connectionAtom);
+      expect(connection.state).toBe(WebSocketState.NOT_STARTED);
+    });
+  });
+});

package/src/components/app-config/__tests__/get-dirty-values.test.ts

@@ -1,4 +1,4 @@
-/* Copyright 2024 Marimo. All rights reserved. */
+/* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, test } from "vitest";
 import { getDirtyValues } from "../user-config-form";

package/src/components/app-config/user-config-form.tsx

@@ -69,7 +69,7 @@ export function getDirtyValues<T extends FieldValues>(
   dirtyFields: Partial<Record<keyof T, unknown>>,
 ): Partial<T> {
   const result: Partial<T> = {};
-  for (const key of Object.keys(dirtyFields) as Array<keyof T>) {
+  for (const key of Object.keys(dirtyFields) as (keyof T)[]) {
     const dirty = dirtyFields[key];
     if (dirty === true) {
       result[key] = values[key];

package/src/components/chat/acp/agent-panel.tsx

@@ -677,7 +677,7 @@ const AgentPanel: React.FC = () => {
     ? getAgentWebSocketUrl(selectedTab.agentId)
     : NO_WS_SET;
   const { sendUpdateFile, sendFileDetails } = useRequestClient();
-  const isCreatingNewSession = useRef(false);
+  const creatingOrResumingSession = useRef(false);
 
   const acpClient = useAcpClient({
     wsUrl,
@@ -716,6 +716,7 @@ const AgentPanel: React.FC = () => {
     sessionMode,
     activeSessionId,
     agent,
+    clearNotifications,
   } = acpClient;
 
   useEffect(() => {
@@ -757,40 +758,42 @@ const AgentPanel: React.FC = () => {
       return;
     }
 
-    // If there is an active session, we should stop it
-    if (activeSessionId) {
-      setActiveSessionId(null);
-      await agent.cancel({ sessionId: activeSessionId }).catch((error) => {
-        logger.error("Failed to cancel active session", { error });
-      });
-    }
+    creatingOrResumingSession.current = true;
+
+    try {
+      // If there is an active session, we should stop it
+      if (activeSessionId) {
+        await agent.cancel({ sessionId: activeSessionId }).catch((error) => {
+          logger.error("Failed to cancel active session", { error });
+        });
+        clearNotifications(activeSessionId);
+        setActiveSessionId(null);
+      }
 
-    // Get the selected model from the current session state
-    const currentModel = selectedTab?.selectedModel ?? null;
-    logger.debug("Creating new agent session", { model: currentModel });
-    isCreatingNewSession.current = true;
-    const newSession = await agent
-      .newSession({
+      // Get the selected model from the current session state
+      const currentModel = selectedTab?.selectedModel ?? null;
+      logger.debug("Creating new agent session", { model: currentModel });
+      const newSession = await agent.newSession({
         cwd: getCwd(),
         mcpServers: [],
         _meta: currentModel ? { model: currentModel } : undefined,
-      })
-      .finally(() => {
-        isCreatingNewSession.current = false;
       });
 
-    // Capture models from the response
-    if (newSession.models) {
-      logger.debug("Session models received", { models: newSession.models });
-      setSessionModels(newSession.models);
-    }
+      // Capture models from the response
+      if (newSession.models) {
+        logger.debug("Session models received", { models: newSession.models });
+        setSessionModels(newSession.models);
+      }
 
-    setSessionState((prev) =>
-      updateSessionExternalAgentSessionId(
-        prev,
-        newSession.sessionId as ExternalAgentSessionId,
-      ),
-    );
+      setSessionState((prev) =>
+        updateSessionExternalAgentSessionId(
+          prev,
+          newSession.sessionId as ExternalAgentSessionId,
+        ),
+      );
+    } finally {
+      creatingOrResumingSession.current = false;
+    }
   });
 
   const handleResumeSession = useEvent(
@@ -804,23 +807,28 @@ const AgentPanel: React.FC = () => {
       if (!agent.loadSession) {
         throw new Error("Agent does not support loading sessions");
       }
-      const loadedSession = await agent.loadSession({
-        sessionId: previousSessionId,
-        cwd: getCwd(),
-        mcpServers: [],
-      });
-
-      // Capture models from the response if available
-      if (loadedSession?.models) {
-        logger.debug("Session models received", {
-          models: loadedSession.models,
+      creatingOrResumingSession.current = true;
+      try {
+        const loadedSession = await agent.loadSession({
+          sessionId: previousSessionId,
+          cwd: getCwd(),
+          mcpServers: [],
         });
-        setSessionModels(loadedSession.models);
-      }
 
-      setSessionState((prev) =>
-        updateSessionExternalAgentSessionId(prev, previousSessionId),
-      );
+        // Capture models from the response if available
+        if (loadedSession?.models) {
+          logger.debug("Session models received", {
+            models: loadedSession.models,
+          });
+          setSessionModels(loadedSession.models);
+        }
+
+        setSessionState((prev) =>
+          updateSessionExternalAgentSessionId(prev, previousSessionId),
+        );
+      } finally {
+        creatingOrResumingSession.current = false;
+      }
     },
   );
 
@@ -838,6 +846,11 @@ const AgentPanel: React.FC = () => {
       return;
     }
 
+    // Prevent race conditions
+    if (creatingOrResumingSession.current) {
+      return;
+    }
+
     // If there is an available session, resume it, otherwise create a new one
     const createOrResumeSession = async () => {
       const availableSession = tabLastActiveSessionId ?? activeSessionId;

package/src/components/chat/chat-utils.ts

@@ -8,7 +8,6 @@ import type {
   InvokeAiToolRequest,
   InvokeAiToolResponse,
 } from "@/core/network/types";
-import type { ChatMessage } from "@/plugins/impl/chat/types";
 import { blobToString } from "@/utils/fileToBase64";
 import { Logger } from "@/utils/Logger";
 import { getAICompletionBodyWithAttachments } from "../editor/ai/completion-utils";
@@ -68,7 +67,6 @@ function stringifyTextParts(parts: UIMessage["parts"]): string {
 export async function buildCompletionRequestBody(
   messages: UIMessage[],
 ): Promise<{
-  messages: ChatMessage[]; // Deprecated. TODO: Remove in the future
   uiMessages: UIMessage[];
   context?: (null | components["schemas"]["AiCompletionContext"]) | undefined;
   includeOtherCode: string;
@@ -91,25 +89,8 @@ export async function buildCompletionRequestBody(
     };
   }
 
-  function toChatMessage(message: UIMessage, isLast: boolean): ChatMessage {
-    // Clone parts to avoid mutating the original message
-    const parts = [...message.parts];
-    if (isLast) {
-      parts.push(...completionBody.attachments);
-    }
-    return {
-      id: message.id,
-      role: message.role,
-      content: stringifyTextParts(message.parts), // This is no longer used in the backend
-      parts,
-    };
-  }
-
   return {
     ...completionBody.body,
-    messages: messages.map((m, idx) =>
-      toChatMessage(m, idx === messages.length - 1),
-    ),
     uiMessages: messages.map((m, idx) =>
       addAttachmentsToMessage(m, idx === messages.length - 1),
     ),

package/src/components/data-table/column-header.tsx

@@ -593,7 +593,7 @@ const PopoverFilterByValues = <TData, TValue>({
       <>
         <Command className="text-sm outline-hidden" shouldFilter={false}>
           <CommandInput
-            placeholder="Search"
+            placeholder={`Search among the top ${data.length} values`}
             autoFocus={true}
             onValueChange={(value) => setQuery(value.trim())}
           />

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/actions/name-cell-input.tsx

@@ -93,11 +93,17 @@ export const NameCellContentEditable: React.FC<{
         onChange={inputProps.onChange}
         onBlur={inputProps.onBlur}
         onFocus={inputProps.onFocus}
-        onKeyDown={Events.onEnter((e) => {
-          if (e.target instanceof HTMLElement) {
-            e.target.blur();
+        onKeyDown={(e) => {
+          // Prevent all key presses from triggering hotkeys
+          e.stopPropagation();
+
+          // On Enter, blur the input to commit the change
+          if (e.key === "Enter") {
+            if (e.target instanceof HTMLElement) {
+              e.target.blur();
+            }
           }
-        })}
+        }}
       >
         {value}
       </span>

package/src/components/editor/ai/completion-handlers.tsx

@@ -124,7 +124,7 @@ export const AcceptCompletionButton: React.FC<{
             size={size}
             disabled={isLoading}
             onClick={handleAcceptAndRun}
-            className={`${baseClasses} rounded-l-none px-1.5 ${borderless && "border-0 border-l-1"} ${playButtonStyles}`}
+            className={`${baseClasses} rounded-l-none px-1.5 ${borderless && "border-0 border-l"} ${playButtonStyles}`}
           >
             <PlayIcon className="h-2.5 w-2.5" />
           </Button>

package/src/components/editor/alerts/connecting-alert.tsx

@@ -2,6 +2,7 @@
 
 import { useAtomValue } from "jotai";
 import { LoadingEllipsis } from "@/components/icons/loading-ellipsis";
+import { Spinner } from "@/components/icons/spinner";
 import { Button } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
 import {
@@ -10,24 +11,50 @@ import {
   isNotStartedAtom,
 } from "@/core/network/connection";
 import { useConnectToRuntime } from "@/core/runtime/config";
+import { Banner } from "@/plugins/impl/common/error-banner";
 import { Tooltip } from "../../ui/tooltip";
 import { FloatingAlert } from "./floating-alert";
 
 const SHORT_DELAY_MS = 1000; // 1 second
+const LONG_DELAY_MS = 5000; // 5 seconds
 
 export const ConnectingAlert: React.FC = () => {
   const isConnecting = useAtomValue(isConnectingAtom);
   const isClosed = useAtomValue(isClosedAtom);
 
   if (isConnecting) {
+    const subtleNotification = (
+      <Tooltip content="Connecting to a marimo runtime">
+        <div className="flex items-center">
+          <LoadingEllipsis size={5} className="text-yellow-500" />
+        </div>
+      </Tooltip>
+    );
+
+    const longNotification = (
+      <Banner
+        kind="info"
+        className="flex flex-col rounded py-2 px-4 animate-in slide-in-from-top w-fit"
+      >
+        <div className="flex flex-col gap-4 justify-between items-start text-muted-foreground text-base">
+          <div className="flex items-center gap-2">
+            <Spinner className="h-4 w-4" />
+            <p>Connecting to a marimo runtime ...</p>
+          </div>
+        </div>
+      </Banner>
+    );
+
+    // This waits for 1 second to show the subtle notification, then shows the long notification after 5 seconds.
     return (
       <DelayMount milliseconds={SHORT_DELAY_MS}>
-        <div className="absolute top-4 m-0 flex items-center min-h-[28px] left-1/2 transform -translate-x-1/2 z-200 ">
-          <Tooltip content="Connecting to a marimo runtime">
-            <div className="flex items-center">
-              <LoadingEllipsis size={5} className="text-yellow-500" />
-            </div>
-          </Tooltip>
+        <div className="m-0 flex items-center min-h-[28px] fixed top-5 left-1/2 transform -translate-x-1/2 z-200">
+          <DelayMount
+            milliseconds={LONG_DELAY_MS}
+            fallback={subtleNotification}
+          >
+            {longNotification}
+          </DelayMount>
         </div>
       </DelayMount>
     );

package/src/components/editor/chrome/types.ts

@@ -194,10 +194,8 @@ export function isPanelHidden(
   if (panel.hidden) {
     return true;
   }
-  if (panel.requiredCapability) {
-    if (!capabilities[panel.requiredCapability]) {
-      return true;
-    }
+  if (panel.requiredCapability && !capabilities[panel.requiredCapability]) {
+    return true;
   }
   return false;
 }