Runs / statement 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 read_file 1,721 40 $0.0000 1 docs-list 2,599 170 $0.0000 2 docs-show 4,177 77 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 import data from "./fixture.json";
5
6 import {
7 FormatDate,
8 FormatNumber,
9 Table,
10 TableBody,
11 TableCell,
12 TableHeader,
13 TableHead,
14 TableRow,
15 Badge,
16 } from "@vektos/ds";
17
18 import { type ReactNode } from "react";
19
20 export default function OctoberStatement() {
21 const { account, transactions } = data;
22
23 return (
24 <>
25 {/* Account header */}
26 <div className="max-w-2xl mx-auto p-4">
27 <h1 className="text-2xl font-bold mb-2">
28 {account.holder} – Current account
29 </h1>
30 <p className="text-sm text-muted-foreground mb-1">
31 IBAN:{' '}
32 <code className="font-mono break-all">
33 {account.iban}
34 </code>
35 </p>
36 <FormatNumber
37 value={account.balance}
38 format="currency"
39 currency={account.currency}
40 signDisplay="exceptZero"
41 />
42 <p className="text-xs text-muted-foreground mt-1">
43 Period:{' '}
44 {new Date(account.period.from).toLocaleDateString()} –{" "}
45 {new Date(account.period.to).toLocaleDateString()}
46 </p>
47 </div>
48
49 {/* Transactions table */}
50 <div className="mt-6 max-w-2xl mx-auto">
51 <Table aria-label="Transactions">
52 <TableHead>
53 <TableRow>
54 <TableHeader>Date</TableHeader>
55 <TableHeader>Description</TableHeader>
56 <TableHeader>Category</TableHeader>
57 <TableHeader numeric>Amount</TableHeader>
58 <TableHeader>Status</TableHeader>
59 </TableRow>
60 </TableHead>
61 <TableBody>
62 {transactions.map((tx) => (
63 <TableRow key={tx.id}>
64 <TableCell>
65 <FormatDate value={tx.date} dateStyle="short" />
66 </TableCell>
67 <TableCell>{tx.description}</TableCell>
68 <TableCell>
69 {tx.category}
70 </TableCell>
71 <TableCell numeric>
72 <FormatNumber
73 value={tx.amount}
74 format="currency"
75 currency={account.currency}
76 signDisplay="exceptZero"
77 />
78 </TableCell>
79 <TableCell>
80 <Badge tone={tx.status === "pending" ? "warning" : "success"}>
81 {tx.status}
82 </Badge>
83 </TableCell>
84 </TableRow>
85 ))}
86 </TableBody>
87 </Table>
88 </div>
89 </>
90 );
91 }
4 docs-show 1,671 109 $0.0000
5 write_file 2,917 852 $0.0000