@marimo-team/frontend 0.20.5-dev9 → 0.20.5-dev90

package/src/components/datasources/components.tsx

@@ -1,18 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { ChevronRightIcon, LoaderCircle, XIcon } from "lucide-react";
+import { LoaderCircle, XIcon } from "lucide-react";
 import type { CSSProperties } from "react";
+import { TreeChevron } from "@/components/editor/file-tree/tree-actions";
 import type { DataType } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
 import { DATA_TYPE_ICON, getDataTypeColor } from "../datasets/icons";
 
 export const RotatingChevron: React.FC<{ isExpanded: boolean }> = ({
   isExpanded,
-}) => (
-  <ChevronRightIcon
-    className={cn("h-3 w-3 transition-transform", isExpanded && "rotate-90")}
-  />
-);
+}) => <TreeChevron isExpanded={isExpanded} className="h-3 w-3" />;
 
 export const DatasourceLabel: React.FC<{
   children: React.ReactNode;

package/src/components/datasources/datasources.tsx

@@ -3,11 +3,12 @@
 import { CommandList } from "cmdk";
 import { atom, useAtomValue, useSetAtom } from "jotai";
 import { sortBy } from "lodash-es";
-import { PlusIcon, PlusSquareIcon, RefreshCwIcon, XIcon } from "lucide-react";
+import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { DatabaseLogo } from "@/components/databases/icon";
+import { RefreshIconButton } from "@/components/editor/file-tree/tree-actions";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Button } from "@/components/ui/button";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
@@ -265,15 +266,10 @@ const Engine: React.FC<{
   const engineName = internalEngine ? "In-Memory" : connection.name;
   const { previewDataSourceConnection } = useRequestClient();
 
-  const [isSpinning, setIsSpinning] = React.useState(false);
-
   const handleRefreshConnection = async () => {
-    setIsSpinning(true);
     await previewDataSourceConnection({
       engine: connection.name,
     });
-    // Artificially spin the icon if the request is really fast
-    setTimeout(() => setIsSpinning(false), 500);
   };
 
   return (
@@ -288,21 +284,12 @@ const Engine: React.FC<{
           (<EngineVariable variableName={engineName as VariableName} />)
         </span>
         {!internalEngine && (
-          <Tooltip content="Refresh connection">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="ml-auto hover:bg-transparent hover:shadow-none"
-              onClick={handleRefreshConnection}
-            >
-              <RefreshCwIcon
-                className={cn(
-                  "h-4 w-4 text-muted-foreground hover:text-foreground",
-                  isSpinning && "animate-[spin_0.5s]",
-                )}
-              />
-            </Button>
-          </Tooltip>
+          <RefreshIconButton
+            onClick={handleRefreshConnection}
+            tooltip="Refresh connection"
+            className="ml-auto h-4 p-0"
+            iconClassName="h-3.5 w-3.5"
+          />
         )}
       </DatasourceLabel>
       {hasChildren ? (

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -2,6 +2,7 @@
 import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -25,17 +26,7 @@ function createTestWrapper() {
 }
 
 beforeAll(() => {
-  global.ResizeObserver = class ResizeObserver {
-    observe() {
-      // do nothing
-    }
-    unobserve() {
-      // do nothing
-    }
-    disconnect() {
-      // do nothing
-    }
-  };
+  SetupMocks.resizeObserver();
   global.HTMLDivElement.prototype.scrollIntoView = () => {
     // do nothing
   };

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

@@ -27,6 +27,7 @@ export interface ActionButton {
   handleHeadless?: (event?: Event) => void;
   divider?: boolean;
   dropdown?: ActionButton[];
+  additionalKeywords?: string[];
 }
 
 export function isParentAction(
@@ -51,6 +52,10 @@ export function flattenActions(
     if (isParentAction(action)) {
       return flattenActions(action.dropdown, `${prevLabel + action.label} > `);
     }
-    return { ...action, label: prevLabel + action.label };
+    return {
+      ...action,
+      label: prevLabel + action.label,
+      additionalKeywords: action.additionalKeywords,
+    };
   });
 }

package/src/components/editor/actions/useNotebookActions.tsx

@@ -31,6 +31,7 @@ import {
   LayoutTemplateIcon,
   LinkIcon,
   MessagesSquareIcon,
+  NotebookIcon,
   PanelLeftIcon,
   PowerSquareIcon,
   PresentationIcon,
@@ -123,8 +124,13 @@ export function useNotebookActions() {
   const setCommandPaletteOpen = useSetAtom(commandPaletteAtom);
   const setSettingsDialogOpen = useSetAtom(settingDialogAtom);
   const setKeyboardShortcutsOpen = useSetAtom(keyboardShortcutsAtom);
-  const { exportAsMarkdown, readCode, saveCellConfig, updateCellOutputs } =
-    useRequestClient();
+  const {
+    exportAsIPYNB,
+    exportAsMarkdown,
+    readCode,
+    saveCellConfig,
+    updateCellOutputs,
+  } = useRequestClient();
   const takeScreenshots = useEnrichCellOutputs();
 
   const hasDisabledCells = useAtomValue(hasDisabledCellsAtom);
@@ -199,6 +205,27 @@ export function useNotebookActions() {
     setTimeout(() => window.dispatchEvent(afterprint), 0);
   };
 
+  const handleDownloadAsIPYNB = async () => {
+    if (!filename) {
+      toastNotebookMustBeNamed();
+      return;
+    }
+
+    const runDownload = async (progress: ProgressState) => {
+      await updateCellOutputsWithScreenshots({
+        takeScreenshots: () => takeScreenshots({ progress }),
+        updateCellOutputs,
+      });
+      const ipynb = await exportAsIPYNB({ download: false });
+      downloadBlob(
+        new Blob([ipynb], { type: "application/x-ipynb+json" }),
+        Filenames.toIPYNB(document.title),
+      );
+    };
+
+    await withLoadingToast("Downloading IPYNB...", runDownload);
+  };
+
   const actions: ActionButton[] = [
     {
       icon: <DownloadIcon size={14} strokeWidth={1.5} />,
@@ -240,6 +267,11 @@ export function useNotebookActions() {
             );
           },
         },
+        {
+          icon: <NotebookIcon size={14} strokeWidth={1.5} />,
+          label: "Download as ipynb",
+          handle: handleDownloadAsIPYNB,
+        },
         {
           icon: <CodeIcon size={14} strokeWidth={1.5} />,
           label: "Download Python code",
@@ -347,17 +379,20 @@ export function useNotebookActions() {
       label: "Helper panel",
       redundant: true,
       handle: NOOP_HANDLER,
-      dropdown: PANELS.flatMap(({ type: id, Icon, hidden }) => {
-        if (hidden) {
-          return [];
-        }
-        return {
-          label: startCase(id),
-          rightElement: renderCheckboxElement(selectedPanel === id),
-          icon: <Icon size={14} strokeWidth={1.5} />,
-          handle: () => toggleApplication(id),
-        };
-      }),
+      dropdown: PANELS.flatMap(
+        ({ type: id, Icon, hidden, additionalKeywords }) => {
+          if (hidden) {
+            return [];
+          }
+          return {
+            label: startCase(id),
+            rightElement: renderCheckboxElement(selectedPanel === id),
+            icon: <Icon size={14} strokeWidth={1.5} />,
+            handle: () => toggleApplication(id),
+            additionalKeywords,
+          };
+        },
+      ),
     },
 
     {
@@ -478,6 +513,7 @@ export function useNotebookActions() {
       label: "Restart kernel",
       variant: "danger",
       handle: restartKernel,
+      additionalKeywords: ["reset", "reload", "restart"],
     },
     {
       icon: <FastForwardIcon size={14} strokeWidth={1.5} />,
@@ -535,6 +571,7 @@ export function useNotebookActions() {
       label: "User settings",
       handle: () => setSettingsDialogOpen((open) => !open),
       redundant: true,
+      additionalKeywords: ["preferences", "options", "configuration"],
     },
     {
       icon: <ExternalLinkIcon size={14} strokeWidth={1.5} />,

package/src/components/editor/cell/cell-context-menu.tsx

@@ -25,7 +25,7 @@ import { CellOutputId } from "@/core/cells/ids";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import { goToDefinitionAtCursorPosition } from "@/core/codemirror/go-to-definition/utils";
 import { sendToPanelManager } from "@/core/vscode/vscode-bindings";
-import { copyToClipboard } from "@/utils/copy";
+import { copyImageToClipboard, copyToClipboard } from "@/utils/copy";
 import { getImageExtension } from "@/utils/filenames";
 import { Logger } from "@/utils/Logger";
 import type { ActionButton } from "../actions/types";
@@ -127,11 +127,7 @@ export const CellActionsContextMenu = ({
       icon: <ClipboardCopyIcon size={13} strokeWidth={1.5} />,
       handle: async () => {
         if (imageRightClicked) {
-          const response = await fetch(imageRightClicked.src);
-          const blob = await response.blob();
-          const item = new ClipboardItem({ [blob.type]: blob });
-          await navigator.clipboard
-            .write([item])
+          await copyImageToClipboard(imageRightClicked.src)
             .then(() => {
               toast({
                 title: "Copied image to clipboard",

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

@@ -59,6 +59,8 @@ export interface PanelDescriptor {
   defaultSection: PanelSection;
   /** Capability required for this panel to be visible. If the capability is false, the panel is hidden. */
   requiredCapability?: keyof Capabilities;
+  /** Additional search keywords for the command palette */
+  additionalKeywords?: string[];
 }
 
 /**
@@ -73,6 +75,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Files",
     tooltip: "View files",
     defaultSection: "sidebar",
+    additionalKeywords: ["explorer", "browser", "directory"],
   },
   {
     type: "variables",
@@ -80,6 +83,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Variables",
     tooltip: "Explore variables and data sources",
     defaultSection: "sidebar",
+    additionalKeywords: ["state", "scope", "inspector"],
   },
   {
     type: "packages",
@@ -87,6 +91,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Packages",
     tooltip: "Manage packages",
     defaultSection: "sidebar",
+    additionalKeywords: ["dependencies", "pip", "install"],
   },
   {
     type: "ai",
@@ -94,6 +99,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "AI",
     tooltip: "Chat & Agents",
     defaultSection: "sidebar",
+    additionalKeywords: ["chat", "copilot", "assistant"],
   },
   {
     type: "outline",
@@ -101,6 +107,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Outline",
     tooltip: "View outline",
     defaultSection: "sidebar",
+    additionalKeywords: ["toc", "structure", "headings"],
   },
   {
     type: "documentation",
@@ -108,6 +115,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Docs",
     tooltip: "View live docs",
     defaultSection: "sidebar",
+    additionalKeywords: ["reference", "api"],
   },
   {
     type: "dependencies",
@@ -115,6 +123,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Dependencies",
     tooltip: "Explore dependencies",
     defaultSection: "sidebar",
+    additionalKeywords: ["graph", "imports"],
   },
   // Developer panel defaults
   {
@@ -123,6 +132,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Errors",
     tooltip: "View errors",
     defaultSection: "developer-panel",
+    additionalKeywords: ["exceptions", "problems", "diagnostics"],
   },
   {
     type: "scratchpad",
@@ -130,6 +140,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Scratchpad",
     tooltip: "Scratchpad",
     defaultSection: "developer-panel",
+    additionalKeywords: ["scratch", "draft", "playground"],
   },
   {
     type: "tracing",
@@ -137,6 +148,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Tracing",
     tooltip: "View tracing",
     defaultSection: "developer-panel",
+    additionalKeywords: ["profiling", "performance"],
   },
   {
     type: "secrets",
@@ -145,6 +157,7 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "Manage secrets",
     defaultSection: "developer-panel",
     hidden: isWasm(),
+    additionalKeywords: ["env", "environment", "keys", "credentials"],
   },
   {
     type: "logs",
@@ -152,6 +165,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Logs",
     tooltip: "View logs",
     defaultSection: "developer-panel",
+    additionalKeywords: ["console", "stdout"],
   },
   {
     type: "terminal",
@@ -161,6 +175,7 @@ export const PANELS: PanelDescriptor[] = [
     hidden: isWasm(),
     defaultSection: "developer-panel",
     requiredCapability: "terminal",
+    additionalKeywords: ["shell", "console", "bash", "command"],
   },
   {
     type: "snippets",
@@ -168,6 +183,7 @@ export const PANELS: PanelDescriptor[] = [
     label: "Snippets",
     tooltip: "Snippets",
     defaultSection: "developer-panel",
+    additionalKeywords: ["templates", "examples"],
   },
   {
     type: "cache",
@@ -176,6 +192,7 @@ export const PANELS: PanelDescriptor[] = [
     tooltip: "View cache",
     defaultSection: "developer-panel",
     hidden: !getFeatureFlag("cache_panel"),
+    additionalKeywords: ["memory", "memoize"],
   },
 ];
 

package/src/components/editor/connections/add-connection-dialog.tsx

@@ -37,6 +37,8 @@ export const AddConnectionDialogContent: React.FC<{
   defaultTab?: ConnectionTab;
   onClose: () => void;
 }> = ({ defaultTab = "databases", onClose }) => {
+  const [activeTab, setActiveTab] = useState<ConnectionTab>(defaultTab);
+
   const tabHeader = (
     <TabsList className="w-full mb-4">
       <TabsTrigger value="databases" className="flex-1">
@@ -48,6 +50,25 @@ export const AddConnectionDialogContent: React.FC<{
     </TabsList>
   );
 
+  const codeSnippetHint =
+    activeTab === "databases" ? (
+      <>
+        Don't see your database or connection method? A{" "}
+        <ExternalLink href="https://docs.marimo.io/guides/working_with_data/sql/#connecting-to-a-custom-database">
+          code snippet
+        </ExternalLink>{" "}
+        is all you need.
+      </>
+    ) : (
+      <>
+        Don't see your storage or connection method? A{" "}
+        <ExternalLink href="https://docs.marimo.io/guides/working_with_data/remote_storage/#creating-a-storage-connection">
+          code snippet
+        </ExternalLink>{" "}
+        is all you need.
+      </>
+    );
+
   return (
     <DialogContent className="max-h-[75vh] overflow-y-auto">
       <DialogHeader>
@@ -61,10 +82,14 @@ export const AddConnectionDialogContent: React.FC<{
           <ExternalLink href="https://docs.marimo.io/guides/working_with_data/remote_storage/">
             remote storage
           </ExternalLink>{" "}
-          to work with data directly from your notebook.
+          directly from your notebook.
+          <span className="block">{codeSnippetHint}</span>
         </DialogDescription>
       </DialogHeader>
-      <Tabs defaultValue={defaultTab}>
+      <Tabs
+        value={activeTab}
+        onValueChange={(v) => setActiveTab(v as ConnectionTab)}
+      >
         <TabsContent
           value="databases"
           className="mt-0 focus-visible:ring-0 focus-visible:ring-offset-0"

package/src/components/editor/connections/database/__tests__/__snapshots__/as-code.test.ts.snap

@@ -248,16 +248,95 @@ _password = os.environ.get("SNOWFLAKE_PASSWORD", "pass")
 engine = sqlmodel.create_engine(
   URL(
     account="account",
+    database="db",
+    warehouse="warehouse",
+    schema="schema",
+    role="role",
     user="user",
+    password=_password,
+  )
+)"
+`;
+
+exports[`generateDatabaseCode > basic connections > snowflake with MFA 1`] = `
+"from snowflake.sqlalchemy import URL
+import os
+import sqlmodel
+
+_password = os.environ.get("SNOWFLAKE_PASSWORD", "pass")
+engine = sqlmodel.create_engine(
+  URL(
+    account="account",
     database="db",
     warehouse="warehouse",
     schema="schema",
     role="role",
+    user="user",
     password=_password,
+  ),
+  connect_args={"authenticator": "username_password_mfa"},
+)"
+`;
+
+exports[`generateDatabaseCode > basic connections > snowflake with OAuth/PAT 1`] = `
+"from snowflake.sqlalchemy import URL
+import os
+import sqlmodel
+
+_password = os.environ.get("SNOWFLAKE_TOKEN", "my_token")
+engine = sqlmodel.create_engine(
+  URL(
+    account="account",
+    database="db",
+    warehouse="warehouse",
+    schema="schema",
+    role="role",
+    authenticator="oauth",
+    token=_password,
+  )
+)"
+`;
+
+exports[`generateDatabaseCode > basic connections > snowflake with SSO 1`] = `
+"from snowflake.sqlalchemy import URL
+import sqlmodel
+
+engine = sqlmodel.create_engine(
+  URL(
+    account="account",
+    database="db",
+    warehouse="warehouse",
+    schema="schema",
+    role="role",
+    user="user",
+    authenticator="externalbrowser",
   )
 )"
 `;
 
+exports[`generateDatabaseCode > basic connections > snowflake with key pair 1`] = `
+"from snowflake.sqlalchemy import URL
+import os
+import sqlmodel
+
+_password = os.environ.get("SNOWFLAKE_PRIVATE_KEY_PASSPHRASE", "my_passphrase")
+engine = sqlmodel.create_engine(
+  URL(
+    account="account",
+    database="db",
+    warehouse="warehouse",
+    schema="schema",
+    role="role",
+    user="user",
+  ),
+  connect_args={
+    "authenticator": "SNOWFLAKE_JWT",
+    "private_key_file": "/path/to/rsa_key.p8",
+    "private_key_file_pwd": _password,
+  },
+)"
+`;
+
 exports[`generateDatabaseCode > basic connections > sqlite 1`] = `
 "import sqlmodel
 
@@ -362,17 +441,17 @@ exports[`generateDatabaseCode > connections with secrets > snowflake with multip
 import os
 import sqlmodel
 
-_password = os.environ.get("ENV_PASSWORD")
 _account = os.environ.get("ENV_ACCOUNT")
+_password = os.environ.get("ENV_PASSWORD")
 _user = os.environ.get("ENV_USER")
 engine = sqlmodel.create_engine(
   URL(
     account=_account,
-    user=_user,
     database="db",
     warehouse="warehouse",
     schema="schema",
     role="role",
+    user=_user,
     password=_password,
   )
 )"
@@ -563,6 +642,26 @@ DATABASE_URL = f"postgresql://用户:{_password}@localhost:5432/测试数据库"
 engine = sqlmodel.create_engine(DATABASE_URL, connect_args={'sslmode': 'require'})"
 `;
 
+exports[`generateDatabaseCode > edge cases > snowflake key pair without passphrase 1`] = `
+"from snowflake.sqlalchemy import URL
+import sqlmodel
+
+engine = sqlmodel.create_engine(
+  URL(
+    account="account",
+    database="db",
+    warehouse="warehouse",
+    schema="schema",
+    role="role",
+    user="user",
+  ),
+  connect_args={
+    "authenticator": "SNOWFLAKE_JWT",
+    "private_key_file": "/path/to/rsa_key.p8",
+  },
+)"
+`;
+
 exports[`generateDatabaseCode > edge cases > snowflake with all optional fields filled 1`] = `
 "from snowflake.sqlalchemy import URL
 import os
@@ -572,11 +671,11 @@ _password = os.environ.get("SNOWFLAKE_PASSWORD", "pass")
 engine = sqlmodel.create_engine(
   URL(
     account="org-account",
-    user="user",
     database="db",
     warehouse="compute_wh",
     schema="public",
     role="accountadmin",
+    user="user",
     password=_password,
   )
 )"
@@ -591,8 +690,8 @@ _password = os.environ.get("SNOWFLAKE_PASSWORD", "pass")
 engine = sqlmodel.create_engine(
   URL(
     account="account",
-    user="user",
     database="db",
+    user="user",
     password=_password,
   )
 )"
@@ -711,11 +810,11 @@ _password = os.environ.get("SNOWFLAKE_PASSWORD", "pass")
 engine = sqlmodel.create_engine(
   URL(
     account="account-with-password123",
-    user="user",
     database="db",
     warehouse="warehouse",
     schema="schema",
     role="role",
+    user="user",
     password=_password,
   )
 )"
@@ -730,11 +829,11 @@ _password = os.environ.get("SNOWFLAKE_PASSWORD", "pass")
 engine = sqlalchemy.create_engine(
   URL(
     account="account-with-password123",
-    user="user",
     database="db",
     warehouse="warehouse",
     schema="schema",
     role="role",
+    user="user",
     password=_password,
   )
 )"