@marimo-team/frontend 0.23.9-dev3 → 0.23.9-dev30

package/src/components/data-table/value-chips.tsx

@@ -0,0 +1,52 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type React from "react";
+
+export const Chip = ({ children }: { children: React.ReactNode }) => (
+  <span className="inline-flex items-center rounded-sm bg-muted/50 px-1 font-mono text-xs font-normal leading-tight text-foreground">
+    {children}
+  </span>
+);
+
+export const MoreChip = ({ count }: { count: number }) => (
+  <span className="inline-flex items-center px-1 text-xs italic text-muted-foreground">
+    +{count}
+  </span>
+);
+
+interface ChipWithCommaProps {
+  value: string;
+  showComma: boolean;
+}
+
+export const ChipWithComma = ({ value, showComma }: ChipWithCommaProps) => (
+  <span className="inline-flex items-center">
+    <Chip>{value}</Chip>
+    {showComma && <span className="text-muted-foreground">,</span>}
+  </span>
+);
+
+interface CompactChipRowProps {
+  items: string[];
+  max?: number;
+}
+
+export const CompactChipRow = ({ items, max = 3 }: CompactChipRowProps) => {
+  if (items.length === 0) {
+    return null;
+  }
+  const visible = items.slice(0, max);
+  const hidden = Math.max(0, items.length - max);
+  return (
+    <span className="inline-flex items-center gap-1">
+      {visible.map((item, i) => (
+        <ChipWithComma
+          key={i}
+          value={item}
+          showComma={i < visible.length - 1}
+        />
+      ))}
+      {hidden > 0 && <MoreChip count={hidden} />}
+    </span>
+  );
+};

package/src/components/databases/display.tsx

@@ -53,6 +53,8 @@ export function dbDisplayName(name: string) {
       return "MongoDB";
     case "iceberg":
       return "Apache Iceberg";
+    case "dremio":
+      return "Dremio";
     default:
       return name;
   }

package/src/components/datasources/__tests__/utils.test.ts

@@ -313,6 +313,26 @@ describe("sqlCode", () => {
       );
     });
 
