Phase6: Customer Billing details

src/components/admin/cron/cron-controls.tsx

@@ -116,8 +116,23 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
     });
   };
 
+  // Phase 6: surface failures prominently. Any run in the recent
+  // window with a non-zero failure_count drives a top-of-page
+  // banner — the row in the table is already red, but a banner
+  // means the admin doesn't have to scroll to notice.
+  const recentFailures = recent.filter((r) => r.failureCount > 0);
+  const hasRecentFailures = recentFailures.length > 0;
+
   return (
     <div className="space-y-8">
+      {hasRecentFailures && (
+        <div className="p-4 rounded-md border border-error bg-error/10 text-sm text-error">
+          <p className="font-medium mb-1">{t("failureBannerTitle")}</p>
+          <p className="text-xs">
+            {t("failureBannerBody", { count: recentFailures.length })}
+          </p>
+        </div>
+      )}
       <section className="grid gap-4 md:grid-cols-2">
         <Card>
           <h2 className="text-xs uppercase tracking-wider text-text-muted mb-2">
@@ -192,7 +207,12 @@ export function CronControls({ initialRecent, initialLastSuccess }: Props) {
               </thead>
               <tbody>
                 {recent.map((r) => (
-                  <tr key={r.id} className="border-t border-border align-top">
+                  <tr
+                    key={r.id}
+                    className={`border-t border-border align-top ${
+                      r.failureCount > 0 ? "bg-error/5" : ""
+                    }`}
+                  >
                     <td className="py-2 text-xs font-mono">
                       {fmtRelative(r.startedAt)}
                     </td>