@marimo-team/frontend 0.19.3-dev3 → 0.19.3-dev30

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/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/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;
 }

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

@@ -20,7 +20,7 @@ import { XIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ReorderableList } from "@/components/ui/reorderable-list";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { LazyMount } from "@/components/utils/lazy-mount";
+import { LazyActivity } from "@/components/utils/lazy-mount";
 import { cellErrorCount } from "@/core/cells/cells";
 import { capabilitiesAtom } from "@/core/config/capabilities";
 import { getFeatureFlag } from "@/core/config/feature-flag";
@@ -34,6 +34,7 @@ import {
   PANEL_MAP,
   PANELS,
   type PanelDescriptor,
+  type PanelType,
 } from "../types";
 import { BackendConnectionStatus } from "./footer-items/backend-status";
 import { PanelsWrapper } from "./panels";
@@ -253,6 +254,29 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     return <LazyChatPanel />;
   };
 
+  const SIDEBAR_PANELS: Record<PanelType, React.ReactNode> = {
+    files: <LazyFileExplorerPanel />,
+    variables: <LazySessionPanel />,
+    dependencies: <LazyDependencyGraphPanel />,
+    packages: <LazyPackagesPanel />,
+    outline: <LazyOutlinePanel />,
+    documentation: <LazyDocumentationPanel />,
+    snippets: <LazySnippetsPanel />,
+    ai: renderAiPanel(),
+    errors: <LazyErrorsPanel />,
+    scratchpad: <LazyScratchpadPanel />,
+    tracing: <LazyTracingPanel />,
+    secrets: <LazySecretsPanel />,
+    logs: <LazyLogsPanel />,
+    terminal: (
+      <LazyTerminal
+        visible={isSidebarOpen && selectedPanel === "terminal"}
+        onClose={() => setIsSidebarOpen(false)}
+      />
+    ),
+    cache: <LazyCachePanel />,
+  };
+
   const helpPaneBody = (
     <ErrorBoundary>
       <PanelSectionProvider value="sidebar">
@@ -328,26 +352,14 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
           </div>
           <Suspense>
             <TooltipProvider>
-              {selectedPanel === "files" && <LazyFileExplorerPanel />}
-              {selectedPanel === "variables" && <LazySessionPanel />}
-              {selectedPanel === "dependencies" && <LazyDependencyGraphPanel />}
-              {selectedPanel === "packages" && <LazyPackagesPanel />}
-              {selectedPanel === "outline" && <LazyOutlinePanel />}
-              {selectedPanel === "documentation" && <LazyDocumentationPanel />}
-              {selectedPanel === "snippets" && <LazySnippetsPanel />}
-              {selectedPanel === "ai" && renderAiPanel()}
-              {selectedPanel === "errors" && <LazyErrorsPanel />}
-              {selectedPanel === "scratchpad" && <LazyScratchpadPanel />}
-              {selectedPanel === "tracing" && <LazyTracingPanel />}
-              {selectedPanel === "secrets" && <LazySecretsPanel />}
-              {selectedPanel === "logs" && <LazyLogsPanel />}
-              {selectedPanel === "terminal" && (
-                <LazyTerminal
-                  visible={isSidebarOpen}
-                  onClose={() => setIsSidebarOpen(false)}
-                />
-              )}
-              {selectedPanel === "cache" && <LazyCachePanel />}
+              {Object.entries(SIDEBAR_PANELS).map(([key, Panel]) => (
+                <LazyActivity
+                  key={key}
+                  mode={selectedPanel === key ? "visible" : "hidden"}
+                >
+                  {Panel}
+                </LazyActivity>
+              ))}
             </TooltipProvider>
           </Suspense>
         </div>
@@ -388,6 +400,18 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
     </Panel>
   );
 
+  const DEVELOPER_PANELS: Record<PanelType, React.ReactNode> = {
+    ...SIDEBAR_PANELS,
+    terminal: (
+      <LazyTerminal
+        visible={
+          isDeveloperPanelOpen && selectedDeveloperPanelTab === "terminal"
+        }
+        onClose={() => setIsDeveloperPanelOpen(false)}
+      />
+    ),
+  };
+
   const bottomPanel = (
     <Panel
       ref={developerPanelRef}
@@ -475,43 +499,16 @@ export const AppChrome: React.FC<PropsWithChildren> = ({ children }) => {
         <Suspense fallback={<div />}>
           <PanelSectionProvider value="developer-panel">
             <div className="flex-1 overflow-hidden">
-              {selectedDeveloperPanelTab === "files" && (
-                <LazyFileExplorerPanel />
-              )}
-              {selectedDeveloperPanelTab === "variables" && (
-                <LazySessionPanel />
-              )}
-              {selectedDeveloperPanelTab === "dependencies" && (
-                <LazyDependencyGraphPanel />
-              )}
-              {selectedDeveloperPanelTab === "packages" && (
-                <LazyPackagesPanel />
-              )}
-              {selectedDeveloperPanelTab === "outline" && <LazyOutlinePanel />}
-              {selectedDeveloperPanelTab === "documentation" && (
-                <LazyDocumentationPanel />
-              )}
-              {selectedDeveloperPanelTab === "snippets" && (
-                <LazySnippetsPanel />
-              )}
-              {selectedDeveloperPanelTab === "ai" && renderAiPanel()}
-              {selectedDeveloperPanelTab === "errors" && <LazyErrorsPanel />}
-              {selectedDeveloperPanelTab === "scratchpad" && (
-                <LazyScratchpadPanel />
-              )}
-              {selectedDeveloperPanelTab === "tracing" && <LazyTracingPanel />}
-              {selectedDeveloperPanelTab === "secrets" && <LazySecretsPanel />}
-              {selectedDeveloperPanelTab === "logs" && <LazyLogsPanel />}
-              {/* LazyMount needed for Terminal to avoid spurious connection */}
-              {selectedDeveloperPanelTab === "terminal" && (
-                <LazyMount isOpen={isDeveloperPanelOpen}>
-                  <LazyTerminal
-                    visible={isDeveloperPanelOpen}
-                    onClose={() => setIsDeveloperPanelOpen(false)}
-                  />
-                </LazyMount>
-              )}
-              {selectedDeveloperPanelTab === "cache" && <LazyCachePanel />}
+              {Object.entries(DEVELOPER_PANELS).map(([key, Panel]) => (
+                <LazyActivity
+                  key={key}
+                  mode={
+                    selectedDeveloperPanelTab === key ? "visible" : "hidden"
+                  }
+                >
+                  {Panel}
+                </LazyActivity>
+              ))}
             </div>
           </PanelSectionProvider>
         </Suspense>