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 None. The run followed every rule that was checked.
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,362 40 $0.0000 1 list_components 3,444 112 $0.0000 2 get_component 3,909 438 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 import {
7 SegmentGroup,
8 Stack,
9 Table,
10 TableHead,
11 TableBody,
12 TableRow,
13 TableHeader,
14 TableCell,
15 Badge,
16 FormatNumber,
17 FormatDate,
18 LocaleProvider,
19 Pagination,
20 } from "@vektos/ds";
21
22 export default function Page() {
23 const [view, setView] = useState<string>("all");
24 const [page, setPage] = useState(1);
25
26 const pageSize = data.pageSize; // 10
27
28 // Filter transactions based on the selected view
29 let filtered = data.transactions;
30 if (view === "in") {
31 filtered = filtered.filter((t) => t.amount > 0);
32 } else if (view === "out") {
33 filtered = filtered.filter((t) => t.amount < 0);
34 }
35
36 const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
37 // Keep page in bounds; if the view change resets page, this guards against out-of-range
38 if (page > totalPages) setPage(totalPages);
39
40 const pageTransactions = filtered.slice((page - 1) * pageSize, page * pageSize);
41
42 return (
43 <LocaleProvider locale="en-IE">
44 <Stack gap="4">
45 {/* View filter: All / Money in / Money out */}
46 <SegmentGroup
47 aria-label="View"
48 defaultValue="all"
49 onValueChange={(val: string) => setView(val)}
50 options={[
51 { label: "All", value: "all" },
52 { label: "Money in", value: "in" },
53 { label: "Money out", value: "out" },
54 ]}
55 />
56
57 <Stack gap="3">
58 <Table aria-label="Transactions">
59 <TableHead>
60 <TableRow>
61 <TableHeader>Date</TableHeader>
62 <TableHeader>Description</TableHeader>
63 <TableHeader numeric>Amount (EUR)</TableHeader>
64 <TableHeader>Status</TableHeader>
65 </TableRow>
66 </TableHead>
67 <TableBody>
68 {pageTransactions.map((tx) => (
69 <TableRow key={tx.id}>
70 <TableCell>
71 <FormatDate value={tx.date} dateStyle="medium" />
72 </TableCell>
73 <TableCell>{tx.description}</TableCell>
74 <TableCell numeric>
75 <FormatNumber
76 value={tx.amount}
77 format="currency"
78 currency="EUR"
79 signDisplay="exceptZero"
80 />
81 </TableCell>
82 <TableCell>
83 <Badge tone={tx.status === "pending" ? "warning" : "neutral"}>
84 {tx.status}
85 </Badge>
86 </TableCell>
87 </TableRow>
88 ))}
89 </TableBody>
90 </Table>
91 </Stack>
92
93 {/* Pagination controls */}
94 <Pagination
95 page={page}
96 count={totalPages}
97 onPageChange={(newPage: number) => setPage(newPage)}
98 />
99 </Stack>
100 </LocaleProvider>
101 );
102 }
4 get_component 1,867 30 $0.0000
5 get_component 2,511 32 $0.0000
6 get_component 1,228 30 $0.0000
7 write_file 2,358 2,035 $0.0000
8 check_code 2,324 748 $0.0000
9 read_file 1,912 152 $0.0000
10 check_code 2,781 744 $0.0000
11 write_file 1,687 1,460 $0.0000
12 check_code 1,078 724 $0.0000
13 get_component 1,889 291 $0.0000
14 write_file 1,085 802 $0.0000
15 check_code 1,914 724 $0.0000