@marimo-team/frontend 0.24.1-dev42 → 0.24.1-dev44

package/src/components/editor/connections/components.tsx

@@ -21,6 +21,7 @@ import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
+import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
 import {
   ENV_RENDERER,
   SECRET_TEXTAREA_RENDERER,
@@ -134,6 +135,16 @@ export function useInsertCode() {
   };
 }
 
+/** Insert the configured cell supplied by a detected data source. */
+export function useAddDetectedDataSource(onAdd?: () => void) {
+  const insertCode = useInsertCode();
+
+  return (source: DetectedDataSource) => {
+    insertCode(source.code);
+    onAdd?.();
+  };
+}
+
 /**
  * Generic connection form: Zod-driven form with secrets support, a library
  * picker, and Back/Add buttons. Used by both database and storage forms.

package/src/components/editor/connections/quick-add-data-sources.tsx

@@ -1,13 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { PlusIcon, SparklesIcon } from "lucide-react";
+import { useId } from "react";
 import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import type {
   DataSourceDiscoveryGroup,
   DetectedDataSource,
 } from "@/core/datasets/data-source-discovery";
 import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
-import { useInsertCode } from "./components";
+import { useAddDetectedDataSource } from "./components";
 import { cn } from "@/utils/cn";
 
 export const QuickAddDataSources: React.FC<{
@@ -15,22 +16,24 @@ export const QuickAddDataSources: React.FC<{
   sources: DetectedDataSource[];
   onAdd: (source: DetectedDataSource) => void;
 }> = ({ className, sources, onAdd }) => {
+  const titleId = useId();
+
   if (sources.length === 0) {
     return null;
   }
 
   return (
     <section
-      aria-labelledby="quick-add-data-sources-title"
+      aria-labelledby={titleId}
       className={cn(
-        "rounded-full bg-[linear-gradient(135deg,var(--blue-2),var(--purple-3))] px-3 py-2",
+        "rounded-full bg-[linear-gradient(135deg,var(--blue-2),var(--purple-3))] px-3 py-2 dark:bg-[linear-gradient(135deg,var(--blue-2),var(--purple-2))]",
         className,
       )}
     >
       <div className="flex flex-wrap items-center gap-2">
         <div className="mr-1 flex items-center gap-1.5">
-          <SparklesIcon className="h-3.5 w-3.5 text-(--blue-9)" />
-          <h3 id="quick-add-data-sources-title" className="text-sm">
+          <SparklesIcon className="h-3.5 w-3.5 text-(--blue-9) dark:text-(--blue-10)" />
+          <h3 id={titleId} className="text-sm">
             Quick add
           </h3>
         </div>
@@ -44,7 +47,7 @@ export const QuickAddDataSources: React.FC<{
               <button
                 type="button"
                 aria-label={`Add ${source.displayName} connection`}
-                className="inline-flex items-center gap-1 rounded-full border border-border/60 bg-background px-2.5 py-1 text-xs font-medium text-foreground/90 transition-colors hover:border-(--blue-7) focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                className="inline-flex items-center gap-1 rounded-full border border-border/60 bg-background px-2.5 py-1 text-xs font-medium text-foreground/90 transition-colors hover:border-(--blue-7) focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 dark:border-border dark:bg-background/60 dark:hover:bg-accent/80"
                 onClick={() => onAdd(source)}
               >
                 <PlusIcon className="h-3 w-3 text-muted-foreground" />
@@ -101,17 +104,14 @@ export const AutoDiscoveredDataSources: React.FC<{
   className?: string;
   group?: DataSourceDiscoveryGroup;
 }> = ({ onSubmit, className, group }) => {
-  const insertCode = useInsertCode();
+  const addDetectedDataSource = useAddDetectedDataSource(onSubmit);
   const sources = useDetectedDataSources(group);
 
   return (
     <QuickAddDataSources
       className={className}
       sources={sources}
-      onAdd={(source) => {
-        insertCode(source.code);
-        onSubmit?.();
-      }}
+      onAdd={addDetectedDataSource}
     />
   );
 };

package/src/components/editor/controls/__tests__/notebook-menu-dropdown.test.tsx

@@ -1,18 +1,31 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import { Provider } from "jotai";
 import type React from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { ModalProvider } from "@/components/modal/ImperativeModal";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import {
+  type DetectedDataSource,
+  invalidateDataSourceDiscovery,
+} from "@/core/datasets/data-source-discovery";
+import { DiscoverDataSources } from "@/core/datasets/request-registry";
 import { layoutStateAtom } from "@/core/layout/layout";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
 import { isWasm } from "@/core/wasm/utils";
+import { WebSocketState } from "@/core/websocket/types";
 import {
   DEFAULT_EXPORT_OPTIONS,
   exportOptionsAtom,
@@ -20,6 +33,34 @@ import {
 } from "../../actions/export-dialog/state";
 import { NotebookMenuDropdown } from "../notebook-menu-dropdown";
 
+const POSTGRES_SOURCE: DetectedDataSource = {
+  id: "postgres-libpq-environment",
+  integration: "postgres",
+  category: "database",
+  displayName: "PostgreSQL",
+  confidence: "high",
+  origins: [{ type: "environment", label: "Kernel environment" }],
+  configuration: [],
+  code: "engine = create_engine()",
+  hidesWhen: { kind: "dialect", substrings: ["postgres"] },
+};
+
+const S3_SOURCE: DetectedDataSource = {
+  id: "aws-s3-environment",
+  integration: "aws",
+  category: "object-storage",
+  displayName: "AWS S3",
+  confidence: "high",
+  origins: [{ type: "environment", label: "Kernel environment" }],
+  configuration: [],
+  code: "storage = create_s3_storage()",
+  hidesWhen: {
+    kind: "storage",
+    protocols: ["s3"],
+    backendTypes: ["s3"],
+  },
+};
+
 vi.mock("@/core/wasm/utils", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@/core/wasm/utils")>();
   return { ...actual, isWasm: vi.fn(() => false) };
@@ -59,6 +100,7 @@ describe("NotebookMenuDropdown", () => {
     store.set(requestClientAtom, MockRequestClient.create());
     store.set(filenameAtom, "/project/notebook.py");
     store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+    store.set(connectionAtom, { state: WebSocketState.OPEN });
     store.set(kioskModeAtom, false);
     store.set(layoutStateAtom, {
       selectedLayout: "vertical",
@@ -73,11 +115,77 @@ describe("NotebookMenuDropdown", () => {
       addEventListener: vi.fn(),
       removeEventListener: vi.fn(),
     }));
+    invalidateDataSourceDiscovery();
+    vi.spyOn(DiscoverDataSources, "request").mockResolvedValue({
+      request_id: "request-id",
+      sources: [],
+    });
   });
 
   afterEach(() => {
     document.title = "";
     vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it("shows detected databases in the add connection submenu", async () => {
+    vi.mocked(DiscoverDataSources.request).mockResolvedValue({
+      request_id: "request-id",
+      sources: [POSTGRES_SOURCE],
+    });
+
+    render(<NotebookMenuDropdown />, { wrapper });
+    await waitFor(() =>
+      expect(DiscoverDataSources.request).toHaveBeenCalledOnce(),
+    );
+    await act(async () => Promise.resolve());
+    openNotebookMenu();
+    fireEvent.click(
+      await screen.findByRole("menuitem", { name: "Add database connection" }),
+    );
+
+    const suggestion = await screen.findByRole("menuitem", {
+      name: "Add PostgreSQL",
+    });
+    const browseAll = screen.getByRole("menuitem", {
+      name: "Browse all connections",
+    });
+    expect(suggestion).toBeVisible();
+    expect(browseAll).toBeVisible();
+    expect(
+      suggestion.compareDocumentPosition(browseAll) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("shows detected storage in the add remote storage submenu", async () => {
+    vi.mocked(DiscoverDataSources.request).mockResolvedValue({
+      request_id: "request-id",
+      sources: [S3_SOURCE],
+    });
+
+    render(<NotebookMenuDropdown />, { wrapper });
+    await waitFor(() =>
+      expect(DiscoverDataSources.request).toHaveBeenCalledOnce(),
+    );
+    await act(async () => Promise.resolve());
+    openNotebookMenu();
+    fireEvent.click(
+      await screen.findByRole("menuitem", { name: "Add remote storage" }),
+    );
+
+    const suggestion = await screen.findByRole("menuitem", {
+      name: "Add AWS S3",
+    });
+    const browseAll = screen.getByRole("menuitem", {
+      name: "Browse all connections",
+    });
+    expect(suggestion).toBeVisible();
+    expect(browseAll).toBeVisible();
+    expect(
+      suggestion.compareDocumentPosition(browseAll) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
   });
 
   it("returns focus to the notebook menu when the dialog closes", async () => {

package/src/components/storage/storage-inspector.tsx

@@ -8,7 +8,6 @@ import {
   HardDriveIcon,
   HelpCircleIcon,
   LoaderCircle,
-  PlusIcon,
   ViewIcon,
   XIcon,
 } from "lucide-react";
@@ -17,7 +16,7 @@ import { useLocale } from "react-aria";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { PanelEmptyState } from "@/components/editor/chrome/panels/empty-state";
-import { AddConnectionDialog } from "@/components/editor/connections/add-connection-dialog";
+import { AddConnectionButton } from "@/components/editor/connections/add-connection-button";
 import {
   FILE_ICON_COLOR,
   renderFileIcon,
@@ -1011,12 +1010,12 @@ export const StorageInspector: React.FC = () => {
           </span>
         }
         action={
-          <AddConnectionDialog defaultTab="storage">
-            <Button variant="outline" size="sm">
-              Add remote storage
-              <PlusIcon className="h-4 w-4 ml-2" />
-            </Button>
-          </AddConnectionDialog>
+          <AddConnectionButton
+            group="storage"
+            label="Add remote storage"
+            variant="outline"
+            size="sm"
+          />
         }
         icon={<HardDriveIcon className="h-8 w-8" />}
       />
@@ -1076,15 +1075,14 @@ export const StorageInspector: React.FC = () => {
           >
             <HelpCircleIcon className="h-3.5 w-3.5 shrink-0 cursor-help text-muted-foreground hover:text-foreground mr-2" />
           </Tooltip>
-          <AddConnectionDialog defaultTab="storage">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="px-2 border-0 border-l border-muted-background rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
-            >
-              <PlusIcon className="h-4 w-4" />
-            </Button>
-          </AddConnectionDialog>
+          <AddConnectionButton
+            group="storage"
+            label="Add remote storage"
+            compact={true}
+            variant="ghost"
+            size="sm"
+            className="px-2 border-0 border-l border-muted-background rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
+          />
         </div>
         <CommandList className="flex flex-col">
           {namespaces.map((ns) => {

package/src/core/codemirror/language/panel/sql.test.tsx

@@ -0,0 +1,69 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
+import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
+import type { ConnectionName } from "@/core/datasets/engines";
+import { store } from "@/core/state/jotai";
+import { SQLEngineSelect } from "./sql";
+
+const { addDetectedDataSource } = vi.hoisted(() => ({
+  addDetectedDataSource: vi.fn(),
+}));
+
+const POSTGRES_SOURCE: DetectedDataSource = {
+  id: "postgres-libpq-environment",
+  integration: "postgres",
+  category: "database",
+  displayName: "PostgreSQL",
+  confidence: "high",
+  origins: [{ type: "environment", label: "Kernel environment" }],
+  configuration: [],
+  code: "engine = create_engine()",
+  hidesWhen: { kind: "dialect", substrings: ["postgres"] },
+};
+
+vi.mock("@/hooks/useDataSourceDiscovery", () => ({
+  useDetectedDataSources: () => [POSTGRES_SOURCE],
+}));
+
+vi.mock("@/components/editor/connections/components", () => ({
+  useAddDetectedDataSource: () => addDetectedDataSource,
+}));
+
+describe("SQLEngineSelect", () => {
+  beforeAll(() => {
+    HTMLElement.prototype.hasPointerCapture = vi.fn(() => false);
+    HTMLElement.prototype.setPointerCapture = vi.fn();
+    HTMLElement.prototype.releasePointerCapture = vi.fn();
+    HTMLElement.prototype.scrollIntoView = vi.fn();
+  });
+
+  it("adds a database detected in the environment", async () => {
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <SQLEngineSelect
+            selectedEngine={"" as ConnectionName}
+            onChange={vi.fn()}
+            cellId={"cell-1" as CellId}
+          />
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    fireEvent.keyDown(screen.getByRole("combobox"), { key: "ArrowDown" });
+
+    expect(
+      await screen.findByText("Detected in your environment"),
+    ).toBeVisible();
+    fireEvent.click(
+      screen.getByRole("option", { name: "Add PostgreSQL connection" }),
+    );
+
+    expect(addDetectedDataSource).toHaveBeenCalledWith(POSTGRES_SOURCE);
+  });
+});

package/src/core/codemirror/language/panel/sql.tsx

@@ -10,10 +10,12 @@ import {
   CircleHelpIcon,
   DatabaseZap,
   SearchCheck,
+  SparklesIcon,
 } from "lucide-react";
 import { getCellForDomProps } from "@/components/data-table/cell-utils";
 import { transformDisplayName } from "@/components/databases/display";
 import { DatabaseLogo } from "@/components/databases/icon";
+import { useAddDetectedDataSource } from "@/components/editor/connections/components";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -31,11 +33,13 @@ import {
   dataConnectionsMapAtom,
   setLatestEngineSelected,
 } from "@/core/datasets/data-source-connections";
+import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
 import {
   type ConnectionName,
   INTERNAL_SQL_ENGINES,
 } from "@/core/datasets/engines";
 import type { DataSourceConnection } from "@/core/kernel/messages";
+import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
 import { useNonce } from "@/hooks/useNonce";
 import { clearAllSqlValidationErrors } from "../languages/sql/banner-validation-errors";
 import { type SQLMode, useSQLMode } from "../languages/sql/sql-mode";
@@ -46,19 +50,61 @@ interface SelectProps {
   cellId: CellId;
 }
 
-export const SQLEngineSelect: React.FC<SelectProps> = ({
+export const SQLEngineSelect: React.FC<SelectProps> = (props) => {
+  const detectedDataSources = useDetectedDataSources("database");
+
+  if (detectedDataSources.length === 0) {
+    return (
+      <SQLEngineSelectImpl
+        {...props}
+        detectedDataSources={detectedDataSources}
+      />
+    );
+  }
+
+  return (
+    <SQLEngineSelectWithDetectedSources
+      {...props}
+      detectedDataSources={detectedDataSources}
+    />
+  );
+};
+
+const SQLEngineSelectWithDetectedSources: React.FC<
+  SelectProps & { detectedDataSources: DetectedDataSource[] }
+> = ({ detectedDataSources, ...props }) => {
+  const addDetectedDataSource = useAddDetectedDataSource();
+  return (
+    <SQLEngineSelectImpl
+      {...props}
+      detectedDataSources={detectedDataSources}
+      addDetectedDataSource={addDetectedDataSource}
+    />
+  );
+};
+
+const SQLEngineSelectImpl: React.FC<
+  SelectProps & {
+    detectedDataSources: DetectedDataSource[];
+    addDetectedDataSource?: (source: DetectedDataSource) => void;
+  }
+> = ({
   selectedEngine,
   onChange,
   cellId,
+  detectedDataSources,
+  addDetectedDataSource,
 }) => {
   const connectionsMap = useAtomValue(dataConnectionsMapAtom);
 
   const internalEngineConnections: DataSourceConnection[] = [];
   const userDefinedConnections: DataSourceConnection[] = [];
   for (const [connName, connection] of connectionsMap.entries()) {
-    INTERNAL_SQL_ENGINES.has(connName)
-      ? internalEngineConnections.push(connection)
-      : userDefinedConnections.push(connection);
+    if (INTERNAL_SQL_ENGINES.has(connName)) {
+      internalEngineConnections.push(connection);
+    } else {
+      userDefinedConnections.push(connection);
+    }
   }
 
   // Use nonce to force re-render as languageAdapter.engine may not trigger change
@@ -74,6 +120,17 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
       return;
     }
 
+    if (value.startsWith(DETECTED_SOURCE_PREFIX)) {
+      const sourceId = value.slice(DETECTED_SOURCE_PREFIX.length);
+      const source = detectedDataSources.find(
+        (source) => source.id === sourceId,
+      );
+      if (source && addDetectedDataSource) {
+        addDetectedDataSource(source);
+      }
+      return;
+    }
+
     const nextEngine = connectionsMap.get(value as ConnectionName);
     if (nextEngine) {
       rerender();
@@ -125,6 +182,25 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
             {renderConnections(userDefinedConnections)}
             {userDefinedConnections.length > 0 && <SelectSeparator />}
             {renderConnections(internalEngineConnections)}
+            {detectedDataSources.length > 0 && (
+              <>
+                <SelectSeparator />
+                <SelectLabel>Detected in your environment</SelectLabel>
+                {detectedDataSources.map((source) => (
+                  <SelectItem
+                    key={source.id}
+                    value={`${DETECTED_SOURCE_PREFIX}${source.id}`}
+                  >
+                    <div className="flex items-center gap-1">
+                      <SparklesIcon className="h-3 w-3 text-(--blue-9)" />
+                      <span className="truncate ml-0.5">
+                        Add {source.displayName} connection
+                      </span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </>
+            )}
             <SelectSeparator />
             <SelectItem className="text-muted-foreground" value={HELP_KEY}>
               <a
@@ -145,6 +221,7 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
 };
 
 const HELP_KEY = "__help__";
+const DETECTED_SOURCE_PREFIX = "__detected_source__:";
 const HELP_URL =
   "http://docs.marimo.io/guides/working_with_data/sql/#connecting-to-a-custom-database";