@marimo-team/frontend 0.21.2-dev1 → 0.21.2-dev101

package/src/components/app-config/get-dirty-values.ts

@@ -0,0 +1,100 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { FieldPath, FieldValues } from "react-hook-form";
+import type { UserConfig } from "@/core/config/config-schema";
+
+/**
+ * Extract only the values that have been modified (dirty) from form state.
+ * This prevents sending unchanged fields that could overwrite backend values.
+ */
+export function getDirtyValues<T extends FieldValues>(
+  values: T,
+  dirtyFields: Partial<Record<keyof T, unknown>>,
+): Partial<T> {
+  const result: Partial<T> = {};
+  for (const key of Object.keys(dirtyFields) as (keyof T)[]) {
+    const dirty = dirtyFields[key];
+    const value = values[key];
+
+    // Skip if the value no longer exists (e.g., deleted from a record)
+    if (value === undefined) {
+      continue;
+    }
+
+    if (dirty === true) {
+      result[key] = value;
+    } else if (typeof dirty === "object" && dirty !== null) {
+      // Nested object - recurse
+      const nested = getDirtyValues(
+        value as FieldValues,
+        dirty as Partial<Record<string, unknown>>,
+      );
+      if (Object.keys(nested).length > 0) {
+        result[key] = nested as T[keyof T];
+      }
+    }
+  }
+  return result;
+}
+
+type ManualInjector = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => void;
+
+const modelsAiInjection = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => {
+  dirtyValues.ai = {
+    ...dirtyValues.ai,
+    models: {
+      ...dirtyValues.ai?.models,
+      displayed_models: values.ai?.models?.displayed_models ?? [],
+      custom_models: values.ai?.models?.custom_models ?? [],
+    },
+  };
+};
+
+// Some fields (like AI model lists) have empty arrays as default values.
+// If a user explicitly clears them, RHF won't mark them dirty, so we use
+// touchedFields to force-include those values in the payload.
+const MANUAL_INJECT_ENTRIES = [
+  ["ai.models.displayed_models", modelsAiInjection],
+  ["ai.models.custom_models", modelsAiInjection],
+] as const satisfies readonly (readonly [
+  FieldPath<UserConfig>,
+  ManualInjector,
+])[];
+
+const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
+
+const isTouchedPath = (
+  touched: unknown,
+  path: FieldPath<UserConfig>,
+): boolean => {
+  if (!touched) {
+    return false;
+  }
+  let current: unknown = touched;
+  for (const segment of path.split(".")) {
+    if (typeof current !== "object" || current === null) {
+      return false;
+    }
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current === true;
+};
+
+export const applyManualInjections = (opts: {
+  values: UserConfig;
+  dirtyValues: Partial<UserConfig>;
+  touchedFields: unknown;
+}) => {
+  const { values, dirtyValues, touchedFields } = opts;
+  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
+    if (isTouchedPath(touchedFields, fieldPath)) {
+      injector(values, dirtyValues);
+    }
+  }
+};

