@marimo-team/frontend 0.16.0-dev96986 → 0.16.0

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

@@ -52,7 +52,7 @@ export function getAgentPrompt(filename: string) {
   ## Best Practices
 
   <data_handling>
-  - Use polars for data manipulation
+  - Use pandas 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. Add tooltips where appropriate. You can pass polars dataframes directly to altair.
+  - For altair: return the chart object directly
   - 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(f"""<your query>""") for DuckDB, or df = mo.sql(f"""<your query>""", engine=engine) for other SQL engines.
+  - When writing duckdb, prefer using marimo's SQL cells, which start with _df = mo.sql(query)
   - 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,8 +144,7 @@ export function getAgentPrompt(filename: string) {
   ${formatCells([
     `
   import marimo as mo
-  import altair as alt
-  import polars as pl
+  import matplotlib.pyplot as plt
   import numpy as np
     `,
     `
@@ -156,18 +155,12 @@ export function getAgentPrompt(filename: string) {
   x = np.random.rand(n_points.value)
   y = np.random.rand(n_points.value)
 
-  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
+  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()
     `,
   ])}
   </example>
@@ -176,11 +169,11 @@ export function getAgentPrompt(filename: string) {
   ${formatCells([
     `
   import marimo as mo
-  import polars as pl
+  import pandas as pd
   from vega_datasets import data
     `,
     `
-  cars_df = pl.DataFrame(data.cars())
+  cars_df = data.cars()
   mo.ui.data_explorer(cars_df)
     `,
   ])}
@@ -190,44 +183,43 @@ export function getAgentPrompt(filename: string) {
   ${formatCells([
     `
   import marimo as mo
-  import polars as pl
-  import altair as alt
+  import pandas as pd
+  import matplotlib.pyplot as plt
+  import seaborn as sns
     `,
     `
-  iris = pl.read_csv("hf://datasets/scikit-learn/iris/Iris.csv")
+  iris = sns.load_dataset('iris')
     `,
     `
   species_selector = mo.ui.dropdown(
-      options=["All"] + iris["Species"].unique().to_list(),
+      options=["All"] + iris["species"].unique().tolist(),
       value="All",
-      label="Species",
+      label="Species"
   )
   x_feature = mo.ui.dropdown(
-      options=iris.select(pl.col(pl.Float64, pl.Int64)).columns,
-      value="SepalLengthCm",
-      label="X Feature",
+      options=iris.select_dtypes('number').columns.tolist(),
+      value="sepal_length",
+      label="X Feature"
   )
   y_feature = mo.ui.dropdown(
-      options=iris.select(pl.col(pl.Float64, pl.Int64)).columns,
-      value="SepalWidthCm",
-      label="Y Feature",
+      options=iris.select_dtypes('number').columns.tolist(),
+      value="sepal_width",
+      label="Y Feature"
   )
   mo.hstack([species_selector, x_feature, y_feature])
     `,
     `
-  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
+  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"
   )
-
-  chart
+  plt.title(f"{y_feature.value} vs {x_feature.value}")
+  plt.gca()
     `,
   ])}
   </example>
@@ -250,21 +242,14 @@ export function getAgentPrompt(filename: string) {
     `
   import marimo as mo
   import altair as alt
-  import polars as pl
+  import pandas as pd
     `,
     `# Load dataset
-  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",
-      )
+  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',
   )
   `,
     "chart = mo.ui.altair_chart(_chart)\nchart",
@@ -293,13 +278,9 @@ export function getAgentPrompt(filename: string) {
 
   <example title="SQL with duckdb">
   ${formatCells([
-    "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';
-      """
-  )`,
+    "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")`,
   ])}
   </example>`;
 }

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

@@ -18,7 +18,6 @@ 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 {
@@ -104,7 +103,6 @@ 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,
@@ -161,7 +159,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   >
                     <div className="font-medium">{chat.title}</div>
                     <div className="text-sm text-muted-foreground">
-                      {timeAgo(chat.updatedAt, locale)}
+                      {timeAgo(chat.updatedAt)}
                     </div>
                   </button>
                 ))}
@@ -238,7 +236,6 @@ const ChatMessageDisplay: React.FC<ChatMessageProps> = memo(
                   result={part.output}
                   className="my-2"
                   state={part.state}
-                  input={part.input}
                 />
               );
             }
@@ -270,7 +267,6 @@ 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, useState } from "react";
+import { memo, Suspense, useEffect, 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);
 
-  if (value !== code) {
+  useEffect(() => {
     setValue(code);
-  }
+  }, [code]);
 
   const handleCopyCode = async () => {
     await copyToClipboard(value);
@@ -150,13 +150,18 @@ 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"}
@@ -170,11 +175,10 @@ 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={code} language={language} />
+          <CodeBlock code={children.trim()} language={language} />
         </div>
       );
     }

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

@@ -45,21 +45,17 @@ const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
   } = data;
 
   return (
-    <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}
+    <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
           </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 */}
@@ -72,18 +68,17 @@ const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
 
       {/* Data */}
       {rest && (
-        <div className="space-y-3">
+        <div className="flex flex-col gap-1">
           {Object.entries(rest).map(([key, value]) => {
             if (isEmpty(value)) {
               return null;
             }
             return (
-              <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 key={key}>
+                <div className="text-xs font-medium text-muted-foreground mb-1 capitalize">
+                  {key}:
                 </div>
-                <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">
+                <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">
                   {JSON.stringify(value, null, 2)}
                 </pre>
               </div>
@@ -112,29 +107,6 @@ 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;
@@ -142,7 +114,6 @@ interface ToolCallAccordionProps {
   index?: number;
   state?: ToolUIPart["state"];
   className?: string;
-  input?: unknown;
 }
 
 export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
@@ -152,7 +123,6 @@ 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";
@@ -206,23 +176,21 @@ export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
             </code>
           </span>
         </AccordionTrigger>
-        <AccordionContent className="py-2 px-2">
+        <AccordionContent className="pb-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 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="text-xs font-medium text-[var(--red-11)] mb-1">
+                    Error:
                   </div>
-                  <div className="text-sm text-[var(--red-11)] leading-relaxed">
+                  <div className="bg-[var(--red-2)] border border-[var(--red-6)] rounded-md p-3 text-sm text-[var(--red-11)]">
                     {error}
                   </div>
                 </div>

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

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

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

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

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

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import type { ColumnDef, RowSelectionState } from "@tanstack/react-table";
-import { render, screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -57,42 +57,4 @@ describe("DataTable", () => {
     // Verify the rowSelection prop is maintained
     expect(commonProps.rowSelection).toEqual(initialRowSelection);
   });
-
-  it("applies hoverTemplate to the row title using row values", () => {
-    interface RowData {
-      id: number;
-      first: string;
-      last: string;
-    }
-
-    const testData: RowData[] = [
-      { id: 1, first: "Michael", last: "Scott" },
-      { id: 2, first: "Jim", last: "Halpert" },
-    ];
-
-    const columns: Array<ColumnDef<RowData>> = [
-      { accessorKey: "first", header: "First" },
-      { accessorKey: "last", header: "Last" },
-    ];
-
-    render(
-      <TooltipProvider>
-        <DataTable
-          data={testData}
-          columns={columns}
-          selection={null}
-          totalRows={2}
-          totalColumns={2}
-          pagination={false}
-          hoverTemplate={"{{first}} {{last}}"}
-        />
-      </TooltipProvider>,
-    );
-
-    // Grab all rows and assert title attribute computed from template
-    const rows = screen.getAllByRole("row");
-    // The first row is header; subsequent rows correspond to data
-    expect(rows[1]).toHaveAttribute("title", "Michael Scott");
-    expect(rows[2]).toHaveAttribute("title", "Jim Halpert");
-  });
 });