reviw 0.11.3 → 0.13.0

package/README.md

@@ -90,6 +90,9 @@ reviw changes.diff
 ### Mermaid Fullscreen
 ![Mermaid Fullscreen](https://raw.githubusercontent.com/kazuph/reviw/main/assets/screenshot-mermaid.png)
 
+### Submit Review Dialog
+![Submit Review Dialog](https://raw.githubusercontent.com/kazuph/reviw/main/assets/screenshot-submit-dialog.png)
+
 ## Output Example
 
 ```yaml

package/cli.cjs

@@ -1254,6 +1254,7 @@ function diffHtmlTemplate(diffData) {
         <label><input type="checkbox" id="prompt-reviw" checked /> Open in REVIW next time.</label>
         <label><input type="checkbox" id="prompt-screenshots" checked /> Update all screenshots and videos.</label>
         <label><input type="checkbox" id="prompt-user-feedback-todo" checked /> Add the user's feedback to the Todo list, and do not check it off without the user's approval.</label>
+        <label><input type="checkbox" id="prompt-deep-dive" checked /> Before implementing, deeply probe the user's request. If using Claude Code, start with AskUserQuestion and EnterPlanMode; otherwise achieve the same depth through interactive questions and planning, even if the UI differs.</label>
       </div>
       <div class="modal-actions">
         <button id="modal-cancel">Cancel</button>
@@ -1628,7 +1629,8 @@ function diffHtmlTemplate(diffData) {
       { id: 'prompt-subagents', text: 'All implementation, verification, and report creation will be done by the sub-agents.' },
       { id: 'prompt-reviw', text: 'Open in REVIW next time.' },
       { id: 'prompt-screenshots', text: 'Update all screenshots and videos.' },
-      { id: 'prompt-user-feedback-todo', text: "Add the user's feedback to the Todo list, and do not check it off without the user's approval." }
+      { id: 'prompt-user-feedback-todo', text: "Add the user's feedback to the Todo list, and do not check it off without the user's approval." },
+      { id: 'prompt-deep-dive', text: "Before implementing, deeply probe the user's request. If using Claude Code, start with AskUserQuestion and EnterPlanMode; otherwise achieve the same depth through interactive questions and planning, even if the UI differs." }
     ];
     const PROMPT_STORAGE_KEY = 'reviw-prompt-prefs';
 
@@ -3143,6 +3145,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         <label><input type="checkbox" id="prompt-reviw" checked /> Open in REVIW next time.</label>
         <label><input type="checkbox" id="prompt-screenshots" checked /> Update all screenshots and videos.</label>
         <label><input type="checkbox" id="prompt-user-feedback-todo" checked /> Add the user's feedback to the Todo list, and do not check it off without the user's approval.</label>
+        <label><input type="checkbox" id="prompt-deep-dive" checked /> Before implementing, deeply probe the user's request. If using Claude Code, start with AskUserQuestion and EnterPlanMode; otherwise achieve the same depth through interactive questions and planning, even if the UI differs.</label>
       </div>
       <div class="modal-actions">
         <button id="modal-cancel">Cancel</button>
@@ -3563,7 +3566,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       }, 1500);
     }
 
-    function openCardForSelection() {
+    function openCardForSelection(previewElement) {
       if (!selection) return;
       // Don't open card while image/video modal is visible
       const imageOverlay = document.getElementById('image-fullscreen');
@@ -3601,10 +3604,50 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       commentInput.value = existingComment?.text || '';
 
       card.style.display = 'block';
+      // 常にソーステーブルの選択セル位置を基準にカードを配置
+      // これにより、プレビューからクリックしてもソースからクリックしても
+      // 同じ行に対しては同じ位置にダイアログが表示される
       positionCardForSelection(startRow, endRow, startCol, endCol);
       commentInput.focus();
     }
 
+    // Position card near a clicked preview element (used when clicking from preview pane)
+    // Note: Uses viewport-relative coordinates directly since .md-left/.md-right containers scroll,
+    // not the document. The card uses position:absolute but with no positioned ancestor,
+    // so it's positioned relative to the initial containing block.
+    function positionCardNearElement(element) {
+      const cardWidth = card.offsetWidth || 380;
+      const cardHeight = card.offsetHeight || 220;
+      const rect = element.getBoundingClientRect();
+      const margin = 12;
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+
+      // Use viewport-relative coordinates directly from getBoundingClientRect()
+      // No need to add window.scrollX/Y since the containers scroll, not the document
+      let left = rect.right + margin;
+      let top = rect.top;
+
+      // If card would go off the right edge, position it below the element
+      if (left + cardWidth > vw - margin) {
+        left = Math.max(rect.left, margin);
+        left = Math.min(left, vw - cardWidth - margin);
+        top = rect.bottom + margin;
+      }
+
+      // If card would go off the bottom, position it above the element
+      if (top + cardHeight > vh - margin) {
+        top = rect.top - cardHeight - margin;
+      }
+
+      // Ensure card stays within viewport
+      top = Math.max(margin, Math.min(top, vh - cardHeight - margin));
+      left = Math.max(margin, Math.min(left, vw - cardWidth - margin));
+
+      card.style.left = left + 'px';
+      card.style.top = top + 'px';
+    }
+
     function positionCardForSelection(startRow, endRow, startCol, endCol) {
       const cardWidth = card.offsetWidth || 380;
       const cardHeight = card.offsetHeight || 220;
@@ -3629,6 +3672,9 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       const sx = window.scrollX;
       const sy = window.scrollY;
 
+      // Check if the selection is within viewport
+      const isInViewport = rect.top >= 0 && rect.top < vh && rect.bottom > 0;
+
       const spaceRight = vw - rect.right - margin;
       const spaceLeft = rect.left - margin - ROW_HEADER_WIDTH; // Account for row header
       const spaceBelow = vh - rect.bottom - margin;
@@ -3640,28 +3686,38 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       let left = sx + rect.right + margin;
       let top = sy + rect.top;
 
-      // Priority: right > below > above > left > fallback right
-      if (spaceRight >= cardWidth) {
-        // Prefer right side of selection
-        left = sx + rect.right + margin;
-        top = sy + clamp(rect.top, margin, vh - cardHeight - margin);
-      } else if (spaceBelow >= cardHeight) {
-        left = sx + clamp(rect.left, minLeft, vw - cardWidth - margin);
-        top = sy + rect.bottom + margin;
-      } else if (spaceAbove >= cardHeight) {
-        left = sx + clamp(rect.left, minLeft, vw - cardWidth - margin);
-        top = sy + rect.top - cardHeight - margin;
-      } else if (spaceLeft >= cardWidth) {
-        left = sx + rect.left - cardWidth - margin;
-        top = sy + clamp(rect.top, margin, vh - cardHeight - margin);
+      // If selection is outside viewport, position card in center of viewport
+      if (!isInViewport) {
+        left = sx + Math.max(vw / 2 - cardWidth / 2, minLeft);
+        top = sy + Math.max(vh / 2 - cardHeight / 2, margin);
       } else {
-        // Fallback: place to right side even if it means going off screen
-        // Position card at right edge of selection, clamped to viewport
-        left = sx + Math.max(rect.right + margin, minLeft);
-        left = Math.min(left, sx + vw - cardWidth - margin);
-        top = sy + clamp(rect.top, margin, vh - cardHeight - margin);
+        // Priority: right > below > above > left > fallback right
+        if (spaceRight >= cardWidth) {
+          // Prefer right side of selection
+          left = sx + rect.right + margin;
+          top = sy + clamp(rect.top, margin, vh - cardHeight - margin);
+        } else if (spaceBelow >= cardHeight) {
+          left = sx + clamp(rect.left, minLeft, vw - cardWidth - margin);
+          top = sy + rect.bottom + margin;
+        } else if (spaceAbove >= cardHeight) {
+          left = sx + clamp(rect.left, minLeft, vw - cardWidth - margin);
+          top = sy + rect.top - cardHeight - margin;
+        } else if (spaceLeft >= cardWidth) {
+          left = sx + rect.left - cardWidth - margin;
+          top = sy + clamp(rect.top, margin, vh - cardHeight - margin);
+        } else {
+          // Fallback: place to right side even if it means going off screen
+          // Position card at right edge of selection, clamped to viewport
+          left = sx + Math.max(rect.right + margin, minLeft);
+          left = Math.min(left, sx + vw - cardWidth - margin);
+          top = sy + clamp(rect.top, margin, vh - cardHeight - margin);
+        }
       }
 
+      // Final clamp to ensure card stays within viewport
+      left = clamp(left, margin, sx + vw - cardWidth - margin);
+      top = clamp(top, sy + margin, sy + vh - cardHeight - margin);
+
       card.style.left = left + 'px';
       card.style.top = top + 'px';
     }
@@ -3670,6 +3726,8 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       card.style.display = 'none';
       currentKey = null;
       clearSelection();
+      // Re-enable scroll sync when card is closed
+      window._disableScrollSync = false;
     }
 
     function setDot(row, col, on) {
@@ -4081,7 +4139,8 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       { id: 'prompt-subagents', text: 'All implementation, verification, and report creation will be done by the sub-agents.' },
       { id: 'prompt-reviw', text: 'Open in REVIW next time.' },
       { id: 'prompt-screenshots', text: 'Update all screenshots and videos.' },
-      { id: 'prompt-user-feedback-todo', text: "Add the user's feedback to the Todo list, and do not check it off without the user's approval." }
+      { id: 'prompt-user-feedback-todo', text: "Add the user's feedback to the Todo list, and do not check it off without the user's approval." },
+      { id: 'prompt-deep-dive', text: "Before implementing, deeply probe the user's request. If using Claude Code, start with AskUserQuestion and EnterPlanMode; otherwise achieve the same depth through interactive questions and planning, even if the UI differs." }
     ];
     const PROMPT_STORAGE_KEY = 'reviw-prompt-prefs';
 
@@ -4273,20 +4332,56 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
     })();
 
     // --- Scroll Sync for Markdown Mode ---
+    // Global flag to temporarily disable scroll sync (used by selectSourceRange)
+    window._disableScrollSync = false;
+    // Global RAF ID so we can cancel pending scroll syncs from selectSourceRange
+    window._scrollSyncRafId = null;
+
     if (MODE === 'markdown') {
       const mdLeft = document.querySelector('.md-left');
       const mdRight = document.querySelector('.md-right');
       if (mdLeft && mdRight) {
         let activePane = null;
-        let rafId = null;
+
+        // Build anchor map for section-based sync
+        // Maps line numbers to heading elements in preview
+        const headingAnchors = [];
+        const preview = document.querySelector('.md-preview');
+        if (preview) {
+          const headings = preview.querySelectorAll('h1, h2, h3, h4, h5, h6');
+          headings.forEach(h => {
+            const text = h.textContent.trim();
+            // Find corresponding line in source
+            for (let i = 0; i < DATA.length; i++) {
+              const lineText = (DATA[i][0] || '').trim();
+              if (lineText.match(/^#+\\s/) && lineText.replace(/^#+\\s*/, '').trim() === text) {
+                headingAnchors.push({
+                  line: i + 1,
+                  sourceEl: mdLeft.querySelector('td[data-row="' + (i + 1) + '"]'),
+                  previewEl: h
+                });
+                break;
+              }
+            }
+          });
+        }
 
         function syncScroll(source, target, sourceName) {
+          // Skip if scroll sync is temporarily disabled
+          if (window._disableScrollSync) return;
+          // Skip if scroll sync is disabled until a certain time (for preview click scroll)
+          if (window._scrollSyncDisableUntil && Date.now() < window._scrollSyncDisableUntil) return;
+
           // Only sync if this pane initiated the scroll
           if (activePane && activePane !== sourceName) return;
           activePane = sourceName;
 
-          if (rafId) cancelAnimationFrame(rafId);
-          rafId = requestAnimationFrame(() => {
+          if (window._scrollSyncRafId) cancelAnimationFrame(window._scrollSyncRafId);
+          window._scrollSyncRafId = requestAnimationFrame(() => {
+            // Check again inside RAF in case _disableScrollSync was set after RAF was scheduled
+            if (window._disableScrollSync) return;
+            if (window._scrollSyncDisableUntil && Date.now() < window._scrollSyncDisableUntil) return;
+
             const sourceMax = source.scrollHeight - source.clientHeight;
             const targetMax = target.scrollHeight - target.clientHeight;
 
@@ -4295,20 +4390,81 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
             // Snap to edges for precision
             if (source.scrollTop <= 1) {
               target.scrollTop = 0;
-            } else if (source.scrollTop >= sourceMax - 1) {
+              setTimeout(() => { activePane = null; }, 100);
+              return;
+            }
+            if (source.scrollTop >= sourceMax - 1) {
               target.scrollTop = targetMax;
-            } else {
-              const ratio = source.scrollTop / sourceMax;
-              target.scrollTop = Math.round(ratio * targetMax);
+              setTimeout(() => { activePane = null; }, 100);
+              return;
+            }
+
+            // Try section-based sync if anchors exist
+            if (headingAnchors.length > 0) {
+              const sourceRect = source.getBoundingClientRect();
+              const viewportTop = sourceRect.top;
+              const viewportMid = viewportTop + sourceRect.height / 3;
+
+              // Find the heading closest to viewport top in source
+              let closestAnchor = null;
+              let closestDistance = Infinity;
+
+              for (const anchor of headingAnchors) {
+                const el = sourceName === 'left' ? anchor.sourceEl : anchor.previewEl;
+                if (!el) continue;
+                const rect = el.getBoundingClientRect();
+                const distance = Math.abs(rect.top - viewportMid);
+                if (distance < closestDistance) {
+                  closestDistance = distance;
+                  closestAnchor = anchor;
+                }
+              }
+
+              if (closestAnchor) {
+                const sourceEl = sourceName === 'left' ? closestAnchor.sourceEl : closestAnchor.previewEl;
+                const targetEl = sourceName === 'left' ? closestAnchor.previewEl : closestAnchor.sourceEl;
+
+                if (sourceEl && targetEl) {
+                  const sourceElRect = sourceEl.getBoundingClientRect();
+                  const sourceOffset = sourceElRect.top - sourceRect.top;
+
+                  // Calculate where target element should be
+                  const targetRect = target.getBoundingClientRect();
+                  const targetElRect = targetEl.getBoundingClientRect();
+                  const currentTargetOffset = targetElRect.top - targetRect.top;
+
+                  // Adjust target scroll to align the anchor
+                  const adjustment = currentTargetOffset - sourceOffset;
+                  target.scrollTop = target.scrollTop + adjustment;
+
+                  setTimeout(() => { activePane = null; }, 100);
+                  return;
+                }
+              }
             }
 
+            // Fallback to ratio-based sync
+            const ratio = source.scrollTop / sourceMax;
+            target.scrollTop = Math.round(ratio * targetMax);
+
             // Release lock after scroll settles
             setTimeout(() => { activePane = null; }, 100);
           });
         }
 
-        mdLeft.addEventListener('scroll', () => syncScroll(mdLeft, mdRight, 'left'), { passive: true });
-        mdRight.addEventListener('scroll', () => syncScroll(mdRight, mdLeft, 'right'), { passive: true });
+        // Store scroll handlers for temporary removal
+        const leftScrollHandler = () => syncScroll(mdLeft, mdRight, 'left');
+        const rightScrollHandler = () => syncScroll(mdRight, mdLeft, 'right');
+        mdLeft.addEventListener('scroll', leftScrollHandler, { passive: true });
+        mdRight.addEventListener('scroll', rightScrollHandler, { passive: true });
+
+        // Expose handlers for temporary removal during preview click
+        window._scrollHandlers = {
+          left: leftScrollHandler,
+          right: rightScrollHandler,
+          mdLeft: mdLeft,
+          mdRight: mdRight
+        };
       }
     }
 
@@ -4628,9 +4784,47 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       const imageClose = document.getElementById('image-close');
       if (!imageOverlay || !imageContainer) return;
 
+      // Collect all images for navigation
+      const allImages = Array.from(preview.querySelectorAll('img'));
+      let currentImageIndex = -1;
+
+      function showImage(index) {
+        if (index < 0 || index >= allImages.length) return;
+        currentImageIndex = index;
+        const img = allImages[index];
+
+        imageContainer.innerHTML = '';
+        const clonedImg = img.cloneNode(true);
+        // CSSで制御するためインラインスタイルはリセット
+        clonedImg.style.width = '';
+        clonedImg.style.height = '';
+        clonedImg.style.maxWidth = '';
+        clonedImg.style.maxHeight = '';
+        clonedImg.style.cursor = 'default';
+        imageContainer.appendChild(clonedImg);
+
+        // Show navigation hint
+        const counter = document.createElement('div');
+        counter.className = 'fullscreen-counter';
+        counter.textContent = \`\${index + 1} / \${allImages.length}\`;
+        counter.style.cssText = 'position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,0.6);padding:8px 16px;border-radius:20px;font-size:14px;';
+        imageContainer.appendChild(counter);
+
+        imageOverlay.classList.add('visible');
+      }
+
       function closeImageOverlay() {
         imageOverlay.classList.remove('visible');
         imageContainer.innerHTML = '';
+        currentImageIndex = -1;
+      }
+
+      function navigateImage(direction) {
+        if (!imageOverlay.classList.contains('visible')) return;
+        const newIndex = currentImageIndex + direction;
+        if (newIndex >= 0 && newIndex < allImages.length) {
+          showImage(newIndex);
+        }
       }
 
       if (imageClose) {
@@ -4645,30 +4839,33 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       }
 
       document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && imageOverlay.classList.contains('visible')) {
-          closeImageOverlay();
+        if (!imageOverlay.classList.contains('visible')) return;
+
+        switch (e.key) {
+          case 'Escape':
+            closeImageOverlay();
+            break;
+          case 'ArrowLeft':
+          case 'ArrowUp':
+            e.preventDefault();
+            navigateImage(-1);
+            break;
+          case 'ArrowRight':
+          case 'ArrowDown':
+            e.preventDefault();
+            navigateImage(1);
+            break;
         }
       });
 
-      preview.querySelectorAll('img').forEach(img => {
+      allImages.forEach((img, index) => {
         img.style.cursor = 'pointer';
-        img.title = 'Click to view fullscreen';
+        img.title = 'Click to view fullscreen (← → to navigate)';
 
         img.addEventListener('click', (e) => {
           // Don't stop propagation - allow select to work
           e.preventDefault();
-
-          imageContainer.innerHTML = '';
-          const clonedImg = img.cloneNode(true);
-          // CSSで制御するためインラインスタイルはリセット
-          clonedImg.style.width = '';
-          clonedImg.style.height = '';
-          clonedImg.style.maxWidth = '';
-          clonedImg.style.maxHeight = '';
-          clonedImg.style.cursor = 'default';
-          imageContainer.appendChild(clonedImg);
-
-          imageOverlay.classList.add('visible');
+          showImage(index);
         });
       });
     })();
@@ -4685,8 +4882,56 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
 
       const videoExtensions = /\\.(mp4|mov|webm|avi|mkv|m4v|ogv)$/i;
 
+      // Collect all video links for navigation
+      const allVideoLinks = Array.from(preview.querySelectorAll('a')).filter(link => {
+        const href = link.getAttribute('href');
+        return href && videoExtensions.test(href);
+      });
+      let currentVideoIndex = -1;
+
+      function showVideo(index) {
+        if (index < 0 || index >= allVideoLinks.length) return;
+        currentVideoIndex = index;
+        const link = allVideoLinks[index];
+        const href = link.getAttribute('href');
+
+        // Remove existing video if any
+        const existingVideo = videoContainer.querySelector('video');
+        if (existingVideo) {
+          existingVideo.pause();
+          existingVideo.src = '';
+          existingVideo.remove();
+        }
+
+        // Remove existing counter
+        const existingCounter = videoContainer.querySelector('.fullscreen-counter');
+        if (existingCounter) existingCounter.remove();
+
+        const video = document.createElement('video');
+        video.src = href;
+        video.controls = true;
+        video.autoplay = true;
+        video.style.maxWidth = '100%';
+        video.style.maxHeight = '100%';
+        // Prevent click on video from closing overlay
+        video.addEventListener('click', (e) => e.stopPropagation());
+        videoContainer.appendChild(video);
+
+        // Show navigation hint
+        if (allVideoLinks.length > 1) {
+          const counter = document.createElement('div');
+          counter.className = 'fullscreen-counter';
+          counter.textContent = \`\${index + 1} / \${allVideoLinks.length}\`;
+          counter.style.cssText = 'position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,0.6);padding:8px 16px;border-radius:20px;font-size:14px;';
+          videoContainer.appendChild(counter);
+        }
+
+        videoOverlay.classList.add('visible');
+      }
+
       function closeVideoOverlay() {
         videoOverlay.classList.remove('visible');
+        currentVideoIndex = -1;
         // Stop and remove video
         const video = videoContainer.querySelector('video');
         if (video) {
@@ -4696,6 +4941,14 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         }
       }
 
+      function navigateVideo(direction) {
+        if (!videoOverlay.classList.contains('visible')) return;
+        const newIndex = currentVideoIndex + direction;
+        if (newIndex >= 0 && newIndex < allVideoLinks.length) {
+          showVideo(newIndex);
+        }
+      }
+
       if (videoClose) {
         videoClose.addEventListener('click', closeVideoOverlay);
       }
@@ -4708,41 +4961,37 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       }
 
       document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && videoOverlay.classList.contains('visible')) {
-          closeVideoOverlay();
+        if (!videoOverlay.classList.contains('visible')) return;
+
+        switch (e.key) {
+          case 'Escape':
+            closeVideoOverlay();
+            break;
+          case 'ArrowLeft':
+          case 'ArrowUp':
+            e.preventDefault();
+            navigateVideo(-1);
+            break;
+          case 'ArrowRight':
+          case 'ArrowDown':
+            e.preventDefault();
+            navigateVideo(1);
+            break;
         }
       });
 
       // Intercept video link clicks
-      preview.querySelectorAll('a').forEach(link => {
-        const href = link.getAttribute('href');
-        if (href && videoExtensions.test(href)) {
-          link.style.cursor = 'pointer';
-          link.title = 'Click to play video fullscreen';
-
-          link.addEventListener('click', (e) => {
-            e.preventDefault();
-            // Don't stop propagation - allow select to work
-
-            // Remove existing video if any
-            const existingVideo = videoContainer.querySelector('video');
-            if (existingVideo) {
-              existingVideo.pause();
-              existingVideo.src = '';
-              existingVideo.remove();
-            }
+      allVideoLinks.forEach((link, index) => {
+        link.style.cursor = 'pointer';
+        link.title = allVideoLinks.length > 1
+          ? 'Click to play video fullscreen (← → to navigate)'
+          : 'Click to play video fullscreen';
 
-            const video = document.createElement('video');
-            video.src = href;
-            video.controls = true;
-            video.autoplay = true;
-            video.style.maxWidth = '100%';
-            video.style.maxHeight = '100%';
-            videoContainer.appendChild(video);
-
-            videoOverlay.classList.add('visible');
-          });
-        }
+        link.addEventListener('click', (e) => {
+          e.preventDefault();
+          // Don't stop propagation - allow select to work
+          showVideo(index);
+        });
       });
     })();
 
@@ -4926,22 +5175,59 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
       }
 
       // Trigger source cell selection (reuse existing comment flow)
-      function selectSourceRange(startRow, endRow) {
+      // When clickedPreviewElement is provided (from preview click), position card near that element
+      function selectSourceRange(startRow, endRow, clickedPreviewElement) {
+        // IMMEDIATELY disable scroll sync at the very start
+        window._disableScrollSync = true;
+        window._scrollSyncDisableUntil = Date.now() + 2000;
+
+        // Cancel any pending scroll sync RAF
+        if (window._scrollSyncRafId) {
+          cancelAnimationFrame(window._scrollSyncRafId);
+          window._scrollSyncRafId = null;
+        }
+
+        // TEMPORARILY REMOVE scroll event listeners to prevent any interference
+        const handlers = window._scrollHandlers;
+        if (handlers) {
+          handlers.mdLeft.removeEventListener('scroll', handlers.left);
+          handlers.mdRight.removeEventListener('scroll', handlers.right);
+        }
+
         selection = { startRow, endRow: endRow || startRow, startCol: 1, endCol: 1 };
         updateSelectionVisual();
 
         // Clear header selection
         document.querySelectorAll('thead th.selected').forEach(el => el.classList.remove('selected'));
 
-        // Scroll source table to show the selected row, then open card
-        const sourceTd = tbody.querySelector('td[data-row="' + startRow + '"][data-col="1"]');
-        if (sourceTd) {
-          sourceTd.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          // Wait for scroll to complete before positioning card
-          setTimeout(() => openCardForSelection(), 350);
-        } else {
-          openCardForSelection();
+        // Scroll source pane FIRST (before opening card) to ensure target is visible
+        const targetRow = startRow;
+        const mdRight = document.querySelector('.md-right');
+        const sourceTd = document.querySelector('td[data-row="' + targetRow + '"][data-col="1"]');
+        if (mdRight && sourceTd) {
+          const tdOffsetTop = sourceTd.offsetTop;
+          const containerHeight = mdRight.clientHeight;
+          const tdHeight = sourceTd.offsetHeight;
+          const scrollTarget = tdOffsetTop - (containerHeight / 2) + (tdHeight / 2);
+          // Use scrollTo with instant behavior to ensure immediate scroll
+          mdRight.scrollTo({
+            top: Math.max(0, scrollTarget),
+            behavior: 'instant'
+          });
         }
+
+        // Open the card (synchronously) - now target cell should be visible for positioning
+        openCardForSelection();
+
+        // Re-add scroll handlers after a delay to allow scroll to settle
+        setTimeout(() => {
+          if (handlers) {
+            handlers.mdLeft.addEventListener('scroll', handlers.left, { passive: true });
+            handlers.mdRight.addEventListener('scroll', handlers.right, { passive: true });
+          }
+          window._disableScrollSync = false;
+          window._scrollSyncDisableUntil = 0;
+        }, 500);
       }
 
       // Click on block elements
@@ -4950,7 +5236,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         if (e.target.tagName === 'IMG') {
           const line = findImageSourceLine(e.target.src);
           if (line > 0) {
-            selectSourceRange(line);
+            selectSourceRange(line, null, e.target);
           }
           return;
         }
@@ -4964,7 +5250,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
             const isTableCell = parentBlock.tagName === 'TD' || parentBlock.tagName === 'TH';
             const line = isTableCell ? findTableSourceLine(parentBlock.textContent) : findSourceLine(parentBlock.textContent);
             if (line > 0) {
-              selectSourceRange(line);
+              selectSourceRange(line, null, parentBlock);
             }
           }
           // Let the link open naturally (target="_blank" is set by marked)
@@ -4981,7 +5267,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
           const { startLine, endLine } = findCodeBlockRange(code.textContent);
           if (startLine > 0) {
             e.preventDefault();
-            selectSourceRange(startLine, endLine);
+            selectSourceRange(startLine, endLine, pre);
           }
           return;
         }
@@ -4995,7 +5281,7 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
         if (line <= 0) return;
 
         e.preventDefault();
-        selectSourceRange(line);
+        selectSourceRange(line, null, target);
       });
 
       // Text selection to open comment for range
@@ -5015,8 +5301,13 @@ function htmlTemplate(dataRows, cols, projectRoot, relativePath, mode, previewHt
 
           if (startLine <= 0) return;
 
+          // Get the element containing the selection for positioning
+          const range = sel.getRangeAt(0);
+          const container = range.commonAncestorContainer;
+          const element = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
+
           sel.removeAllRanges();
-          selectSourceRange(startLine, endLine > 0 ? endLine : startLine);
+          selectSourceRange(startLine, endLine > 0 ? endLine : startLine, element);
         }, 10);
       });
     })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reviw",
-  "version": "0.11.3",
+  "version": "0.13.0",
   "description": "Lightweight file reviewer with in-browser comments for CSV, TSV, Markdown, and Git diffs.",
   "type": "module",
   "bin": {
@@ -9,6 +9,10 @@
   "files": [
     "cli.cjs"
   ],
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
   "license": "MIT",
   "author": "kazuph",
   "publishConfig": {
@@ -27,9 +31,5 @@
     "@playwright/test": "^1.57.0",
     "playwright": "^1.57.0",
     "vitest": "^4.0.14"
-  },
-  "scripts": {
-    "test": "vitest run",
-    "test:watch": "vitest"
   }
-}
+}