fix: start gate, cinema UX, 100× speed, and Rectangle gates

[shaal]

Summary

End-to-end UI/UX and simulation fixes validated with agent-browser.

Start gate & first paint

• Simulation no longer auto-starts on page load; requires an explicit Start Training click (or Demo).
• Static Start overlay paints immediately (before heavy JS/wasm), with early-click queuing via __pendingStart.
• Population build (performBegin / 500 cars) is deferred until Start so the CTA stays responsive.
• Canvas Start overlay works even when the right panel is collapsed.

Layout & panels

• Right control panel collapsed by default.
• Secondary <details> panels (training tuning, import/export, more actions, brain saves) closed by default.
• Fixed #ab-hud leaking empty chips: display: flex was overriding the HTML hidden attribute.
• Repositioned cinema HUD below help FABs; kept phase banner clear of cinema chips.
• Start overlay styling and “Starting…” busy state.

Keyboard / cinema controls

• WASD no longer triggers Demo/Follow — Demo remapped to M; presentation hotkeys ignore driving keys and phase-3 driving.
• New Rays toggle next to Follow / 3D / Trails / Heat / Demo (keyboard R, URL ?rays=0).

Champion handoff after crash

• Live champion prefers highest-fitness alive car so rays hop immediately when the leader hits a wall.
• Gen-end archive still re-scans pure fitness (including dead cars) for the correct elite brain.

Sim speed (100×)

• Root cause: MAX_STEPS=60 dropped most of the high-speed accumulator; 20ms tick budget + setTimeout(0) capped throughput.
• MessageChannel scheduling, speed-scaled budgets/caps, stronger LOD at high speed.
• Measured (N=500): 100× ~87 → ~3700 steps/s (~1% → ~62% of target); 2× and 20× near 100% efficiency.

Rectangle track

• Baked hand-tuned green checkpoint gates into the Rectangle preset (5 gates: diagonal right-lobe spawn pair, top, left, bottom-mid).
• Matching roadEditor.js fallback defaults.

Test plan

• agent-browser: Start CTA immediate + clickable before heavy boot
• agent-browser: no sim steps until Start; overlay hides; Pause after start
• agent-browser: D does not start demo; M does
• agent-browser: #ab-hud children not visible when A/B off; visible when on
• agent-browser: sim speed 2×/20×/100× step-rate measurements
• agent-browser: Rays button toggles aria-pressed / state
• agent-browser: Rectangle preset loads 5 gates matching coded coords
• Manual: hard-refresh, Start Training, crash leader → rays hop to next car
• Manual: set Sim Speed 100× and confirm generations advance much faster
• Manual: load Rectangle preset and confirm green gates match the hand-tuned layout

Summary by CodeRabbit

• New Features

  • Added a clear Start Training overlay that requires explicit user action before simulation begins.
  • Added Rays presentation controls via the UI, URL option, and R shortcut.
  • Added improved pause/resume behavior and start-state feedback.

• Improvements

  • Increased simulation performance at higher speeds.
  • Refined overlay positioning and responsive mobile layout.
  • Updated the Rectangle track preset with five checkpoints.

• Bug Fixes

  • Prevented premature simulation startup and improved worker synchronization.
  • Corrected overlay visibility and elite-car selection behavior.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 8088abed-2d2e-46e8-8f86-5b5cddd80dea

📥 Commits

Reviewing files that changed from the base of the PR and between 93da730 and a08f36c.

📒 Files selected for processing (9)

• AI-Car-Racer/buttonResponse.js
• AI-Car-Racer/demoPresentation.js
• AI-Car-Racer/index.html
• AI-Car-Racer/main.js
• AI-Car-Racer/roadEditor.js
• AI-Car-Racer/sim-worker.js
• AI-Car-Racer/style.css
• AI-Car-Racer/trackPresets.js
• AI-Car-Racer/utils.js

---

📝 Walkthrough

Walkthrough

The update adds an explicit Start overlay and boot gate, introduces a Rays presentation toggle, revises worker scheduling and snapshot behavior, changes Rectangle tracks to five checkpoints, and adjusts panel and overlay layouts.

Changes

Explicit startup gate

Layer / File(s)	Summary
Start overlay and initial UI AI-Car-Racer/index.html, AI-Car-Racer/style.css	The page starts with a collapsed panel and includes a canvas-centered Start Training dialog with early start-state initialization.
Start overlay coordination AI-Car-Racer/buttonResponse.js, AI-Car-Racer/utils.js	Start clicks, pending requests, overlay visibility, and pause-button states are coordinated through exported helpers.
Boot and Demo start execution AI-Car-Racer/main.js, AI-Car-Racer/demoPresentation.js	Automatic startup is suppressed until explicit Start or Demo interaction, while worker pause state and placeholder rendering are preserved during boot.

Presentation controls

Layer / File(s)	Summary
Rays and presentation input AI-Car-Racer/demoPresentation.js, AI-Car-Racer/main.js	A URL-configurable Rays toggle, UI button, R shortcut, revised Demo M shortcut, and conditional sensor-ray rendering are added.

Worker execution and fitness

Layer / File(s)	Summary
Speed-aware worker scheduling AI-Car-Racer/sim-worker.js	MessageChannel scheduling and speed-dependent accumulator, time-budget, step-cap, and timestep handling replace the previous tick strategy.
Preview, leader, and elite state AI-Car-Racer/sim-worker.js	Initial previews, leader scans, snapshot cadence, and generation-end elite selection are revised.

Rectangle track geometry

Layer / File(s)	Summary
Five-gate Rectangle layout AI-Car-Racer/trackPresets.js, AI-Car-Racer/roadEditor.js	The Rectangle preset and editor fallback now define five checkpoint gate segments and updated coordinates.

Overlay and panel layout

Layer / File(s)	Summary
Panel and HUD defaults AI-Car-Racer/index.html, AI-Car-Racer/utils.js, AI-Car-Racer/style.css	HUD hiding, collapsed detail panels, and the Demo shortcut tooltip are updated.
Cinematic and mobile overlay positioning AI-Car-Racer/style.css	Bottom text, cinematic overlays, controls, and mobile sizing are repositioned.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant StartOverlay
  participant Main
  participant Worker
  User->>StartOverlay: Click Start Training
  StartOverlay->>Main: Set pending start and clear awaiting gate
  Main->>Worker: Begin simulation
  Main->>Worker: Re-assert pause state
  Worker-->>Main: Send preview and simulation snapshots

Loading

sequenceDiagram
  participant MainThread
  participant SimWorker
  participant MessageChannel
  MainThread->>SimWorker: Set simulation speed
  SimWorker->>MessageChannel: Schedule tick
  MessageChannel->>SimWorker: Deliver tick
  SimWorker->>SimWorker: Step within wall-time budget
  SimWorker-->>MainThread: Post cadence-controlled snapshot

Loading

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/ui-ux-start-gate-speed-rays-rectangle

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}