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 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 list_files 185 30 $0.0000 1 read_file 101 30 $0.0000 2 docs-list 825 37 $0.0000 3
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
23 const { contract, schedule, documents } = data;
24
25 function statusTone(status: string) {
26 if (status === "paid") return "success";
27 if (status === "due") return "warning";
28 return "neutral";
29 }
30
31 function capitalise(value: string) {
32 return value.charAt(0).toUpperCase() + value.slice(1);
33 }
34
35 export default function LoanContractPage() {
36 return (
37 <Stack gap="6">
38 <Stack gap="2">
39 <Heading level={1}>{contract.product}</Heading>
40 <Stack flexDirection="row" gap="3" alignItems="center">
41 <Text mono size="sm" tone="muted">
42 {contract.number}
43 </Text>
44 <Badge tone={contract.status === "active" ? "success" : "neutral"}>
45 {capitalise(contract.status)}
46 </Badge>
47 </Stack>
48 </Stack>
49
50 <Card>
51 <CardHeader>
52 <CardTitle>Key terms</CardTitle>
53 <CardDescription>The main figures of this contract.</CardDescription>
54 </CardHeader>
55 <CardBody>
56 <DataList
57 items={[
58 {
59 label: "Amount borrowed",
60 value: (
61 <FormatNumber
62 value={contract.principal}
63 format="currency"
64 currency={contract.currency}
65 />
66 ),
67 },
68 {
69 label: "Nominal interest rate",
70 value: (
71 <FormatNumber
72 value={contract.nominalRate}
73 format="percent"
74 maximumFractionDigits={2}
75 />
76 ),
77 },
78 {
79 label: "APR",
80 value: (
81 <FormatNumber
82 value={contract.apr}
83 format="percent"
84 maximumFractionDigits={2}
85 />
86 ),
87 },
88 {
89 label: "Term",
90 value: `${contract.termMonths} months`,
91 },
92 {
93 label: "Monthly payment",
94 value: (
95 <FormatNumber
96 value={contract.monthlyPayment}
97 format="currency"
98 currency={contract.currency}
99 />
100 ),
101 },
102 {
103 label: "Start date",
104 value: (
105 <FormatDate value={contract.startDate} dateStyle="long" />
106 ),
107 },
108 {
109 label: "Still owed",
110 value: (
111 <FormatNumber
112 value={contract.outstanding}
113 format="currency"
114 currency={contract.currency}
115 />
116 ),
117 },
118 ]}
119 />
120 </CardBody>
121 </Card>
122
123 <Card>
124 <CardHeader>
125 <CardTitle>Repayment schedule</CardTitle>
126 <CardDescription>Instalments and how each one is split.</CardDescription>
127 </CardHeader>
128 <Table aria-label="Repayment schedule">
129 <TableHead>
130 <TableRow>
131 <TableHeader>#</TableHeader>
132 <TableHeader>Due date</TableHeader>
133 <TableHeader numeric>Payment</TableHeader>
134 <TableHeader numeric>Principal</TableHeader>
135 <TableHeader numeric>Interest</TableHeader>
136 <TableHeader numeric>Balance after</TableHeader>
137 <TableHeader>Status</TableHeader>
138 </TableRow>
139 </TableHead>
140 <TableBody>
141 {schedule.map((row) => (
142 <TableRow key={row.number}>
143 <TableCell>{row.number}</TableCell>
144 <TableCell>
145 <FormatDate value={row.dueDate} dateStyle="medium" />
146 </TableCell>
147 <TableCell numeric>
148 <FormatNumber
149 value={row.payment}
150 format="currency"
151 currency={contract.currency}
152 />
153 </TableCell>
154 <TableCell numeric>
155 <FormatNumber
156 value={row.principal}
157 format="currency"
158 currency={contract.currency}
159 />
160 </TableCell>
161 <TableCell numeric>
162 <FormatNumber
163 value={row.interest}
164 format="currency"
165 currency={contract.currency}
166 />
167 </TableCell>
168 <TableCell numeric>
169 <FormatNumber
170 value={row.remaining}
171 format="currency"
172 currency={contract.currency}
173 />
174 </TableCell>
175 <TableCell>
176 <Badge tone={statusTone(row.status)}>
177 {capitalise(row.status)}
178 </Badge>
179 </TableCell>
180 </TableRow>
181 ))}
182 </TableBody>
183 </Table>
184 </Card>
185
186 <Card>
187 <CardHeader>
188 <CardTitle>Signed documents</CardTitle>
189 <CardDescription>Documents signed for this contract.</CardDescription>
190 </CardHeader>
191 <Table aria-label="Signed documents">
192 <TableHead>
193 <TableRow>
194 <TableHeader>Document</TableHeader>
195 <TableHeader>Signed on</TableHeader>
196 </TableRow>
197 </TableHead>
198 <TableBody>
199 {documents.map((doc) => (
200 <TableRow key={doc.name}>
201 <TableCell>{doc.name}</TableCell>
202 <TableCell>
203 <FormatDate value={doc.signedAt} dateStyle="long" />
204 </TableCell>
205 </TableRow>
206 ))}
207 </TableBody>
208 </Table>
209 </Card>
210 </Stack>
211 );
212 }
213
docs-show, docs-show, docs-show
4 docs-show, docs-show, docs-show, docs-show, docs-show 3,562 123 $0.0000
5 docs-show, docs-show 2,805 48 $0.0000
6 list_files 11,158 95 $0.0000
7 write_file 131 2,655 $0.0000
8 write_file 2,682 1,337 $0.0000