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 2 counted, under 2 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 get_guidelines, list_components, list_files 121 74 $0.0000 1 read_file, list_tokens 5,619 47 $0.0000 2 get_component, get_component, get_component, get_component 8,107 263 $0.0000
Output cap The provider's default 4 import data from "./fixture.json";
5 import {
6 Badge,
7 Card,
8 CardHeader,
9 CardTitle,
10 EmptyState,
11 FormatDate,
12 FormatNumber,
13 Heading,
14 Pagination,
15 SegmentGroup,
16 Stack,
17 Table,
18 TableBody,
19 TableCell,
20 TableHead,
21 TableHeader,
22 TableRow,
23 Text,
24 } from "@vektos/ds";
25
26 type Transaction = (typeof data.transactions)[number];
27
28 const pageSize = data.pageSize;
29
30 export default function TransactionsPage() {
31 const [view, setView] = useState<"all" | "in" | "out">("all");
32 const [page, setPage] = useState(1);
33
34 const sorted = useMemo(
35 () => [...data.transactions].sort((a, b) => b.date.localeCompare(a.date)),
36 [],
37 );
38
39 const filtered = useMemo(() => {
40 if (view === "in") return sorted.filter((t) => t.amount > 0);
41 if (view === "out") return sorted.filter((t) => t.amount < 0);
42 return sorted;
43 }, [view, sorted]);
44
45 const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
46 const safePage = Math.min(page, pageCount);
47 const pageItems = filtered.slice(
48 (safePage - 1) * pageSize,
49 safePage * pageSize,
50 );
51
52 return (
53 <div className="vektos">
54 <Stack gap="6" margin="6">
55 <Stack gap="1">
56 <Heading level={1}>{data.account.name}</Heading>
57 <Text tone="muted" size="sm">
58 {data.account.holder}
59 </Text>
60 </Stack>
61
62 <SegmentGroup
63 aria-label="Transaction view"
64 value={view}
65 onValueChange={(value) => {
66 setView(value as "all" | "in" | "out");
67 setPage(1);
68 }}
69 options={[
70 { label: "All", value: "all" },
71 { label: "Money in", value: "in" },
72 { label: "Money out", value: "out" },
73 ]}
74 />
75
76 {pageItems.length === 0 ? (
77 <EmptyState
78 title="No transactions"
79 description="Nothing to show in this view."
80 />
81 ) : (
82 <Card>
83 <CardHeader>
84 <CardTitle>Transactions</CardTitle>
85 </CardHeader>
86 <Table aria-label="Transactions">
87 <TableHead>
88 <TableRow>
89 <TableHeader>Date</TableHeader>
90 <TableHeader>Description</TableHeader>
91 <TableHeader numeric>Amount ({data.account.currency})</TableHeader>
92 <TableHeader>Status</TableHeader>
93 </TableRow>
94 </TableHead>
95 <TableBody>
96 {pageItems.map((tx: Transaction) => (
97 <TableRow key={tx.id}>
98 <TableCell>
99 <FormatDate value={tx.date} dateStyle="medium" />
100 </TableCell>
101 <TableCell>{tx.description}</TableCell>
102 <TableCell numeric>
103 <FormatNumber
104 value={tx.amount}
105 format="currency"
106 currency={data.account.currency}
107 signDisplay="exceptZero"
108 />
109 </TableCell>
110 <TableCell>
111 <Badge tone={tx.status === "pending" ? "warning" : "success"}>
112 {tx.status === "pending" ? "Pending" : "Booked"}
113 </Badge>
114 </TableCell>
115 </TableRow>
116 ))}
117 </TableBody>
118 </Table>
119 </Card>
120 )}
121
122 {pageCount > 1 && (
123 <Pagination
124 page={safePage}
125 count={pageCount}
126 onPageChange={setPage}
127 />
128 )}
129 </Stack>
130 </div>
131 );
132 }
133
get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 write_file 14,027 3,605 $0.0000