fix: loop range playback via st.selectionStart/End + isLooping

app/static/js/app.jsx

@@ -5688,7 +5688,13 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, onClose, onUpdateNot
   }), /*#__PURE__*/React.createElement("span", { className: "text-zinc-500" }, "-"), /*#__PURE__*/React.createElement("input", {
     type: "number", value: aiBarEnd, onChange: e => setAiBarEnd(parseInt(e.target.value) || 1),
     className: "w-8 bg-zinc-900 border border-zinc-700 text-zinc-200 rounded px-1 py-0.5 text-xs text-center"
-  }), /*#__PURE__*/React.createElement("span", { className: "text-zinc-500" }, "bar")), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("span", { className: "text-zinc-500" }, "bar"), /*#__PURE__*/React.createElement("button", {
+    onClick: () => {
+      setIsLooping(!isLooping);
+      setSubTabs(prev => prev.map(s => s.id === st.id ? { ...s, isLooping: !(s.isLooping || false) } : s));
+    },
+    className: `px-2 py-0.5 rounded text-xs ${isLooping ? 'bg-emerald-700 text-white border border-emerald-500' : 'bg-zinc-800 text-zinc-400'}`
+  }, /*#__PURE__*/React.createElement("i", { "data-lucide": "repeat", className: "w-3 h-3" }))), /*#__PURE__*/React.createElement("div", {
     className: "flex bg-zinc-800 p-0.5 rounded border border-zinc-700 text-xs"
   }, ['velocity', 'pan'].map(mode => /*#__PURE__*/React.createElement("button", {
     key: mode,
@@ -5746,6 +5752,12 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, onClose, onUpdateNot
         setLoopStartBeat(sBeat);
         setLoopEndBeat(eBeat);
         setIsLooping(true);
+        setSubTabs(prev => prev.map(s => s.id === st.id ? {
+          ...s,
+          selectionStart: sBeat * beatSec,
+          selectionEnd: eBeat * beatSec,
+          isLooping: true
+        } : s));
       }
     },
     onMouseUp: () => { rulerDragRef.current = null; },
@@ -9267,17 +9279,17 @@ const App = () => {
       const bufferPos = startBufferOffsetRef.current + elapsed * speedFactor;
 
       // Loop sub-tab selection (bufferPos is buffer-time)
-      if (st.selectionStart !== null && st.selectionEnd !== null && st.selectionStart !== st.selectionEnd) {
+      if (st.selectionStart !== null && st.selectionEnd !== null && st.selectionStart !== st.selectionEnd && (st.isLooping || isLoopingSelection)) {
         const start = Math.min(st.selectionStart, st.selectionEnd);
         const end = Math.max(st.selectionStart, st.selectionEnd);
         if (bufferPos >= end) {
           stopAllPlayback();
           setSubTabs(prev => prev.map(s => s.id === activeTabRef.current ? {
             ...s,
-            currentTime: wallTime,
+            currentTime: start,
             isPlaying: true
           } : s));
-          startSubTabPlayback(st, wallTime);
+          startSubTabPlayback(st, start);
           animationFrameIdRef.current = requestAnimationFrame(updatePlayhead);
           return;
         }