@reddoorla/maintenance 0.42.0 → 0.44.0

package/dist/index.d.ts

@@ -284,6 +284,9 @@ type ResolvedCopy = {
     launchSetupItems: string[];
     announceHeading: string;
     announceBody: string;
+    announceCadenceHeading: string;
+    announceTestingLabel: string;
+    announceMaintenanceLabel: string;
     announceMonitorItems: string[];
     announcePreviewLabel: string;
     announceImprovementResend: string;
@@ -293,6 +296,13 @@ type ResolvedCopy = {
 };
 
 type ReportType = "Maintenance" | "Testing" | "Launch" | "Announcement";
+/** Recurrence pace. Mirrors `Frequency` in airtable/websites.ts — inlined here so
+ *  the base types stay free of an airtable-layer import (avoids a type cycle). */
+type ReportFrequency = "None" | "Monthly" | "Quarterly" | "Yearly";
+type ReportCadence = {
+    maintenance: ReportFrequency;
+    testing: ReportFrequency;
+};
 type LighthouseScores = {
     performance: number;
     accessibility: number;
@@ -332,6 +342,9 @@ type ReportData = {
         resendForms?: boolean;
         svelte5?: boolean;
     };
+    /** Announcement-only: the client's go-forward pace, rendered as the "WHAT TO EXPECT"
+     *  section. A "None" pace is omitted; undefined → the whole section is absent. */
+    cadence?: ReportCadence;
     /** Resolved per-site copy (M6a). Omitted → the template falls back to DEFAULT_COPY. */
     copy?: ResolvedCopy;
     /** Used in the header `mj-image src`; the email attaches the bytes with this CID. */
@@ -379,6 +392,10 @@ type ReportRow = {
     } | null;
     /** Read out of the Resend response and stored in a hidden field; needed for webhook reconciliation. */
     resendMessageId: string | null;
+    /** The 12 operator-checklist checkboxes, keyed by their Airtable column name (ALL_CHECKLIST_FIELDS);
+     *  missing/false cells read false. Maintenance/Testing reports gate approve+send on the relevant
+     *  subset (see src/reports/checklist.ts). */
+    checklist: Record<string, boolean>;
 };
 
 type DraftOptions = {

package/dist/index.js

@@ -2754,21 +2754,22 @@ import mjml2html from "mjml";
 var DEFAULT_COPY = {
   maintenanceIntro: "Includes checking the hosting, DNS, Content Management System (CMS, if applicable), search indexing and security of the site for major flaws and updating as necessary.",
   maintenanceChecks: [
-    "Reviewed Logs",
+    "Deploy & Function Health",
     "CMS Checked",
-    "DNS Checked",
+    "Domain, DNS & SSL",
     "Google Indexed",
-    "Reviewed Certificate",
-    "Security Updates"
+    "Security Updates",
+    "Uptime Checked"
   ],
   testingIntro: "Testing includes checks similar to those at launch: testing on common browsers and operating systems, at different screen sizes, and checking every function, and updating all packages for performance rather than just those needed for security.",
   testingChecklist: [
     "Desktop Browsers",
     "Mobile Browsers",
-    "Package Updates",
-    "Bottlenecks",
+    "Page Titles & Meta",
+    "Links & Navigation",
     "Form Functionality",
-    "Animation Functionality"
+    "Interactions & Animations",
+    "Verified After Updates"
   ],
   notesHeader: "NOTES",
   seoCta: "Contact us if you are interested in more in-depth data or have questions about SEO.",
@@ -2782,13 +2783,16 @@ var DEFAULT_COPY = {
     "Continuous integration + automatic dependency updates",
     "Analytics and uptime monitoring"
   ],
-  announceHeading: "YOUR MONTHLY REPORT",
-  announceBody: "We've set up ongoing monitoring and maintenance for your site. Each month we quietly check that everything's healthy and up to date \u2014 and now you'll get a short report so you can see it at a glance.",
+  announceHeading: "YOUR ONGOING SITE CARE",
+  announceBody: "We've completed a full test of your site and set it up for ongoing care to keep it fast, secure, and healthy. Here's what you can expect from us going forward:",
+  announceCadenceHeading: "WHAT TO EXPECT",
+  announceTestingLabel: "Full site testing",
+  announceMaintenanceLabel: "Routine maintenance",
   announceMonitorItems: ["Performance", "Accessibility", "Security", "Uptime"],
-  announcePreviewLabel: "A snapshot of your latest scores:",
+  announcePreviewLabel: "From your latest full site test:",
   announceImprovementResend: "Your contact forms now deliver straight to your inbox through reliable infrastructure, so no inquiry slips through the cracks.",
   announceImprovementSvelte5: "We've modernized your site to the latest framework \u2014 it's faster, more secure, and built to last.",
-  announceCadence: "You'll receive this every month. There's nothing you need to do.",
+  announceCadence: "After each one we'll send you a short report like this \u2014 there's nothing you need to do.",
   announceOpenDoor: "And if you'd ever like to expand the scope, add features, or freshen anything up, just reply \u2014 we'd love to help."
 };
 function override(v) {
@@ -3125,6 +3129,11 @@ function buildLaunchMjml(data) {
 }
 
 // src/reports/announcement-email/template.ts
+var FREQ_PHRASE = {
+  Monthly: "every month",
+  Quarterly: "every quarter",
+  Yearly: "every year"
+};
 var RED2 = "#C00";
 var GREY2 = "#757575";
 var SCORE_PREVIEW = [
@@ -3149,6 +3158,23 @@ function buildAnnouncementMjml(data) {
   ).join("")}
       </mj-column>
     </mj-section>` : "";
+  const cad = data.cadence;
+  const cadenceLines = [];
+  if (cad && cad.testing !== "None")
+    cadenceLines.push(`${copy.announceTestingLabel} \u2014 ${FREQ_PHRASE[cad.testing]}`);
+  if (cad && cad.maintenance !== "None")
+    cadenceLines.push(`${copy.announceMaintenanceLabel} \u2014 ${FREQ_PHRASE[cad.maintenance]}`);
+  const cadenceSection = cadenceLines.length > 0 ? `
+    <mj-section background-color="white">
+      <mj-column>
+        <mj-text color="${RED2}" font-size="20px" font-weight="700" padding-top="36px">${escapeXml(copy.announceCadenceHeading)}</mj-text>
+        ${cadenceLines.map(
+    (line) => `
+        <mj-text color="${GREY2}" font-family="helvetica, sans-serif" font-size="16px" font-weight="300" line-height="24px" padding-top="4px" padding-bottom="4px">\u2022 ${escapeXml(line)}</mj-text>`
+  ).join("")}
+        <mj-text color="${GREY2}" font-family="helvetica, sans-serif" font-size="16px" font-weight="300" line-height="24px" padding-top="12px">${escapeXml(copy.announceCadence)}</mj-text>
+      </mj-column>
+    </mj-section>` : "";
   const monitorRows = copy.announceMonitorItems.map(
     (item) => `
         <mj-text color="${GREY2}" font-family="helvetica, sans-serif" font-size="16px" font-weight="300" line-height="24px" padding-top="4px" padding-bottom="4px">\u2022 ${escapeXml(item)}</mj-text>`
@@ -3187,6 +3213,7 @@ function buildAnnouncementMjml(data) {
         <mj-text color="${GREY2}" font-family="helvetica, sans-serif" font-size="16px" font-weight="300" line-height="24px" padding-top="8px">${escapeXml(copy.announceBody)}</mj-text>
       </mj-column>
     </mj-section>
+    ${cadenceSection}
     ${improvementsSection}
     <mj-section background-color="white">
       <mj-column>
@@ -3202,8 +3229,7 @@ function buildAnnouncementMjml(data) {
     </mj-section>
     <mj-section background-color="white">
       <mj-column>
-        <mj-text color="${GREY2}" font-family="helvetica, sans-serif" font-size="16px" font-weight="300" line-height="24px" padding-top="36px">${escapeXml(copy.announceCadence)}</mj-text>
-        <mj-text color="${GREY2}" font-family="helvetica, sans-serif" font-size="16px" font-weight="300" line-height="24px" padding-top="8px">${escapeXml(copy.announceOpenDoor)}</mj-text>
+        <mj-text color="${GREY2}" font-family="helvetica, sans-serif" font-size="16px" font-weight="300" line-height="24px" padding-top="36px">${escapeXml(copy.announceOpenDoor)}</mj-text>
       </mj-column>
     </mj-section>
     <mj-section background-color="white">
@@ -3228,6 +3254,38 @@ async function renderReportHtml(data) {
   return { html: out.html, warnings: out.errors ?? [] };
 }
 
+// src/reports/checklist.ts
+var MAINTENANCE_CHECKLIST = [
+  { key: "deploy", label: "Deploy & Function Health", field: "Maint: Deploy & Function Health" },
+  { key: "cms", label: "CMS Checked", field: "Maint: CMS Checked" },
+  { key: "domain", label: "Domain, DNS & SSL", field: "Maint: Domain, DNS & SSL" },
+  { key: "google", label: "Google Indexed", field: "Maint: Google Indexed" },
+  { key: "security", label: "Security Updates", field: "Maint: Security Updates" },
+  { key: "uptime", label: "Uptime Checked", field: "Maint: Uptime Checked" }
+];
+var TESTING_CHECKLIST = [
+  { key: "desktop", label: "Desktop Browsers", field: "Test: Desktop Browsers" },
+  { key: "mobile", label: "Mobile Browsers", field: "Test: Mobile Browsers" },
+  { key: "titles", label: "Page Titles & Meta", field: "Test: Page Titles & Meta" },
+  { key: "links", label: "Links & Navigation", field: "Test: Links & Navigation" },
+  { key: "forms", label: "Form Functionality", field: "Test: Form Functionality" },
+  {
+    key: "interactions",
+    label: "Interactions & Animations",
+    field: "Test: Interactions & Animations"
+  },
+  { key: "updates", label: "Verified After Updates", field: "Test: Verified After Updates" }
+];
+var ALL_CHECKLIST_FIELDS = [...MAINTENANCE_CHECKLIST, ...TESTING_CHECKLIST].map(
+  (i) => i.field
+);
+function checklistFor(type) {
+  return type === "Maintenance" ? MAINTENANCE_CHECKLIST : type === "Testing" ? TESTING_CHECKLIST : [];
+}
+function isChecklistComplete(report) {
+  return checklistFor(report.reportType).every((i) => report.checklist[i.field] === true);
+}
+
 // src/reports/airtable/reports.ts
 var REPORTS_TABLE = "Reports";
 var REPORT_TYPES = ["Maintenance", "Testing", "Launch", "Announcement"];
@@ -3268,7 +3326,8 @@ function mapRow2(rec) {
     approvedBy: f["Approved By"] ?? null,
     deliveryStatus: f["Delivery status"] ?? "pending",
     renderedHtmlAttachment: html,
-    resendMessageId: f["Resend message ID"] ?? null
+    resendMessageId: f["Resend message ID"] ?? null,
+    checklist: Object.fromEntries(ALL_CHECKLIST_FIELDS.map((name) => [name, Boolean(f[name])]))
   };
 }
 function lighthouseFromFields(f) {
@@ -3793,6 +3852,13 @@ async function sendApprovedReports(options = {}) {
   return { output: lines.join("\n"), code: anyFailed ? 1 : 0 };
 }
 async function sendOne(client, base, site, report) {
+  if (!isChecklistComplete(report)) {
+    const items = checklistFor(report.reportType);
+    const done = items.filter((i) => report.checklist[i.field] === true).length;
+    throw new Error(
+      `Report ${report.reportId} checklist incomplete \u2014 ${done}/${items.length} items checked`
+    );
+  }
   if (!site.headerImage) {
     throw new Error(`Site '${site.name}' has no Header image set on the Websites row`);
   }
@@ -4009,7 +4075,33 @@ function relativeTimeFromNow(iso, now = /* @__PURE__ */ new Date()) {
 var REDDOOR_FAVICON_PNG_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAACXBIWXMAAAAnAAAAJwEqCZFPAAAAk1BMVEVHcEzkGTfjGDbjGTfjGTfjGTfjGTfjGDbjGDbjGTfjGTfjGTfkGTfjGTfjGDbjGDbkGTfjGDbjGDbjGTfjGTfjGDbjGTfjGDbjGTfjGDbjGTfjGTfjGDbjGDbjGDbjGDbjGTfjGTbjGDbjGDbjGDbjGDbjGTfjGTfjGTfjGDbjGDbjGTfjGDbjGDbjGTfjGTbkGTfxxbwzAAAALXRSTlMA4DABMOD8cOBwDltwi+bFLMlk54/BDVPk/I61/u2cFaBw9nqO1izBIQE+Becdo6eEAAABBElEQVQ4y91SCVYCMQwt4kxbcEHFfUFFcMGf9P6nM0kXEPEAmtdJs+cnU+f+He2fIIEAYuVgkmvDfTG9Rh+6LoRBUBqE7gi09l9eAeeTrZJoFd5uQWfj4VbPvRqwmj9zfzP6CYpyi48F6HW5A3WuMHsEPsfvO8cSkMPTe+pfRr/MTckdg+4enqL3PkYf/YFIqiiP8VAw6EZkH6QEO0xJLUhmdbY5+TjHkCVohprlcpzlnJw9GlNkrZC16uCmWIaAZItNrT4xV0T2yxrIWoNKy4rdVXOq0MycWp4r43FOMQWciibMYaOHCXKSPhapqTupGFAnwHoVuUUZq7jaSkqDb0/uD9MXqvJMDtU7lL0AAAAASUVORK5CYII=";
 var FAVICON_LINK = `<link rel="icon" type="image/png" href="data:image/png;base64,${REDDOOR_FAVICON_PNG_BASE64}" />`;
 
+// src/dashboard/onboarding.ts
+function isNonEmpty(s) {
+  return typeof s === "string" && s.trim().length > 0;
+}
+function onboardingStatus(row) {
+  const checks = {
+    firstAudit: isNonEmpty(row.lastLighthouseAuditAt),
+    recipients: isNonEmpty(row.reportRecipientsTo),
+    schedule: row.maintenanceFreq !== "None",
+    poc: isNonEmpty(row.pointOfContact)
+  };
+  const score = Object.values(checks).filter(Boolean).length;
+  return { score, total: 4, checks };
+}
+var ONBOARDING_LABELS = {
+  firstAudit: "First audit",
+  recipients: "Report recipients",
+  schedule: "Maintenance schedule",
+  poc: "Point of contact"
+};
+function missingOnboarding(row) {
+  const { checks } = onboardingStatus(row);
+  return Object.keys(ONBOARDING_LABELS).filter((key) => !checks[key]).map((key) => ONBOARDING_LABELS[key]);
+}
+
 // src/dashboard/render.ts
+var DASH = "\u2014";
 function scoreTile(label, value) {
   const display = value === null ? "\u2014" : String(value);
   return `<div class="tile"><div class="tile-value">${escapeHtml(display)}</div><div class="tile-label">${escapeHtml(label)}</div></div>`;
@@ -4042,10 +4134,25 @@ function securitySub(site) {
   const l = site.securityVulnsLow ?? 0;
   return `${c}C / ${h}H / ${m}M / ${l}L`;
 }
+function checklistBlock(r) {
+  const items = checklistFor(r.reportType);
+  if (items.length === 0) return "";
+  const rid = escapeHtml(r.id);
+  const url = `/api/reports/${encodeURIComponent(r.id)}/checklist`;
+  const boxes = items.map((item) => {
+    const checked = r.checklist[item.field] === true ? " checked" : "";
+    return `<label class="check-item"><input type="checkbox" class="checklist-checkbox" data-checklist-report-id="${rid}" data-field="${escapeHtml(item.field)}" data-checklist-url="${escapeHtml(url)}"${checked} /> ${escapeHtml(item.label)}</label>`;
+  }).join("");
+  return `<div class="checklist" data-checklist-for="${rid}">${boxes}</div>`;
+}
+function approveButton(r) {
+  const disabled = isChecklistComplete(r) ? "" : " disabled";
+  return `<button class="approve" data-report-id="${escapeHtml(r.id)}" data-approve-url="/api/reports/${encodeURIComponent(r.id)}/approve"${disabled}>Approve</button>`;
+}
 function pendingRow(r) {
   const type = escapeHtml(r.reportType);
   const period = r.period ? escapeHtml(r.period) : "\u2014";
-  return `<li><strong>${type}</strong> <span class="muted">${period}</span> <button class="approve" data-report-id="${escapeHtml(r.id)}" data-approve-url="/api/reports/${encodeURIComponent(r.id)}/approve">Approve</button></li>`;
+  return `<li><div class="pending-head"><strong>${type}</strong> <span class="muted">${period}</span> ${approveButton(r)}</div>${checklistBlock(r)}</li>`;
 }
 function pendingSection(reports) {
   const pending = reports.filter(isPendingApproval);
@@ -4055,13 +4162,29 @@ function pendingSection(reports) {
     <ul class="pending-list">${pending.map(pendingRow).join("")}</ul>
   </div>`;
 }
+function gaUsersCell(r) {
+  if (r.gaUsersCurrent === null) return DASH;
+  const current = String(r.gaUsersCurrent);
+  if (r.gaUsersPrevious === null) return escapeHtml(current);
+  const delta = r.gaUsersCurrent - r.gaUsersPrevious;
+  const sign = delta > 0 ? "+" : "";
+  return `${escapeHtml(current)} <span class="muted">(${escapeHtml(`${sign}${delta}`)})</span>`;
+}
+function searchCell(r) {
+  if (r.searchFoundPage1 && r.searchPosition !== null) {
+    return escapeHtml(`#${r.searchPosition}`);
+  }
+  return DASH;
+}
 function reportRow(r) {
-  const date = r.completedOn ? escapeHtml(r.completedOn) : "\u2014";
+  const date = r.completedOn ? escapeHtml(r.completedOn) : DASH;
   const type = escapeHtml(r.reportType);
   const id = escapeHtml(r.reportId);
+  const ga = gaUsersCell(r);
+  const search = searchCell(r);
   const link = r.renderedHtmlAttachment ? `<a href="${escapeHtml(safeUrl(r.renderedHtmlAttachment.url))}">view</a>` : `<span class="muted">no attachment</span>`;
-  const action = isPendingApproval(r) ? `<button class="approve" data-report-id="${escapeHtml(r.id)}" data-approve-url="/api/reports/${encodeURIComponent(r.id)}/approve">Approve</button>` : "";
-  return `<tr><td>${date}</td><td>${type}</td><td><code>${id}</code></td><td>${link}</td><td>${action}</td></tr>`;
+  const action = isPendingApproval(r) ? approveButton(r) : "";
+  return `<tr><td>${date}</td><td>${type}</td><td><code>${id}</code></td><td>${ga}</td><td>${search}</td><td>${link}</td><td>${action}</td></tr>`;
 }
 function submissionRow(s) {
   const when = s.submittedAt ? escapeHtml(relativeTimeFromNow(s.submittedAt)) : "\u2014";
@@ -4087,6 +4210,34 @@ function submissionsSection(submissions) {
     <ul class="subm-list">${recent.map(submissionRow).join("")}</ul>
   </div>`;
 }
+function setupSection(site) {
+  const { score, total } = onboardingStatus(site);
+  const missing2 = missingOnboarding(site);
+  const detail = missing2.length === 0 ? `<span class="setup-ok">complete</span>` : `<span class="setup-missing">Missing: ${escapeHtml(missing2.join(", "))}</span>`;
+  return `<div class="setup-line">Setup ${score}/${total} \u2014 ${detail}</div>`;
+}
+function detailRow(label, value) {
+  const display = typeof value === "string" && value.trim().length > 0 ? escapeHtml(value.trim()) : DASH;
+  return `<div class="detail"><dt>${escapeHtml(label)}</dt><dd>${display}</dd></div>`;
+}
+function siteDetailsSection(site) {
+  const lastCommit = site.lastCommitAt ? `${relativeTimeFromNow(site.lastCommitAt)}` : null;
+  const rows = [
+    detailRow("Maintenance cadence", site.maintenanceFreq),
+    detailRow("Testing cadence", site.testingFreq),
+    detailRow("Report recipients (To)", site.reportRecipientsTo),
+    detailRow("Report recipients (CC)", site.reportRecipientsCc),
+    detailRow("Point of contact", site.pointOfContact),
+    detailRow("GA4 property", site.ga4PropertyId),
+    detailRow("Search query", site.searchQuery),
+    detailRow("Git repo", site.gitRepo),
+    detailRow("Last commit", lastCommit)
+  ].join("");
+  return `<div class="section site-details">
+    <h2>Site details</h2>
+    <dl class="details">${rows}</dl>
+  </div>`;
+}
 var STYLES = `
 :root { color-scheme: light dark; }
 body { font: 16px/1.5 system-ui, -apple-system, sans-serif; max-width: 860px; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; }
@@ -4111,7 +4262,12 @@ th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid #eee; }
 button.approve { font: inherit; padding: 0.35rem 0.85rem; border: 1px solid #2c7; border-radius: 6px; background: #2c7; color: #fff; cursor: pointer; }
 button.approve:disabled { opacity: 0.6; cursor: default; }
 .pending-list { list-style: none; padding: 0; margin: 0; }
-.pending-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-bottom: 1px solid #eee; }
+.pending-list li { padding: 0.5rem; border-bottom: 1px solid #eee; }
+@media (prefers-color-scheme: dark) { .pending-list li { border-color: #2a2a2a; } }
+.pending-head { display: flex; align-items: center; gap: 0.5rem; }
+.checklist { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.5rem 0 0.25rem 0.25rem; }
+.check-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
+.check-item input { margin: 0; }
 .pill { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 700; }
 .subm-list { list-style: none; padding: 0; margin: 0; }
 .subm-item { padding: 0.6rem 0; border-bottom: 1px solid #eee; }
@@ -4125,6 +4281,14 @@ button.subm-status:disabled { opacity: 0.6; cursor: default; }
 .pill.subm-read { background: #f0f0f0; color: #555; }
 .pill.subm-archived { background: #eee; color: #888; }
 .pill.subm-spam { background: #fdecea; color: #b00; }
+.home { display: inline-block; font-size: 0.9rem; margin-bottom: 0.75rem; text-decoration: none; }
+.setup-line { font-size: 0.9rem; color: #666; margin-bottom: 1rem; }
+.setup-ok { color: #1b7a2f; font-weight: 600; }
+.setup-missing { color: #a65a00; }
+.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem 1.5rem; margin: 0; }
+.detail { display: flex; flex-direction: column; }
+.detail dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #999; }
+.detail dd { margin: 0; }
 `;
 function renderSiteDashboardHtml(site, reports, submissions = []) {
   const name = escapeHtml(site.name);
@@ -4146,7 +4310,7 @@ function renderSiteDashboardHtml(site, reports, submissions = []) {
   const auditedLine = site.lastLighthouseAuditAt ? `<div class="audited">Last audited ${escapeHtml(relativeTimeFromNow(site.lastLighthouseAuditAt))}</div>` : "";
   const recentReports = [...reports].sort((a, b) => (b.completedOn ?? "").localeCompare(a.completedOn ?? "")).slice(0, 6);
   const reportsSection = recentReports.length === 0 ? `<div class="empty">No reports yet.</div>` : `<table>
-          <thead><tr><th>Completed</th><th>Type</th><th>ID</th><th>Report</th><th></th></tr></thead>
+          <thead><tr><th>Completed</th><th>Type</th><th>ID</th><th>GA users</th><th>Search</th><th>Report</th><th></th></tr></thead>
           <tbody>${recentReports.map(reportRow).join("")}</tbody>
         </table>`;
   return `<!doctype html>
@@ -4159,9 +4323,11 @@ function renderSiteDashboardHtml(site, reports, submissions = []) {
   <style>${STYLES}</style>
 </head>
 <body>
+  <a class="home" href="/">\u2190 Fleet home</a>
   <h1>${name}</h1>
   <div class="meta"><a href="${escapeHtml(urlSafe)}">${escapeHtml(site.url)}</a></div>
   ${auditedLine}
+  ${setupSection(site)}
   ${pendingSection(reports)}
   ${submissionsSection(submissions)}
 
@@ -4179,6 +4345,8 @@ function renderSiteDashboardHtml(site, reports, submissions = []) {
     <h2>Reports</h2>
     ${reportsSection}
   </div>
+
+  ${siteDetailsSection(site)}
   <script>
     document.querySelectorAll("button.approve").forEach((b) => {
       b.addEventListener("click", async () => {
@@ -4212,39 +4380,52 @@ function renderSiteDashboardHtml(site, reports, submissions = []) {
         }
       });
     });
+    // Checklist gate: ticking a box POSTs the one field; the response { complete }
+    // decides whether THIS report's Approve button is enabled. Scoped per report by
+    // matching the checkbox's report id to the Approve button's id, so multiple
+    // pending reports on one page never cross-toggle. On failure the checkbox reverts.
+    document.querySelectorAll("input.checklist-checkbox").forEach((cb) => {
+      cb.addEventListener("change", async () => {
+        const reportId = cb.dataset.checklistReportId;
+        const approveBtn = document.querySelector(
+          'button.approve[data-report-id="' + (window.CSS && CSS.escape ? CSS.escape(reportId) : reportId) + '"]',
+        );
+        cb.disabled = true;
+        try {
+          const res = await fetch(cb.dataset.checklistUrl, {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ reportId, field: cb.dataset.field, value: cb.checked }),
+          });
+          if (!res.ok) throw new Error("bad status");
+          const data = await res.json();
+          if (approveBtn) approveBtn.disabled = !data.complete;
+        } catch {
+          // Revert the optimistic flip so the box reflects the (unchanged) server state.
+          cb.checked = !cb.checked;
+        } finally {
+          cb.disabled = false;
+        }
+      });
+    });
   </script>
 </body>
 </html>`;
 }
 
-// src/dashboard/onboarding.ts
-function isNonEmpty(s) {
-  return typeof s === "string" && s.trim().length > 0;
-}
-function onboardingStatus(row) {
-  const checks = {
-    firstAudit: isNonEmpty(row.lastLighthouseAuditAt),
-    recipients: isNonEmpty(row.reportRecipientsTo),
-    schedule: row.maintenanceFreq !== "None",
-    poc: isNonEmpty(row.pointOfContact)
-  };
-  const score = Object.values(checks).filter(Boolean).length;
-  return { score, total: 4, checks };
-}
-
 // src/dashboard/fleet-render.ts
-var DASH = "\u2014";
+var DASH2 = "\u2014";
 function scoreSpan(category, value) {
-  const display = value === null ? DASH : String(value);
+  const display = value === null ? DASH2 : String(value);
   return `<span class="score ${category}">${escapeHtml(display)}</span>`;
 }
 function a11ySpan(value) {
-  const display = value === null ? DASH : String(value);
+  const display = value === null ? DASH2 : String(value);
   return `<span class="metric a11y">${escapeHtml(display)}</span>`;
 }
 function depsSpan(drifted, majorBehind, outdated) {
   if (drifted === null || majorBehind === null) {
-    return `<span class="metric deps">${DASH}</span>`;
+    return `<span class="metric deps">${DASH2}</span>`;
   }
   const driftPart = drifted === 0 ? "0" : `${drifted} drifted (${majorBehind} major)`;
   const display = outdated === null ? driftPart : `${driftPart} \xB7 ${outdated} outdated`;
@@ -4252,7 +4433,7 @@ function depsSpan(drifted, majorBehind, outdated) {
 }
 function securitySpan(critical, high, moderate, low) {
   if (critical === null || high === null || moderate === null || low === null) {
-    return `<span class="metric sec">${DASH}</span>`;
+    return `<span class="metric sec">${DASH2}</span>`;
   }
   const total = critical + high + moderate + low;
   const display = total === 0 ? "0" : `${critical}C/${high}H/${moderate}M/${low}L`;
@@ -4262,6 +4443,10 @@ function card(site) {
   const name = escapeHtml(site.name);
   const href = `/s/${escapeHtml(siteSlug(site.name))}`;
   const onboarding = onboardingStatus(site);
+  const missing2 = missingOnboarding(site);
+  const setupTitle = escapeHtml(
+    missing2.length === 0 ? "Setup complete" : `Missing: ${missing2.join(", ")}`
+  );
   const audited = relativeTimeFromNow(site.lastLighthouseAuditAt);
   const safeSiteUrl = escapeHtml(safeUrl(site.url));
   const visibleUrl = escapeHtml(site.url);
@@ -4269,15 +4454,15 @@ function card(site) {
     <header class="card-head">
       <a class="site" href="${href}">${name}</a>
       <a class="url" href="${safeSiteUrl}" target="_blank" rel="noopener">${visibleUrl}</a>
-      <span class="setup">Setup: <strong>${onboarding.score}/${onboarding.total}</strong></span>
+      <span class="setup" title="${setupTitle}">Setup: <strong>${onboarding.score}/${onboarding.total}</strong></span>
       <span class="audited">Audited: <strong>${escapeHtml(audited)}</strong></span>
     </header>
     <div class="card-metrics">
       <span class="cluster lighthouse">
-        ${scoreSpan("perf", site.pScore)}
-        ${scoreSpan("a11y-lh", site.rScore)}
-        ${scoreSpan("bp", site.bpScore)}
-        ${scoreSpan("seo", site.seoScore)}
+        <span class="metric-label">Perf</span> ${scoreSpan("perf", site.pScore)}
+        <span class="metric-label">Access</span> ${scoreSpan("a11y-lh", site.rScore)}
+        <span class="metric-label">BP</span> ${scoreSpan("bp", site.bpScore)}
+        <span class="metric-label">SEO</span> ${scoreSpan("seo", site.seoScore)}
       </span>
       <span class="cluster health">
         <span class="metric-label">a11y</span> ${a11ySpan(site.a11yViolations)}