@marimo-team/frontend 0.16.1 → 0.16.3

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

@@ -5,23 +5,32 @@ import { insertTab } from "@codemirror/commands";
 import { type SQLDialect, type SQLNamespace, sql } from "@codemirror/lang-sql";
 import type { EditorState, Extension } from "@codemirror/state";
 import { Compartment } from "@codemirror/state";
-import { type EditorView, keymap } from "@codemirror/view";
+import { EditorView, keymap } from "@codemirror/view";
 import type { SyntaxNode, TreeCursor } from "@lezer/common";
 import { parser } from "@lezer/python";
 import {
   defaultSqlHoverTheme,
   NodeSqlParser,
+  type NodeSqlParserResult,
   type SupportedDialects as ParserDialects,
+  type SqlParseError,
   sqlExtension,
 } from "@marimo-team/codemirror-sql";
 import { DuckDBDialect } from "@marimo-team/codemirror-sql/dialects";
 import dedent from "string-dedent";
+import { cellIdState } from "@/core/codemirror/cells/state";
 import { getFeatureFlag } from "@/core/config/feature-flag";
 import {
   dataSourceConnectionsAtom,
   setLatestEngineSelected,
 } from "@/core/datasets/data-source-connections";
-import { type ConnectionName, DUCKDB_ENGINE } from "@/core/datasets/engines";
+import {
+  type ConnectionName,
+  DUCKDB_ENGINE,
+  INTERNAL_SQL_ENGINES,
+} from "@/core/datasets/engines";
+import { ValidateSQL } from "@/core/datasets/request-registry";
+import type { ValidateSQLResult } from "@/core/kernel/messages";
 import { store } from "@/core/state/jotai";
 import { resolvedThemeAtom } from "@/theme/useTheme";
 import { Logger } from "@/utils/Logger";
@@ -32,11 +41,16 @@ import { parseArgsKwargs } from "../../utils/ast";
 import { indentOneTab } from "../../utils/indentOneTab";
 import type { QuotePrefixKind } from "../../utils/quotes";
 import { MarkdownLanguageAdapter } from "../markdown";
+import {
+  clearSqlValidationError,
+  setSqlValidationError,
+} from "./banner-validation-errors";
 import {
   customKeywordCompletionSource,
   tablesCompletionSource,
 } from "./completion-sources";
 import { SCHEMA_CACHE } from "./completion-store";
+import { getSQLMode, type SQLMode } from "./sql-mode";
 
 const DEFAULT_DIALECT = DuckDBDialect;
 const DEFAULT_PARSER_DIALECT = "DuckDB";
