@marimo-team/frontend 0.19.3-dev8 → 0.19.4-dev0

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

@@ -65,7 +65,7 @@ export const KernelStartupErrorModal: React.FC = () => {
             manager can't install your notebook's dependencies.
           </AlertDialogDescription>
         </AlertDialogHeader>
-        <div className="my-4">
+        <div className="my-4 overflow-hidden">
           <div className="flex items-center justify-between mb-2">
             <span className="text-sm font-medium text-muted-foreground">
               Error Details
@@ -80,7 +80,7 @@ export const KernelStartupErrorModal: React.FC = () => {
               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">
+          <pre className="bg-muted p-4 rounded-md text-sm font-mono overflow-auto max-h-80">
             {error}
           </pre>
         </div>

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

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);