@marimo-team/frontend 0.15.4 → 0.16.0-dev96986

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

@@ -1,13 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import type { ToolUIPart } from "ai";
+import { isEmpty } from "lodash-es";
 import {
   CheckCircleIcon,
+  InfoIcon,
   Loader2,
   WrenchIcon,
   XCircleIcon,
 } from "lucide-react";
 import React from "react";
+import { z } from "zod";
 import {
   Accordion,
   AccordionContent,
@@ -16,12 +19,130 @@ import {
 } from "@/components/ui/accordion";
 import { cn } from "@/utils/cn";
 
+// Zod schema matching the Python SuccessResult dataclass
+const SuccessResultSchema = z
+  .object({
+    status: z.string().default("success"),
+    auth_required: z.boolean().default(false),
+    action_url: z.any(),
+    next_steps: z.any(),
+    meta: z.any(),
+    message: z.string().nullish(),
+  })
+  .passthrough();
+
+type SuccessResult = z.infer<typeof SuccessResultSchema>;
+
+const PrettySuccessResult: React.FC<{ data: SuccessResult }> = ({ data }) => {
+  const {
+    status,
+    auth_required,
+    action_url: _action_url,
+    meta: _meta,
+    next_steps: _next_steps,
+    message,
+    ...rest
+  } = 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}
+          </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 */}
+      {message && (
+        <div className="flex items-start gap-2">
+          <InfoIcon className="h-3 w-3 text-[var(--blue-11)] mt-0.5 flex-shrink-0" />
+          <div className="text-xs text-foreground">{message}</div>
+        </div>
+      )}
+
+      {/* Data */}
+      {rest && (
+        <div className="space-y-3">
+          {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>
+                <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>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ResultRenderer: React.FC<{ result: unknown }> = ({ result }) => {
+  // Try to parse the result with our Zod schema
+  const parseResult = SuccessResultSchema.safeParse(result);
+
+  if (parseResult.success) {
+    // If it matches the SuccessResult schema, show the pretty UI
+    return <PrettySuccessResult data={parseResult.data} />;
+  }
+
+  // Otherwise, fall back to the current JSON viewer
+  return (
+    <div className="text-xs font-medium text-muted-foreground mb-1">
+      {typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+    </div>
+  );
+};
+
+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;
   error?: string;
   index?: number;
   state?: ToolUIPart["state"];
+  className?: string;
+  input?: unknown;
 }
 
 export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
@@ -30,6 +151,8 @@ export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
   error,
   index = 0,
   state,
+  className,
+  input,
 }) => {
   const hasResult = state === "output-available" && (result || error);
   const status = error ? "error" : hasResult ? "success" : "loading";
@@ -39,9 +162,9 @@ export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
       case "loading":
         return <Loader2 className="h-3 w-3 animate-spin" />;
       case "error":
-        return <XCircleIcon className="h-3 w-3 text-destructive" />;
+        return <XCircleIcon className="h-3 w-3 text-[var(--red-11)]" />;
       case "success":
-        return <CheckCircleIcon className="h-3 w-3 text-green-600" />;
+        return <CheckCircleIcon className="h-3 w-3 text-[var(--grass-11)]" />;
       default:
         return <WrenchIcon className="h-3 w-3" />;
     }
@@ -49,13 +172,13 @@ export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
 
   const getStatusText = () => {
     if (status === "loading") {
-      return "Running: ";
+      return "Running";
     }
     if (error) {
-      return "Failed: ";
+      return "Failed";
     }
     if (hasResult) {
-      return "Done: ";
+      return "Done";
     }
     return "Tool call";
   };
@@ -65,46 +188,41 @@ export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
       key={`tool-${index}`}
       type="single"
       collapsible={true}
-      className="w-full"
+      className={cn("w-full", className)}
     >
       <AccordionItem value="tool-call" className="border-0">
         <AccordionTrigger
           className={cn(
-            "h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180",
-            status === "error" && "text-destructive/80",
-            status === "success" && "text-green-600/80",
+            "h-6 text-xs border-border shadow-none! ring-0! bg-muted/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",
+            status === "error" && "text-[var(--red-11)]/80",
+            status === "success" && "text-[var(--grass-11)]/80",
           )}
         >
           <span className="flex items-center gap-1">
             {getStatusIcon()}
-            {getStatusText()}:{" "}
-            <code className="font-mono text-xs">{toolName}</code>
+            {getStatusText()}:
+            <code className="font-mono text-xs">
+              {formatToolName(toolName)}
+            </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 && (
-                <div>
-                  <div className="text-xs font-medium text-muted-foreground mt-2 mb-1">
-                    Result:
-                  </div>
-                  <div className="text-xs font-medium text-muted-foreground mb-1">
-                    {typeof result === "string"
-                      ? result
-                      : JSON.stringify(result, null, 2)}
-                  </div>
-                </div>
+                <ResultRenderer result={result} />
               )}
 
               {/* Error */}
               {error && (
-                <div>
-                  <div className="text-xs font-medium text-destructive 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-destructive/10 border border-destructive/20 rounded-md p-3 text-sm text-destructive">
+                  <div className="text-sm text-[var(--red-11)] leading-relaxed">
                     {error}
                   </div>
                 </div>
@@ -116,3 +234,7 @@ export const ToolCallAccordion: React.FC<ToolCallAccordionProps> = ({
     </Accordion>
   );
 };
+
+function formatToolName(toolName: string) {
+  return toolName.replace("tool-", "");
+}

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__/data-table.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import type { ColumnDef, RowSelectionState } from "@tanstack/react-table";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -57,4 +57,42 @@ 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");
+  });
 });

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

