Upgrade track telemetry replay visualizer, KPI strip, generation chart, and 2D vehicle outline preview

FRONTEND_SOURCE.json

@@ -5,19 +5,19 @@
     "source": "Runner r14 single-engine browser UI; selected .track tile renderer added from simulator atlas",
     "source_sha256": "65d1e5f2c4e19b4951b828e82510005ab99a5270cf3dcb9f4eaa0fa1af8c40f8"
   },
-  "client_sha256": "cbb1dd26a8fe4256abf827903df94749dc8e4f99912d29dba7f74ba6e477b851",
+  "client_sha256": "e42cd311e5a16baeec9caa8909ad1b8e08532b10cab320c14bef8a47d7101b53",
   "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": "7bdaf7ca11a455525c22432298e120ca2fa5257283b9815467e005e09da07a26",
+  "output_sha256": "16c6a720e3383e23aca7065466b25d573e50b0ea625fcca00e10d6844c9161b7",
   "packaged_frontend_files": {
     "assets/track-atlas.json": "d97c8900e3e5fb17734b5bd61d1f4f4b196d9be30af9848e2e273ae7e4079ae4",
-    "client.js": "cbb1dd26a8fe4256abf827903df94749dc8e4f99912d29dba7f74ba6e477b851",
-    "help.html": "4ce8f3995723a419d810c60212e996d71bfc0fcb61d44bf4fa8500030c356f47",
+    "client.js": "e42cd311e5a16baeec9caa8909ad1b8e08532b10cab320c14bef8a47d7101b53",
+    "help.html": "58959e994a8e4bbd3c70b2a6256cb699ac615cde718c6d0288fabeee909098a2",
     "hf-auth.js": "3f3938bbc0935e4e9230c094029ef46e03beea74be199887c50e053e03dafcfe",
-    "index.html": "7bdaf7ca11a455525c22432298e120ca2fa5257283b9815467e005e09da07a26",
+    "index.html": "16c6a720e3383e23aca7065466b25d573e50b0ea625fcca00e10d6844c9161b7",
     "track-library.js": "351ec4c026b49420ce963f4310cb000d9e987fd28e6dac5ecd0176509340f6e6",
-    "track-map.js": "ab5374aa49c7ccec90a787ee8c56cd71beb56b903bf2bbc322783e6f43c009f0"
+    "track-map.js": "cf84f311e64d2d029c0fba43dd7b8ebc8d63177c9edd3577a45591c1c28c41e4"
   },
-  "packaged_frontend_sha256": "da29a0f25c5e6778b017e748a1103f2fee02b53af66bda693cbf926e72a6b62d",
+  "packaged_frontend_sha256": "c25cad5b810984dd9e428c8019b33d7a4d347b375d9cb5fd30ad579fe13fa137",
   "status": "Local measured-capacity candidate; hosted qualification pending"
 }

RELEASE_MANIFEST.json

@@ -7,7 +7,7 @@
     "CUDA_REFERENCE.md": "f7453c3254d244f8b0de41fde5851cb025159f5cea4a4d1a5d8208a955550c6c",
     "DATA_POLICY.md": "fc5978528abe1c21c14882417ac8a706e04a0831bbd3fdb3de8c64442c1a7b3d",
     "FEEDBACK.md": "f95b8f6afbf4a360976c0edca5d52f5b3a0b668c9a944d4947b840a7c53a122a",
-    "FRONTEND_SOURCE.json": "65733d3682f4d0b320b4d6dc5187c895e1747671d369da9bfd1fb0edd9ae2c21",
+    "FRONTEND_SOURCE.json": "e91215aedc0af1b701817e50196e3e9beef118b703413f109d3bf2b75c58513d",
     "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": "0dca9e5b08a974c0f37f9ad5d405b24ff76a011e62b06feb2168860513d52744",
+    "client.js": "e42cd311e5a16baeec9caa8909ad1b8e08532b10cab320c14bef8a47d7101b53",
     "delivery.py": "6bdba2e87c3e19a41440cb16103695af27105f8bafbae38948bbb1b936ed0c1b",
     "gpu_tickets.py": "20928fcf1ca24648809ad8712c929377bdcc8b5e6b4387bfff3503ec5711928b",
     "help.html": "58959e994a8e4bbd3c70b2a6256cb699ac615cde718c6d0288fabeee909098a2",
     "hf-auth.js": "3f3938bbc0935e4e9230c094029ef46e03beea74be199887c50e053e03dafcfe",
     "hf_identity.py": "913fb1e089af21f376e8359a20cbc838d5bcd7971def6989a4382d53c1127b37",
-    "index.html": "b9a8b6297b0e48d00be6452be040961aa258cb325a238d6d2adda3334d7b32b1",
+    "index.html": "16c6a720e3383e23aca7065466b25d573e50b0ea625fcca00e10d6844c9161b7",
     "native/analysis.patch": "42f79de67cb0734cffb2a7582f5479cab42ab82675884b8b42b9f158d46a98e8",
     "native/build-receipt.json": "559a7e4e382f9f7caa1c5ceb566a5a0bbefad2ed3a2e2cf604e31c9c3890c348",
     "native/physics-build-receipt.json": "63561c108554a09884cc68a1bfadfb8a3f530a800de0700ff671d99e558609fe",
@@ -83,7 +83,7 @@
     "star_check.py": "5c17080957b81ffccf0de8314635b471562e55c92c97a1207d9034a99279b2c3",
     "steam_leaderboard.py": "d76397c39cae58f636ddf9a9be1a46ae3d77fefd6b7269feac73d34d97165481",
     "track-library.js": "351ec4c026b49420ce963f4310cb000d9e987fd28e6dac5ecd0176509340f6e6",
-    "track-map.js": "a5e76598d5988c0446ad3b5796b601467cf9423e6daddf21753258b6eee0c195",
+    "track-map.js": "cf84f311e64d2d029c0fba43dd7b8ebc8d63177c9edd3577a45591c1c28c41e4",
     "training_config.py": "6eb7282bbee3b3a6273bddc29c949d9904067414c26e501d815012f033173a1c",
     "vendor/gradio-client/LICENSE": "c71d239df91726fc519c6eb72d318ec65820627232b2f796219e87dcf35d0ab4",
     "vendor/gradio-client/dist/index.min.js": "fdd776db8633354f118fe2908c980592283968737e6b91dc3aa86d648da5c3fd",

client.js

