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