Build a single self-contained HTML file that turns observable USB cable tester data into a defensible cable classification, with a live visualization, live standards / power / alt-mode matrices, and a written inference log. Vanilla JS, no backend, no external libraries, no build step.
This is a benchmarking brief. I have a working reference implementation
(screenshots attached: usb-chaos-map-*.png). Your job: match or beat it.
Every control below must be wired so that changing it re-runs classification and repaints every tab live. No "click to recalculate" buttons.
| Control | Values |
|---|---|
| Host-side connector | Type-A, Type-B, Micro-B, Type-C |
| Device-side connector | Type-A, Type-B, Micro-B, Lightning, Type-C |
| E-Marker detected? | Yes / No / Unknown |
| E-Marker · advertised current | 3 A / 5 A / 5 A EPR / n/a |
| E-Marker · data speed grade | USB 2.0 / Gen 1 (5 G) / Gen 2 (10 G) / Gen 2x2 (20 G) / USB4 40 G / USB4 80 G / n/a |
| End-to-end DC resistance grade | < 50 mΩ (S) / < 150 mΩ (A) / < 300 mΩ (B) / > 300 mΩ (F) |
| Negotiated trigger | None / BC 1.2 / PD SPR / PD EPR / PPS / QC 3/4/5 |
| Observed link speed | 1.5 M / 12 M / 480 M / 5 G / 10 G / 20 G / 40 G / 80 G |
| Markings / certification | USB-IF / Thunderbolt / PD / None (multi-select) |
| Cable length | meters, numeric input |
| Active / Optical | Passive / Active (re-timer) / Optical (AOC) |
Quick-apply presets in the top toolbar:
- Reset to default
- "USB4 v2 · 240 W" (everything maxed, certified)
- "Dumb C-to-C" (unmarked, passive, 1 m)
- "Export JSON" — copy the full verdict to clipboard
For every input combination, compute and display:
- Cable class name — e.g.
Baseline C-to-C,C-to-C · USB4 v2 · 80 Gbps,USB 3.2 Gen 2 A↔C,Apple Lightning ↔ Type-C. - Max data rate (numeric + label).
- Max power (W) and band (
baseline/spr/epr/apple-2c/legacy). - Supported alt modes (possibly zero).
- Observable set — everything the tester directly reports.
- Inferred-supported set — things the cable can do given observables.
- Inferred-unsupported set — things it can't do but the physics allows.
- Excluded set — logically impossible given the connectors / markings.
- Inference log — colored entries (
GOOD/WARN/BAD/INF) with a short natural-language reason for each rule that fired.
- Ecosystem Map — radial SVG. Four concentric axes: data ceiling, power ceiling, alt-mode count, certification coverage. Each axis has an outer ring (spec maximum) and an inner filled disk scaled to the inferred ceiling. Spoke labels around the core show the observables (host, device, E-marker state, resistance, trigger, observed link speed, active/passive, length).
- Standards Matrix — one row per USB version (USB 1.0, 1.1, 2.0, 3.0 / 3.1 Gen 1 / 3.2 Gen 1, 3.1 Gen 2 / 3.2 Gen 2, 3.2 Gen 2x2, USB4 20, USB4 40, USB4 v2.0 80). Columns: marketing name, signal rate, encoding, year, reachable-by-this-cable ✔/✘.
- Power Profile — bar chart from 2.5 W → 240 W with one row per PDO (USB 2.0 default, USB 3.0 default, BC 1.2, USB-C default 15 W, 9 V/3 A, 15 V/3 A, 20 V/3 A, PD SPR 20 V/5 A, PD EPR 28/36/48 V @ 5 A). Each row shows ✔ if within the cable ceiling, ✘ otherwise. Below: contextual notes that change when PPS / QC / EPR is involved.
- Alt Modes — table: DP 1.4a, DP 2.1, TB3, TB4, TB5, HDMI (deprecated), MHL (deprecated), VirtualLink (dead), Audio Accessory, Debug. Columns: requires, max bandwidth, supported by this cable ✔/✘, status.
- Topology & Roles — host-hub-device tree description, host controller chain (UHCI/OHCI → EHCI → xHCI), OTG / DRD concepts, data role (UFP/DFP/DRD), power role (source/sink/DRP), transfer-type chips (control/bulk/interrupt/iso).
- Device Classes — 15+ USB-IF class codes (0x01 Audio, 0x02 CDC, 0x03 HID, 0x06 PTP, 0x07 Printer, 0x08 BOT/UAS, 0x09 Hub, 0x0B CCID, 0x0E UVC, 0x0F Healthcare, 0x11 Billboard, 0xDC Diag, 0xE0 Wireless, 0xFE App-Specific, 0xFF Vendor) with minimum bandwidth column and a reachable-on-this-cable ✔/✘.
- Verdict & Log — the full classification report plus the colored inference log.
These are the edge cases that separate real implementations from wireframes:
- Unmarked C-to-C (emarker = No) → USB 2.0 only and 15 W only, regardless of what other cables in the same plug shape can do.
- A-to-C asymmetric → max 15 W and no Alt Modes. Cables advertising
3 A on Rp-to-5 V are the out-of-spec ones that famously damaged hosts (Benson Leung, 2015). Surface a WARN.
- Lightning on either end → USB 2.0 data ceiling, Apple-2C charging (typically ≤ 27 W), no PD negotiation, no USB 3.x, no Alt Modes.
- Micro-B → USB 2.0 unless the 10-pin SS-Micro-B variant is declared.
- USB4 40 G passive cable > 0.8 m → out of spec; link drops to 3.2 Gen 2.
- USB4 v2 · 80 Gbps passive cable → never trains; requires active.
- PPS @ 5 A requires an E-Marker declaring 5 A. Without one, WARN that PPS is valid only up to 3 A.
- QC 3/4/5 is proprietary (D+/D- handshake) and cannot coexist with PD BMC on the CC line. Surface a WARN.
- Observed link speed > inferred ceiling → BAD. Either the E-Marker is lying or the classification is wrong.
- EPR trigger but cable can't deliver → BAD, with explanation.
- Dark cyber/neon. Deep navy/black background, neon accents (cyan #2bd8ff, magenta #ff56e0, green #4dffb0, amber #ffb547, violet #9f8cff, red #ff5f7a).
- Monospace (JetBrains Mono / SF Mono / ui-monospace) for headers, chips, labels, log entries. Sans-serif for body/subtitle.
- Generous glow on active elements (SVG drop-shadow + box-shadow).
- All panels are cards with 1 px dim-blue borders, subtle backdrop-filter blur.
- It has to actually render. If the controls are there but the canvas is blank, you have failed. Gemini failed at this.
- Every control drives every tab, live. No stale panes.
- Self-contained. One
.htmlfile, opens with a double-click, works offline, no CDN, no npm install. - Inference must be inspectable. Every WARN / BAD must come with a one-sentence reason, not just a color change.
- Don't pretend to know what you don't. Where the observables are
ambiguous, mark things
inferred(cyan) rather thanobservable(green), and list exclusions explicitly.
- URL hash reflects state so a configuration can be shared.
- An "Ambiguity" tab listing inputs that would resolve remaining uncertainty.
- Keyboard shortcuts for tab switching.
- Print stylesheet.
One file: usb-chaos-map.html. That's the deliverable. No repo, no
dependencies, no build.