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 1 counted, under 1 rule. “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 list_files 142 30 $0.0000 1 read_file, list_files 186 47 $0.0000 2 list_files 2,151 53 $0.0000 3
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Badge,
7 Card,
8 CardHeader,
9 CardTitle,
10 FormatDate,
11 FormatNumber,
12 Heading,
13 Pagination,
14 SegmentGroup,
15 Stack,
16 Table,
17 TableBody,
18 TableCell,
19 TableHead,
20 TableHeader,
21 TableRow,
22 Text,
23 } from "@vektos/ds";
24
25 type Transaction = (typeof data.transactions)[number];
26
27 const views = [
28 { label: "All", value: "all" },
29 { label: "Money in", value: "in" },
30 { label: "Money out", value: "out" },
31 ];
32
33 export default function Page() {
34 const [view, setView] = useState("all");
35 const [page, setPage] = useState(1);
36
37 const pageSize = data.pageSize ?? 10;
38
39 const sorted = useMemo(
40 () => [...data.transactions].sort((a, b) => b.date.localeCompare(a.date)),
41 [],
42 );
43
44 const filtered = useMemo(() => {
45 if (view === "in") return sorted.filter((tx) => tx.amount > 0);
46 if (view === "out") return sorted.filter((tx) => tx.amount < 0);
47 return sorted;
48 }, [view, sorted]);
49
50 const pages = Math.max(1, Math.ceil(filtered.length / pageSize));
51 const currentPage = Math.min(page, pages);
52 const start = (currentPage - 1) * pageSize;
53 const pageItems = filtered.slice(start, start + pageSize);
54
55 const handleViewChange = (value: string) => {
56 setView(value);
57 setPage(1);
58 };
59
60 return (
61 <Stack gap="4">
62 <Heading level={1}>{data.account.name}</Heading>
63 <Text tone="muted" size="sm">{data.account.holder}</Text>
64
65 <SegmentGroup
66 aria-label="Transaction view"
67 value={view}
68 onValueChange={handleViewChange}
69 options={views}
70 />
71
72 <Card>
73 <CardHeader>
74 <CardTitle>Transactions</CardTitle>
75 </CardHeader>
76 <Table aria-label="Transactions">
77 <TableHead>
78 <TableRow>
79 <TableHeader>Date</TableHeader>
80 <TableHeader>Description</TableHeader>
81 <TableHeader>Status</TableHeader>
82 <TableHeader numeric>Amount ({data.account.currency})</TableHeader>
83 </TableRow>
84 </TableHead>
85 <TableBody>
86 {pageItems.map((tx: Transaction) => (
87 <TableRow key={tx.id}>
88 <TableCell>
89 <FormatDate value={tx.date} dateStyle="medium" />
90 </TableCell>
91 <TableCell>{tx.description}</TableCell>
92 <TableCell>
93 {tx.status === "pending" ? (
94 <Badge tone="warning">Pending</Badge>
95 ) : (
96 <Badge tone="neutral">Booked</Badge>
97 )}
98 </TableCell>
99 <TableCell numeric>
100 <FormatNumber
101 value={tx.amount}
102 format="currency"
103 currency={data.account.currency}
104 signDisplay="exceptZero"
105 />
106 </TableCell>
107 </TableRow>
108 ))}
109 </TableBody>
110 </Table>
111 </Card>
112
113 <Pagination
114 page={currentPage}
115 count={pages}
116 onPageChange={setPage}
117 aria-label="Transaction pages"
118 />
119 </Stack>
120 );
121 }
4 docs-show, docs-show, docs-show, docs-show, docs-show 3,004 134 $0.0000
5 read_file, read_file 9,300 87 $0.0000
6 docs-show, docs-show, docs-show 148 187 $0.0000
7 docs-show, docs-show 3,030 185 $0.0000
8 write_file 960 3,870 $0.0000
9 read_file 12,086 347 $0.0000
10 stories-find-by-component 430 365 $0.0000
11 stories-find-by-component 452 128 $0.0000