Filter ToolbarFilter Toolbar

"use client";

import * as React from "react";
import { FilterToolbar, type FilterField, type FilterValue } from "@/components/ui/notchset/filter-toolbar";

type Run = { id: string; agent: string; status: string };
const all: Run[] = [
  { id: "run_1", agent: "Planner", status: "ok" },
  { id: "run_2", agent: "Triage", status: "fail" },
  { id: "run_3", agent: "Planner", status: "fail" },
];
const fields: FilterField[] = [
  { key: "agent", label: "AGENT", options: ["Planner", "Triage"] },
  { key: "status", label: "STATUS", options: ["ok", "fail"] },
];

export function RunFilters() {
  const [filters, setFilters] = React.useState<FilterValue>({});
  const rows = all.filter((r) => Object.entries(filters).every(([k, vs]) => !vs.length || vs.includes(String(r[k as keyof Run]))));
  return <FilterToolbar fields={fields} value={filters} onValueChange={setFilters} count={rows.length} total={all.length} unit="RUNS" />;
}