Runs / loan-contract 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 4 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, get_guidelines, list_components 181 55 $0.0000 1 read_file, list_tokens 5,020 49 $0.0000 2 list_tokens, list_tokens, list_tokens, list_tokens, list_tokens, list_tokens, list_tokens, list_tokens 1,818 154 $0.0000
Output cap The provider's default 4 Card,
5 CardBody,
6 CardDescription,
7 CardHeader,
8 CardTitle,
9 DataList,
10 FormatDate,
11 FormatNumber,
12 Heading,
13 Stack,
14 Table,
15 TableBody,
16 TableCell,
17 TableHead,
18 TableHeader,
19 TableRow,
20 Text,
21 } from "@vektos/ds";
22 import { css } from "styled-system/css";
23
24 const statusTone = {
25 active: "success",
26 paid: "success",
27 due: "warning",
28 upcoming: "neutral",
29 } as const;
30
31 const statusLabel = {
32 active: "Active",
33 paid: "Paid",
34 due: "Due",
35 upcoming: "Upcoming",
36 } as const;
37
38 export default function LoanContractDetailPage() {
39 const { contract, schedule, documents } = data;
40
41 return (
42 <div
43 className={
44 "vektos " +
45 css({
46 minHeight: "full",
47 bg: "bg.canvas",
48 color: "fg.default",
49 px: { base: "4", md: "6" },
50 py: "6",
51 })
52 }
53 >
54 <Stack gap="6">
55 <Stack gap="2">
56 <Heading level={1}>{contract.product}</Heading>
57 <DataList
58 items={[
59 {
60 label: "Contract number",
61 value: (
62 <Text as="span" mono size="sm">
63 {contract.number}
64 </Text>
65 ),
66 },
67 {
68 label: "Status",
69 value: (
70 <Badge
71 tone={
72 statusTone[contract.status as keyof typeof statusTone]
73 }
74 >
75 {statusLabel[contract.status as keyof typeof statusLabel]}
76 </Badge>
77 ),
78 },
79 ]}
80 />
81 </Stack>
82
83 <Card>
84 <CardHeader>
85 <CardTitle>Key terms</CardTitle>
86 </CardHeader>
87 <CardBody>
88 <DataList
89 items={[
90 {
91 label: "Amount borrowed",
92 value: (
93 <FormatNumber
94 value={contract.principal}
95 format="currency"
96 currency={contract.currency}
97 />
98 ),
99 },
100 {
101 label: "Nominal interest rate",
102 value: (
103 <FormatNumber
104 value={contract.nominalRate}
105 format="percent"
106 minimumFractionDigits={2}
107 maximumFractionDigits={2}
108 />
109 ),
110 },
111 {
112 label: "APR",
113 value: (
114 <FormatNumber
115 value={contract.apr}
116 format="percent"
117 minimumFractionDigits={2}
118 maximumFractionDigits={2}
119 />
120 ),
121 },
122 {
123 label: "Term in months",
124 value: `${contract.termMonths} months`,
125 },
126 {
127 label: "Monthly payment",
128 value: (
129 <FormatNumber
130 value={contract.monthlyPayment}
131 format="currency"
132 currency={contract.currency}
133 />
134 ),
135 },
136 {
137 label: "Start date",
138 value: <FormatDate value={contract.startDate} dateStyle="long" />,
139 },
140 {
141 label: "Outstanding balance (still owed)",
142 value: (
143 <FormatNumber
144 value={contract.outstanding}
145 format="currency"
146 currency={contract.currency}
147 />
148 ),
149 },
150 ]}
151 />
152 </CardBody>
153 </Card>
154
155 <Card>
156 <CardHeader>
157 <CardTitle>Repayment schedule</CardTitle>
158 <CardDescription>
159 {contract.termMonths} instalments of{" "}
160 <FormatNumber
161 value={contract.monthlyPayment}
162 format="currency"
163 currency={contract.currency}
164 />
165 </CardDescription>
166 </CardHeader>
167 <Table aria-label="Repayment schedule">
168 <TableHead>
169 <TableRow>
170 <TableHeader numeric>Instalment</TableHeader>
171 <TableHeader>Due date</TableHeader>
172 <TableHeader numeric>Payment</TableHeader>
173 <TableHeader numeric>Principal</TableHeader>
174 <TableHeader numeric>Interest</TableHeader>
175 <TableHeader numeric>Balance</TableHeader>
176 <TableHeader>Status</TableHeader>
177 </TableRow>
178 </TableHead>
179 <TableBody>
180 {schedule.map((row) => (
181 <TableRow key={row.number}>
182 <TableCell numeric>{row.number}</TableCell>
183 <TableCell>
184 <FormatDate value={row.dueDate} dateStyle="medium" />
185 </TableCell>
186 <TableCell numeric>
187 <FormatNumber
188 value={row.payment}
189 format="currency"
190 currency={contract.currency}
191 />
192 </TableCell>
193 <TableCell numeric>
194 <FormatNumber
195 value={row.principal}
196 format="currency"
197 currency={contract.currency}
198 />
199 </TableCell>
200 <TableCell numeric>
201 <FormatNumber
202 value={row.interest}
203 format="currency"
204 currency={contract.currency}
205 />
206 </TableCell>
207 <TableCell numeric>
208 <FormatNumber
209 value={row.remaining}
210 format="currency"
211 currency={contract.currency}
212 />
213 </TableCell>
214 <TableCell>
215 <Badge
216 tone={
217 statusTone[row.status as keyof typeof statusTone]
218 }
219 >
220 {statusLabel[row.status as keyof typeof statusLabel]}
221 </Badge>
222 </TableCell>
223 </TableRow>
224 ))}
225 </TableBody>
226 </Table>
227 </Card>
228
229 <Card>
230 <CardHeader>
231 <CardTitle>Signed documents</CardTitle>
232 </CardHeader>
233 <CardBody>
234 <DataList
235 items={documents.map((doc) => ({
236 label: doc.name,
237 value: <FormatDate value={doc.signedAt} dateStyle="long" />,
238 }))}
239 />
240 </CardBody>
241 </Card>
242 </Stack>
243 </div>
244 );
245 }
3 get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component 1,283 261 $0.0000
4 list_files 10,714 202 $0.0000
10 write_file 94 4,300 $0.0000
11 check_code 4,354 1,275 $0.0000
12 write_file 1,301 3,734 $0.0000
13 check_code 3,779 1,284 $0.0000