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

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>

package/src/components/editor/chrome/wrapper/footer-items/runtime-settings.tsx

@@ -2,6 +2,8 @@
 
 import {
   ChevronDownIcon,
+  ExternalLinkIcon,
+  InfoIcon,
   PowerOffIcon,
   ZapIcon,
   ZapOffIcon,
@@ -15,7 +17,9 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { ExternalLink } from "@/components/ui/links";
 import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { useRequestClient } from "@/core/network/requests";
 import { isWasm } from "@/core/wasm/utils";
@@ -99,117 +103,167 @@ export const RuntimeSettings: React.FC<RuntimeSettingsProps> = ({
         </FooterItem>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-64">
-        <DropdownMenuLabel>Runtime reactivity</DropdownMenuLabel>
+        <DropdownMenuLabel>
+          <div className="flex items-center justify-between w-full">
+            <span>Runtime reactivity</span>
+            <ExternalLink href="https://links.marimo.app/runtime-configuration">
+              <span className="text-xs font-normal flex items-center gap-1">
+                Docs
+                <ExternalLinkIcon className="w-3 h-3" />
+              </span>
+            </ExternalLink>
+          </div>
+        </DropdownMenuLabel>
         <DropdownMenuSeparator />
 
-        {/* On startup toggle */}
-        <DisableIfOverridden name="runtime.auto_instantiate">
-          <div className="flex items-center justify-between px-2 py-2">
-            <div className="flex items-center space-x-2">
-              {config.runtime.auto_instantiate ? (
-                <ZapIcon size={14} className="text-amber-500" />
-              ) : (
-                <ZapOffIcon size={14} className="text-muted-foreground" />
-              )}
-              <div>
-                <div className="text-sm font-medium">On startup</div>
-                <div className="text-xs text-muted-foreground">
-                  {config.runtime.auto_instantiate ? "autorun" : "lazy"}
+        <TooltipProvider>
+          {/* On startup toggle */}
+          <DisableIfOverridden name="runtime.auto_instantiate">
+            <div className="flex items-center justify-between px-2 py-2">
+              <div className="flex items-center space-x-2">
+                {config.runtime.auto_instantiate ? (
+                  <ZapIcon size={14} className="text-amber-500" />
+                ) : (
+                  <ZapOffIcon size={14} className="text-muted-foreground" />
+                )}
+                <div>
+                  <div className="text-sm font-medium flex items-center gap-1">
+                    On startup
+                    <Tooltip
+                      content={
+                        <div className="max-w-[200px]">
+                          Whether to automatically run the notebook on startup
+                        </div>
+                      }
+                    >
+                      <InfoIcon className="w-3 h-3" />
+                    </Tooltip>
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {config.runtime.auto_instantiate ? "autorun" : "lazy"}
+                  </div>
                 </div>
               </div>
+              <Switch
+                checked={config.runtime.auto_instantiate}
+                onCheckedChange={handleStartupToggle}
+                size="sm"
+              />
             </div>
-            <Switch
-              checked={config.runtime.auto_instantiate}
-              onCheckedChange={handleStartupToggle}
-              size="sm"
-            />
-          </div>
-        </DisableIfOverridden>
+          </DisableIfOverridden>
 
-        <DropdownMenuSeparator />
+          <DropdownMenuSeparator />
 
-        {/* On cell change toggle */}
-        <DisableIfOverridden name="runtime.on_cell_change">
-          <div className="flex items-center justify-between px-2 py-2">
-            <div className="flex items-center space-x-2">
-              {config.runtime.on_cell_change === "autorun" ? (
-                <ZapIcon size={14} className="text-amber-500" />
-              ) : (
-                <ZapOffIcon size={14} className="text-muted-foreground" />
-              )}
-              <div>
-                <div className="text-sm font-medium">On cell change</div>
-                <div className="text-xs text-muted-foreground">
-                  {config.runtime.on_cell_change}
+          {/* On cell change toggle */}
+          <DisableIfOverridden name="runtime.on_cell_change">
+            <div className="flex items-center justify-between px-2 py-2">
+              <div className="flex items-center space-x-2">
+                {config.runtime.on_cell_change === "autorun" ? (
+                  <ZapIcon size={14} className="text-amber-500" />
+                ) : (
+                  <ZapOffIcon size={14} className="text-muted-foreground" />
+                )}
+                <div>
+                  <div className="text-sm font-medium flex items-center gap-1">
+                    On cell change
+                    <Tooltip
+                      content={
+                        <div className="max-w-[300px]">
+                          Whether to automatically run dependent cells after
+                          running a cell
+                        </div>
+                      }
+                    >
+                      <InfoIcon className="w-3 h-3" />
+                    </Tooltip>
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    {config.runtime.on_cell_change}
+                  </div>
                 </div>
               </div>
+              <Switch
+                checked={config.runtime.on_cell_change === "autorun"}
+                onCheckedChange={handleCellChangeToggle}
+                size="sm"
+              />
             </div>
-            <Switch
-              checked={config.runtime.on_cell_change === "autorun"}
-              onCheckedChange={handleCellChangeToggle}
-              size="sm"
-            />
-          </div>
-        </DisableIfOverridden>
+          </DisableIfOverridden>
 
-        {!isWasm() && (
-          <>
-            <DropdownMenuSeparator />
+          {!isWasm() && (
+            <>
+              <DropdownMenuSeparator />
 
-            {/* On module change dropdown */}
-            <DisableIfOverridden name="runtime.auto_reload">
-              <div className="px-2 py-1">
-                <div className="flex items-center space-x-2 mb-2">
-                  {config.runtime.auto_reload === "off" && (
-                    <PowerOffIcon size={14} className="text-muted-foreground" />
-                  )}
-                  {config.runtime.auto_reload === "lazy" && (
-                    <ZapOffIcon size={14} className="text-muted-foreground" />
-                  )}
-                  {config.runtime.auto_reload === "autorun" && (
-                    <ZapIcon size={14} className="text-amber-500" />
-                  )}
-                  <div>
-                    <div className="text-sm font-medium">On module change</div>
-                    <div className="text-xs text-muted-foreground">
-                      {config.runtime.auto_reload}
+              {/* On module change dropdown */}
+              <DisableIfOverridden name="runtime.auto_reload">
+                <div className="px-2 py-1">
+                  <div className="flex items-center space-x-2 mb-2">
+                    {config.runtime.auto_reload === "off" && (
+                      <PowerOffIcon
+                        size={14}
+                        className="text-muted-foreground"
+                      />
+                    )}
+                    {config.runtime.auto_reload === "lazy" && (
+                      <ZapOffIcon size={14} className="text-muted-foreground" />
+                    )}
+                    {config.runtime.auto_reload === "autorun" && (
+                      <ZapIcon size={14} className="text-amber-500" />
+                    )}
+                    <div>
+                      <div className="text-sm font-medium flex items-center gap-1">
+                        On module change
+                        <Tooltip
+                          content={
+                            <div className="max-w-[300px]">
+                              Whether to run affected cells, mark them as stale,
+                              or do nothing when an external module is updated
+                            </div>
+                          }
+                        >
+                          <InfoIcon className="w-3 h-3" />
+                        </Tooltip>
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {config.runtime.auto_reload}
+                      </div>
                     </div>
                   </div>
+                  <div className="space-y-1">
+                    {["off", "lazy", "autorun"].map((option) => (
+                      <button
+                        key={option}
+                        onClick={() =>
+                          handleModuleReloadChange(
+                            option as "off" | "lazy" | "autorun",
+                          )
+                        }
+                        className={cn(
+                          "w-full flex items-center px-2 py-1 text-sm rounded hover:bg-accent",
+                          option === config.runtime.auto_reload && "bg-accent",
+                        )}
+                      >
+                        {option === "off" && (
+                          <PowerOffIcon size={12} className="mr-2" />
+                        )}
+                        {option === "lazy" && (
+                          <ZapOffIcon size={12} className="mr-2" />
+                        )}
+                        {option === "autorun" && (
+                          <ZapIcon size={12} className="mr-2" />
+                        )}
+                        <span className="capitalize">{option}</span>
+                        {option === config.runtime.auto_reload && (
+                          <span className="ml-auto">✓</span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
                 </div>
-                <div className="space-y-1">
-                  {["off", "lazy", "autorun"].map((option) => (
-                    <button
-                      key={option}
-                      onClick={() =>
-                        handleModuleReloadChange(
-                          option as "off" | "lazy" | "autorun",
-                        )
-                      }
-                      className={cn(
-                        "w-full flex items-center px-2 py-1 text-sm rounded hover:bg-accent",
-                        option === config.runtime.auto_reload && "bg-accent",
-                      )}
-                    >
-                      {option === "off" && (
-                        <PowerOffIcon size={12} className="mr-2" />
-                      )}
-                      {option === "lazy" && (
-                        <ZapOffIcon size={12} className="mr-2" />
-                      )}
-                      {option === "autorun" && (
-                        <ZapIcon size={12} className="mr-2" />
-                      )}
-                      <span className="capitalize">{option}</span>
-                      {option === config.runtime.auto_reload && (
-                        <span className="ml-auto">✓</span>
-                      )}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </DisableIfOverridden>
-          </>
-        )}
+              </DisableIfOverridden>
+            </>
+          )}
+        </TooltipProvider>
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/components/editor/renderers/vertical-layout/__tests__/useFocusFirstEditor.test.ts

@@ -12,6 +12,8 @@ describe("useFocusFirstEditor", () => {
       cb(0);
       return 0;
     });
+    // Mock document.hasFocus() to return true so focus logic runs
+    vi.spyOn(document, "hasFocus").mockReturnValue(true);
   });
 
   afterEach(() => {
@@ -120,4 +122,29 @@ describe("useFocusFirstEditor", () => {
       writable: true,
     });
   });
+
+  it("should not focus when document does not have focus", () => {
+    // Mock document.hasFocus() to return false (e.g., when embedded in iframe)
+    vi.spyOn(document, "hasFocus").mockReturnValue(false);
+
+    const mockEditor = { focus: vi.fn() };
+    vi.spyOn(cellsModule, "getNotebook").mockReturnValue({
+      cellIds: { iterateTopLevelIds: ["cell-1"] },
+      cellData: {
+        "cell-1": { config: { hide_code: false } },
+      },
+      cellHandles: {
+        "cell-1": { current: { editorView: mockEditor } },
+      },
+    } as unknown as cellsModule.NotebookState);
+
+    renderHook(() => useFocusFirstEditor());
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    // Focus should NOT be called when document doesn't have focus
+    expect(mockEditor.focus).not.toHaveBeenCalled();
+  });
 });

package/src/components/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -19,6 +19,12 @@ export function useFocusFirstEditor() {
     const timeout = setTimeout(() => {
       // Let the DOM render
       requestAnimationFrame(() => {
+        // Skip auto-focus if the document doesn't have focus to avoid
+        // stealing focus from outside (e.g., when embedded in an iframe)
+        if (!document.hasFocus()) {
+          return;
+        }
+
         // Check if the URL contains a scrollTo parameter
         const hash = window.location.hash;
         const cellName = extractCellNameFromHash(hash);

package/src/components/utils/lazy-mount.tsx

@@ -1,5 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { type PropsWithChildren } from "react";
+import React, {
+  Activity,
+  type ActivityProps,
+  type PropsWithChildren,
+} from "react";
 
 interface Props {
   isOpen: boolean;
@@ -12,13 +16,30 @@ export const LazyMount: React.FC<PropsWithChildren<Props>> = ({
   isOpen,
   children,
 }) => {
-  const [isMounted, setIsMounted] = React.useState(false);
+  const [hasMountedBefore, setHasMountedBefore] = React.useState(false);
 
-  React.useEffect(() => {
-    if (isOpen && !isMounted) {
-      setIsMounted(true);
-    }
-  }, [isOpen, isMounted]);
+  if (isOpen && !hasMountedBefore) {
+    setHasMountedBefore(true);
+  }
 
-  return isMounted ? children : null;
+  return hasMountedBefore || isOpen ? children : null;
+};
+
+/**
+ * Wraps a component in an Activity component. It is not mounted until it is open for the first time.
+ */
+export const LazyActivity: React.FC<PropsWithChildren<ActivityProps>> = (
+  props,
+) => {
+  const [hasMountedBefore, setHasMountedBefore] = React.useState(false);
+
+  if (props.mode === "visible" && !hasMountedBefore) {
+    setHasMountedBefore(true);
+  }
+
+  if (hasMountedBefore) {
+    return <Activity {...props} />;
+  }
+
+  return null;
 };

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

@@ -1594,6 +1594,8 @@ const cellDataAtoms = splitAtom(
 );
 export const useCellDataAtoms = () => useAtom(cellDataAtoms);
 
+export const cellsRuntimeAtom = atom((get) => get(notebookAtom).cellRuntime);
+
 export const notebookIsRunningAtom = atom((get) =>
   notebookIsRunning(get(notebookAtom)),
 );

package/src/core/cells/scrollCellIntoView.ts

@@ -53,8 +53,9 @@ export function focusAndScrollCellIntoView({
       Logger.warn("scrollCellIntoView: editor not found", cellId);
       return;
     }
-    // If already focused, do nothing.
-    if (editor.hasFocus) {
+    // Skip auto-focus if already focused, or if the document doesn't have
+    // focus to avoid stealing focus from outside (e.g., when embedded in an iframe)
+    if (editor.hasFocus || !document.hasFocus()) {
       return;
     }
 

package/src/core/codemirror/cm.ts

@@ -64,6 +64,7 @@ import { getCurrentLanguageAdapter } from "./language/commands";
 import { adaptiveLanguageConfiguration } from "./language/extension";
 import { dndBundle } from "./misc/dnd";
 import { pasteBundle } from "./misc/paste";
+import { stringsAutoCloseBraces } from "./misc/string-braces";
 import { reactiveReferencesBundle } from "./reactive-references/extension";
 import { darkTheme } from "./theme/dark";
 import { lightTheme } from "./theme/light";
@@ -203,6 +204,7 @@ export const basicBundle = (opts: CodeMirrorSetupOpts): Extension[] => {
     hintTooltip(lspConfig),
     copilotBundle(completionConfig),
     foldGutter(),
+    stringsAutoCloseBraces(),
     closeBrackets(),
     completionKeymap(),
     // to avoid clash with charDeleteBackward keymap