+    it("should preserve dots inside quoted schema names", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "postgres",
+        schema: "analytics.events",
+        defaultSchema: "public",
+        defaultDatabase: "mydb",
+        database: "remote",
+        dialect: "postgres",
+      };
+
+      const result = sqlCode({
+        table: mockTable,
+        columnName: mockColumn.name,
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT "email" FROM "remote"."analytics.events"."users" LIMIT 100\n""", engine=postgres)',
+      );
+    });
+
     it("should not quote * column name", () => {
       const sqlTableContext: SQLTableContext = {
         engine: "postgres",
@@ -334,6 +354,68 @@ describe("sqlCode", () => {
     });
   });
 
+  describe("Dremio dialect", () => {
+    it("should quote reserved column names and table path parts", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "operations",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "lakehouse",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "shipments" as const },
+        columnName: "order",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT "order" FROM "lakehouse"."operations"."shipments" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+
+    it("should not quote * column name", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "operations",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "lakehouse",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "customers" as const },
+        columnName: "*",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT * FROM "lakehouse"."operations"."customers" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+
+    it("should preserve dots inside quoted schema names", () => {
+      const sqlTableContext: SQLTableContext = {
+        engine: "dremio_conn",
+        schema: "samples.dremio.com",
+        defaultSchema: "",
+        defaultDatabase: "",
+        database: "Samples",
+        dialect: "dremio",
+      };
+
+      const result = sqlCode({
+        table: { ...mockTable, name: "airlines" as const },
+        columnName: "*",
+        sqlTableContext,
+      });
+      expect(result).toBe(
+        '_df = mo.sql(f"""\nSELECT * FROM "Samples"."samples.dremio.com"."airlines" LIMIT 100\n""", engine=dremio_conn)',
+      );
+    });
+  });
+
   describe("fallback behavior", () => {
     it("should use default formatter for unknown dialect", () => {
       const sqlTableContext: SQLTableContext = {

package/src/components/datasources/utils.ts

@@ -15,9 +15,9 @@ export function isSchemaless(schemaName: string) {
 
 interface SqlCodeFormatter {
   /**
-   * Format the table name based on dialect-specific rules
+   * Format the table path based on dialect-specific rules
    */
-  formatTableName: (tableName: string) => string;
+  formatTablePath: (tablePath: string[]) => string;
   /**
    * Format the SELECT clause
    */
@@ -25,7 +25,7 @@ interface SqlCodeFormatter {
 }
 
 const defaultFormatter: SqlCodeFormatter = {
-  formatTableName: (tableName: string) => tableName,
+  formatTablePath: (tablePath: string[]) => tablePath.join("."),
   formatSelectClause: (columnName: string, tableName: string) =>
     `SELECT ${columnName} FROM ${tableName} LIMIT 100`,
 };
@@ -41,7 +41,8 @@ function getFormatter(dialect: string): SqlCodeFormatter {
       const quote = BigQueryDialect.spec.identifierQuotes;
       return {
         // BigQuery uses backticks for identifiers
-        formatTableName: (tableName: string) => `${quote}${tableName}${quote}`,
+        formatTablePath: (tablePath: string[]) =>
+          `${quote}${tablePath.join(".")}${quote}`,
         formatSelectClause: defaultFormatter.formatSelectClause,
       };
     }
@@ -49,7 +50,7 @@ function getFormatter(dialect: string): SqlCodeFormatter {
     case "sqlserver":
     case "microsoft sql server":
       return {
-        formatTableName: defaultFormatter.formatTableName,
+        formatTablePath: defaultFormatter.formatTablePath,
         formatSelectClause: (columnName: string, tableName: string) =>
           `SELECT TOP 100 ${columnName} FROM ${tableName}`,
       };
@@ -57,12 +58,11 @@ function getFormatter(dialect: string): SqlCodeFormatter {
     case "postgres":
     case "postgresql":
     case "duckdb":
+    case "dremio":
       // Quote column and table names to avoid raising errors on weird characters
       return {
-        formatTableName: (tableName: string) => {
-          const parts = tableName.split(".");
-          return parts.map((part) => `"${part}"`).join(".");
-        },
+        formatTablePath: (tablePath: string[]) =>
+          tablePath.map((part) => `"${part}"`).join("."),
         formatSelectClause: (columnName: string, tableName: string) =>
           `SELECT ${columnName === "*" ? "*" : `"${columnName}"`} FROM ${tableName} LIMIT 100`,
       };
@@ -114,26 +114,27 @@ export function sqlCode({
       database,
       dialect,
     } = sqlTableContext;
-    let tableName = table.name;
+    const tablePath = [table.name];
 
     // Set the fully qualified table name based on schema and database
     if (isSchemaless(schema)) {
-      tableName =
-        database === defaultDatabase ? tableName : `${database}.${tableName}`;
+      if (database !== defaultDatabase) {
+        tablePath.unshift(database);
+      }
     } else {
       // Include schema if it's not the default schema
       if (schema !== defaultSchema) {
-        tableName = `${schema}.${tableName}`;
+        tablePath.unshift(schema);
       }
 
       // Include database if it's not the default database
       if (database !== defaultDatabase) {
-        tableName = `${database}.${tableName}`;
+        tablePath.unshift(database);
       }
     }
 
     const formatter = getFormatter(dialect);
-    const formattedTableName = formatter.formatTableName(tableName);
+    const formattedTableName = formatter.formatTablePath(tablePath);
     const selectClause = formatter.formatSelectClause(
       columnName,
       formattedTableName,

package/src/components/editor/errors/mangled-local-chip.tsx

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { JSX } from "react";
+import { Tooltip } from "@/components/ui/tooltip";
+import type { MangledSegment, UnmangledLocal } from "@/utils/local-variables";
+import { CellLinkError } from "../links/cell-link";
+
+interface Props {
+  local: UnmangledLocal;
+}
+
+/**
+ * Renders a compiler-mangled cell-local variable as the user's original name
+ * (e.g. `_a`) with a tooltip linking to the defining cell.
+ */
+export const MangledLocalChip = ({ local }: Props): JSX.Element => {
+  const tooltipContent = (
+    <div className="max-w-xs">
+      Local variable <span className="font-code">{local.name}</span> in cell{" "}
+      <CellLinkError cellId={local.cellId} />.
+    </div>
+  );
+
+  return (
+    <Tooltip content={tooltipContent}>
+      <span className="font-code cursor-help">{local.name}</span>
+    </Tooltip>
+  );
+};
+
+interface MangledSegmentsProps {
+  segments: MangledSegment[];
+}
+
+/**
+ * Render an array of `splitMangledLocals` segments as alternating text and
+ * `<MangledLocalChip>` nodes.
+ */
+export const MangledSegments = ({
+  segments,
+}: MangledSegmentsProps): JSX.Element => (
+  <>
+    {segments.map((segment, idx) =>
+      typeof segment === "string" ? (
+        <span key={idx}>{segment}</span>
+      ) : (
+        <MangledLocalChip key={idx} local={segment} />
+      ),
+    )}
+  </>
+);

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

@@ -1,12 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useAtomValue } from "jotai";
 import {
+  ChevronDown,
+  ChevronRight,
+  InfoIcon,
   NotebookPenIcon,
   PackageIcon,
   SquareArrowOutUpRightIcon,
   TerminalIcon,
 } from "lucide-react";
-import { Fragment, type JSX } from "react";
+import { Fragment, type JSX, useState } from "react";
 import {
   Accordion,
   AccordionContent,
@@ -16,16 +20,53 @@ import {
 import { Button } from "@/components/ui/button";
 import { Kbd } from "@/components/ui/kbd";
 import { ExternalLink } from "@/components/ui/links";
+import { Tooltip } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
+import { resolvedMarimoConfigAtom } from "@/core/config/config";
+import { renderHTML } from "@/plugins/core/RenderHTML";
+import { splitMangledLocals } from "@/utils/local-variables";
 import type { MarimoError } from "../../../core/kernel/messages";
 import { cn } from "../../../utils/cn";
 import { Alert, AlertTitle } from "../../ui/alert";
 import { openPackageManager } from "../chrome/panels/packages-utils";
 import { useChromeActions } from "../chrome/state";
 import { AutoFixButton } from "../errors/auto-fix";
+import { MangledSegments } from "../errors/mangled-local-chip";
 import { CellLinkError } from "../links/cell-link";
 import { processTextForUrls } from "./console/text-rendering";
-import { renderHTML } from "@/plugins/core/RenderHTML";
+
+const CollapsibleTraceback = ({
+  traceback,
+}: {
+  traceback: string;
+}): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <div className="mt-2">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-label={isOpen ? "Collapse traceback" : "Expand traceback"}
+        className="flex items-center gap-1 text-muted-foreground/70 hover:text-muted-foreground transition-colors"
+      >
+        {isOpen ? (
+          <ChevronDown className="h-3 w-3" />
+        ) : (
+          <ChevronRight className="h-3 w-3" />
+        )}
+        <span className="text-[0.6875rem] uppercase tracking-wider">
+          Traceback
+        </span>
+      </button>
+      {isOpen && (
+        <div className="font-code text-sm mt-1 p-3 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text">
+          {renderHTML({ html: traceback })}
+        </div>
+      )}
+    </div>
+  );
+};
 
 const Tip = (props: {
   title?: string;
@@ -35,10 +76,13 @@ const Tip = (props: {
   return (
     <Accordion type="single" collapsible={true} className={props.className}>
       <AccordionItem value="item-1" className="text-muted-foreground">
-        <AccordionTrigger className="pt-2 pb-2 font-normal">
+        <AccordionTrigger className="pt-2 pb-0 font-normal">
           {props.title ?? "Tip"}
         </AccordionTrigger>
-        <AccordionContent className="mr-24 text-[0.84375rem]">
+        <AccordionContent
+          className="mr-24 text-[0.84375rem]"
+          wrapperClassName="pt-0 pb-2"
+        >
           {props.children}
         </AccordionContent>
       </AccordionItem>
@@ -61,10 +105,21 @@ export const MarimoErrorOutput = ({
   className,
 }: Props): JSX.Element => {
   const chromeActions = useChromeActions();
-
-  let titleContents = "This cell wasn't run because it has errors";
+  // The console area (where tracebacks are shown) sits below the cell editor.
+  // When cell outputs are also displayed below the editor, the traceback is
+  // already adjacent, so the "See the console area" hint is redundant. It is
+  // only helpful when outputs are displayed above the editor.
+  const showConsoleHint =
+    useAtomValue(resolvedMarimoConfigAtom).display.cell_output === "above";
+
+  let titleContents: string | null =
+    "This cell wasn't run because it has errors";
   let alertVariant: "destructive" | "default" = "destructive";
   let titleColor = "text-error";
+  // A small muted overline shown above the title for static errors, where
+  // the cell genuinely never executes. These errors have no separate title:
+  // the body text already describes them, so the overline carries the status.
+  let statusOverline: string | null = null;
   const liStyle = "my-0.5 ml-8 text-muted-foreground/40";
 
   // Check for certain error types to adjust title and appearance
@@ -75,7 +130,6 @@ export const MarimoErrorOutput = ({
   } else if (errors.some((e) => e.type === "ancestor-prevented")) {
     titleContents = "Ancestor prevented from running";
     alertVariant = "default";
-    titleColor = "text-muted-foreground";
     titleColor = "text-secondary-foreground";
   } else if (errors.some((e) => e.type === "ancestor-stopped")) {
     titleContents = "Ancestor stopped";
@@ -83,6 +137,19 @@ export const MarimoErrorOutput = ({
     titleColor = "text-secondary-foreground";
   } else if (errors.some((e) => e.type === "sql-error")) {
     titleContents = "SQL error";
+  } else if (
+    errors.some(
+      (e) =>
+        e.type === "multiple-defs" ||
+        e.type === "cycle" ||
+        e.type === "setup-refs" ||
+        e.type === "import-star",
+    )
+  ) {
+    // Static errors: the body text describes the problem, so there is no
+    // separate title — only the status overline.
+    titleContents = null;
+    statusOverline = "Cell not run";
   } else {
     // Check for exception type
     const exceptionError = errors.find((e) => e.type === "exception");
@@ -454,10 +521,13 @@ export const MarimoErrorOutput = ({
               error.exception_type === "NameError" &&
               error.msg.startsWith("name '_")
             ) {
+              const segments = splitMangledLocals(error.msg);
               return (
                 <li className="my-2" key={`exception-${idx}`}>
                   <div>
-                    <p className="text-muted-foreground">{error.msg}</p>
+                    <p className="text-muted-foreground">
+                      <MangledSegments segments={segments} />
+                    </p>
                     <p className="text-muted-foreground mt-2">
                       Variables prefixed with an underscore are local to a cell{" "}
                       (
@@ -470,9 +540,11 @@ export const MarimoErrorOutput = ({
                       </ExternalLink>
                       ).
                     </p>
-                    <div className="text-muted-foreground mt-2">
-                      See the console area for a traceback.
-                    </div>
+                    {showConsoleHint && (
+                      <div className="text-muted-foreground mt-2">
+                        See the console area for a traceback.
+                      </div>
+                    )}
                   </div>
                 </li>
               );
@@ -487,13 +559,13 @@ export const MarimoErrorOutput = ({
                       {processTextForUrls(error.msg, `exception-${idx}`)}
                     </p>
                     {"traceback" in error && error.traceback ? (
-                      <div className="font-code text-sm mt-2 p-3 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text">
-                        {renderHTML({ html: error.traceback })}
-                      </div>
+                      <CollapsibleTraceback traceback={error.traceback} />
                     ) : (
-                      <div className="text-muted-foreground mt-2">
-                        See the console area for a traceback.
-                      </div>
+                      showConsoleHint && (
+                        <div className="text-muted-foreground mt-2">
+                          See the console area for a traceback.
+                        </div>
+                      )
                     )}
                   </div>
                 ) : (
@@ -501,9 +573,7 @@ export const MarimoErrorOutput = ({
                     {processTextForUrls(error.msg, `exception-${idx}`)}
                     <CellLinkError cellId={error.raising_cell} />
                     {"traceback" in error && error.traceback && (
-                      <div className="font-code text-sm mt-2 p-3 bg-muted rounded border overflow-auto max-h-[50vh] cursor-text select-text">
-                        {renderHTML({ html: error.traceback })}
-                      </div>
+                      <CollapsibleTraceback traceback={error.traceback} />
                     )}
                   </div>
                 )}
@@ -628,23 +698,36 @@ export const MarimoErrorOutput = ({
   };
 
   const title = (
-    <AlertTitle className={`font-code font-medium tracking-wide ${titleColor}`}>
-      {titleContents}
-    </AlertTitle>
+    <div className="space-y-0.5">
+      {statusOverline && (
+        <div className="flex items-center gap-1 font-code text-[0.6875rem] uppercase tracking-wider text-muted-foreground/70">
+          {statusOverline}
+          <Tooltip
+            content="marimo didn't run this cell because it detected an error."
+            delayDuration={200}
+          >
+            <InfoIcon className="size-3 cursor-help" />
+          </Tooltip>
+        </div>
+      )}
+      {titleContents && (
+        <AlertTitle className={`font-code font-medium ${titleColor}`}>
+          {titleContents}
+        </AlertTitle>
+      )}
+    </div>
   );
 
   return (
     <Alert
       variant={alertVariant}
       className={cn(
-        "border-none font-code text-sm text-[0.84375rem] px-0 text-muted-foreground normal [&:has(svg)]:pl-0 space-y-4",
+        "border-none font-code text-sm text-[0.84375rem] p-0 text-muted-foreground normal [&:has(svg)]:pl-0 space-y-2",
         className,
       )}
     >
       {title}
-      <div>
-        <div className="flex flex-col gap-8">{renderMessages()}</div>
-      </div>
+      <div className="flex flex-col gap-4">{renderMessages()}</div>
     </Alert>
   );
 };