@marimo-team/islands 0.23.7-dev8 → 0.23.7-dev80

package/src/components/chat/tool-call/tool-history-row.tsx

@@ -0,0 +1,153 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { BanIcon, CheckCircleIcon, Loader2, WrenchIcon } from "lucide-react";
+import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { logNever } from "@/utils/assertNever";
+import { cn } from "@/utils/cn";
+import { formatToolName, type ToolApproval, type ToolState } from "./shared";
+import { ToolArgsRenderer } from "./tool-args";
+import { ResultRenderer } from "./tool-result";
+
+// States considered "inert" — they represent past or background work that the
+// user does not need to act on.
+export type HistoryState = Exclude<
+  ToolState,
+  "approval-requested" | "output-error"
+>;
+
+const STATUS_LABEL: Record<HistoryState, string> = {
+  "input-streaming": "Generating",
+  "input-available": "Running",
+  "approval-responded": "Awaiting result",
+  "output-available": "Done",
+  "output-denied": "Denied",
+};
+
+const StatusIcon: React.FC<{ state: HistoryState }> = ({ state }) => {
+  switch (state) {
+    case "input-streaming":
+    case "input-available":
+    case "approval-responded":
+      return <Loader2 className="h-3 w-3 animate-spin" />;
+    case "output-available":
+      return <CheckCircleIcon className="h-3 w-3 text-(--grass-11)" />;
+    case "output-denied":
+      return <BanIcon className="h-3 w-3 text-muted-foreground" />;
+    default:
+      logNever(state);
+      return <WrenchIcon className="h-3 w-3" />;
+  }
+};
+
+function getTriggerToneClass(state: HistoryState): string {
+  switch (state) {
+    case "output-available":
+      return "text-(--grass-11)/80";
+    case "output-denied":
+      return "text-muted-foreground";
+    case "input-streaming":
+    case "input-available":
+    case "approval-responded":
+      return "";
+    default:
+      logNever(state);
+      return "";
+  }
+}
+
+interface ToolHistoryRowProps {
+  toolName: string;
+  state: HistoryState;
+  input: unknown;
+  result?: unknown;
+  approval?: ToolApproval;
+  index?: number;
+  className?: string;
+}
+
+export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
+  toolName,
+  state,
+  input,
+  result,
+  approval,
+  index = 0,
+  className,
+}) => {
+  return (
+    <Accordion
+      key={`tool-${index}`}
+      type="single"
+      collapsible={true}
+      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/60 hover:bg-muted py-0 px-2 gap-1 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:no-underline",
+            getTriggerToneClass(state),
+          )}
+        >
+          <span className="flex items-center gap-1">
+            <StatusIcon state={state} />
+            {STATUS_LABEL[state]}:
+            <code className="font-mono text-xs">
+              {formatToolName(toolName)}
+            </code>
+          </span>
+        </AccordionTrigger>
+        <AccordionContent className="py-2 px-2">
+          <HistoryContent
+            state={state}
+            input={input}
+            result={result}
+            approval={approval}
+          />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+const HistoryContent: React.FC<{
+  state: HistoryState;
+  input: unknown;
+  result?: unknown;
+  approval?: ToolApproval;
+}> = ({ state, input, result, approval }) => {
+  switch (state) {
+    case "input-streaming":
+    case "input-available":
+    case "approval-responded":
+      return <ToolArgsRenderer input={input} />;
+
+    case "output-available":
+      return (
+        <div className="space-y-3">
+          <ToolArgsRenderer input={input} />
+          {result != null && <ResultRenderer result={result} />}
+        </div>
+      );
+
+    case "output-denied":
+      return (
+        <div className="space-y-3">
+          <ToolArgsRenderer input={input} />
+          <div className="bg-muted/40 border border-border rounded-md p-3 text-xs text-muted-foreground leading-relaxed">
+            Tool execution was denied
+            {approval?.reason ? `: ${approval.reason}` : "."}
+          </div>
+        </div>
+      );
+
+    default:
+      logNever(state);
+      return null;
+  }
+};

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

