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