Runs / direct-debits Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 38 counted, under 10 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 read_file 840 49 $0.0000 1 write_file 1,311 5,585 $0.0000 2 stop 2,731 37 $0.0000
cdb5d9e77633
Output cap The provider's default 10 color: "#92400e",
11 padding: "0.75rem 1rem",
12 marginBottom: "1.5rem",
13 borderRadius: "0.375rem",
14 };
15
16 const rowStyle = {
17 background: "#fff",
18 borderBottom: "1px solid #eee",
19 };
20
21 const cellStyle = {
22 padding: "0.5rem",
23 border: "1px solid #ddd",
24 };
25
26 const buttonStyle = {
27 background: "#3b82f6",
28 color: "white",
29 border: "none",
30 padding: "0.4rem 0.8rem",
31 borderRadius: "0.3rem",
32 cursor: "pointer",
33 };
34
35 const successStyle = {
36 marginTop: "1rem",
37 background: "#d1fdca",
38 color: "#059669",
39 padding: "0.5rem 1rem",
40 borderRadius: "0.375rem",
41 };
42
43 export default function Page() {
44 const [mandates, setMandates] = useState(data.mandates);
45 const [message, setMessage] = useState<string | null>(null);
46 const [failedCount, setFailedCount] = useState(
47 data.mandates.filter((m) => m.status === "failed").length
48 );
49
50 useEffect(() => {
51 setFailedCount(mandates.filter((m) => m.status === "failed").length);
52 }, [mandates]);
53
54 const handleCancel = (id: string) => {
55 const mand = mandates.find((m) => m.id === id);
56 if (!mand) return;
57 if (window.confirm(`Cancel mandate for ${mand.creditor}?`)) {
58 const updated = mandates.map((m) =>
59 m.id === id ? { ...m, status: "cancelled" } : m
60 );
61 setMandates(updated);
62 setMessage(`Mandate for ${mand.creditor} cancelled`);
63 }
64 };
65
66 useEffect(() => {
67 let timer: NodeJS.Timeout;
68 if (message) {
69 timer = setTimeout(() => setMessage(null), 3000);
70 }
71 return () => clearTimeout(timer);
72 }, [message]);
73
74 const showBanner = failedCount > 0;
75
76 const statusBadgeStyle = (status: string) => {
77 if (status === "active") {
78 return { display: "inline-block", padding: "0.2rem 0.5rem", borderRadius: "0.25rem", color: "#16a34a" };
79 }
80 if (status === "failed") {
81 return { display: "inline-block", padding: "0.2rem 0.5rem", borderRadius: "0.25rem", color: "#dc2626" };
82 }
83 return { display: "inline-block", padding: "0.2rem 0.5rem", borderRadius: "0.25rem", color: "#6b7280" };
84 };
85
86 return (
87 <div style={css({ maxWidth: "800px", margin: "0 auto", padding: "2rem", fontFamily: "system-ui, sans-serif" })}>
88 {showBanner && (
89 <div style={bannerStyle}>
90 {failedCount} collections failed. Each creditor will try again in{" "}
91 {data.retryDays} working days.
92 </div>
93 )}
94
95 <h1>{data.company} – Direct Debit Mandates</h1>
96
97 <table style={{ width: "100%", borderCollapse: "collapse" }}>
98 <thead>
99 <tr>
100 <th style={cellStyle}>Creditor</th>
101 <th style={cellStyle}>Reference</th>
102 <th style={cellStyle}>Last collection</th>
103 <th style={cellStyle}>Status</th>
104 <th style={cellStyle}>Actions</th>
105 </tr>
106 </thead>
107 <tbody>
108 {mandates.map((m) => (
109 <tr key={m.id} style={rowStyle}>
110 <td style={cellStyle}>{m.creditor}</td>
111 <td style={cellStyle}>{m.id}</td>
112 <td style={cellStyle}>
113 {m.lastCollection.date} – {m.amount} {data.currency}
114 </td>
115 <td style={cellStyle}>
116 <span style={statusBadgeStyle(m.status)}>{m.status}</span>
117 </td>
118 <td style={cellStyle}>
119 {m.status !== "cancelled" && (
120 <button onClick={() => handleCancel(m.id)} style={buttonStyle}>
121 Cancel mandate
122 </button>
123 )}
124 </td>
125 </tr>
126 ))}
127 </tbody>
128 </table>
129
130 {message && (
131 <div style={successStyle}>
132 {message}
133 </div>
134 )}
135 </div>
136 );
137 }
page.tsx:39:12 · 0.5rem 1rem `0.5rem 1rem` is a raw length. Use a token. page.tsx:78:50 · 0.2rem 0.5rem `0.2rem 0.5rem` is a raw length. Use a token. page.tsx:81:50 · 0.2rem 0.5rem `0.2rem 0.5rem` is a raw length. Use a token. page.tsx:83:48 · 0.2rem 0.5rem `0.2rem 0.5rem` is a raw length. Use a token. raw-values/raw-color 13 design-system page.tsx:8:15 · #fef3c7 `#fef3c7` is a raw color. Use a semantic color token. page.tsx:9:11 · 1px solid #eab308 `1px solid #eab308` is a raw color. Use a semantic color token. page.tsx:10:10 · #92400e `#92400e` is a raw color. Use a semantic color token. page.tsx:17:15 · #fff `#fff` is a raw color. Use a semantic color token. page.tsx:18:17 · 1px solid #eee `1px solid #eee` is a raw color. Use a semantic color token. page.tsx:23:11 · 1px solid #ddd `1px solid #ddd` is a raw color. Use a semantic color token. page.tsx:27:15 · #3b82f6 `#3b82f6` is a raw color. Use a semantic color token. page.tsx:28:10 · white `white` is a raw color. Use a semantic color token. page.tsx:37:15 · #d1fdca `#d1fdca` is a raw color. Use a semantic color token. page.tsx:38:10 · #059669 `#059669` is a raw color. Use a semantic color token. page.tsx:78:99 · #16a34a `#16a34a` is a raw color. Use a semantic color token. page.tsx:81:99 · #dc2626 `#dc2626` is a raw color. Use a semantic color token. page.tsx:83:97 · #6b7280 `#6b7280` is a raw color. Use a semantic color token. Every run that broke raw-values/raw-color typecheck/TS2503 1 quality typecheck/TS2769 0 quality