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 2 counted, under 4 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 list_files 185 30 $0.0000 1 read_file 229 33 $0.0000 2 list_files, docs-list 828 46 $0.0000 3
Output cap The provider's default 4 Card,
5 CardBody,
6 CardHeader,
7 CardTitle,
8 DataList,
9 FormatDate,
10 FormatNumber,
11 Heading,
12 Stack,
13 Table,
14 TableBody,
15 TableCell,
16 TableHead,
17 TableHeader,
18 TableRow,
19 Text,
20 } from "@vektos/ds";
21 import { css } from "styled-system/css";
22
23 const currency = data.contract.currency;
24
25 function statusTone(status: string): "neutral" | "success" | "warning" | "danger" {
26 switch (status) {
27 case "paid":
28 return "success";
29 case "due":
30 return "warning";
31 case "upcoming":
32 return "neutral";
33 default:
34 return "neutral";
35 }
36 }
37
38 function contractStatusTone(status: string): "neutral" | "success" | "warning" | "danger" {
39 switch (status) {
40 case "active":
41 return "success";
42 case "completed":
43 return "success";
44 case "defaulted":
45 return "danger";
46 default:
47 return "neutral";
48 }
49 }
50
51 function capitalize(value: string) {
52 return value.charAt(0).toUpperCase() + value.slice(1);
53 }
54
55 export default function LoanContractPage() {
56 const { contract, schedule, documents } = data;
57
58 return (
59 <Stack gap="6" className={css({ maxWidth: "960px", marginInline: "auto", padding: "6" })}>
60 <Stack gap="2">
61 <Heading level={1}>{contract.product}</Heading>
62 <Stack flexDirection="row" gap="3" alignItems="center">
63 <Text tone="muted" mono>
64 {contract.number}
65 </Text>
66 <Badge tone={contractStatusTone(contract.status)}>
67 {capitalize(contract.status)}
68 </Badge>
69 </Stack>
70 </Stack>
71
72 <Card>
73 <CardHeader>
74 <CardTitle>Key terms</CardTitle>
75 </CardHeader>
76 <CardBody>
77 <DataList
78 items={[
79 {
80 label: "Amount borrowed",
81 value: (
82 <FormatNumber
83 value={contract.principal}
84 format="currency"
85 currency={currency}
86 />
87 ),
88 },
89 {
90 label: "Nominal interest rate",
91 value: (
92 <FormatNumber
93 value={contract.nominalRate}
94 format="percent"
95 maximumFractionDigits={2}
96 minimumFractionDigits={2}
97 />
98 ),
99 },
100 {
101 label: "APR",
102 value: (
103 <FormatNumber
104 value={contract.apr}
105 format="percent"
106 maximumFractionDigits={2}
107 minimumFractionDigits={2}
108 />
109 ),
110 },
111 {
112 label: "Term",
113 value: `${contract.termMonths} months`,
114 },
115 {
116 label: "Monthly payment",
117 value: (
118 <FormatNumber
119 value={contract.monthlyPayment}
120 format="currency"
121 currency={currency}
122 />
123 ),
124 },
125 {
126 label: "Start date",
127 value: <FormatDate value={contract.startDate} dateStyle="long" />,
128 },
129 {
130 label: "Still owed",
131 value: (
132 <FormatNumber
133 value={contract.outstanding}
134 format="currency"
135 currency={currency}
136 />
137 ),
138 },
139 ]}
140 />
141 </CardBody>
142 </Card>
143
144 <Card>
145 <CardHeader>
146 <CardTitle>Repayment schedule</CardTitle>
147 </CardHeader>
148 <Table aria-label="Repayment schedule">
149 <TableHead>
150 <TableRow>
151 <TableHeader>#</TableHeader>
152 <TableHeader>Due date</TableHeader>
153 <TableHeader numeric>Payment</TableHeader>
154 <TableHeader numeric>Principal</TableHeader>
155 <TableHeader numeric>Interest</TableHeader>
156 <TableHeader numeric>Balance</TableHeader>
157 <TableHeader>Status</TableHeader>
158 </TableRow>
159 </TableHead>
160 <TableBody>
161 {schedule.map((row) => (
162 <TableRow key={row.number}>
163 <TableCell>{row.number}</TableCell>
164 <TableCell>
165 <FormatDate value={row.dueDate} dateStyle="medium" />
166 </TableCell>
167 <TableCell numeric>
168 <FormatNumber value={row.payment} format="currency" currency={currency} />
169 </TableCell>
170 <TableCell numeric>
171 <FormatNumber value={row.principal} format="currency" currency={currency} />
172 </TableCell>
173 <TableCell numeric>
174 <FormatNumber value={row.interest} format="currency" currency={currency} />
175 </TableCell>
176 <TableCell numeric>
177 <FormatNumber value={row.remaining} format="currency" currency={currency} />
178 </TableCell>
179 <TableCell>
180 <Badge tone={statusTone(row.status)}>{capitalize(row.status)}</Badge>
181 </TableCell>
182 </TableRow>
183 ))}
184 </TableBody>
185 </Table>
186 </Card>
187
188 <Card>
189 <CardHeader>
190 <CardTitle>Signed documents</CardTitle>
191 </CardHeader>
192 <Table aria-label="Signed documents">
193 <TableHead>
194 <TableRow>
195 <TableHeader>Document</TableHeader>
196 <TableHeader>Signed on</TableHeader>
197 </TableRow>
198 </TableHead>
199 <TableBody>
200 {documents.map((doc) => (
201 <TableRow key={doc.name}>
202 <TableCell>{doc.name}</TableCell>
203 <TableCell>
204 <FormatDate value={doc.signedAt} dateStyle="long" />
205 </TableCell>
206 </TableRow>
207 ))}
208 </TableBody>
209 </Table>
210 </Card>
211 </Stack>
212 );
213 }
214
Not counted
Type '{ gap: "6"; className: string; children: Element[]; }' is not assignable to type 'IntrinsicAttributes & StackProps'.
typecheck/TS2769 0 quality 6 docs-show, docs-show, docs-show 127 127 $0.0000
7 docs-show, docs-show, docs-show 8,163 89 $0.0000
8 docs-show, docs-show, docs-show 8,343 73 $0.0000
10 write_file 887 2,700 $0.0000
11 write_file 11,099 1,278 $0.0000
12 stories-changed 4,081 74 $0.0000