Runs / transactions Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 6 counted, under 5 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 get_guidelines 138 33 $0.0000 1 list_components, list_tokens 2,679 40 $0.0000 2 read_file, get_component, get_component, get_component 3,472 123 $0.0000
cdb5d9e77633
Output cap The provider's default 12 FormatDate,
13 FormatNumber,
14 Heading,
15 LocaleProvider,
16 Pagination,
17 SegmentGroup,
18 Stack,
19 Table,
20 TableBody,
21 TableCell,
22 TableHead,
23 TableHeader,
24 TableRow,
25 Text,
26 } from "@vektos/ds";
27
28 type View = "all" | "in" | "out";
29
30 export default function Page() {
31 const [view, setView] = useState<View>("all");
32 const [page, setPage] = useState(1);
33
34 const pageSize = data.pageSize;
35
36 const filtered = useMemo(() => {
37 const txs = data.transactions.filter((tx) => {
38 if (view === "in") return tx.amount > 0;
39 if (view === "out") return tx.amount < 0;
40 return true;
41 });
42 return [...txs].sort((a, b) => b.date.localeCompare(a.date));
43 }, [view]);
44
45 const pageCount = Math.ceil(filtered.length / pageSize);
46 const pageItems = filtered.slice((page - 1) * pageSize, page * pageSize);
47
48 const handleViewChange = (value: string) => {
49 setView(value as View);
50 setPage(1);
51 };
52
53 return (
54 <LocaleProvider locale="en-IE">
55 <Stack gap="6" marginBlock="6" marginInline="6">
56 <Stack gap="1">
57 <Heading level={1}>{data.account.name}</Heading>
58 <Text tone="muted" size="sm">
59 {data.account.holder}
60 </Text>
61 </Stack>
62
63 <SegmentGroup
64 aria-label="Transaction view"
65 value={view}
66 onValueChange={handleViewChange}
67 options={[
68 { label: "All", value: "all" },
69 { label: "Money in", value: "in" },
70 { label: "Money out", value: "out" },
71 ]}
72 />
73
74 <Card>
75 <CardHeader>
76 <CardTitle>Transactions</CardTitle>
77 <CardDescription>
78 {filtered.length} transaction{filtered.length === 1 ? "" : "s"}
79 </CardDescription>
80 </CardHeader>
81 {pageItems.length === 0 ? (
82 <EmptyState
83 title="No transactions"
84 description="Nothing to show for this view."
85 />
86 ) : (
87 <Table aria-label="Transactions">
88 <TableHead>
89 <TableRow>
90 <TableHeader>Date</TableHeader>
91 <TableHeader>Description</TableHeader>
92 <TableHeader numeric>Amount ({data.account.currency})</TableHeader>
93 <TableHeader>Status</TableHeader>
94 </TableRow>
95 </TableHead>
96 <TableBody>
97 {pageItems.map((tx) => (
98 <TableRow key={tx.id}>
99 <TableCell>
100 <FormatDate value={tx.date} dateStyle="medium" />
101 </TableCell>
102 <TableCell>{tx.description}</TableCell>
103 <TableCell numeric>
104 <FormatNumber
105 value={tx.amount}
106 format="currency"
107 currency={data.account.currency}
108 signDisplay="exceptZero"
109 />
110 </TableCell>
111 <TableCell>
112 {tx.status === "pending" ? (
113 <Badge tone="warning">Pending</Badge>
114 ) : (
115 <Badge tone="neutral">Booked</Badge>
116 )}
117 </TableCell>
118 </TableRow>
119 ))}
120 </TableBody>
121 </Table>
122 )}
123 </Card>
124
125 {pageCount > 1 && (
126 <Pagination
127 page={page}
128 count={pageCount}
129 onPageChange={setPage}
130 aria-label="Transaction pages"
131 />
132 )}
133 </Stack>
134 </LocaleProvider>
135 );
136 }
137 ```
138
139 Wait SegmentGroup onValueChange signature: `(value: string) => void`. Good. But SegmentGroup value prop type string. Good.
140
141 Pagination aria-label accepted? Yes prop aria-label. Good.
142
143 EmptyState inside Card? It is okay maybe. But Card expects table or body. EmptyState has layout props. Fine.
144
145 Check CardDescription pluralization maybe fine.
146
147 Now check_code.<|end|><|start|>'));
148 <|end|><|start|>start to=check_code<|channel|>analysis <|constrain|>xml<|message|><rfl:parameter name="code">
149 "use client";
150
151 import { useState, useMemo } from "react";
152 import data from "./fixture.json";
153 import {
154 Badge,
155 Card,
156 CardHeader,
157 CardTitle,
158 CardDescription,
159 EmptyState,
160 FormatDate,
161 FormatNumber,
162 Heading,
163 LocaleProvider,
164 Pagination,
165 SegmentGroup,
166 Stack,
167 Table,
168 TableBody,
169 TableCell,
170 TableHead,
171 TableHeader,
172 TableRow,
173 Text,
174 } from "@vektos/ds";
175
176 type View = "all" | "in" | "out";
177
178 export default function Page() {
179 const [view, setView] = useState<View>("all");
180 const [page, setPage] = useState(1);
181
182 const pageSize = data.pageSize;
183
184 const filtered = useMemo(() => {
185 const txs = data.transactions.filter((tx) => {
186 if (view === "in") return tx.amount > 0;
187 if (view === "out") return tx.amount < 0;
188 return true;
189 });
190 return [...txs].sort((a, b) => b.date.localeCompare(a.date));
191 }, [view]);
192
193 const pageCount = Math.ceil(filtered.length / pageSize);
194 const pageItems = filtered.slice((page - 1) * pageSize, page * pageSize);
195
196 const handleViewChange = (value: string) => {
197 setView(value as View);
198 setPage(1);
199 };
200
201 return (
202 <LocaleProvider locale="en-IE">
203 <Stack gap="6" marginBlock="6" marginInline="6">
204 <Stack gap="1">
205 <Heading level={1}>{data.account.name}</Heading>
206 <Text tone="muted" size="sm">
207 {data.account.holder}
208 </Text>
209 </Stack>
210
211 <SegmentGroup
212 aria-label="Transaction view"
213 value={view}
214 onValueChange={handleViewChange}
215 options={[
216 { label: "All", value: "all" },
217 { label: "Money in", value: "in" },
218 { label: "Money out", value: "out" },
219 ]}
220 />
221
222 <Card>
223 <CardHeader>
224 <CardTitle>Transactions</CardTitle>
225 <CardDescription>
226 {filtered.length} transaction{filtered.length === 1 ? "" : "s"}
227 </CardDescription>
228 </CardHeader>
229 {pageItems.length === 0 ? (
230 <EmptyState
231 title="No transactions"
232 description="Nothing to show for this view."
233 />
234 ) : (
235 <Table aria-label="Transactions">
236 <TableHead>
237 <TableRow>
238 <TableHeader>Date</TableHeader>
239 <TableHeader>Description</TableHeader>
240 <TableHeader numeric>Amount ({data.account.currency})</TableHeader>
241 <TableHeader>Status</TableHeader>
242 </TableRow>
243 </TableHead>
244 <TableBody>
245 {pageItems.map((tx) => (
246 <TableRow key={tx.id}>
247 <TableCell>
248 <FormatDate value={tx.date} dateStyle="medium" />
249 </TableCell>
250 <TableCell>{tx.description}</TableCell>
251 <TableCell numeric>
252 <FormatNumber
253 value={tx.amount}
254 format="currency"
255 currency={data.account.currency}
256 signDisplay="exceptZero"
257 />
258 </TableCell>
259 <TableCell>
260 {tx.status === "pending" ? (
261 <Badge tone="warning">Pending</Badge>
262 ) : (
263 <Badge tone="neutral">Booked</Badge>
264 )}
265 </TableCell>
266 </TableRow>
267 ))}
268 </TableBody>
269 </Table>
270 )}
271 </Card>
272
273 {pageCount > 1 && (
274 <Pagination
275 page={page}
276 count={pageCount}
277 onPageChange={setPage}
278 aria-label="Transaction pages"
279 />
280 )}
281 </Stack>
282 </LocaleProvider>
283 );
284 }
285
render/build-failed 1 completeness typecheck/TS1160 1 quality get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component, get_component
4 list_files 12,716 48 $0.0000
6 get_component 119 425 $0.0000
7 write_file 1,191 4,393 $0.0000
8 check_code 4,456 862 $0.0000