@@ -0,0 +1,101 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { isEmpty } from "lodash-es";
+import { InfoIcon } from "lucide-react";
+import React from "react";
+import { z } from "zod";
+
+// A value worth rendering: drop null/undefined and empty containers
+// (`{}`, `[]`), but keep meaningful primitives (`0`, `false`, `""`).
+function isUninformative(value: unknown): boolean {
+  if (value == null) {
+    return true;
+  }
+  if (typeof value === "object") {
+    return isEmpty(value);
+  }
+  return false;
+}
+
+// Zod schema matching the Python SuccessResult dataclass
+const SuccessResultSchema = z.looseObject({
+  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(),
+});
+
+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-(--grass-2) text-(--grass-11) rounded-full font-medium capitalize">
+            {status}
+          </span>
+          {auth_required && (
+            <span className="text-xs px-2 py-0.5 bg-(--amber-2) text-(--amber-11) rounded-full">
+              Auth Required
+            </span>
+          )}
+        </div>
+      </div>
+
+      {message && (
+        <div className="flex items-start gap-2">
+          <InfoIcon className="h-3 w-3 text-(--blue-11) mt-0.5 shrink-0" />
+          <div className="text-xs text-foreground">{message}</div>
+        </div>
+      )}
+
+      {rest && (
+        <div className="space-y-3">
+          {Object.entries(rest).map(([key, value]) => {
+            if (isUninformative(value)) {
+              return null;
+            }
+            return (
+              <div key={key} className="space-y-1.5">
+                <span className="text-xs text-muted-foreground">{key}</span>
+                <pre className="bg-(--slate-2) p-2 text-muted-foreground border border-(--slate-4) rounded text-xs overflow-auto scrollbar-thin max-h-64">
+                  {JSON.stringify(value, null, 2)}
+                </pre>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ResultRenderer: React.FC<{ result: unknown }> = ({ result }) => {
+  const parseResult = SuccessResultSchema.safeParse(result);
+
+  if (parseResult.success) {
+    return <PrettySuccessResult data={parseResult.data} />;
+  }
+
+  return (
+    <div className="text-xs font-medium text-muted-foreground mb-1 max-h-64 overflow-y-auto scrollbar-thin">
+      {typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+    </div>
+  );
+};

package/src/components/data-table/__tests__/column-header.test.ts

@@ -49,7 +49,9 @@ describe("seedFromFilter", () => {
       values: [],
       operator: "in",
     });
-    expect(seedFromFilter(Filter.number({ min: 0, max: 10 }))).toEqual({
+    expect(
+      seedFromFilter(Filter.number({ operator: "between", min: 0, max: 10 })),
+    ).toEqual({
       values: [],
       operator: "in",
     });

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

@@ -0,0 +1,308 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Column } from "@tanstack/react-table";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  DateFilterMenu,
+  NumberFilterMenu,
+  TextFilterMenu,
+} from "../column-header";
+import { Filter } from "../filters";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; Radix calls it on open.
+  };
+  // Radix Select gates pointer interactions on hasPointerCapture; jsdom omits it.
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+  if (!global.HTMLElement.prototype.releasePointerCapture) {
+    global.HTMLElement.prototype.releasePointerCapture = () => {
+      // no-op
+    };
+  }
+});
+
+function mockColumn(initial?: ReturnType<typeof Filter.number>): Column<
+  unknown,
+  unknown
+> & {
+  setFilterValue: ReturnType<typeof vi.fn>;
+} {
+  let filterValue = initial;
+  const setFilterValue = vi.fn((next) => {
+    filterValue = next;
+  });
+  return {
+    id: "age",
+    columnDef: { meta: { dataType: "number", filterType: "number" } },
+    getFilterValue: () => filterValue,
+    setFilterValue,
+  } as unknown as Column<unknown, unknown> & {
+    setFilterValue: ReturnType<typeof vi.fn>;
+  };
+}
+
+describe("NumberFilterMenu", () => {
+  it("shows all expected operators in the dropdown", () => {
+    const column = mockColumn();
+    render(<NumberFilterMenu column={column} />);
+    const trigger = screen.getByRole("combobox");
+    fireEvent.click(trigger);
+    const listbox = screen.getByRole("listbox");
+    const labels = within(listbox)
+      .getAllByRole("option")
+      .map((o) => o.textContent);
+    expect(labels).toEqual([
+      "Between",
+      "Equals",
+      "Doesn't equal",
+      "Greater than",
+      "Greater than or equal",
+      "Less than",
+      "Less than or equal",
+      "Is null",
+      "Is not null",
+    ]);
+  });
+
+  it("between mode disables Apply until both min and max are defined", () => {
+    const column = mockColumn();
+    render(<NumberFilterMenu column={column} />);
+    const apply = screen.getByRole("button", { name: /apply/i });
+    expect(apply).toBeDisabled();
+
+    const min = screen.getByLabelText("min");
+    fireEvent.change(min, { target: { value: "1" } });
+    fireEvent.blur(min);
+    expect(apply).toBeDisabled();
+
+    const max = screen.getByLabelText("max");
+    fireEvent.change(max, { target: { value: "10" } });
+    fireEvent.blur(max);
+    expect(apply).not.toBeDisabled();
+  });
+
+  it("comparison mode shows a single value field seeded from current filter", () => {
+    const column = mockColumn(Filter.number({ operator: ">", value: 18 }));
+    render(<NumberFilterMenu column={column} />);
+    const value = screen.getByLabelText("value") as HTMLInputElement;
+    expect(value).toBeInTheDocument();
+    expect(value.value).toBe("18");
+    expect(screen.queryByLabelText("min")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("max")).not.toBeInTheDocument();
+  });
+
+  it("selecting a nullish operator hides value inputs and commits on Apply", () => {
+    const column = mockColumn();
+    render(<NumberFilterMenu column={column} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    const listbox = screen.getByRole("listbox");
+    fireEvent.click(within(listbox).getByText("Is null"));
+    expect(column.setFilterValue).not.toHaveBeenCalled();
+    expect(screen.queryByLabelText("min")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("max")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("value")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /apply/i }));
+    expect(column.setFilterValue).toHaveBeenCalledWith(
+      Filter.number({ operator: "is_null" }),
+    );
+  });
+});
+
+function mockTextColumn(initial?: ReturnType<typeof Filter.text>): Column<
+  unknown,
+  unknown
+> & {
+  setFilterValue: ReturnType<typeof vi.fn>;
+} {
+  let filterValue = initial;
+  const setFilterValue = vi.fn((next) => {
+    filterValue = next;
+  });
+  return {
+    id: "name",
+    columnDef: { meta: { dataType: "string", filterType: "text" } },
+    getFilterValue: () => filterValue,
+    setFilterValue,
+  } as unknown as Column<unknown, unknown> & {
+    setFilterValue: ReturnType<typeof vi.fn>;
+  };
+}
+
+describe("TextFilterMenu", () => {
+  it("shows all 11 text operators in the dropdown", () => {
+    const column = mockTextColumn();
+    render(<TextFilterMenu column={column} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    const listbox = screen.getByRole("listbox");
+    const labels = within(listbox)
+      .getAllByRole("option")
+      .map((o) => o.textContent);
+    expect(labels).toEqual([
+      "Contains",
+      "Equals",
+      "Doesn't equal",
+      "Matches regex",
+      "Starts with",
+      "Ends with",
+      "Is in",
+      "Not in",
+      "Is empty",
+      "Is null",
+      "Is not null",
+    ]);
+  });
+
+  it("single-string operator renders a text input seeded from current filter", () => {
+    const column = mockTextColumn(
+      Filter.text({ operator: "equals", text: "alice" }),
+    );
+    render(<TextFilterMenu column={column} />);
+    const input = screen.getByPlaceholderText("Text...") as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    expect(input.value).toBe("alice");
+  });
+
+  it("'in' operator renders the creatable values picker", async () => {
+    const column = mockTextColumn(
+      Filter.text({ operator: "in", values: ["a", "b"] }),
+    );
+    const calculateTopKRows = vi.fn(async () => ({
+      data: [["a", 1] as [unknown, number]],
+    }));
+    render(
+      <TextFilterMenu column={column} calculateTopKRows={calculateTopKRows} />,
+    );
+    expect(
+      await screen.findByPlaceholderText(/Search or add a value/i),
+    ).toBeInTheDocument();
+    expect(screen.queryByPlaceholderText("Text...")).not.toBeInTheDocument();
+  });
+
+  it("selecting is_empty hides the value UI and commits on Apply", () => {
+    const column = mockTextColumn();
+    render(<TextFilterMenu column={column} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    const listbox = screen.getByRole("listbox");
+    fireEvent.click(within(listbox).getByText("Is empty"));
+    expect(column.setFilterValue).not.toHaveBeenCalled();
+    expect(screen.queryByPlaceholderText("Text...")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /apply/i }));
+    expect(column.setFilterValue).toHaveBeenCalledWith(
+      Filter.text({ operator: "is_empty" }),
+    );
+  });
+
+  it("apply is disabled when scalar text is empty", () => {
+    const column = mockTextColumn();
+    render(<TextFilterMenu column={column} />);
+    expect(screen.getByRole("button", { name: /apply/i })).toBeDisabled();
+    fireEvent.change(screen.getByPlaceholderText("Text..."), {
+      target: { value: "x" },
+    });
+    expect(screen.getByRole("button", { name: /apply/i })).not.toBeDisabled();
+  });
+});
+
+type DateFilterValue = ReturnType<typeof Filter.date>;
+
+function mockDateColumn(
+  filterType: "date" | "datetime" | "time" = "date",
+  initial?: DateFilterValue,
+): Column<unknown, unknown> & {
+  setFilterValue: ReturnType<typeof vi.fn>;
+} {
+  let filterValue = initial;
+  const setFilterValue = vi.fn((next) => {
+    filterValue = next;
+  });
+  return {
+    id: "when",
+    columnDef: { meta: { dataType: filterType, filterType } },
+    getFilterValue: () => filterValue,
+    setFilterValue,
+  } as unknown as Column<unknown, unknown> & {
+    setFilterValue: ReturnType<typeof vi.fn>;
+  };
+}
+
+describe("DateFilterMenu", () => {
+  it("shows all expected operators in the dropdown", () => {
+    const column = mockDateColumn("date");
+    render(<DateFilterMenu column={column} filterType="date" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    const listbox = screen.getByRole("listbox");
+    const labels = within(listbox)
+      .getAllByRole("option")
+      .map((o) => o.textContent);
+    expect(labels).toEqual([
+      "Between",
+      "Equals",
+      "Doesn't equal",
+      "Greater than",
+      "Greater than or equal",
+      "Less than",
+      "Less than or equal",
+      "Is null",
+      "Is not null",
+    ]);
+  });
+
+  it("defaults to between mode and disables Apply until both bounds set", () => {
+    const column = mockDateColumn("date");
+    render(<DateFilterMenu column={column} filterType="date" />);
+    expect(screen.getByLabelText("range")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /apply/i })).toBeDisabled();
+    expect(screen.queryByLabelText("value")).not.toBeInTheDocument();
+  });
+
+  it("seeds between min/max from current filter", () => {
+    const column = mockDateColumn(
+      "date",
+      Filter.date({
+        operator: "between",
+        min: new Date("2024-01-01T00:00:00Z"),
+        max: new Date("2024-06-01T00:00:00Z"),
+      }),
+    );
+    render(<DateFilterMenu column={column} filterType="date" />);
+    expect(screen.getByLabelText("range")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /apply/i })).not.toBeDisabled();
+  });
+
+  it("comparison operator swaps range for a single value picker", () => {
+    const column = mockDateColumn(
+      "date",
+      Filter.date({
+        operator: ">",
+        value: new Date("2024-01-01T00:00:00Z"),
+      }),
+    );
+    render(<DateFilterMenu column={column} filterType="date" />);
+    expect(screen.getByLabelText("value")).toBeInTheDocument();
+    expect(screen.queryByLabelText("range")).not.toBeInTheDocument();
+  });
+
+  it("time filter type renders two TimeFields for between", () => {
+    const column = mockDateColumn("time");
+    render(<DateFilterMenu column={column} filterType="time" />);
+    expect(screen.getByLabelText("min")).toBeInTheDocument();
+    expect(screen.getByLabelText("max")).toBeInTheDocument();
+  });
+
+  it("selecting a nullish operator hides value inputs and commits on Apply", () => {
+    const column = mockDateColumn("date");
+    render(<DateFilterMenu column={column} filterType="date" />);
+    fireEvent.click(screen.getByRole("combobox"));
+    const listbox = screen.getByRole("listbox");
+    fireEvent.click(within(listbox).getByText("Is null"));
+    expect(screen.queryByLabelText("range")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("value")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: /apply/i }));
+    expect(column.setFilterValue).toHaveBeenCalledWith(
+      Filter.date({ operator: "is_null" }),
+    );
+  });
+});

