@marimo-team/frontend 0.16.1 → 0.16.3

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -1,6 +1,10 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { NotebookPenIcon, SquareArrowOutUpRightIcon } from "lucide-react";
+import {
+  InfoIcon,
+  NotebookPenIcon,
+  SquareArrowOutUpRightIcon,
+} from "lucide-react";
 import { Fragment, type JSX } from "react";
 import {
   Accordion,
@@ -72,6 +76,8 @@ export const MarimoErrorOutput = ({
     titleContents = "Ancestor stopped";
     alertVariant = "default";
     titleColor = "text-secondary-foreground";
+  } else if (errors.some((e) => e.type === "sql-error")) {
+    titleContents = "SQL error";
   } else {
     // Check for exception type
     const exceptionError = errors.find((e) => e.type === "exception");
@@ -126,6 +132,10 @@ export const MarimoErrorOutput = ({
   const unknownErrors = errors.filter(
     (e): e is Extract<MarimoError, { type: "unknown" }> => e.type === "unknown",
   );
+  const sqlErrors = errors.filter(
+    (e): e is Extract<MarimoError, { type: "sql-error" }> =>
+      e.type === "sql-error",
+  );
 
   const openScratchpad = () => {
     chromeActions.openApplication("scratchpad");
@@ -485,6 +495,55 @@ export const MarimoErrorOutput = ({
       );
     }
 
+    if (sqlErrors.length > 0) {
+      messages.push(
+        <div key="sql-errors">
+          {sqlErrors.map((error, idx) => {
+            const line =
+              error.sql_line == null ? null : Math.trunc(error?.sql_line) + 1;
+            const col =
+              error.sql_col == null ? null : Math.trunc(error?.sql_col) + 1;
+            return (
+              <div key={`sql-error-${idx}`} className="space-y-2 mt-2">
+                <p className="text-muted-foreground font-medium">{error.msg}</p>
+                {error.hint && (
+                  <div className="flex items-start gap-2">
+                    <InfoIcon
+                      size={11}
+                      className="text-muted-foreground mt-1 flex-shrink-0"
+                    />
+                    <p className="whitespace-pre-wrap text-sm text-muted-foreground">
+                      {error.hint}
+                    </p>
+                  </div>
+                )}
+                {error.sql_statement && (
+                  <pre
+                    lang="sql"
+                    className="text-xs bg-muted/80 rounded whitespace-pre-wrap p-3.5"
+                  >
+                    {error.sql_statement.trim()}
+                  </pre>
+                )}
+                {line !== null && col !== null && (
+                  <p className="text-xs text-muted-foreground">
+                    Error at line {line}, column {col}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+          {cellId && (
+            <AutoFixButton
+              errors={sqlErrors}
+              cellId={cellId}
+              className="mt-2.5"
+            />
+          )}
+        </div>,
+      );
+    }
+
     return messages;
   };
 

package/src/components/editor/output/MarimoTracebackOutput.tsx

@@ -108,7 +108,7 @@ export const MarimoTracebackOutput = ({
             Fix with AI
           </Button>
         )}
-        {tracebackInfo && !isWasm() && (
+        {tracebackInfo && tracebackInfo.kind === "cell" && !isWasm() && (
           <Tooltip content={"Attach pdb to the exception point."}>
             <Button
               size="xs"
@@ -180,7 +180,7 @@ function lastLine(text: string): string {
 
 export const replaceTracebackFilenames = (domNode: DOMNode) => {
   const info = getTracebackInfo(domNode);
-  if (info) {
+  if (info?.kind === "cell") {
     const tooltipContent = <InsertBreakpointContent />;
     return (
       <span className="nb">
@@ -211,6 +211,21 @@ export const replaceTracebackFilenames = (domNode: DOMNode) => {
       </span>
     );
   }
+  if (info?.kind === "file") {
+    return (
+      <div
+        className="inline-block cursor-pointer text-destructive hover:underline"
+        onClick={(_) => {
+          getRequestClient().openFile({
+            path: info.filePath,
+            lineNumber: info.lineNumber,
+          });
+        }}
+      >
+        <span className="nb">"{info.filePath}"</span>
+      </div>
+    );
+  }
 };
 
 export const replaceTracebackPrefix = (domNode: DOMNode) => {

package/src/components/editor/renderers/grid-layout/types.ts

@@ -68,13 +68,13 @@ export interface GridLayout extends Omit<SerializedGridLayout, "cells"> {
   /**
    * The cells in the layout.
    */
-  cells: Array<{
+  cells: {
     i: string;
     x: number;
     y: number;
     w: number;
     h: number;
-  }>;
+  }[];
 
   scrollableCells: Set<CellId>;
 

package/src/components/editor/renderers/plugins.ts

@@ -8,7 +8,7 @@ import { VerticalLayoutPlugin } from "./vertical-layout/vertical-layout";
 
 // If more renderers are added, we may want to consider lazy loading them.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const cellRendererPlugins: Array<ICellRendererPlugin<any, any>> = [
+export const cellRendererPlugins: ICellRendererPlugin<any, any>[] = [
   GridLayoutPlugin,
   SlidesLayoutPlugin,
   VerticalLayoutPlugin,

package/src/components/editor/renderers/types.ts

@@ -17,7 +17,7 @@ export interface ICellRendererProps<L> {
   /**
    * The cells to render.
    */
-  cells: Array<CellRuntimeState & CellData>;
+  cells: (CellRuntimeState & CellData)[];
 
   /**
    * The layout configuration.

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -198,7 +198,7 @@ const ActionButtons: React.FC<{
     actions.push(
       <DropdownMenuItem
         onSelect={onToggleShowCode}
-        id="notebook-action-show-code"
+        data-testid="notebook-action-show-code"
         key="show-code"
       >
         <Code2Icon className="mr-2" size={14} strokeWidth={1.5} />
@@ -213,7 +213,7 @@ const ActionButtons: React.FC<{
     actions.push(
       <DropdownMenuItem
         onSelect={handleDownloadAsHTML}
-        id="notebook-action-download-html"
+        data-testid="notebook-action-download-html"
         key="download-html"
       >
         <FolderDownIcon className="mr-2" size={14} strokeWidth={1.5} />
@@ -222,7 +222,7 @@ const ActionButtons: React.FC<{
       <DropdownMenuSeparator key="download-html-separator" />,
       <DropdownMenuItem
         onSelect={handleDownloadAsPNG}
-        id="notebook-action-download-png"
+        data-testid="notebook-action-download-png"
         key="download-png"
       >
         <ImageIcon className="mr-2" size={14} strokeWidth={1.5} />
@@ -239,7 +239,7 @@ const ActionButtons: React.FC<{
   // as this may be used in custom css to hide/show the actions dropdown
   return (
     <div
-      id="notebook-actions-dropdown"
+      data-testid="notebook-actions-dropdown"
       className={cn(
         "right-0 top-0 z-50 m-4 no-print flex gap-2 print:hidden",
         // If the notebook is static, we have a banner at the top, so
@@ -419,10 +419,10 @@ export const VerticalLayoutPlugin: ICellRendererPlugin<
 };
 
 export function groupCellsByColumn(
-  cells: Array<CellRuntimeState & CellData>,
-): Array<[number, Array<CellRuntimeState & CellData>]> {
+  cells: (CellRuntimeState & CellData)[],
+): [number, (CellRuntimeState & CellData)[]][] {
   // Group cells by column
-  const cellsByColumn = new Map<number, Array<CellRuntimeState & CellData>>();
+  const cellsByColumn = new Map<number, (CellRuntimeState & CellData)[]>();
   let lastSeenColumn = 0;
   cells.forEach((cell) => {
     const column = cell.config.column ?? lastSeenColumn;

package/src/components/forms/form.tsx

@@ -59,7 +59,7 @@ interface Props<T extends FieldValues> {
   form: UseFormReturn<T>;
   schema: z.ZodType;
   path?: Path<T>;
-  renderers: Array<FormRenderer<T>> | undefined;
+  renderers: FormRenderer<T>[] | undefined;
   children?: React.ReactNode;
 }
 
@@ -82,7 +82,7 @@ export function renderZodSchema<T extends FieldValues, S>(
   schema: z.ZodType<S>,
   form: UseFormReturn<T>,
   path: Path<T>,
-  renderers: Array<FormRenderer<T>>,
+  renderers: FormRenderer<T>[],
 ) {
   // Try custom renderers first
   for (const renderer of renderers) {
@@ -330,7 +330,7 @@ export function renderZodSchema<T extends FieldValues, S>(
   }
 
   if (schema instanceof z.ZodDiscriminatedUnion) {
-    const options = schema._def.options as Array<z.ZodType<unknown>>;
+    const options = schema._def.options as z.ZodType<unknown>[];
     const discriminator = schema._def.discriminator;
     const optionsMap = schema._def.optionsMap;
     return (
@@ -392,7 +392,7 @@ export function renderZodSchema<T extends FieldValues, S>(
         control={form.control}
         name={path}
         render={({ field }) => {
-          const options = schema._def.options as Array<z.ZodType<unknown>>;
+          const options = schema._def.options as z.ZodType<unknown>[];
           let value: string = field.value;
           const types = options.map((option) => {
             return getUnionLiteral(option)._def.value;
@@ -812,6 +812,6 @@ const MultiSelectFormField = ({
   );
 };
 
-function joinPath<T>(...parts: Array<string | number>): Path<T> {
+function joinPath<T>(...parts: (string | number)[]): Path<T> {
   return parts.filter((part) => part !== "").join(".") as Path<T>;
 }

package/src/components/ui/links.tsx

@@ -8,6 +8,7 @@ export const ExternalLink = ({
     | `https://console.anthropic.com/${string}`
     | `https://aistudio.google.com/${string}`
     | `https://github.com/${string}`
+    | `https://openrouter.ai/${string}`
     | `https://docs.marimo.io/${string}`
     | `https://docs.python.org/${string}`
     | `https://marimo.io/${string}`

package/src/core/ai/__tests__/model-registry.test.ts

@@ -250,16 +250,6 @@ describe("AiModelRegistry", () => {
       const providers = listModelsByProvider.map(([provider]) => provider);
       expect(providers).toEqual(PROVIDER_SORT_ORDER);
     });
-
-    it("should include custom providers at the top", () => {
-      const customModels = ["openrouter/custom-gpt"];
-      const registry = AiModelRegistry.create({ customModels });
-      const listModelsByProvider = registry.getListModelsByProvider();
-      expect(listModelsByProvider).toHaveLength(4);
-
-      const providers = listModelsByProvider.map(([provider]) => provider);
-      expect(providers).toEqual(["openrouter", ...PROVIDER_SORT_ORDER]);
-    });
   });
 
   describe("getCustomModels", () => {

package/src/core/ai/context/providers/cell-output.ts

@@ -9,6 +9,7 @@ import { displayCellName } from "@/core/cells/names";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import type { OutputMessage } from "@/core/kernel/messages";
 import type { JotaiStore } from "@/core/state/jotai";
+import { parseHtmlContent } from "@/utils/dom";
 import { Logger } from "@/utils/Logger";
 import { type AIContextItem, AIContextProvider } from "../registry";
 import { contextToXml } from "../utils";
@@ -64,24 +65,6 @@ function isMediaMimetype(
   return false;
 }
 
-function parseHtmlContent(htmlString: string): string {
-  try {
-    // Create a temporary DOM element to parse HTML
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = htmlString;
-
-    // Extract text content, removing HTML tags
-    const textContent = tempDiv.textContent || tempDiv.innerText || "";
-
-    // Clean up extra whitespace
-    return textContent.replaceAll(/\s+/g, " ").trim();
-  } catch (error) {
-    Logger.error("Error parsing HTML content:", error);
-    // If parsing fails, return the original string
-    return htmlString;
-  }
-}
-
 export class CellOutputContextProvider extends AIContextProvider<CellOutputContextItem> {
   readonly title = "Cell Outputs";
   readonly mentionPrefix = "@";

package/src/core/ai/context/providers/error.ts

@@ -14,11 +14,11 @@ export interface ErrorContextItem extends AIContextItem {
   type: "error";
   data: {
     type: "all-errors";
-    errors: Array<{
+    errors: {
       cellId: CellId;
       cellName: string;
       errorData: MarimoError[];
-    }>;
+    }[];
   };
 }
 

package/src/core/ai/ids/ids.ts

@@ -11,6 +11,7 @@ export const PROVIDERS = [
   "deepseek",
   "azure",
   "github",
+  "openrouter",
   "marimo",
 ] as const;
 export type ProviderId = (typeof PROVIDERS)[number];

package/src/core/ai/model-registry.ts

@@ -19,6 +19,7 @@ export const PROVIDER_SORT_ORDER: ProviderId[] = [
   "openai",
   "google",
   "github",
+  "openrouter",
   "deepseek",
   "azure",
   "bedrock",
@@ -201,7 +202,7 @@ export class AiModelRegistry {
     return this.modelsByProviderMap;
   }
 
-  getListModelsByProvider(): Array<[ProviderId, AiModel[]]> {
+  getListModelsByProvider(): [ProviderId, AiModel[]][] {
     const modelsByProvider = this.getGroupedModelsByProvider();
     const arrayModels = [...modelsByProvider.entries()];
     const providerToOrderIdx = getProviderMap().providerToOrderIdx;

package/src/core/cells/cells.ts

@@ -84,14 +84,14 @@ export interface NotebookState {
    *
    * (CodeMirror types the serialized config as any.)
    */
-  history: Array<{
+  history: {
     name: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     serializedEditorState: any;
     column: CellColumnId;
     index: CellIndex;
     isSetupCell: boolean;
-  }>;
+  }[];
   /**
    * Key of cell to scroll to; typically set by actions that re-order the cell
    * array. Call the SCROLL_TO_TARGET action to scroll to the specified cell
@@ -1128,10 +1128,10 @@ const {
 
         // Find the start/end of the collapsed ranges
         const nodes = [...column.nodes];
-        const rangeIndexes: Array<{
+        const rangeIndexes: {
           start: CellIndex;
           end: CellIndex;
-        }> = [];
+        }[] = [];
         const reversedCollapseRanges = [];
 
         // Iterate in reverse order (bottom-up) to process children first
@@ -1668,7 +1668,7 @@ export const getCellEditorView = (cellId: CellId) => {
 
 export function flattenTopLevelNotebookCells(
   state: NotebookState,
-): Array<CellData & CellRuntimeState> {
+): (CellData & CellRuntimeState)[] {
   const { cellIds, cellData, cellRuntime } = state;
   return cellIds.getColumns().flatMap((column) =>
     column.topLevelIds.map((cellId) => ({

package/src/core/cells/logs.ts

@@ -87,7 +87,7 @@ const CellLogLogger = {
           ? "red"
           : "orange";
     const status = payload.level.toUpperCase();
-    // eslint-disable-next-line no-console
+    /** biome-ignore lint/suspicious/noConsole: for debugging */
     console.log(
       `%c[${status}]`,
       `color:${color}; padding:2px 0; border-radius:2px; font-weight:bold`,

package/src/core/cells/types.ts

@@ -93,7 +93,7 @@ export interface CellRuntimeState {
   /** TOC outline */
   outline: Outline | null;
   /** messages encoding the cell's console outputs. */
-  consoleOutputs: Array<WithResponse<OutputMessage>>;
+  consoleOutputs: WithResponse<OutputMessage>[];
   /** current status of the cell */
   status: RuntimeState;
   /** whether the cell has stale inputs*/

package/src/core/codemirror/__tests__/format.test.ts

@@ -3,6 +3,7 @@
 import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
+import { atom } from "jotai";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import type { NotebookState } from "@/core/cells/cells";
@@ -34,6 +35,11 @@ vi.mock("@/core/cells/utils", () => ({
 
 vi.mock("@/core/config/config", () => ({
   getResolvedMarimoConfig: vi.fn(),
+  resolvedMarimoConfigAtom: atom({
+    display: {
+      theme: "light",
+    },
+  }),
 }));
 
 const updateCellCode = vi.fn();

package/src/core/codemirror/cells/traceback-decorations.ts

@@ -29,7 +29,7 @@ function createErrorDecorations(state: EditorState, errors: TracebackInfos) {
 
   // Filter and sort errors by line number to ensure they're added in order
   const relevantErrors = errors
-    .filter((error) => error.cellId === cellId)
+    .filter((error) => error.kind === "cell" && error.cellId === cellId)
     .sort((a, b) => a.lineNumber - b.lineNumber);
 
   for (const error of relevantErrors) {

package/src/core/codemirror/editing/commands.ts

@@ -3,14 +3,14 @@ import { foldAll, unfoldAll } from "@codemirror/language";
 import type { Command, EditorView } from "@codemirror/view";
 import type { Nullable } from "vitest";
 
-export type BulkCommand = (targets: Array<Nullable<EditorView>>) => boolean;
+export type BulkCommand = (targets: Nullable<EditorView>[]) => boolean;
 
 /**
  * Make a bulk command from a single {@type Command} that applies
  * the given command to all targets.
  */
 export function makeBulkCommand(command: Command) {
-  return (targets: Array<Nullable<EditorView>>) => {
+  return (targets: Nullable<EditorView>[]) => {
     let changed = false;
     for (const target of targets) {
       if (target) {

package/src/core/codemirror/find-replace/navigate.ts

@@ -110,7 +110,7 @@ export const findPrev = findInDirection("prev");
  */
 export const replaceAll = searchCommand(({ query }) => {
   const views = getAllEditorViews();
-  const undoHandlers: Array<() => void> = [];
+  const undoHandlers: (() => void)[] = [];
   for (const view of views) {
     if (view.state.readOnly) {
       continue;

package/src/core/codemirror/language/__tests__/extension.test.ts

@@ -14,6 +14,7 @@ import {
   languageAdapterState,
   switchLanguage,
 } from "../extension";
+import { exportedForTesting as sqlValidationErrorsForTesting } from "../languages/sql/banner-validation-errors";
 import { languageMetadataField } from "../metadata";
 
 let view: EditorView | null = null;
@@ -258,3 +259,26 @@ describe("switchLanguage", () => {
     });
   });
 });
+
+describe("sqlValidationErrors", () => {
+  const { splitErrorMessage } = sqlValidationErrorsForTesting;
+
+  describe("split error message", () => {
+    it("should split the error message into error type and error message", () => {
+      const error = "SyntaxError: SELECT * FROM df";
+      const { errorType, errorMessage } = splitErrorMessage(error);
+      expect(errorType).toBe("SyntaxError");
+      expect(errorMessage).toBe("SELECT * FROM df");
+    });
+
+    it("should handle multiple colons", () => {
+      const error =
+        "SyntaxError: SELECT * FROM df:SyntaxError: SELECT * FROM df";
+      const { errorType, errorMessage } = splitErrorMessage(error);
+      expect(errorType).toBe("SyntaxError");
+      expect(errorMessage).toBe(
+        "SELECT * FROM df:SyntaxError: SELECT * FROM df",
+      );
+    });
+  });
+});

package/src/core/codemirror/language/__tests__/sql-validation.test.ts

@@ -0,0 +1,133 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { exportedForTesting } from "../languages/sql/banner-validation-errors";
+
+describe("Error Message Splitting", () => {
+  it("should handle error message splitting correctly", () => {
+    const { splitErrorMessage } = exportedForTesting;
+
+    const result1 = splitErrorMessage("Syntax error: unexpected token");
+    expect(result1.errorType).toBe("Syntax error");
+    expect(result1.errorMessage).toBe("unexpected token");
+
+    const result2 = splitErrorMessage("Multiple: colons: in error");
+    expect(result2.errorType).toBe("Multiple");
+    expect(result2.errorMessage).toBe("colons: in error");
+
+    const result3 = splitErrorMessage("No colon error");
+    expect(result3.errorType).toBe("No colon error");
+    expect(result3.errorMessage).toBe("");
+  });
+});
+
+describe("DuckDB Error Handling", () => {
+  it("should extract codeblock from error with LINE information", () => {
+    const { handleDuckdbError } = exportedForTesting;
+
+    const error =
+      'Binder Error: Referenced column "attacks" not found in FROM clause! Candidate bindings: "Attack", "Total" LINE 1:... from pokemon WHERE \'type_2\' = 32 and attack = 32 and not attacks = \'hi\' ^';
+
+    const result = handleDuckdbError(error);
+
+    expect(result.errorType).toBe("Binder Error");
+    expect(result.errorMessage).toBe(
+      'Referenced column "attacks" not found in FROM clause! Candidate bindings: "Attack", "Total"',
+    );
+    expect(result.codeblock).toBe(
+      "LINE 1:... from pokemon WHERE 'type_2' = 32 and attack = 32 and not attacks = 'hi' ^",
+    );
+  });
+
+  it("should handle error without LINE information", () => {
+    const { handleDuckdbError } = exportedForTesting;
+
+    const error = "Syntax Error: Invalid syntax near WHERE";
+
+    const result = handleDuckdbError(error);
+
+    expect(result.errorType).toBe("Syntax Error");
+    expect(result.errorMessage).toBe("Invalid syntax near WHERE");
+    expect(result.codeblock).toBeUndefined();
+  });
+
+  it("should handle error with LINE at the beginning", () => {
+    const { handleDuckdbError } = exportedForTesting;
+
+    const error = "LINE 1: SELECT * FROM table WHERE invalid_column = 1 ^";
+
+    const result = handleDuckdbError(error);
+
+    expect(result.errorType).toBe("LINE 1");
+    expect(result.errorMessage).toBe(
+      "SELECT * FROM table WHERE invalid_column = 1 ^",
+    );
+    expect(result.codeblock).toBeUndefined();
+  });
+
+  it("should handle error with multiple LINE occurrences", () => {
+    const { handleDuckdbError } = exportedForTesting;
+
+    const error =
+      "Error: Something went wrong LINE 1: SELECT * FROM table WHERE invalid_column = 1 ^";
+
+    const result = handleDuckdbError(error);
+
+    expect(result.errorType).toBe("Error");
+    expect(result.errorMessage).toBe("Something went wrong");
+    expect(result.codeblock).toBe(
+      "LINE 1: SELECT * FROM table WHERE invalid_column = 1 ^",
+    );
+  });
+
+  it("should handle complex error with nested quotes", () => {
+    const { handleDuckdbError } = exportedForTesting;
+
+    const error =
+      "Binder Error: Column \"name\" not found! LINE 1: SELECT * FROM users WHERE name = 'John' AND age > 25 ^";
+
+    const result = handleDuckdbError(error);
+
+    expect(result.errorType).toBe("Binder Error");
+    expect(result.errorMessage).toBe('Column "name" not found!');
+    expect(result.codeblock).toBe(
+      "LINE 1: SELECT * FROM users WHERE name = 'John' AND age > 25 ^",
+    );
+  });
+
+  it("should handle error with LINE but no caret", () => {
+    const { handleDuckdbError } = exportedForTesting;
+
+    const error = "Error: Invalid query LINE 1: SELECT * FROM table";
+
+    const result = handleDuckdbError(error);
+
+    expect(result.errorType).toBe("Error");
+    expect(result.errorMessage).toBe("Invalid query");
+    expect(result.codeblock).toBe("LINE 1: SELECT * FROM table");
+  });
+
+  it("should trim whitespace from codeblock", () => {
+    const { handleDuckdbError } = exportedForTesting;
+
+    const error = "Error: Something wrong   LINE 1: SELECT * FROM table   ^   ";
+
+    const result = handleDuckdbError(error);
+
+    expect(result.errorType).toBe("Error");
+    expect(result.errorMessage).toBe("Something wrong");
+    expect(result.codeblock).toBe("LINE 1: SELECT * FROM table   ^");
+  });
+
+  it("should handle empty error message", () => {
+    const { handleDuckdbError } = exportedForTesting;
+
+    const error = "";
+
+    const result = handleDuckdbError(error);
+
+    expect(result.errorType).toBe("");
+    expect(result.errorMessage).toBe("");
+    expect(result.codeblock).toBeUndefined();
+  });
+});