Smooth WASM tool playback and preserve XYZAC DRO axes

web/react/src/XyzacToolPreview.tsx

@@ -98,6 +98,11 @@ export function XyzacToolPreview({ visual, view = "p", zoom = 1, rotateMode = fa
     let renderedJoints: number[] = [];
     let renderedActiveSegment = 0;
     let renderedProgress = 0;
+    let paintedTick = -1;
+    let paintedPose: Point = renderedPose;
+    let paintedJoints: number[] = renderedJoints;
+    let paintedActiveSegment = 0;
+    let paintedProgress = 0;
     let liveHistoryLine: THREE.Line | null = null;
     let activeLiveLine: THREE.Line | null = null;
     let lastHistoryTick = -1;
@@ -170,13 +175,26 @@ export function XyzacToolPreview({ visual, view = "p", zoom = 1, rotateMode = fa
           playbackQueue.splice(0, index);
           playbackStart += index * 10;
         }
-      } else if (!staleState) {
+      } else if (!staleState && state.tick >= renderedTick) {
         renderedTick = state.tick;
         renderedPose = state.livePose;
         renderedJoints = state.joints;
         renderedActiveSegment = state.activeSegmentId ?? 0;
         renderedProgress = state.activeProgress;
       }
+      if (renderedTick < paintedTick) {
+        renderedTick = paintedTick;
+        renderedPose = paintedPose;
+        renderedJoints = paintedJoints;
+        renderedActiveSegment = paintedActiveSegment;
+        renderedProgress = paintedProgress;
+      } else {
+        paintedTick = renderedTick;
+        paintedPose = renderedPose;
+        paintedJoints = renderedJoints;
+        paintedActiveSegment = renderedActiveSegment;
+        paintedProgress = renderedProgress;
+      }
       // The planned path is immutable for a loaded program. Rebuilding all
       // geometries on every animation frame starves worker snapshots and
       // makes an otherwise continuous WASM trajectory appear to stutter.
@@ -238,6 +256,7 @@ export function XyzacToolPreview({ visual, view = "p", zoom = 1, rotateMode = fa
         liveTick = renderedTick;
       }
       element.dataset.xyzacLiveTraceCount = String(liveTrace.length);
+      element.dataset.xyzacRenderedTick = String(renderedTick);
       const historyDue = liveTrace.length > 1 && (lastHistoryTick < 0 || renderedTick - lastHistoryTick >= 4);
       if (historyDue) {
         if (liveHistoryLine) { liveHistoryLine.geometry.dispose(); liveGroup.remove(liveHistoryLine); }