Render native track curves and recorded poses only

track-map.js

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