From 3e9ac3f97999f27ca499be582951c3889cb963a4 Mon Sep 17 00:00:00 2001
From: Seungpyo1007 <rush94434@gmail.com>
Date: Thu, 6 Aug 2026 10:15:11 +0900
Subject: [PATCH] feat(site): show the verified rate per product alongside per
 record

Most smartphone records are regional and RAM variants of one phone, and
no source documents an individual SKU, so the per-record figure reads
lower than how well the products in the dataset are actually sourced.
The homepage now shows both readings of the same verifications, the
per-product one as a secondary line under the headline.

The block removes itself when the snapshot predates the field rather
than rendering a zero.

Refs #1
---
 site/src/pages/index.astro  |  7 +++++++
 site/src/scripts/techapi.js | 14 ++++++++++++++
 site/src/styles/techapi.css |  4 ++++
 3 files changed, 25 insertions(+)

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 44cf1a8e9dbb..1df2ea22a324 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -275,6 +275,13 @@ const endpoints = [
               <div class="verify-pct" id="verify-pct">—</div>
               <div class="verify-pct-l">records verified<br /><span id="verify-count">loading…</span></div>
             </div>
+            <!-- Most smartphone records are regional/RAM variants of one phone,
+                 and no source documents an individual SKU — so the same
+                 verifications are also shown per product. -->
+            <div class="verify-headline verify-models">
+              <div class="verify-pct" id="verify-models-pct">—</div>
+              <div class="verify-pct-l">models verified<br /><span id="verify-models-count">loading…</span></div>
+            </div>
             <div class="verify-bar" id="verify-bar" role="img" aria-label="Verification band distribution">
               <span class="vb green" style="width:0%"></span>
               <span class="vb yellow" style="width:0%"></span>
diff --git a/site/src/scripts/techapi.js b/site/src/scripts/techapi.js
index 352c40d7ca9f..b426741bdf9f 100644
--- a/site/src/scripts/techapi.js
+++ b/site/src/scripts/techapi.js
@@ -500,6 +500,20 @@ function countUp(node, target, opts = {}) {
 
     countEl.textContent = `${(t.verified || 0).toLocaleString()} / ${total.toLocaleString()}`;
 
+    // Same verifications counted per product. Older snapshots predate the
+    // field, so the block only appears once the numbers are actually there.
+    const mTotal = t.models || 0;
+    const mPctEl = document.getElementById("verify-models-pct");
+    if (mPctEl && mTotal) {
+      const mPct = t.verified_models_pct != null
+        ? t.verified_models_pct : (t.verified_models || 0) / mTotal * 100;
+      mPctEl.textContent = mPct.toFixed(1) + "%";
+      setText("verify-models-count",
+        `${(t.verified_models || 0).toLocaleString()} / ${mTotal.toLocaleString()}`);
+    } else if (mPctEl) {
+      mPctEl.closest(".verify-models")?.remove();
+    }
+
     const g = t.green || 0, y = t.yellow || 0, r = t.red || 0;
     const sum = Math.max(1, g + y + r);
     const seg = bar.querySelectorAll(".vb");
diff --git a/site/src/styles/techapi.css b/site/src/styles/techapi.css
index ed8dc0c544c4..d284de8edb03 100644
--- a/site/src/styles/techapi.css
+++ b/site/src/styles/techapi.css
@@ -509,6 +509,10 @@ section.block { padding: 76px 0; border-top: 1px solid var(--border); }
 .verify-pct { font-family: var(--mono); font-size: clamp(40px, 6vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--vg); }
 .verify-pct-l { color: var(--muted); font-size: 13px; line-height: 1.5; }
 .verify-pct-l span { color: var(--fg-2); font-family: var(--mono); }
+/* The per-product figure is the same verifications seen another way, so it sits
+   under the headline as a secondary reading rather than competing with it. */
+.verify-models { margin-top: 14px; }
+.verify-models .verify-pct { font-size: clamp(24px, 3.4vw, 34px); color: var(--fg-2); }
 .verify-bar { display: flex; height: 14px; margin-top: 24px; border-radius: 4px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--border); }
 .verify-bar .vb { height: 100%; transition: width .9s cubic-bezier(.2,.7,.2,1); }
 .verify-bar .vb.green { background: var(--vg); }