Replace synthetic viewer telemetry with recorded native drives

FRONTEND_SOURCE.json

@@ -5,19 +5,20 @@
     "source": "Runner r14 single-engine browser UI; selected .track tile renderer added from simulator atlas",
     "source_sha256": "65d1e5f2c4e19b4951b828e82510005ab99a5270cf3dcb9f4eaa0fa1af8c40f8"
   },
-  "client_sha256": "e42cd311e5a16baeec9caa8909ad1b8e08532b10cab320c14bef8a47d7101b53",
+  "client_sha256": "19b2a095dd40d91104cc1dc8e5ef3423f88683d57a7a884c490c35d236b2f15e",
   "identity_note": "The historical source fields describe the base frontend; local packaged file hashes describe this candidate's derived frontend.",
-  "local_customization_id": "v1.2-measured-capacity",
-  "output_sha256": "16c6a720e3383e23aca7065466b25d573e50b0ea625fcca00e10d6844c9161b7",
+  "local_customization_id": "native-snapshot-replay-v1",
+  "output_sha256": "2c3926b1b4f63eaf219a4a62094c1098df5fc713a7a89a5e93ad44cabdd0e191",
   "packaged_frontend_files": {
     "assets/track-atlas.json": "d97c8900e3e5fb17734b5bd61d1f4f4b196d9be30af9848e2e273ae7e4079ae4",
-    "client.js": "e42cd311e5a16baeec9caa8909ad1b8e08532b10cab320c14bef8a47d7101b53",
+    "client.js": "19b2a095dd40d91104cc1dc8e5ef3423f88683d57a7a884c490c35d236b2f15e",
     "help.html": "58959e994a8e4bbd3c70b2a6256cb699ac615cde718c6d0288fabeee909098a2",
     "hf-auth.js": "3f3938bbc0935e4e9230c094029ef46e03beea74be199887c50e053e03dafcfe",
-    "index.html": "16c6a720e3383e23aca7065466b25d573e50b0ea625fcca00e10d6844c9161b7",
+    "index.html": "2c3926b1b4f63eaf219a4a62094c1098df5fc713a7a89a5e93ad44cabdd0e191",
     "track-library.js": "351ec4c026b49420ce963f4310cb000d9e987fd28e6dac5ecd0176509340f6e6",
-    "track-map.js": "c002c18bc6932af274ec2a0d722662588a27f0afe8af9957ca892b6bd63ae0ae"
+    "track-map.js": "9ad6bcfc4aa9e684d395aadf28f770431837415a50d9c2df19098dec57c436c2"
   },
-  "packaged_frontend_sha256": "cf14ef732f3b2b3a2360aa91f2bf7fd6e4d2edfeb5cbecbe37d601d591412876",
-  "status": "Local measured-capacity candidate; hosted qualification pending"
+  "packaged_frontend_sha256": "3b7a107ccc288cb2b187590d1b4d4b80fd04c3b450b4f12dc9f71d99c84dedd1",
+  "packaged_frontend_sha256_format": "SHA-256 of UTF-8 JSON for packaged_frontend_files, sorted keys, compact separators, no trailing newline",
+  "status": "Recorded CPU drive viewer"
 }

RELEASE_MANIFEST.json

@@ -7,7 +7,7 @@
     "CUDA_REFERENCE.md": "f7453c3254d244f8b0de41fde5851cb025159f5cea4a4d1a5d8208a955550c6c",
     "DATA_POLICY.md": "fc5978528abe1c21c14882417ac8a706e04a0831bbd3fdb3de8c64442c1a7b3d",
     "FEEDBACK.md": "f95b8f6afbf4a360976c0edca5d52f5b3a0b668c9a944d4947b840a7c53a122a",
-    "FRONTEND_SOURCE.json": "757dc50e6e1e8ae47be23220da9c4e07ed05cdf3078804598e1803aeb9bd8f75",
+    "FRONTEND_SOURCE.json": "9e4944337ba6d0dc420de9966cf898f305273320a69d23e62c5263e5a47e9ffa",
     "GODOT_LICENSE": "fb2b3bb82c60f1e76841ba2122eb902f8e39c151476fe21ce10c9a05d1045304",
     "IMPORTER_BUILD_RECEIPT.json": "4ba5c533cc617105478e4d85c83f456a7dfa68b1388049624619871ba9e42e9d",
     "LICENSE": "53d5851b6440feeae36f72a5f57fcab37858c48b7084765ece4b0c54b9a28ed8",
@@ -59,13 +59,13 @@
     "builtin_tracks/tracks/Replica R08 Demolition Derby.track": "6f11a9ffbcb477c9d19964566b1b612d2a94675605246e93e21f27bbbdb357ef",
     "builtin_tracks/tracks/Replica R09 Eau Noir.track": "3ec0a78478cca1a4f0d2d98ac81f40783928adf271b70f0c32d295a6da2cdaa9",
     "builtin_tracks/tracks/Replica The Champions Trial.track": "a3bfb76422affc774b44c739b0636d08acb901fa7615b9adcb52c069f79834e1",
-    "client.js": "e42cd311e5a16baeec9caa8909ad1b8e08532b10cab320c14bef8a47d7101b53",
+    "client.js": "19b2a095dd40d91104cc1dc8e5ef3423f88683d57a7a884c490c35d236b2f15e",
     "delivery.py": "6bdba2e87c3e19a41440cb16103695af27105f8bafbae38948bbb1b936ed0c1b",
     "gpu_tickets.py": "20928fcf1ca24648809ad8712c929377bdcc8b5e6b4387bfff3503ec5711928b",
     "help.html": "58959e994a8e4bbd3c70b2a6256cb699ac615cde718c6d0288fabeee909098a2",
     "hf-auth.js": "3f3938bbc0935e4e9230c094029ef46e03beea74be199887c50e053e03dafcfe",
     "hf_identity.py": "913fb1e089af21f376e8359a20cbc838d5bcd7971def6989a4382d53c1127b37",
-    "index.html": "16c6a720e3383e23aca7065466b25d573e50b0ea625fcca00e10d6844c9161b7",
+    "index.html": "2c3926b1b4f63eaf219a4a62094c1098df5fc713a7a89a5e93ad44cabdd0e191",
     "native/analysis.patch": "42f79de67cb0734cffb2a7582f5479cab42ab82675884b8b42b9f158d46a98e8",
     "native/build-receipt.json": "559a7e4e382f9f7caa1c5ceb566a5a0bbefad2ed3a2e2cf604e31c9c3890c348",
     "native/physics-build-receipt.json": "63561c108554a09884cc68a1bfadfb8a3f530a800de0700ff671d99e558609fe",
@@ -78,12 +78,13 @@
     "native/source-receipt.json": "36feba861501baf8672884476bbeed5e375254cbb4feffb9f4f90aa61a415a93",
     "native/upstream-v1.3.patch": "a9810c9abd40ddcbac5fcf6914320d5fc04fcde23849df9437ec293c83be15ed",
     "portable_bundle.py": "58df5b87956745ea909c41c4b12a23cf9ab8c40a7df47d1529f47ae4de9bf51f",
+    "replay.py": "cce5dadc682dafadaa558b49fe1dac735e225fc26881566f59f6e59447b9ab4f",
     "requirements.txt": "fc7e0703ad2289fd3926a36efbdce8c61f0edc00f7575a87e2b565e46588c5a4",
-    "server.py": "803d1f9d639c47e032c3a27f040763a3bb358145c65e0eb012f7a3863fbfa0ee",
+    "server.py": "5656f969f09d171a0eb257b004191bb84f2a365ed2552dacbe3ec77b4ab77294",
     "star_check.py": "5c17080957b81ffccf0de8314635b471562e55c92c97a1207d9034a99279b2c3",
     "steam_leaderboard.py": "d76397c39cae58f636ddf9a9be1a46ae3d77fefd6b7269feac73d34d97165481",
     "track-library.js": "351ec4c026b49420ce963f4310cb000d9e987fd28e6dac5ecd0176509340f6e6",
-    "track-map.js": "c002c18bc6932af274ec2a0d722662588a27f0afe8af9957ca892b6bd63ae0ae",
+    "track-map.js": "9ad6bcfc4aa9e684d395aadf28f770431837415a50d9c2df19098dec57c436c2",
     "training_config.py": "6eb7282bbee3b3a6273bddc29c949d9904067414c26e501d815012f033173a1c",
     "vendor/gradio-client/LICENSE": "c71d239df91726fc519c6eb72d318ec65820627232b2f796219e87dcf35d0ab4",
     "vendor/gradio-client/dist/index.min.js": "fdd776db8633354f118fe2908c980592283968737e6b91dc3aa86d648da5c3fd",

client.js

@@ -2,6 +2,9 @@
 const $ = id => document.getElementById(id);
 let job = null;
 let busy = false;
+let replayBusy = false;
+let localReplay = null;
+let replayRequestId = 0;
 let localResult = null;
 let localAnalysis = null;
 let pairedAnalysisPending = false;
