@marimo-team/frontend 0.16.0 → 0.16.2

package/src/components/chat/acp/prompt.ts

@@ -52,7 +52,7 @@ export function getAgentPrompt(filename: string) {
   ## Best Practices
 
   <data_handling>
-  - Use pandas for data manipulation
+  - Use polars for data manipulation
   - Implement proper data validation
   - Handle missing values appropriately
   - Use efficient data structures
@@ -62,7 +62,7 @@ export function getAgentPrompt(filename: string) {
   <visualization>
   - For matplotlib: use plt.gca() as the last expression instead of plt.show()
   - For plotly: return the figure object directly
-  - For altair: return the chart object directly
+  - For altair: return the chart object directly. Add tooltips where appropriate. You can pass polars dataframes directly to altair.
   - Include proper labels, titles, and color schemes
   - Make visualizations interactive where appropriate
   </visualization>
@@ -76,7 +76,7 @@ export function getAgentPrompt(filename: string) {
   </ui_elements>
 
   <sql>
-  - When writing duckdb, prefer using marimo's SQL cells, which start with _df = mo.sql(query)
+  - When writing duckdb, prefer using marimo's SQL cells, which start with df = mo.sql(f"""<your query>""") for DuckDB, or df = mo.sql(f"""<your query>""", engine=engine) for other SQL engines.
   - See the SQL with duckdb example for an example on how to do this
   - Don't add comments in cells that use mo.sql()
   - Consider using \`vega_datasets\` for common example datasets
@@ -144,7 +144,8 @@ export function getAgentPrompt(filename: string) {
   ${formatCells([
     `
   import marimo as mo
-  import matplotlib.pyplot as plt
+  import altair as alt
+  import polars as pl
   import numpy as np
     `,
     `
@@ -155,12 +156,18 @@ export function getAgentPrompt(filename: string) {
   x = np.random.rand(n_points.value)
   y = np.random.rand(n_points.value)
 
-  plt.figure(figsize=(8, 6))
-  plt.scatter(x, y, alpha=0.7)
-  plt.title(f"Scatter plot with {n_points.value} points")
-  plt.xlabel("X axis")
-  plt.ylabel("Y axis")
-  plt.gca()
+  df = pl.DataFrame({"x": x, "y": y})
+
+  chart = alt.Chart(df).mark_circle(opacity=0.7).encode(
+      x=alt.X('x', title='X axis'),
+      y=alt.Y('y', title='Y axis')
+  ).properties(
+      title=f"Scatter plot with {n_points.value} points",
+      width=400,
+      height=300
+  )
+
+  chart
     `,
   ])}
   </example>
@@ -169,11 +176,11 @@ export function getAgentPrompt(filename: string) {
   ${formatCells([
     `
   import marimo as mo
-  import pandas as pd
+  import polars as pl
   from vega_datasets import data
     `,
     `
-  cars_df = data.cars()
+  cars_df = pl.DataFrame(data.cars())
   mo.ui.data_explorer(cars_df)
     `,
   ])}
@@ -183,43 +190,44 @@ export function getAgentPrompt(filename: string) {
   ${formatCells([
     `
   import marimo as mo
-  import pandas as pd
-  import matplotlib.pyplot as plt
-  import seaborn as sns
+  import polars as pl
+  import altair as alt
     `,
     `
-  iris = sns.load_dataset('iris')
+  iris = pl.read_csv("hf://datasets/scikit-learn/iris/Iris.csv")
     `,
     `
   species_selector = mo.ui.dropdown(
-      options=["All"] + iris["species"].unique().tolist(),
+      options=["All"] + iris["Species"].unique().to_list(),
       value="All",
-      label="Species"
+      label="Species",
   )
   x_feature = mo.ui.dropdown(
-      options=iris.select_dtypes('number').columns.tolist(),
-      value="sepal_length",
-      label="X Feature"
+      options=iris.select(pl.col(pl.Float64, pl.Int64)).columns,
+      value="SepalLengthCm",
+      label="X Feature",
   )
   y_feature = mo.ui.dropdown(
-      options=iris.select_dtypes('number').columns.tolist(),
-      value="sepal_width",
-      label="Y Feature"
+      options=iris.select(pl.col(pl.Float64, pl.Int64)).columns,
+      value="SepalWidthCm",
+      label="Y Feature",
   )
   mo.hstack([species_selector, x_feature, y_feature])
     `,
     `
-  filtered_data = iris if species_selector.value == "All" else iris[iris["species"] == species_selector.value]
-
-  plt.figure(figsize=(10, 6))
-  sns.scatterplot(
-      data=filtered_data,
-      x=x_feature.value,
-      y=y_feature.value,
-      hue="species"
+  filtered_data = iris if species_selector.value == "All" else iris.filter(pl.col("Species") == species_selector.value)
+
+  chart = alt.Chart(filtered_data).mark_circle().encode(
+      x=alt.X(x_feature.value, title=x_feature.value),
+      y=alt.Y(y_feature.value, title=y_feature.value),
+      color='Species'
+  ).properties(
+      title=f"{y_feature.value} vs {x_feature.value}",
+      width=500,
+      height=400
   )
-  plt.title(f"{y_feature.value} vs {x_feature.value}")
-  plt.gca()
+
+  chart
     `,
   ])}
   </example>
@@ -242,14 +250,21 @@ export function getAgentPrompt(filename: string) {
     `
   import marimo as mo
   import altair as alt
-  import pandas as pd
+  import polars as pl
     `,
     `# Load dataset
-  cars_df = pd.read_csv('<https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json>')
-  _chart = alt.Chart(cars_df).mark_point().encode(
-      x='Horsepower',
-      y='Miles_per_Gallon',
-      color='Origin',
+  weather = pl.read_csv("https://raw.githubusercontent.com/vega/vega-datasets/refs/heads/main/data/weather.csv")
+  weather_dates = weather.with_columns(
+      pl.col("date").str.strptime(pl.Date, format="%Y-%m-%d")
+  )
+  _chart = (
+      alt.Chart(weather_dates)
+      .mark_point()
+      .encode(
+          x="date:T",
+          y="temp_max",
+          color="location",
+      )
   )
   `,
     "chart = mo.ui.altair_chart(_chart)\nchart",
@@ -278,9 +293,13 @@ export function getAgentPrompt(filename: string) {
 
   <example title="SQL with duckdb">
   ${formatCells([
-    "import marimo as mo\nimport pandas as pd",
-    `cars_df = pd.read_csv('<https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json>')`,
-    `_df = mo.sql("SELECT * from cars_df WHERE Miles_per_Gallon > 20")`,
+    "import marimo as mo\n  import polars as pl",
+    `weather = pl.read_csv('https://raw.githubusercontent.com/vega/vega-datasets/refs/heads/main/data/weather.csv')`,
+    `seattle_weather_df = mo.sql(
+      f"""
+      SELECT * FROM weather WHERE location = 'Seattle';
+      """
+  )`,
   ])}
   </example>`;
 }

package/src/components/chat/chat-panel.tsx

@@ -18,6 +18,7 @@ import {
   SquareIcon,
 } from "lucide-react";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { useLocale } from "react-aria";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
 import {
@@ -103,6 +104,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
 }) => {
   const { handleClick } = useOpenSettingsToTab();
   const chatState = useAtomValue(chatStateAtom);
+  const { locale } = useLocale();
   const chats = useMemo(() => {
     return [...chatState.chats.values()].sort(
       (a, b) => b.updatedAt - a.updatedAt,
@@ -159,7 +161,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   >
                     <div className="font-medium">{chat.title}</div>
                     <div className="text-sm text-muted-foreground">
-                      {timeAgo(chat.updatedAt)}
+                      {timeAgo(chat.updatedAt, locale)}
                     </div>
                   </button>
                 ))}
@@ -236,6 +238,7 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
                   result={part.output}
                   className="my-2"
                   state={part.state}
+                  input={part.input}
                 />
               );
             }
@@ -267,6 +270,7 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
                     toolName={part.type}
                     result={part.output}
                     state={part.state}
+                    input={part.input}
                     className="my-2"
                   />
                 );

package/src/components/chat/markdown-renderer.tsx

@@ -3,7 +3,7 @@
 import { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
 import { BetweenHorizontalStartIcon } from "lucide-react";
-import { memo, Suspense, useEffect, useState } from "react";
+import { memo, Suspense, useState } from "react";
 import { Streamdown, type StreamdownProps } from "streamdown";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
@@ -114,9 +114,9 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
   const { theme } = useTheme();
   const [value, setValue] = useState(code);
 
-  useEffect(() => {
+  if (value !== code) {
     setValue(code);
-  }, [code]);
+  }
 
   const handleCopyCode = async () => {
     await copyToClipboard(value);
@@ -150,18 +150,13 @@ const CodeBlock = ({ code, language }: CodeBlockProps) => {
 const CopyButton: React.FC<ButtonProps> = ({ onClick, ...props }) => {
   const [copied, setCopied] = useState(false);
 
-  useEffect(() => {
-    if (copied) {
-      setTimeout(() => setCopied(false), 1000);
-    }
-  }, [copied]);
-
   return (
     <Button
       {...props}
       onClick={(e) => {
         onClick?.(e);
         setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
       }}
     >
       {copied ? "Copied" : "Copy"}
@@ -175,10 +170,11 @@ const COMPONENTS: Components = {
   code: ({ children, className }) => {
     const language = className?.replace("language-", "");
     if (language && typeof children === "string") {
+      const code = children.trim();
       return (
         <div>
           <div className="text-xs text-muted-foreground pl-1">{language}</div>
-          <CodeBlock code={children.trim()} language={language} />
+          <CodeBlock code={code} language={language} />
         </div>
       );
     }

package/src/components/chat/tool-call-accordion.tsx

@@ -45,17 +45,21 @@ const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
   } = data;
 
   return (
-    <div className="py-1 flex flex-col gap-1">
-      {/* Status */}
-      <div className="flex items-center gap-2">
-        <span className="text-xs font-medium text-[var(--grass-11)] capitalize">
-          {status}
-        </span>
-        {auth_required && (
-          <span className="text-xs px-2 py-0.5 bg-[var(--amber-2)] text-[var(--amber-11)] rounded-full">
-            Auth Required
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between">
+        <h3 className="text-xs font-semibold text-muted-foreground">
+          Tool Result
+        </h3>
+        <div className="flex items-center gap-2">
+          <span className="text-xs px-2 py-0.5 bg-[var(--grass-2)] text-[var(--grass-11)] rounded-full font-medium capitalize">
+            {status}
           </span>
-        )}
+          {auth_required && (
+            <span className="text-xs px-2 py-0.5 bg-[var(--amber-2)] text-[var(--amber-11)] rounded-full">
+              Auth Required
+            </span>
+          )}
+        </div>
       </div>
 
       {/* Message */}
@@ -68,17 +72,18 @@ const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
 
       {/* Data */}
       {rest && (
-        <div className="flex flex-col gap-1">
+        <div className="space-y-3">
           {Object.entries(rest).map(([key, value]) => {
             if (isEmpty(value)) {
               return null;
             }
             return (
-              <div key={key}>
-                <div className="text-xs font-medium text-muted-foreground mb-1 capitalize">
-                  {key}:
+              <div key={key} className="space-y-1.5">
+                <div className="text-xs font-medium text-muted-foreground capitalize flex items-center gap-2">
+                  <div className="w-1.5 h-1.5 bg-[var(--blue-9)] rounded-full" />
+                  {key}
                 </div>
-                <pre className="bg-[var(--slate-2)] p-1 text-muted-foreground border border-[var(--slate-4)] rounded text-xs overflow-auto scrollbar-thin max-h-64">
+                <pre className="bg-[var(--slate-2)] p-2 text-muted-foreground border border-[var(--slate-4)] rounded text-xs overflow-auto scrollbar-thin max-h-64">
                   {JSON.stringify(value, null, 2)}
                 </pre>
               </div>
@@ -107,6 +112,29 @@ const ResultRenderer: React.FC<{ result: unknown }> = ({ result }) => {
   );
 };
 
+const ToolArgsRenderer: React.FC<{ input: unknown }> = ({ input }) => {
+  const hasinput = input && input !== null;
+
+  if (!hasinput) {
+    return null;
+  }
+
+  const isObject =
+    typeof input === "object" &&
+    Object.keys(input as Record<string, unknown>).length > 0;
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-xs font-semibold text-muted-foreground">
+        Tool Request
+      </h3>
+      <pre className="bg-[var(--slate-2)] p-2 text-muted-foreground border border-[var(--slate-4)] rounded text-xs overflow-auto scrollbar-thin max-h-64">
+        {isObject ? JSON.stringify(input, null, 2) : String(input)}
+      </pre>
+    </div>
+  );
+};
+
 interface ToolCallAccordionProps {
   toolName: string;
   result: unknown;
@@ -114,6 +142,7 @@ interface ToolCallAccordionProps {
   index?: number;
   state?: ToolUIPart["state"];
   className?: string;
+  input?: unknown;
 }
 
 export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
@@ -123,6 +152,7 @@ export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
   index = 0,
   state,
   className,
+  input,
 }) => {
   const hasResult = state === "output-available" && (result || error);
   const status = error ? "error" : hasResult ? "success" : "loading";
@@ -176,21 +206,23 @@ export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
             </code>
           </span>
         </AccordionTrigger>
-        <AccordionContent className="pb-2 px-2">
+        <AccordionContent className="py-2 px-2">
           {/* Only show content when tool is complete */}
           {hasResult && (
             <div className="space-y-3">
+              <ToolArgsRenderer input={input} />
               {result !== undefined && result !== null && (
                 <ResultRenderer result={result} />
               )}
 
               {/* Error */}
               {error && (
-                <div>
-                  <div className="text-xs font-medium text-[var(--red-11)] mb-1">
-                    Error:
+                <div className="bg-[var(--red-2)] border border-[var(--red-6)] rounded-lg p-3">
+                  <div className="text-xs font-semibold text-[var(--red-11)] mb-2 flex items-center gap-2">
+                    <div className="w-1.5 h-1.5 bg-[var(--red-9)] rounded-full" />
+                    Error
                   </div>
-                  <div className="bg-[var(--red-2)] border border-[var(--red-6)] rounded-md p-3 text-sm text-[var(--red-11)]">
+                  <div className="text-sm text-[var(--red-11)] leading-relaxed">
                     {error}
                   </div>
                 </div>

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

@@ -31,13 +31,14 @@ export const SearchBar = ({
     onSearch(debouncedSearch);
   }, [debouncedSearch, onSearch]);
 
-  useEffect(() => {
-    if (hidden) {
-      setInternalValue("");
-    } else {
-      ref.current?.focus();
-    }
-  }, [hidden]);
+  if (!hidden) {
+    ref.current?.focus();
+  }
+
+  // Reset internal value when hidden becomes true
+  if (hidden && internalValue !== "") {
+    setInternalValue("");
+  }
 
   return (
     <div

package/src/components/data-table/__tests__/column_formatting.test.ts

@@ -6,37 +6,44 @@ import {
 } from "@/utils/numbers";
 import { applyFormat } from "../column-formatting/feature";
 
+const locale = "en-US";
+
 describe("applyFormat", () => {
   it("should return an empty string for null, undefined, or empty string values", () => {
-    expect(applyFormat(null, { format: "Date", dataType: "date" })).toBe("");
-    expect(applyFormat(undefined, { format: "Date", dataType: "date" })).toBe(
+    expect(
+      applyFormat(null, { format: "Date", dataType: "date", locale }),
+    ).toBe("");
+    expect(
+      applyFormat(undefined, { format: "Date", dataType: "date", locale }),
+    ).toBe("");
+    expect(applyFormat("", { format: "Date", dataType: "date", locale })).toBe(
       "",
     );
-    expect(applyFormat("", { format: "Date", dataType: "date" })).toBe("");
   });
 
   describe("date formatting", () => {
     it("should format date values correctly", () => {
       const date = "2023-10-01T12:00:00Z";
-      expect(applyFormat(date, { format: "Date", dataType: "date" })).toBe(
-        "10/1/23",
-      );
-      expect(applyFormat(date, { format: "Datetime", dataType: "date" })).toBe(
-        "10/1/23, 12:00:00 PM UTC",
-      );
+      expect(
+        applyFormat(date, { format: "Date", dataType: "date", locale }),
+      ).toBe("10/1/23");
+      expect(
+        applyFormat(date, { format: "Datetime", dataType: "date", locale }),
+      ).toBe("10/1/23, 12:00:00 PM UTC");
     });
 
     it("should format time values correctly", () => {
       const time = "12:00:00Z";
-      expect(applyFormat(time, { format: "Time", dataType: "time" })).toBe(
-        "12:00:00Z",
-      );
+      expect(
+        applyFormat(time, { format: "Time", dataType: "time", locale }),
+      ).toBe("12:00:00Z");
     });
 
     it("should format datetime values correctly", () => {
       const datetime = "2023-10-01T12:00:00Z";
       expect(
         applyFormat(datetime, {
+          locale,
           format: "Datetime",
           dataType: "datetime",
         }),
@@ -47,26 +54,28 @@ describe("applyFormat", () => {
   describe("number formatting", () => {
     it("should format number values correctly", () => {
       const number = "1234.567";
-      expect(applyFormat(number, { format: "Auto", dataType: "number" })).toBe(
-        "1,234.57",
-      );
       expect(
-        applyFormat(number, { format: "Percent", dataType: "number" }),
+        applyFormat(number, { format: "Auto", dataType: "number", locale }),
+      ).toBe("1,234.57");
+      expect(
+        applyFormat(number, { format: "Percent", dataType: "number", locale }),
       ).toBe("123,456.7%");
       expect(
         applyFormat(number, {
+          locale,
           format: "Scientific",
           dataType: "number",
         }),
-      ).toBe(prettyScientificNumber(1234.567, { shouldRound: true }));
+      ).toBe(prettyScientificNumber(1234.567, { shouldRound: true, locale }));
       expect(
         applyFormat(number, {
           format: "Engineering",
           dataType: "number",
+          locale,
         }),
-      ).toBe(prettyEngineeringNumber(1234.567));
+      ).toBe(prettyEngineeringNumber(1234.567, locale));
       expect(
-        applyFormat(number, { format: "Integer", dataType: "number" }),
+        applyFormat(number, { format: "Integer", dataType: "number", locale }),
       ).toBe("1,235");
     });
   });
@@ -75,41 +84,47 @@ describe("applyFormat", () => {
     it("should format string values correctly", () => {
       const str = "hello world";
       expect(
-        applyFormat(str, { format: "Uppercase", dataType: "string" }),
+        applyFormat(str, { format: "Uppercase", dataType: "string", locale }),
       ).toBe("HELLO WORLD");
       expect(
-        applyFormat(str, { format: "Lowercase", dataType: "string" }),
+        applyFormat(str, { format: "Lowercase", dataType: "string", locale }),
       ).toBe("hello world");
       expect(
-        applyFormat(str, { format: "Capitalize", dataType: "string" }),
+        applyFormat(str, { format: "Capitalize", dataType: "string", locale }),
       ).toBe("Hello world");
-      expect(applyFormat(str, { format: "Title", dataType: "string" })).toBe(
-        "Hello World",
-      );
+      expect(
+        applyFormat(str, { format: "Title", dataType: "string", locale }),
+      ).toBe("Hello World");
     });
   });
 
   describe("boolean formatting", () => {
     it("should format boolean values correctly", () => {
-      expect(applyFormat(true, { format: "Yes/No", dataType: "boolean" })).toBe(
-        "Yes",
-      );
       expect(
-        applyFormat(false, { format: "Yes/No", dataType: "boolean" }),
+        applyFormat(true, { format: "Yes/No", dataType: "boolean", locale }),
+      ).toBe("Yes");
+      expect(
+        applyFormat(false, { format: "Yes/No", dataType: "boolean", locale }),
       ).toBe("No");
-      expect(applyFormat(true, { format: "On/Off", dataType: "boolean" })).toBe(
-        "On",
-      );
       expect(
-        applyFormat(false, { format: "On/Off", dataType: "boolean" }),
+        applyFormat(true, { format: "On/Off", dataType: "boolean", locale }),
+      ).toBe("On");
+      expect(
+        applyFormat(false, { format: "On/Off", dataType: "boolean", locale }),
       ).toBe("Off");
     });
   });
 
   it("should return the original value for unknown data types or formats", () => {
     expect(
-      applyFormat("some value", { format: "Auto", dataType: "unknown" }),
+      applyFormat("some value", {
+        format: "Auto",
+        dataType: "unknown",
+        locale,
+      }),
     ).toBe("some value");
-    expect(applyFormat(123, { format: "Auto", dataType: "unknown" })).toBe(123);
+    expect(
+      applyFormat(123, { format: "Auto", dataType: "unknown", locale }),
+    ).toBe(123);
   });
 });

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", () => {