@@ -458,9 +458,9 @@ const networkSource=()=>stagedNetwork || $('network').files[0];
 window.addEventListener('ald:batch-draft-change',buttons);
 document.addEventListener('track-library-change',buttons);
 async function refreshFreezeNetwork(file){
-  if(!file){window.setFreezeNetwork?.(null);return;}
-  try{const network=await validateNetworkBytes(new Uint8Array(await file.arrayBuffer()));if(networkSource()===file)window.setFreezeNetwork?.(network);}
-  catch(error){if(networkSource()===file){window.setFreezeNetwork?.(null);if($('freeze_status'))$('freeze_status').textContent='Network metadata unavailable: '+error.message;}}
+  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={
@@ -685,6 +685,7 @@ function renderStarCheck(){
 function renderAnalysisPanel(){
   const panel=$('analysisPanel');if(!panel)return;
   renderStarCheck();
+  window.TrackReplay?.setRunAnalysis?.(localAnalysis,runReceipt||portableReceipt);
   panel.hidden=!localAnalysis;
   if(!localAnalysis){$('winnerTools').hidden=true;$('evaluationTools').hidden=true;$('winnerRows').replaceChildren();$('winner_continue').replaceChildren();$('evaluationRows').replaceChildren();return;}
   const {summary}=localAnalysis,train=summary.mode==='train';
@@ -715,6 +716,7 @@ async function useWinner(role,mode='evaluate'){
   const item=localAnalysis?.winnerNetworks?.[role]??comparisonPlan?.winnerNetworks?.[role];if(!item)throw Error('That winner policy is unavailable');
   const file=new File([item.bytes],role+'-'+item.candidate_id+'.evolution',{type:'application/octet-stream'});
   window.TrainingClient.useNetwork(file);selectedWinner=role;
+  window.TrackReplay?.focusCandidate?.(role);
   if($('winner_continue'))$('winner_continue').value=role;
   if($('run_mode'))$('run_mode').value=mode;syncRunModeUI();buttons();
   say(mode==='train'?'Selected '+role.replaceAll('_',' ')+' policy as the starting network for a new training run. The next Run click starts it with the selected recipe.':'Selected '+role.replaceAll('_',' ')+' policy for frozen evaluation. Its weights will stay unchanged; the next Run click starts it.');
@@ -750,6 +752,7 @@ function showDescriptor(){
   if(!Number.isInteger(generation)||!Number.isInteger(car)){ $('descriptor_status').textContent='Enter whole generation and car numbers.';return; }
   const row=localAnalysis.descriptorRows.find(item=>item.generation===generation&&item.car===car);
   if(!row){$('descriptor_status').textContent='No descriptor was recorded for that generation and car.';$('descriptor_tables').replaceChildren();return;}
+  window.TrackReplay?.focusCandidate?.('swarm');
   const wrap=document.createElement('div');
   const summary=document.createElement('p');summary.textContent='Candidate '+row.candidate_id+' · ticks '+row.ticks_elapsed+' · stats updates '+row.stats_update_count+' · weights '+row.weights_sha256;wrap.append(summary);
   const table=(title,entries)=>{const h=document.createElement('h3');h.textContent=title;wrap.append(h);const t=document.createElement('table'),body=document.createElement('tbody');for(const [name,value] of entries){const tr=document.createElement('tr'),a=document.createElement('th'),b=document.createElement('td');a.textContent=name;b.textContent=value===null?'Not observed':typeof value==='number'?String(value):String(value);tr.append(a,b);body.append(tr);}t.append(body);wrap.append(t);};
@@ -839,6 +842,7 @@ async function parseRunAnalysisArchive(bytes,descriptor,reportedSummary){
       if(!matched)throw Error('Winner candidate is missing from the descriptor rows');
       const network=await validateNetworkBytes(file.bytes);if(network.Type!==summary.conditions.vehicle_type)throw Error('Winner network vehicle type does not match analysis conditions');
       winnerNetworks[role]={bytes:file.bytes,sha256:file.sha256,candidate_id:winner.candidate_id,vehicle_type:summary.conditions.vehicle_type};
+      Object.defineProperty(winnerNetworks[role],'decoded',{value:network,enumerable:false});
     }else if(file)throw Error('Unavailable winner unexpectedly has a network artifact');
   }
   let evaluation=null;
@@ -897,11 +901,64 @@ function validatePrimaryAnalysisMatch(primarySha,parsed){
   return true;
 }
 window.RunAnalysis={parseArchive:parseRunAnalysisArchive,validatePrimaryMatch:validatePrimaryAnalysisMatch,validateComparisonRequest,uniqueWinnerRoles,validateStarCheck};
+function renderHistoryChart(history){
+  const wrap=$('historyChartWrap'),canvas=$('historyChartCanvas');
+  if(!wrap||!canvas||typeof canvas.getContext!=='function')return;
+  if(!Array.isArray(history)||history.length<1){wrap.hidden=true;return;}
+  wrap.hidden=false;
+  const ctx=canvas.getContext('2d');if(!ctx||typeof ctx.save!=='function')return;
+  const w=canvas.width,h=canvas.height;ctx.clearRect(0,0,w,h);
+  ctx.fillStyle='#09111b';ctx.fillRect(0,0,w,h);
+  const padL=52,padR=52,padT=24,padB=28,pw=w-padL-padR,ph=h-padT-padB;
+  const scores=history.flatMap(r=>[r.best_score,r.mean_score]).filter(v=>typeof v==='number'&&Number.isFinite(v));
+  const minS=scores.length?Math.min(...scores):0,maxS=scores.length?Math.max(minS+1e-4,Math.max(...scores)):1;
+  ctx.strokeStyle='#1e3044';ctx.lineWidth=1;
+  for(let g=0;g<=3;g++){const y=padT+(g/3)*ph;ctx.beginPath();ctx.moveTo(padL,y);ctx.lineTo(w-padR,y);ctx.stroke();}
+  const xAt=i=>padL+(history.length===1?pw*0.5:(i/(history.length-1))*pw);
+  const yScore=v=>padT+ph-((v-minS)/(maxS-minS))*ph;
+  // Mean fitness curve (#58a6ff)
+  ctx.strokeStyle='#58a6ff';ctx.lineWidth=2;ctx.beginPath();
+  history.forEach((r,i)=>{const x=xAt(i),y=yScore(r.mean_score||0);if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);});ctx.stroke();
+  // Best fitness curve (#62dfb1)
+  ctx.strokeStyle='#62dfb1';ctx.lineWidth=2.5;ctx.beginPath();
+  history.forEach((r,i)=>{const x=xAt(i),y=yScore(r.best_score||0);if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);});ctx.stroke();
+  // Best lap dots (#ffd073)
+  const laps=history.map(r=>r.best_lap_seconds).filter(v=>typeof v==='number'&&v>0);
+  if(laps.length){
+    const minL=Math.min(...laps)*0.95,maxL=Math.max(minL+0.1,Math.max(...laps)*1.05);
+    ctx.fillStyle='#ffd073';
+    history.forEach((r,i)=>{if(typeof r.best_lap_seconds==='number'&&r.best_lap_seconds>0){
+      const x=xAt(i),y=padT+((r.best_lap_seconds-minL)/(maxL-minL))*ph;
+      ctx.beginPath();ctx.arc(x,y,3.5,0,Math.PI*2);ctx.fill();
+    }});
+  }
+  if(typeof ctx.fillText==='function'){
+    ctx.fillStyle='#62dfb1';ctx.font='700 11px system-ui,sans-serif';ctx.fillText('Best Fitness',padL,15);
+    ctx.fillStyle='#58a6ff';ctx.fillText('Mean Fitness',padL+90,15);
+    ctx.fillStyle='#ffd073';ctx.fillText('● Completed Lap',padL+185,15);
+    ctx.fillStyle='#8fa6bc';ctx.font='600 10px ui-monospace,SFMono-Regular,monospace';
+    ctx.fillText(maxS.toFixed(2),6,padT+6);ctx.fillText(minS.toFixed(2),6,padT+ph);
+    ctx.fillText('Gen 1',padL,h-8);ctx.fillText('Gen '+history.length,w-padR-42,h-8);
+  }
+}
 function showDetails(r){
   const metric=n=>typeof n==='number'?n.toFixed(3):'Not reported';
   if($('effectiveSettings'))$('effectiveSettings').textContent=JSON.stringify(r?.settings??{},null,2);
   if($('generationHistory'))$('generationHistory').textContent=(r?.history??[]).map(h=>
     'Generation '+h.generation+' · mutation '+metric(h.mutation)+' · best '+metric(h.best_score)+' · mean '+metric(h.mean_score)+' · lap '+(h.best_lap_seconds??'none')+' · cars lapped '+(h.lapped_cars??'not reported')+' · ticks '+metric(h.simulated_ticks)).join('\n');
+  const kpi=$('runKpiStrip');
+  if(kpi){
+    if(!r){kpi.hidden=true;renderHistoryChart(null);}
+    else{
+      kpi.hidden=false;
+      if($('kpi_best_score'))$('kpi_best_score').textContent=typeof r.best_score==='number'?r.best_score.toFixed(3):'—';
+      if($('kpi_mean_score'))$('kpi_mean_score').textContent=typeof r.mean_score==='number'?r.mean_score.toFixed(3):'—';
+      if($('kpi_best_lap'))$('kpi_best_lap').textContent=typeof r.best_lap_seconds==='number'?r.best_lap_seconds.toFixed(3)+' s':'No lap';
+      if($('kpi_lapped_cars'))$('kpi_lapped_cars').textContent=r.lapped_cars!=null?`${r.lapped_cars} / ${r.population??'—'}`:'0';
+      renderHistoryChart(r.history);
+    }
+  }
+  window.TrackReplay?.setRunAnalysis?.(localAnalysis,runReceipt||portableReceipt||(r?{report:r}:null));
 }
 $('run').onclick = async () => {
   const comparisonAttempt=!!comparisonPlan,comparisonRole=comparisonAttempt?comparisonPlan.roles[comparisonPlan.index]:null;

index.html

@@ -5,6 +5,7 @@
 /* Workspace layout: help stays close; recipes and batch steps stay readable. */
 *{box-sizing:border-box}button,select,summary{min-height:44px}button,a,summary,input,select,textarea{scroll-margin-top:90px}:focus-visible{outline:3px solid #ffd073;outline-offset:3px}.lab-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:6px 0}.lab-header h1{font-size:clamp(26px,3vw,34px);margin-top:4px}.lab-header .intro{font-size:16px;margin-top:5px}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.help-link{display:inline-flex;align-items:center;min-height:44px;border:1px solid #49627c;border-radius:8px;padding:9px 13px;text-decoration:none;font-weight:650}.about{max-width:none;margin:4px 0 0;padding:0;border:0}.about>summary{display:flex;align-items:center;font-size:14px;width:fit-content;gap:8px}.about>summary::before{content:'▸'}.about[open]>summary::before{content:'▾'}.about[open]{border:1px solid #2a3d52;border-radius:10px;padding:0 16px 12px}.quick-start{border:1px solid #385568;background:#102232;border-radius:12px;margin-top:8px;padding:0 16px}.quick-start>summary{padding:12px 0;line-height:1.4}.quick-start>summary .hint{font-size:14px;font-weight:400;margin-left:12px}.quick-start[open]>summary{margin-bottom:0}.quick-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;list-style:none;padding:12px 0;margin:0;counter-reset:quick}.quick-steps li{counter-increment:quick;min-width:0}.quick-steps strong{display:block;margin-bottom:8px}.quick-steps strong::before{content:counter(quick) '. ';color:#62dfb1}.quick-steps p{font-size:14px;line-height:1.55;color:#b9cddd;margin:0 0 10px}.quick-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid #2a3d52}.tabs{margin:12px 0 0;gap:8px}.tabs button{border-radius:9px}.pane>.card{margin-top:16px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.section-heading h2,.section-heading h3{margin:0}.section-heading a{font-size:14px}.section-intro{max-width:85ch;margin:10px 0 18px;color:#b9cddd;line-height:1.55}.recipe-panel{border:1px solid #385568;border-radius:12px;background:#102030;padding:16px;margin:16px 0 24px}.recipe-panel .row label{margin-top:0}.recipe-actions,.batch-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}.form-state{font-size:14px;font-weight:650;color:#ffd073;margin:10px 0 0;line-height:1.55}.form-state[data-state="saved"]{color:#82e6bb}.form-state[data-state="invalid"]{color:#ffb5a2}.settings-summary{font-size:14px;color:#b9cddd;line-height:1.55;margin:8px 0 0;overflow-wrap:anywhere}.recipe-panel details{margin-top:12px;padding-top:10px}.recipe-panel textarea{box-sizing:border-box;width:100%;background:#0c1725;color:#e5edf5;border:1px solid #49627c;border-radius:8px;padding:10px}.recipe-panel .manage-actions{display:flex;align-items:start;gap:12px;flex-wrap:wrap}.destructive-action{margin-top:14px;color:#ffb5a2}.batch-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:24px;align-items:start}.batch-setup{background:#102030;border:1px solid #385568;border-radius:12px;padding:18px;position:sticky;top:92px}.batch-setup h3{margin:0 0 10px}.batch-context{margin:12px 0}.batch-context div{padding:9px 0;border-bottom:1px solid #2a3d52}.batch-context dt{font-size:13px;color:#a2b4c8}.batch-context dd{margin:3px 0 0;overflow-wrap:anywhere;font-weight:600}.sequence-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}.sequence-heading h3{margin:0}.step-count{font-size:14px;color:#b9cddd;white-space:nowrap}.batch-steps{list-style:none;counter-reset:steps;padding:0;margin:12px 0}.batch-step{border:1px solid #3b5268;border-radius:10px;padding:14px;margin-bottom:10px;background:#101d2c}.batch-step[data-invalid="true"]{border-color:#d78970}.step-header{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px}.step-number{color:#82e6bb;font-size:14px;font-weight:800;text-align:center}.step-summary{font-size:14px;line-height:1.5;color:#b9cddd;margin:10px 0 8px;padding-left:40px}.step-actions{display:flex;gap:8px;flex-wrap:wrap;padding-left:40px}.step-actions button{font-size:14px;padding:8px 10px}.batch-empty{border:1px dashed #49627c;border-radius:10px;padding:18px;margin:12px 0;color:#b9cddd;line-height:1.55}.batch-empty p{margin:0 0 12px}.add-step{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.add-step label{margin:0}.add-step select{margin-top:6px}.batch-mode{margin:18px 0 6px;display:flex;align-items:flex-start;gap:10px;line-height:1.5}.batch-mode input{margin-top:5px;flex:none}.batch-progress{border-top:1px solid #2a3d52;margin-top:24px;padding-top:20px}.batch-progress h3{margin:0 0 12px}.batch-progress #batch_status{line-height:1.6}.batch-setup #batch_start{flex:1;min-width:140px}.batch-setup #batch_ready{line-height:1.55}.batch-actions button{min-height:46px}#recipe_feedback:empty,#batches_feedback:empty{display:none}.muted-note{font-size:14px;line-height:1.6;color:#b9cddd}.training-track{margin-top:18px}.training-track label{margin-top:0}
 @media(max-width:1000px){.batch-layout{grid-template-columns:minmax(0,1fr)}.batch-setup{position:static}.quick-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){body{padding:12px}.card{padding:16px}.row{grid-template-columns:minmax(0,1fr)}.quick-steps{grid-template-columns:minmax(0,1fr)}.header-actions{width:100%}.header-actions>*{flex:1;justify-content:center;text-align:center}.lab-header .intro{font-size:15px}.quick-start>summary .hint{display:block;margin-left:18px}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tabs button{font-size:14px;padding:9px 7px}.step-actions,.step-summary{padding-left:0}.add-step{grid-template-columns:minmax(0,1fr)}.batch-setup{padding:14px}.recipe-actions>*{flex:1}.reward{grid-template-columns:minmax(0,1fr) minmax(85px,.7fr) 65px 44px}.reward input{width:65px}.recipe-panel{padding:12px}}
+.replay-bar{background:#101d2c;border:1px solid #2a3d52;border-radius:11px;padding:10px 12px;margin:10px 0}.replay-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.replay-row button{min-height:36px;padding:6px 11px;font-size:13px;font-weight:650}.replay-row select{width:auto;min-height:36px;padding:5px 9px;font-size:13px}.replay-row input[type=range]{flex:1;min-width:120px;accent-color:#62dfb1;padding:0}.replay-time{font:600 12px ui-monospace,SFMono-Regular,monospace;color:#91efc6;white-space:nowrap}.replay-layers{display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid #223447;font-size:12.5px;color:#b9cddd}.replay-layers label{display:inline-flex;align-items:center;gap:5px;margin:0;cursor:pointer}.replay-layers input{margin:0}.kpi-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.kpi-tile{background:#101d2c;border:1px solid #2a3d52;border-radius:10px;padding:10px 12px}.kpi-tile .kpi-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:#a2b4c8}.kpi-tile .kpi-val{font:800 19px ui-monospace,SFMono-Regular,monospace;color:#62dfb1;margin-top:3px}.kpi-tile .kpi-sub{font-size:11.5px;color:#8fa6bc;margin-top:2px}.chart-box{background:#09111b;border:1px solid #2a3d52;border-radius:10px;padding:10px;margin:10px 0}.chart-box canvas{max-height:190px;display:block}.subtab-bar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.subtab-bar button{min-height:36px;padding:6px 12px;font-size:13px;border-radius:18px}.subtab-bar button[aria-pressed=true]{background:#62dfb1;color:#102522;font-weight:700}.editor-visual-grid{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.35fr);gap:16px;align-items:start;margin:14px 0}@media(max-width:850px){.kpi-strip{grid-template-columns:1fr 1fr}.editor-visual-grid{grid-template-columns:minmax(0,1fr)}}
 </style>
 <dialog id="appConfirm" aria-labelledby="appConfirmTitle" aria-describedby="appConfirmMessage">
   <h2 id="appConfirmTitle">Confirm action</h2>
@@ -33,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.</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>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 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>
@@ -47,10 +48,12 @@
 <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="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="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>
 <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>
+<div id="runKpiStrip" class="kpi-strip" hidden><div class="kpi-tile"><div class="kpi-label">Best Fitness</div><div id="kpi_best_score" class="kpi-val">—</div><div id="kpi_best_sub" class="kpi-sub">Final generation</div></div><div class="kpi-tile"><div class="kpi-label">Mean Fitness</div><div id="kpi_mean_score" class="kpi-val" style="color:#58a6ff">—</div><div id="kpi_mean_sub" class="kpi-sub">Population mean</div></div><div class="kpi-tile"><div class="kpi-label">Best Lap Time</div><div id="kpi_best_lap" class="kpi-val" style="color:#ffd073">—</div><div id="kpi_lap_sub" class="kpi-sub">Fastest observed</div></div><div class="kpi-tile"><div class="kpi-label">Lapped Cars</div><div id="kpi_lapped_cars" class="kpi-val" style="color:#c792ea">—</div><div id="kpi_lapped_sub" class="kpi-sub">Completed lap</div></div></div>
+<div id="historyChartWrap" class="chart-box" hidden><canvas id="historyChartCanvas" width="920" height="185" role="img" aria-label="Generation fitness and lap time progression chart"></canvas></div>
 <pre id="runSummary" style="white-space:pre-wrap;line-height:1.7" aria-live="polite"></pre>
 <section id="analysisPanel" hidden aria-labelledby="analysisTitle">
 <h2 id="analysisTitle">Winners and frozen evaluation</h2>
@@ -77,7 +80,7 @@
 <p id="recipe_state" class="form-state" role="status" aria-live="polite">Working settings · not saved yet</p><p id="recipe_summary" class="settings-summary"></p><div class="recipe-actions"><button id="recipe_load" type="button" disabled>Apply recipe</button><button id="recipe_save" type="button">Save settings to A</button><button type="button" data-open-tab="batch" data-focus="batch_add_recipe">Build a batch</button></div><p id="recipe_feedback" role="status" aria-live="polite"></p>
 <details><summary>Import, export &amp; manage recipes</summary><p class="muted-note">Recipes and batches are saved in this browser. Export a backup to move them to another browser or site. Clearing site data removes this library.</p><div class="manage-actions"><button id="recipe_export" type="button">Export recipe library</button><label for="recipe_import">Import recipe library (.json)<input id="recipe_import" type="file" accept=".json"></label><button id="recipe_bucket_nav" type="button">Bucket import / export</button></div><button id="recipe_clear" class="destructive-action" type="button">Clear saved recipes and batches on this device</button><p class="muted-note">The recipe library contains settings only. Saving a recipe does not start a run or upload tracks, networks, or results.</p></details>
 <details><summary>Advanced recipe JSON</summary><textarea id="recipe_draft" rows="12" aria-label="Recipe settings JSON"></textarea><button id="recipe_apply_draft" type="button">Apply JSON to form</button></details></div>
-<div class="section-heading"><h3>Settings for the next run</h3><button id="starter_settings_reset" type="button">Apply first-run settings to this form</button></div><p id="starter_settings_status" class="muted-note" role="status" aria-live="polite">Adjusting this form does not change a saved recipe until you save it.</p><div class="training-track"><label for="trackPresetTraining">Training track · shared with Run &amp; results</label><select id="trackPresetTraining" data-track-library disabled><option value="">Upload a custom track</option></select><p data-track-status role="status" class="hint">Loading built-in replica tracks…</p></div>
+<div class="section-heading"><h3>Settings for the next run</h3><button id="starter_settings_reset" type="button">Apply first-run settings to this form</button></div><p id="starter_settings_status" class="muted-note" role="status" aria-live="polite">Adjusting this form does not change a saved recipe until you save it.</p><div class="subtab-bar" id="trainingSubtabs" role="toolbar" aria-label="Filter training parameter sections"><button type="button" data-train-filter="all" aria-pressed="true">All sections</button><button type="button" data-train-filter="reward_settings" aria-pressed="false">Rewards (14 metrics)</button><button type="button" data-train-filter="native_settings" aria-pressed="false">Evolution &amp; mutation</button><button type="button" data-train-filter="run_settings" aria-pressed="false">Timing &amp; elimination</button><button type="button" data-train-filter="freeze_settings" aria-pressed="false">Selective freezing</button></div><div class="training-track"><label for="trackPresetTraining">Training track · shared with Run &amp; results</label><select id="trackPresetTraining" data-track-library disabled><option value="">Upload a custom track</option></select><p data-track-status role="status" class="hint">Loading built-in replica tracks…</p></div>
 <div id="training_controls"><label for="training_ticks">Simulated ticks per generation</label><input id="training_ticks" type="number" min="1" max="18000" value="900"><small>60 ticks = one simulated second. The first-run setting is 900 ticks (15 simulated seconds) per generation. Per-run limits: CPU 4,000,000 vehicle-ticks and 25 seconds; CUDA 8,000,000 vehicle-ticks and 45 seconds. Both allow up to 32,768 car-generation analysis rows.</small>
 <div class="row"><div><label for="population">Population</label><input id="population" type="number" min="1" max="1024" value="32" disabled><small>1–1,024 cars per generation. The first-run setting is 32.</small></div><div><label for="generations">Generations</label><input id="generations" type="number" min="1" max="2000" value="20" disabled><small>1–2,000; the first-run setting is 20.</small></div></div>
 <p id="work_budget" class="hint" role="status" aria-live="polite"></p>
@@ -108,7 +111,7 @@
 <details><summary>Advanced sequence · edit slot letters</summary><label for="batch_recipe_sequence">Recipe sequence (comma-separated slots)</label><input id="batch_recipe_sequence" type="text" value="" maxlength="300" placeholder="A, B, A" aria-describedby="batch_sequence_help batch_sequence_error"><p id="batch_sequence_help" class="muted-note">The same steps as the list above. Use saved slots A–J, separated by commas; repeated slots are allowed. Maximum 20 steps.</p></details>
 </div><aside class="batch-setup" aria-labelledby="batch_setup_title"><h3 id="batch_setup_title">Ready to run?</h3><dl class="batch-context"><div><dt>Track</dt><dd id="batch_context_track">Choose a track</dd></div><div><dt>Starting network</dt><dd id="batch_context_network">Choose or create a network</dd></div><div><dt>Compute</dt><dd id="batch_context_backend">CPU</dd></div></dl><button type="button" data-open-tab="drive" data-focus="trackPresetDrive">Change run setup</button><p id="batch_plan_summary" class="settings-summary">Add recipes to see the planned work.</p><p id="batch_ready" class="form-state" role="status" aria-live="polite">Save a recipe and add a step to begin.</p><div class="batch-actions"><button class="primary" id="batch_start" type="button" aria-describedby="batch_ready" disabled>Run batch</button></div><p class="muted-note">The settings shown in these steps are saved recipe values. They are fixed when you start; changing a saved recipe affects the next batch you start.</p><details><summary>Results &amp; run limits</summary><p class="muted-note">Each step uses the selected backend limit: CPU 4,000,000 or GPU 8,000,000 vehicle-ticks, and 32,768 analysis rows. Completed results are received automatically. The last candidate stays in page memory; connect a bucket in Run &amp; results to save every step. Server copies are deleted after verified receipt.</p></details></aside></div>
 <section class="batch-progress" aria-labelledby="batch_progress_title"><div class="section-heading"><h3 id="batch_progress_title">Batch progress</h3><button id="batch_stop" type="button" disabled>Stop after current step</button></div><p id="batch_status" role="status">No batch running.</p><div id="batch_history"></div><p id="batches_feedback" role="status" aria-live="polite"></p><details><summary>Batch receipt</summary><button id="batch_export" type="button" disabled>Export batch receipt</button></details></section></div></section>
-<section id="editor" class="pane" role="tabpanel" aria-labelledby="tab-editor" hidden><div class="card"><h2>Network editor</h2><p class="hint">An original editor inspired by <a href="https://the-mars-guy.github.io/AI-Learns-To-Drive-Tool/" target="_blank" rel="noopener">Mars’s network creator</a>. Create fresh networks with the selected vehicle’s game-legal controls, or use its largest original-game shape. Loaded networks keep their original vehicle, output order and sensor parameters. Unsupported files can still be inspected without changing the original.</p><div class="toolbar"><label for="editor_file">Load an existing .evolution file</label><input id="editor_file" type="file" accept=".evolution"><button id="editor_import" disabled>Inspect selected network</button><button id="editor_create" disabled>Create fresh network</button><button id="editor_apply" disabled>Use edited network</button><a id="editor_download" hidden download>Download .evolution</a></div><div class="row"><div><label for="editor_name">Network name</label><input id="editor_name" type="text" maxlength="80" value="Fresh network" disabled><label for="editor_vehicle">Vehicle type for fresh networks</label><select id="editor_vehicle" disabled><option value="0">Formula</option><option value="1">Rally</option><option value="2">Snowmobile</option><option value="3">Truck</option></select><small>This selector applies only when you create a fresh network. Imported vehicle type is retained and shown with the current network.</small><label for="editor_preset">Fresh network preset</label><select id="editor_preset" disabled><option id="editor_small_label" value="small">Small starter · 6 inputs, 4 hidden nodes, 5 outputs</option><option id="editor_maximum_label" value="maximum">Largest game network · 20 inputs, 10 × 16 hidden nodes, 5 outputs</option><option value="custom">Custom</option></select><label for="editor_shape">Input and hidden layer sizes</label><input id="editor_shape" type="text" value="6,4" disabled><small id="editor_shape_hint">Enter 1–20 inputs, followed by 0–10 hidden layers of 1–16 nodes. Output width follows the selected controls. Maximum shape: 20 → ten layers of 16 → 5 (2,869 parameters).</small><fieldset id="editor_outputs" disabled><legend id="editor_output_legend">Fresh network outputs</legend><div class="output-options"><label><input id="editor_output_0" type="checkbox" value="0" checked disabled> Steering (0)</label><label><input id="editor_output_1" type="checkbox" value="1" checked disabled> Acceleration (1)</label><label><input id="editor_output_2" type="checkbox" value="2" checked disabled> Handbrake (2)</label><label><input id="editor_output_3" type="checkbox" value="3" checked disabled> Brake (3)</label><label><input id="editor_output_4" type="checkbox" value="4" checked disabled> Boost (4)</label></div><small id="editor_output_hint">Steering and Acceleration are required. Fresh output IDs preserve this order.</small></fieldset></div><div><label for="editor_seed">Initialization seed</label><input id="editor_seed" type="number" min="0" max="2147483647" value="42105" disabled><label><input id="editor_xavier" type="checkbox" checked disabled> Seeded Xavier uniform weights (browser algorithm)</label><label><input id="editor_bias" type="checkbox" disabled> Xavier uniform biases</label><small>Unchecked: zeros. Biases default to zero.</small></div></div><p id="editor_status" role="status">Choose a file or create a fresh network. Editor changes are browser-local until you explicitly start a run.</p><p id="editor_metadata" class="hint"></p><p id="editor_legality" class="hint"></p><details id="editor_history_panel"><summary>Training history · recorded generations</summary><div class="table-scroll"><table><thead><tr><th>Record</th><th>Time</th><th>Mutation</th><th>Best score</th><th>Best lap</th></tr></thead><tbody id="editor_history"></tbody></table></div><details><summary>Full saved training metadata</summary><pre id="editor_stats"></pre></details></details><canvas aria-label="Network architecture preview" id="network_map" width="1100" height="450"></canvas><details id="weight_values"><summary>Individual weight and bias values</summary><div class="table-scroll" style="max-height:420px;overflow:auto"><table><thead><tr><th>Connection / bias</th><th>Value</th></tr></thead><tbody id="editor_parameters"></tbody></table></div></details><details><summary>Weights, biases and input contract</summary><pre id="editor_contract"></pre><label for="editor_json">NeuralNetwork JSON · editable weights and biases</label><textarea id="editor_json" rows="16" style="width:100%;box-sizing:border-box;background:#0c1725;color:#e5edf5" disabled></textarea></details></div></section><script>/* Settings-only recipe contract. Storage is injected; no network or job data. */
+<section id="editor" class="pane" role="tabpanel" aria-labelledby="tab-editor" hidden><div class="card"><h2>Network editor</h2><p class="hint">An original editor inspired by <a href="https://the-mars-guy.github.io/AI-Learns-To-Drive-Tool/" target="_blank" rel="noopener">Mars’s network creator</a>. Create fresh networks with the selected vehicle’s game-legal controls, or use its largest original-game shape. Loaded networks keep their original vehicle, output order and sensor parameters. Unsupported files can still be inspected without changing the original.</p><div class="toolbar"><label for="editor_file">Load an existing .evolution file</label><input id="editor_file" type="file" accept=".evolution"><button id="editor_import" disabled>Inspect selected network</button><button id="editor_create" disabled>Create fresh network</button><button id="editor_apply" disabled>Use edited network</button><a id="editor_download" hidden download>Download .evolution</a></div><div class="row"><div><label for="editor_name">Network name</label><input id="editor_name" type="text" maxlength="80" value="Fresh network" disabled><label for="editor_vehicle">Vehicle type for fresh networks</label><select id="editor_vehicle" disabled><option value="0">Formula</option><option value="1">Rally</option><option value="2">Snowmobile</option><option value="3">Truck</option></select><small>This selector applies only when you create a fresh network. Imported vehicle type is retained and shown with the current network.</small><label for="editor_preset">Fresh network preset</label><select id="editor_preset" disabled><option id="editor_small_label" value="small">Small starter · 6 inputs, 4 hidden nodes, 5 outputs</option><option id="editor_maximum_label" value="maximum">Largest game network · 20 inputs, 10 × 16 hidden nodes, 5 outputs</option><option value="custom">Custom</option></select><label for="editor_shape">Input and hidden layer sizes</label><input id="editor_shape" type="text" value="6,4" disabled><small id="editor_shape_hint">Enter 1–20 inputs, followed by 0–10 hidden layers of 1–16 nodes. Output width follows the selected controls. Maximum shape: 20 → ten layers of 16 → 5 (2,869 parameters).</small><fieldset id="editor_outputs" disabled><legend id="editor_output_legend">Fresh network outputs</legend><div class="output-options"><label><input id="editor_output_0" type="checkbox" value="0" checked disabled> Steering (0)</label><label><input id="editor_output_1" type="checkbox" value="1" checked disabled> Acceleration (1)</label><label><input id="editor_output_2" type="checkbox" value="2" checked disabled> Handbrake (2)</label><label><input id="editor_output_3" type="checkbox" value="3" checked disabled> Brake (3)</label><label><input id="editor_output_4" type="checkbox" value="4" checked disabled> Boost (4)</label></div><small id="editor_output_hint">Steering and Acceleration are required. Fresh output IDs preserve this order.</small></fieldset></div><div><label for="editor_seed">Initialization seed</label><input id="editor_seed" type="number" min="0" max="2147483647" value="42105" disabled><label><input id="editor_xavier" type="checkbox" checked disabled> Seeded Xavier uniform weights (browser algorithm)</label><label><input id="editor_bias" type="checkbox" disabled> Xavier uniform biases</label><small>Unchecked: zeros. Biases default to zero.</small><label><input id="show_native_outline" type="checkbox" checked> Show 2D vehicle white outline &amp; raycast sensor cone</label></div></div><p id="editor_status" role="status">Choose a file or create a fresh network. Editor changes are browser-local until you explicitly start a run.</p><p id="editor_metadata" class="hint"></p><p id="editor_legality" class="hint"></p><details id="editor_history_panel"><summary>Training history · recorded generations</summary><div class="table-scroll"><table><thead><tr><th>Record</th><th>Time</th><th>Mutation</th><th>Best score</th><th>Best lap</th></tr></thead><tbody id="editor_history"></tbody></table></div><details><summary>Full saved training metadata</summary><pre id="editor_stats"></pre></details></details><div class="editor-visual-grid"><canvas aria-label="2D vehicle outline and raycast sensor fan preview" id="sensor_fan_map" width="420" height="450"></canvas><canvas aria-label="Network architecture preview" id="network_map" width="1100" height="450"></canvas></div><details id="weight_values"><summary>Individual weight and bias values</summary><div class="table-scroll" style="max-height:420px;overflow:auto"><table><thead><tr><th>Connection / bias</th><th>Value</th></tr></thead><tbody id="editor_parameters"></tbody></table></div></details><details><summary>Weights, biases and input contract</summary><pre id="editor_contract"></pre><label for="editor_json">NeuralNetwork JSON · editable weights and biases</label><textarea id="editor_json" rows="16" style="width:100%;box-sizing:border-box;background:#0c1725;color:#e5edf5" disabled></textarea></details></div></section><script>/* Settings-only recipe contract. Storage is injected; no network or job data. */
 (function(root){
   const KEY='tiga.ald.recipes.v1';
   const defaults={population:4,generations:1,ticks:60,mutation:0.01,seed:42,
@@ -815,6 +818,17 @@
     const target=connected&&!connected.hidden&&recipeTitle?recipeTitle:storage.querySelector('summary');
     target?.scrollIntoView({behavior:'smooth',block:'center'});target?.focus({preventScroll:true});
   });
+  const filterBtns=[...document.querySelectorAll('#trainingSubtabs [data-train-filter]')];
+  const trainDetails=['reward_settings','native_settings','run_settings','freeze_settings'];
+  filterBtns.forEach(btn=>btn.addEventListener('click',()=>{
+    const mode=btn.dataset.trainFilter;
+    filterBtns.forEach(b=>b.setAttribute('aria-pressed',String(b===btn)));
+    trainDetails.forEach(id=>{
+      const el=document.getElementById(id);if(!el)return;
+      if(mode==='all'){el.hidden=false;}
+      else{el.hidden=id!==mode;if(id===mode)el.open=true;}
+    });
+  }));
 })();
 </script><script>// Browser-only editor; upload is controlled by the separate training client.
 (() => {
@@ -838,11 +852,76 @@
   }
   function preset(value){if(value==='small'){q('editor_shape').value='6,4';refreshOutputRules(true);}else if(value==='maximum'){q('editor_shape').value=[20,...Array(10).fill(16)].join(',');refreshOutputRules(true);}}
   q('editor_preset').onchange=()=>preset(q('editor_preset').value);
-  q('editor_vehicle').onchange=()=>refreshOutputRules(q('editor_preset').value!=='custom');
-  q('editor_shape').oninput=()=>q('editor_preset').value='custom';
+  q('editor_vehicle').onchange=()=>{refreshOutputRules(q('editor_preset').value!=='custom');renderSensorFan(source);};
+  q('editor_shape').oninput=()=>{q('editor_preset').value='custom';renderSensorFan(source);};
+  if(q('show_native_outline'))q('show_native_outline').onchange=()=>renderSensorFan(source);
   for(const id of outputIds)q(outputName(id)).onchange=()=>{q('editor_preset').value='custom';refreshOutputRules(false);};
   refreshOutputRules(false);
   window.setEditorBusy=busy=>{q('editor_apply').disabled=busy||!source;};
+  function renderSensorFan(netValue){
+    const c=q('sensor_fan_map');if(!c||typeof c.getContext!=='function')return;
+    const ctx=c.getContext('2d');if(!ctx||typeof ctx.save!=='function')return;
+    const w=c.width,h=c.height;ctx.clearRect(0,0,w,h);
+    ctx.fillStyle='#09111b';ctx.fillRect(0,0,w,h);
+    const vType=Number.isInteger(netValue?.Type)?netValue.Type:freshType();
+    const showOutline=q('show_native_outline')?q('show_native_outline').checked:true;
+    const cx=w*0.5,cy=h*0.72;
+    let sensors=netValue?.Sensors;
+    if(!Array.isArray(sensors)){
+      const inCount=Math.max(1,Math.min(20,Number((q('editor_shape')?.value||'6').split(',')[0])||6));
+      const rays=Math.min(13,Math.max(1,inCount-1));
+      sensors=Array.from({length:rays},(_,i)=>({$type:'raycast',Degrees:rays===1?0:-90+180*i/(rays-1),Length:800}));
+    }
+    // Corridor walls + range rings
+    ctx.save();
+    ctx.strokeStyle='rgba(73,98,124,0.25)';ctx.lineWidth=1;
+    for(const r of [90,170,250]){ctx.beginPath();ctx.arc(cx,cy,r,Math.PI*1.05,Math.PI*1.95);ctx.stroke();}
+    ctx.strokeStyle='#cbd7d9';ctx.lineWidth=3;
+    ctx.beginPath();ctx.moveTo(cx-135,30);ctx.lineTo(cx-135,h-20);ctx.moveTo(cx+135,30);ctx.lineTo(cx+135,h-20);ctx.stroke();
+    // Raycast beams (facing upward -PI/2)
+    for(const s of sensors){
+      if(s?.$type!=='raycast')continue;
+      const rad=-Math.PI/2+(s.Degrees||0)*Math.PI/180;
+      const maxLen=Math.min(265,Math.max(50,(s.Length||800)*0.28));
+      const dx=Math.cos(rad),dy=Math.sin(rad);
+      let dist=maxLen;
+      if(Math.abs(dx)>1e-4){
+        const wallX=dx>0?cx+135:cx-135;
+        const t=(wallX-cx)/dx;
+        if(t>0&&t<dist)dist=t;
+      }
+      const hx=cx+dx*dist,hy=cy+dy*dist;
+      ctx.strokeStyle=dist<maxLen*0.95?'#ffd073':'#62dfb1';
+      ctx.globalAlpha=0.65;ctx.lineWidth=1.8;
+      ctx.beginPath();ctx.moveTo(cx,cy);ctx.lineTo(hx,hy);ctx.stroke();
+      ctx.globalAlpha=1;ctx.fillStyle=ctx.strokeStyle;
+      ctx.beginPath();ctx.arc(hx,hy,3.2,0,Math.PI*2);ctx.fill();
+    }
+    // 2D Vehicle Silhouette with white shader outline
+    ctx.translate(cx,cy);ctx.rotate(-Math.PI/2);ctx.scale(2.1,2.1);
+    ctx.fillStyle='#101820';ctx.strokeStyle=showOutline?'#ffffff':'#2a3d52';ctx.lineWidth=showOutline?1.2:0.7;
+    if(vType===2){
+      for(const wy of [-5.2,5.2]){ctx.beginPath();ctx.roundRect(4,-1.3+wy,9,2.6,1);ctx.fill();ctx.stroke();}
+    }else{
+      for(const [wx,wy] of [[-10.5,-6.2],[-10.5,6.2],[5.2,-6.2],[5.2,6.2]]){ctx.beginPath();ctx.roundRect(wx,wy-1.7,6.4,3.4,1);ctx.fill();ctx.stroke();}
+    }
+    ctx.fillStyle='#62dfb1';ctx.strokeStyle=showOutline?'#ffffff':'#0c1926';ctx.lineWidth=showOutline?2.2:1.1;
+    ctx.beginPath();
+    if(vType===0){
+      ctx.moveTo(-13.5,-6.2);ctx.lineTo(-9.5,-6.2);ctx.lineTo(-9.5,-3.6);ctx.lineTo(-6.5,-5.5);ctx.lineTo(3.5,-4.8);ctx.lineTo(8.5,-2.0);
+      ctx.lineTo(13.5,-5.8);ctx.lineTo(15.2,-5.8);ctx.lineTo(15.2,5.8);ctx.lineTo(13.5,5.8);ctx.lineTo(8.5,2.0);ctx.lineTo(3.5,4.8);
+      ctx.lineTo(-6.5,5.5);ctx.lineTo(-9.5,3.6);ctx.lineTo(-9.5,6.2);ctx.lineTo(-13.5,6.2);ctx.closePath();
+    }else if(vType===1){ctx.roundRect(-12.5,-6.3,25,12.6,3.4);}
+    else if(vType===2){ctx.moveTo(-11.5,-4.6);ctx.lineTo(5.5,-5.0);ctx.lineTo(13.5,0);ctx.lineTo(5.5,5.0);ctx.lineTo(-11.5,4.6);ctx.closePath();}
+    else{ctx.roundRect(-14,-7.0,28,14.0,2.4);}
+    ctx.fill();ctx.stroke();
+    ctx.fillStyle='#0c1725';ctx.beginPath();ctx.roundRect(-4.5,-3.6,8.5,7.2,2);ctx.fill();
+    ctx.restore();
+    if(typeof ctx.fillText==='function'){
+      ctx.fillStyle='#c6d9e9';ctx.font='700 12px system-ui,sans-serif';
+      ctx.fillText((api.vehicleNames[vType]||'Vehicle')+' · 2D Outline & Sensor Cone',14,22);
+    }
+  }
   function graph(n){
     const canvas=q('network_map'),ctx=canvas.getContext('2d');ctx.clearRect(0,0,canvas.width,canvas.height);
     const points=n.Shape.map((count,l)=>Array.from({length:count},(_,i)=>[45+l*(canvas.width-90)/(n.Shape.length-1),35+(i+.5)*(canvas.height-70)/count]));
@@ -851,6 +930,7 @@
       ctx.beginPath();ctx.moveTo(...points[l][i]);ctx.lineTo(...points[l+1][j]);ctx.stroke();
     })));
     ctx.globalAlpha=1;points.flat().forEach(([x,y])=>{ctx.fillStyle='#62dfb1';ctx.beginPath();ctx.arc(x,y,4,0,2*Math.PI);ctx.fill();});
+    renderSensorFan(source);
   }
   function show(value){
     const n=api.neural(value.NeuralNetwork);source=value;
@@ -881,6 +961,7 @@
     graph(n);window.setEditorBusy(window.TrainingClient?.isBusy?.()??false);
     q('editor_download').hidden=false;q('editor_download').href='#';q('editor_download').textContent='Validate and download edited .evolution';
   }
+  renderSensorFan(null);
   function updateParameter(next,input){
     if(!input.value.trim()||!Number.isFinite(Number(input.value)))throw Error('Parameter value must be a finite number');
     const label=input.dataset.parameter,parts=label.match(/\d+/g).map(Number);

track-map.js

@@ -1,10 +1,11 @@
-/* Browser-only preview of the selected saved track. No upload for preview. */
+/* Browser-only preview and zero-compute telemetry replay of the selected saved track. No upload for preview. */
 (function(root,factory){
   if(typeof module==='object'&&module.exports)module.exports=factory();
   else root.TrackMap=factory();
 })(typeof window==='undefined'?this:window,function(){
   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);
@@ -87,6 +88,139 @@
     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');
@@ -96,6 +230,18 @@
     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];
@@ -106,28 +252,885 @@
         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){
+    ctx.save();
+    ctx.translate(x,y);
+    ctx.rotate(heading+slipAngle);
+    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();
+    }
+
+    // Draw wheels / skis
+    ctx.fillStyle='#101820';
+    ctx.strokeStyle=showOutline?'#ffffff':'#2a3d52';
+    ctx.lineWidth=showOutline?1.2:0.7;
+    if(vehicleType===2){
+      // Snowmobile twin front skis + rear track
+      for(const wy of [-5.2,5.2]){
+        ctx.save();ctx.translate(8.5,wy);ctx.rotate(wheelSteer);
+        ctx.beginPath();ctx.roundRect(-4.5,-1.3,9,2.6,1);ctx.fill();ctx.stroke();
+        ctx.restore();
+      }
+      ctx.beginPath();ctx.roundRect(-12,-4.2,13,8.4,1.5);ctx.fill();
+    }else{
+      // Rear wheels
+      const rwY=vehicleType===3?6.8:6.2;
+      for(const wy of [-rwY,rwY]){
+        ctx.beginPath();ctx.roundRect(-10.5,wy-1.8,6.5,3.6,1);ctx.fill();ctx.stroke();
+      }
+      // Steerable front wheels
+      const fwY=vehicleType===0?6.4:6.0;
+      for(const wy of [-fwY,fwY]){
+        ctx.save();ctx.translate(8.2,wy);ctx.rotate(wheelSteer);
+        ctx.beginPath();ctx.roundRect(-3.1,-1.6,6.2,3.2,1);ctx.fill();ctx.stroke();
+        ctx.restore();
+      }
+    }
+
+    // Chassis silhouette by VehicleType
+    ctx.fillStyle=color;
+    ctx.strokeStyle=showOutline?'#ffffff':'#0c1926';
+    ctx.lineWidth=showOutline?2.1:1.1;
+    ctx.beginPath();
+    if(vehicleType===0){
+      // Formula open-wheel: rear wing, sidepods, tapered nose, front wing
+      ctx.moveTo(-13.5,-6.2);ctx.lineTo(-9.5,-6.2);ctx.lineTo(-9.5,-3.6);
+      ctx.lineTo(-6.5,-5.5);ctx.lineTo(3.5,-4.8);ctx.lineTo(8.5,-2.0);
+      ctx.lineTo(13.5,-5.8);ctx.lineTo(15.2,-5.8);ctx.lineTo(15.2,5.8);
+      ctx.lineTo(13.5,5.8);ctx.lineTo(8.5,2.0);ctx.lineTo(3.5,4.8);
+      ctx.lineTo(-6.5,5.5);ctx.lineTo(-9.5,3.6);ctx.lineTo(-9.5,6.2);
+      ctx.lineTo(-13.5,6.2);ctx.closePath();
+    }else if(vehicleType===1){
+      // Rally car: wide-body hatchback
+      ctx.roundRect(-12.5,-6.3,25,12.6,3.4);
+    }else if(vehicleType===2){
+      // Snowmobile: sleek sled cowling
+      ctx.moveTo(-11.5,-4.6);ctx.lineTo(5.5,-5.0);ctx.lineTo(13.5,0);
+      ctx.lineTo(5.5,5.0);ctx.lineTo(-11.5,4.6);ctx.closePath();
+    }else{
+      // Truck: heavy cab + cargo bed
+      ctx.roundRect(-14,-7.0,28,14.0,2.4);
+    }
+    ctx.fill();ctx.stroke();
+
+    // Cockpit / roof / bed details
+    ctx.fillStyle='#0c1725';
+    if(vehicleType===0){
+      ctx.beginPath();ctx.ellipse(-0.5,0,4.2,2.3,0,0,Math.PI*2);ctx.fill();
+      // Halo bar
+      ctx.strokeStyle='#d7e8f2';ctx.lineWidth=1.1;
+      ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(3.4,0);ctx.stroke();
+    }else if(vehicleType===1){
+      // Windshield + roof scoop + rear spoiler
+      ctx.beginPath();ctx.roundRect(-4.5,-4.6,10.5,9.2,2);ctx.fill();
+      ctx.fillStyle='#ffffff';ctx.beginPath();ctx.arc(0.5,0,1.4,0,Math.PI*2);ctx.fill();
+      ctx.fillStyle='#101d2c';ctx.fillRect(-12,-5.6,2.4,11.2);
+    }else if(vehicleType===2){
+      ctx.beginPath();ctx.roundRect(-4,-2.8,8,5.6,1.6);ctx.fill();
+    }else{
+      // Truck bed & cab windshield
+      ctx.fillRect(-12.2,-5.4,11,10.8);
+      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
+    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();
+    }
+    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 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 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;
+      }else{
+        render(canvas,currentTrack);
+        staticLayer=null;
+      }
+    }
+
+    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 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);
+
+      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();
+      }
+
+      // 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;
+          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();
+        }
+      }
+      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();
+          }
+        }
+        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(!window.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();});
+      }
+    }
+
     async function refresh(){
       const current=++version;
+      bindReplayControls();
       const info=picker.info();
       const source=info.source==='builtin'?info.display_name:document.getElementById('track')?.files?.[0]?.name;
-      if(!source){status.textContent='Select a built-in track or choose a custom .track file.';legend.textContent='';renderEmpty();return;}
+      if(!source){
+        currentTrack=null;staticLayer=null;stopLoop();
+        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=>{
@@ -136,21 +1139,60 @@
         const [file,atlas]=await Promise.all([picker.file(),atlasPromise]);
         const track=model(await decode(file),atlas);
         if(current!==version)return;
+        currentTrack=track;
+        currentSourceName=source;
         render(canvas,track);
+        rebuildStaticLayer();
+        rebuildProfiles();
+        drawFrame();
+        startLoop();
         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,index)=>{
+        legend.textContent=NAMES.filter((_,i)=>counts[i]).map(name=>{
           const i=NAMES.indexOf(name);return name+' '+counts[i];
-        }).join(' · ')+' · Orange line follows the track centerline; collision shapes and car positions are not shown.';
+        }).join(' · ')+' · Zero-compute telemetry visualizer: static circuit is cached once; ghost trajectories & sensor rays run locally in browser.';
       }catch(error){
         if(current!==version)return;
+        currentTrack=null;staticLayer=null;stopLoop();
         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();}
+      },
+      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();
-    return {refresh};
+    return controller;
   }
   return {mount,model,decode,render};
 });