Build-Pipeline Thermal Trace

Design and implement ForgeTrace, a responsive build-pipeline replay for a developer investigating why one fictional local build slowed down. This is an illustrative static trace: it must not run a build, inspect a repository, query CI, or claim measured performance. The developer's job is to replay stage timing, see where heat accumulates, and isolate one cache miss with a concrete next check.

Do not create an ambient gradient behind a developer-tool hero. Make the build-pipeline thermal field the primary instrument: a deterministic Canvas heat grid, semantic ordered stages Resolve, Compile, Bundle, Test, and Package, a cache-status table, one build scrubber, and an evidence drawer. Heat color must always be paired with stage name, duration, and HIT/MISS text.

Use this exact content: FORGETRACE; See where the build kept its heat.; Illustrative local trace · build DEMO-218; Replay demo build; Resolve; Compile; Bundle; Test; Package; Cache hit; Cache miss; Bundle · vendor-map; +1.8s scenario; Cause sample; Cache key changed after lockfile sample; Next check; Compare cache key inputs; No repository or CI connected; Replay complete. Do not add real repository names, production timing, percentile claims, saved-time claims, performance guarantees, blame, incident severity, live logs, or a claim that the suggested check fixes the build.

Use furnace black #111615, cool slate #294857, low heat #6c8d72, warm amber #d6a33d, hot coral #d85b49, trace cream #eeeadd, and chalk #faf7ef. Pair a compressed engineering display with a neutral sans and mono stage/cache notation. Use discrete thermal cells, stage boundaries, a calibrated time axis, and one isolated hot band; do not rely on a smooth color gradient. Avoid generic terminal windows, dashboard cards, neon glow, weather-map decoration, CSS gradients, emoji, SVG/CSS illustration, and random particles.

Replay demo build is the deterministic five-second action. During 0–1.0 seconds build DEMO-218 loads and all stage rows reset to waiting. During 1.0–2.6 seconds discrete heat cells move through Resolve and Compile with Cache hit labels. During 2.6–3.8 seconds Bundle · vendor-map receives Cache miss and a patterned hot band with +1.8s scenario. During 3.8–5.0 seconds Cause sample, the changed lockfile cache key, and Next check: Compare cache key inputs settle in the evidence drawer. The trace must stop after Replay complete and replay from the same cells and timings.

Support waiting, replaying, stage-active, cache-hit, cache-miss, evidence-ready, replay-complete, scrubbed, stale-trace, loading, error, visible-focus, reduced-motion, Canvas-fallback, and table-only states. The stage table and scrubber must be keyboard accessible; every thermal cell state needs a text equivalent. Announce the cache miss and evidence readiness, not each cell. Put one data-preview-ready marker on the settled trace and exactly one data-preview-action marker on Replay demo build.

At 960×600, retain the thermal field, all five stages, time axis, cache table, build control, and evidence drawer in the first 16:10 viewport. Below 740px, order Replay demo build, stage/cache table, evidence drawer, then a simplified thermal field; keep +1.8s scenario and the complete cache-key text visible at 320px without horizontal scrolling. Under prefers-reduced-motion or Save-Data, show the final Bundle cache miss and full evidence immediately with static discrete cells.

Return one complete standalone responsive HTML document with internal CSS and JavaScript. Use no framework, external runtime, repository access, CI API, network request, live build, stock image, placeholder, handmade SVG/CSS illustration, emoji, random heat, smooth gradient, lorem ipsum, or prose outside the product. Include one quiet source-prompt link and label all data illustrative or scenario-based.