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 read_file 1,407 41 $0.0000 1 list_components 2,218 153 $0.0000 2 get_component 4,820 469 $0.0000 3
cdb5d9e77633
Output cap The provider's default 4 DataList,
5 FormatNumber,
6 Table,
7 TableHead,
8 TableBody,
9 TableRow,
10 TableCell,
11 TableHeader,
12 Badge,
13 Stack,
14 Heading,
15 Text,
16 } from "@vektos/ds";
17
18 export default function Page() {
19 const { contract, schedule, documents } = data;
20
21 return (
22 <>
23 <Heading level={1}>Personal loan contract</Heading>
24
25 <Stack gap="4">
26 {/* Product, number and status */}
27 <Stack gap="2">
28 <Heading level={2}>{contract.product}</Heading>
29 <Stack gap="1">
30 <Text>Contract number: {contract.number}</Text>
31 <Badge tone="neutral">{contract.status}</Badge>
32 </Stack>
33 </Stack>
34
35 {/* Key terms */}
36 <DataList orientation="vertical" items={[
37 { label: "Amount borrowed", value: <FormatNumber value={contract.principal} format="currency" currency="EUR" /> },
38 { label: "Nominal interest rate", value: `${(contract.nominalRate * 100).toFixed(2)}%` },
39 { label: "APR", value: `${(contract.apr * 100).toFixed(2)}%` },
40 { label: "Term", value: `${contract.termMonths} months` },
41 { label: "Monthly payment", value: <FormatNumber value={contract.monthlyPayment} format="currency" currency="EUR" /> },
42 { label: "Start date", value: contract.startDate },
43 { label: "Outstanding", value: <FormatNumber value={contract.outstanding} format="currency" currency="EUR" /> },
44 ]} />
45
46 {/* Repayment schedule */}
47 <Table aria-label="Repayment schedule">
48 <TableHead>
49 <TableRow>
50 <TableHeader>Due date</TableHeader>
51 <TableHeader>Payment (EUR)</TableHeader>
52 <TableHeader>Principal (EUR)</TableHeader>
53 <TableHeader>Interest (EUR)</TableHeader>
54 <TableHeader numeric>Balance (EUR)</TableHeader>
55 <TableHeader>Status</TableHeader>
56 </TableRow>
57 </TableHead>
58 <TableBody>
59 {schedule.map((instalment) => (
60 <TableRow key={instalment.number}>
61 <TableCell>{instalment.dueDate}</TableCell>
62 <TableCell>
63 <FormatNumber value={instalment.payment} format="currency" currency="EUR" />
64 </TableCell>
65 <TableCell>
66 <FormatNumber value={instalment.principal} format="currency" currency="EUR" />
67 </TableCell>
68 <TableCell>
69 <FormatNumber value={instalment.interest} format="currency" currency="EUR" />
70 </TableCell>
71 <TableCell numeric>
72 <FormatNumber value={instalment.remaining} format="currency" currency="EUR" />
73 </TableCell>
74 <TableCell>
75 <Badge tone="success">{instalment.status}</Badge>
76 </TableCell>
77 </TableRow>
78 ))}
79 </TableBody>
80 </Table>
81
82 {/* Signed documents */}
83 <Stack gap="2">
84 <Heading level={2}>Signed documents</Heading>
85 {documents.map((doc) => (
86 <Stack
87 key={doc.name}
88 flexDirection="row"
89 justifyContent="space-between"
90 >
91 <Text>{doc.name}</Text>
92 <Text>{doc.signedAt}</Text>
93 </Stack>
94 ))}
95 </Stack>
96 </Stack>
97 </>
98 );
99 }
4 get_component 2,758 32 $0.0000
5 get_component 1,312 31 $0.0000
6 get_component 2,344 43 $0.0000
7 write_file 910 1,918 $0.0000
8 write_file 2,855 918 $0.0000
9 check_code 1,704 843 $0.0000
10 write_file 2,702 1,072 $0.0000
11 check_code 1,705 837 $0.0000