@@ -0,0 +1,14 @@
+/* Copyright 2025 Marimo. All rights reserved. */
+"use no memo";
+
+import type { InitialTableState, TableFeature } from "@tanstack/react-table";
+import type { CellHoverTemplateTableState } from "./types";
+
+export const CellHoverTemplateFeature: TableFeature = {
+  getInitialState: (state?: InitialTableState): CellHoverTemplateTableState => {
+    return {
+      ...state,
+      cellHoverTemplate: null,
+    };
+  },
+};

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

@@ -0,0 +1,11 @@
+/* Copyright 2025 Marimo. All rights reserved. */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+
+export interface CellHoverTemplateTableState {
+  cellHoverTemplate: string | null;
+}
+
+// Use declaration merging to add our new feature APIs
+declare module "@tanstack/react-table" {
+  interface TableState extends CellHoverTemplateTableState {}
+}

package/src/components/data-table/charts/components/form-fields.tsx

@@ -342,7 +342,7 @@ interface SliderFieldProps {
   fieldName: FieldName;
   label: string;
   className?: string;
-  value: number;
+  defaultValue: number;
   start: number;
   stop: number;
   step?: number;
@@ -351,53 +351,57 @@ interface SliderFieldProps {
 export const SliderField = ({
   fieldName,
   label,
-  value,
+  defaultValue,
   start,
   stop,
   step,
   className,
 }: SliderFieldProps) => {
-  const [internalValue, setInternalValue] = React.useState(value);
   const form = useFormContext();
 
-  // Update internal value on prop change
-  React.useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
   return (
     <FormField
       control={form.control}
       name={fieldName}
-      render={({ field }) => (
-        <FormItem
-          className={cn("flex flex-row items-center gap-2 w-1/2", className)}
-        >
-          <FormLabel>{label}</FormLabel>
-          <FormControl>
-            <Slider
-              {...field}
-              id={fieldName}
-              className="relative flex items-center select-none"
-              value={[internalValue]}
-              min={start}
-              max={stop}
-              step={step}
-              // Triggered on slider drag
-              onValueChange={([nextValue]) => {
-                setInternalValue(nextValue);
-                field.onChange(nextValue);
-              }}
-              // Triggered on mouse up
-              onValueCommit={([nextValue]) => {
-                field.onChange(nextValue);
-                form.setValue(fieldName, nextValue);
-              }}
-              valueMap={(value) => value}
-            />
-          </FormControl>
-        </FormItem>
-      )}
+      render={({ field }) => {
+        const currentValue = field.value ?? defaultValue;
+        const numericValue = Number(currentValue);
+
+        const saveValue = (value: number | string) => {
+          if (typeof value === "string") {
+            value = Number(value);
+          }
+          field.onChange(value);
+        };
+
+        return (
+          <FormItem
+            className={cn("flex flex-row items-center gap-2 w-1/2", className)}
+          >
+            <FormLabel>{label}</FormLabel>
+            <FormControl>
+              <Slider
+                {...field}
+                id={fieldName}
+                className="relative flex items-center select-none"
+                value={[numericValue]}
+                min={start}
+                max={stop}
+                step={step}
+                // Triggered on slider drag
+                onValueChange={([nextValue]) => {
+                  saveValue(nextValue);
+                }}
+                // Triggered on mouse up
+                onValueCommit={([nextValue]) => {
+                  saveValue(nextValue);
+                }}
+                valueMap={(value) => value}
+              />
+            </FormControl>
+          </FormItem>
+        );
+      }}
     />
   );
 };

package/src/components/data-table/charts/forms/common-chart.tsx

@@ -102,7 +102,7 @@ export const StyleForm: React.FC = () => {
           <SliderField
             fieldName="xAxis.width"
             label="Width"
-            value={400}
+            defaultValue={400}
             start={200}
             stop={800}
           />
@@ -118,7 +118,7 @@ export const StyleForm: React.FC = () => {
           <SliderField
             fieldName="yAxis.height"
             label="Height"
-            value={300}
+            defaultValue={300}
             start={150}
             stop={600}
           />

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useState } from "react";
+import { useLocale } from "react-aria";
 import {
   AddDataframeChart,
   renderChart,
@@ -53,6 +54,7 @@ export const ColumnExplorerPanel = ({
   tableId,
 }: ColumnExplorerPanelProps) => {
   const [searchValue, setSearchValue] = useState("");
+  const { locale } = useLocale();
   const columns = fieldTypes?.filter(([columnName]) => {
     if (
       columnName === SELECT_COLUMN_ID ||
@@ -71,7 +73,7 @@ export const ColumnExplorerPanel = ({
   return (
     <div className="mt-5 mb-3">
       <span className="text-xs font-semibold ml-2 flex">
-        {prettifyRowColumnCount(totalRows, totalColumns)}
+        {prettifyRowColumnCount(totalRows, totalColumns, locale)}
         <CopyClipboardIcon
           tooltip="Copy column names"
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
@@ -169,6 +171,7 @@ const ColumnPreview = ({
   dataType: DataType;
 }) => {
   const { theme } = useTheme();
+  const { locale } = useLocale();
 
   const {
     data,
@@ -208,7 +211,7 @@ const ColumnPreview = ({
       refetchPreview,
     });
 
-  const previewStats = stats && renderStats(stats, dataType);
+  const previewStats = stats && renderStats(stats, dataType, locale);
 
   const chart = chart_spec && renderChart(chart_spec, theme);