@marimo-team/islands 0.24.1-dev3 → 0.24.1-dev30

package/dist/{swiper-component-Cx0cRWLk.js → swiper-component-UYicacis.js}

@@ -3,7 +3,7 @@ import { c as useEventListener, h as cn, t as Button } from "./button-Dr2uAwhT.j
 import { t as require_react } from "./react-DhGsCS90.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DsR6imPN.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-Dp_oQwaf.js";
-import { t as useIframeCapabilities } from "./useIframeCapabilities-CxuXXwjj.js";
+import { t as useIframeCapabilities } from "./useIframeCapabilities-BbnoLKxG.js";
 var import_compiler_runtime = require_compiler_runtime(), import_react = /* @__PURE__ */ __toESM(require_react(), 1);
 function isObject$2(t2) {
   return typeof t2 == "object" && !!t2 && "constructor" in t2 && t2.constructor === Object;

package/dist/{useIframeCapabilities-CxuXXwjj.js → useIframeCapabilities-BbnoLKxG.js}

@@ -1,7 +1,7 @@
 import { o as __toESM } from "./chunk-Bfp04NdC.js";
 import { t as require_react } from "./react-DhGsCS90.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DsR6imPN.js";
-import { t as getIframeCapabilities } from "./capabilities-BilXeZ7p.js";
+import { t as getIframeCapabilities } from "./capabilities-DNKeBoT5.js";
 var import_compiler_runtime = require_compiler_runtime();
 require_react();
 function useIframeCapabilities() {

package/dist/{vega-component-CioKuDut.js → vega-component-xrHju6oo.js}

@@ -10,12 +10,12 @@ import { n as ErrorBanner } from "./error-banner-BwCLtmkH.js";
 import { t as Tooltip } from "./tooltip-BtUxZT5h.js";
 import { t as debounce_default } from "./debounce-D784bpms.js";
 import { A as useEvent_default, n as useTheme } from "./useTheme-BzEXeAR5.js";
-import { s as uniq } from "./arrays-C56grfjL.js";
+import { c as uniq } from "./arrays-Ct6XviUd.js";
 import { t as Objects } from "./objects-UzwQd5gx.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-Dz0QNUEa.js";
-import { A as getContainerWidth, n as formats } from "./vega-loader.browser-CGb-2Kwi.js";
-import { a as tooltipHandler, n as vegaLoadData } from "./loader-DTnbNSVZ.js";
-import { t as j } from "./react-vega-zyfTF9SY.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-BZtMpeQe.js";
+import { A as getContainerWidth, n as formats } from "./vega-loader.browser-VFQfHaoV.js";
+import { a as tooltipHandler, n as vegaLoadData } from "./loader-Chm6nOqy.js";
+import { t as j } from "./react-vega-BE2Uv1cq.js";
 import "./defaultLocale-CMezyvMc.js";
 import "./defaultLocale-DMZFeDB8.js";
 import { t as useAsyncData } from "./useAsyncData-CDcbh-Qv.js";

package/dist/{vega-embed-container-BRjjqRGz.js → vega-embed-container-B1tc-DoN.js}

@@ -2,8 +2,8 @@ import { o as __toESM } from "./chunk-Bfp04NdC.js";
 import { t as require_react } from "./react-DhGsCS90.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DsR6imPN.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-Dp_oQwaf.js";
-import { A as getContainerWidth } from "./vega-loader.browser-CGb-2Kwi.js";
-import { n as q } from "./react-vega-zyfTF9SY.js";
+import { A as getContainerWidth } from "./vega-loader.browser-VFQfHaoV.js";
+import { n as q } from "./react-vega-BE2Uv1cq.js";
 import "./defaultLocale-CMezyvMc.js";
 import "./defaultLocale-DMZFeDB8.js";
 import { t as useVegaContainerRemeasure } from "./use-vega-container-remeasure-B7OD7yUY.js";

package/dist/{vega-loader.browser-CGb-2Kwi.js → vega-loader.browser-VFQfHaoV.js}

@@ -410,7 +410,7 @@ function getContainerWidth(o) {
   }
 }
 function getVegaFieldTypes(F) {
-  return !F || Object.keys(F).length === 0 ? "auto" : Objects.mapValues(F, (o) => o === "date" || o === "time" ? "string" : o === "datetime" ? "date" : o);
+  return !F || Object.keys(F).length === 0 ? "auto" : Objects.mapValues(F, (o) => o === "geometry" || o === "date" || o === "time" ? "string" : o === "datetime" ? "date" : o);
 }
 var EOL = {}, EOF = {}, QUOTE = 34, NEWLINE = 10, RETURN = 13;
 function objectConverter(o) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.24.1-dev3",
+  "version": "0.24.1-dev30",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/app-config/optional-features.test.ts

@@ -0,0 +1,78 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { isPackageRequirementInstalled } from "./optional-features";
+
+describe("isPackageRequirementInstalled", () => {
+  const installedPackages = [
+    { name: "mcp", version: "2.0.0" },
+    { name: "polars", version: "1.8.2" },
+  ];
+
+  it("requires the package to be installed", () => {
+    expect(
+      isPackageRequirementInstalled({ name: "missing" }, installedPackages),
+    ).toBe(false);
+  });
+
+  it("accepts an installed package without a minimum version", () => {
+    expect(
+      isPackageRequirementInstalled({ name: "polars" }, installedPackages),
+    ).toBe(true);
+  });
+
+  it("rejects an installed package below the minimum version", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "2.1.0" },
+        installedPackages,
+      ),
+    ).toBe(false);
+  });
+
+  it.each(["2.0.0rc1", "2.0.0.dev1", "2.0.0-beta1"])(
+    "rejects the prerelease version %s",
+    (version) => {
+      expect(
+        isPackageRequirementInstalled({ name: "mcp", minVersion: "2.0.0" }, [
+          { name: "mcp", version },
+        ]),
+      ).toBe(false);
+    },
+  );
+
+  it.each(["2.1.0rc1", "3.0.0rc1"])(
+    "accepts the later prerelease version %s",
+    (version) => {
+      expect(
+        isPackageRequirementInstalled({ name: "mcp", minVersion: "2.0.0" }, [
+          { name: "mcp", version },
+        ]),
+      ).toBe(true);
+    },
+  );
+
+  it("accepts an installed package at or above the minimum version", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "2.0.0" },
+        installedPackages,
+      ),
+    ).toBe(true);
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "1.9.0" },
+        installedPackages,
+      ),
+    ).toBe(true);
+  });
+
+  it("normalizes extras in the requirement name", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "polars[pyarrow]" },
+        installedPackages,
+      ),
+    ).toBe(true);
+  });
+});

