@marimo-team/islands 0.23.16-dev51 → 0.23.16-dev52

package/package.json

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

package/src/__mocks__/requests.ts

@@ -41,6 +41,7 @@ export const MockRequestClient = {
       previewSQLTableList: vi.fn().mockResolvedValue({ tables: [] }),
       previewSQLSchemaList: vi.fn().mockResolvedValue({ schemas: [] }),
       previewDataSourceConnection: vi.fn().mockResolvedValue({}),
+      discoverDataSources: vi.fn().mockResolvedValue({}),
       validateSQL: vi.fn().mockResolvedValue({}),
       openFile: vi.fn().mockResolvedValue({}),
       getUsageStats: vi.fn().mockResolvedValue({}),

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

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
+import { QuickAddDataSources } from "../quick-add-data-sources";
+
+const sources: DetectedDataSource[] = [
+  {
+    id: "postgres-libpq-environment",
+    integration: "postgres",
+    category: "database",
+    displayName: "PostgreSQL",
+    confidence: "high",
+    origins: [{ type: "environment", label: "Kernel environment" }],
+    configuration: [
+      {
+        field: "Host",
+        value: { kind: "environment-variable", name: "PGHOST" },
+      },
+      {
+        field: "Username",
+        value: { kind: "environment-variable", name: "PGUSER" },
+      },
+      {
+        field: "Database",
+        value: { kind: "environment-variable", name: "PGDATABASE" },
+      },
+    ],
+    code: "engine = create_engine()",
+  },
+  {
+    id: "pyiceberg-prod",
+    integration: "pyiceberg",
+    category: "catalog",
+    displayName: "PyIceberg (prod)",
+    confidence: "high",
+    origins: [
+      {
+        type: "configuration",
+        label: "Resolved PyIceberg configuration",
+      },
+    ],
+    configuration: [
+      {
+        field: "Catalog",
+        value: { kind: "safe-literal", value: "prod" },
+      },
+      {
+        field: "Type",
+        value: { kind: "safe-literal", value: "REST" },
+      },
+    ],
+    code: 'catalog = load_catalog("prod")',
+  },
+];
+
+describe("QuickAddDataSources", () => {
+  it("does not render an empty section", () => {
+    const { container } = render(
+      <QuickAddDataSources sources={[]} onAdd={vi.fn()} />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("renders detected sources as clickable tags", () => {
+    const onAdd = vi.fn();
+
+    render(<QuickAddDataSources sources={sources} onAdd={onAdd} />);
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Add PostgreSQL connection",
+      }),
+    );
+
+    expect(screen.getByText("Quick add")).toBeInTheDocument();
+    expect(onAdd).toHaveBeenCalledWith(sources[0]);
+  });
+
+  it("shows environment references on hover", async () => {
+    render(<QuickAddDataSources sources={sources} onAdd={vi.fn()} />);
+    const tag = screen.getByRole("button", {
+      name: "Add PostgreSQL connection",
+    });
+
+    fireEvent.pointerMove(tag);
+    fireEvent.mouseOver(tag);
+
+    await waitFor(() => {
+      expect(screen.getAllByText('os.environ["PGHOST"]')).not.toHaveLength(0);
+    });
+    expect(screen.getAllByText('os.environ["PGUSER"]')).not.toHaveLength(0);
+    expect(screen.getAllByText('os.environ["PGDATABASE"]')).not.toHaveLength(0);
+  });
+
+  it("shows safe configuration metadata on hover", async () => {
+    render(<QuickAddDataSources sources={sources} onAdd={vi.fn()} />);
+    const tag = screen.getByRole("button", {
+      name: "Add PyIceberg (prod) connection",
+    });
+
+    fireEvent.pointerMove(tag);
+    fireEvent.mouseOver(tag);
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByText("Detected from Resolved PyIceberg configuration"),
+      ).not.toHaveLength(0);
+    });
+    expect(screen.getAllByText("REST")).not.toHaveLength(0);
+  });
+});

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