@@ -64,12 +78,15 @@ export class SQLLanguageAdapter
 {
   readonly type = "sql";
   sqlLinterEnabled: boolean;
+  sqlModeEnabled: boolean;
 
   constructor() {
     try {
       this.sqlLinterEnabled = getFeatureFlag("sql_linter");
+      this.sqlModeEnabled = getFeatureFlag("sql_mode");
     } catch {
       this.sqlLinterEnabled = false;
+      this.sqlModeEnabled = false;
     }
   }
 
@@ -230,7 +247,7 @@ export class SQLLanguageAdapter
 
     if (this.sqlLinterEnabled) {
       const theme = store.get(resolvedThemeAtom);
-      const parser = new NodeSqlParser({
+      const parser = new CustomSqlParser({
         getParserOptions: (state: EditorState) => {
           return {
             database: guessParserDialect(state) ?? DEFAULT_PARSER_DIALECT,
@@ -262,13 +279,103 @@ export class SQLLanguageAdapter
             theme: defaultSqlHoverTheme(theme),
           },
         }),
+        EditorView.updateListener.of((update) => {
+          if (update.focusChanged) {
+            parser.setFocusState(update.view.hasFocus);
+          }
+        }),
       );
     }
 
+    if (this.sqlModeEnabled) {
+      extensions.push(sqlValidationExtension());
+    }
+
     return extensions;
   }
 }
 
+class CustomSqlParser extends NodeSqlParser {
+  private validationTimeout: number | null = null;
+  private readonly VALIDATION_DELAY_MS = 300; // Wait 300ms after user stops typing
+  private isFocused = false; // Only validate if the editor is focused
+
+  setFocusState(focused: boolean) {
+    this.isFocused = focused;
+  }
+
+  private async validateWithDelay(
+    sql: string,
+    engine: string,
+    dialect: ParserDialects | null,
+  ): Promise<SqlParseError[]> {
+    // Clear any existing delay call
+    if (this.validationTimeout) {
+      window.clearTimeout(this.validationTimeout);
+    }
+
+    // Set up a new request to be called after the delay
+    return new Promise((resolve) => {
+      this.validationTimeout = window.setTimeout(async () => {
+        // Only validate if the editor is still focused
+        if (!this.isFocused) {
+          resolve([]);
+          return;
+        }
+
+        try {
+          const sqlMode = getSQLMode();
+          const result = await validateSQL(sql, engine, dialect, sqlMode);
+          if (result.error) {
+            Logger.error("Failed to validate SQL", { error: result.error });
+            resolve([]);
+            return;
+          }
+          resolve(result.parse_result?.errors ?? []);
+        } catch (error) {
+          Logger.error("Failed to validate SQL", { error });
+          resolve([]);
+        }
+      }, this.VALIDATION_DELAY_MS);
+    });
+  }
+
+  override async validateSql(
+    sql: string,
+    opts: { state: EditorState },
+  ): Promise<SqlParseError[]> {
+    const metadata = getSQLMetadata(opts.state);
+
+    // Only validate if the editor is focused
+    if (!this.isFocused) {
+      return [];
+    }
+
+    // Only perform custom validation for DuckDB
+    if (!INTERNAL_SQL_ENGINES.has(metadata.engine)) {
+      return super.validateSql(sql, opts);
+    }
+
+    const dialect = guessParserDialect(opts.state);
+    return this.validateWithDelay(sql, metadata.engine, dialect);
+  }
+
+  override async parse(
+    sql: string,
+    opts: { state: EditorState },
+  ): Promise<NodeSqlParserResult> {
+    const metadata = getSQLMetadata(opts.state);
+    const engine = metadata.engine;
+
+    // For now, always return success for DuckDB
+    if (engine === DUCKDB_ENGINE) {
+      return { success: true, errors: [] };
+    }
+
+    return super.parse(sql, opts);
+  }
+}
+
 /**
  * Update the SQL dialect in the editor view.
  */
@@ -315,9 +422,14 @@ function getSchema(view: EditorView): SQLNamespace {
 function guessParserDialect(state: EditorState): ParserDialects | null {
   const metadata = getSQLMetadata(state);
   const connectionName = metadata.engine;
+  return connectionNameToParserDialect(connectionName);
+}
+
+function connectionNameToParserDialect(
+  connectionName: ConnectionName,
+): ParserDialects | null {
   const dialect =
     SCHEMA_CACHE.getInternalDialect(connectionName)?.toLowerCase();
-
   switch (dialect) {
     case "postgresql":
     case "postgres":
@@ -543,3 +655,105 @@ function safeDedent(code: string): string {
     return code;
   }
 }
+
+const SQL_VALIDATION_DEBOUNCE_MS = 300;
+
+/**
+ * Custom extension to run SQL queries in EXPLAIN mode on keypress.
+ */
+function sqlValidationExtension(): Extension {
+  let debounceTimeout: number | undefined;
+  let lastValidationRequest: string | null = null;
+
+  return EditorView.updateListener.of((update) => {
+    // Only run validation if the document has changed
+    if (!update.docChanged) {
+      return;
+    }
+
+    // Only run validation if the SQL mode is set to validate
+    const sqlMode = getSQLMode();
+    if (sqlMode !== "validate") {
+      return;
+    }
+
+    const metadata = getSQLMetadata(update.state);
+    const connectionName = metadata.engine;
+
+    // Currently only DuckDB is supported
+    if (!INTERNAL_SQL_ENGINES.has(connectionName)) {
+      return;
+    }
+
+    const doc = update.state.doc;
+    const sqlContent = doc.toString();
+
+    // Clear existing timeout
+    if (debounceTimeout) {
+      window.clearTimeout(debounceTimeout);
+    }
+
+    // Debounce the validation call
+    debounceTimeout = window.setTimeout(async () => {
+      // Skip if content hasn't changed since last validation
+      if (lastValidationRequest === sqlContent) {
+        return;
+      }
+
+      lastValidationRequest = sqlContent;
+      const cellId = update.view.state.facet(cellIdState);
+
+      if (sqlContent === "") {
+        clearSqlValidationError(cellId);
+        return;
+      }
+
+      try {
+        const dialect = connectionNameToParserDialect(connectionName);
+        const sqlMode = getSQLMode();
+        const result = await validateSQL(
+          sqlContent,
+          connectionName,
+          dialect,
+          sqlMode,
+        );
+        const validateResult = result.validate_result;
+
+        if (validateResult?.error_message) {
+          setSqlValidationError({
+            cellId,
+            errorMessage: validateResult.error_message,
+            dialect,
+          });
+        } else {
+          clearSqlValidationError(cellId);
+        }
+      } catch (error) {
+        Logger.error("Failed to validate SQL", { error });
+      }
+    }, SQL_VALIDATION_DEBOUNCE_MS);
+  });
+}
+
+/**
+ * Determine if we should only parse or validate an SQL query.
+ * The endpoint is cached, so we should use the same mode for all validation requests.
+ */
+async function validateSQL(
+  sql: string,
+  engine: string,
+  dialect: ParserDialects | null,
+  sqlMode: SQLMode,
+): Promise<ValidateSQLResult> {
+  const result = await ValidateSQL.request({
+    onlyParse: sqlMode === "default",
+    engine,
+    dialect,
+    query: sql,
+  });
+
+  if (result.error) {
+    throw new Error(result.error);
+  }
+  return result;
+}

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

@@ -18,8 +18,11 @@ import {
 } from "@marimo-team/codemirror-sql/dialects";
 import type { DataSourceConnection } from "@/core/kernel/messages";
 
+/**
+ * Guess the CodeMirror SQL dialect from the backend connection dialect.
+ */
 export function guessDialect(
-  connection: DataSourceConnection,
+  connection: Pick<DataSourceConnection, "dialect">,
 ): SQLDialect | undefined {
   switch (connection.dialect) {
     case "postgresql":

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

@@ -5,7 +5,8 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { normalizeName } from "@/core/cells/names";
-import type { ConnectionName } from "@/core/datasets/engines";
+import { getFeatureFlag } from "@/core/config/feature-flag";
+import { type ConnectionName, DUCKDB_ENGINE } from "@/core/datasets/engines";
 import { useAutoGrowInputProps } from "@/hooks/useAutoGrowInputProps";
 import { formatSQL } from "../../format";
 import { languageAdapterState } from "../extension";
@@ -22,7 +23,7 @@ import {
 import type { LanguageMetadataOf } from "../types";
 import type { QuotePrefixKind } from "../utils/quotes";
 import { getQuotePrefix, MarkdownQuotePrefixTooltip } from "./markdown";
-import { SQLEngineSelect } from "./sql";
+import { SQLEngineSelect, SQLModeSelect } from "./sql";
 
 const Divider = () => <div className="h-4 border-r border-border" />;
 
@@ -70,6 +71,8 @@ export const LanguagePanelComponent: React.FC<{
       updateSQLDialectFromConnection(view, engine);
     };
 
+    const sqlModeEnabled = getFeatureFlag("sql_mode");
+
     actions = (
       <div className="flex flex-1 gap-2 items-center">
         <label className="flex gap-2 items-center">
@@ -95,6 +98,9 @@ export const LanguagePanelComponent: React.FC<{
           onChange={switchEngine}
         />
         <div className="flex items-center gap-2 ml-auto">
+          {sqlModeEnabled && metadata.engine === DUCKDB_ENGINE && (
+            <SQLModeSelect />
+          )}
           <Tooltip content="Format SQL">
             <Button
               variant="text"

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

@@ -1,9 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import type { SelectTriggerProps } from "@radix-ui/react-select";
 import { useAtomValue } from "jotai";
-import { AlertCircle, CircleHelpIcon } from "lucide-react";
+import {
+  AlertCircle,
+  CircleHelpIcon,
+  DatabaseBackup,
+  SearchCheck,
+} from "lucide-react";
 import { transformDisplayName } from "@/components/databases/display";
 import { DatabaseLogo } from "@/components/databases/icon";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -14,6 +21,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Tooltip } from "@/components/ui/tooltip";
 import {
   dataConnectionsMapAtom,
   setLatestEngineSelected,
@@ -24,6 +32,8 @@ import {
 } from "@/core/datasets/engines";
 import type { DataSourceConnection } from "@/core/kernel/messages";
 import { useNonce } from "@/hooks/useNonce";
+import { clearAllSqlValidationErrors } from "../languages/sql/banner-validation-errors";
+import { type SQLMode, useSQLMode } from "../languages/sql/sql-mode";
 
 interface SelectProps {
   selectedEngine: ConnectionName;
@@ -77,7 +87,7 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
       <SelectItem key={connection.name} value={connection.name}>
         <div className="flex items-center gap-1">
           <DatabaseLogo className="h-3 w-3" name={connection.dialect} />
-          <span className="truncate">
+          <span className="truncate ml-0.5">
             {transformDisplayName(connection.display_name)}
           </span>
         </div>
@@ -88,9 +98,9 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
   return (
     <div className="flex flex-row gap-1 items-center">
       <Select value={selectedEngine} onValueChange={handleSelectEngine}>
-        <SelectTrigger className="text-xs border-border shadow-none! ring-0! h-4.5 px-1.5">
+        <SQLSelectTrigger>
           <SelectValue placeholder="Select an engine" />
-        </SelectTrigger>
+        </SQLSelectTrigger>
         <SelectContent>
           <SelectGroup>
             <SelectLabel>Database connections</SelectLabel>
@@ -130,3 +140,75 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
 const HELP_KEY = "__help__";
 const HELP_URL =
   "http://docs.marimo.io/guides/working_with_data/sql/#connecting-to-a-custom-database";
+
+export const SQLModeSelect: React.FC = () => {
+  const { sqlMode, setSQLMode } = useSQLMode();
+
+  const handleToggleMode = () => {
+    const nextMode = sqlMode === "validate" ? "default" : "validate";
+    if (nextMode === "default") {
+      clearAllSqlValidationErrors();
+    }
+    setSQLMode(nextMode);
+  };
+
+  const getModeIcon = (mode: SQLMode) => {
+    return mode === "validate" ? (
+      <SearchCheck className="h-3 w-3" />
+    ) : (
+      <DatabaseBackup className="h-3 w-3" />
+    );
+  };
+
+  const getTooltipContent = (mode: SQLMode) => {
+    return mode === "validate" ? (
+      <div className="text-xs">
+        <div className="font-semibold mb-1 flex flex-row items-center gap-1">
+          <SearchCheck className="h-3 w-3" />
+          Validate Mode
+        </div>
+        <p>Queries are validated as you write them</p>
+      </div>
+    ) : (
+      <div className="text-xs">
+        <div className="font-semibold mb-1 flex flex-row items-center gap-1">
+          <DatabaseBackup className="h-3 w-3" />
+          Default Mode
+        </div>
+        <p>Standard editing</p>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-row gap-1 items-center">
+      <Tooltip delayDuration={300} content={getTooltipContent(sqlMode)}>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleToggleMode}
+          className="h-5 px-1.5 text-xs border-border shadow-none hover:bg-accent"
+        >
+          {getModeIcon(sqlMode)}
+          <span className="ml-1">
+            {sqlMode === "validate" ? "Validate" : "Default"}
+          </span>
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+const SQLSelectTrigger: React.FC<SelectTriggerProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <SelectTrigger
+      className="text-xs border-border shadow-none! ring-0! h-5 px-1.5 hover:bg-accent transition-colors"
+      {...props}
+    >
+      {children}
+    </SelectTrigger>
+  );
+};

package/src/core/codemirror/language/utils/ast.ts

@@ -10,7 +10,7 @@ export function parseArgsKwargs(
   code: string,
 ): {
   args: SyntaxNode[];
-  kwargs: Array<{ key: string; value: string }>;
+  kwargs: { key: string; value: string }[];
 } {
   // Check we are in an ArgList
   const name = argCursor.name;
@@ -54,8 +54,8 @@ function parseArgs(argCursor: TreeCursor): SyntaxNode[] {
 function parseKwargs(
   argCursor: TreeCursor,
   code: string,
-): Array<{ key: string; value: string }> {
-  const kwargs: Array<{ key: string; value: string }> = [];
+): { key: string; value: string }[] {
+  const kwargs: { key: string; value: string }[] = [];
   let name = argCursor.name;
 
   do {

package/src/core/codemirror/lsp/federated-lsp.ts

@@ -115,7 +115,7 @@ export class FederatedLanguageServerClient implements ILanguageServerClient {
 
   async textDocumentCodeAction(
     params: LSP.CodeActionParams,
-  ): Promise<Array<LSP.Command | LSP.CodeAction> | null> {
+  ): Promise<(LSP.Command | LSP.CodeAction)[] | null> {
     const client = this.firstWithCapability("codeActionProvider");
     if (client) {
       return client.textDocumentCodeAction(params);
@@ -206,9 +206,9 @@ export class FederatedLanguageServerClient implements ILanguageServerClient {
 }
 
 function mergeCompletions(
-  results: Array<
-    PromiseSettledResult<LSP.CompletionList | LSP.CompletionItem[] | null>
-  >,
+  results: PromiseSettledResult<
+    LSP.CompletionList | LSP.CompletionItem[] | null
+  >[],
 ): LSP.CompletionList {
   const completions: LSP.CompletionItem[] = [];
   let isIncomplete = false;

package/src/core/codemirror/lsp/lens.ts

@@ -22,10 +22,10 @@ export interface NotebookLens {
   reversePosition: (position: LSP.Position, cellId: CellId) => LSP.Position;
 
   /** Clip a range to the given cell */
-  getEditsForNewText: (newText: string) => Array<{
+  getEditsForNewText: (newText: string) => {
     cellId: CellId;
     text: string;
-  }>;
+  }[];
 
   /** Check if a range falls within the given cell */
   isInRange: (range: LSP.Range, cellId: CellId) => boolean;
@@ -84,10 +84,10 @@ export function createNotebookLens(
         throw new Error("Cannot apply rename when there are new lines");
       }
 
-      const edits: Array<{
+      const edits: {
         cellId: CellId;
         text: string;
-      }> = [];
+      }[] = [];
 
       for (const [cellId, code] of Objects.entries(codes)) {
         if (!cellLineOffsets.has(cellId)) {

package/src/core/codemirror/lsp/notebook-lsp.ts

@@ -300,7 +300,7 @@ export class NotebookLanguageServerClient implements ILanguageServerClient {
 
   textDocumentCodeAction(
     params: LSP.CodeActionParams,
-  ): Promise<Array<LSP.Command | LSP.CodeAction> | null> {
+  ): Promise<(LSP.Command | LSP.CodeAction)[] | null> {
     const disabledCodeAction = true;
     if (disabledCodeAction) {
       return Promise.resolve(null);

package/src/core/codemirror/lsp/types.ts

@@ -49,7 +49,7 @@ export function isClientWithNotify(
 export function isClientWithPlugins(
   client: ILanguageServerClient,
 ): client is ILanguageServerClient & {
-  plugins: Array<{ documentUri: string; view?: EditorView }>;
+  plugins: { documentUri: string; view?: EditorView }[];
 } {
   return "plugins" in client;
 }

package/src/core/codemirror/markdown/completions.ts

@@ -133,7 +133,7 @@ const latexSymbolCompletionSource: CompletionSource = (context) => {
 
 // Common LaTeX symbols with their UTF-8 equivalents
 const getLatexSymbolList = once((): Completion[] => {
-  const symbols: Array<[string, string, string]> = [
+  const symbols: [string, string, string][] = [
     // Greek letters
     ["alpha", "α", "Greek small letter alpha"],
     ["beta", "β", "Greek small letter beta"],

package/src/core/codemirror/reactive-references/analyzer.ts

@@ -67,7 +67,7 @@ export function findReactiveVariables(options: {
   // Maps to track variable declarations and scopes
   const allDeclarations = new Map<number, Set<string>>(); // scope position -> variable names
   const scopeTypes = new Map<number, string>(); // scope position -> scope type (e.g., "ClassDefinition")
-  const classLevelDeclarations = new Map<number, Array<[string, number]>>(); // class scope -> [varName, position] pairs
+  const classLevelDeclarations = new Map<number, [string, number][]>(); // class scope -> [varName, position] pairs
 
   // Class-level variables require special handling because they're evaluated sequentially
   // A variable is only available after its assignment statement completes
@@ -555,7 +555,7 @@ function extractAssignmentTargets(
     state: EditorState;
     allDeclarations: Map<number, Set<string>>;
     scopeTypes: Map<number, string>;
-    classLevelDeclarations: Map<number, Array<[string, number]>>;
+    classLevelDeclarations: Map<number, [string, number][]>;
     assignmentPosition: number;
   },
 ) {

package/src/core/codemirror/rtc/loro/awareness.ts

@@ -302,7 +302,7 @@ const parseAwarenessUpdate = (
     removed: PeerID[];
   },
   scopeId: ScopeId,
-): Array<StateEffect<CursorEffect>> => {
+): StateEffect<CursorEffect>[] => {
   const effects = [];
   const { updated, added } = arg;
   for (const update of [...updated, ...added]) {

package/src/core/config/config-schema.ts

@@ -163,6 +163,7 @@ export const UserConfigSchema = z
         anthropic: AiConfigSchema.optional(),
         google: AiConfigSchema.optional(),
         ollama: AiConfigSchema.optional(),
+        openrouter: AiConfigSchema.optional(),
         open_ai_compatible: AiConfigSchema.optional(),
         azure: AiConfigSchema.optional(),
         bedrock: z

package/src/core/config/feature-flag.tsx

@@ -12,8 +12,10 @@ export interface ExperimentalFeatures {
   rtc_v2: boolean;
   performant_table_charts: boolean;
   mcp_docs: boolean;
+  chat_modes: boolean;
   sql_linter: boolean;
   external_agents: boolean;
+  sql_mode: boolean;
   // Add new feature flags here
 }
 
@@ -24,15 +26,17 @@ const defaultValues: ExperimentalFeatures = {
   rtc_v2: false,
   performant_table_charts: false,
   mcp_docs: false,
-  sql_linter: false,
+  chat_modes: false,
+  sql_linter: true,
   external_agents: import.meta.env.DEV,
+  sql_mode: false,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(
   feature: T,
 ): ExperimentalFeatures[T] {
   return (
-    (getResolvedMarimoConfig().experimental?.[
+    (getResolvedMarimoConfig()?.experimental?.[
       feature
     ] as ExperimentalFeatures[T]) ?? defaultValues[feature]
   );