preview: Improved SQL completions, linting, and hover (#5938)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->
Adds the integration under a feature flag.


https://github.com/user-attachments/assets/2dad658f-cb58-4fcb-adcc-f4122db3c945

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

---------

Co-authored-by: Myles Scolnick <myles@marimo.io>

Author: Light2Dark

frontend/package.json

@@ -53,6 +53,7 @@
     "@marimo-team/codemirror-languageserver": "^1.15.24",
     "@marimo-team/codemirror-mcp": "^0.1.5",
     "@marimo-team/llm-info": "workspace:*",
+    "@marimo-team/codemirror-sql": "^0.1.3",
     "@marimo-team/marimo-api": "workspace:*",
     "@marimo-team/react-slotz": "^0.2.0",
     "@mui/material": "^6.4.12",
@@ -170,7 +171,7 @@
     "start": "vite",
     "dev": "vite",
     "build:watch": "vite build --watch --outDir ../marimo/_static",
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
     "test": "vitest",
     "typecheck": "tsc",
     "lint": "run-s lint:biome lint:eslint lint:stylelint",

frontend/src/components/app-config/user-config-form.tsx

@@ -1254,6 +1254,31 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
+            <FormField
+              control={form.control}
+              name="experimental.sql_linter"
+              render={({ field }) => (
+                <div className="flex flex-col gap-y-1">
+                  <FormItem className={formItemClasses}>
+                    <FormLabel className="font-normal">SQL Linter</FormLabel>
+                    <FormControl>
+                      <Checkbox
+                        data-testid="sql-linter-checkbox"
+                        checked={field.value === true}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                  <IsOverridden
+                    userConfig={config}
+                    name="experimental.sql_linter"
+                  />
+                  <FormDescription>
+                    Enable experimental SQL linting and autocompletion.
+                  </FormDescription>
+                </div>
+              )}
+            />
           </SettingGroup>
         );
     }

frontend/src/components/chat/markdown-renderer.tsx

@@ -12,7 +12,7 @@ import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql";
+import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
 import { autoInstantiateAtom } from "@/core/config/config";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
 import { useTheme } from "@/theme/useTheme";

frontend/src/components/editor/ai/add-cell-with-ai.tsx

@@ -37,7 +37,7 @@ import {
 import { toast } from "@/components/ui/use-toast";
 import { resourceExtension } from "@/core/codemirror/ai/resources";
 import { customPythonLanguageSupport } from "@/core/codemirror/language/languages/python";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql";
+import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
 import { useRuntimeManager } from "@/core/runtime/config";
 import { type ResolvedTheme, useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";

frontend/src/components/editor/cell/CreateCellButton.tsx

@@ -10,7 +10,7 @@ import {
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql";
+import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,

frontend/src/components/editor/cell/code/language-toggle.tsx

@@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { switchLanguage } from "@/core/codemirror/language/extension";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql";
+import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
 import type { LanguageAdapter } from "@/core/codemirror/language/types";
 import { Functions } from "@/utils/functions";
 import { MarkdownIcon, PythonIcon } from "./icons";

frontend/src/components/editor/renderers/CellArray.tsx

@@ -20,7 +20,7 @@ import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
-import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql";
+import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
 import { aiEnabledAtom } from "@/core/config/config";
 import { isConnectedAtom } from "@/core/network/connection";
 import { useBoolean } from "@/hooks/useBoolean";

frontend/src/core/codemirror/language/LanguageAdapters.ts

@@ -2,7 +2,7 @@
 
 import { MarkdownLanguageAdapter } from "./languages/markdown";
 import { PythonLanguageAdapter } from "./languages/python";
-import { SQLLanguageAdapter } from "./languages/sql";
+import { SQLLanguageAdapter } from "./languages/sql/sql";
 import type { LanguageAdapter, LanguageAdapterType } from "./types";
 
 export const LanguageAdapters: Record<LanguageAdapterType, LanguageAdapter> = {

frontend/src/core/codemirror/language/__tests__/sql.test.ts

@@ -6,6 +6,7 @@ import type {
 } from "@codemirror/autocomplete";
 import { PostgreSQL } from "@codemirror/lang-sql";
 import { EditorState, type Extension } from "@codemirror/state";
+import { DuckDBDialect } from "@marimo-team/codemirror-sql/dialects";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import type { DataSourceConnection } from "@/core/datasets/data-source-connections";
 import {
@@ -16,12 +17,11 @@ import { type ConnectionName, DUCKDB_ENGINE } from "@/core/datasets/engines";
 import { datasetsAtom } from "@/core/datasets/state";
 import type { DatasetsState } from "@/core/datasets/types";
 import { store } from "@/core/state/jotai";
+import { TestSQLCompletionStore } from "../languages/sql/completion-store";
 import {
-  SQLCompletionStore,
   SQLLanguageAdapter,
   type SQLLanguageAdapterMetadata,
-} from "../languages/sql";
-import { DuckDBDialect } from "../languages/sql-dialects/duckdb";
+} from "../languages/sql/sql";
 import { languageMetadataField } from "../metadata";
 
 const adapter = new SQLLanguageAdapter();
@@ -618,7 +618,7 @@ _df = mo.sql(
 
 describe("tablesCompletionSource", () => {
   const mockStore = store;
-  const completionStore = new SQLCompletionStore();
+  const completionStore = new TestSQLCompletionStore();
 
   beforeEach(() => {
     // Reset the adapter engine
@@ -1184,7 +1184,7 @@ describe("tablesCompletionSource", () => {
     ];
 
     describe("SQL Completions", () => {
-      const completionStore = new SQLCompletionStore();
+      const completionStore = new TestSQLCompletionStore();
 
       beforeEach(() => {
         // Reset state

frontend/src/core/codemirror/language/extension.ts

@@ -28,7 +28,7 @@ import { historyCompartment } from "../editing/extensions";
 import { formattingChangeEffect } from "../format";
 import { createPanel } from "../react-dom/createPanel";
 import { getLanguageAdapters, LanguageAdapters } from "./LanguageAdapters";
-import { initializeSQLDialect } from "./languages/sql";
+import { initializeSQLDialect } from "./languages/sql/sql";
 import type { LanguageMetadata } from "./metadata";
 import { languageMetadataField, setLanguageMetadata } from "./metadata";
 import { LanguagePanelComponent } from "./panel/panel";