Runs / transactions Batch Runs from different design-system versions should not be compared.
The page A screenshot in each theme, as the benchmark took it.
page.tsx As the agent left it; marked lines broke a rule.
Violations 7 counted, under 6 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
Steps One row per model call, with the tools it asked for. An agent that reads the guidelines before writing shows it here; what a checker or submit_view answered is under its call.
Step Tools Tokens in Tokens out Cost 0 read_file 1,345 40 $0.0000 1 list_components 3,427 30 $0.0000 2 get_component 5,906 291 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 import {
7 SegmentGroup,
8 Table,
9 TableHead,
10 TableBody,
11 TableRow,
12 TableHeader,
13 TableCell,
14 Pagination,
15 FormatNumber,
16 Badge,
17 Stack,
18 Text,
19 } from "@vektos/ds";
20
21 export default function TransactionsPage() {
22 const [view, setView] = useState<"all" | "in" | "out">("all");
23 const [page, setPage] = useState(1);
24
25 useEffect(() => {
26 // when the view changes, go back to the first page
27 setPage(1);
28 }, [view]);
29
30 const pageSize = data.pageSize; // 10
31
32 // Filter transactions based on the selected view
33 const filtered = useMemo(() => {
34 const arr = [...data.transactions];
35 // The fixture is already sorted newest‑first, so we only filter
36 if (view === "in") {
37 return arr.filter((t) => t.amount > 0);
38 }
39 if (view === "out") {
40 return arr.filter((t) => t.amount < 0);
41 }
42 return arr;
43 }, [view]);
44
45 // Total pages, at least 1
46 const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
47
48 // Update page when the user clicks a pagination control
49 const handlePageChange = (newPage: number) => {
50 // Keep page within valid range
51 const clamped = Math.max(1, Math.min(newPage, totalPages));
52 setPage(clamped);
53 };
54
55 // Slice the transactions for the current page
56 const start = (page - 1) * pageSize;
57 const end = start + pageSize;
58 const pageTransactions = filtered.slice(start, end);
59
60 // Render a FormatNumber component for the amount column
61 const formatAmount = (amount: number) =>
62 <FormatNumber
63 value={amount}
64 format="currency"
65 currency="EUR"
66 signDisplay="exceptZero"
67 />;
68
69 return (
70 <Stack gap={4} maxWidth="600px" margin="auto">
71 {/* Filter segment group: All / Money in / Money out */}
72 <SegmentGroup
73 aria-label="Transaction view"
74 defaultValue="all"
75 options={[
76 { label: "All", value: "all" },
77 { label: "Money in", value: "in" },
78 { label: "Money out", value: "out" },
79 ]}
80 onValueChange={(value) => {
81 // value is "all" | "in" | "out"
82 setView(value as "all" | "in" | "out");
83 // reset page when the view changes (handled also by useEffect)
84 }}
85 size="sm"
86 />
87
88 <Table aria-label="Transactions">
89 <TableHead>
90 <TableRow>
91 <TableHeader>Date</TableHeader>
92 <TableHeader>Description</TableHeader>
93 <TableHeader numeric>Amount</TableHeader>
94 <TableHeader>Status</TableHeader>
95 </TableRow>
96 </TableHead>
97 <TableBody>
98 {pageTransactions.map((tx) => (
99 <TableRow key={tx.id}>
100 <TableCell>
101 <Text>{tx.date}</Text>
102 </TableCell>
103 <TableCell>{tx.description}</TableCell>
104 <TableCell numeric>
105 {formatAmount(tx.amount)}
106 </TableCell>
107 <TableCell>
108 <Badge
109 tone={
110 tx.status === "pending" ? "warning" : "neutral"
111 }
112 >
113 {tx.status}
114 </Badge>
115 </TableCell>
116 </TableRow>
117 ))}
118 </TableBody>
119 </Table>
120
121 {/* Pagination controls */}
122 <Pagination
123 page={page}
124 count={totalPages}
125 onPageChange={handlePageChange}
126 aria-label="Transaction pages"
127 />
128 </Stack>
129 );
130 }
raw-values/raw-length 1 design-system 4 get_component 1,784 30 $0.0000
5 get_component 2,428 30 $0.0000
6 get_component 980 314 $0.0000
7 get_component 2,394 1,118 $0.0000
8 write_file 4,387 1,179 $0.0000