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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.16-dev51",
+  "version": "0.23.16-dev53",
   "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/codemirror/language/__tests__/sql.test.ts

@@ -27,6 +27,7 @@ import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { store } from "@/core/state/jotai";
 import type { PlaceholderType } from "../../config/types";
 import { TestSQLCompletionStore } from "../languages/sql/completion-store";
+import * as sqlMode from "../languages/sql/sql-mode";
 import {
   exportedForTesting,
   SQLLanguageAdapter,
@@ -971,13 +972,63 @@ describe("SQL analysis features", () => {
 });
 
 describe("CustomSqlParser", () => {
+  beforeEach(() => {
+    store.set(dataSourceConnectionsAtom, {
+      connectionsMap: new Map(),
+      latestEngineSelected: DUCKDB_ENGINE,
+    });
+  });
+
   afterEach(() => {
     vi.useRealTimers();
     vi.restoreAllMocks();
+    store.set(dataSourceConnectionsAtom, {
+      connectionsMap: new Map(),
+      latestEngineSelected: DUCKDB_ENGINE,
+    });
   });
 
+  const createNamedConnectionState = ({
+    doc,
+    engine,
+    dialect,
+  }: {
+    doc: string;
+    engine: ConnectionName;
+    dialect: string;
+  }) => {
+    store.set(dataSourceConnectionsAtom, {
+      connectionsMap: new Map([
+        [
+          engine,
+          {
+            name: engine,
+            dialect,
+            display_name: engine,
+            source: dialect,
+            databases: [],
+          },
+        ],
+      ]),
+      latestEngineSelected: engine,
+    });
+    return EditorState.create({
+      doc,
+      extensions: [
+        languageMetadataField.init(() => ({
+          dataframeName: "_df",
+          quotePrefix: "f",
+          commentLines: [],
+          showOutput: true,
+          engine,
+        })),
+      ],
+    });
+  };
+
   it("uses backend DuckDB validation", async () => {
     vi.useFakeTimers();
+    vi.spyOn(sqlMode, "getSQLMode").mockReturnValue("validate");
     const error = {
       message: "Backend syntax error",
       line: 1,
@@ -1009,13 +1060,146 @@ describe("CustomSqlParser", () => {
     await vi.runAllTimersAsync();
 
     await expect(result).resolves.toEqual([error]);
-    expect(request).toHaveBeenCalledWith(
-      expect.objectContaining({
-        engine: DUCKDB_ENGINE,
-        onlyParse: true,
-        query: "SELECT",
-      }),
-    );
+    // No connection is registered for the internal engine, so the dialect
+    // falls back to DEFAULT_PARSER_DIALECT ("DuckDB").
+    expect(request).toHaveBeenCalledWith({
+      dialect: "DuckDB",
+      engine: DUCKDB_ENGINE,
+      onlyParse: false,
+      query: "SELECT",
+    });
+  });
+
+  it("resolves superseded validation requests instead of leaving them pending", async () => {
+    vi.useFakeTimers();
+    vi.spyOn(sqlMode, "getSQLMode").mockReturnValue("validate");
+    const error = {
+      message: "Backend syntax error",
+      line: 1,
+      column: 1,
+      severity: "error" as const,
+    };
+    vi.spyOn(ValidateSQL, "request").mockResolvedValue({
+      error: null,
+      parse_result: { success: false, errors: [error] },
+      request_id: "request-id",
+      validate_result: null,
+    });
+    const state = EditorState.create({
+      doc: "SELECT",
+      extensions: [
+        languageMetadataField.init(() => ({
+          dataframeName: "_df",
+          quotePrefix: "f",
+          commentLines: [],
+          showOutput: true,
+          engine: DUCKDB_ENGINE,
+        })),
+      ],
+    });
+    const parser = new exportedForTesting.CustomSqlParser();
+    parser.setFocusState(true);
+
+    // Simulate a rapid edit: a second validation call arrives before the
+    // first call's internal debounce timer has fired. The first call should
+    // resolve (with no errors) rather than hang forever.
+    const first = parser.validateSql("SELECT 1", { state });
+    await vi.advanceTimersByTimeAsync(100);
+    const second = parser.validateSql("SELECT 2", { state });
+    await vi.runAllTimersAsync();
+
+    await expect(first).resolves.toEqual([]);
+    await expect(second).resolves.toEqual([error]);
+  });
+
+  it("uses backend validation for a named DuckDB connection", async () => {
+    vi.useFakeTimers();
+    vi.spyOn(sqlMode, "getSQLMode").mockReturnValue("validate");
+    const query =
+      'INSERT OR IGNORE INTO "rebalance-dates" (Timestamp) VALUES (CURRENT_TIMESTAMP);';
+    const error = {
+      message: "Named DuckDB backend result",
+      line: 1,
+      column: 1,
+      severity: "error" as const,
+    };
+    const request = vi.spyOn(ValidateSQL, "request").mockResolvedValue({
+      error: null,
+      parse_result: { success: false, errors: [error] },
+      request_id: "request-id",
+      validate_result: null,
+    });
+    const state = createNamedConnectionState({
+      doc: query,
+      engine: "con" as ConnectionName,
+      dialect: "duckdb",
+    });
+    const parser = new exportedForTesting.CustomSqlParser();
+    parser.setFocusState(true);
+
+    const result = parser.validateSql(query, { state });
+    await vi.runAllTimersAsync();
+
+    await expect(result).resolves.toEqual([error]);
+    expect(request).toHaveBeenCalledWith({
+      dialect: "DuckDB",
+      engine: "con",
+      onlyParse: true,
+      query,
+    });
+  });
+
+  it("skips client-side parsing for named DuckDB SQL", async () => {
+    const query = "CHECKPOINT;";
+    const state = createNamedConnectionState({
+      doc: query,
+      engine: "con" as ConnectionName,
+      dialect: "duckdb",
+    });
+    const parser = new exportedForTesting.CustomSqlParser();
+
+    await expect(parser.parse(query, { state })).resolves.toEqual({
+      success: true,
+      errors: [],
+    });
+  });
+
+  it("preserves client-side parsing for non-DuckDB connections", async () => {
+    const query = "SELECT TOP 1 * FROM users";
+    const state = createNamedConnectionState({
+      doc: query,
+      engine: "postgres_con" as ConnectionName,
+      dialect: "postgres",
+    });
+    const parser = new exportedForTesting.CustomSqlParser();
+
+    await expect(parser.parse(query, { state })).resolves.toMatchObject({
+      success: false,
+    });
+  });
+
+  it("preserves client-side parsing for an unregistered connection", async () => {
+    // No entry is registered in the data source connections store for this
+    // engine, so its dialect cannot be resolved (unlike a known non-DuckDB
+    // dialect, which resolves to a non-null, non-DuckDB value).
+    const query = "SELECT TOP 1 * FROM users";
+    const state = EditorState.create({
+      doc: query,
+      extensions: [
+        languageMetadataField.init(() => ({
+          dataframeName: "_df",
+          quotePrefix: "f",
+          commentLines: [],
+          showOutput: true,
+          engine: "unregistered_con" as ConnectionName,
+        })),
+      ],
+    });
+    const parser = new exportedForTesting.CustomSqlParser();
+
+    await expect(parser.parse(query, { state })).resolves.toMatchObject({
+      success: false,
+    });
   });
 });
 

package/src/core/codemirror/language/languages/sql/sql.ts

@@ -66,7 +66,7 @@ import { getSQLMode, type SQLMode } from "./sql-mode";
 import { isKnownDialect } from "./utils";
 
 const DEFAULT_DIALECT = DuckDBDialect;
-const DEFAULT_PARSER_DIALECT = "DuckDB";
+const DEFAULT_PARSER_DIALECT: ParserDialects = "DuckDB";
 
 // A compartment for the SQL config, so we can update the config of codemirror
 const sqlConfigCompartment = new Compartment();
@@ -372,6 +372,8 @@ class DialectAwareSqlStructureAnalyzer extends SqlStructureAnalyzer {
 
 class CustomSqlParser extends NodeSqlParser {
   private validationTimeout: number | null = null;
+  private pendingValidationResolve: ((errors: SqlParseError[]) => void) | null =
+    null;
   private readonly VALIDATION_DELAY_MS = 300; // Wait 300ms after user stops typing
   private isFocused = false; // Only validate if the editor is focused
 
@@ -379,37 +381,51 @@ class CustomSqlParser extends NodeSqlParser {
     this.isFocused = focused;
   }
 
+  private resolvePendingValidation(errors: SqlParseError[]): void {
+    this.pendingValidationResolve?.(errors);
+    this.pendingValidationResolve = null;
+  }
+
   private async validateWithDelay(
     sql: string,
-    engine: string,
+    engine: ConnectionName,
     dialect: ParserDialects | null,
   ): Promise<SqlParseError[]> {
-    // Clear any existing delay call
+    // Clear any existing delay call, resolving its promise so a superseded
+    // request doesn't hang forever.
     if (this.validationTimeout) {
       window.clearTimeout(this.validationTimeout);
+      this.resolvePendingValidation([]);
     }
 
     // Set up a new request to be called after the delay
     return new Promise((resolve) => {
+      this.pendingValidationResolve = resolve;
       this.validationTimeout = window.setTimeout(async () => {
+        this.validationTimeout = null;
+
         // Only validate if the editor is still focused
         if (!this.isFocused) {
-          resolve([]);
+          this.resolvePendingValidation([]);
           return;
         }
 
         try {
-          const sqlMode = getSQLMode();
+          // For validate mode, we run EXPLAIN queries on the engine, which can be
+          // expensive for remote databases. So, we only run for internal engines.
+          const sqlMode = INTERNAL_SQL_ENGINES.has(engine)
+            ? getSQLMode()
+            : "default";
           const result = await validateSQL(sql, engine, dialect, sqlMode);
           if (result.error) {
             Logger.error("Failed to validate SQL", { error: result.error });
-            resolve([]);
+            this.resolvePendingValidation([]);
             return;
           }
-          resolve(result.parse_result?.errors ?? []);
+          this.resolvePendingValidation(result.parse_result?.errors ?? []);
         } catch (error) {
           Logger.error("Failed to validate SQL", { error });
-          resolve([]);
+          this.resolvePendingValidation([]);
         }
       }, this.VALIDATION_DELAY_MS);
     });
@@ -420,19 +436,23 @@ class CustomSqlParser extends NodeSqlParser {
     opts: { state: EditorState },
   ): Promise<SqlParseError[]> {
     const metadata = getSQLMetadata(opts.state);
+    const dialect = connectionNameToParserDialect(metadata.engine);
 
     // Only validate if the editor is focused
     if (!this.isFocused) {
       return [];
     }
 
-    // Only perform custom validation for DuckDB
-    if (!INTERNAL_SQL_ENGINES.has(metadata.engine)) {
+    // Only perform custom validation for DuckDB as we have a custom validation endpoint for it.
+    if (!isDuckDBConnection(metadata.engine, dialect)) {
       return super.validateSql(sql, opts);
     }
 
-    const dialect = guessParserDialect(opts.state);
-    return this.validateWithDelay(sql, metadata.engine, dialect);
+    return this.validateWithDelay(
+      sql,
+      metadata.engine,
+      dialect ?? DEFAULT_PARSER_DIALECT,
+    );
   }
 
   override async parse(
@@ -441,9 +461,10 @@ class CustomSqlParser extends NodeSqlParser {
   ): Promise<NodeSqlParserResult> {
     const metadata = getSQLMetadata(opts.state);
     const engine = metadata.engine;
+    const dialect = connectionNameToParserDialect(engine);
 
     // For now, always return success for DuckDB
-    if (engine === DUCKDB_ENGINE) {
+    if (isDuckDBConnection(engine, dialect)) {
       return { success: true, errors: [] };
     }
 
@@ -451,6 +472,13 @@ class CustomSqlParser extends NodeSqlParser {
   }
 }
 
+function isDuckDBConnection(
+  engine: ConnectionName,
+  dialect: ParserDialects | null,
+): boolean {
+  return engine === DUCKDB_ENGINE || dialect === "DuckDB";
+}
+
 /**
  * Update the SQL dialect in the editor view.
  */

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