From a9fdc8cfa484adcbcb4728106f19d2cbf099ae50 Mon Sep 17 00:00:00 2001
From: orbit-braquemart <did:web:orbit-braquemart.test.pds.did.bot>
Date: Thu, 22 Oct 2026 20:28:55 +0000
Subject: [PATCH] fix: clarify cadence and activity stats

Replace the median/p90 slash with labeled typical and busy active-day values, and show the active-day percentage and best-day date instead of bare fractions.

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 docs/mockup.html | 114 ++++++++++++++++++++++++++++++++++++++---------
 web/app.js       |  49 ++++++++++++++------
 web/index.html   |  20 +++++----
 web/style.css    |  45 +++++++++++++++++++
 4 files changed, 186 insertions(+), 42 deletions(-)

diff --git a/docs/mockup.html b/docs/mockup.html
index 1fcb602..4fe0d72 100644
--- a/docs/mockup.html
+++ b/docs/mockup.html
@@ -1672,6 +1672,51 @@ h2::before { content: none; }
   font-variant-ligatures: none;
   font-feature-settings: "kern" 0, "liga" 0;
 }
+
+.matrix-cadence {
+  grid-template-columns: 76px repeat(2, minmax(0, 1fr));
+  column-gap: 20px;
+  row-gap: 5px;
+  border-top: 1px solid var(--border);
+}
+
+.cadence-row { display: contents; }
+
+.cadence-head span {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 8px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.cadence-period {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.cadence-value {
+  color: var(--ink);
+  font-family: var(--serif);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.matrix-stat .m { display: block; margin-top: 2px; color: var(--muted); font-family: var(--mono); font-size: 8px; }
+
+.cadence-note {
+  grid-column: 1 / -1;
+  margin: 2px 0 0;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 8px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
 </style>
 </head>
 <body>
@@ -1713,16 +1758,20 @@ h2::before { content: none; }
               <svg id="spark" viewBox="0 0 1000 72" role="img" aria-label="Daily commits with a seven-day average"></svg>
             </div>
             <div class="matrix-cadence" id="matrix-cadence" hidden>
-              <div class="matrix-stat">
-                <p class="k">commits / day · 1 year</p>
-                <p class="v" id="cadence-year">—</p>
-                <p class="m">median / p90</p>
+              <div class="cadence-row cadence-head">
+                <span></span><span>typical day</span><span>busy day</span>
+              </div>
+              <div class="cadence-row">
+                <span class="cadence-period">30 days</span>
+                <span class="cadence-value" id="cadence-30-typical">—</span>
+                <span class="cadence-value" id="cadence-30-busy">—</span>
               </div>
-              <div class="matrix-stat">
-                <p class="k">commits / day · 30 days</p>
-                <p class="v" id="cadence-30">—</p>
-                <p class="m">median / p90</p>
+              <div class="cadence-row">
+                <span class="cadence-period">1 year</span>
+                <span class="cadence-value" id="cadence-year-typical">—</span>
+                <span class="cadence-value" id="cadence-year-busy">—</span>
               </div>
+              <p class="cadence-note">active days only</p>
             </div>
             <div class="matrix-stats" id="matrix-stats"></div>
             <div class="tooltip matrix-tooltip" id="matrix-tooltip" hidden></div>
@@ -2092,13 +2141,22 @@ function renderMatrix() {
   const stats = $("matrix-stats");
   stats.replaceChildren();
   for (const item of [
-    { label: "active", value: `${activeDays}/${days.length}` },
-    { label: "best", value: fmt(best ? best.total : 0) },
-    { label: "streak", value: `${streak}d` },
+    {
+      label: "active days",
+      value: `${activeDays}/${days.length}`,
+      meta: `${Math.round((activeDays / days.length) * 100)}% of days`,
+    },
+    {
+      label: "best day",
+      value: fmt(best ? best.total : 0),
+      meta: best ? dayLabel(best.date) : "—",
+    },
+    { label: "streak", value: `${streak}d`, meta: "current" },
   ]) {
     const node = el("div", "matrix-stat");
     node.append(el("p", "k", item.label));
     node.append(el("p", "v", item.value));
+    node.append(el("p", "m", item.meta));
     stats.append(node);
   }
 
@@ -2146,23 +2204,37 @@ function percentile(values, fraction) {
   return values[Math.max(0, index)];
 }
 
+function activeCadence(points) {
+  const active = points
+    .map((point) => Math.max(0, point.total || 0))
+    .filter((value) => value > 0)
+    .sort((a, b) => a - b);
+  if (active.length === 0) return { typical: null, busy: null, active: 0 };
+  return {
+    typical: median(active),
+    busy: percentile(active, 0.9),
+    active: active.length,
+  };
+}
+
 function renderCadence(days) {
   const wrap = $("matrix-cadence");
-  if (days.length === 0) {
+  const year = activeCadence(days);
+  const month = activeCadence(days.slice(-30));
+  if (year.active === 0 && month.active === 0) {
     wrap.hidden = true;
     return;
   }
-  const year = days.map((point) => Math.max(0, point.total || 0)).sort((a, b) => a - b);
-  const month = days
-    .slice(-30)
-    .map((point) => Math.max(0, point.total || 0))
-    .sort((a, b) => a - b);
-  const label = (values) => `${rate(median(values))} / ${rate(percentile(values, 0.9))}`;
-  $("cadence-year").textContent = label(year);
-  $("cadence-30").textContent = label(month);
+  const value = (number) => (number === null ? "—" : rate(number));
+  $("cadence-30-typical").textContent = value(month.typical);
+  $("cadence-30-busy").textContent = value(month.busy);
+  $("cadence-year-typical").textContent = value(year.typical);
+  $("cadence-year-busy").textContent = value(year.busy);
+  $("cadence-30-busy").title = "90th percentile of active days in the last 30 days";
+  $("cadence-year-busy").title = "90th percentile of active days in the last year";
   $("matrix-cadence").setAttribute(
     "aria-label",
-    `Commits per day including zero days. One year median ${rate(median(year))}, p90 ${rate(percentile(year, 0.9))}. Thirty days median ${rate(median(month))}, p90 ${rate(percentile(month, 0.9))}.`,
+    `Typical and busy active days. Last 30 days: ${value(month.typical)} typical, ${value(month.busy)} busy across ${month.active} active days. Last year: ${value(year.typical)} typical, ${value(year.busy)} busy across ${year.active} active days.`,
   );
   wrap.hidden = false;
 }
diff --git a/web/app.js b/web/app.js
index a7d22cd..4c6b3a5 100644
--- a/web/app.js
+++ b/web/app.js
@@ -270,13 +270,22 @@ function renderMatrix() {
   const stats = $("matrix-stats");
   stats.replaceChildren();
   for (const item of [
-    { label: "active", value: `${activeDays}/${days.length}` },
-    { label: "best", value: fmt(best ? best.total : 0) },
-    { label: "streak", value: `${streak}d` },
+    {
+      label: "active days",
+      value: `${activeDays}/${days.length}`,
+      meta: `${Math.round((activeDays / days.length) * 100)}% of days`,
+    },
+    {
+      label: "best day",
+      value: fmt(best ? best.total : 0),
+      meta: best ? dayLabel(best.date) : "—",
+    },
+    { label: "streak", value: `${streak}d`, meta: "current" },
   ]) {
     const node = el("div", "matrix-stat");
     node.append(el("p", "k", item.label));
     node.append(el("p", "v", item.value));
+    node.append(el("p", "m", item.meta));
     stats.append(node);
   }
 
@@ -324,23 +333,37 @@ function percentile(values, fraction) {
   return values[Math.max(0, index)];
 }
 
+function activeCadence(points) {
+  const active = points
+    .map((point) => Math.max(0, point.total || 0))
+    .filter((value) => value > 0)
+    .sort((a, b) => a - b);
+  if (active.length === 0) return { typical: null, busy: null, active: 0 };
+  return {
+    typical: median(active),
+    busy: percentile(active, 0.9),
+    active: active.length,
+  };
+}
+
 function renderCadence(days) {
   const wrap = $("matrix-cadence");
-  if (days.length === 0) {
+  const year = activeCadence(days);
+  const month = activeCadence(days.slice(-30));
+  if (year.active === 0 && month.active === 0) {
     wrap.hidden = true;
     return;
   }
-  const year = days.map((point) => Math.max(0, point.total || 0)).sort((a, b) => a - b);
-  const month = days
-    .slice(-30)
-    .map((point) => Math.max(0, point.total || 0))
-    .sort((a, b) => a - b);
-  const label = (values) => `${rate(median(values))} / ${rate(percentile(values, 0.9))}`;
-  $("cadence-year").textContent = label(year);
-  $("cadence-30").textContent = label(month);
+  const value = (number) => (number === null ? "—" : rate(number));
+  $("cadence-30-typical").textContent = value(month.typical);
+  $("cadence-30-busy").textContent = value(month.busy);
+  $("cadence-year-typical").textContent = value(year.typical);
+  $("cadence-year-busy").textContent = value(year.busy);
+  $("cadence-30-busy").title = "90th percentile of active days in the last 30 days";
+  $("cadence-year-busy").title = "90th percentile of active days in the last year";
   $("matrix-cadence").setAttribute(
     "aria-label",
-    `Commits per day including zero days. One year median ${rate(median(year))}, p90 ${rate(percentile(year, 0.9))}. Thirty days median ${rate(median(month))}, p90 ${rate(percentile(month, 0.9))}.`,
+    `Typical and busy active days. Last 30 days: ${value(month.typical)} typical, ${value(month.busy)} busy across ${month.active} active days. Last year: ${value(year.typical)} typical, ${value(year.busy)} busy across ${year.active} active days.`,
   );
   wrap.hidden = false;
 }
diff --git a/web/index.html b/web/index.html
index 821d2fc..4fda492 100644
--- a/web/index.html
+++ b/web/index.html
@@ -47,16 +47,20 @@
               <svg id="spark" viewBox="0 0 1000 72" role="img" aria-label="Daily commits with a seven-day average"></svg>
             </div>
             <div class="matrix-cadence" id="matrix-cadence" hidden>
-              <div class="matrix-stat">
-                <p class="k">commits / day · 1 year</p>
-                <p class="v" id="cadence-year">—</p>
-                <p class="m">median / p90</p>
+              <div class="cadence-row cadence-head">
+                <span></span><span>typical day</span><span>busy day</span>
               </div>
-              <div class="matrix-stat">
-                <p class="k">commits / day · 30 days</p>
-                <p class="v" id="cadence-30">—</p>
-                <p class="m">median / p90</p>
+              <div class="cadence-row">
+                <span class="cadence-period">30 days</span>
+                <span class="cadence-value" id="cadence-30-typical">—</span>
+                <span class="cadence-value" id="cadence-30-busy">—</span>
               </div>
+              <div class="cadence-row">
+                <span class="cadence-period">1 year</span>
+                <span class="cadence-value" id="cadence-year-typical">—</span>
+                <span class="cadence-value" id="cadence-year-busy">—</span>
+              </div>
+              <p class="cadence-note">active days only</p>
             </div>
             <div class="matrix-stats" id="matrix-stats"></div>
             <div class="tooltip matrix-tooltip" id="matrix-tooltip" hidden></div>
diff --git a/web/style.css b/web/style.css
index 570c88a..150472d 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1664,3 +1664,48 @@ h2::before { content: none; }
   font-variant-ligatures: none;
   font-feature-settings: "kern" 0, "liga" 0;
 }
+
+.matrix-cadence {
+  grid-template-columns: 76px repeat(2, minmax(0, 1fr));
+  column-gap: 20px;
+  row-gap: 5px;
+  border-top: 1px solid var(--border);
+}
+
+.cadence-row { display: contents; }
+
+.cadence-head span {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 8px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.cadence-period {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.cadence-value {
+  color: var(--ink);
+  font-family: var(--serif);
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.matrix-stat .m { display: block; margin-top: 2px; color: var(--muted); font-family: var(--mono); font-size: 8px; }
+
+.cadence-note {
+  grid-column: 1 / -1;
+  margin: 2px 0 0;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 8px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
-- 
knotmirror 0.0.1