Deterministic Incident Dependency Replay

Implement HelioTrace, a deterministic incident dependency replay for an on-call engineer investigating a checkout latency spike. This is not a decorative particle hero. The first viewport must let the engineer replay one simulated incident, identify the suspected deploy, follow its causal path across services, pause the evidence, and understand the scenario impact.

Fill the viewport with a dependency canvas whose nodes and paths are tied to an incident rail, a quiet status header, and one replay footer. The topology contains web edge, orders-api, inventory, cart-cache, and billing-worker. The scenario is Checkout latency spike with Suspect deploy v42.8. Display Replay active incident, 08:42:13, 18.6k simulated checkouts, 87% scenario confidence, 7% simulated blast radius, and Page 2 owners. Every number must be visibly labeled simulated or scenario-based; do not imply live telemetry, certainty, customer proof, or automated remediation.

Art-direct the system with black #03090d, cyan #43ced4, ice #e4f3f2, orange #f27343, lavender #6d4a87, and gray #677177. Use a narrow interface sans with mono telemetry. Canvas particles and paths must look like a disciplined causal instrument: sparse ambient telemetry, crisp node labels, directional timing, non-color path patterns, and no random star field. Avoid a marketing headline, CTA hero, fake terminal, neon gradient cloud, 3D globe, or decorative mouse-follow effect.

Replay active incident triggers a deterministic five-second narrative. During 0–1.2 seconds ambient telemetry converges on orders-api. During 1.2–2.5 seconds healthy paths to inventory and cart-cache resolve. During 2.5–3.7 seconds deploy v42.8 ignites with an orange patterned signal and a causal pulse travels toward billing-worker. During 3.7–5.0 seconds billing-worker becomes suspected, then scenario impact and confidence settle. The loop may restart only after a quiet hold; the same seed, coordinates, timestamps, and path timing must render every run.

Provide idle, replaying, paused, suspected, resolved, keyboard-focus, reduced-motion, and poster-fallback states. Replay toggles to Pause while active, and a timeline scrubber or step controls must be keyboard operable. Pair Canvas with an accessible dependency list and event log; announce only material state changes. Never rely on orange/cyan alone to express causal status. Put data-preview-ready on the settled experience and data-preview-action on the replay control.

At a 16:10 desktop viewport, preserve the entire causal path, incident rail, and replay footer. Below 700px, switch to a vertically ordered dependency trace with the event log before a simplified canvas; keep Replay/Pause and scenario labels visible. Under prefers-reduced-motion or Save-Data, show the final suspected path as a stable poster, stop all particles, and retain the step controls and text log.

Return a single self-contained responsive HTML document using internal CSS and JavaScript. Use a deterministic Canvas implementation and semantic controls; do not use an external animation library, live observability API, SVG illustration, placeholder box, random unseeded particles, or prose outside the product. Include one subtle source-prompt link.