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 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 get_guidelines 648 15 $0.0001 1 list_tokens, list_components, list_files 3 54 $0.0003 2 read_file 3 19 $0.0002 3
Output cap The provider's default 4 CardBody,
5 CardDescription,
6 CardHeader,
7 CardTitle,
8 Table,
9 TableBody,
10 TableCell,
11 TableHead,
12 TableHeader,
13 TableRow,
14 } from "@vektos/ds";
15 import { css } from "styled-system/css";
16 import data from "./fixture.json";
17
18 const currencyFormatter = new Intl.NumberFormat("it-IT", {
19 style: "currency",
20 currency: data.account.currency,
21 });
22
23 const dateFormatter = new Intl.DateTimeFormat("en-GB", {
24 day: "2-digit",
25 month: "short",
26 year: "numeric",
27 timeZone: "UTC",
28 });
29
30 function formatDate(value: string) {
31 return dateFormatter.format(new Date(`${value}T00:00:00Z`));
32 }
33
34 export default function Page() {
35 return (
36 <main
37 className={`vektos ${css({
38 minHeight: "full",
39 bg: "bg.canvas",
40 color: "fg.default",
41 px: "4",
42 py: "8",
43 })}`}
44 >
45 <div className={css({ width: "full", maxWidth: "full", marginInline: "auto" })}>
46 <header className={css({ marginBlockEnd: "6" })}>
47 <p
48 className={css({
49 color: "accent.default",
50 fontSize: "sm",
51 fontWeight: "semibold",
52 marginBlockEnd: "2",
53 })}
54 >
55 CURRENT ACCOUNT · STATEMENT
56 </p>
57 <h1 className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
58 October statement
59 </h1>
60 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockStart: "2" })}>
61 {formatDate(data.account.period.from)} – {formatDate(data.account.period.to)}
62 </p>
63 </header>
64
65 <Card>
66 <CardBody>
67 <div
68 className={css({
69 display: "flex",
70 flexWrap: "wrap",
71 alignItems: "center",
72 justifyContent: "space-between",
73 gap: "6",
74 })}
75 >
76 <div>
77 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockEnd: "1" })}>
78 Account holder
79 </p>
80 <p className={css({ fontSize: "lg", fontWeight: "semibold" })}>
81 {data.account.holder}
82 </p>
83 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockStart: "2" })}>
84 IBAN · {data.account.iban}
85 </p>
86 </div>
87 <div className={css({ textAlign: "right" })}>
88 <p className={css({ color: "fg.muted", fontSize: "sm", marginBlockEnd: "1" })}>
89 Current balance
90 </p>
91 <p className={css({ fontSize: "lg", fontWeight: "semibold", lineHeight: "tight" })}>
92 {currencyFormatter.format(data.account.balance)}
93 </p>
94 <p className={css({ color: "fg.muted", fontSize: "xs", marginBlockStart: "2" })}>
95 {data.account.currency}
96 </p>
97 </div>
98 </div>
99 </CardBody>
100 </Card>
101
102 <section className={css({ marginBlockStart: "8" })} aria-labelledby="transactions-heading">
103 <Card>
104 <CardHeader>
105 <CardTitle asChild>
106 <h2 id="transactions-heading">Transactions</h2>
107 </CardTitle>
108 <CardDescription>{data.transactions.length} transactions this period</CardDescription>
109 </CardHeader>
110 <div className={css({ overflowX: "auto", width: "full" })}>
111 <Table aria-label="October account transactions">
112 <TableHead>
113 <TableRow>
114 <TableHeader>Date</TableHeader>
115 <TableHeader>Description</TableHeader>
116 <TableHeader>Category</TableHeader>
117 <TableHeader>Status</TableHeader>
118 <TableHeader numeric>Amount ({data.account.currency})</TableHeader>
119 </TableRow>
120 </TableHead>
121 <TableBody>
122 {data.transactions.map((transaction) => (
123 <TableRow key={transaction.id}>
124 <TableCell>
125 <time dateTime={transaction.date}>{formatDate(transaction.date)}</time>
126 </TableCell>
127 <TableCell>{transaction.description}</TableCell>
128 <TableCell>{transaction.category}</TableCell>
129 <TableCell>
130 {transaction.status === "pending" ? (
131 <Badge tone="warning">Pending</Badge>
132 ) : (
133 <span className={css({ color: "fg.muted", fontSize: "sm" })}>Booked</span>
134 )}
135 </TableCell>
136 <TableCell numeric>{currencyFormatter.format(transaction.amount)}</TableCell>
137 </TableRow>
138 ))}
139 </TableBody>
140 </Table>
141 </div>
142 </Card>
143 </section>
144 </div>
145 </main>
146 );
147 }
148
get_component, get_component, get_component