// TechMinds Speedtest — production frontend.
// Real measurement against same-origin /api/* endpoints. Visual layer is
// preserved from the original artifact; the simulated traces are gone.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ----------------------------- helpers -----------------------------
const fmt = (n, d = 1) => {
if (!isFinite(n)) return '—';
if (n >= 100) return n.toFixed(0);
return n.toFixed(d);
};
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const lerp = (a, b, t) => a + (b - a) * t;
const easeOutExpo = t => t === 1 ? 1 : 1 - Math.pow(2, -8 * t);
const easeOutCubic = t => 1 - Math.pow(1 - t, 3);
// Non-linear gauge mapping: speed (Mbps) -> angle (-110deg .. 110deg)
// Use piecewise log so 0..1 reads nicely AND 1..2000 fits the dial.
const TICKS = [0, 5, 10, 25, 50, 100, 250, 500, 1000];
const ANGLE_MIN = -90;
const ANGLE_MAX = 90;
function speedToAngle(mbps) {
const v = clamp(mbps, 0, 1000);
// log-ish: map 0..1000 to 0..1 via log10(1+v)/log10(1001)
const t = Math.log10(1 + v) / Math.log10(1001);
return ANGLE_MIN + (ANGLE_MAX - ANGLE_MIN) * t;
}
// ----------------------------- MEASUREMENT -----------------------------
// Real network probes against same-origin /api/* endpoints. Each function
// streams real bytes (or ping replies), drives a sliding-window throughput
// estimator, and calls onSample(...) frequently so React state — and the
// dial — track what's actually on the wire. AbortController-friendly.
const PING_COUNT = 14; // number of latency samples
const PING_GAP_MS = 70; // pause between pings; keeps RTT independent
// Multi-origin hosts. Previous attempt (cloudflared origin) tanked DL
// because each per-host TCP needed its own slow-start to the home origin
// and 10 MiB transfers never reached steady state. That doesn't apply
// anymore: with Worker + R2 at the CF edge, slow-start is purely
// client↔edge (sub-10ms RTT, completes in a couple round-trips), and
// the cloudflared upload throttle is out of the data plane entirely.
// Fan-out across 4 distinct hostnames so the browser opens 4 distinct
// TCP/QUIC connections — Speedtest.net-style multi-stream methodology
// that breaks past single-CWND ceilings on H/2 multiplex.
const PARALLEL_HOSTS = [
'cdn1.techmindsinc.net',
'cdn2.techmindsinc.net',
'cdn3.techmindsinc.net',
'cdn4.techmindsinc.net',
];
// Probe each candidate host with a tiny ping. Drops any that fail (DNS
// error, CORS reject, 404, etc.). Returns at minimum [''] meaning
// same-origin-only fallback. The empty-string sentinel means "use
// relative URLs"; non-empty entries are absolute hostnames.
async function discoverHosts(signal) {
if (!PARALLEL_HOSTS.length) return [''];
// Reached by IP or from outside techmindsinc.net (LAN tests, direct-path tests): stay same-origin so the
// measurement is the path the visitor actually used, not a mix with the Cloudflare-served cdn hosts.
// Only the Cloudflare-served page (speedtest.techmindsinc.net / cdnN) fans out to the cdn hosts; the direct
// hostname (speed.techmindsinc.net, HTTP/1.1 → real parallel TCP on one host) and IP tests measure their own path.
if (!/^(speedtest|cdn\d+)\.techmindsinc\.net$/i.test(location.hostname)) return [''];
const results = await Promise.all(PARALLEL_HOSTS.map(async (host) => {
try {
const r = await fetch(`https://${host}/api/ping?_=probe_${Date.now()}`, {
cache: 'no-store',
signal,
mode: 'cors',
});
return r.ok ? host : null;
} catch {
return null;
}
}));
const working = results.filter(h => h !== null);
// Need at least 2 hosts to get any benefit. Otherwise fall back to
// same-origin so we don't spend extra DNS/TLS time for no gain.
return working.length >= 2 ? working : [''];
}
// Build a URL targeted at one of the multi-origin hosts, or relative
// when host is the empty-string sentinel (same-origin fallback).
function originUrl(host, path) {
return host ? `https://${host}${path}` : path;
}
// Multi-size sampling, mirroring speed.cloudflare.com's methodology:
// many small transfers probe RTT-dominated regimes, fewer large transfers
// probe bandwidth. The final number is the 90th-percentile throughput
// across every individual test. Small transfers under-read on RTT-heavy
// links — p90 inherently selects the bandwidth-dominated tail and ignores
// them.
// Adaptive ladder, matching speed.cloudflare.com exactly: sequential single
// streams (HTTP/2 over one TCP conn). Each bucket gates the next via
// `requireMbps` — the median throughput observed in the previous bucket has
// to clear the threshold or we bail. Slow lines stop at 10 MiB; fast lines
// run the full ladder.
//
// We tried parallel HTTP/2 fan-out for the big tiers; it didn't actually
// add bandwidth (multiple streams just share the conn's cwnd) and the
// per-stream samples were less representative of true line throughput.
const DL_BUCKETS = [
{ bytes: 100 * 1024, count: 10, requireMbps: 0, parallel: 1 }, // 100 KiB × 10 — RTT-dominated, single
{ bytes: 1 * 1024 * 1024, count: 8, requireMbps: 0, parallel: 1 }, // 1 MiB × 8 — partial slow-start
{ bytes: 10 * 1024 * 1024, count: 16, requireMbps: 0, parallel: 8 }, // 10 MiB × 16 — 8 parallel
{ bytes: 25 * 1024 * 1024, count: 16, requireMbps: 50, parallel: 8 }, // 25 MiB × 16 — 8 parallel
{ bytes: 100 * 1024 * 1024, count: 8, requireMbps: 200, parallel: 8 }, // 100 MiB × 8 — 8 parallel
];
// Multi-stream methodology, matching Speedtest.net (Ookla). On a gigabit
// line a single TCP stream is CWND-limited well below wire (a 200 ms RTT
// cloudflared path with 6 MB CWND tops out around 240 Mbps). Running
// 4 concurrent fetches and reporting the SUM of per-stream tail
// throughputs recovers the wire-saturation number — what your line
// actually delivers when multiple connections share it. This is what
// Speedtest.net does (they use 4-16 parallel TCP streams); the resulting
// numbers will read 30-60 % higher than speed.cloudflare.com's
// single-stream-style measurement, by design.
// Upload chunks stay reasonable (≤ 25 MiB) so the browser's per-XHR memcpy
// doesn't lock the main thread the way 50 MiB bodies did. Gates are
// permissive — the goal is to let the test run as far up the ladder as the
// line can actually sustain, not to bail aggressively. Phase budget is the
// real backstop on slow lines.
const UL_BUCKETS = [
{ bytes: 100 * 1024, count: 8, requireMbps: 0, parallel: 1 }, // 100 KiB — RTT-dominated
{ bytes: 1 * 1024 * 1024, count: 12, requireMbps: 0, parallel: 1 }, // 1 MiB — partial slow-start
{ bytes: 10 * 1024 * 1024, count: 8, requireMbps: 20, parallel: 1 }, // 10 MiB — TCP mostly converged
{ bytes: 25 * 1024 * 1024, count: 6, requireMbps: 80, parallel: 1 }, // 25 MiB — sustained throughput
{ bytes: 100 * 1024 * 1024, count: 4, requireMbps: 200, parallel: 1 }, // 100 MiB — gigabit-saturating
];
const DL_BUDGET_MS = 30000; // hard wall-clock ceiling per phase. Tests
const UL_BUDGET_MS = 30000; // are sequential within a bucket, so slow
// lines naturally bail out before they
// burn 60+ seconds on the big buckets.
// 30s gives mid-tier lines (150–300 Mbps)
// room to finish the 100 MiB / 25 MiB
// top bucket without being truncated.
const SAMPLE_WINDOW_MS = 1000; // legacy sliding-window helper, kept for
// bufferbloat which still needs sustained-load
// sampling
const FINAL_TAIL_MS = 2500;
// Dial readout uses peak-hold-with-decay so the needle lingers on the
// line's best moment instead of snapping to whatever the window reports
// right now. Each sampler tick: dial = max(live, prev * decayFactor),
// where decayFactor is computed from elapsed wall time since the last
// tick — exp(ln(0.5) * dt / HALFLIFE_MS) — so the decay rate is the
// SAME on the fast download sampler (~12 ticks/s) and the upload
// sampler (which often gets starved to ~1 tick/s by XHR/React work).
// Before this was per-tick at 0.98, which meant download decayed at
// 22 %/s while upload only decayed at 2 %/s, so users saw downloads
// snap back from 705 → 250 in 4 s while upload looked fine.
//
// HALFLIFE = 40 s, applied EVERY tick (not gated on activity). Always-on
// decay gives the needle visible rhythm — it drifts down a touch between
// per-bucket samples and jumps up when a new high arrives. An earlier
// version of this code suppressed decay whenever data was flowing; the
// result was a needle that climbed monotonically to the peak and then
// sat there for the rest of the phase, which felt stuck.
// At 40 s half-life: a 705 Mbps peak drifts to ~650 after 5 s and
// ~590 after 10 s. We previously ran 15 s, which was too aggressive —
// users saw the needle drop from 705 to 500 between bucket samples and
// the test ended with a 200 Mbps jump back up to the headline. 40 s
// keeps the needle within ~15 % of peak across a typical phase, so the
// final-number latch is a small step rather than a leap.
//
// The "live" value for the dial is win.tail(DIAL_TAIL_MS) — last 500 ms
// only — not win.instant() over the full 1 s window. Reason: the
// per-bucket sample uses tailMbps over the last half of each transfer
// (steady-state, post-slow-start). win.instant() averages slow-start
// ramp in, so its peaks were reading 20-30 % below the tail throughput
// that feeds p90 — users saw the dial top out at 540 while the headline
// reported 660. Same 500 ms slice now feeds both, so what's on screen
// matches what gets reported.
const DIAL_PEAK_HALFLIFE_MS = 40000;
const DIAL_TAIL_MS = 500;
// bytes/ms -> Mbps. (bytes / ms) * 8 = bits/ms = kbits/s. /1000 = Mbps.
const bytesPerMsToMbps = (bytes, ms) => (bytes * 8) / (ms * 1000);
function median(arr) {
if (!arr.length) return 0;
const s = [...arr].sort((a, b) => a - b);
const m = s.length >> 1;
return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
}
async function measureLatency({ signal, onSample }) {
const samples = [];
let attempted = 0;
let failed = 0;
for (let i = 0; i < PING_COUNT; i++) {
if (signal?.aborted) throw new DOMException('aborted', 'AbortError');
attempted++;
const t0 = performance.now();
try {
const r = await fetch('/api/ping?_=' + Date.now() + '_' + i, { cache: 'no-store', signal });
if (!r.ok) { failed++; continue; }
// drain (should be 204 with no body, but be defensive)
await r.arrayBuffer();
} catch (err) {
if (err.name === 'AbortError') throw err;
failed++;
continue;
}
const rtt = performance.now() - t0;
samples.push(rtt);
if (samples.length >= 3) {
const med = median(samples);
const mad = samples.reduce((s, v) => s + Math.abs(v - med), 0) / samples.length;
onSample({ ping: med, jit: mad });
}
if (i < PING_COUNT - 1) await new Promise(r => setTimeout(r, PING_GAP_MS));
}
// Trim outliers (top + bottom) before final stats
const sorted = [...samples].sort((a, b) => a - b);
const trimmed = sorted.length >= 6 ? sorted.slice(1, -1) : sorted;
const ping = median(trimmed);
const jit = trimmed.reduce((s, v) => s + Math.abs(v - ping), 0) / Math.max(1, trimmed.length);
const lossPct = attempted ? failed / attempted : 0;
return { ping, jit, lossPct, samples };
}
// Shared sliding-window helper used by both download and upload.
function makeThroughputWindow() {
const ev = []; // {t, bytes}
return {
push(bytes) {
const t = performance.now();
ev.push({ t, bytes });
const cutoff = t - SAMPLE_WINDOW_MS;
while (ev.length && ev[0].t < cutoff) ev.shift();
},
instant() {
if (ev.length < 2) return 0;
const span = ev[ev.length - 1].t - ev[0].t;
if (span < 50) return 0;
const bytes = ev.reduce((s, x) => s + x.bytes, 0);
return bytesPerMsToMbps(bytes, span);
},
tail(durationMs) {
// Average throughput over the LAST durationMs (bytes / durationMs).
// We used to divide by the span between first and last event in the
// window — that exaggerated burst-y signals: when 3 parallel upload
// chunks ack within ~30 ms of each other, span-based math produced
// 6 MiB / 30 ms ≈ 1.6 Gbps phantom peaks even though the line was
// really doing ~400 Mbps. Window-based denominator caps the rate
// at what physically flowed in the period, matching the convention
// tailMbps already uses for per-bucket samples.
const cutoff = performance.now() - durationMs;
let bytes = 0;
for (const e of ev) if (e.t >= cutoff) bytes += e.bytes;
if (bytes === 0) return 0;
return bytesPerMsToMbps(bytes, durationMs);
},
};
}
// Wall-clock window aggregator (2026-09-20). Throughput is the bytes that crossed the link in a shared time
// window, summed over EVERY concurrent stream — never a sum of per-stream rates measured at different moments.
// The old per-stream "tail" sum read a 1 Gbit/s link as 2.2-2.7 Gbit/s once parallel streams finished
// staggered (each survivor's share rises as others finish; summing rates from different periods counts the
// link several times). A shared window is physically bounded by the link and needs no correction.
const WINDOW_MS = 250;
const RAMP_MS_DL = 1000; // ignore TCP slow-start at the front of a batch
const RAMP_MS_UL = 750;
function makeWindowAggregator(t0) {
const bins = new Map(); // bin index -> bytes
return {
add(bytes, at = performance.now()) {
const k = Math.floor((at - t0) / WINDOW_MS);
bins.set(k, (bins.get(k) || 0) + bytes);
},
// Credit `bytes` across the windows the transfer actually occupied, in proportion to how much of
// [fromMs, toMs] falls in each. Point-crediting a whole chunk at its ack instant is what made six
// 8 MiB uploads acking together read 1.3 Gbit/s on a 1 Gbit/s link: the bytes took ~420 ms to cross
// the wire but landed in one 250 ms bin.
addSpread(bytes, fromMs, toMs) {
const span = toMs - fromMs;
if (!(span > 0)) return this.add(bytes, toMs);
const k0 = Math.floor((fromMs - t0) / WINDOW_MS);
const k1 = Math.floor((toMs - t0) / WINDOW_MS);
for (let k = k0; k <= k1; k++) {
const binStart = t0 + k * WINDOW_MS;
const overlap = Math.min(toMs, binStart + WINDOW_MS) - Math.max(fromMs, binStart);
if (overlap > 0) bins.set(k, (bins.get(k) || 0) + (bytes * overlap) / span);
}
},
// Mbps per window fully inside [fromMs, toMs] (absolute performance.now() times).
rates(fromMs, toMs) {
const k0 = Math.ceil((fromMs - t0) / WINDOW_MS);
const k1 = Math.floor((toMs - t0) / WINDOW_MS) - 1;
const out = [];
for (let k = k0; k <= k1; k++) out.push(bytesPerMsToMbps(bins.get(k) || 0, WINDOW_MS));
return out;
},
};
}
// Aggregate a set of (throughput) samples into a final number. We use the
// 90th percentile — same convention as speed.cloudflare.com. p90 across a
// mix of small-and-large-file results filters out the RTT-dominated lows
// that small files report and keeps the bandwidth-saturated highs from
// large files. p50 underreports; max is too jittery; p90 is the sweet spot.
function p90(samples) {
if (!samples.length) return 0;
const sorted = [...samples].sort((a, b) => a - b);
const idx = Math.min(sorted.length - 1, Math.floor(sorted.length * 0.9));
return sorted[idx];
}
// One download. Returns {bytes, dt} or null on failure. Pushes per-chunk to
// the throughput window so the live dial moves continuously mid-transfer.
// Compute throughput from a list of timestamped byte events using only the
// "tail" of the transfer — the bandwidth-saturated portion after TCP
// slow-start has finished ramping. For short transfers (dt < ~200 ms),
// there's no useful tail, so falls back to overall bytes/dt. Returns Mbps.
//
// This is the difference between a per-test sample that reflects "what
// the line actually delivers" vs one that's dragged down by the slow-start
// portion of every transfer. CF's measurements skew high precisely because
// they sample steady-state, not whole-transfer averages.
function tailMbps(events, t0, tEnd, totalBytes) {
const dt = tEnd - t0;
if (dt < 1 || totalBytes < 1) return 0;
const overall = (totalBytes * 8) / (dt * 1000);
// Tail = last min(half-of-dt, 1 s). Below 200 ms total there's no useful
// tail; use overall.
if (dt < 200 || events.length < 2) return overall;
const tailSpan = Math.min(dt / 2, 1000);
const cutoff = tEnd - tailSpan;
let tailBytes = 0;
for (const e of events) if (e.t > cutoff) tailBytes += e.bytes;
if (tailBytes < 1) return overall;
// Return the tail throughput — that's the steady-state reading after
// slow-start. Previously we returned max(tail, overall), which sounded
// safe but quietly inflated every sample: any transfer that started fast
// and tapered (kernel-buffer flush is the common one) reported its peak
// instead of its sustainable rate.
return (tailBytes * 8) / (tailSpan * 1000);
}
async function downloadOnce(bucket, i, win, signal, host = '', agg = null) {
const t0 = performance.now();
let response;
try {
response = await fetch(
originUrl(host, `/api/download?bytes=${bucket.bytes}&_=${i}_${t0}`),
{ cache: 'no-store', signal, mode: host ? 'cors' : 'same-origin' }
);
} catch (err) {
if (err.name === 'AbortError') throw err;
return null;
}
if (!response.ok || !response.body) return null;
const reader = response.body.getReader();
let bytes = 0;
const events = []; // { t, bytes } for tail-window throughput
try {
while (true) {
const { done, value } = await reader.read();
if (done) break;
if (value) {
bytes += value.byteLength;
win.push(value.byteLength);
if (agg) agg.add(value.byteLength);
events.push({ t: performance.now(), bytes: value.byteLength });
}
}
} catch (err) {
if (err.name === 'AbortError') throw err;
return null;
}
const tEnd = performance.now();
const dt = tEnd - t0;
if (dt < 1 || bytes < 1) return null;
return { bytes, dt, t0, tEnd, mbps: tailMbps(events, t0, tEnd, bytes) };
}
// Samples below this bucket size aren't reliable measurements of sustained
// line bandwidth — they're dominated by TCP slow-start, TLS resumption
// overhead, and per-request RTT. Keep them for adaptive bucket gating
// (their median decides whether to escalate) but exclude from the final
// p90, otherwise they drag the headline number down by hundreds of Mbps
// on fast lines. Matches CF's behavior: their UI shows individual small
// tests reading 50–150 Mbps but the final reported number reflects only
// the bandwidth-saturated tests.
const FINAL_MIN_BUCKET_BYTES = 10 * 1024 * 1024;
function finalMbps(samples) {
const big = samples.filter(s => s.bucketBytes >= FINAL_MIN_BUCKET_BYTES).map(s => s.mbps);
const pool = big.length ? big : samples.map(s => s.mbps);
// Trimmed mean of the steady-state windows: drop the slowest 20% (a window clipped by a stream finishing,
// a scheduler hiccup) and the fastest 10% (the browser handing JS a burst of buffered bytes, which credits
// an earlier window's data to this one). What is left is bytes-over-time on a saturated link — the same
// shape Ookla uses. A percentile alone read up to 991 Mbit/s on a path whose payload ceiling is ~941.
if (pool.length < 5) return median(pool);
const sorted = [...pool].sort((a, b) => a - b);
const lo = Math.floor(sorted.length * 0.20);
const hi = Math.max(lo + 1, Math.ceil(sorted.length * 0.90));
const kept = sorted.slice(lo, hi);
return kept.reduce((t, v) => t + v, 0) / kept.length;
}
async function measureDownload({ signal, onSample, hosts = [''] }) {
// Samples = per-window aggregate throughput (all streams of a batch, one shared clock) taken while every
// stream of the batch is still loading the link; the final number is the p90 of those windows over the
// big buckets. The sliding window `win` feeds the live dial with the same physically-bounded aggregate.
const samples = []; // { mbps, bucketBytes }
const win = makeThroughputWindow();
const phaseStart = performance.now();
const agg = makeWindowAggregator(phaseStart);
let totalBytes = 0;
let peakDisplay = 0;
let lastDecayAt = performance.now();
const sampler = setInterval(() => {
const now = performance.now();
const elapsed = now - lastDecayAt;
lastDecayAt = now;
const decayed = peakDisplay * Math.pow(0.5, elapsed / DIAL_PEAK_HALFLIFE_MS);
peakDisplay = Math.max(win.tail(DIAL_TAIL_MS), decayed);
onSample(peakDisplay);
}, 150);
try {
let lastBucketMbps = Infinity; // first bucket always runs
outer: for (const bucket of DL_BUCKETS) {
if (lastBucketMbps < bucket.requireMbps) break;
const bucketStart = samples.length;
// Same-origin HTTP/1.1 gives at most 6 sockets per host; a 7th and 8th fetch would only queue.
const parallel = hosts.length > 1 ? (bucket.parallel || 1) : Math.min(bucket.parallel || 1, 6);
for (let i = 0; i < bucket.count; i += parallel) {
if (signal?.aborted) throw new DOMException('aborted', 'AbortError');
if (performance.now() - phaseStart > DL_BUDGET_MS) break outer;
const batchCount = Math.min(parallel, bucket.count - i);
const batchStart = performance.now();
const batchResults = await Promise.all(
Array.from({ length: batchCount }, (_, p) =>
downloadOnce(bucket, i + p, win, signal, hosts[(i + p) % hosts.length], agg)
)
);
const ok = batchResults.filter(Boolean);
if (!ok.length) continue;
const batchBytes = ok.reduce((n, r) => n + r.bytes, 0);
totalBytes += batchBytes;
const firstFinish = Math.min(...ok.map(r => r.tEnd));
const lastFinish = Math.max(...ok.map(r => r.tEnd));
// Windows while ALL streams of the batch were active (after the slow-start ramp).
const windows = agg.rates(batchStart + RAMP_MS_DL, firstFinish);
if (windows.length >= 2) {
for (const w of windows) samples.push({ mbps: w, bucketBytes: bucket.bytes });
} else {
// Short batch: the whole-batch average over its wall time is the only honest number.
samples.push({ mbps: bytesPerMsToMbps(batchBytes, Math.max(1, lastFinish - batchStart)), bucketBytes: bucket.bytes });
}
}
const bucketSamples = samples.slice(bucketStart).map(s => s.mbps);
if (bucketSamples.length) lastBucketMbps = median(bucketSamples);
}
} finally {
clearInterval(sampler);
}
if (samples.length === 0) {
throw new Error('Download failed: no successful tests completed');
}
const mbps = finalMbps(samples);
onSample(mbps);
return { mbps, bytes: totalBytes, samples };
}
// Upload transport (2026-09-20): UL_STREAMS concurrent rolling POSTs of Blob bodies. Same idea as the
// download side — real parallel TCP on HTTP/1.1, bytes credited to a shared wall-clock window at each ack.
// The previous engine sent 2 MiB requests through a 16-worker XHR pipeline that could only issue the next
// request after the previous ack reached the main thread; every render stall idled the link and a gigabit
// line read ~210 Mbit/s. Blob bodies are handed to the network process once (no per-request copy); streaming
// request bodies are deliberately avoided (need HTTP/2 in Chrome, unsupported for upload elsewhere).
const UL_CHUNK_MAX_BYTES = 8 * 1024 * 1024;
const UL_STREAMS_SAME_ORIGIN = 6; // browsers cap HTTP/1.1 at 6 sockets per host
const UL_STREAMS_MULTI_HOST = 8;
const UL_SESSION_MS = 3000; // one rolling session per big tier
async function uploadChunk({ body, signal, host = '' }) {
const startedAt = performance.now();
const r = await fetch(originUrl(host, `/api/upload?_=${Date.now()}_${Math.random().toString(36).slice(2, 8)}`), {
method: 'POST', body, cache: 'no-store', signal, mode: host ? 'cors' : 'same-origin',
headers: { 'Content-Type': 'application/octet-stream' },
});
if (!r.ok) throw new Error(`HTTP ${r.status}`);
await r.arrayBuffer().catch(() => {}); // drain the tiny JSON ack
return { startedAt, ackedAt: performance.now() };
}
// Small tiers (≤ 1 MiB): one POST, one sample (overall average) — used for gating only.
async function uploadSmall(blob, bucket, win, signal, failures, hosts) {
const t0 = performance.now();
try { await uploadChunk({ body: blob, signal, host: hosts[0] }); }
catch (err) { if (err.name === 'AbortError') throw err; failures.push(err.message || String(err)); return null; }
const dt = performance.now() - t0;
if (dt < 1) return null;
win.push(bucket.bytes);
return { bytes: bucket.bytes, mbps: bytesPerMsToMbps(bucket.bytes, dt) };
}
// Big tiers: UL_STREAMS workers keep POSTing `blob` for UL_SESSION_MS; samples = per-window aggregate rates
// after the ramp. Returns { bytes, windows } or null.
async function uploadRolling(blob, win, agg, signal, failures, hosts) {
const streams = hosts.length > 1 ? UL_STREAMS_MULTI_HOST : UL_STREAMS_SAME_ORIGIN;
const sessionStart = performance.now();
const deadline = sessionStart + UL_SESSION_MS;
let bytesAcked = 0;
let lastAckAt = 0;
let firstFailure = null;
const worker = async (id) => {
const host = hosts[id % hosts.length];
while (!signal?.aborted && !firstFailure && performance.now() < deadline) {
let span;
try { span = await uploadChunk({ body: blob, signal, host }); }
catch (err) { if (err.name === 'AbortError') return; if (!firstFailure) firstFailure = err.message || String(err); return; }
bytesAcked += blob.size;
if (span.ackedAt > lastAckAt) lastAckAt = span.ackedAt;
win.push(blob.size);
// The chunk crossed the wire between the request going out and the server's ack — spread it there.
agg.addSpread(blob.size, span.startedAt, span.ackedAt);
}
};
await Promise.all(Array.from({ length: streams }, (_, w) => worker(w)));
if (signal?.aborted) throw new DOMException('aborted', 'AbortError');
if (firstFailure) failures.push(firstFailure);
const sessionEnd = lastAckAt || performance.now();
if (bytesAcked < 1) return null;
// Measure only up to the last ack: the tail after it is drain time, not throughput.
const windows = agg.rates(sessionStart + RAMP_MS_UL, sessionEnd);
return { bytes: bytesAcked, windows: windows.length >= 2 ? windows : [bytesPerMsToMbps(bytesAcked, Math.max(1, sessionEnd - sessionStart))] };
}
async function measureUpload({ signal, onSample, hosts = [''] }) {
const samples = []; // { mbps, bucketBytes }
const win = makeThroughputWindow();
const phaseStart = performance.now();
const agg = makeWindowAggregator(phaseStart);
let totalBytes = 0;
const failures = [];
let peakDisplay = 0;
let lastDecayAt = performance.now();
const sampler = setInterval(() => {
const now = performance.now();
const elapsed = now - lastDecayAt;
lastDecayAt = now;
const decayed = peakDisplay * Math.pow(0.5, elapsed / DIAL_PEAK_HALFLIFE_MS);
peakDisplay = Math.max(win.tail(DIAL_TAIL_MS), decayed);
onSample(peakDisplay);
}, 150);
// One random buffer of the largest chunk we will ever send; Blob bodies are views of it, built once per size.
const masterBuf = new Uint8Array(UL_CHUNK_MAX_BYTES);
for (let off = 0; off < masterBuf.length; off += 65536) {
crypto.getRandomValues(masterBuf.subarray(off, Math.min(off + 65536, masterBuf.length)));
}
const blobOf = (bytes) => new Blob([masterBuf.subarray(0, Math.min(bytes, masterBuf.length))], { type: 'application/octet-stream' });
try {
let lastBucketMbps = Infinity; // first bucket always runs
outer: for (const bucket of UL_BUCKETS) {
if (lastBucketMbps < bucket.requireMbps) break;
const bucketStart = samples.length;
if (signal?.aborted) throw new DOMException('aborted', 'AbortError');
if (performance.now() - phaseStart > UL_BUDGET_MS) break outer;
if (bucket.bytes <= 1024 * 1024) {
const blob = blobOf(bucket.bytes);
for (let i = 0; i < bucket.count; i++) {
if (signal?.aborted) throw new DOMException('aborted', 'AbortError');
const r = await uploadSmall(blob, bucket, win, signal, failures, hosts);
if (r) { samples.push({ mbps: r.mbps, bucketBytes: bucket.bytes }); totalBytes += r.bytes; }
}
} else {
// Chunk so that every stream carries an equal share of this tier's size, capped at UL_CHUNK_MAX_BYTES.
const streams = hosts.length > 1 ? UL_STREAMS_MULTI_HOST : UL_STREAMS_SAME_ORIGIN;
const chunk = Math.max(256 * 1024, Math.min(UL_CHUNK_MAX_BYTES, Math.ceil(bucket.bytes / streams)));
const r = await uploadRolling(blobOf(chunk), win, agg, signal, failures, hosts);
if (r) { for (const w of r.windows) samples.push({ mbps: w, bucketBytes: bucket.bytes }); totalBytes += r.bytes; }
}
const bucketSamples = samples.slice(bucketStart).map(s => s.mbps);
if (bucketSamples.length) lastBucketMbps = median(bucketSamples);
}
} finally {
clearInterval(sampler);
}
if (samples.length === 0) {
throw new Error('Upload failed: ' + (failures[0] || 'no successful tests completed'));
}
const mbps = finalMbps(samples);
onSample(mbps);
return { mbps, bytes: totalBytes, samples };
}
// ----------------------------- BUFFERBLOAT -----------------------------
// Bufferbloat = how much your ping degrades under sustained load. Predicts
// video-call quality far better than raw download speed alone.
//
// Procedure:
// 1. Sample ping for ~1.2s with no other load (unloaded baseline).
// 2. Kick off N parallel sustained downloads.
// 3. Keep sampling ping for ~7s while downloads saturate the line.
// 4. Compare median loaded RTT vs median unloaded RTT; grade by delta.
//
// All client-orchestrated — reuses /api/ping and /api/download. No new
// backend endpoint needed.
const BB_UNLOADED_DURATION_MS = 1200;
const BB_LOADED_DURATION_MS = 7000;
const BB_PING_INTERVAL_MS = 200;
const BB_DOWNLOAD_STREAMS = 4;
const BB_DOWNLOAD_BYTES = 200 * 1024 * 1024; // 200 MiB per stream — server caps at 1 GiB
// Waveform-style thresholds, in *added* milliseconds during load.
function bufferbloatGrade(addedMs) {
if (addedMs < 5) return { grade: 'A+', headline: 'Pristine.', subline: 'Latency is rock-steady under load — calls and games will feel native.' };
if (addedMs < 30) return { grade: 'A', headline: 'Excellent.', subline: 'Negligible bloat. Streaming, calls, and gaming all comfortable.' };
if (addedMs < 60) return { grade: 'B', headline: 'Good.', subline: 'Minor latency bump under load — fine for most uses.' };
if (addedMs < 200) return { grade: 'C', headline: 'Workable.', subline: 'Noticeable lag spikes when the line is busy.' };
if (addedMs < 400) return { grade: 'D', headline: 'Bloated.', subline: 'Calls will stutter, games will rubber-band whenever something else uses the link.' };
return { grade: 'F', headline: 'Severely bloated.', subline: 'The line is unusable for real-time anything during sustained downloads. Likely fixable with router QoS.' };
}
async function measureBufferbloat({ signal, onSample, onPhase }) {
const samples = []; // {t, rttMs, phase: 'unloaded' | 'loaded'}
const startMs = performance.now();
let stop = false;
const dlAbort = new AbortController();
const onParentAbort = () => { stop = true; dlAbort.abort(); };
signal?.addEventListener('abort', onParentAbort);
let downloadStartMs = null; // set when load phase begins
const pingLoop = async () => {
while (!stop) {
const now = performance.now();
const elapsed = now - startMs;
const phase = downloadStartMs == null ? 'unloaded' : 'loaded';
const t0 = performance.now();
try {
const r = await fetch('/api/ping?_=' + Date.now() + '_bb_' + samples.length, {
cache: 'no-store',
signal,
});
if (!r.ok) continue;
await r.arrayBuffer();
} catch (err) {
if (err.name === 'AbortError') return;
continue;
}
const rtt = performance.now() - t0;
const sample = { t: elapsed, rttMs: rtt, phase };
samples.push(sample);
onSample?.(sample, samples);
const elapsedAfter = performance.now() - startMs;
const targetEnd = BB_UNLOADED_DURATION_MS + BB_LOADED_DURATION_MS;
if (elapsedAfter >= targetEnd) return;
await new Promise(r => setTimeout(r, BB_PING_INTERVAL_MS));
}
};
const downloadLoop = async () => {
// Wait until the unloaded window completes
await new Promise(r => setTimeout(r, BB_UNLOADED_DURATION_MS));
if (stop) return;
onPhase?.('loaded');
downloadStartMs = performance.now() - startMs;
// End the load window cleanly — without this nothing inside the
// consume() workers ever sets stop=true and we'd only escape via the
// outer hard-ceiling timeout.
const deadline = setTimeout(() => {
stop = true;
dlAbort.abort();
}, BB_LOADED_DURATION_MS);
// Fire N parallel streams. Each one we drain in a tight loop without
// computing throughput — the goal is just to keep the link saturated.
const consume = async (idx) => {
while (!stop) {
try {
const r = await fetch(`/api/download?bytes=${BB_DOWNLOAD_BYTES}&_=bb_${idx}_${Date.now()}`, {
cache: 'no-store',
signal: dlAbort.signal,
});
if (!r.ok || !r.body) return;
const reader = r.body.getReader();
while (!stop) {
const { done } = await reader.read();
if (done) break;
}
} catch { return; }
}
};
try {
await Promise.allSettled(
Array.from({ length: BB_DOWNLOAD_STREAMS }, (_, i) => consume(i))
);
} finally {
clearTimeout(deadline);
}
};
onPhase?.('unloaded');
try {
await Promise.race([
Promise.all([pingLoop(), downloadLoop()]),
// Hard ceiling — should never fire now that downloadLoop has its own
// deadline, but keeps a stuck fetch from hanging the test forever.
new Promise((_, rej) => setTimeout(() => rej(new Error('bufferbloat-timeout')), BB_UNLOADED_DURATION_MS + BB_LOADED_DURATION_MS + 5000)),
]);
} finally {
stop = true;
dlAbort.abort();
signal?.removeEventListener('abort', onParentAbort);
}
// Compute metrics
const unloaded = samples.filter(s => s.phase === 'unloaded').map(s => s.rttMs);
// Skip the first 1s of "loaded" phase so we measure steady-state, not ramp-up
const loadedSettleStart = downloadStartMs ?? BB_UNLOADED_DURATION_MS;
const loaded = samples
.filter(s => s.phase === 'loaded' && s.t >= loadedSettleStart + 1000)
.map(s => s.rttMs);
if (unloaded.length === 0 || loaded.length === 0) {
throw new Error('insufficient samples — try again');
}
const unloadedMed = median(unloaded);
const loadedMed = median(loaded);
const sortedLoaded = [...loaded].sort((a, b) => a - b);
const loadedP95 = sortedLoaded[Math.min(sortedLoaded.length - 1, Math.floor(sortedLoaded.length * 0.95))];
const addedMs = Math.max(0, loadedMed - unloadedMed);
const verdict = bufferbloatGrade(addedMs);
return {
samples,
downloadStartMs,
unloadedMed,
loadedMed,
loadedP95,
addedMs,
...verdict,
};
}
// ----------------------------- ICONS ------------------------------
const I = {
arrow: ,
download: ,
upload: ,
ping: ,
jitter: ,
share: ,
refresh: ,
globe: ,
shield: ,
};
// ----------------------------- WORDMARK -----------------------------
function Wordmark() {
return (
);
}
// ----------------------------- ANALOG DIAL -----------------------------
function AnalogDial({ angle, mainValue, mainLabel, phase, isInk }) {
// SVG dimensions — cropped to upper half so digit can flow below.
const W = 560, H = 320;
const cx = W / 2, cy = 300; // pivot (mostly off the bottom edge — only top half of dial shown)
const R = 230;
const innerR = 200;
const tickR = 220;
// Pre-compute ticks
const ticks = TICKS.map(v => {
const a = speedToAngle(v);
const rad = (a - 90) * Math.PI / 180;
return { v, a, x1: cx + Math.cos(rad) * (tickR - 14), y1: cy + Math.sin(rad) * (tickR - 14),
x2: cx + Math.cos(rad) * tickR, y2: cy + Math.sin(rad) * tickR,
lx: cx + Math.cos(rad) * (tickR - 32), ly: cy + Math.sin(rad) * (tickR - 32) };
});
// minor ticks
const minor = [];
for (let v = 0; v <= 1000; v += 25) {
if (TICKS.includes(v)) continue;
const a = speedToAngle(v);
const rad = (a - 90) * Math.PI / 180;
minor.push({ x1: cx + Math.cos(rad) * (tickR - 6), y1: cy + Math.sin(rad) * (tickR - 6),
x2: cx + Math.cos(rad) * tickR, y2: cy + Math.sin(rad) * tickR });
}
const stroke = isInk ? 'rgba(255,255,255,0.85)' : '#184878';
const hairline = isInk ? 'rgba(255,255,255,0.22)' : 'rgba(24,72,120,0.30)';
const subtleBg = isInk ? 'rgba(255,255,255,0.04)' : '#f1f5f9';
const grid = isInk ? 'rgba(252,250,244,0.06)' : 'rgba(26,22,18,0.05)';
// Arc path for the outer dial sweep
const arcStart = (ANGLE_MIN - 90) * Math.PI / 180;
const arcEnd = (ANGLE_MAX - 90) * Math.PI / 180;
const ax1 = cx + Math.cos(arcStart) * R, ay1 = cy + Math.sin(arcStart) * R;
const ax2 = cx + Math.cos(arcEnd) * R, ay2 = cy + Math.sin(arcEnd) * R;
const arcPath = `M ${ax1} ${ay1} A ${R} ${R} 0 0 1 ${ax2} ${ay2}`;
// active arc up to angle
const angClamped = clamp(angle, ANGLE_MIN, ANGLE_MAX);
const arcCurEnd = (angClamped - 90) * Math.PI / 180;
const acx = cx + Math.cos(arcCurEnd) * R, acy = cy + Math.sin(arcCurEnd) * R;
const largeArc = (angClamped - ANGLE_MIN) > 180 ? 1 : 0;
const activeArc = `M ${ax1} ${ay1} A ${R} ${R} 0 ${largeArc} 1 ${acx} ${acy}`;
return (
{/* big readout in normal flow, tucked just below the dial arc */}
{/* Field report card */}
{phase === 'done' && final && }
{/* RIGHT — context cards */}
{/* HISTORY */}
{/* FAQ */}
);
}
// ----------------------------- NETWORK / TOOLS PAGE STUBS -----------------------------
// Filled in by subsequent build steps. The shells exist now so routing works
// end-to-end before any feature wiring lands.
function NetworkPage({ isInk }) {
return (
We measure ping with the line idle, then again while pushing four sustained downloads. The gap between the two is bufferbloat — the bigger it is, the worse video calls and games feel when something else is downloading.
{result && }
{result && (
UNLOADED {result.unloadedMed.toFixed(1)} msLOADED {result.loadedMed.toFixed(1)} msADDED +{result.addedMs.toFixed(1)} ms
);
}
// ----------------------------- CALIBRATION BANNER -----------------------------
// Shown above the TopBar while we tune the measurement code. Amber, not red —
// it's a heads-up, not an outage. Scrolls away naturally (not sticky) so it
// doesn't permanently eat vertical space on mobile.
function CalibrationBanner() {
return (
⚠
Calibration in progress — measurement logic is being tuned, results may be inaccurate.
Calibrating · results may be inaccurate
);
}
// ----------------------------- TOP BAR -----------------------------
function TopBar({ route, isInk }) {
return (
);
}
// ----------------------------- TICKER -----------------------------
// Status pill is pinned on the left (always visible — its label changes as
// the test runs). Everything else lives inside a marquee track that scrolls
// continuously on narrow viewports so all items become readable. Two
// identical sets of items are rendered so translateX(-50%) lands exactly on
// a clone, making the loop seamless. Animation is suppressed on desktop
// (where everything fits) and when prefers-reduced-motion is on.
function TickerStrip({ server, isp, phase }) {
const items = [
`Server · ${server.city} (${server.iata})`,
`ISP · ${isp}`,
`Protocol · TCP / TLS 1.3`,
`Test engine · ${server.version || 'TM-Probe'}`,
];
const statusLabel = phase === 'idle' ? 'READY'
: phase === 'done' ? 'COMPLETE'
: `MEASURING · ${phase.toUpperCase()}`;
const renderSet = (clone) => (
{items.map((s, i) => (
{s}
))}
);
return (
{/* Pinned status pill */}
{statusLabel}
{/* Scrolling marquee */}
{renderSet(false)}
{renderSet(true)}
{/* Subtle right-edge fade so items don't get harshly clipped */}
Measure download, upload, latency and jitter against a TechMinds server near you. We'll tell you exactly what your line can and can't handle — in plain English.
);
}
// ----------------------------- FAQ -----------------------------
function FAQ({ isInk }) {
const qs = [
{ q: 'Why does my speed not match my plan?',
a: 'Wired speeds usually match the plan; Wi-Fi often does not. Distance to the router, the band (2.4 vs 5 vs 6 GHz), the device’s radio, and neighbouring networks all cost throughput. Run the test on Ethernet to see what the line itself is doing.' },
{ q: 'What is jitter, in plain language?',
a: 'Variation in latency between successive packets. Voice and video calls feel “glitchy” when jitter creeps above 5 ms or so, even if average latency looks fine.' },
{ q: 'Do you sell or share results?',
a: 'No. Results live in your browser only. You can copy a link to share a single report, but nothing is sent to ad networks, analytics, or third parties.' },
{ q: 'Why pick the closest server?',
a: 'A nearby server measures your local link, not the public internet at large. For a true reading of your ISP’s last mile, that’s usually what you want.' },
];
const [open, setOpen] = useState(0);
return (
READ MORE
Frequently asked questions
{qs.map((it, i) => (
{open === i && (
{it.a}
)}
))}
);
}
// ----------------------------- FOOTER -----------------------------
function Footer({ isInk }) {
return (
);
}
// ----------------------------- helpers -----------------------------
function nowStamp() {
const d = new Date();
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return `${months[d.getMonth()]} ${d.getDate()}, ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}
// ----------------------------- mount -----------------------------
ReactDOM.createRoot(document.getElementById('root')).render();
