@reddoorla/maintenance 0.13.0 → 0.14.0

package/dist/index.js

@@ -2218,6 +2218,13 @@ function mapRow(rec) {
     bpScore: f["bpScore"] ?? null,
     seoScore: f["seoScore"] ?? null,
     lastLighthouseAuditAt: f["Last lighthouse audit at"] ?? null,
+    a11yViolations: f["A11y Violations"] ?? null,
+    depsDrifted: f["Deps Drifted"] ?? null,
+    depsMajorBehind: f["Deps Major Behind"] ?? null,
+    securityVulnsCritical: f["Security Vulns Critical"] ?? null,
+    securityVulnsHigh: f["Security Vulns High"] ?? null,
+    securityVulnsModerate: f["Security Vulns Moderate"] ?? null,
+    securityVulnsLow: f["Security Vulns Low"] ?? null,
     dashboardToken: (() => {
       const raw = f["Dashboard Token"];
       if (typeof raw !== "string") return null;
@@ -2627,11 +2634,11 @@ async function uploadAttachment(recordId, fieldName, body, filename, contentType
 }
 
 // src/reports/draft.ts
-function scoresFromWebsite(siteRow2) {
-  const { pScore, rScore, bpScore, seoScore } = siteRow2;
+function scoresFromWebsite(siteRow) {
+  const { pScore, rScore, bpScore, seoScore } = siteRow;
   if (pScore === null || rScore === null || bpScore === null || seoScore === null) {
     throw new Error(
-      `Site '${siteRow2.name}' is missing one or more Lighthouse scores on the Websites row (pScore, rScore, bpScore, seoScore). Run 'reddoor-maint audit lighthouse' from the site's checkout and paste the four numbers into Airtable, then retry.`
+      `Site '${siteRow.name}' is missing one or more Lighthouse scores on the Websites row (pScore, rScore, bpScore, seoScore). Run 'reddoor-maint audit lighthouse' from the site's checkout and paste the four numbers into Airtable, then retry.`
     );
   }
   return { performance: pScore, accessibility: rScore, bestPractices: bpScore, seo: seoScore };
@@ -2641,18 +2648,18 @@ function daysAgo(today, n) {
   out.setDate(out.getDate() - n);
   return out;
 }
-async function draftReportForSite(base, siteRow2, reportType, options = {}) {
-  const scores = scoresFromWebsite(siteRow2);
+async function draftReportForSite(base, siteRow, reportType, options = {}) {
+  const scores = scoresFromWebsite(siteRow);
   const today = /* @__PURE__ */ new Date();
-  const slug = siteSlug(siteRow2.name);
-  const periodStart = base !== null ? await derivePeriodStart(base, siteRow2, reportType, today) : daysAgo(today, 30);
+  const slug = siteSlug(siteRow.name);
+  const periodStart = base !== null ? await derivePeriodStart(base, siteRow, reportType, today) : daysAgo(today, 30);
   const periodEnd = today;
   const completedOn = today;
-  const lastTestedDate = reportType === "Maintenance" && siteRow2.testingDay ? new Date(siteRow2.testingDay) : null;
+  const lastTestedDate = reportType === "Maintenance" && siteRow.testingDay ? new Date(siteRow.testingDay) : null;
   const cidName = `${slug}-header`;
   const { html } = await renderReportHtml({
-    siteName: siteRow2.name,
-    siteUrl: siteRow2.url,
+    siteName: siteRow.name,
+    siteUrl: siteRow.url,
     reportType,
     completedOn,
     lighthouse: scores,
@@ -2669,10 +2676,10 @@ async function draftReportForSite(base, siteRow2, reportType, options = {}) {
     return { reportRow: null, htmlPath: path, html };
   }
   if (base === null) throw new Error("base required when previewOnly=false");
-  const reportId = `${siteRow2.name} \u2014 ${reportType} \u2014 ${periodEnd.toISOString().slice(0, 10)}`;
+  const reportId = `${siteRow.name} \u2014 ${reportType} \u2014 ${periodEnd.toISOString().slice(0, 10)}`;
   const created = await createDraft(base, {
     reportId,
-    siteId: siteRow2.id,
+    siteId: siteRow.id,
     reportType,
     periodStart,
     periodEnd,
@@ -2685,8 +2692,8 @@ async function draftReportForSite(base, siteRow2, reportType, options = {}) {
   await setDraftReady(base, created.id, true);
   return { reportRow: created, htmlPath: null, html };
 }
-async function derivePeriodStart(base, siteRow2, reportType, today) {
-  const prior = await listReportsForSite(base, siteRow2.id);
+async function derivePeriodStart(base, siteRow, reportType, today) {
+  const prior = await listReportsForSite(base, siteRow.id);
   const sameType = prior.filter((r) => r.reportType === reportType && r.periodEnd).map((r) => r.periodEnd).sort();
   const latest = sameType[sameType.length - 1];
   return latest ? new Date(latest) : daysAgo(today, 30);
@@ -3019,6 +3026,40 @@ function verifyDashboardToken(provided, expected) {
   return timingSafeEqual(Buffer.from(provided, "utf-8"), Buffer.from(expected, "utf-8"));
 }
 
+// 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/relative-time.ts
+function relativeTimeFromNow(iso, now = /* @__PURE__ */ new Date()) {
+  if (!iso) return "\u2014";
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return "\u2014";
+  const seconds = Math.max(0, Math.floor((now.getTime() - t) / 1e3));
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  const weeks = Math.floor(days / 7);
+  if (weeks < 4) return `${weeks}w ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+
 // src/dashboard/fleet-render.ts
 function escapeHtml2(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
@@ -3031,54 +3072,88 @@ function safeUrl2(raw) {
   }
   return "#";
 }
-function scoreCell(value) {
-  const display = value === null ? "\u2014" : String(value);
-  return `<td class="score">${escapeHtml2(display)}</td>`;
+var DASH = "\u2014";
+function scoreSpan(category, value) {
+  const display = value === null ? DASH : String(value);
+  return `<span class="score ${category}">${escapeHtml2(display)}</span>`;
+}
+function a11ySpan(value) {
+  const display = value === null ? DASH : String(value);
+  return `<span class="metric a11y">${escapeHtml2(display)}</span>`;
 }
-function siteHrefCell(site) {
+function depsSpan(drifted, majorBehind) {
+  if (drifted === null || majorBehind === null) {
+    return `<span class="metric deps">${DASH}</span>`;
+  }
+  const display = drifted === 0 ? "0" : `${drifted} drifted (${majorBehind} major)`;
+  return `<span class="metric deps">${escapeHtml2(display)}</span>`;
+}
+function securitySpan(critical, high, moderate, low) {
+  if (critical === null || high === null || moderate === null || low === null) {
+    return `<span class="metric sec">${DASH}</span>`;
+  }
+  const total = critical + high + moderate + low;
+  const display = total === 0 ? "0" : `${critical}C/${high}H/${moderate}M/${low}L`;
+  return `<span class="metric sec">${escapeHtml2(display)}</span>`;
+}
+function card(site) {
   const name = escapeHtml2(site.name);
   const token = site.dashboardToken ?? "";
   const href = `/s/${escapeHtml2(siteSlug(site.name))}?t=${escapeHtml2(token)}`;
-  return `<td class="site"><a href="${href}">${name}</a></td>`;
-}
-function siteRow(site) {
-  return `<tr>
-    ${siteHrefCell(site)}
-    <td><a href="${escapeHtml2(safeUrl2(site.url))}" class="url" target="_blank" rel="noopener">${escapeHtml2(site.url)}</a></td>
-    ${scoreCell(site.pScore)}
-    ${scoreCell(site.rScore)}
-    ${scoreCell(site.bpScore)}
-    ${scoreCell(site.seoScore)}
-  </tr>`;
+  const onboarding = onboardingStatus(site);
+  const audited = relativeTimeFromNow(site.lastLighthouseAuditAt);
+  const safeSiteUrl = escapeHtml2(safeUrl2(site.url));
+  const visibleUrl = escapeHtml2(site.url);
+  return `<article class="card">
+    <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="audited">Audited: <strong>${escapeHtml2(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>
+      <span class="cluster health">
+        <span class="metric-label">a11y</span> ${a11ySpan(site.a11yViolations)}
+        <span class="metric-label">deps</span> ${depsSpan(site.depsDrifted, site.depsMajorBehind)}
+        <span class="metric-label">sec</span> ${securitySpan(
+    site.securityVulnsCritical,
+    site.securityVulnsHigh,
+    site.securityVulnsModerate,
+    site.securityVulnsLow
+  )}
+      </span>
+    </div>
+  </article>`;
 }
 var STYLES2 = `
 :root { color-scheme: light dark; }
 body { font: 16px/1.5 system-ui, -apple-system, sans-serif; max-width: 1100px; margin: 2rem auto; padding: 0 1rem; color: #1a1a1a; }
 @media (prefers-color-scheme: dark) { body { color: #e8e8e8; background: #111; } a { color: #6cb6ff; } }
 h1 { margin: 0 0 0.25rem; font-size: 1.75rem; }
-.meta { color: #666; margin-bottom: 2rem; }
-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
-th { text-align: left; padding: 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #666; border-bottom: 2px solid #ddd; }
-@media (prefers-color-scheme: dark) { th { border-color: #333; } }
-td { padding: 0.65rem 0.5rem; border-bottom: 1px solid #eee; }
-@media (prefers-color-scheme: dark) { td { border-color: #2a2a2a; } }
-td.site a { font-weight: 500; }
-td.url { color: #666; font-size: 0.85rem; }
-td.score { text-align: right; font-variant-numeric: tabular-nums; min-width: 3.5rem; }
+.meta { color: #666; margin-bottom: 1.5rem; }
 .empty { color: #999; padding: 2rem; text-align: center; border: 1px dashed #ccc; border-radius: 6px; }
+.cards { display: flex; flex-direction: column; gap: 0.75rem; }
+.card { border: 1px solid #e5e5e5; border-radius: 8px; padding: 0.9rem 1.1rem; }
+@media (prefers-color-scheme: dark) { .card { border-color: #2a2a2a; background: #181818; } }
+.card-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: baseline; }
+.card-head .site { font-weight: 600; font-size: 1.05rem; }
+.card-head .url { color: #666; font-size: 0.85rem; }
+.card-head .setup, .card-head .audited { color: #666; font-size: 0.85rem; }
+.card-head .setup { margin-left: auto; }
+.card-metrics { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
+.cluster { display: inline-flex; gap: 0.5rem; align-items: baseline; }
+.cluster.lighthouse .score { display: inline-block; min-width: 2.25rem; text-align: right; }
+.metric-label { color: #999; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
+.metric { font-feature-settings: "tnum"; }
 `;
 function renderFleetHomeHtml(sites) {
-  const body = sites.length === 0 ? `<div class="empty">No sites to display.</div>` : `<table>
-          <thead><tr>
-            <th>Site</th>
-            <th>URL</th>
-            <th>Perf</th>
-            <th>A11y</th>
-            <th>BP</th>
-            <th>SEO</th>
-          </tr></thead>
-          <tbody>${sites.map(siteRow).join("")}</tbody>
-        </table>`;
+  const body = sites.length === 0 ? `<div class="empty">No sites to display.</div>` : `<div class="cards">${sites.map(card).join("")}</div>`;
   return `<!doctype html>
 <html lang="en">
 <head>