@marimo-team/frontend 0.16.2 → 0.16.3

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

@@ -11,7 +11,9 @@ 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";
@@ -39,16 +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 } from "./sql-mode";
-import {
-  clearSqlValidationError,
-  setSqlValidationError,
-} from "./validation-errors";
+import { getSQLMode, type SQLMode } from "./sql-mode";
 
 const DEFAULT_DIALECT = DuckDBDialect;
 const DEFAULT_PARSER_DIALECT = "DuckDB";
@@ -245,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,
@@ -277,6 +279,11 @@ export class SQLLanguageAdapter
             theme: defaultSqlHoverTheme(theme),
           },
         }),
+        EditorView.updateListener.of((update) => {
+          if (update.focusChanged) {
+            parser.setFocusState(update.view.hasFocus);
+          }
+        }),
       );
     }
 
@@ -288,6 +295,87 @@ export class SQLLanguageAdapter
   }
 }
 
+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.
  */
@@ -568,11 +656,22 @@ function safeDedent(code: string): string {
   }
 }
 
+const SQL_VALIDATION_DEBOUNCE_MS = 300;
+
+/**
+ * Custom extension to run SQL queries in EXPLAIN mode on keypress.
+ */
 function sqlValidationExtension(): Extension {
-  let debounceTimeout: NodeJS.Timeout | null = null;
+  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;
@@ -580,12 +679,9 @@ function sqlValidationExtension(): Extension {
 
     const metadata = getSQLMetadata(update.state);
     const connectionName = metadata.engine;
-    if (!INTERNAL_SQL_ENGINES.has(connectionName)) {
-      // Currently only internal engines are supported
-      return;
-    }
 
-    if (!update.docChanged) {
+    // Currently only DuckDB is supported
+    if (!INTERNAL_SQL_ENGINES.has(connectionName)) {
       return;
     }
 
@@ -594,11 +690,11 @@ function sqlValidationExtension(): Extension {
 
     // Clear existing timeout
     if (debounceTimeout) {
-      clearTimeout(debounceTimeout);
+      window.clearTimeout(debounceTimeout);
     }
 
     // Debounce the validation call
-    debounceTimeout = setTimeout(async () => {
+    debounceTimeout = window.setTimeout(async () => {
       // Skip if content hasn't changed since last validation
       if (lastValidationRequest === sqlContent) {
         return;
@@ -613,20 +709,51 @@ function sqlValidationExtension(): Extension {
       }
 
       try {
-        const result: ValidateSQLResult = await ValidateSQL.request({
-          engine: connectionName,
-          query: sqlContent,
-        });
-
-        if (result.error) {
-          const dialect = connectionNameToParserDialect(connectionName);
-          setSqlValidationError({ cellId, error: result.error, dialect });
+        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.warn("Failed to validate SQL", { error });
+        Logger.error("Failed to validate SQL", { error });
       }
-    }, 300);
+    }, 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/sql.tsx

@@ -32,6 +32,7 @@ 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 {
@@ -144,7 +145,11 @@ export const SQLModeSelect: React.FC = () => {
   const { sqlMode, setSQLMode } = useSQLMode();
 
   const handleToggleMode = () => {
-    setSQLMode(sqlMode === "validate" ? "default" : "validate");
+    const nextMode = sqlMode === "validate" ? "default" : "validate";
+    if (nextMode === "default") {
+      clearAllSqlValidationErrors();
+    }
+    setSQLMode(nextMode);
   };
 
   const getModeIcon = (mode: SQLMode) => {

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,6 +12,7 @@ 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;
@@ -25,7 +26,8 @@ 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,
 };

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

@@ -4,6 +4,7 @@ import type {
   SQLTablePreview,
   ValidateSQLResult,
 } from "../kernel/messages";
+import { CachingRequestRegistry } from "../network/CachingRequestRegistry";
 import { DeferredRequestRegistry } from "../network/DeferredRequestRegistry";
 import { getRequestClient } from "../network/requests";
 import type {
@@ -38,13 +39,19 @@ export const PreviewSQLTableList = new DeferredRequestRegistry<
   });
 });
 
-export const ValidateSQL = new DeferredRequestRegistry<
-  Omit<ValidateSQLRequest, "requestId">,
-  ValidateSQLResult
->("validate-sql", async (requestId, req) => {
-  const client = getRequestClient();
-  await client.validateSQL({
-    requestId: requestId,
-    ...req,
-  });
-});
+export const ValidateSQL = new CachingRequestRegistry(
+  new DeferredRequestRegistry<
+    Omit<ValidateSQLRequest, "requestId">,
+    ValidateSQLResult
+  >("validate-sql", async (requestId, req) => {
+    const client = getRequestClient();
+    await client.validateSQL({
+      requestId: requestId,
+      ...req,
+    });
+  }),
+  {
+    // Only keep the last 3 validation results
+    maxSize: 3,
+  },
+);

package/src/core/dom/events.ts

@@ -43,7 +43,7 @@ export const MarimoIncomingMessageEvent = defineCustomEvent(
 )<{
   objectId: UIElementId;
   message: unknown;
-  buffers: DataView[] | undefined;
+  buffers: readonly DataView[];
 }>();
 export type MarimoIncomingMessageEventType = ReturnType<
   typeof MarimoIncomingMessageEvent.create

package/src/core/dom/outline.ts

@@ -57,7 +57,7 @@ export function headingToIdentifier(heading: Element): OutlineItem["by"] {
   return { path: `//${heading.tagName}[contains(., "${name}")]` };
 }
 
-export function mergeOutlines(outlines: Array<Outline | null>): Outline {
+export function mergeOutlines(outlines: (Outline | null)[]): Outline {
   return {
     items: outlines.filter(Boolean).flatMap((outline) => outline.items),
   };
@@ -104,7 +104,7 @@ export function canCollapseOutline(outline: Outline | null): boolean {
  */
 export function findCollapseRange(
   startIndex: number,
-  outlines: Array<Outline | null>,
+  outlines: (Outline | null)[],
 ): [number, number] | null {
   // Higher header is the lowest value
   const getHighestHeader = (outline: Outline) => {

package/src/core/dom/uiregistry.ts

@@ -1,8 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { byteStringToDataView } from "@/utils/data-views";
-import type { Base64String } from "@/utils/json/base64";
-import { typedAtob } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import type { CellId, UIElementId } from "../cells/ids";
 import {
@@ -136,15 +133,12 @@ export class UIElementRegistry {
   broadcastMessage(
     objectId: UIElementId,
     message: unknown,
-    buffers: Base64String[] | undefined | null,
+    buffers: readonly DataView[],
   ): void {
     const entry = this.entries.get(objectId);
     if (entry === undefined) {
       Logger.warn("UIElementRegistry missing entry", objectId);
     } else {
-      const toDataView = (base64: Base64String) => {
-        return byteStringToDataView(typedAtob(base64));
-      };
       entry.elements.forEach((element) => {
         element.dispatchEvent(
           MarimoIncomingMessageEvent.create({
@@ -153,7 +147,7 @@ export class UIElementRegistry {
             detail: {
               objectId: objectId,
               message: message,
-              buffers: buffers ? buffers.map(toDataView) : undefined,
+              buffers: buffers,
             },
           }),
         );

package/src/core/errors/__tests__/errors.test.ts

@@ -16,6 +16,10 @@ describe("getImportCode", () => {
   });
 });
 
+const opts = {
+  aiEnabled: true,
+};
+
 describe("getAutoFixes", () => {
   it("returns wrap in function fix for multiple-defs error", () => {
     const error: MarimoError = {
@@ -24,7 +28,7 @@ describe("getAutoFixes", () => {
       cells: ["foo"],
     };
 
-    const fixes = getAutoFixes(error);
+    const fixes = getAutoFixes(error, opts);
     expect(fixes).toHaveLength(1);
     expect(fixes[0].title).toBe("Fix: Wrap in a function");
   });
@@ -37,11 +41,25 @@ describe("getAutoFixes", () => {
       raising_cell: null,
     };
 
-    const fixes = getAutoFixes(error);
+    const fixes = getAutoFixes(error, opts);
     expect(fixes).toHaveLength(1);
     expect(fixes[0].title).toBe("Fix: Add 'import numpy as np'");
   });
 
+  it("returns sql fix for sql-error error", () => {
+    const error: MarimoError = {
+      type: "sql-error",
+      msg: "syntax error",
+      sql_statement: "SELECT * FROM table",
+    };
+
+    const fixes = getAutoFixes(error, opts);
+    expect(fixes).toHaveLength(1);
+    expect(fixes[0].title).toBe("Fix with AI");
+
+    expect(getAutoFixes(error, { aiEnabled: false })).toHaveLength(0);
+  });
+
   it("returns no fixes for NameError with unknown import", () => {
     const error: MarimoError = {
       type: "exception",
@@ -50,7 +68,7 @@ describe("getAutoFixes", () => {
       raising_cell: null,
     };
 
-    expect(getAutoFixes(error)).toHaveLength(0);
+    expect(getAutoFixes(error, opts)).toHaveLength(0);
   });
 
   it("returns no fixes for other error types", () => {
@@ -59,6 +77,6 @@ describe("getAutoFixes", () => {
       msg: "invalid syntax",
     };
 
-    expect(getAutoFixes(error)).toHaveLength(0);
+    expect(getAutoFixes(error, opts)).toHaveLength(0);
   });
 });

package/src/core/errors/errors.ts

@@ -12,10 +12,19 @@ export interface AutoFix {
     addCodeBelow: (code: string) => void;
     editor: EditorView | undefined;
     cellId: CellId;
+    setAiCompletionCell?: (cell: {
+      cellId: CellId;
+      initialPrompt?: string;
+    }) => void;
   }) => Promise<void>;
 }
 
-export function getAutoFixes(error: MarimoError): AutoFix[] {
+export function getAutoFixes(
+  error: MarimoError,
+  opts: {
+    aiEnabled: boolean;
+  },
+): AutoFix[] {
   if (error.type === "multiple-defs") {
     return [
       {
@@ -57,6 +66,25 @@ export function getAutoFixes(error: MarimoError): AutoFix[] {
     ];
   }
 
+  if (error.type === "sql-error") {
+    // Only show AI fix if AI is enabled
+    if (!opts.aiEnabled) {
+      return [];
+    }
+    return [
+      {
+        title: "Fix with AI",
+        description: "Fix the SQL statement",
+        onFix: async (ctx) => {
+          ctx.setAiCompletionCell?.({
+            cellId: ctx.cellId,
+            initialPrompt: `Fix the SQL statement: ${error.msg}`,
+          });
+        },
+      },
+    ];
+  }
+
   return [];
 }
 

package/src/core/errors/state.ts

@@ -7,7 +7,7 @@ import { generateUUID } from "@/utils/uuid";
 import type { Banner } from "../kernel/messages";
 
 interface BannerState {
-  banners: Array<Identified<Banner>>;
+  banners: Identified<Banner>[];
 }
 
 const { valueAtom: bannersAtom, useActions } = createReducerAndAtoms(