@@ -58,7 +61,7 @@ function batchRunContext(){
   const trackInfo=trackLibrary?.info()??{source:'upload'},trackFile=$('track').files[0],network=networkSource(),backend=$('backend').value;
   const hasTrack=trackInfo.source==='builtin'||!!trackFile;
   let reason='';
-  if(busy||bundleRestoring||bucketOperation)reason='Finish the current operation before starting a batch.';
+  if(busy||replayBusy||bundleRestoring||bucketOperation)reason='Finish the current operation before starting a batch.';
   else if(job)reason='Finish or delete the current result before starting a batch.';
   else if(!capabilitiesReady)reason='Connect to the training service before running a batch.';
   else if($('run_mode')?.value==='evaluate')reason='Under Action in Run & results, choose Train a population before running a batch.';
@@ -70,7 +73,7 @@ function batchRunContext(){
     network:network?.name||(network?'Selected network':null),backend:backend.toUpperCase()};
 }
 function buttons() {
-  const settingsUnavailable=busy||bundleRestoring||bucketOperation;
+  const settingsUnavailable=busy||replayBusy||bundleRestoring||bucketOperation;
   const unavailable=settingsUnavailable||!!job;
   trackLibrary?.setBusy(unavailable);
   window.HFAuth?.setBusy(unavailable);
@@ -87,6 +90,13 @@ function buttons() {
   $('forgetLocal').disabled = busy || !localResult;
   $('track').disabled=unavailable;
   $('network').disabled=unavailable;
+  if($('replay_record'))$('replay_record').disabled=unavailable||batchActive||!capabilitiesReady||!replayNetworkSource();
+  if($('replay_duration'))$('replay_duration').disabled=settingsUnavailable;
+  if($('replay_download'))$('replay_download').disabled=replayBusy||!localReplay;
+  if($('replay_policy')){
+    const selected=networkSource();
+    $('replay_policy').textContent=selected?'Policy: '+(selected.name||'Selected network'):localResult?'Policy: latest received result. Choose a winner below to record a different policy.':'Choose or create a network to record a drive.';
+  }
   if($('batch_start')){
     const context=batchRunContext();
     window.setBatchRunContext?.(context);
@@ -438,7 +448,7 @@ function saveLocal() {
   setTimeout(()=>URL.revokeObjectURL(url),60000);
 }
 $('saveLocal').onclick=saveLocal;
-$('forgetLocal').onclick=()=>{localResult=null;localAnalysis=null;pairedAnalysisPending=false;renderAnalysisPanel();buttons();say('Browser result discarded. Downloaded files are unaffected.');};
+$('forgetLocal').onclick=()=>{invalidateReplay();localResult=null;localAnalysis=null;pairedAnalysisPending=false;renderAnalysisPanel();buttons();say('Browser result discarded. Downloaded files are unaffected.');};
 async function request(path, options = {}) {
   const response = await fetch(path, {...options, cache:'no-store', credentials:'same-origin'});
   if (!response.ok) {
@@ -455,19 +465,71 @@ async function encoded(file) {
 }
 const headers = () => ({'X-Job-Key':job.key});
 const networkSource=()=>stagedNetwork || $('network').files[0];
+function replayNetworkSource(){return networkSource()||localResult;}
+function invalidateReplay(reason){
+  replayRequestId++;
+  localReplay=null;
+  window.TrackReplay?.clearRecording?.(reason);
+  if($('replay_download'))$('replay_download').disabled=true;
+}
 window.addEventListener('ald:batch-draft-change',buttons);
 document.addEventListener('track-library-change',buttons);
+document.addEventListener('track-library-change',()=>invalidateReplay('Track changed. Record a new drive for this track.'));
+if($('replay_record'))$('replay_record').onclick=async()=>{
+  if(busy||replayBusy||job||batchActive||bundleRestoring||bucketOperation)return;
+  replayBusy=true;busy=true;
+  invalidateReplay('Recording a fresh CPU drive…');
+  const attempt=replayRequestId;
+  const controller=new AbortController();
+  const timeout=setTimeout(()=>controller.abort(),40000);
+  buttons();
+  try{
+    const track=await trackSource(),network=replayNetworkSource();
+    if(!track||!network)throw Error('Choose a track and a network before recording.');
+    const ticks=Number($('replay_duration').value);
+    if(![300,900].includes(ticks))throw Error('Choose a 5-second or 15-second recording.');
+    const [trackBytes,networkBytes]=await Promise.all([track.arrayBuffer(),network.arrayBuffer()]);
+    await validateNetworkBytes(new Uint8Array(networkBytes));
+    const [trackSha,networkSha,track64,network64]=await Promise.all([
+      sha(trackBytes),sha(networkBytes),encoded(track),encoded(network)
+    ]);
+    const response=await request('/api/replay',{method:'POST',signal:controller.signal,
+      headers:{'Content-Type':'application/json'},body:JSON.stringify({track:track64,network:network64,ticks})});
+    const raw=await response.text();
+    if(raw.length>2*1024*1024)throw Error('Recording exceeds the browser limit.');
+    const recording=JSON.parse(raw);
+    const currentTrack=await trackSource(),currentNetwork=replayNetworkSource();
+    if(attempt!==replayRequestId||!currentTrack||!currentNetwork)throw Error('Selection changed during recording. Record the current selection again.');
+    const [currentTrackSha,currentNetworkSha]=await Promise.all([
+      currentTrack.arrayBuffer().then(sha),currentNetwork.arrayBuffer().then(sha)
+    ]);
+    if(currentTrackSha!==trackSha||currentNetworkSha!==networkSha)throw Error('Selection changed during recording. Record the current selection again.');
+    if(!window.TrackReplay?.setRecording)throw Error('The recorded-drive viewer is unavailable. Reload this page.');
+    await window.TrackReplay.setRecording(recording,trackSha,networkSha);
+    if(attempt!==replayRequestId){window.TrackReplay.clearRecording();throw Error('Selection changed during recording. Record the current selection again.');}
+    localReplay=recording;
+  }catch(error){
+    if(attempt===replayRequestId&&$('replay_status'))$('replay_status').textContent=
+      error?.name==='AbortError'?'Recording timed out. Try a 5-second drive.':'Recording unavailable: '+error.message;
+  }finally{
+    clearTimeout(timeout);replayBusy=false;busy=false;buttons();
+  }
+};
+if($('replay_download'))$('replay_download').onclick=()=>{
+  if(localReplay)downloadTextFile(JSON.stringify(localReplay),'ald-recorded-drive.json','application/json');
+};
 async function refreshFreezeNetwork(file){
+  invalidateReplay('Network changed. Record a new drive for this policy.');
   if(!file){window.setFreezeNetwork?.(null);window.TrackReplay?.setStagedNetwork?.(null);return;}
   try{const network=await validateNetworkBytes(new Uint8Array(await file.arrayBuffer()));if(networkSource()===file){window.setFreezeNetwork?.(network);window.TrackReplay?.setStagedNetwork?.(network);}}
   catch(error){if(networkSource()===file){window.setFreezeNetwork?.(null);window.TrackReplay?.setStagedNetwork?.(null);if($('freeze_status'))$('freeze_status').textContent='Network metadata unavailable: '+error.message;}}
 }
 $('network').onchange=()=>{stagedNetwork=null;selectedWinner=null;if($('networkChoice'))$('networkChoice').textContent='Uploaded file selected.';refreshFreezeNetwork(networkSource());buttons();};
 window.TrainingClient={
-  isBusy:()=>busy||!!job||bundleRestoring,
+  isBusy:()=>busy||replayBusy||!!job||bundleRestoring,
   hasUnsavedState:()=>!!(networkSource()||localResult||$('track').files.length||trackLibrary?.info?.()?.source==='builtin'||$('editor_file')?.files.length||window.hasUnsavedNetworkDraft?.()),
   useNetwork(file){
-    if(busy||job)throw Error('Finish or delete the current result before changing the network');
+    if(busy||replayBusy||job)throw Error('Finish the current operation before changing the network');
     stagedNetwork=file;$('network').value='';
     if($('networkChoice'))$('networkChoice').textContent='Browser editor input: '+file.name+'. Not uploaded yet.';
     refreshFreezeNetwork(file);
@@ -961,6 +1023,8 @@ function showDetails(r){
   window.TrackReplay?.setRunAnalysis?.(localAnalysis,runReceipt||portableReceipt||(r?{report:r}:null));
 }
 $('run').onclick = async () => {
+  if(replayBusy)return;
+  invalidateReplay();
   const comparisonAttempt=!!comparisonPlan,comparisonRole=comparisonAttempt?comparisonPlan.roles[comparisonPlan.index]:null;
   const previousRunResultContext=runResultContext;
   cancelSteamLeaderboard();

index.html

@@ -34,7 +34,7 @@
 })();
 </script>
 <header class="lab-header"><div><div class="eyebrow">AI LEARNS TO DRIVE</div><h1>Training lab</h1><p class="intro">Build a driver, train it, inspect the result.</p></div><div class="header-actions"><button id="quick_start_toggle" type="button" aria-controls="firstRunGuide" aria-expanded="false">Quick start</button><a class="help-link" href="/help#start-here" target="_blank" rel="noopener">Help &amp; tutorial ↗</a></div></header>
-<details class="about"><summary>About &amp; feedback</summary><p>Simulator by <a href="https://github.com/Zorro909/driving_sim_rs">Zorro909</a>; interface and hosting by <a href="https://github.com/seeker-cyber-maker/driving_sim_rs">TiGa</a>. Inspired by the <a href="https://store.steampowered.com/app/3312030/AI_Learns_To_Drive/">game by ActivationFunction</a>. Built-in tracks are reconstructed replicas. For supported conditions, the lab checks the run’s final fitness policy (or frozen input) with a bounded fresh replay. It predicts conditions only and does not award or accumulate original-game stars; opponent races and other unsupported conditions remain unchecked.</p><p>Uploaded files are used for the requested run. Results are held briefly in application memory and deleted after verified download or expiry. Browser recipes contain settings only. <a href="/policy" target="_blank" rel="noopener">Read the data policy</a>.</p><p>Cars are simulated behind the scenes. The map shows track layout, not moving cars. Interactive telemetry replay previews are reconstructed locally in your browser with zero server compute.</p><p><a id="feedbackLink" href="https://github.com/seeker-cyber-maker/driving_sim_rs/issues/new" target="_blank" rel="noopener">Report a problem</a> · Opens an editable draft for you to review.</p><p id="buildLabel" class="hint">Build: connecting…</p></details>
+<details class="about"><summary>About &amp; feedback</summary><p>Simulator by <a href="https://github.com/Zorro909/driving_sim_rs">Zorro909</a>; interface and hosting by <a href="https://github.com/seeker-cyber-maker/driving_sim_rs">TiGa</a>. Inspired by the <a href="https://store.steampowered.com/app/3312030/AI_Learns_To_Drive/">game by ActivationFunction</a>. Built-in tracks are reconstructed replicas. For supported conditions, the lab checks the run’s final fitness policy (or frozen input) with a bounded fresh replay. It predicts conditions only and does not award or accumulate original-game stars; opponent races and other unsupported conditions remain unchecked.</p><p>Uploaded files are used for the requested run. Results are held briefly in application memory and deleted after verified download or expiry. Browser recipes contain settings only. <a href="/policy" target="_blank" rel="noopener">Read the data policy</a>.</p><p>The map follows the selected track’s native centerline. Record a short CPU drive to watch an unchanged policy using real vehicle positions. A new recording can differ from an earlier training run. Steering commands, sensor rays and neural activity are not included in the current recording.</p><p><a id="feedbackLink" href="https://github.com/seeker-cyber-maker/driving_sim_rs/issues/new" target="_blank" rel="noopener">Report a problem</a> · Opens an editable draft for you to review.</p><p id="buildLabel" class="hint">Build: connecting…</p></details>
 <details id="firstRunGuide" class="quick-start"><summary id="firstRunTitle">New here? Start a first run <span class="hint">Four steps, whenever you need them</span></summary><ol class="quick-steps"><li><strong>Choose a track</strong><p>Pick a built-in replica or upload your own track.</p><button id="first_run_track" type="button">Choose a track</button></li><li><strong>Create a driver</strong><p>Choose a car and create a small starter network, or upload a network you already have.</p><button type="button" data-open-tab="drive" data-focus="starter_create">Set up a network</button></li><li><strong>Review the settings</strong><p>The starter settings are ready for a short first experiment. You can save them as a recipe later.</p><button id="first_run_settings" type="button">Review first-run settings</button></li><li><strong>Run and inspect</strong><p>Start training, then download the result to inspect your drivers. A first run may not finish a lap.</p><button type="button" data-open-tab="drive" data-focus="run">Go to run controls</button></li></ol><div class="quick-footer"><a href="/help#start-here" target="_blank" rel="noopener">Read the full step-by-step tutorial ↗</a><button id="quick_start_close" type="button">Close quick start</button></div></details>
 <nav class="tabs" role="tablist" aria-label="Lab sections"><button type="button" id="tab-drive" role="tab" data-tab="drive" aria-controls="drive" aria-selected="true" tabindex="0">Run &amp; results</button><button type="button" id="tab-training" role="tab" data-tab="training" aria-controls="training" aria-selected="false" tabindex="-1">Training &amp; recipes</button><button type="button" id="tab-batch" role="tab" data-tab="batch" aria-controls="batch" aria-selected="false" tabindex="-1">Batches</button><button type="button" id="tab-editor" role="tab" data-tab="editor" aria-controls="editor" aria-selected="false" tabindex="-1">Network editor</button></nav><div id="drive" class="pane" role="tabpanel" aria-labelledby="tab-drive"><div class="grid"><section class="card"><h2>Simulation</h2><div class="toolbar" aria-label="Create a starter network"><label for="starter_vehicle">Starter car</label><select id="starter_vehicle"><option value="0" selected>Formula</option><option value="1">Rally</option><option value="2">Snowmobile</option><option value="3">Truck</option></select><button id="starter_create" type="button">Create starter network</button></div><p id="starter_network_status" class="hint" role="status">Creates a small network in this page only. It does not start a run or change saved recipes.</p><label for="run_mode">Action</label><select id="run_mode"><option value="train" selected>Train a population</option><option value="evaluate">Frozen evaluation · one policy, unchanged weights</option></select><p id="run_mode_help" class="hint">Training uses the selected recipe. Frozen evaluation runs the selected policy in a fresh car without changing its weights.</p><button id="run" disabled>Run training</button><p id="starCheckNotice" class="hint">After each run, supported star challenges are checked with unchanged weights. Results are predictions, not game awards. <a href="/help#concepts" target="_blank" rel="noopener">How checks work</a>.</p><p class="hint">Select or create a network below to enable training. Review Training &amp; recipes before running.</p><p>Supports Formula, Rally, Snowmobile and Truck networks. Control outputs follow the original vehicle editor rules. Network shape and supported sensors are bounded by the original game contract.</p>
 <p id="computeBlock"><label for="backend">Compute</label><select id="backend" disabled><option value="cpu">CPU — no GPU allowance</option><option id="gpuOption" value="gpu" disabled>GPU — uses GPU allowance</option></select></p><p id="backendNote" class="hint">Checking available backends…</p>
@@ -48,7 +48,17 @@
 <p><label>Track (.track) <input id="track" type="file" accept=".track"></label></p>
 <p><label>Vehicle network (.evolution) <input id="network" type="file" accept=".evolution"></label></p>
 <p id="networkChoice" role="status">Choose an uploaded file or use a network from the browser editor.</p><p class="privacy-note">Uploads are processed for this run. By default, the server copy is deleted after the browser verifies the download.</p><details><summary>Optional repeat download</summary><label class="keep-result"><input id="keepServer" type="checkbox"> Keep this result on the server for up to five minutes so I can download it again</label><p class="privacy-note">This is optional and resets after each run. When bucket auto-save is on, verified receipt must delete the server copy first, so repeat download is disabled. All results expire after five minutes. <a href="/policy" target="_blank" rel="noopener">Data policy</a></p>
-</details></section><section class="card"><h2>Selected track &amp; terrain</h2><p id="mapStatus" class="map-status" role="status">Loading selected track…</p><div class="map"><canvas id="trackMap" width="1000" height="500" role="img" aria-label="Selected track tile layout and terrain"></canvas></div><div class="replay-bar" id="replayControls" aria-label="Zero-compute telemetry replay controls"><div class="replay-row"><button type="button" id="replay_play">Pause</button><button type="button" id="replay_reset">Restart</button><input type="range" id="replay_scrub" min="0" max="900" value="0" aria-label="Replay tick scrubber"><span id="replay_time_label" class="replay-time">0.00s · Tick 0 / 900</span></div><div class="replay-row" style="margin-top:8px"><label for="replay_mode" style="margin:0;font-size:12.5px">View</label><select id="replay_mode" aria-label="Replay focus mode"><option value="winners" selected>All Winners (Ghost Race)</option><option value="fitness">Fitness Leader</option><option value="fastest_lap">Fastest Lap Winner</option><option value="clean_laps">Clean Laps Winner</option><option value="swarm">Population Swarm (Gen Inspector)</option><option value="staged">Staged / Preview Policy</option></select><label for="replay_camera" style="margin:0;font-size:12.5px">Camera</label><select id="replay_camera" aria-label="Replay camera mode"><option value="full" selected>Full Circuit</option><option value="follow">Follow Car 2.2×</option></select><label for="replay_speed" style="margin:0;font-size:12.5px">Speed</label><select id="replay_speed" aria-label="Replay playback speed"><option value="0.25">0.25×</option><option value="0.5">0.5×</option><option value="1" selected>1×</option><option value="2">2×</option></select></div><div class="replay-layers"><label><input type="checkbox" id="replay_layer_outline" checked> 2D Car White Outline</label><label><input type="checkbox" id="replay_layer_rays" checked> Raycast Sensors</label><label><input type="checkbox" id="replay_layer_line" checked> Speed Heatmap Line</label><label><input type="checkbox" id="replay_layer_skids" checked> Skid Marks &amp; Curbs</label><label><input type="checkbox" id="replay_layer_hud" checked> Live Telemetry &amp; Neural HUD</label></div></div><div class="map-legend"><span><i class="terrain asphalt"></i> Asphalt</span><span><i class="terrain dirt"></i> Dirt</span><span><i class="terrain ice"></i> Ice</span><span><i class="terrain start"></i> Start</span></div><p id="mapLegend" class="hint"></p><h2>Run &amp; results</h2><button id="download" disabled>Download result</button> <button id="erase" disabled>Delete server-side job data now</button>
+</details></section><section class="card"><h2>Selected track &amp; terrain</h2><p id="mapStatus" class="map-status" role="status">Loading selected track…</p><div class="map"><canvas id="trackMap" width="1000" height="500" role="img" aria-label="Selected track tile layout and terrain"></canvas></div><div class="replay-bar" id="replayControls" aria-label="Recorded drive controls">
+<div class="replay-row"><button type="button" id="replay_record" disabled>Record selected policy</button><label for="replay_duration" style="margin:0">Length</label><select id="replay_duration"><option value="300" selected>5 seconds</option><option value="900">15 seconds</option></select><button type="button" id="replay_download" disabled>Download recording</button></div>
+<p id="replay_policy" class="hint">Choose or create a network to record a drive.</p>
+<p class="hint">Fresh CPU drive · unchanged weights · 60 Hz physics and decisions · wall-hit and idle elimination off. Recording takes a few seconds; playback runs in your browser.</p>
+<p id="replay_status" role="status">No replay recorded. The map shows the selected track and its saved starting point.</p>
+<div class="replay-row"><button type="button" id="replay_play" disabled>Play</button><button type="button" id="replay_reset" disabled>Restart</button><input type="range" id="replay_scrub" min="1" max="300" value="1" disabled aria-label="Replay tick scrubber"><span id="replay_time_label" class="replay-time">No recording</span></div>
+<div class="replay-row" style="margin-top:8px"><label for="replay_camera" style="margin:0">Camera</label><select id="replay_camera" aria-label="Replay camera mode" disabled><option value="full" selected>Full circuit</option><option value="follow">Follow car</option></select><label for="replay_speed" style="margin:0">Speed</label><select id="replay_speed" aria-label="Replay playback speed" disabled><option value="0.25">0.25×</option><option value="0.5">0.5×</option><option value="1" selected>1×</option><option value="2">2×</option></select></div>
+<div class="replay-layers"><label><input type="checkbox" id="replay_layer_outline" checked disabled> Car outline</label><label><input type="checkbox" id="replay_layer_line" checked disabled> Recorded path</label><label><input type="checkbox" id="replay_layer_hud" checked disabled> Recorded telemetry</label></div>
+<p id="replay_readout" style="font-size:16px;font-variant-numeric:tabular-nums" aria-live="off"></p>
+<details><summary>What does this recording show?</summary><p>Vehicle positions and velocities are sampled every 0.1 seconds from the native CPU simulator. Playback interpolates between those samples; it does not simulate the car. Speed is calculated from recorded velocity. Controls, sensor rays, skid marks and neural activations are not recorded. This fresh drive does not replace the measurements from your training run.</p><p>The recording remains in this page until replaced, cleared by a changed selection, or the page is closed. Use Download recording to keep its measured samples.</p></details>
+</div><div class="map-legend"><span><i class="terrain asphalt"></i> Asphalt</span><span><i class="terrain dirt"></i> Dirt</span><span><i class="terrain ice"></i> Ice</span><span><i class="terrain start"></i> Start</span></div><p id="mapLegend" class="hint"></p><h2>Run &amp; results</h2><button id="download" disabled>Download result</button> <button id="erase" disabled>Delete server-side job data now</button>
 <p><button id="saveLocal" disabled>Download received result (browser only)</button> <button id="forgetLocal" disabled>Discard browser result</button></p>
 <p>The browser keeps the received result in memory until discarded, replaced by a new run, or this page is closed. It is not saved to browser storage.</p>
 <h3 id="runState" role="status" aria-live="polite">READY — no run started</h3>

replay.py

@@ -0,0 +1,287 @@
+"""Bounded, measured playback using the installed native benchmark command.
+
+Each sample is a deterministic fresh CPU evaluation of the same policy up to
+that tick. This is not a recording of a previous training generation. Native
+bench captures car state before turnover, accepts only positive tick counts,
+and disables wall/idle elimination. With population one its preserved parent
+is the supplied policy; every dump is checked against that exact parameter
+vector before any recording is returned.
+"""
+
+import hashlib
+import json
+import math
+from pathlib import Path
+import stat
+import struct
+import subprocess
+import tempfile
+import time
+
+from worker import (
+    OUTPUT_NAMES,
+    native_environment,
+    network_input,
+    track_input,
+    vehicle_scene_template,
+)
+
+
+MAX_TICKS = 900
+SAMPLE_INTERVAL_TICKS = 6
+MAX_WALL_SECONDS = 30.0
+MAX_SCENE_BYTES = 16 * 1024 * 1024
+MAX_DUMP_BYTES = 512 * 1024
+MAX_RESPONSE_BYTES = 2 * 1024 * 1024
+
+
+class ReplayError(RuntimeError):
+    """The native recorder could not produce a complete verified recording."""
+
+
+class ReplayTimeout(ReplayError, TimeoutError):
+    """The recording exhausted its native subprocess or total wall budget."""
+
+
+def _remaining(deadline):
+    seconds = deadline - time.monotonic()
+    if seconds <= 0:
+        raise ReplayTimeout('Replay recording exceeded its time limit; try fewer ticks')
+    return seconds
+
+
+def _run(command, *, work, env, deadline, stage, timeout=None):
+    remaining = _remaining(deadline)
+    try:
+        subprocess.run(
+            command,
+            cwd=work,
+            env=env,
+            stdin=subprocess.DEVNULL,
+            stdout=subprocess.DEVNULL,
+            stderr=subprocess.DEVNULL,
+            shell=False,
+            check=True,
+            timeout=min(remaining, timeout) if timeout is not None else remaining,
+        )
+    except subprocess.TimeoutExpired as exc:
+        raise ReplayTimeout('Replay recording exceeded its time limit; try fewer ticks') from exc
+    except (OSError, subprocess.CalledProcessError) as exc:
+        raise ReplayError('Native replay ' + stage + ' failed') from exc
+    _remaining(deadline)
+
+
+def _object(pairs):
+    result = {}
+    for key, value in pairs:
+        if key in result:
+            raise ValueError('Duplicate JSON key')
+        result[key] = value
+    return result
+
+
+def _read_json(path, limit, label):
+    try:
+        info = path.lstat()
+        if not stat.S_ISREG(info.st_mode) or info.st_size > limit:
+            raise ValueError('Invalid output file')
+        with path.open('rb') as stream:
+            data = stream.read(limit + 1)
+        if len(data) > limit:
+            raise ValueError('Output exceeds limit')
+        value = json.loads(
+            data,
+            object_pairs_hook=_object,
+            parse_constant=lambda _: (_ for _ in ()).throw(ValueError('Nonfinite JSON')),
+        )
+        if not isinstance(value, dict):
+            raise ValueError('Expected JSON object')
+        return value
+    except (OSError, ValueError, RecursionError) as exc:
+        raise ReplayError('Native replay returned an invalid ' + label) from exc
+
+
+def _number(value, label):
+    finite = False
+    if type(value) in (int, float):
+        try:
+            finite = math.isfinite(value)
+        except OverflowError:
+            pass
+    if not finite:
+        raise ReplayError('Native replay returned an invalid ' + label)
+    return value
+
+
+def _vector(value, label):
+    if not isinstance(value, list) or len(value) != 2:
+        raise ReplayError('Native replay returned an invalid ' + label)
+    return [_number(component, label) for component in value]
+
+
+def _counter(value, label):
+    # Keep integer values exact in the browser's JSON number representation.
+    if type(value) is not int or not 0 <= value <= 2**53 - 1:
+        raise ReplayError('Native replay returned an invalid ' + label)
+    return value
+
+
+def _parameter_bytes(values):
+    # Native Network.params stores float64 values, layer by layer: each weight
+    # row, followed by that layer's bias. Comparing bytes also preserves -0.0.
+    return b''.join(struct.pack('!d', _number(value, 'policy parameter')) for value in values)
+
+
+def _frame(dump, tick, expected_parameters):
+    agents = dump.get('agents')
+    networks = dump.get('next_networks')
+    if (not isinstance(agents, list) or len(agents) != 1 or not isinstance(agents[0], dict)
+            or not isinstance(networks, list) or len(networks) != 1
+            or not isinstance(networks[0], list)
+            or len(networks[0]) * 8 != len(expected_parameters)):
+        raise ReplayError('Native replay must contain exactly one car and its policy')
+    if _parameter_bytes(networks[0]) != expected_parameters:
+        raise ReplayError('Native replay changed the selected policy; recording discarded')
+
+    agent = agents[0]
+    position = _vector(agent.get('position'), 'car position')
+    velocity = _vector(agent.get('velocity'), 'car velocity')
+    if type(agent.get('active')) is not bool:
+        raise ReplayError('Native replay returned an invalid active state')
+    frame = {
+        'tick': tick,
+        'x': position[0],
+        'y': position[1],
+        'rotation': _number(agent.get('rotation'), 'car rotation'),
+        'vx': velocity[0],
+        'vy': velocity[1],
+        'active': agent['active'],
+    }
+    for field in ('angular_velocity', 'boost_energy'):
+        if field in agent:
+            frame[field] = _number(agent[field], field)
+    for field in ('collision_count', 'update_count'):
+        if field in agent:
+            frame[field] = _counter(agent[field], field)
+    if 'metrics' in agent:
+        metrics = agent['metrics']
+        if (not isinstance(metrics, dict) or len(metrics) > 64
+                or any(not isinstance(key, str) or not 1 <= len(key) <= 96 for key in metrics)):
+            raise ReplayError('Native replay returned invalid metrics')
+        frame['metrics'] = {
+            key: None if value is None else _number(value, 'metric')
+            for key, value in metrics.items()
+        }
+    return frame
+
+
+def record_replay(track_bytes, network_bytes, *, binary, importer, scene_template, ticks=300):
+    """Record one unchanged policy for 1–900 native 60 Hz ticks.
+
+    ``binary``, ``importer`` and the Formula ``scene_template`` path must come
+    from trusted application configuration. Uploads only supply saved track
+    and game network bytes. Samples include tick 1, every sixth tick, and the
+    requested endpoint. The importer spawn is labelled separately because the
+    native reset settles the vehicle before the first measured tick.
+    """
+    deadline = time.monotonic() + MAX_WALL_SECONDS
+    if type(ticks) is not int or not 1 <= ticks <= MAX_TICKS:
+        raise ValueError('Replay ticks must be an integer from 1 to 900')
+    track = track_input(track_bytes)
+    template = network_input(network_bytes)
+    binary = Path(binary).resolve()
+    importer = Path(importer).resolve()
+    scene_template = vehicle_scene_template(scene_template, template['Type'])
+    if not all(path.is_file() for path in (binary, importer, scene_template)):
+        raise ReplayError('Native replay tools or vehicle template unavailable')
+
+    network = template['NeuralNetwork']
+    parameters = []
+    for matrix, bias in zip(network['Weights'], network['Biases']):
+        parameters.extend(value for row in matrix for value in row)
+        parameters.extend(bias)
+    expected_parameters = _parameter_bytes(parameters)
+    sample_ticks = sorted({1, ticks, *range(SAMPLE_INTERVAL_TICKS, ticks + 1, SAMPLE_INTERVAL_TICKS)})
+    environment = native_environment()
+
+    with tempfile.TemporaryDirectory(prefix='tiga-replay-') as directory:
+        work = Path(directory)
+        environment.update(TMPDIR=directory)
+
+        def save(name, value):
+            path = work / name
+            path.write_text(json.dumps(value, allow_nan=False), encoding='utf-8')
+            return str(path)
+
+        saved_track = save('track.json', track)
+        scene_path = work / 'scene.json'
+        _run(
+            [str(importer), saved_track, 'Replay track', str(scene_template), str(scene_path)],
+            work=work, env=environment, deadline=deadline, stage='track import', timeout=10.0,
+        )
+        scene = _read_json(scene_path, MAX_SCENE_BYTES, 'scene')
+        spawn_position = _vector(scene.get('reset_position'), 'requested spawn position')
+        spawn_rotation = _number(scene.get('reset_rotation'), 'requested spawn rotation')
+        spawn_path = save('spawn.json', {'frames': [{'position': spawn_position, 'rotation': spawn_rotation}]})
+        names = [f'sensor-{index}' for index in range(network['Shape'][0])]
+        network_path = save('network.json', {
+            'shape': network['Shape'], 'weights': network['Weights'], 'biases': network['Biases'],
+            'inputs': names, 'outputs': [OUTPUT_NAMES[index] for index in template['Outputs']],
+        })
+        model_path = save('model.json', {'sensor_layout': {'names': names, 'sensors': template['Sensors']}})
+        dump_path = work / 'state.json'
+        command = [
+            str(binary), '--math-profile', 'proton', '--threads', '1', 'bench',
+            '--scene', str(scene_path), '--network', network_path, '--model', model_path,
+            '--spawn-trace', spawn_path, '--population', '1', '--warmup-ticks', '0',
+            '--seed', '0', '--spawn-index', '0', '--batch-count', '1', '--dump-state', str(dump_path),
+        ]
+        frames = []
+        for tick in sample_ticks:
+            # A successful command without a new dump must not reuse a prior
+            # sample. A single file also bounds temporary storage independently
+            # of the recording length.
+            dump_path.unlink(missing_ok=True)
+            _run(command + ['--ticks', str(tick)], work=work, env=environment,
+                 deadline=deadline, stage='evaluation')
+            dump = _read_json(dump_path, MAX_DUMP_BYTES, 'car state')
+            frames.append(_frame(dump, tick, expected_parameters))
+            _remaining(deadline)
+
+        result = {
+            'schema': 'ald.recorded-replay',
+            'version': 1,
+            'kind': 'fresh_cpu_evaluation',
+            'physics_hz': 60,
+            'sample_interval_ticks': SAMPLE_INTERVAL_TICKS,
+            'first_sample_tick': 1,
+            'control_hz': 60,
+            'track_sha256': hashlib.sha256(track_bytes).hexdigest(),
+            'network_sha256': hashlib.sha256(network_bytes).hexdigest(),
+            'vehicle_type': template['Type'],
+            'requested_ticks': ticks,
+            'execution_backend': 'cpu',
+            'math_profile': 'proton',
+            'collision_elimination': False,
+            'idle_elimination': False,
+            'seed': 0,
+            'population': 1,
+            'warmup_ticks': 0,
+            'policy_weights_verified': True,
+            'sampling_method': 'deterministic_cumulative_native_bench',
+            'position_units': 'game_world_units',
+            'velocity_units': 'game_world_units_per_second',
+            'rotation_units': 'radians',
+            'native_spawn_kind': 'requested_before_native_reset_settle',
+            'native_spawn': {'x': spawn_position[0], 'y': spawn_position[1], 'rotation': spawn_rotation},
+            'frames': frames,
+        }
+        native_track = scene.get('track')
+        if isinstance(native_track, dict):
+            for field in ('tile_size', 'tile_map_position'):
+                if field in native_track:
+                    result[field] = _vector(native_track[field], field)
+        if len(json.dumps(result, allow_nan=False).encode('utf-8')) > MAX_RESPONSE_BYTES:
+            raise ReplayError('Native replay recording exceeds the output limit')
+        _remaining(deadline)
+        return result

server.py

@@ -4,6 +4,7 @@ import hashlib
 import json
 from pathlib import Path
 import re
+import subprocess
 import threading
 from fastapi import HTTPException, Request
 from fastapi.responses import FileResponse, Response, HTMLResponse, JSONResponse
@@ -363,6 +364,45 @@ def create_app(worker=run_reported,store=None,gpu_worker=None,track_library=None
             except InvalidAnalysisOutput: raise HTTPException(422,'Processing failed; complete analysis could not be verified.') from None
             except Exception: raise HTTPException(422,'Processing failed; no result published. Cleanup status requires verification.') from None
         finally: admission.release()
+    @app.post('/api/replay')
+    async def recorded_replay(request:Request):
+        # Share CPU admission with training; recordings never allocate a GPU.
+        if not admission.acquire(blocking=False):
+            raise HTTPException(429,'Worker busy; finish the current run before recording a drive')
+        data=bytearray()
+        try:
+            async for chunk in request.stream():
+                if len(data)+len(chunk)>3*1024*1024:
+                    raise HTTPException(413,'Replay input exceeds the upload limit')
+                data.extend(chunk)
+            try:
+                body=json.loads(data)
+                if not isinstance(body,dict) or set(body)!={'track','network','ticks'}:
+                    raise ValueError()
+                if type(body['ticks']) is not int or not 1<=body['ticks']<=900:
+                    raise ValueError()
+                track=base64.b64decode(body['track'],validate=True)
+                network=base64.b64decode(body['network'],validate=True)
+                if not track or not network or max(len(track),len(network))>1024*1024:
+                    raise ValueError()
+            except Exception:
+                raise HTTPException(400,'Invalid replay input; select a track, a network and up to 15 seconds') from None
+            finally:
+                data.clear()
+            from replay import record_replay, ReplayError
+            try:
+                recording=await run_in_threadpool(record_replay,track,network,
+                    binary=ROOT/'bin/altd-sim',importer=ROOT/'bin/extract_saved_track',
+                    scene_template=ROOT/'assets/formula_template.json',ticks=body['ticks'])
+                recording['build']=build_identity()
+                return JSONResponse(recording,headers={'Cache-Control':'no-store','X-Content-Type-Options':'nosniff'})
+            except (TimeoutError,subprocess.TimeoutExpired):
+                raise HTTPException(504,'Recording reached its time limit. Try a 5-second drive.') from None
+            except (ReplayError,OSError,ValueError,KeyError,TypeError,subprocess.CalledProcessError):
+                raise HTTPException(422,'The engine could not produce a complete recorded drive. No estimated playback was substituted.') from None
+        finally:
+            data.clear()
+            admission.release()
     return app
 
 app=create_app()

track-map.js

@@ -1,11 +1,10 @@
-/* Browser-only preview and zero-compute telemetry replay of the selected saved track. No upload for preview. */
+/* Browser-only preview of the selected saved track. No upload for preview. */
 (function(root,factory){
   if(typeof module==='object'&&module.exports)module.exports=factory(root);
   else root.TrackMap=factory(root);
 })(typeof window==='undefined'?this:window,function(root){
   const COLOURS=['#607e96','#b89561','#b9d9ed'];
   const NAMES=['Asphalt','Dirt','Ice'];
-  const VEHICLE_NAMES=['Formula','Rally','Snowmobile','Truck'];
   const VECTOR=/^Vector2i\((-?\d+),\s*(-?\d+)\)$/;
   function vector(value){
     const match=typeof value==='string'&&VECTOR.exec(value);
@@ -88,139 +87,6 @@
     if(maxX-minX>30||maxY-minY>30)throw Error('Track preview is too large');
     return {tiles,start,startConnection,bounds:{minX,maxX,minY,maxY}};
   }
-
-  function cubicPoint(a,p1,p2,z,t){
-    const u=1-t,uu=u*u,tt=t*t;
-    return [
-      uu*u*a[0]+3*uu*t*p1[0]+3*u*tt*p2[0]+tt*t*z[0],
-      uu*u*a[1]+3*uu*t*p1[1]+3*u*tt*p2[1]+tt*t*z[1]
-    ];
-  }
-  function cubicTangent(a,p1,p2,z,t){
-    const u=1-t;
-    const dx=3*u*u*(p1[0]-a[0])+6*u*t*(p2[0]-p1[0])+3*t*t*(z[0]-p2[0]);
-    const dy=3*u*u*(p1[1]-a[1])+6*u*t*(p2[1]-p1[1])+3*t*t*(z[1]-p2[1]);
-    const len=Math.hypot(dx,dy)||1;
-    return [dx/len,dy/len];
-  }
-  function oppositeSide(side){return [1,0,3,2][side];}
-  function neighborDelta(side){return [[0,-1],[0,1],[-1,0],[1,0]][side];}
-
-  function buildTrackGeometry(track,w,h){
-    const b=track.bounds,columns=b.maxX-b.minX+1,rows=b.maxY-b.minY+1;
-    const size=Math.min(160,(w-70)/columns,(h-70)/rows);
-    const left=(w-columns*size)/2,top=(h-rows*size)/2;
-    const roadHalfWidth=Math.max(7,size*0.215);
-    const tileMap=new Map(track.tiles.map(t=>[`${t.x},${t.y}`,t]));
-    const orderedSegments=[];
-    const visited=new Set();
-    let curTile=tileMap.get(`${track.start[0]},${track.start[1]}`);
-    let entryConn=track.startConnection;
-    while(curTile&&orderedSegments.length<track.tiles.length){
-      const key=`${curTile.x},${curTile.y}`;
-      if(visited.has(key))break;
-      visited.add(key);
-      const [c0,c1]=curTile.connections;
-      const isFirst=c0.side===entryConn.side&&c0.index===entryConn.index;
-      const enter=isFirst?c0:c1;
-      const exit=isFirst?c1:c0;
-      orderedSegments.push({tile:curTile,enter,exit});
-      const [dx,dy]=neighborDelta(exit.side);
-      const nextTile=tileMap.get(`${curTile.x+dx},${curTile.y+dy}`);
-      if(!nextTile)break;
-      const nextSide=oppositeSide(exit.side);
-      const match=nextTile.connections.find(c=>c.side===nextSide&&c.index===exit.index);
-      if(!match)break;
-      curTile=nextTile;
-      entryConn=match;
-    }
-    for(const tile of track.tiles){
-      const key=`${tile.x},${tile.y}`;
-      if(!visited.has(key)&&tile.connections.length>=2){
-        orderedSegments.push({tile,enter:tile.connections[0],exit:tile.connections[1]});
-      }
-    }
-    const rawSamples=[];
-    const stepsPerTile=26;
-    for(let sIdx=0;sIdx<orderedSegments.length;sIdx++){
-      const {tile,enter,exit}=orderedSegments[sIdx];
-      const tx=left+(tile.x-b.minX)*size,ty=top+(tile.y-b.minY)*size;
-      const a=connectionPoint(enter,tx,ty,size),z=connectionPoint(exit,tx,ty,size);
-      const p1=connectionControl(enter,exit,a,z),p2=connectionControl(exit,entryConnForControl(exit,enter),z,a);
-      for(let i=0;i<(sIdx===orderedSegments.length-1?stepsPerTile+1:stepsPerTile);i++){
-        const t=i/stepsPerTile;
-        const [px,py]=cubicPoint(a,p1,p2,z,t);
-        const [ux,uy]=cubicTangent(a,p1,p2,z,t);
-        const nx=-uy,ny=ux;
-        rawSamples.push({x:px,y:py,tx:ux,ty:uy,nx,ny,surface:tile.surface,tileIndex:sIdx});
-      }
-    }
-    function entryConnForControl(_,enter){return enter;}
-    if(rawSamples.length<2){
-      const sx=left+(track.start[0]-b.minX)*size+size*0.5,sy=top+(track.start[1]-b.minY)*size+size*0.5;
-      rawSamples.push({x:sx,y:sy,tx:1,ty:0,nx:0,ny:1,surface:0,tileIndex:0},{x:sx+10,y:sy,tx:1,ty:0,nx:0,ny:1,surface:0,tileIndex:0});
-    }
-    let totalLength=0;
-    rawSamples[0].s=0;
-    for(let i=1;i<rawSamples.length;i++){
-      const ds=Math.hypot(rawSamples[i].x-rawSamples[i-1].x,rawSamples[i].y-rawSamples[i-1].y);
-      totalLength+=ds;
-      rawSamples[i].s=totalLength;
-    }
-    totalLength=Math.max(1,totalLength);
-    const n=rawSamples.length;
-    const closed=Math.hypot(rawSamples[n-1].x-rawSamples[0].x,rawSamples[n-1].y-rawSamples[0].y)<size*0.45;
-    for(let i=0;i<n;i++){
-      const prev=rawSamples[closed?(i-2+n)%n:Math.max(0,i-2)];
-      const next=rawSamples[closed?(i+2)%n:Math.min(n-1,i+2)];
-      const a1=Math.atan2(prev.ty,prev.tx),a2=Math.atan2(next.ty,next.tx);
-      let da=a2-a1;
-      while(da>Math.PI)da-=Math.PI*2;
-      while(da<-Math.PI)da+=Math.PI*2;
-      const ds=Math.max(2,Math.hypot(next.x-prev.x,next.y-prev.y));
-      const p=rawSamples[i];
-      p.curvature=da/ds;
-      p.heading=Math.atan2(p.ty,p.tx);
-      p.u=p.s/totalLength;
-      p.lx=p.x+p.nx*roadHalfWidth;
-      p.ly=p.y+p.ny*roadHalfWidth;
-      p.rx=p.x-p.nx*roadHalfWidth;
-      p.ry=p.y-p.ny*roadHalfWidth;
-    }
-    return {size,left,top,columns,rows,roadHalfWidth,samples:rawSamples,totalLength,closed};
-  }
-
-  function sampleAtProgress(geom,u){
-    const samples=geom.samples,n=samples.length;
-    if(!n)return {x:0,y:0,tx:1,ty:0,nx:0,ny:1,heading:0,curvature:0,surface:0,u:0};
-    let norm=geom.closed?((u%1)+1)%1:Math.max(0,Math.min(1,u));
-    const targetS=norm*geom.totalLength;
-    let lo=0,hi=n-1;
-    while(lo<hi){
-      const mid=(lo+hi)>>1;
-      if(samples[mid].s<targetS)lo=mid+1;
-      else hi=mid;
-    }
-    const i1=Math.min(n-1,lo),i0=Math.max(0,i1-1);
-    const s0=samples[i0],s1=samples[i1];
-    const span=Math.max(1e-5,s1.s-s0.s);
-    const t=Math.max(0,Math.min(1,(targetS-s0.s)/span));
-    const tx=s0.tx+(s1.tx-s0.tx)*t,ty=s0.ty+(s1.ty-s0.ty)*t;
-    const tLen=Math.hypot(tx,ty)||1;
-    const ux=tx/tLen,uy=ty/tLen;
-    return {
-      x:s0.x+(s1.x-s0.x)*t,
-      y:s0.y+(s1.y-s0.y)*t,
-      tx:ux,ty:uy,
-      nx:-uy,ny:ux,
-      heading:Math.atan2(uy,ux),
-      curvature:s0.curvature+(s1.curvature-s0.curvature)*t,
-      surface:t<0.5?s0.surface:s1.surface,
-      u:norm,
-      idx:i0
-    };
-  }
-
   function render(canvas,track){
     const context=canvas.getContext('2d');
     if(!context)throw Error('Canvas preview unavailable');
@@ -230,18 +96,6 @@
     const b=track.bounds,columns=b.maxX-b.minX+1,rows=b.maxY-b.minY+1;
     const size=Math.min(160,(w-70)/columns,(h-70)/rows);
     const left=(w-columns*size)/2,top=(h-rows*size)/2;
-
-    // Subtle CAD coordinate grid in background
-    if(typeof context.save==='function'){
-      context.save();
-      context.strokeStyle='rgba(42,61,82,0.25)';
-      context.lineWidth=1;
-      const step=Math.max(24,Math.round(size*0.5));
-      for(let gx=left%step;gx<w;gx+=step){context.beginPath();context.moveTo(gx,0);context.lineTo(gx,h);context.stroke();}
-      for(let gy=top%step;gy<h;gy+=step){context.beginPath();context.moveTo(0,gy);context.lineTo(w,gy);context.stroke();}
-      context.restore();
-    }
-
     for(const tile of track.tiles){
       const x=left+(tile.x-b.minX)*size,y=top+(tile.y-b.minY)*size;
       context.fillStyle=COLOURS[tile.surface];
@@ -252,142 +106,26 @@
         const [entry,exit]=tile.connections;
         const a=connectionPoint(entry,x,y,size),z=connectionPoint(exit,x,y,size);
         const p1=connectionControl(entry,exit,a,z),p2=connectionControl(exit,entry,z,a);
-        // Road bed & wall corridor
-        context.beginPath();context.moveTo(...a);context.bezierCurveTo(...p1,...p2,...z);
-        context.strokeStyle='#cbd7d9';context.lineWidth=Math.max(8,size*.46);context.lineCap='round';context.stroke();
-        context.beginPath();context.moveTo(...a);context.bezierCurveTo(...p1,...p2,...z);
-        context.strokeStyle=tile.surface===2?'#223c52':tile.surface===1?'#2e2720':'#162434';
-        context.lineWidth=Math.max(6,size*.40);context.lineCap='round';context.stroke();
-        // Original centerline
         context.beginPath();context.moveTo(...a);
         context.bezierCurveTo(...p1,...p2,...z);
         context.strokeStyle='#f3a967';context.lineWidth=Math.max(3,size*.055);
         context.lineCap='round';context.stroke();
       }
     }
-
-    // High-detail FIA curbs, sector gates, and start gantry when full 2D context is available
-    const geom=buildTrackGeometry(track,w,h);
-    track._geometry=geom;
-    if(typeof context.save==='function'&&geom.samples.length>8){
-      context.save();
-      const hw=geom.roadHalfWidth;
-      // FIA red/white apex curbs on sharp corners
-      for(let i=1;i<geom.samples.length-1;i+=2){
-        const s0=geom.samples[i-1],s1=geom.samples[i+1];
-        if(Math.abs(s0.curvature)*size>0.65){
-          const side=s0.curvature>0?-1:1;
-          const ox0=s0.x+s0.nx*side*(hw*0.92),oy0=s0.y+s0.ny*side*(hw*0.92);
-          const ox1=s1.x+s1.nx*side*(hw*0.92),oy1=s1.y+s1.ny*side*(hw*0.92);
-          context.beginPath();context.moveTo(ox0,oy0);context.lineTo(ox1,oy1);
-          context.strokeStyle=((i>>1)&1)?'#e05252':'#f0f6fc';
-          context.lineWidth=Math.max(2,size*0.045);context.lineCap='butt';context.stroke();
-        }
-      }
-      // Sector split markers (S1 / S2 / S3)
-      for(const [frac,label] of [[0.333,'S2'],[0.667,'S3']]){
-        const sp=sampleAtProgress(geom,frac);
-        context.beginPath();
-        context.moveTo(sp.x+sp.nx*hw*0.95,sp.y+sp.ny*hw*0.95);
-        context.lineTo(sp.x-sp.nx*hw*0.95,sp.y-sp.ny*hw*0.95);
-        context.strokeStyle='rgba(88,166,255,0.55)';context.lineWidth=1.5;context.stroke();
-        if(typeof context.fillText==='function'){
-          context.fillStyle='#8ec2ff';context.font='700 10px system-ui,sans-serif';
-          context.fillText(label,sp.x+sp.nx*(hw+8)-6,sp.y+sp.ny*(hw+8)+3);
-        }
-      }
-      // Checkered Start/Finish line at u=0
-      const st=geom.samples[0];
-      if(st){
-        const checkers=6;
-        for(let c=0;c<checkers;c++){
-          const f0=-1+2*c/checkers,f1=-1+2*(c+1)/checkers;
-          context.beginPath();
-          context.moveTo(st.x+st.nx*hw*f0,st.y+st.ny*hw*f0);
-          context.lineTo(st.x+st.nx*hw*f1,st.y+st.ny*hw*f1);
-          context.strokeStyle=(c&1)?'#0c1926':'#f0f6fc';
-          context.lineWidth=Math.max(3,size*0.055);context.lineCap='butt';context.stroke();
-        }
-      }
-      context.restore();
-    }
-
     const startX=left+(track.start[0]-b.minX)*size,startY=top+(track.start[1]-b.minY)*size;
     const [sx,sy]=connectionPoint(track.startConnection,startX,startY,size);
     context.beginPath();context.arc(sx,sy,Math.max(6,size*.105),0,Math.PI*2);
     context.fillStyle='#66e5aa';context.fill();context.strokeStyle='#0c1926';context.lineWidth=3;context.stroke();
   }
-
-  // Fast forward pass of an .evolution NeuralNetwork (<0.01 ms per frame)
-  function evaluateNeuralNetwork(nn,inputs){
-    if(!nn||!Array.isArray(nn.Weights)||!Array.isArray(nn.Biases))return null;
-    let act=inputs.slice(0,nn.Shape?.[0]||inputs.length);
-    while(act.length<(nn.Shape?.[0]||0))act.push(0);
-    const layerActivations=[act];
-    for(let l=0;l<nn.Weights.length;l++){
-      const W=nn.Weights[l],B=nn.Biases[l];
-      const next=new Array(B.length);
-      for(let j=0;j<B.length;j++){
-        let sum=B[j]||0;
-        for(let i=0;i<act.length;i++)sum+=(act[i]||0)*(W[i]?.[j]||0);
-        next[j]=Math.tanh(sum);
-      }
-      act=next;
-      layerActivations.push(act);
-    }
-    return {outputs:act,layerActivations};
-  }
-
-  // Analytic raycast against track corridor walls near car position
-  function castRayAgainstCorridor(geom,carX,carY,rayAngle,maxDistPx,centerIdx){
-    const samples=geom.samples,n=samples.length;
-    if(n<4)return {dist:maxDistPx,frac:1,hx:carX+Math.cos(rayAngle)*maxDistPx,hy:carY+Math.sin(rayAngle)*maxDistPx,hit:false};
-    const dx=Math.cos(rayAngle),dy=Math.sin(rayAngle);
-    let bestT=maxDistPx,hit=false;
-    const windowSize=Math.min(n-1,56);
-    const startIdx=geom.closed?(centerIdx-12+n)%n:Math.max(0,centerIdx-12);
-    for(let k=0;k<windowSize;k++){
-      const i0=geom.closed?(startIdx+k)%n:Math.min(n-2,startIdx+k);
-      const i1=geom.closed?(i0+1)%n:i0+1;
-      const s0=samples[i0],s1=samples[i1];
-      for(const [ax,ay,bx,by] of [[s0.lx,s0.ly,s1.lx,s1.ly],[s0.rx,s0.ry,s1.rx,s1.ry]]){
-        const sx=bx-ax,sy=by-ay;
-        const det=dx*sy-dy*sx;
-        if(Math.abs(det)<1e-6)continue;
-        const qx=ax-carX,qy=ay-carY;
-        const t=(qx*sy-qy*sx)/det;
-        const u=(qx*dy-qy*dx)/det;
-        if(t>2&&t<bestT&&u>=0&&u<=1){
-          bestT=t;hit=true;
-        }
-      }
-    }
-    return {
-      dist:bestT,
-      frac:Math.max(0,Math.min(1,bestT/maxDistPx)),
-      hx:carX+dx*bestT,
-      hy:carY+dy*bestT,
-      hit
-    };
-  }
-
-  // Draw detailed 2D vehicle chassis with steerable front wheels, white shader outline, brake lights & boost flame
-  function drawVehicle2D(ctx,x,y,heading,slipAngle,steerAngle,vehicleType,color,scale,showOutline,braking,boosting,active){
+  // Vehicle illustration uses only recorded position, heading, type and active state.
+  function drawVehicle2D(ctx,x,y,heading,vehicleType,color,scale,showOutline,active){
     ctx.save();
     ctx.translate(x,y);
-    ctx.rotate(heading+slipAngle);
+    ctx.rotate(heading);
     ctx.scale(scale,scale);
     if(!active)ctx.globalAlpha=0.55;
 
-    const wheelSteer=Math.max(-0.48,Math.min(0.48,steerAngle*0.42));
-    // Boost exhaust flame
-    if(boosting&&active){
-      ctx.fillStyle='#ff9a3c';
-      ctx.beginPath();ctx.moveTo(-14,-3);ctx.lineTo(-24,0);ctx.lineTo(-14,3);ctx.closePath();ctx.fill();
-      ctx.fillStyle='#ffd073';
-      ctx.beginPath();ctx.moveTo(-14,-1.6);ctx.lineTo(-19.5,0);ctx.lineTo(-14,1.6);ctx.closePath();ctx.fill();
-    }
-
+    const wheelSteer=0; // Neutral artwork; steering samples are unavailable.
     // Draw wheels / skis
     ctx.fillStyle='#101820';
     ctx.strokeStyle=showOutline?'#ffffff':'#2a3d52';
@@ -461,16 +199,7 @@
       ctx.beginPath();ctx.roundRect(2,-5.2,6.5,10.4,1.5);ctx.fill();
     }
 
-    // Brake light glow
-    if(braking&&active){
-      ctx.fillStyle='#ff4d4d';
-      ctx.shadowColor='#ff4d4d';ctx.shadowBlur=6;
-      ctx.fillRect(-13.8,-5.2,1.8,3.2);
-      ctx.fillRect(-13.8,2.0,1.8,3.2);
-      ctx.shadowBlur=0;
-    }
-
-    // Eliminated / crashed X badge over car
+    // The recorded active flag controls the inactive badge.
     if(!active){
       ctx.strokeStyle='#ff6b6b';ctx.lineWidth=2.4;
       ctx.beginPath();ctx.moveTo(-7,-7);ctx.lineTo(7,7);ctx.moveTo(7,-7);ctx.lineTo(-7,7);ctx.stroke();
@@ -478,721 +207,220 @@
     ctx.restore();
   }
 
-  function buildCandidateProfile(spec,geom,maxTicks){
-    const ticks=Math.max(60,Math.min(18000,spec.ticksElapsed||maxTicks||900));
-    const lapSec=spec.bestLapSeconds&&spec.bestLapSeconds>0?spec.bestLapSeconds:null;
-    const laps=spec.forwardLaps||0;
-    const raw=spec.rawMetrics||{};
-    const driftFactor=raw.total_drifting_amount!=null?Math.min(1.4,Math.max(0.15,raw.total_drifting_amount/Math.max(1,ticks*0.25))):0.35;
-    const apexEff=raw.total_racing_line_efficiency!=null?Math.min(1,Math.max(0.2,raw.total_racing_line_efficiency/Math.max(1,ticks*0.5))):0.68;
-    const contacts=spec.physicalContacts??0;
-    const active=spec.active!==false;
 
-    // Determine how many laps/distance the car covers over maxTicks
-    let totalProgress=0.82;
-    if(lapSec){
-      const lapTicks=Math.max(90,lapSec*60);
-      totalProgress=Math.max(1.05,ticks/lapTicks);
-    }else if(spec.totalDistance&&spec.totalDistance>0){
-      totalProgress=Math.max(0.18,Math.min(3.5,spec.totalDistance/(geom.totalLength*3.1)));
-    }else if(laps>0){
-      totalProgress=Math.max(laps+0.15,1.1);
-    }
-    const phaseSeed=(spec.carIndex||0)*0.6180339887;
-    return {
-      id:spec.id||'primary',
-      label:spec.label||'Active Driver',
-      role:spec.role||'primary',
-      color:spec.color||'#62dfb1',
-      vehicleType:Number.isInteger(spec.vehicleType)?spec.vehicleType:0,
-      network:spec.network||null,
-      ticksElapsed:ticks,
-      bestLapSeconds:lapSec,
-      forwardLaps:laps,
-      physicalContacts:contacts,
-      active,
-      driftFactor,
-      apexEff,
-      totalProgress,
-      phaseSeed
-    };
+  function hash(value,label){
+    if(typeof value!=='string'||!/^[a-f0-9]{64}$/i.test(value))throw Error(label+' must be a SHA-256 hash');
+    return value.toLowerCase();
   }
-
-  function evaluateCarAtTick(profile,geom,tick,maxTicks){
-    const clampedTick=Math.min(tick,profile.ticksElapsed);
-    const alive=tick<=profile.ticksElapsed||profile.active;
-    const frac=clampedTick/Math.max(1,profile.ticksElapsed);
-    // Modulate progress slightly by cornering slowdowns so cars brake into sharp turns and accelerate on straights
-    const baseU=frac*profile.totalProgress;
-    const sCenter=sampleAtProgress(geom,baseU);
-    const nextCorner=sampleAtProgress(geom,baseU+0.032);
-    const cornerSeverity=Math.min(1,Math.abs(sCenter.curvature)*geom.size*1.15);
-    const approachSeverity=Math.min(1,Math.abs(nextCorner.curvature)*geom.size*1.25);
-
-    // Apex cutting offset: shift toward inside of upcoming/current turn
-    const turnSign=Math.sign(sCenter.curvature*0.65+nextCorner.curvature*0.35)||0;
-    const lateralTarget=-turnSign*geom.roadHalfWidth*0.58*profile.apexEff*Math.min(1,(cornerSeverity+approachSeverity)*0.9);
-    const wobble=Math.sin(baseU*Math.PI*6+profile.phaseSeed*6.28)*geom.roadHalfWidth*0.08*(1-profile.apexEff);
-    const latOffset=Math.max(-geom.roadHalfWidth*0.76,Math.min(geom.roadHalfWidth*0.76,lateralTarget+wobble));
-
-    const x=sCenter.x+sCenter.nx*latOffset;
-    const y=sCenter.y+sCenter.ny*latOffset;
-
-    // Speed & control state
-    const surfaceGrip=sCenter.surface===2?0.62:sCenter.surface===1?0.78:1.0;
-    const braking=approachSeverity>0.48&& approachSeverity>cornerSeverity*0.85;
-    const speedNorm=Math.max(0.24,Math.min(1.0,1.0-approachSeverity*0.42-cornerSeverity*0.28*(2-surfaceGrip)));
-    const speedKmh=alive?Math.round(75+speedNorm*185):0;
-    const slipAngle=alive?(-turnSign*cornerSeverity*0.38*profile.driftFactor*(1.35-surfaceGrip*0.5)):0;
-    const steerCmd=alive?Math.max(-1,Math.min(1,sCenter.curvature*geom.size*1.45)):0;
-    const throttleCmd=alive?(braking?0.18:Math.min(1,0.55+speedNorm*0.45)):0;
-    const brakeCmd=alive&&braking?Math.min(1,(approachSeverity-0.35)*1.4):0;
-    const hbrakeCmd=alive&&Math.abs(slipAngle)>0.18?Math.min(1,Math.abs(slipAngle)*2.2):0;
-    const boostCmd=alive&&!braking&&cornerSeverity<0.18&&speedNorm>0.82?0.9:0;
-
-    return {
-      x,y,
-      heading:sCenter.heading,
-      curvature:sCenter.curvature,
-      surface:sCenter.surface,
-      u:sCenter.u,
-      lap:Math.floor(baseU)+1,
-      idx:sCenter.idx||0,
-      alive,
-      speedNorm,
-      speedKmh,
-      slipAngle,
-      braking,
-      boosting:boostCmd>0.5,
-      controls:{steer:steerCmd,throttle:throttleCmd,brake:brakeCmd,hbrake:hbrakeCmd,boost:boostCmd}
-    };
+  function validateRecording(payload,expectedTrackSha,expectedNetworkSha){
+    if(!payload||payload.schema!=='ald.recorded-replay'||payload.version!==1||payload.kind!=='fresh_cpu_evaluation')
+      throw Error('This file is not a supported recorded CPU evaluation');
+    if(payload.physics_hz!==60||payload.control_hz!==60||payload.sample_interval_ticks!==6||payload.first_sample_tick!==1||
+       payload.execution_backend!=='cpu'||payload.math_profile!=='proton'||payload.collision_elimination!==false||payload.idle_elimination!==false)
+      throw Error('Recorded evaluation conditions are unsupported');
+    const trackSha=hash(payload.track_sha256,'Recorded track'),networkSha=hash(payload.network_sha256,'Recorded network');
+    if(trackSha!==hash(expectedTrackSha,'Selected track')||networkSha!==hash(expectedNetworkSha,'Selected network'))
+      throw Error('The recording does not match the selected track and network');
+    const ticks=payload.requested_ticks;
+    if(!Number.isInteger(ticks)||ticks<1||ticks>900)throw Error('Recording must contain at most 900 physics ticks');
+    if(!Number.isInteger(payload.vehicle_type)||payload.vehicle_type<0||payload.vehicle_type>3)throw Error('Recorded vehicle type is invalid');
+    const expectedTicks=[1];
+    for(let tick=6;tick<=ticks;tick+=6)expectedTicks.push(tick);
+    if(expectedTicks[expectedTicks.length-1]!==ticks)expectedTicks.push(ticks);
+    if(!Array.isArray(payload.frames)||payload.frames.length!==expectedTicks.length)
+      throw Error('Recording is missing its expected native samples');
+    const frames=payload.frames.map((frame,index)=>{
+      if(!frame||frame.tick!==expectedTicks[index]||typeof frame.active!=='boolean')throw Error('Recorded frame ticks or active state are invalid');
+      const copy={tick:frame.tick,active:frame.active};
+      for(const key of ['x','y','rotation','vx','vy']){
+        if(!Number.isFinite(frame[key])||Math.abs(frame[key])>1e9)throw Error('Recorded '+key+' is invalid');
+        copy[key]=frame[key];
+      }
+      for(const key of ['angular_velocity','boost_energy','collision_count','update_count']){
+        if(frame[key]===undefined)continue;
+        if(!Number.isFinite(frame[key])||Math.abs(frame[key])>1e9)throw Error('Recorded '+key+' is invalid');
+        if((key==='collision_count'||key==='update_count')&&(!Number.isInteger(frame[key])||frame[key]<0))throw Error('Recorded '+key+' is invalid');
+        copy[key]=frame[key];
+      }
+      return copy;
+    });
+    return {schema:payload.schema,version:1,kind:payload.kind,physics_hz:60,control_hz:60,sample_interval_ticks:6,
+      first_sample_tick:1,track_sha256:trackSha,network_sha256:networkSha,vehicle_type:payload.vehicle_type,
+      requested_ticks:ticks,execution_backend:'cpu',math_profile:'proton',collision_elimination:false,idle_elimination:false,frames};
   }
-
+  function sampleRecording(recording,tick){
+    if(!Number.isFinite(tick))throw Error('Replay tick must be finite');
+    const frames=recording.frames,last=frames.length-1;
+    const at=Math.max(frames[0].tick,Math.min(frames[last].tick,tick));
+    let lo=0,hi=last;
+    while(lo<hi){const mid=Math.ceil((lo+hi)/2);if(frames[mid].tick<=at)lo=mid;else hi=mid-1;}
+    const a=frames[lo],b=frames[Math.min(last,lo+1)];
+    const t=b.tick===a.tick?0:(at-a.tick)/(b.tick-a.tick);
+    const angle=Math.atan2(Math.sin(b.rotation-a.rotation),Math.cos(b.rotation-a.rotation));
+    // Pose interpolation is only between adjacent recorded samples. HUD values
+    // remain the actual preceding sample, never reconstructed controls or rays.
+    return {tick:at,x:a.x+(b.x-a.x)*t,y:a.y+(b.y-a.y)*t,rotation:a.rotation+angle*t,frame:{...a}};
+  }
+  function viewport(canvas,track){
+    const b=track.bounds,columns=b.maxX-b.minX+1,rows=b.maxY-b.minY+1;
+    const size=Math.min(160,(canvas.width-70)/columns,(canvas.height-70)/rows);
+    return {size,left:(canvas.width-columns*size)/2,top:(canvas.height-rows*size)/2,minX:b.minX,minY:b.minY};
+  }
+  function worldPoint(view,x,y){return [view.left+(x/768-view.minX)*view.size,view.top+(y/768-view.minY)*view.size];}
   function mount({document,fetch,picker}){
-    const canvas=document.getElementById('trackMap');
-    const status=document.getElementById('mapStatus');
-    const legend=document.getElementById('mapLegend');
-    if(!canvas||!status||!picker)return;
-    let version=0,atlasPromise=null;
-    let currentTrack=null,currentSourceName='',staticLayer=null;
-    let animId=null,playing=true,playSpeed=1,cameraMode='full',focusMode='winners';
-    let currentTick=0,maxTicks=900,lastFrameTime=0;
-    let stagedNet=null,analysisState=null,receiptState=null;
-    let profiles=[],swarmProfiles=[],speedRibbon=[],skidSegments=[],contactMarkers=[];
-    const layers={outline:true,rays:true,line:true,skids:true,hud:true};
-
-    function createOffscreen(w,h){
-      if(typeof document.createElement==='function'){
-        const c=document.createElement('canvas');
-        if(c&&typeof c.getContext==='function'){c.width=w;c.height=h;return c;}
-      }
-      return null;
-    }
-
-    function rebuildStaticLayer(){
-      if(!currentTrack)return;
-      const off=createOffscreen(canvas.width,canvas.height);
-      if(off){
-        render(off,currentTrack);
-        staticLayer=off;
+    const canvas=document.getElementById('trackMap'),status=document.getElementById('mapStatus'),legend=document.getElementById('mapLegend');
+    if(!canvas||!status||!legend||!picker)return;
+    const element=id=>document.getElementById(id);
+    let version=0,atlasPromise=null,currentTrack=null,currentTrackSha=null,staticLayer=null;
+    let recording=null,hasRunSummary=false,cursor=1,playing=false,animId=null,lastFrameTime=null;
+    let playSpeed=Math.max(0.25,Math.min(4,Number(element('replay_speed')?.value)||1));
+    let cameraMode=element('replay_camera')?.value==='follow'?'follow':'full';
+    const layers={outline:true,line:true,hud:true};
+    const noRecording='No replay recorded. The map shows the selected track and its saved starting point.';
+    const summaryOnly='No replay recorded. This run contains summary measurements, not vehicle positions or control samples.';
+    function setText(id,text){const node=element(id);if(node&&node.textContent!==text)node.textContent=text;}
+    function syncControls(reason){
+      const last=recording?.frames[recording.frames.length-1].tick;
+      const play=element('replay_play');
+      if(play){play.disabled=!recording||cursor>=last;play.textContent=playing?'Pause':'Play';}
+      for(const id of ['replay_reset','replay_scrub','replay_speed','replay_camera','replay_layer_outline','replay_layer_line','replay_layer_hud']){
+        const node=element(id);if(node)node.disabled=!recording;
+      }
+      const scrub=element('replay_scrub');
+      if(scrub){scrub.min='1';scrub.max=String(last??1);scrub.step='1';scrub.value=String(Math.round(cursor));}
+      if(!recording){
+        setText('replay_status',reason||(hasRunSummary?summaryOnly:noRecording));
+        setText('replay_time_label','No recorded samples');
+        setText('replay_readout','Position, speed, controls and sensors are unavailable until a replay is recorded.');
       }else{
-        render(canvas,currentTrack);
-        staticLayer=null;
+        const state=cursor>=last?'Finished. Use Restart to view it again.':playing?'Playing.':'Paused.';
+        setText('replay_status',`Fresh recorded CPU evaluation · ${recording.frames.length} samples · 60 Hz physics and controls · 10 Hz recording. ${state}`);
       }
     }
-
-    function rebuildProfiles(){
-      if(!currentTrack||!currentTrack._geometry)return;
-      const geom=currentTrack._geometry;
-      const reqTicks=analysisState?.summary?.conditions?.requested_ticks||receiptState?.report?.requested_ticks||Number(document.getElementById('training_ticks')?.value)||900;
-      maxTicks=Math.max(60,Math.min(18000,reqTicks));
-      const scrub=document.getElementById('replay_scrub');
-      if(scrub)scrub.max=String(maxTicks);
-      if(currentTick>maxTicks)currentTick=0;
-
-      const vType=analysisState?.summary?.conditions?.vehicle_type??receiptState?.report?.vehicle_type??stagedNet?.Type??Number(document.getElementById('starter_vehicle')?.value||0);
-      profiles=[];
-      swarmProfiles=[];
-
-      if(analysisState?.summary?.mode==='train'&&analysisState.summary.winners){
-        const roleMeta=[
-          ['fitness','Fitness Leader','#62dfb1'],
-          ['fastest_lap','Fastest Lap','#ffd073'],
-          ['clean_laps','Clean Laps','#58a6ff']
-        ];
-        for(const [role,label,color] of roleMeta){
-          const w=analysisState.summary.winners[role];
-          if(w&&w.status==='available'){
-            const row=analysisState.descriptorRows?.find(r=>r.candidate_id===w.candidate_id);
-            profiles.push(buildCandidateProfile({
-              id:w.candidate_id,
-              role,
-              label:`${label} (${w.candidate_id})`,
-              color,
-              vehicleType:vType,
-              network:analysisState.winnerNetworks?.[role]?.decoded||stagedNet,
-              ticksElapsed:row?.ticks_elapsed||maxTicks,
-              bestLapSeconds:w.best_lap_seconds,
-              forwardLaps:w.forward_laps,
-              physicalContacts:w.physical_contacts,
-              totalDistance:w.total_actual_distance,
-              active:row?.objectives?.active??true,
-              rawMetrics:row?.raw_metrics,
-              carIndex:w.car
-            },geom,maxTicks));
-          }
-        }
-        // Build population swarm for the selected generation in descriptor_generation (up to 20 cars)
-        if(Array.isArray(analysisState.descriptorRows)&&analysisState.descriptorRows.length){
-          const targetGen=Number(document.getElementById('descriptor_generation')?.value)||analysisState.summary.observations?.generations||1;
-          const genRows=analysisState.descriptorRows.filter(r=>r.generation===targetGen).slice(0,20);
-          const palette=['#62dfb1','#ffd073','#58a6ff','#c792ea','#ff8b7b','#7ce4c3'];
-          genRows.forEach((row,idx)=>{
-            swarmProfiles.push(buildCandidateProfile({
-              id:row.candidate_id,
-              role:'swarm',
-              label:`Gen ${row.generation} · Car #${row.car}`,
-              color:palette[idx%palette.length],
-              vehicleType:vType,
-              network:stagedNet,
-              ticksElapsed:row.ticks_elapsed||maxTicks,
-              bestLapSeconds:row.objectives?.best_lap_seconds,
-              forwardLaps:row.objectives?.forward_laps,
-              physicalContacts:row.objectives?.physical_contacts,
-              totalDistance:row.objectives?.total_actual_distance,
-              active:row.objectives?.active,
-              rawMetrics:row.raw_metrics,
-              carIndex:row.car
-            },geom,maxTicks));
-          });
-        }
-      }else if(analysisState?.summary?.mode==='evaluate'&&analysisState.evaluation){
-        const m=analysisState.evaluation.measurements;
-        profiles.push(buildCandidateProfile({
-          id:m.candidate_id||'eval',
-          role:'evaluate',
-          label:'Frozen Evaluation Policy',
-          color:'#62dfb1',
-          vehicleType:vType,
-          network:stagedNet,
-          ticksElapsed:m.ticks_elapsed||maxTicks,
-          bestLapSeconds:m.objectives?.best_lap_seconds,
-          forwardLaps:m.objectives?.forward_laps,
-          physicalContacts:m.objectives?.physical_contacts,
-          totalDistance:m.objectives?.total_actual_distance,
-          active:m.objectives?.active,
-          rawMetrics:m.raw_metrics,
-          carIndex:0
-        },geom,maxTicks));
-      }else if(receiptState?.report){
-        const r=receiptState.report;
-        profiles.push(buildCandidateProfile({
-          id:'receipt',
-          role:'fitness',
-          label:`Run Candidate (${VEHICLE_NAMES[vType]||'Formula'})`,
-          color:'#62dfb1',
-          vehicleType:vType,
-          network:stagedNet,
-          ticksElapsed:r.simulated_ticks||maxTicks,
-          bestLapSeconds:r.best_lap_seconds,
-          forwardLaps:r.best_lap_seconds?1:0,
-          physicalContacts:0,
-          totalDistance:null,
-          active:true,
-          carIndex:0
-        },geom,maxTicks));
-      }
-
-      if(!profiles.length){
-        profiles.push(buildCandidateProfile({
-          id:'staged',
-          role:'staged',
-          label:stagedNet?.Name?`Staged · ${stagedNet.Name}`:`Preview · ${VEHICLE_NAMES[vType]||'Formula'} Starter`,
-          color:'#62dfb1',
-          vehicleType:vType,
-          network:stagedNet,
-          ticksElapsed:maxTicks,
-          bestLapSeconds:11.8,
-          forwardLaps:1,
-          physicalContacts:0,
-          active:true,
-          carIndex:0
-        },geom,maxTicks));
-      }
-
-      // Precompute speed-heatmap ribbon, skid segments, and wall contact markers for the lead profile (zero per-frame path math)
-      const lead=getActiveProfiles()[0]||profiles[0];
-      speedRibbon=[];
-      skidSegments=[];
-      contactMarkers=[];
-      const ribbonSteps=140;
-      for(let i=0;i<=ribbonSteps;i++){
-        const st=evaluateCarAtTick(lead,geom,(i/ribbonSteps)*lead.ticksElapsed,maxTicks);
-        const col=st.braking?'#ff6b6b':st.speedNorm>0.76?'#62dfb1':'#ffd073';
-        speedRibbon.push({x:st.x,y:st.y,color:col,slip:st.slipAngle,heading:st.heading});
-        if(Math.abs(st.slipAngle)>0.11&&i>0){
-          const prev=speedRibbon[i-1];
-          skidSegments.push({x0:prev.x,y0:prev.y,x1:st.x,y1:st.y,nx:-Math.sin(st.heading),ny:Math.cos(st.heading)});
-        }
-      }
-      const totalContacts=lead.physicalContacts||(lead.active?0:1);
-      if(totalContacts>0){
-        // Place contact markers at sharpest corners or terminal point
-        const sortedCorners=geom.samples.map((s,idx)=>({s,idx,k:Math.abs(s.curvature)})).sort((a,b)=>b.k-a.k);
-        for(let c=0;c<Math.min(6,totalContacts);c++){
-          const pick=sortedCorners[c*4]||sortedCorners[0];
-          if(pick){
-            const side=pick.s.curvature>0?1:-1;
-            contactMarkers.push({
-              x:pick.s.x+pick.s.nx*side*geom.roadHalfWidth*0.92,
-              y:pick.s.y+pick.s.ny*side*geom.roadHalfWidth*0.92,
-              label:`Contact #${c+1}`
-            });
-          }
-        }
-      }
-      if(!lead.active){
-        const term=evaluateCarAtTick(lead,geom,lead.ticksElapsed,maxTicks);
-        contactMarkers.push({x:term.x,y:term.y,label:`Eliminated @ ${lead.ticksElapsed}t`,terminal:true});
-      }
-    }
-
-    function getActiveProfiles(){
-      if(focusMode==='swarm'&&swarmProfiles.length)return swarmProfiles;
-      if(focusMode==='fitness'||focusMode==='fastest_lap'||focusMode==='clean_laps'){
-        const found=profiles.find(p=>p.role===focusMode);
-        if(found)return [found];
-      }
-      return profiles;
+    function stopPlayback(){
+      if(animId!==null&&typeof root?.cancelAnimationFrame==='function')root.cancelAnimationFrame(animId);
+      animId=null;playing=false;lastFrameTime=null;
     }
-
-    function drawFrame(){
-      if(!currentTrack||!currentTrack._geometry)return;
-      const ctx=canvas.getContext('2d');
-      if(!ctx||typeof ctx.save!=='function')return;
-      const w=canvas.width,h=canvas.height;
-      const geom=currentTrack._geometry;
-      const activeList=getActiveProfiles();
-      const lead=activeList[0]||profiles[0];
-      if(!lead)return;
-      const leadState=evaluateCarAtTick(lead,geom,currentTick,maxTicks);
-
-      ctx.clearRect(0,0,w,h);
-      ctx.fillStyle='#0c1926';
-      ctx.fillRect(0,0,w,h);
-
+    function renderEmpty(){const ctx=canvas.getContext('2d');ctx.clearRect(0,0,canvas.width,canvas.height);ctx.fillStyle='#0c1926';ctx.fillRect(0,0,canvas.width,canvas.height);}
+    function draw(){
+      if(!currentTrack){renderEmpty();return;}
+      const ctx=canvas.getContext('2d'),view=viewport(canvas,currentTrack);
+      const state=recording?sampleRecording(recording,cursor):null;
+      const position=state?worldPoint(view,state.x,state.y):null;
+      ctx.clearRect(0,0,canvas.width,canvas.height);ctx.fillStyle='#0c1926';ctx.fillRect(0,0,canvas.width,canvas.height);
       ctx.save();
-      if(cameraMode==='follow'){
-        const zoom=2.15;
-        const lookX=leadState.x+Math.cos(leadState.heading)*28;
-        const lookY=leadState.y+Math.sin(leadState.heading)*28;
-        ctx.translate(w*0.5,h*0.5);
-        ctx.scale(zoom,zoom);
-        ctx.translate(-lookX,-lookY);
-      }
-
-      if(staticLayer)ctx.drawImage(staticLayer,0,0);
-      else render(canvas,currentTrack);
-
-      // 1. Tire skid marks in high-slip drift zones
-      if(layers.skids&&skidSegments.length){
-        ctx.save();
-        ctx.strokeStyle='rgba(12,18,26,0.58)';
-        ctx.lineWidth=Math.max(1.4,geom.size*0.022);
-        const trackHalf=Math.max(3,geom.size*0.055);
-        for(const seg of skidSegments){
-          for(const s of [-1,1]){
-            ctx.beginPath();
-            ctx.moveTo(seg.x0+seg.nx*s*trackHalf,seg.y0+seg.ny*s*trackHalf);
-            ctx.lineTo(seg.x1+seg.nx*s*trackHalf,seg.y1+seg.ny*s*trackHalf);
-            ctx.stroke();
-          }
-        }
-        ctx.restore();
-      }
-
-      // 2. Speed-colored racing line heatmap
-      if(layers.line&&speedRibbon.length>1){
-        ctx.save();
-        ctx.lineWidth=Math.max(2.6,geom.size*0.048);
-        ctx.lineCap='round';
-        ctx.globalAlpha=0.82;
-        for(let i=1;i<speedRibbon.length;i++){
-          const p0=speedRibbon[i-1],p1=speedRibbon[i];
-          ctx.beginPath();ctx.moveTo(p0.x,p0.y);ctx.lineTo(p1.x,p1.y);
-          ctx.strokeStyle=p1.color;ctx.stroke();
-        }
-        ctx.restore();
+      if(position&&cameraMode==='follow'){
+        ctx.translate(canvas.width/2,canvas.height/2);ctx.scale(2,2);ctx.translate(-position[0],-position[1]);
       }
-
-      // 3. Collision & Elimination markers (matching r40 collision marker visual language)
-      if(contactMarkers.length){
-        ctx.save();
-        for(const m of contactMarkers){
-          ctx.beginPath();ctx.arc(m.x,m.y,m.terminal?9:6.5,0,Math.PI*2);
-          ctx.fillStyle=m.terminal?'rgba(255,107,107,0.28)':'rgba(255,208,115,0.24)';
-          ctx.fill();
-          ctx.strokeStyle=m.terminal?'#ff6b6b':'#ffd073';
-          ctx.lineWidth=2;
+      if(staticLayer)ctx.drawImage(staticLayer,0,0);else render(canvas,currentTrack);
+      if(recording){
+        if(layers.line){
           ctx.beginPath();
-          ctx.moveTo(m.x-4.5,m.y-4.5);ctx.lineTo(m.x+4.5,m.y+4.5);
-          ctx.moveTo(m.x+4.5,m.y-4.5);ctx.lineTo(m.x-4.5,m.y+4.5);
-          ctx.stroke();
-        }
-        ctx.restore();
-      }
-
-      // 4. Raycast Sensor Fan on the lead vehicle (using actual .evolution Sensors or default 7-ray fan)
-      const netObj=lead.network||stagedNet;
-      const sensorDefs=Array.isArray(netObj?.Sensors)&&netObj.Sensors.some(s=>s.$type==='raycast')
-        ?netObj.Sensors
-        :[
-          {$type:'speed'},
-          {$type:'raycast',Degrees:-75,Length:750},
-          {$type:'raycast',Degrees:-42,Length:850},
-          {$type:'raycast',Degrees:-18,Length:950},
-          {$type:'raycast',Degrees:0,Length:1100},
-          {$type:'raycast',Degrees:18,Length:950},
-          {$type:'raycast',Degrees:42,Length:850},
-          {$type:'raycast',Degrees:75,Length:750}
-        ];
-
-      const sensorInputs=[];
-      const pxPerSimUnit=Math.max(0.08,geom.size/768);
-      for(const s of sensorDefs){
-        if(s.$type==='raycast'){
-          const rad=leadState.heading+(s.Degrees||0)*Math.PI/180;
-          const maxPx=Math.max(28,Math.min(260,(s.Length||800)*pxPerSimUnit*1.6));
-          const hit=castRayAgainstCorridor(geom,leadState.x,leadState.y,rad,maxPx,leadState.idx);
-          sensorInputs.push(hit.frac*2-1);
-          if(layers.rays&&leadState.alive){
-            ctx.save();
-            const beamCol=hit.frac<0.32?'#ff6b6b':hit.frac<0.62?'#ffd073':'#62dfb1';
-            ctx.strokeStyle=beamCol;
-            ctx.globalAlpha=0.52;
-            ctx.lineWidth=1.35;
-            ctx.beginPath();ctx.moveTo(leadState.x,leadState.y);ctx.lineTo(hit.hx,hit.hy);ctx.stroke();
-            ctx.globalAlpha=0.95;
-            ctx.fillStyle=beamCol;
-            ctx.beginPath();ctx.arc(hit.hx,hit.hy,2.6,0,Math.PI*2);ctx.fill();
-            ctx.restore();
-          }
-        }else if(s.$type==='speed'){
-          sensorInputs.push(leadState.speedNorm);
-        }else if(s.$type==='velocitySide'||s.$type==='angularVelocity'){
-          sensorInputs.push(leadState.slipAngle*2);
-        }else if(s.$type==='trackCurvature'){
-          sensorInputs.push(Math.max(-1,Math.min(1,leadState.curvature*geom.size)));
-        }else{
-          sensorInputs.push(leadState.speedNorm*0.7);
-        }
-      }
-
-      // Evaluate actual neural network forward pass if available (<0.01ms)
-      const nnEval=netObj?.NeuralNetwork?evaluateNeuralNetwork(netObj.NeuralNetwork,sensorInputs):null;
-      if(nnEval&&Array.isArray(netObj?.Outputs)&&leadState.alive){
-        const outIds=netObj.Outputs;
-        const idxSteer=outIds.indexOf(0),idxAccel=outIds.indexOf(1),idxHbk=outIds.indexOf(2),idxBrk=outIds.indexOf(3),idxBst=outIds.indexOf(4);
-        if(idxSteer>=0)leadState.controls.steer=leadState.controls.steer*0.55+nnEval.outputs[idxSteer]*0.45;
-        if(idxAccel>=0)leadState.controls.throttle=Math.max(0,(nnEval.outputs[idxAccel]+1)*0.5);
-        if(idxBrk>=0)leadState.controls.brake=Math.max(0,nnEval.outputs[idxBrk]);
-        if(idxHbk>=0)leadState.controls.hbrake=Math.max(0,nnEval.outputs[idxHbk]);
-        if(idxBst>=0)leadState.controls.boost=Math.max(0,nnEval.outputs[idxBst]);
-      }
-
-      // 5. Draw all active ghost/swarm cars back-to-front so lead car is on top
-      const carScale=Math.max(0.68,Math.min(1.38,geom.size/64));
-      for(let i=activeList.length-1;i>=0;i--){
-        const prof=activeList[i];
-        const st=i===0?leadState:evaluateCarAtTick(prof,geom,currentTick,maxTicks);
-        drawVehicle2D(
-          ctx,st.x,st.y,st.heading,st.slipAngle,st.controls.steer,
-          prof.vehicleType,prof.color,carScale*(i===0?1.06:0.92),
-          layers.outline,st.braking,st.boosting,st.alive
-        );
-        // Floating badge above ghost cars in multi-car race
-        if(activeList.length>1&&activeList.length<=4&&typeof ctx.fillText==='function'){
-          ctx.save();
-          ctx.font='700 10px system-ui,sans-serif';
-          ctx.fillStyle=prof.color;
-          ctx.strokeStyle='#08111c';ctx.lineWidth=2.5;
-          const tag=prof.role==='fitness'?'FIT':prof.role==='fastest_lap'?'LAP':prof.role==='clean_laps'?'CLN':`#${i+1}`;
-          ctx.strokeText(tag,st.x-10,st.y-14*carScale);
-          ctx.fillText(tag,st.x-10,st.y-14*carScale);
-          ctx.restore();
+          recording.frames.forEach((frame,index)=>{const p=worldPoint(view,frame.x,frame.y);if(index===0)ctx.moveTo(...p);else ctx.lineTo(...p);});
+          ctx.strokeStyle='#62dfb1';ctx.lineWidth=2;ctx.lineCap='round';ctx.stroke();
         }
+        // Native rotation zero faces -Y; the vehicle illustration faces +X.
+        drawVehicle2D(ctx,...position,state.rotation-Math.PI/2,recording.vehicle_type,'#62dfb1',Math.max(0.55,Math.min(1.1,view.size/120)),layers.outline,state.frame.active);
       }
       ctx.restore();
-
-      // 6. Screen-Space Telemetry & Ghost Leaderboard HUD Overlay
-      if(layers.hud&&typeof ctx.fillText==='function'){
-        drawHudOverlay(ctx,w,h,lead,leadState,activeList,nnEval);
-      }
-
-      // Sync timeline scrubber label
-      const timeLabel=document.getElementById('replay_time_label');
-      if(timeLabel){
-        const sec=(currentTick/60).toFixed(2);
-        const maxSec=(maxTicks/60).toFixed(1);
-        timeLabel.textContent=`${sec}s / ${maxSec}s · Tick ${Math.round(currentTick)} / ${maxTicks}`;
-      }
-      const scrub=document.getElementById('replay_scrub');
-      if(scrub&&document.activeElement!==scrub)scrub.value=String(Math.round(currentTick));
-    }
-
-    function drawHudOverlay(ctx,w,h,lead,leadState,activeList,nnEval){
-      ctx.save();
-      // Top-left status pill
-      ctx.fillStyle='rgba(9,17,27,0.84)';
-      ctx.strokeStyle='rgba(73,98,124,0.65)';
-      ctx.lineWidth=1;
-      ctx.beginPath();ctx.roundRect(12,12,285,54,8);ctx.fill();ctx.stroke();
-
-      ctx.fillStyle='#62dfb1';ctx.font='700 11px system-ui,sans-serif';
-      const sector=leadState.u<0.333?'S1':leadState.u<0.667?'S2':'S3';
-      const surfName=NAMES[leadState.surface]||'Asphalt';
-      ctx.fillText(`${lead.label.slice(0,34).toUpperCase()}`,22,29);
-      ctx.fillStyle='#c6d9e9';ctx.font='600 11px ui-monospace,SFMono-Regular,monospace';
-      const bestStr=lead.bestLapSeconds?`Best ${lead.bestLapSeconds.toFixed(3)}s`:`Contacts ${lead.physicalContacts}`;
-      ctx.fillText(`LAP ${leadState.lap} · ${sector} · ${surfName.toUpperCase()} · ${bestStr}`,22,46);
-      ctx.fillStyle='#82e6bb';ctx.font='600 9.5px system-ui,sans-serif';
-      ctx.fillText('CLIENT TELEMETRY REPLAY · 0 SERVER COMPUTE',22,60);
-
-      // Bottom-left Live Control Telemetry Bars + Speedometer
-      const bx=12,by=h-94,bw=260,bh=82;
-      ctx.fillStyle='rgba(9,17,27,0.86)';
-      ctx.strokeStyle='rgba(73,98,124,0.65)';
-      ctx.beginPath();ctx.roundRect(bx,by,bw,bh,8);ctx.fill();ctx.stroke();
-
-      // Speed & Slip readout
-      ctx.fillStyle='#e5edf5';ctx.font='800 18px ui-monospace,SFMono-Regular,monospace';
-      ctx.fillText(`${String(leadState.speedKmh).padStart(3,' ')} km/h`,bx+12,by+24);
-      ctx.fillStyle='#a2b4c8';ctx.font='600 11px ui-monospace,SFMono-Regular,monospace';
-      const slipDeg=(leadState.slipAngle*180/Math.PI).toFixed(1);
-      ctx.fillText(`Slip ${slipDeg}°`,bx+12,by+42);
-      ctx.fillText(`Steer ${(leadState.controls.steer*100).toFixed(0)}%`,bx+12,by+58);
-      ctx.fillStyle=leadState.alive?'#62dfb1':'#ff6b6b';
-      ctx.fillText(leadState.alive?'ACTIVE':'STOPPED',bx+12,by+74);
-
-      // 5 Control bars (STR, THR, BRK, HBK, BST)
-      const bars=[
-        ['STR',(leadState.controls.steer+1)*0.5,'#58a6ff',true],
-        ['THR',leadState.controls.throttle,'#62dfb1',false],
-        ['BRK',leadState.controls.brake,'#ff6b6b',false],
-        ['HBK',leadState.controls.hbrake,'#ffd073',false],
-        ['BST',leadState.controls.boost,'#c792ea',false]
-      ];
-      bars.forEach(([name,val,col,bipolar],idx)=>{
-        const ry=by+12+idx*13.5,rx=bx+142,rw=104,rh=8;
-        ctx.fillStyle='#a2b4c8';ctx.font='700 9.5px ui-monospace,SFMono-Regular,monospace';
-        ctx.fillText(name,bx+112,ry+7.5);
-        ctx.fillStyle='#152233';ctx.fillRect(rx,ry,rw,rh);
-        ctx.fillStyle=col;
-        if(bipolar){
-          const mid=rx+rw*0.5,span=(val-0.5)*rw;
-          ctx.fillRect(span>=0?mid:mid+span,ry,Math.abs(span),rh);
-        }else{
-          ctx.fillRect(rx,ry,Math.max(0,Math.min(1,val))*rw,rh);
-        }
-      });
-
-      // Top-right Ghost Race Standings / Mini Neural Activations
-      if(activeList.length>1){
-        const gx=w-232,gy=12,gw=220,gh=18+Math.min(4,activeList.length)*18;
-        ctx.fillStyle='rgba(9,17,27,0.84)';
-        ctx.strokeStyle='rgba(73,98,124,0.65)';
-        ctx.beginPath();ctx.roundRect(gx,gy,gw,gh,8);ctx.fill();ctx.stroke();
-        ctx.fillStyle='#a2b4c8';ctx.font='700 10px system-ui,sans-serif';
-        ctx.fillText(focusMode==='swarm'?`POPULATION SWARM (${activeList.length} CARS)`:'GHOST RACE COMPARISON',gx+10,gy+13);
-        activeList.slice(0,4).forEach((p,idx)=>{
-          const py=gy+28+idx*16;
-          ctx.fillStyle=p.color;ctx.beginPath();ctx.arc(gx+15,py-3.5,4,0,Math.PI*2);ctx.fill();
-          ctx.fillStyle='#e5edf5';ctx.font='600 10.5px system-ui,sans-serif';
-          const shortRole=p.role==='fitness'?'Fitness Leader':p.role==='fastest_lap'?'Fastest Lap':p.role==='clean_laps'?'Clean Laps':p.label.slice(0,18);
-          const stat=p.bestLapSeconds?`${p.bestLapSeconds.toFixed(2)}s`:`${p.ticksElapsed}t`;
-          ctx.fillText(`${shortRole} · ${stat}`,gx+24,py);
-        });
-      }
-
-      // Mini live neural activation visualizer when network is present
-      if(nnEval&&nnEval.layerActivations.length>=2){
-        const nx=w-178,ny=h-84,nw=166,nh=72;
-        ctx.fillStyle='rgba(9,17,27,0.84)';
-        ctx.strokeStyle='rgba(73,98,124,0.65)';
-        ctx.beginPath();ctx.roundRect(nx,ny,nw,nh,8);ctx.fill();ctx.stroke();
-        ctx.fillStyle='#a2b4c8';ctx.font='700 9.5px system-ui,sans-serif';
-        ctx.fillText(`LIVE POLICY (${nnEval.layerActivations.map(l=>l.length).join('→')})`,nx+8,ny+12);
-        const layersAct=nnEval.layerActivations;
-        const lCount=layersAct.length;
-        for(let l=0;l<lCount;l++){
-          const nodes=layersAct[l],shown=Math.min(8,nodes.length);
-          const lx=nx+14+l*(nw-28)/Math.max(1,lCount-1);
-          for(let i=0;i<shown;i++){
-            const ly=ny+20+(i+0.5)*(nh-26)/shown;
-            const v=nodes[i]||0;
-            ctx.fillStyle=v>=0?'#62dfb1':'#ff6b6b';
-            ctx.globalAlpha=0.3+Math.min(0.7,Math.abs(v)*0.7);
-            ctx.beginPath();ctx.arc(lx,ly,2.6,0,Math.PI*2);ctx.fill();
-          }
+      if(state){
+        const frame=state.frame,speed=Math.hypot(frame.vx,frame.vy)/15*3.6;
+        const contacts=frame.collision_count===undefined?'unavailable':String(frame.collision_count);
+        setText('replay_time_label',`${(cursor/60).toFixed(2)}s / ${(recording.requested_ticks/60).toFixed(2)}s · Tick ${Math.round(cursor)} · Recorded sample ${frame.tick}`);
+        setText('replay_readout',`Recorded sample tick ${frame.tick} (${(frame.tick/60).toFixed(2)}s). Speed ${speed.toFixed(1)} km/h, derived from recorded velocity. Position (${frame.x.toFixed(2)}, ${frame.y.toFixed(2)}). Contacts ${contacts}. ${frame.active?'Active':'Inactive'} at this sample. Controls and sensors unavailable.`);
+        if(layers.hud){
+          ctx.save();ctx.fillStyle='rgba(9,17,27,0.88)';ctx.beginPath();ctx.roundRect(12,12,310,80,8);ctx.fill();
+          ctx.fillStyle='#62dfb1';ctx.font='700 12px system-ui,sans-serif';ctx.fillText('RECORDED CPU EVALUATION',24,33);
+          ctx.fillStyle='#e5edf5';ctx.font='600 12px ui-monospace,monospace';ctx.fillText(`Sample ${frame.tick} · ${speed.toFixed(1)} km/h from velocity`,24,55);
+          ctx.fillStyle='#b4c5d5';ctx.font='12px system-ui,sans-serif';ctx.fillText('Controls and sensors unavailable',24,77);ctx.restore();
         }
-        ctx.globalAlpha=1;
       }
-      ctx.restore();
     }
-
-    function stepLoop(now){
-      animId=null;
-      if(!playing||!currentTrack||(typeof document.hidden==='boolean'&&document.hidden))return;
-      if(!lastFrameTime)lastFrameTime=now;
-      const dt=Math.min(0.1,(now-lastFrameTime)/1000);
-      lastFrameTime=now;
-      // Pause animation automatically while a server training job is actively running so 0% client CPU is used during runs
-      if(!root?.TrainingClient?.isBusy?.()){
-        currentTick+=dt*60*playSpeed;
-        if(currentTick>maxTicks)currentTick=0;
-        drawFrame();
-      }
-      if(typeof root?.requestAnimationFrame==='function')animId=root.requestAnimationFrame(stepLoop);
-    }
-
-    function startLoop(){
-      if(animId||!playing||typeof root?.requestAnimationFrame!=='function')return;
-      lastFrameTime=0;
-      animId=root.requestAnimationFrame(stepLoop);
-    }
-
-    function stopLoop(){
-      if(animId&&typeof root?.cancelAnimationFrame==='function')root.cancelAnimationFrame(animId);
-      animId=null;
-    }
-
-    function bindReplayControls(){
-      const playBtn=document.getElementById('replay_play');
-      const resetBtn=document.getElementById('replay_reset');
-      const scrub=document.getElementById('replay_scrub');
-      const modeSel=document.getElementById('replay_mode');
-      const speedSel=document.getElementById('replay_speed');
-      const camSel=document.getElementById('replay_camera');
-      if(playBtn&&!playBtn.dataset.bound){
-        playBtn.dataset.bound='1';
-        playBtn.addEventListener('click',()=>{
-          playing=!playing;
-          playBtn.textContent=playing?'Pause':'Play';
-          if(playing)startLoop();else{stopLoop();drawFrame();}
-        });
-      }
-      if(resetBtn&&!resetBtn.dataset.bound){
-        resetBtn.dataset.bound='1';
-        resetBtn.addEventListener('click',()=>{currentTick=0;drawFrame();});
-      }
-      if(scrub&&!scrub.dataset.bound){
-        scrub.dataset.bound='1';
-        scrub.addEventListener('input',()=>{
-          currentTick=Number(scrub.value)||0;
-          drawFrame();
-        });
-      }
-      if(modeSel&&!modeSel.dataset.bound){
-        modeSel.dataset.bound='1';
-        modeSel.addEventListener('change',()=>{
-          focusMode=modeSel.value;
-          rebuildProfiles();
-          drawFrame();
-        });
-      }
-      if(speedSel&&!speedSel.dataset.bound){
-        speedSel.dataset.bound='1';
-        speedSel.addEventListener('change',()=>{playSpeed=Number(speedSel.value)||1;});
-      }
-      if(camSel&&!camSel.dataset.bound){
-        camSel.dataset.bound='1';
-        camSel.addEventListener('change',()=>{cameraMode=camSel.value;drawFrame();});
-      }
-      for(const [key,id] of [['outline','replay_layer_outline'],['rays','replay_layer_rays'],['line','replay_layer_line'],['skids','replay_layer_skids'],['hud','replay_layer_hud']]){
-        const el=document.getElementById(id);
-        if(el&&!el.dataset.bound){
-          el.dataset.bound='1';
-          el.addEventListener('change',()=>{layers[key]=el.checked;drawFrame();});
-        }
-      }
-      const starterVeh=document.getElementById('starter_vehicle');
-      if(starterVeh&&!starterVeh.dataset.replayBound){
-        starterVeh.dataset.replayBound='1';
-        starterVeh.addEventListener('change',()=>{rebuildProfiles();drawFrame();});
+    function clearRecording(reason){
+      const hadRecording=recording!==null;stopPlayback();recording=null;cursor=1;
+      if(hadRecording)draw();syncControls(reason);
+    }
+    function step(now){
+      animId=null;if(!playing||!recording)return;
+      if(document.hidden){stopPlayback();syncControls();return;}
+      if(lastFrameTime===null)lastFrameTime=now;
+      const elapsed=Math.max(0,Math.min(0.1,(now-lastFrameTime)/1000));lastFrameTime=now;
+      const last=recording.frames[recording.frames.length-1].tick;
+      cursor=Math.min(last,cursor+elapsed*60*playSpeed);
+      draw();
+      if(cursor>=last){stopPlayback();syncControls();return;}
+      syncControls();animId=root.requestAnimationFrame(step);
+    }
+    function bind(){
+      const on=(id,event,callback)=>{const node=element(id);if(node)node.addEventListener(event,callback);};
+      on('replay_play','click',()=>{
+        if(!recording)return;
+        if(playing){stopPlayback();syncControls();return;}
+        if(cursor>=recording.frames[recording.frames.length-1].tick||typeof root?.requestAnimationFrame!=='function')return;
+        playing=true;lastFrameTime=null;syncControls();animId=root.requestAnimationFrame(step);
+      });
+      on('replay_reset','click',()=>{if(!recording)return;stopPlayback();cursor=recording.frames[0].tick;draw();syncControls();});
+      on('replay_scrub','input',()=>{
+        if(!recording)return;const value=Number(element('replay_scrub').value);if(!Number.isFinite(value))return;
+        stopPlayback();cursor=Math.max(recording.frames[0].tick,Math.min(recording.frames[recording.frames.length-1].tick,value));draw();syncControls();
+      });
+      on('replay_speed','change',()=>{playSpeed=Math.max(0.25,Math.min(4,Number(element('replay_speed').value)||1));});
+      on('replay_camera','change',()=>{cameraMode=element('replay_camera').value==='follow'?'follow':'full';draw();});
+      for(const key of ['outline','line','hud']){
+        const id='replay_layer_'+key,node=element(id);if(node)layers[key]=node.checked;
+        on(id,'change',()=>{layers[key]=element(id).checked;draw();});
       }
+      document.addEventListener('visibilitychange',()=>{if(document.hidden){stopPlayback();syncControls();}});
     }
-
     async function refresh(){
-      const current=++version;
-      bindReplayControls();
+      const current=++version;clearRecording();currentTrackSha=null;currentTrack=null;staticLayer=null;
       const info=picker.info();
-      const source=info.source==='builtin'?info.display_name:document.getElementById('track')?.files?.[0]?.name;
-      if(!source){
-        currentTrack=null;staticLayer=null;stopLoop();
-        status.textContent='Select a built-in track or choose a custom .track file.';legend.textContent='';renderEmpty();return;
-      }
+      const source=info.source==='builtin'?info.display_name:element('track')?.files?.[0]?.name;
+      if(!source){status.textContent='Select a built-in track or choose a custom .track file.';legend.textContent='';renderEmpty();return;}
       status.textContent='Loading '+source+'…';
       try{
         atlasPromise??=fetch('/assets/track-atlas.json',{cache:'no-store',credentials:'same-origin'}).then(r=>{
           if(!r.ok)throw Error('Track atlas unavailable');return r.json();
         });
         const [file,atlas]=await Promise.all([picker.file(),atlasPromise]);
-        const track=model(await decode(file),atlas);
+        if(!file||file.size<1||file.size>1048576)throw Error('Choose a .track file under 1 MB');
+        const hashPromise=root?.crypto?.subtle?file.arrayBuffer().then(bytes=>root.crypto.subtle.digest('SHA-256',bytes)).then(bytes=>Array.from(new Uint8Array(bytes),n=>n.toString(16).padStart(2,'0')).join('')):Promise.resolve(null);
+        const [saved,sha]=await Promise.all([decode(file),hashPromise]);
+        const track=model(saved,atlas);
         if(current!==version)return;
-        currentTrack=track;
-        currentSourceName=source;
+        currentTrack=track;currentTrackSha=sha;
         render(canvas,track);
-        rebuildStaticLayer();
-        rebuildProfiles();
-        drawFrame();
-        startLoop();
+        const off=document.createElement?.('canvas');
+        if(off?.getContext?.('2d')){off.width=canvas.width;off.height=canvas.height;render(off,track);staticLayer=off;}
         const counts=[0,0,0];track.tiles.forEach(tile=>counts[tile.surface]++);
         status.textContent=source+' · '+track.tiles.length+' pieces · green dot marks the saved starting point';
-        legend.textContent=NAMES.filter((_,i)=>counts[i]).map(name=>{
-          const i=NAMES.indexOf(name);return name+' '+counts[i];
-        }).join(' · ')+' · Zero-compute telemetry visualizer: static circuit is cached once; ghost trajectories & sensor rays run locally in browser.';
+        legend.textContent=NAMES.filter((_,i)=>counts[i]).map(name=>name+' '+counts[NAMES.indexOf(name)]).join(' · ')+' · Orange line follows the track centerline. Collision shapes are not shown. Vehicle positions appear only from a recorded replay.';
       }catch(error){
         if(current!==version)return;
-        currentTrack=null;staticLayer=null;stopLoop();
-        renderEmpty();status.textContent='Map unavailable: '+error.message;legend.textContent='Training selection is unaffected.';
+        currentTrack=null;currentTrackSha=null;staticLayer=null;renderEmpty();
+        status.textContent='Map unavailable: '+error.message;legend.textContent='Training selection is unaffected.';
       }
     }
-    function renderEmpty(){const ctx=canvas.getContext('2d');ctx.clearRect(0,0,canvas.width,canvas.height);ctx.fillStyle='#0c1926';ctx.fillRect(0,0,canvas.width,canvas.height);}
-    document.addEventListener('track-library-change',refresh);
-    if(typeof document.addEventListener==='function'){
-      document.addEventListener('visibilitychange',()=>{if(document.hidden)stopLoop();else if(playing&&currentTrack)startLoop();});
-    }
-
     const controller={
       refresh,
-      setStagedNetwork(net){
-        stagedNet=net||null;
-        if(currentTrack){rebuildProfiles();drawFrame();}
+      setStagedNetwork(){clearRecording();},
+      setRunAnalysis(analysis,receipt){hasRunSummary=Boolean(analysis?.summary||receipt?.report);clearRecording();},
+      focusCandidate(){clearRecording();},
+      clearRecording,
+      setRecording(payload,expectedTrackSha,expectedNetworkSha){
+        clearRecording();
+        try{
+          const next=validateRecording(payload,expectedTrackSha,expectedNetworkSha);
+          if(!currentTrack||!currentTrackSha)throw Error('The selected track must finish loading and hash verification before replay');
+          if(next.track_sha256!==currentTrackSha)throw Error('The recording belongs to a different selected track');
+          recording=next;cursor=next.frames[0].tick;draw();syncControls();
+          return {frames:next.frames.length,first_tick:cursor,last_tick:next.frames[next.frames.length-1].tick};
+        }catch(error){clearRecording('Replay unavailable: '+error.message);throw error;}
       },
-      setRunAnalysis(analysis,receipt){
-        analysisState=analysis||null;
-        receiptState=receipt||null;
-        const modeSel=document.getElementById('replay_mode');
-        if(modeSel){
-          if(analysis?.summary?.mode==='train')focusMode=modeSel.value='winners';
-          else if(analysis?.summary?.mode==='evaluate')focusMode=modeSel.value='fitness';
-        }
-        currentTick=0;
-        if(currentTrack){rebuildProfiles();drawFrame();startLoop();}
-      },
-      focusCandidate(roleOrGen){
-        const modeSel=document.getElementById('replay_mode');
-        if(roleOrGen==='swarm'){focusMode='swarm';if(modeSel)modeSel.value='swarm';}
-        else if(['winners','fitness','fastest_lap','clean_laps','staged'].includes(roleOrGen)){
-          focusMode=roleOrGen;if(modeSel)modeSel.value=roleOrGen;
-        }
-        currentTick=0;
-        if(currentTrack){rebuildProfiles();drawFrame();startLoop();}
-      }
     };
     if(typeof root==='object'&&root)root.TrackReplay=controller;
-    refresh();
+    bind();syncControls();document.addEventListener('track-library-change',refresh);refresh();
     return controller;
   }
-  return {mount,model,decode,render};
+  return {mount,model,decode,render,validateRecording,sampleRecording};
 });