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 4 counted, under 4 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 3,863 40 $0.0000 1 list_files 2,229 190 $0.0000 2 write_file 343 2,049 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 const initial: Mandate[] = data.mandates;
13
14 export default function Page() {
15 const [mandates, setMandates] = React.useState<Mandate[]>(initial);
16 const [success, setSuccess] = React.useState<string | null>(null);
17 const [openCreditor, setOpenCreditor] = React.useState<string | null>(null);
18
19 // count failed collections at the top
20 const failedCount = mandates.filter((m) => m.status === "failed").length;
21
22 // banner showing failed collections and retry info
23 let banner = null;
24 if (failedCount > 0) {
25 const label = failedCount === 1 ? "collection" : "collections";
26 banner = (
27 <section style={{ marginBottom: "1.5rem", padding: "0.75rem", background: "#fff3e0", borderRadius: "6px" }}>
28 <p>
29 {failedCount} failed {label}. Each creditor will try again in{" "}{data.retryDays} working day{"}{data.retryDays !== 1 ? "s" : ""}.
30 </p>
31 </section>
32 );
33 }
34
35 return (
36 <div style={{ maxWidth: "800px", margin: "2rem auto", fontFamily: "system-ui, sans-serif" }}>
37 {banner}
38 <h1 style={{ margin: "0 0 1rem" }}>Direct debit mandates</h1>
39
40 <table style={{ width: "100%", borderCollapse: "collapse", marginTop: "1rem" }}>
41 <thead>
42 <tr style={{ background: "#f0f0f0", padding: "0.5rem" }}>
43 <th style={{ padding: "0.5rem", border: "1px solid #ddd" }}>Creditor</th>
44 <th style={{ padding: "0.5rem", border: "1px solid #ddd" }}>Mandate reference</th>
45 <th style={{ padding: "0.5rem", border: "1px solid #ddd" }}>Last collection</th>
46 <th style={{ padding: "0.5rem", border: "1px solid #ddd" }}>Amount</th>
47 <th style={{ padding: "0.5rem", border: "1px solid #ddd" }}>Status</th>
48 <th style={{ padding: "0.5rem", border: "1px solid #ddd" }}>Action</th>
49 </tr>
50 </thead>
51 <tbody>
52 {mandates.map((m) => (
53 <tr key={m.id} style={{ borderBottom: "1px solid #eee" }}>
54 <td style={{ padding: "0.5rem" }}>{m.creditor}</td>
55 <td style={{ padding: "0.5rem" }}>{m.id}</td>
56 <td style={{ padding: "0.5rem" }}>{m.lastCollection.date}</td>
57 <td style={{ padding: "0.5rem" }}>{m.lastCollection.amount} {data.currency}</td>
58 <td style={{ padding: "0.5rem" }}>
59 <span
60 style={{
61 display: "inline-block",
62 padding: "2px 6px",
63 borderRadius: "4px",
64 fontSize: "0.85rem",
65 fontWeight: 500,
66 color: m.status === "active" ? "green" : m.status === "failed" ? "red" : "gray",
67 background:
68 m.status === "active"
69 ? "rgba(0,128,0,0.1)"
70 : m.status === "failed"
71 ? "rgba(255,0,0,0.1)"
72 : "rgba(128,128,128,0.1)",
73 }}
74 >
75 {m.status}
76 </span>
77 </td>
78 <td style={{ padding: "0.5rem" }}>
79 {m.status !== "cancelled" && (
80 <button
81 style={{
82 padding: "0.4rem 0.8rem",
83 cursor: "pointer",
84 background: "#1976d2",
85 color: "white",
86 border: "none",
87 borderRadius: "4px",
88 fontSize: "0.85rem",
89 }}
90 onClick={() => setOpenCreditor(m.creditor)}
91 >
92 Cancel mandate
93 </button>
94 )}
95 </td>
96 </tr>
97 ))}
98 </tbody>
99 </table>
100
101 {/* confirmation dialog */}
102 {openCreditor && (
103 <div
104 style={{
105 marginTop: "1.5rem",
106 border: "1px solid #ccc",
107 padding: "1rem",
108 borderRadius: "8px",
109 background: "#f9f9f9",
110 maxWidth: "400px",
111 }}
112 >
113 <p>Are you sure you want to cancel the mandate for <strong>{openCreditor}</strong>?</p>
114 <div style={{ marginTop: "0.5rem", display: "flex", gap: "0.5rem" }}>
115 <button
116 style={{ marginRight: "0.5rem", padding: "0.4rem 0.8rem", cursor: "pointer" }}
117 onClick={() => setOpenCreditor(null)}
118 >
119 Cancel
120 </button>
121 <button
122 style={{
123 padding: "0.4rem 0.8rem",
124 cursor: "pointer",
125 background: "#388e3c",
126 color: "white",
127 border: "none",
128 borderRadius: "4px",
129 fontSize: "0.85rem",
130 }}
131 onClick={() => {
132 // find the mandate with matching creditor and mark as cancelled
133 const m = mandates.find((x) => x.creditor === openCreditor);
134 if (m) {
135 const updated = mandates.map((x) =>
136 x.creditor === openCreditor ? { ...x, status: "cancelled" } : x
137 );
138 setMandates(updated);
139 setSuccess(`Mandate for ${openCreditor} cancelled`);
140 // auto dismiss after 3 seconds
141 const timer = setTimeout(() => setSuccess(null), 3000);
142 // clear timer shortly after to avoid leak
143 setTimeout(() => clearTimeout(timer), 3010);
144 }
145 setOpenCreditor(null);
146 }}
147 >
148 Confirm
149 </button>
150 </div>
151 </div>
152 )}
153
154 {/* transient success message */}
155 {success && (
156 <div
157 style={{
158 marginTop: "1rem",
159 background: "#e6f4ea",
160 border: "1px solid #a3d1bb",
161 padding: "0.75rem",
162 borderRadius: "6px",
163 color: "#1b5e20",
164 maxWidth: "400px",
165 }}
166 >
167 {success}
168 </div>
169 )}
170 </div>
171 );
172 }