fix: add bar markers to TimelineRuler aligned with TempoTrackLane

- TimelineRuler draws bar lines at bn * barDuration positions
- Same integer beat loop as TempoTrackLane (bn from firstBarNum)
- Bar number labels at center of ruler
- Time markers still shown below bar markers
- All use same bpm prop → always aligned with tempo track

app/static/js/app.jsx

@@ -1243,6 +1243,27 @@ const TimelineRuler = ({
     const tStart = scrollLeftVal / zoom - PADDING_LEFT;
     const tEnd = (scrollLeftVal + drawWidth) / zoom + CLIP_BUFFER / zoom;
 
+    // Draw bar markers (aligned with TempoTrackLane)
+    const beatDuration = 60 / bpm;
+    const barDuration = beatDuration * 4;
+    const firstBarNum = Math.floor(tStart / barDuration);
+    const lastBarNum = Math.ceil(tEnd / barDuration);
+    for (let bn = firstBarNum; bn <= lastBarNum; bn++) {
+      const t = bn * barDuration;
+      const localX = (t - tStart) * zoom;
+      if (localX < -CLIP_BUFFER || localX > drawWidth + CLIP_BUFFER) continue;
+      ctx.strokeStyle = 'rgba(255, 255, 255, 0.25)';
+      ctx.lineWidth = 1.2;
+      ctx.beginPath();
+      ctx.moveTo(localX, 0);
+      ctx.lineTo(localX, height);
+      ctx.stroke();
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+      ctx.font = 'bold 10px Inter, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(`${bn}`, localX, 32);
+    }
+
     // Draw time duration labels with drag-selection markers
     const minTimePx = 60;
     const rawSecInt = Math.max(1, Math.ceil(minTimePx / zoom));