diff --git a/site/src/scripts/techapi.js b/site/src/scripts/techapi.js
index 681250c792d..88650e48f1c 100644
--- a/site/src/scripts/techapi.js
+++ b/site/src/scripts/techapi.js
@@ -185,11 +185,13 @@ async function loadList(resource) {
});
})();
-function countUp(node, target) {
+function countUp(node, target, opts = {}) {
+ const { decimals = 0, suffix = "" } = opts;
const dur = 1100, t0 = performance.now();
(function tick(t) {
const p = Math.min(1, (t - t0) / dur);
- node.textContent = Math.round(target * (1 - Math.pow(1 - p, 3))).toLocaleString();
+ const v = target * (1 - Math.pow(1 - p, 3));
+ node.textContent = (decimals ? v.toFixed(decimals) : Math.round(v).toLocaleString()) + suffix;
if (p < 1) requestAnimationFrame(tick);
})(performance.now());
}
@@ -385,6 +387,57 @@ function countUp(node, target) {
});
})();
+/* ============================================================
+ VERIFICATION — live band distribution + verified ratio
+ (from v1/verification.json, built from data/_verify/status.json)
+ ============================================================ */
+(function verification() {
+ const pctEl = document.getElementById("verify-pct");
+ if (!pctEl) return;
+ const bar = document.getElementById("verify-bar");
+ const countEl = document.getElementById("verify-count");
+ const updatedEl = document.getElementById("verify-updated");
+ const setText = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
+
+ getJSON("v1/verification.json").then((d) => {
+ const t = d.totals || {};
+ const total = t.records || 0;
+ if (!total) throw new Error("empty snapshot");
+ const pct = t.verified_pct != null ? t.verified_pct : (t.verified || 0) / total * 100;
+
+ const obs = new IntersectionObserver((entries) => {
+ entries.forEach((e) => {
+ if (!e.isIntersecting) return;
+ countUp(pctEl, pct, { decimals: 1, suffix: "%" });
+ obs.disconnect();
+ });
+ }, { threshold: .4 });
+ obs.observe(pctEl);
+ pctEl.textContent = pct.toFixed(1) + "%";
+
+ countEl.textContent = `${(t.verified || 0).toLocaleString()} / ${total.toLocaleString()}`;
+
+ 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");
+ if (seg[0]) seg[0].style.width = (g / sum * 100).toFixed(2) + "%";
+ if (seg[1]) seg[1].style.width = (y / sum * 100).toFixed(2) + "%";
+ if (seg[2]) seg[2].style.width = (r / sum * 100).toFixed(2) + "%";
+ setText("verify-green", g.toLocaleString());
+ setText("verify-yellow", y.toLocaleString());
+ setText("verify-red", r.toLocaleString());
+
+ if (d.generated_at) {
+ const dt = new Date(d.generated_at);
+ if (!isNaN(dt)) updatedEl.textContent = "snapshot updated " +
+ dt.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+ }
+ }).catch(() => {
+ pctEl.textContent = "—";
+ if (countEl) countEl.textContent = "snapshot unavailable";
+ });
+})();
+
/* ============================================================
PLAYGROUND
============================================================ */
diff --git a/site/src/styles/techapi.css b/site/src/styles/techapi.css
index ccbb490de2c..a80fc1b5482 100644
--- a/site/src/styles/techapi.css
+++ b/site/src/styles/techapi.css
@@ -493,6 +493,42 @@ section.block { padding: 76px 0; border-top: 1px solid var(--border); }
.hiw-card p code { background: var(--surface-2); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border); font-size: .9em; color: var(--fg-2); }
@media (max-width: 760px) { .hiw { grid-template-columns: 1fr; } .hiw-card { border-right: none; border-bottom: 1px solid var(--border); } .hiw-card:last-child { border-bottom: none; } }
+/* ============================================================
+ VERIFICATION
+ ============================================================ */
+.verify { display: grid; grid-template-columns: .95fr 1.05fr; gap: 16px; --vg: #3fb950; --vy: var(--warn); --vr: var(--err); }
+.verify-panel { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 26px; display: flex; flex-direction: column; }
+.verify-headline { display: flex; align-items: baseline; gap: 16px; }
+.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); }
+.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); }
+.verify-bar .vb.yellow { background: var(--vy); }
+.verify-bar .vb.red { background: var(--vr); }
+.verify-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--muted); }
+.verify-legend b { color: var(--fg); font-family: var(--mono); margin-left: 2px; }
+.verify-legend .vdot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: baseline; }
+.verify-legend .vdot.green { background: var(--vg); }
+.verify-legend .vdot.yellow { background: var(--vy); }
+.verify-legend .vdot.red { background: var(--vr); }
+.verify-updated { margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: .03em; }
+.verify-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+.verify-tiers li { display: flex; gap: 14px; padding: 22px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.verify-tiers li:nth-child(2n) { border-right: none; }
+.verify-tiers li:nth-last-child(-n+2) { border-bottom: none; }
+.vt-n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-text); }
+.verify-tiers h4 { margin: 4px 0 7px; font-size: 16px; }
+.verify-tiers p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
+.verify-tiers p code, .sec-sub code { background: var(--surface-2); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border); font-size: .9em; color: var(--fg-2); font-family: var(--mono); }
+@media (max-width: 860px) {
+ .verify { grid-template-columns: 1fr; }
+ .verify-tiers { grid-template-columns: 1fr; }
+ .verify-tiers li { border-right: none; }
+ .verify-tiers li:nth-last-child(-n+2):not(:last-child) { border-bottom: 1px solid var(--border); }
+}
+
/* ============================================================
CTA + FOOTER
============================================================ */