@@ -12,6 +12,7 @@ import {
 import { ExternalLink } from "@/components/ui/links";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { AddDatabaseForm } from "./database/add-database-form";
+import { AutoDiscoveredDataSources } from "./quick-add-data-sources";
 import { AddStorageForm } from "./storage/add-storage-form";
 
 type ConnectionTab = "databases" | "storage";
@@ -86,6 +87,7 @@ export const AddConnectionDialogContent: React.FC<{
           <span className="block">{codeSnippetHint}</span>
         </DialogDescription>
       </DialogHeader>
+      <AutoDiscoveredDataSources onSubmit={onClose} />
       <Tabs
         value={activeTab}
         onValueChange={(v) => setActiveTab(v as ConnectionTab)}

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

@@ -0,0 +1,106 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { PlusIcon, SparklesIcon } from "lucide-react";
+import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
+import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
+import { useDataSourceDiscovery } from "@/hooks/useDataSourceDiscovery";
+import { useInsertCode } from "./components";
+
+export const QuickAddDataSources: React.FC<{
+  sources: DetectedDataSource[];
+  onAdd: (source: DetectedDataSource) => void;
+}> = ({ sources, onAdd }) => {
+  if (sources.length === 0) {
+    return null;
+  }
+
+  return (
+    <section
+      aria-labelledby="quick-add-data-sources-title"
+      className="rounded-md border bg-muted/30 px-3 py-2"
+    >
+      <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-muted-foreground" />
+          <h3 id="quick-add-data-sources-title" className="text-sm font-medium">
+            Quick add
+          </h3>
+        </div>
+        <TooltipProvider delayDuration={200}>
+          {sources.map((source) => (
+            <Tooltip
+              key={source.id}
+              side="bottom"
+              content={<DetectedDataSourceDetails source={source} />}
+            >
+              <button
+                type="button"
+                aria-label={`Add ${source.displayName} connection`}
+                className="inline-flex items-center gap-1 rounded-full border border-(--blue-8) bg-(--blue-2) px-2.5 py-1 text-xs font-semibold text-(--blue-11) transition-colors hover:bg-(--blue-3) focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                onClick={() => onAdd(source)}
+              >
+                <PlusIcon className="h-3 w-3" />
+                {source.displayName}
+              </button>
+            </Tooltip>
+          ))}
+        </TooltipProvider>
+      </div>
+    </section>
+  );
+};
+
+const DetectedDataSourceDetails: React.FC<{
+  source: DetectedDataSource;
+}> = ({ source }) => (
+  <div className="min-w-64 space-y-2 py-1">
+    <div>
+      <div className="font-medium">{source.displayName}</div>
+      <div className="text-xs text-muted-foreground">
+        Detected from{" "}
+        {source.origins.map((origin) => origin.label).join(" and ")}
+      </div>
+    </div>
+    <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
+      {source.configuration.map((item) => (
+        <div
+          className="contents"
+          key={
+            item.value.kind === "environment-variable"
+              ? item.value.name
+              : `${item.field}:${item.value.value}`
+          }
+        >
+          <dt className="text-muted-foreground">{item.field}</dt>
+          <dd>
+            <code>
+              {item.value.kind === "environment-variable"
+                ? `os.environ["${item.value.name}"]`
+                : item.value.value}
+            </code>
+          </dd>
+        </div>
+      ))}
+    </dl>
+    <div className="text-xs text-muted-foreground">
+      Click to add a configured cell.
+    </div>
+  </div>
+);
+
+export const AutoDiscoveredDataSources: React.FC<{
+  onSubmit: () => void;
+}> = ({ onSubmit }) => {
+  const insertCode = useInsertCode();
+  const { data } = useDataSourceDiscovery();
+
+  return (
+    <QuickAddDataSources
+      sources={data ?? []}
+      onAdd={(source) => {
+        insertCode(source.code);
+        onSubmit();
+      }}
+    />
+  );
+};

package/src/core/datasets/data-source-discovery.ts

@@ -0,0 +1,5 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { components } from "@marimo-team/marimo-api";
+
+export type DetectedDataSource = components["schemas"]["DetectedDataSource"];

package/src/core/datasets/request-registry.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type {
+  DataSourceDiscoveryResult,
   SQLSchemaListPreview,
   SQLTableListPreview,
   SQLTablePreview,
@@ -19,6 +20,16 @@ import type {
 // The backend returns data tables, which could also exist in other engines, dbs, schemas
 // Thus, we use the request ID pattern to match the response to the request
 
+export const DiscoverDataSources = new DeferredRequestRegistry<
+  {},
+  DataSourceDiscoveryResult
+>("data-source-discovery-result", async (requestId) => {
+  const client = getRequestClient();
+  await client.discoverDataSources({
+    requestId,
+  });
+});
+
 export const PreviewSQLTable = new DeferredRequestRegistry<
   Omit<PreviewSQLTableRequest, "requestId">,
   SQLTablePreview

package/src/core/islands/bootstrap.ts

@@ -194,6 +194,7 @@ function handleMessage(
       case "sql-schema-list-preview":
       case "datasets":
       case "data-source-connections":
+      case "data-source-discovery-result":
       case "validate-sql-result":
       case "storage-namespaces":
       case "storage-entries":

package/src/core/islands/bridge.ts

@@ -341,6 +341,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   previewSQLTableList = throwNotImplemented;
   previewSQLSchemaList = throwNotImplemented;
   previewDataSourceConnection = throwNotImplemented;
+  discoverDataSources = throwNotImplemented;
   validateSQL = throwNotImplemented;
   openFile = throwNotImplemented;
   sendListFiles = throwNotImplemented;

package/src/core/kernel/messages.ts

@@ -44,6 +44,8 @@ export type SQLTableListPreview =
 export type SQLSchemaListPreview =
   NotificationMessageData<"sql-schema-list-preview">;
 export type ValidateSQLResult = NotificationMessageData<"validate-sql-result">;
+export type DataSourceDiscoveryResult =
+  NotificationMessageData<"data-source-discovery-result">;
 export type SecretKeysResult = NotificationMessageData<"secret-keys-result">;
 export type StartupLogs = NotificationMessageData<"startup-logs">;
 export type CellMessage = NotificationMessageData<"cell-op">;

package/src/core/network/__tests__/requests-lazy.test.ts

@@ -114,6 +114,21 @@ describe("createLazyRequests", () => {
     expect(mockInit).toHaveBeenCalledTimes(1);
   });
 
+  it("starts the kernel for datasource discovery", async () => {
+    mockDelegate.discoverDataSources = vi.fn().mockResolvedValue(null);
+    const lazyRequests = createLazyRequests(
+      mockDelegate,
+      mockGetRuntimeManager,
+    );
+
+    await lazyRequests.discoverDataSources({
+      requestId: requestId("discovery"),
+    });
+
+    expect(mockInit).toHaveBeenCalledOnce();
+    expect(mockDelegate.discoverDataSources).toHaveBeenCalledOnce();
+  });
+
   it("should only call init once across multiple requests", async () => {
     const lazyRequests = createLazyRequests(
       mockDelegate,

package/src/core/network/__tests__/requests-network.test.ts

@@ -130,6 +130,20 @@ describe("createNetworkRequests", () => {
       expect(mockClient.GET).toHaveBeenCalledWith("/api/export/availability");
     });
 
+    it("discoverDataSources should POST to the discovery endpoint", async () => {
+      const requests = createNetworkRequests();
+      const request = { requestId: "discovery-request" } as any;
+      await requests.discoverDataSources(request);
+
+      expect(mockClient.POST).toHaveBeenCalledWith(
+        "/api/datasources/discover",
+        expect.objectContaining({
+          body: request,
+          params: expect.anything(),
+        }),
+      );
+    });
+
     it("getPackageList should not require a kernel connection", async () => {
       const { waitForConnectionOpen, waitForConnectionOpenIfNotebook } =
         await import("../connection");

package/src/core/network/requests-lazy.ts

@@ -51,6 +51,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   sendRunScratchpad: "startConnection",
   saveAppConfig: "startConnection",
   saveCellConfig: "startConnection",
+  discoverDataSources: "startConnection",
 
   // Export operations start a connection
   exportAsHTML: "startConnection",

package/src/core/network/requests-network.ts

@@ -267,6 +267,14 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
+    discoverDataSources: (request) => {
+      return getClient()
+        .POST("/api/datasources/discover", {
+          body: request,
+          params: getParams(),
+        })
+        .then(handleResponseReturnNull);
+    },
     validateSQL: (request) => {
       return getClient()
         .POST("/api/sql/validate", {

package/src/core/network/requests-static.ts

@@ -62,6 +62,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     previewSQLTableList: throwNotInEditMode,
     previewSQLSchemaList: throwNotInEditMode,
     previewDataSourceConnection: throwNotInEditMode,
+    discoverDataSources: throwNotInEditMode,
     validateSQL: throwNotInEditMode,
     openFile: throwNotInEditMode,
     getUsageStats: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -43,6 +43,7 @@ export function createErrorToastingRequests(
     previewSQLTableList: "Failed to fetch SQL table list",
     previewSQLSchemaList: "Failed to fetch SQL schema list",
     previewDataSourceConnection: "Failed to preview data source connection",
+    discoverDataSources: "Failed to discover data sources",
     validateSQL: "Failed to validate SQL",
     openFile: "Failed to open file",
     getUsageStats: "", // No toast

package/src/core/network/types.ts

@@ -75,6 +75,7 @@ export type ListSQLTablesRequest = schemas["ListSQLTablesRequest"];
 export type ListSQLSchemasRequest = schemas["ListSQLSchemasRequest"];
 export type ListDataSourceConnectionRequest =
   schemas["ListDataSourceConnectionRequest"];
+export type DiscoverDataSourcesRequest = schemas["DiscoverDataSourcesRequest"];
 export type ValidateSQLRequest = schemas["ValidateSQLRequest"];
 export type DebugCellRequest = schemas["DebugCellRequest"];
 export type SetBreakpointsRequest = schemas["SetBreakpointsRequest"];
@@ -181,6 +182,7 @@ export interface EditRequests {
   previewDataSourceConnection: (
     request: ListDataSourceConnectionRequest,
   ) => Promise<null>;
+  discoverDataSources: (request: DiscoverDataSourcesRequest) => Promise<null>;
   validateSQL: (request: ValidateSQLRequest) => Promise<null>;
   openFile: (request: { path: string; lineNumber?: number }) => Promise<null>;
   getUsageStats: () => Promise<UsageResponse>;

package/src/core/wasm/bridge.ts

@@ -630,6 +630,16 @@ export class PyodideBridge implements RunRequests, EditRequests {
     return null;
   };
 
+  discoverDataSources: EditRequests["discoverDataSources"] = async (
+    request,
+  ) => {
+    await this.putControlRequest({
+      type: "discover-data-sources",
+      ...request,
+    });
+    return null;
+  };
+
   getUsageStats = throwNotImplemented;
   getEnvironmentInfo: EditRequests["getEnvironmentInfo"] = async () => {
     const response = await this.rpc.proxy.request.bridge({

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -42,6 +42,7 @@ import { connectionTransportTypeAtom, useSetAppConfig } from "../config/config";
 import { useDataSourceActions } from "../datasets/data-source-connections";
 import type { ConnectionName } from "../datasets/engines";
 import {
+  DiscoverDataSources,
   PreviewSQLSchemaList,
   PreviewSQLTable,
   PreviewSQLTableList,
@@ -394,6 +395,9 @@ export function useMarimoKernelConnection(opts: {
       case "validate-sql-result":
         ValidateSQL.resolve(msg.data.request_id as RequestId, msg.data);
         return;
+      case "data-source-discovery-result":
+        DiscoverDataSources.resolve(msg.data.request_id as RequestId, msg.data);
+        return;
       case "secret-keys-result":
         SECRETS_REGISTRY.resolve(msg.data.request_id, msg.data);
         return;

package/src/hooks/__tests__/useDataSourceDiscovery.test.ts

@@ -0,0 +1,80 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { DiscoverDataSources } from "@/core/datasets/request-registry";
+import { loadDataSourceDiscovery } from "../useDataSourceDiscovery";
+
+describe("loadDataSourceDiscovery", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns the kernel's secret-free discovery model", async () => {
+    const sources = [
+      {
+        id: "pyiceberg-prod",
+        integration: "pyiceberg",
+        category: "catalog" as const,
+        displayName: "PyIceberg (prod)",
+        confidence: "high" as const,
+        origins: [
+          {
+            type: "configuration" as const,
+            label: "Resolved PyIceberg configuration",
+          },
+        ],
+        configuration: [
+          {
+            field: "Catalog",
+            value: {
+              kind: "safe-literal" as const,
+              value: "prod",
+            },
+          },
+        ],
+        code: 'catalog = load_catalog("prod")',
+      },
+    ];
+    const request = vi.spyOn(DiscoverDataSources, "request").mockResolvedValue({
+      request_id: "request-id",
+      sources,
+    });
+
+    const detected = await loadDataSourceDiscovery();
+
+    expect({ detected, requests: request.mock.calls }).toMatchInlineSnapshot(`
+      {
+        "detected": [
+          {
+            "category": "catalog",
+            "code": "catalog = load_catalog("prod")",
+            "confidence": "high",
+            "configuration": [
+              {
+                "field": "Catalog",
+                "value": {
+                  "kind": "safe-literal",
+                  "value": "prod",
+                },
+              },
+            ],
+            "displayName": "PyIceberg (prod)",
+            "id": "pyiceberg-prod",
+            "integration": "pyiceberg",
+            "origins": [
+              {
+                "label": "Resolved PyIceberg configuration",
+                "type": "configuration",
+              },
+            ],
+          },
+        ],
+        "requests": [
+          [
+            {},
+          ],
+        ],
+      }
+    `);
+  });
+});

package/src/hooks/useDataSourceDiscovery.ts

@@ -0,0 +1,18 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { DetectedDataSource } from "@/core/datasets/data-source-discovery";
+import { DiscoverDataSources } from "@/core/datasets/request-registry";
+import { useAsyncData } from "./useAsyncData";
+
+export async function loadDataSourceDiscovery(): Promise<DetectedDataSource[]> {
+  const result = await DiscoverDataSources.request({});
+  return result.sources;
+}
+
+/**
+ * Reusable UI-facing hook for kernel-managed datasource discovery.
+ * Consumers decide how to render, filter, or act on the detected model.
+ */
+export function useDataSourceDiscovery() {
+  return useAsyncData(loadDataSourceDiscovery, []);
+}