package/src/components/app-config/user-config-form.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { merge } from "lodash-es";
 import {
   AlertTriangleIcon,
   BrainIcon,
@@ -14,7 +15,6 @@ import {
 } from "lucide-react";
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
-import type { FieldPath, FieldValues } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type z from "zod";
 import { Button } from "@/components/ui/button";
@@ -58,105 +58,10 @@ import { Tooltip } from "../ui/tooltip";
 import { AiConfig } from "./ai-config";
 import { formItemClasses, SettingGroup } from "./common";
 import { DataForm } from "./data-form";
+import { applyManualInjections, getDirtyValues } from "./get-dirty-values";
 import { IsOverridden } from "./is-overridden";
 import { OptionalFeatures } from "./optional-features";
 
-/**
- * Extract only the values that have been modified (dirty) from form state.
- * This prevents sending unchanged fields that could overwrite backend values.
- */
-export function getDirtyValues<T extends FieldValues>(
-  values: T,
-  dirtyFields: Partial<Record<keyof T, unknown>>,
-): Partial<T> {
-  const result: Partial<T> = {};
-  for (const key of Object.keys(dirtyFields) as (keyof T)[]) {
-    const dirty = dirtyFields[key];
-    const value = values[key];
-
-    // Skip if the value no longer exists (e.g., deleted from a record)
-    if (value === undefined) {
-      continue;
-    }
-
-    if (dirty === true) {
-      result[key] = value;
-    } else if (typeof dirty === "object" && dirty !== null) {
-      // Nested object - recurse
-      const nested = getDirtyValues(
-        value as FieldValues,
-        dirty as Partial<Record<string, unknown>>,
-      );
-      if (Object.keys(nested).length > 0) {
-        result[key] = nested as T[keyof T];
-      }
-    }
-  }
-  return result;
-}
-
-type ManualInjector = (
-  values: UserConfig,
-  dirtyValues: Partial<UserConfig>,
-) => void;
-
-const modelsAiInjection = (
-  values: UserConfig,
-  dirtyValues: Partial<UserConfig>,
-) => {
-  dirtyValues.ai = {
-    ...dirtyValues.ai,
-    models: {
-      ...dirtyValues.ai?.models,
-      displayed_models: values.ai?.models?.displayed_models ?? [],
-      custom_models: values.ai?.models?.custom_models ?? [],
-    },
-  };
-};
-
-// Some fields (like AI model lists) have empty arrays as default values.
-// If a user explicitly clears them, RHF won't mark them dirty, so we use
-// touchedFields to force-include those values in the payload.
-const MANUAL_INJECT_ENTRIES = [
-  ["ai.models.displayed_models", modelsAiInjection],
-  ["ai.models.custom_models", modelsAiInjection],
-] as const satisfies readonly (readonly [
-  FieldPath<UserConfig>,
-  ManualInjector,
-])[];
-
-const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
-
-const isTouchedPath = (
-  touched: unknown,
-  path: FieldPath<UserConfig>,
-): boolean => {
-  if (!touched) {
-    return false;
-  }
-  let current: unknown = touched;
-  for (const segment of path.split(".")) {
-    if (typeof current !== "object" || current === null) {
-      return false;
-    }
-    current = (current as Record<string, unknown>)[segment];
-  }
-  return current === true;
-};
-
-export const applyManualInjections = (opts: {
-  values: UserConfig;
-  dirtyValues: Partial<UserConfig>;
-  touchedFields: unknown;
-}) => {
-  const { values, dirtyValues, touchedFields } = opts;
-  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
-    if (isTouchedPath(touchedFields, fieldPath)) {
-      injector(values, dirtyValues);
-    }
-  }
-};
-
 const categories = [
   {
     id: "editor",
@@ -287,10 +192,10 @@ export const UserConfigForm: React.FC = () => {
       dirtyValues.ai = setAiModels(values.ai, dirtyValues.ai);
     }
 
-    await saveUserConfig({ config: dirtyValues }).then(() => {
-      // Update local state with form values
-      setConfig((prev) => ({ ...prev, ...values }));
-    });
+    await saveUserConfig({ config: dirtyValues });
+    // Only apply the changed keys; this avoids stale request responses
+    // overwriting newer config changes.
+    setConfig((prev) => merge({}, prev, dirtyValues));
   };
   const onSubmit = useDebouncedCallback(onSubmitNotDebounced, FORM_DEBOUNCE);
 

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

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { useAtom, useAtomValue } from "jotai";
-import { capitalize } from "lodash-es";
 import {
   BotMessageSquareIcon,
   RefreshCwIcon,
@@ -24,6 +23,7 @@ import { Button } from "@/components/ui/button";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 import { Logger } from "@/utils/Logger";
+import { capitalize } from "@/utils/strings";
 import { AgentDocs } from "./agent-docs";
 import { AgentSelector } from "./agent-selector";
 import { ModelSelector } from "./model-selector";
@@ -95,7 +95,9 @@ interface AgentTitleProps {
 }
 
 const AgentTitle = memo<AgentTitleProps>(({ currentAgentId }) => (
-  <span className="text-sm font-medium">{capitalize(currentAgentId)}</span>
+  <span className="text-sm font-medium">
+    {capitalize(currentAgentId ?? "")}
+  </span>
 ));
 AgentTitle.displayName = "AgentTitle";
 

package/src/components/chat/acp/blocks.tsx

@@ -5,7 +5,6 @@ import type {
   ToolCallContent,
   ToolCallLocation,
 } from "@zed-industries/agent-client-protocol";
-import { capitalize } from "lodash-es";
 import {
   BotMessageSquareIcon,
   FileAudio2Icon,
@@ -36,7 +35,7 @@ import {
 import { uniqueByTakeLast } from "@/utils/arrays";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
-import { Strings } from "@/utils/strings";
+import { capitalize, Strings } from "@/utils/strings";
 import { SimpleAccordion } from "./common";
 import type {
   AgentNotificationEvent,

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

@@ -2,9 +2,9 @@
 
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
-import { capitalize } from "lodash-es";
 import { isPlatformWindows } from "@/core/hotkeys/shortcuts";
 import { jotaiJsonStorage } from "@/utils/storage/jotai";
+import { capitalize } from "@/utils/strings";
 import type { TypedString } from "@/utils/typed";
 import { generateUUID } from "@/utils/uuid";
 import type { ExternalAgentSessionId, SessionSupportType } from "./types";

package/src/components/chat/chat-utils.ts

@@ -1,7 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { components } from "@marimo-team/marimo-api";
-import type { FileUIPart, ToolUIPart, UIMessage } from "ai";
+import type {
+  ChatAddToolOutputFunction,
+  FileUIPart,
+  ToolUIPart,
+  UIMessage,
+} from "ai";
 import { useState } from "react";
 import useEvent from "react-use-event-hook";
 import type { ProviderId } from "@/core/ai/ids/ids";
@@ -111,12 +116,6 @@ export async function buildCompletionRequestBody(
   };
 }
 
-interface AddToolOutput {
-  tool: string;
-  toolCallId: string;
-  output: unknown;
-}
-
 export async function handleToolCall({
   invokeAiTool,
   addToolOutput, // Important that we don't await addToolOutput to prevent potential deadlocks
@@ -124,7 +123,7 @@ export async function handleToolCall({
   toolContext,
 }: {
   invokeAiTool: (request: InvokeAiToolRequest) => Promise<InvokeAiToolResponse>;
-  addToolOutput: (output: AddToolOutput) => Promise<void>;
+  addToolOutput: ChatAddToolOutputFunction<UIMessage>;
   toolCall: {
     toolName: string;
     toolCallId: string;

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

@@ -123,6 +123,7 @@ const ToolArgsRenderer: React.FC<{ input: unknown }> = ({ input }) => {
 
   const isObject =
     typeof input === "object" &&
+    !Array.isArray(input) &&
     Object.keys(input as Record<string, unknown>).length > 0;
 
   return (

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

@@ -2,21 +2,20 @@
 "use no memo";
 
 import type { RowSelectionState, Table } from "@tanstack/react-table";
-import {
-  ChartColumnStacked,
-  ChartSplineIcon,
-  PanelRightIcon,
-  SearchIcon,
-} from "lucide-react";
+import { ChartSplineIcon, PanelRightIcon, SearchIcon } from "lucide-react";
 import React from "react";
+import { useLocale } from "react-aria";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
-import type { PanelType } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
+import {
+  PANEL_TYPES,
+  type PanelType,
+} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Button } from "../ui/button";
 import { Tooltip } from "../ui/tooltip";
 import { toast } from "../ui/use-toast";
 import { type DownloadActionProps, DownloadAs } from "./download-actions";
-import { DataTablePagination } from "./pagination";
+import { DataTablePagination, prettifyRowColumnCount } from "./pagination";
 import type { DataTableSelection } from "./types";
 
 interface TableActionsProps<TData> {
@@ -30,15 +29,13 @@ interface TableActionsProps<TData> {
   onRowSelectionChange?: (value: RowSelectionState) => void;
   table: Table<TData>;
   downloadAs?: DownloadActionProps["downloadAs"];
-  downloadFileName?: string;
   getRowIds?: GetRowIds;
   toggleDisplayHeader?: () => void;
   showChartBuilder?: boolean;
-  showColumnExplorer?: boolean;
-  showRowExplorer?: boolean;
+  showTableExplorer?: boolean;
   showPageSizeSelector?: boolean;
   togglePanel?: (panelType: PanelType) => void;
-  isPanelOpen?: (panelType: PanelType) => boolean;
+  isAnyPanelOpen?: boolean;
   tableLoading?: boolean;
 }
 
@@ -53,17 +50,16 @@ export const TableActions = <TData,>({
   onRowSelectionChange,
   table,
   downloadAs,
-  downloadFileName,
   getRowIds,
   toggleDisplayHeader,
   showChartBuilder,
-  showColumnExplorer,
-  showRowExplorer,
+  showTableExplorer,
   showPageSizeSelector,
   togglePanel,
-  isPanelOpen,
+  isAnyPanelOpen,
   tableLoading,
 }: TableActionsProps<TData>) => {
+  const { locale } = useLocale();
   const handleSelectAllRows = (value: boolean) => {
     if (!onRowSelectionChange) {
       return;
@@ -134,46 +130,25 @@ export const TableActions = <TData,>({
           </Button>
         </Tooltip>
       )}
-      {togglePanel && isPanelOpen !== undefined && (
-        <>
-          {showRowExplorer && (
-            <Tooltip content="Toggle row viewer">
-              <Button
-                variant="text"
-                size="xs"
-                onClick={() => togglePanel("row-viewer")}
-                className="print:hidden"
-              >
-                <PanelRightIcon
-                  className={cn(
-                    "w-4 h-4 text-muted-foreground",
-                    isPanelOpen("row-viewer") && "text-primary",
-                  )}
-                />
-              </Button>
-            </Tooltip>
-          )}
-          {showColumnExplorer && (
-            <Tooltip content="Toggle column explorer">
-              <Button
-                variant="text"
-                size="xs"
-                onClick={() => togglePanel("column-explorer")}
-                className="print:hidden"
-              >
-                <ChartColumnStacked
-                  className={cn(
-                    "w-4 h-4 text-muted-foreground",
-                    isPanelOpen("column-explorer") && "text-primary",
-                  )}
-                />
-              </Button>
-            </Tooltip>
-          )}
-        </>
+      {showTableExplorer && togglePanel && (
+        <Tooltip content="Toggle table explorer">
+          <Button
+            variant="text"
+            size="xs"
+            onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
+            className="print:hidden"
+          >
+            <PanelRightIcon
+              className={cn(
+                "w-4 h-4 text-muted-foreground",
+                isAnyPanelOpen && "text-primary",
+              )}
+            />
+          </Button>
+        </Tooltip>
       )}
 
-      {pagination && (
+      {pagination ? (
         <DataTablePagination
           totalColumns={totalColumns}
           selection={selection}
@@ -182,14 +157,13 @@ export const TableActions = <TData,>({
           tableLoading={tableLoading}
           showPageSizeSelector={showPageSizeSelector}
         />
+      ) : (
+        <span className="text-xs text-muted-foreground px-2">
+          {prettifyRowColumnCount(table.getRowCount(), totalColumns, locale)}
+        </span>
       )}
       <div className="ml-auto">
-        {downloadAs && (
-          <DownloadAs
-            downloadAs={downloadAs}
-            downloadFileName={downloadFileName}
-          />
-        )}
+        {downloadAs && <DownloadAs downloadAs={downloadAs} />}
       </div>
     </div>
   );

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

@@ -222,6 +222,75 @@ describe("generateColumns", () => {
     expect(columns[1].meta?.dataType).toBe("number");
   });
 
+  it("should auto right-align numeric columns", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+    });
+
+    // "age" is a number column — should auto right-align
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (columns[1].cell as any)({
+      column: {
+        columnDef: columns[1],
+      },
+      renderValue: () => 25,
+      getValue: () => 25,
+    });
+    expect(cell?.props.className).toContain("text-right");
+
+    // "name" is a string column — should remain left-aligned
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nameCell = (columns[0].cell as any)({
+      column: {
+        columnDef: columns[0],
+      },
+      renderValue: () => "John",
+      getValue: () => "John",
+    });
+    expect(nameCell?.props.className).not.toContain("text-right");
+  });
+
+  it("should respect explicit textJustifyColumns over auto alignment", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+      textJustifyColumns: { age: "left" },
+    });
+
+    // "age" is numeric but explicitly set to left
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (columns[1].cell as any)({
+      column: {
+        columnDef: columns[1],
+      },
+      renderValue: () => 25,
+      getValue: () => 25,
+    });
+    expect(cell?.props.className).not.toContain("text-right");
+  });
+
+  it("should set minFractionDigits from fractionDigitsByColumn", () => {
+    const numericFieldTypes: FieldTypesWithExternalType = [
+      ["price", ["number", "float64"]],
+      ["count", ["integer", "int64"]],
+    ];
+
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes: numericFieldTypes,
+      fractionDigitsByColumn: { price: 2 },
+    });
+
+    // price has 2 fraction digits
+    expect(columns[0].meta?.minFractionDigits).toBe(2);
+    // count not in fractionDigitsByColumn
+    expect(columns[1].meta?.minFractionDigits).toBeUndefined();
+  });
+
   it("should handle text justification and wrapping", () => {
     const columns = generateColumns({
       rowHeaders: [],
@@ -572,6 +641,75 @@ describe("LocaleNumber", () => {
     );
     expect(container.textContent).toMatchInlineSnapshot(`"10,000,000,000"`);
   });
+
+  it("should pad decimals with minFractionDigits", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={42} minFractionDigits={2} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"42.00"`);
+  });
+
+  it("should pad to minFractionDigits for numbers with fewer decimals", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={1234.5} minFractionDigits={3} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"1,234.500"`);
+  });
+
+  it("should not truncate decimals beyond minFractionDigits", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={1.234_56} minFractionDigits={2} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"1.23456"`);
+  });
+});
+
+describe("renderCellValue with boolean values", () => {
+  const createMockColumn = () =>
+    ({
+      id: "active",
+      columnDef: {
+        meta: {
+          dataType: "boolean" as const,
+          dtype: "bool",
+        },
+      },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  it("should render true as True", () => {
+    const mockColumn = createMockColumn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => true,
+      getValue: () => true,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(result);
+    expect(container.textContent).toBe("True");
+  });
+
+  it("should render false as False", () => {
+    const mockColumn = createMockColumn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => false,
+      getValue: () => false,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(result);
+    expect(container.textContent).toBe("False");
+  });
 });
 
 describe("renderCellValue with datetime values", () => {