package/src/components/app-config/optional-features.tsx

@@ -20,6 +20,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
+import { semverSort } from "@/utils/versions";
 import { SettingSubtitle } from "./common";
 
 interface Package {
@@ -27,6 +28,35 @@ interface Package {
   minVersion?: string;
 }
 
+interface InstalledPackage {
+  name: string;
+  version: string;
+}
+
+const PEP_440_PRERELEASE =
+  /^((?:\d+!)?\d+(?:\.\d+)*)(?:[-_.]?(?:a|b|c|rc|alpha|beta|pre|preview|dev)\d*)/i;
+
+export function isPackageRequirementInstalled(
+  requirement: Package,
+  installedPackages: InstalledPackage[],
+): boolean {
+  const packageName = requirement.name.split("[")[0];
+  const installedPackage = installedPackages.find(
+    (pkg) => pkg.name === packageName,
+  );
+  if (!installedPackage) {
+    return false;
+  }
+  if (!requirement.minVersion) {
+    return true;
+  }
+  const prerelease = installedPackage.version.match(PEP_440_PRERELEASE);
+  if (prerelease) {
+    return semverSort(prerelease[1], requirement.minVersion) > 0;
+  }
+  return semverSort(installedPackage.version, requirement.minVersion) >= 0;
+}
+
 interface OptionalFeature {
   id: string;
   /**
@@ -77,8 +107,8 @@ const OPTIONAL_DEPENDENCIES: OptionalFeature[] = [
   },
   {
     id: "mcp",
-    packagesRequired: [{ name: "mcp", minVersion: "1" }],
-    additionalPackageInstalls: [{ name: "pydantic", minVersion: "2" }],
+    packagesRequired: [{ name: "mcp", minVersion: "2.0.0" }],
+    additionalPackageInstalls: [],
     description: "Connect to MCP servers",
   },
   {
@@ -123,9 +153,6 @@ export const OptionalFeatures: React.FC = () => {
   }
 
   const installedPackages = data?.packages || [];
-  const installedPackageNames = new Set(
-    installedPackages.map((pkg) => pkg.name),
-  );
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden gap-2">
@@ -149,7 +176,7 @@ export const OptionalFeatures: React.FC = () => {
         <TableBody>
           {OPTIONAL_DEPENDENCIES.map((dep) => {
             const isInstalled = dep.packagesRequired.every((pkg) =>
-              installedPackageNames.has(pkg.name.split("[")[0]),
+              isPackageRequirementInstalled(pkg, installedPackages),
             );
             const packageSpec = dep.packagesRequired
               .map((pkg) => pkg.name)

package/src/components/data-table/__tests__/column_formatting.test.ts

@@ -5,6 +5,7 @@ import {
   prettyScientificNumber,
 } from "@/utils/numbers";
 import { applyFormat } from "../column-formatting/feature";
+import { formatOptions } from "../column-formatting/types";
 
 const locale = "en-US";
 
@@ -128,3 +129,9 @@ describe("applyFormat", () => {
     ).toBe(123);
   });
 });
+
+describe("formatOptions", () => {
+  it("has no geometry format options", () => {
+    expect(formatOptions.geometry).toEqual([]);
+  });
+});

package/src/components/data-table/charts/__tests__/schemas.test.ts

@@ -14,7 +14,7 @@ describe("ChartSchema", () => {
 
   it("normalizes an unrecognized axis column type", () => {
     const result = ChartSchema.parse({
-      general: { xColumn: { field: "geom", type: "geometry" } },
+      general: { xColumn: { field: "geom", type: "bogus_type" } },
     });
 
     expect(result.general?.xColumn?.type).toBe("unknown");
@@ -24,7 +24,7 @@ describe("ChartSchema", () => {
     const result = ChartSchema.parse({
       tooltips: {
         auto: false,
-        fields: [{ field: "geom", type: "geometry" }],
+        fields: [{ field: "geom", type: "bogus_type" }],
       },
     });
 
@@ -32,4 +32,19 @@ describe("ChartSchema", () => {
       { field: "geom", type: "unknown" },
     ]);
   });
+
+  it("keeps geometry axis and tooltip field types", () => {
+    const result = ChartSchema.parse({
+      general: { xColumn: { field: "geom", type: "geometry" } },
+      tooltips: {
+        auto: false,
+        fields: [{ field: "geom", type: "geometry" }],
+      },
+    });
+
+    expect(result.general?.xColumn?.type).toBe("geometry");
+    expect(result.tooltips?.fields).toEqual([
+      { field: "geom", type: "geometry" },
+    ]);
+  });
 });

package/src/components/data-table/charts/chart-spec/types.ts

@@ -29,6 +29,7 @@ export function convertDataTypeToVega(
       return "quantitative";
     case "string":
     case "boolean":
+    case "geometry":
     case "unknown":
       return "nominal";
     case "date":
@@ -51,6 +52,7 @@ export function convertDataTypeToSelectable(
       return "number";
     case "string":
     case "boolean":
+    case "geometry":
     case "unknown":
       return "string";
     case "date":

package/src/components/data-table/column-formatting/feature.ts

@@ -214,6 +214,7 @@ export const applyFormat = (
           return value;
       }
     case undefined:
+    case "geometry":
     case "unknown":
       return value;
     default:

package/src/components/data-table/column-formatting/types.ts

@@ -13,6 +13,7 @@ export const formatOptions = {
   number: ["Auto", "Percent", "Scientific", "Engineering", "Integer"],
   string: ["Uppercase", "Lowercase", "Capitalize", "Title"],
   boolean: ["Yes/No", "On/Off"],
+  geometry: [],
   unknown: [],
 } as const satisfies Record<DataType, string[]>;
 

package/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -836,6 +836,7 @@ export class ColumnChartSpecModel<T> {
           transform: transforms,
         };
       }
+      case "geometry":
       case "unknown":
         return null;
       default:

package/src/components/data-table/column-summary/column-summary.tsx

@@ -155,6 +155,7 @@ export const TableColumnSummary = <TData, TValue>({
           );
         }
         return null;
+      case "geometry":
       case "unknown":
         return (
           <div className="flex flex-col whitespace-pre">

package/src/components/data-table/columns.tsx

@@ -320,9 +320,8 @@ export function generateColumns<T>({
       },
       // Remove any default filtering
       filterFn: undefined,
-      // Can only sort if key is defined
-      // For example, unnamed index columns, won't be sortable
-      enableSorting: !!key,
+      // Unnamed index columns and geometry columns are not sortable
+      enableSorting: !!key && getMeta(key).dataType !== "geometry",
       meta: {
         ...getMeta(key),
         width: columnWidths?.[key],
@@ -485,6 +484,8 @@ function getFilterTypeForFieldType(
       return "time";
     case "boolean":
       return "boolean";
+    case "geometry":
+      return undefined;
     default:
       return undefined;
   }

package/src/components/datasets/__tests__/icons.test.ts

@@ -2,7 +2,7 @@
 
 import { describe, expect, it } from "vitest";
 import type { DataType } from "@/core/kernel/messages";
-import { DATA_TYPE_ICON, resolveDataType } from "../icons";
+import { DATA_TYPE_ICON, getDataTypeColor, resolveDataType } from "../icons";
 
 describe("resolveDataType", () => {
   it("passes through every mapped data type", () => {
@@ -12,7 +12,15 @@ describe("resolveDataType", () => {
   });
 
   it("resolves unmapped data types to unknown", () => {
-    expect(resolveDataType("geometry" as DataType)).toBe("unknown");
+    expect(resolveDataType("bogus_type" as DataType)).toBe("unknown");
+  });
+
+  it("resolves geometry with its icon and color", () => {
+    expect(resolveDataType("geometry")).toBe("geometry");
+    expect(DATA_TYPE_ICON.geometry).toBeDefined();
+    expect(getDataTypeColor("geometry")).toBe(
+      "bg-(--cyan-4) dark:bg-(--cyan-5)",
+    );
   });
 
   it("resolves data types shadowing Object.prototype keys to unknown", () => {

package/src/components/datasets/icons.tsx

@@ -7,6 +7,7 @@ import {
   CurlyBracesIcon,
   HashIcon,
   type LucideIcon,
+  MapPinIcon,
   ToggleLeftIcon,
   TypeIcon,
 } from "lucide-react";
@@ -27,6 +28,7 @@ export const DATA_TYPE_ICON: Record<DataType | SelectableDataType, LucideIcon> =
     number: HashIcon,
     string: TypeIcon,
     integer: HashIcon,
+    geometry: MapPinIcon,
     unknown: CurlyBracesIcon,
   };
 
@@ -56,6 +58,8 @@ export function getDataTypeColor(
       return "bg-(--purple-4)";
     case "string":
       return "bg-(--blue-4)";
+    case "geometry":
+      return "bg-(--cyan-4) dark:bg-(--cyan-5)";
     case "unknown":
       return "bg-(--slate-4) dark:bg-(--slate-6)";
     default:

package/src/components/datasources/__tests__/components.test.tsx

@@ -12,7 +12,7 @@ describe("ColumnName", () => {
 
     try {
       const unrecognized = render(
-        <ColumnName columnName="geom" dataType={"geometry" as DataType} />,
+        <ColumnName columnName="geom" dataType={"bogus_type" as DataType} />,
       );
       const unknown = render(
         <ColumnName columnName="geom" dataType="unknown" />,
@@ -26,4 +26,17 @@ describe("ColumnName", () => {
       warn.mockRestore();
     }
   });
+
+  it("renders geometry with a distinct icon", () => {
+    const geometry = render(
+      <ColumnName columnName="geom" dataType="geometry" />,
+    );
+    const unknown = render(<ColumnName columnName="geom" dataType="unknown" />);
+
+    expect(geometry.container.querySelector(".lucide-map-pin")).not.toBeNull();
+    expect(unknown.container.querySelector(".lucide-braces")).not.toBeNull();
+    expect(geometry.container.innerHTML).not.toEqual(
+      unknown.container.innerHTML,
+    );
+  });
 });

package/src/components/datasources/datasources.tsx

@@ -21,15 +21,11 @@ import { cellIdsAtom, useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
 import {
-  dataConnectionsMapAtom,
+  connectionsAtom,
   type SQLTableContext,
   useDataSourceActions,
 } from "@/core/datasets/data-source-connections";
-import {
-  DEFAULT_DUCKDB_DATABASE,
-  DUCKDB_ENGINE,
-  INTERNAL_SQL_ENGINES,
-} from "@/core/datasets/engines";
+import { DUCKDB_ENGINE } from "@/core/datasets/engines";
 import {
   PreviewSQLSchemaList,
   PreviewSQLTable,
@@ -224,40 +220,6 @@ export function filterEmptyDatabases(databases: Database[]): Database[] {
   return changed ? result : databases;
 }
 
-/**
- * This atom is used to get the data connections that are available to the user.
- * It filters out the internal engines if it has no databases or if it has only the in-memory database and no schemas.
- */
-export const connectionsAtom = atom((get) => {
-  const dataConnections = new Map(get(dataConnectionsMapAtom));
-
-  // Filter out the internal engines if it has no databases
-  // Or if it has only the in-memory database and no schemas
-  for (const engine of INTERNAL_SQL_ENGINES) {
-    const connection = dataConnections.get(engine);
-    if (!connection) {
-      continue;
-    }
-
-    if (connection.databases.length === 0) {
-      dataConnections.delete(engine);
-    }
-
-    if (
-      connection.databases.length === 1 &&
-      connection.databases[0].name === DEFAULT_DUCKDB_DATABASE &&
-      connection.databases[0].schemas.length === 0
-    ) {
-      dataConnections.delete(engine);
-    }
-  }
-
-  // Put internal engines last to prioritize user-defined connections
-  return sortBy([...dataConnections.values()], (connection) =>
-    INTERNAL_SQL_ENGINES.has(connection.name) ? 1 : 0,
-  );
-});
-
 export const DataSources: React.FC = () => {
   const [searchValue, setSearchValue] = React.useState<string>("");
   const [hideEmpty, setHideEmpty] = useAtom(hideEmptyDatasourcesAtom);

package/src/components/editor/chrome/panels/components.tsx

@@ -8,6 +8,9 @@ import {
 } from "@/components/ui/accordion";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/utils/cn";
+import { SparklesIcon } from "lucide-react";
+import { Tooltip } from "@/components/ui/tooltip";
+import type { DataSourceDiscoveryGroup } from "@/core/datasets/data-source-discovery";
 
 /**
  * Styled AccordionItem for sidebar panels.
@@ -80,9 +83,41 @@ const PanelBadge = ({
 );
 PanelBadge.displayName = "PanelBadge";
 
+const DiscoveredSourcesBadge = ({
+  count,
+  type,
+}: {
+  count: number;
+  type: DataSourceDiscoveryGroup;
+}) => {
+  if (count === 0) {
+    return null;
+  }
+
+  let noun: string;
+  if (type === "database") {
+    noun = count === 1 ? "database" : "databases";
+  } else {
+    noun = count === 1 ? "remote storage" : "remote storages";
+  }
+  const content = `${count} ${noun} detected in your environment, ready to quick-add`;
+
+  return (
+    <Tooltip content={content}>
+      <span>
+        <PanelBadge className="gap-0.5 border-(--blue-6) bg-(--blue-3) text-(--blue-11)">
+          <SparklesIcon className="h-2.5 w-2.5" />
+          {count}
+        </PanelBadge>
+      </span>
+    </Tooltip>
+  );
+};
+
 export {
   PanelAccordionItem,
   PanelAccordionTrigger,
   PanelAccordionContent,
   PanelBadge,
+  DiscoveredSourcesBadge,
 };

package/src/components/editor/chrome/panels/file-explorer-panel.tsx

@@ -7,11 +7,13 @@ import useResizeObserver from "use-resize-observer";
 import { StorageInspector } from "@/components/storage/storage-inspector";
 import { Accordion } from "@/components/ui/accordion";
 import { storageNamespacesAtom } from "@/core/storage/state";
+import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
 import { cn } from "@/utils/cn";
 import { TreeDndProvider } from "../../file-tree/dnd-wrapper";
 import { FileExplorer } from "../../file-tree/file-explorer";
 import { useFileExplorerUpload } from "../../file-tree/upload";
 import {
+  DiscoveredSourcesBadge,
   PanelAccordionContent,
   PanelAccordionItem,
   PanelAccordionTrigger,
@@ -58,6 +60,7 @@ const FileExplorerPanel: React.FC = () => {
 
   const storageNamespaces = useAtomValue(storageNamespacesAtom);
   const remoteStorageConnections = storageNamespaces.length;
+  const pendingDataSources = useDetectedDataSources("storage");
 
   const openSections = useMemo<FileExplorerPanelSection[]>(() => {
     if (!state.hasUserInteracted && remoteStorageConnections > 0) {
@@ -81,6 +84,7 @@ const FileExplorerPanel: React.FC = () => {
 
   const availableContent = panelHeight - TRIGGER_HEIGHT * 2;
   const storageIsOpen = openSections.includes("remote-storage");
+  const showDiscoveredStorageBadge = pendingDataSources.length > 0;
   const bothOpen = storageIsOpen && openSections.includes("files");
 
   const storageMaxHeight = bothOpen
@@ -104,6 +108,12 @@ const FileExplorerPanel: React.FC = () => {
             {remoteStorageConnections > 0 && (
               <PanelBadge>{remoteStorageConnections}</PanelBadge>
             )}
+            {showDiscoveredStorageBadge && (
+              <DiscoveredSourcesBadge
+                count={pendingDataSources.length}
+                type="storage"
+              />
+            )}
           </PanelAccordionTrigger>
           <PanelAccordionContent
             className="overflow-auto"

package/src/components/editor/chrome/panels/session-panel.tsx

@@ -3,16 +3,16 @@
 import { useAtom, useAtomValue } from "jotai";
 import { DatabaseIcon, VariableIcon } from "lucide-react";
 import React, { useCallback } from "react";
-import {
-  connectionsAtom,
-  DataSources,
-} from "@/components/datasources/datasources";
+import { DataSources } from "@/components/datasources/datasources";
 import { Accordion } from "@/components/ui/accordion";
 import { VariableTable } from "@/components/variables/variables-table";
 import { useCellIds } from "@/core/cells/cells";
+import { connectionsAtom } from "@/core/datasets/data-source-connections";
 import { datasetTablesAtom } from "@/core/datasets/state";
 import { useVariables } from "@/core/variables/state";
+import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
 import {
+  DiscoveredSourcesBadge,
   PanelAccordionContent,
   PanelAccordionItem,
   PanelAccordionTrigger,
@@ -28,6 +28,7 @@ const SessionPanel: React.FC = () => {
   const cellIds = useCellIds();
   const tables = useAtomValue(datasetTablesAtom);
   const dataConnections = useAtomValue(connectionsAtom);
+  const pendingDataSources = useDetectedDataSources("database");
   const [state, setState] = useAtom(sessionPanelAtom);
 
   const datasourcesCount = tables.length + dataConnections.length;
@@ -50,6 +51,7 @@ const SessionPanel: React.FC = () => {
 
   const isDatasourcesOpen = openSections.includes("datasources");
   const showDatasourcesBadge = !isDatasourcesOpen && datasourcesCount > 0;
+  const showDiscoveredDataSourcesBadge = pendingDataSources.length > 0;
 
   return (
     <Accordion
@@ -63,6 +65,12 @@ const SessionPanel: React.FC = () => {
           <DatabaseIcon className="w-4 h-4" />
           Data sources
           {showDatasourcesBadge && <PanelBadge>{datasourcesCount}</PanelBadge>}
+          {showDiscoveredDataSourcesBadge && (
+            <DiscoveredSourcesBadge
+              count={pendingDataSources.length}
+              type="database"
+            />
+          )}
         </PanelAccordionTrigger>
         <PanelAccordionContent>
           <DataSources />

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

@@ -28,6 +28,7 @@ const sources: DetectedDataSource[] = [
       },
     ],
     code: "engine = create_engine()",
+    hidesWhen: { kind: "dialect", substrings: ["postgres"] },
   },
   {
     id: "pyiceberg-prod",
@@ -52,6 +53,7 @@ const sources: DetectedDataSource[] = [
       },
     ],
     code: 'catalog = load_catalog("prod")',
+    hidesWhen: { kind: "dialect", substrings: ["iceberg"] },
   },
 ];
 

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

@@ -87,7 +87,11 @@ export const AddConnectionDialogContent: React.FC<{
           <span className="block">{codeSnippetHint}</span>
         </DialogDescription>
       </DialogHeader>
-      <AutoDiscoveredDataSources onSubmit={onClose} className="-mt-2" />
+      <AutoDiscoveredDataSources
+        onSubmit={onClose}
+        className="-mt-2"
+        group={activeTab === "storage" ? "storage" : "database"}
+      />
       <Tabs
         value={activeTab}
         onValueChange={(v) => setActiveTab(v as ConnectionTab)}