package/src/components/data-table/__tests__/filter-by-values-picker.test.tsx

@@ -0,0 +1,112 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Column } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { FilterByValuesList } from "../filter-by-values-picker";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; cmdk calls it on selection.
+  };
+});
+
+function mockColumn(): Column<unknown, unknown> {
+  return {
+    id: "name",
+    columnDef: { meta: { dataType: "string" } },
+  } as unknown as Column<unknown, unknown>;
+}
+
+async function calculateTopK() {
+  return {
+    data: [
+      ["alice", 3],
+      ["bob", 1],
+    ] as Array<[string, number]>,
+  };
+}
+
+describe("FilterByValuesList — creatable", () => {
+  it("shows '+ Add \"X\"' item when creatable and query is non-empty", async () => {
+    const onChange = vi.fn();
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set()}
+        onChange={onChange}
+        creatable={true}
+      />,
+    );
+    await screen.findByText("alice");
+    const input = screen.getByPlaceholderText(/Search or add/i);
+    fireEvent.change(input, { target: { value: "carol" } });
+    expect(await screen.findByText(/\+ Add "carol"/)).toBeInTheDocument();
+  });
+
+  it("commits the literal when '+ Add' is selected", async () => {
+    const onChange = vi.fn();
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set()}
+        onChange={onChange}
+        creatable={true}
+      />,
+    );
+    await screen.findByText("alice");
+    const input = screen.getByPlaceholderText(/Search or add/i);
+    fireEvent.change(input, { target: { value: "carol" } });
+    fireEvent.click(await screen.findByText(/\+ Add "carol"/));
+    expect(onChange).toHaveBeenCalledWith(["carol"]);
+  });
+
+  it("Enter key in creatable mode commits the query as a value", async () => {
+    const onChange = vi.fn();
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set()}
+        onChange={onChange}
+        creatable={true}
+      />,
+    );
+    await screen.findByText("alice");
+    const input = screen.getByPlaceholderText(/Search or add/i);
+    fireEvent.change(input, { target: { value: "dave" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(onChange).toHaveBeenCalledWith(["dave"]);
+  });
+
+  it("does NOT show '+ Add' when creatable is false", async () => {
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set()}
+        onChange={vi.fn()}
+        creatable={false}
+      />,
+    );
+    await screen.findByText("alice");
+    const input = screen.getByPlaceholderText(/Search among/i);
+    fireEvent.change(input, { target: { value: "carol" } });
+    expect(screen.queryByText(/\+ Add/)).not.toBeInTheDocument();
+  });
+
+  it("renders chosen values that are not in top-K with — count", async () => {
+    render(
+      <FilterByValuesList
+        column={mockColumn()}
+        calculateTopKRows={calculateTopK}
+        chosenValues={new Set(["zara"])}
+        onChange={vi.fn()}
+      />,
+    );
+    await screen.findByText("alice");
+    expect(screen.getByText("zara")).toBeInTheDocument();
+    expect(screen.getByText("—")).toBeInTheDocument();
+  });
+});