@marimo-team/islands 0.16.1 → 0.16.2

package/dist/{time-yQjlGPwa.js → time-DCvYzQ5t.js}

@@ -1,7 +1,7 @@
 import { R as q, r as ln, o as P, q as X, C as Z, u as D, v as fn } from "./timer-B0-z63CM.js";
-import { c as hn, a as on } from "./linear-C-HCGr0T.js";
+import { c as hn, a as on } from "./linear-BKZuvJrK.js";
 import { i as bn } from "./init-DxzjmxYy.js";
-import { W as gn, X as d, Y as v, Z as k, _ as x, $ as L, a0 as yn, a1 as R, a2 as H, a3 as W, a4 as pn, a5 as mn, a6 as wn, a7 as Mn, a8 as dn, a9 as vn, aa as kn, ab as $, ac as A, ad as B, ae as K, af as _, ag as j, ah as xn } from "./main-B9x2-9f2.js";
+import { W as gn, X as d, Y as v, Z as k, _ as x, $ as L, a0 as yn, a1 as R, a2 as H, a3 as W, a4 as pn, a5 as mn, a6 as wn, a7 as Mn, a8 as dn, a9 as vn, aa as kn, ab as $, ac as A, ad as B, ae as K, af as _, ag as j, ah as xn } from "./main-pE28kbH0.js";
 function Pn(n, t) {
   let i;
   if (t === void 0)

package/dist/{timeline-definition-XQNQX7LJ-D_PjxB1B.js → timeline-definition-XQNQX7LJ-CSbxJ5mV.js}

@@ -1,4 +1,4 @@
-import { _ as s, c as xt, l as E, d as j, V as kt, W as vt, X as _t, Y as bt, D as wt, $ as St, z as Et } from "./mermaid-BE4cM3Qs.js";
+import { _ as s, c as xt, l as E, d as j, V as kt, W as vt, X as _t, Y as bt, D as wt, $ as St, z as Et } from "./mermaid-BGd7kEsf.js";
 import { d as nt } from "./arc-BOhn-m2C.js";
 var Q = (function() {
   var n = /* @__PURE__ */ s(function(x, r, a, c) {

package/dist/{treemap-75Q7IDZK--NYqQjUZ.js → treemap-75Q7IDZK-LMXGKln_.js}

@@ -2,11 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a2, _b, _c2, _d2, _e, _f2, _g, _h2, _i2, _j, _k, _l2, _m2, _n2, _o2, _p2, _q;
-import { d_ as Kl, bQ as Vl, al as Ma, aT as Hl, u as _t, aO as Wl, ao as Z, bk as jl, bl as zl, k as ql, n as Ni, m as Da, am as Zs, d$ as Fa, aK as Yl, b0 as Ga, e0 as Ua, aM as Xl, b2 as wi, an as Jl, e1 as Ql, bg as Zl, e2 as eu, aP as Ie, q as vt, ar as _i, b3 as tu, e3 as H, e4 as Re } from "./main-B9x2-9f2.js";
-import { g as ei, d as bt, k as nu, v as W, l as Ba, m as ru, n as su, a as Ka, c as x, i as qe, r as ae, f as ke, o as z } from "./_baseUniq-B2Nna6Kt.js";
-import { m as k, f as Lt, h as I, e as ti, l as Ot, d as iu } from "./min-DTpHJ698.js";
-import { ad as P } from "./mermaid-BE4cM3Qs.js";
-import { c as te } from "./clone-DrJYap2i.js";
+import { d_ as Kl, bQ as Vl, al as Ma, aT as Hl, u as _t, aO as Wl, ao as Z, bk as jl, bl as zl, k as ql, n as Ni, m as Da, am as Zs, d$ as Fa, aK as Yl, b0 as Ga, e0 as Ua, aM as Xl, b2 as wi, an as Jl, e1 as Ql, bg as Zl, e2 as eu, aP as Ie, q as vt, ar as _i, b3 as tu, e3 as H, e4 as Re } from "./main-pE28kbH0.js";
+import { g as ei, d as bt, k as nu, v as W, l as Ba, m as ru, n as su, a as Ka, c as x, i as qe, r as ae, f as ke, o as z } from "./_baseUniq-BykZEXIq.js";
+import { m as k, f as Lt, h as I, e as ti, l as Ot, d as iu } from "./min-DmsBJf5S.js";
+import { ad as P } from "./mermaid-BGd7kEsf.js";
+import { c as te } from "./clone-CDDiMerE.js";
 var au = Object.prototype, ou = au.hasOwnProperty, Ee = Kl(function(n, e) {
   if (Vl(e) || Ma(e)) {
     Hl(e, _t(e), n);

package/dist/{vega-component-CCUOMM5K.js → vega-component-CRmon7pH.js}

@@ -1,5 +1,5 @@
-import { D as V, F as K, A as Z, G as z, H as R, I as G, j as d, E as W, J as U, r as k, K as j, M, N as $, L as x, O as _, P as B, Q, S as q, T as J, U as Y, V as X } from "./main-B9x2-9f2.js";
-import { M as m, V as ee } from "./index-DzJ_YPCG.js";
+import { D as V, F as K, A as Z, G as z, H as R, I as G, j as d, E as W, J as U, r as k, K as j, M, N as $, L as x, O as _, P as B, Q, S as q, T as J, U as Y, V as X } from "./main-pE28kbH0.js";
+import { M as m, V as ee } from "./index-CZ9vIBEc.js";
 function te(e) {
   return e.data && "url" in e.data && (e.data.url = V(e.data.url).href), e;
 }

package/dist/{xychartDiagram-6GGTOJPD-WLKsEnzs.js → xychartDiagram-6GGTOJPD-DaUD4dq3.js}

@@ -1,9 +1,9 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i2, _j;
-import { _ as a, s as ei, g as si, t as Lt, q as ni, a as ai, b as oi, l as Et, K as ri, e as hi, z as li, G as xt, F as It, H as ci, M as ui, i as gi, ac as xi } from "./mermaid-BE4cM3Qs.js";
+import { _ as a, s as ei, g as si, t as Lt, q as ni, a as ai, b as oi, l as Et, K as ri, e as hi, z as li, G as xt, F as It, H as ci, M as ui, i as gi, ac as xi } from "./mermaid-BGd7kEsf.js";
 import { i as di } from "./init-DxzjmxYy.js";
 import { o as fi } from "./ordinal-CYN5qNoq.js";
 import { r as pi } from "./range-DdOGybNB.js";
-import { l as Tt } from "./linear-C-HCGr0T.js";
+import { l as Tt } from "./linear-BKZuvJrK.js";
 import { l as Dt } from "./timer-B0-z63CM.js";
 function ht() {
   var t = fi().unknown(void 0), i = t.domain, e = t.range, s = 0, n = 1, d, g, m = false, S = 0, D = 0, v = 0.5;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -245,8 +245,8 @@
     "storybook": "^9.1.3",
     "stylelint": "^16.23.1",
     "stylelint-config-standard": "^36.0.1",
-    "tailwindcss": "^4.1.12",
-    "vite": "^6.3.5",
+    "tailwindcss": "^4.1.13",
+    "vite": "^6.3.6",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
     "vite-tsconfig-paths": "^5.1.4",

package/src/__mocks__/requests.ts

@@ -40,6 +40,7 @@ export const MockRequestClient = {
       previewSQLTable: vi.fn().mockResolvedValue({}),
       previewSQLTableList: vi.fn().mockResolvedValue({ tables: [] }),
       previewDataSourceConnection: vi.fn().mockResolvedValue({}),
+      validateSQL: vi.fn().mockResolvedValue({}),
       openFile: vi.fn().mockResolvedValue({}),
       getUsageStats: vi.fn().mockResolvedValue({}),
       sendPdb: vi.fn().mockResolvedValue({}),

package/src/components/data-table/__tests__/columns.test.tsx

@@ -2,6 +2,7 @@
 
 import { render } from "@testing-library/react";
 import { describe, expect, it, test } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { generateColumns, inferFieldTypes } from "../columns";
 import { getMimeValues, isMimeValue, MimeCell } from "../mime-cell";
 import type { FieldTypesWithExternalType } from "../types";
@@ -245,6 +246,43 @@ describe("generateColumns", () => {
     expect(columns[0].id).toBe("name");
     expect(columns[1].id).toBe("age");
   });
+
+  it("should render header with tooltip when headerTooltip is provided", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+      headerTooltip: { name: "Custom Name Tooltip" },
+    });
+
+    // Get the header function for the first column
+    const headerFunction = columns[0].header;
+    expect(headerFunction).toBeTypeOf("function");
+
+    const mockColumn = {
+      id: "name",
+      getCanSort: () => false,
+      getCanFilter: () => false,
+      columnDef: {
+        meta: {
+          dtype: "string",
+          dataType: "string",
+        },
+      },
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        {/* @ts-expect-error: mock column and header function */}
+        {headerFunction({ column: mockColumn })}
+      </TooltipProvider>,
+    );
+
+    expect(container.textContent).toContain("name");
+    // The tooltip functionality is tested by verifying that the header renders correctly
+    // when headerTooltip is provided.
+    expect(container.firstChild).toBeTruthy();
+  });
 });
 
 describe("MimeCell", () => {

package/src/components/data-table/cell-hover-template/feature.ts

@@ -1,4 +1,4 @@
-/* Copyright 2025 Marimo. All rights reserved. */
+/* Copyright 2024 Marimo. All rights reserved. */
 "use no memo";
 
 import type { InitialTableState, TableFeature } from "@tanstack/react-table";

package/src/components/data-table/cell-hover-template/types.ts

@@ -1,4 +1,4 @@
-/* Copyright 2025 Marimo. All rights reserved. */
+/* Copyright 2024 Marimo. All rights reserved. */
 /* eslint-disable @typescript-eslint/no-empty-interface */
 
 export interface CellHoverTemplateTableState {

package/src/components/data-table/columns.tsx

@@ -17,6 +17,7 @@ import { JsonOutput } from "../editor/output/JsonOutput";
 import { Button } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Tooltip } from "../ui/tooltip";
 import { DataTableColumnHeader } from "./column-header";
 import type { ColumnChartSpecModel } from "./column-summary/chart-spec-model";
 import { TableColumnSummary } from "./column-summary/column-summary";
@@ -103,6 +104,7 @@ export function generateColumns<T>({
   chartSpecModel,
   textJustifyColumns,
   wrappedColumns,
+  headerTooltip,
   showDataTypes,
   calculateTopKRows,
 }: {
@@ -112,6 +114,7 @@ export function generateColumns<T>({
   chartSpecModel?: ColumnChartSpecModel<unknown>;
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
+  headerTooltip?: Record<string, string>;
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
 }): Array<ColumnDef<T>> {
@@ -165,6 +168,7 @@ export function generateColumns<T>({
       header: ({ column }) => {
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;
+        const headerTitle = headerTooltip?.[key];
         const dtypeHeader =
           showDataTypes && dtype ? (
             <div className="flex flex-row gap-1">
@@ -179,14 +183,29 @@ export function generateColumns<T>({
 
         const headerWithType = (
           <div className="flex flex-col">
-            <span className="font-bold">{key === "" ? " " : key}</span>
+            <span
+              className={cn(
+                "font-bold",
+                headerTitle && "underline decoration-dotted",
+              )}
+            >
+              {key === "" ? " " : key}
+            </span>
             {dtypeHeader}
           </div>
         );
 
+        const headerWithTooltip = headerTitle ? (
+          <Tooltip content={headerTitle} delayDuration={300}>
+            {headerWithType}
+          </Tooltip>
+        ) : (
+          headerWithType
+        );
+
         const dataTableColumnHeader = (
           <DataTableColumnHeader
-            header={headerWithType}
+            header={headerWithTooltip}
             column={column}
             calculateTopKRows={calculateTopKRows}
           />

package/src/components/data-table/renderers.tsx

@@ -106,9 +106,9 @@ export const DataTableBody = <TData,>({
       const s = renderUnknownValue({ value: v, nullAsEmptyString: true });
       idToValue.set(c.column.id, s);
     }
-    return template.replace(variableRegex, (_substr, varName: string) => {
+    return template.replaceAll(variableRegex, (_substr, varName: string) => {
       const val = idToValue.get(varName);
-      return val !== undefined ? val : `{{${varName}}}`;
+      return val === undefined ? `{{${varName}}}` : val;
     });
   }
 
@@ -154,6 +154,8 @@ export const DataTableBody = <TData,>({
     }
   };
 
+  const hoverTemplate = table.getState().cellHoverTemplate || null;
+
   return (
     <TableBody onKeyDown={handleCellsKeyDown} ref={tableRef}>
       {table.getRowModel().rows?.length ? (
@@ -165,12 +167,18 @@ export const DataTableBody = <TData,>({
           const isRowViewedInPanel =
             rowViewerPanelOpen && viewedRowIdx === rowIndex;
 
-          // Compute hover title once per row using this row's cells (visible or hidden)
-          const hoverTemplate = table.getState().cellHoverTemplate || null;
-          const rowCells = row.getAllCells();
-          const rowTitle = hoverTemplate
-            ? applyHoverTemplate(hoverTemplate, rowCells)
-            : undefined;
+          // Compute hover title once per row using all visible cells
+          let rowTitle: string | undefined;
+          if (hoverTemplate) {
+            const visibleCells = row.getVisibleCells?.() ?? [
+              ...row.getLeftVisibleCells(),
+              ...row.getCenterVisibleCells(),
+              ...row.getRightVisibleCells(),
+            ];
+            rowTitle = hoverTemplate
+              ? applyHoverTemplate(hoverTemplate, visibleCells)
+              : undefined;
+          }
 
           return (
             <TableRow

package/src/components/data-table/schemas.ts

@@ -0,0 +1,16 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import z from "zod";
+import { rpc } from "@/plugins/core/rpc";
+
+export type DownloadAsArgs = (req: {
+  format: "csv" | "json" | "parquet";
+}) => Promise<string>;
+
+export const DownloadAsSchema = rpc
+  .input(
+    z.object({
+      format: z.enum(["csv", "json", "parquet"]),
+    }),
+  )
+  .output(z.string());

package/src/components/editor/Cell.tsx

@@ -80,6 +80,7 @@ import { useDeleteCellCallback } from "./cell/useDeleteCell";
 import { useRunCell } from "./cell/useRunCells";
 import { HideCodeButton } from "./code/readonly-python-code";
 import { cellDomProps } from "./common";
+import { SqlValidationErrorBanner } from "./errors/sql-validation-errors";
 import { useCellNavigationProps } from "./navigation/navigation";
 import {
   useTemporarilyShownCode,
@@ -653,6 +654,7 @@ const EditableCellComponent = ({
                 )}
               </div>
             </div>
+            <SqlValidationErrorBanner cellId={cellId} />
             {cellOutput === "below" && outputArea}
             {cellRuntime.serialization && (
               <div className="py-1 px-2 flex items-center justify-end gap-2 last:rounded-b">

package/src/components/editor/errors/sql-validation-errors.tsx

@@ -0,0 +1,34 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { AlertCircleIcon } from "lucide-react";
+import type { CellId } from "@/core/cells/ids";
+import { useSqlValidationErrorsForCell } from "@/core/codemirror/language/languages/sql/validation-errors";
+
+export const SqlValidationErrorBanner = ({ cellId }: { cellId: CellId }) => {
+  const error = useSqlValidationErrorsForCell(cellId);
+
+  if (!error) {
+    return;
+  }
+
+  return (
+    <div className="p-3 text-sm flex flex-col text-muted-foreground gap-1.5 bg-destructive/5">
+      <div className="flex items-start gap-1.5">
+        <AlertCircleIcon size={13} className="mt-[3px] text-destructive" />
+        <p>
+          <span className="font-bold text-destructive">{error.errorType}:</span>{" "}
+          {error.errorMessage}
+        </p>
+      </div>
+
+      {error.codeblock && (
+        <pre
+          lang="sql"
+          className="text-xs bg-muted rounded p-2 pb-0 mx-3 overflow-x-auto font-mono whitespace-pre-wrap"
+        >
+          {error.codeblock}
+        </pre>
+      )}
+    </div>
+  );
+};

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

@@ -14,6 +14,7 @@ import type { OutputMessage } from "@/core/kernel/messages";
 import { useSelectAllContent } from "@/hooks/useSelectAllContent";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
+import { ansiToPlainText, parseHtmlContent } from "@/utils/dom";
 import { invariant } from "@/utils/invariant";
 import { Strings } from "@/utils/strings";
 import { NameCellContentEditable } from "../actions/name-cell-input";
@@ -124,7 +125,18 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
                 onClick={() => {
                   const text = reversedOutputs
                     .filter((output) => output.channel !== "pdb")
-                    .map((output) => Strings.asString(output.data))
+                    .map((output) => {
+                      // If starts with `<`, then assume it's HTML
+                      if (
+                        typeof output.data === "string" &&
+                        output.data.startsWith("<")
+                      ) {
+                        return parseHtmlContent(output.data);
+                      }
+
+                      // Otherwise, convert the ANSI to HTML, then parse as HTML
+                      return ansiToPlainText(Strings.asString(output.data));
+                    })
                     .join("\n");
                   void copyToClipboard(text);
                 }}

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 in statement";
   } 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 ? (error?.sql_line | 0) + 1 : null;
+            const col = error.sql_col != null ? (error?.sql_col | 0) + 1 : null;
+            return (
+              <div key={`sql-error-${idx}`} className="space-y-2">
+                <p className="text-muted-foreground">{error.msg}</p>
+                {error.hint && (
+                  <div className="flex items-start gap-2">
+                    <InfoIcon className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                    <pre className="whitespace-pre-wrap text-sm text-muted-foreground">
+                      {error.hint}
+                    </pre>
+                  </div>
+                )}
+                {error.sql_statement && (
+                  <div className="bg-muted/50 p-2 rounded text-xs font-mono">
+                    <pre className="whitespace-pre-wrap">
+                      {error.sql_statement}
+                    </pre>
+                  </div>
+                )}
+                {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} />}
+          <Tip title="How to fix SQL errors">
+            <p className="pb-2">
+              SQL parsing errors often occur due to invalid syntax, missing
+              keywords, or unsupported SQL features.
+            </p>
+            <p className="py-2">
+              Check your SQL syntax and ensure you're using supported SQL
+              dialect features. The error location can help you identify the
+              problematic part of your query.
+            </p>
+          </Tip>
+        </div>,
+      );
+    }
+
     return messages;
   };
 

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/codemirror/language/__tests__/extension.test.ts

@@ -14,6 +14,7 @@ import {
   languageAdapterState,
   switchLanguage,
 } from "../extension";
+import { exportedForTesting as sqlValidationErrorsForTesting } from "../languages/sql/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/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();
+  });
+});