fix: anchor reapply loop cancels on user interaction

Addresses Qodo review: the 10s reapply loop could fight the user when
they tried to scroll or click away from the anchored line. Listen for
wheel/touchmove/keydown/mousedown on both ace_outer and ace_inner
documents in capture phase and tear down the interval on first signal.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: JohnMcLear

src/static/js/pad_editor.ts

@@ -255,8 +255,8 @@ const focusOnHashedLine = (ace, lineNumberInt) => {
 exports.focusOnLine = (ace) => {
   const lineNumberInt = getHashedLineNumber();
   if (lineNumberInt == null) return;
+  const $aceOuter = $('iframe[name="ace_outer"]');
   const getCurrentTargetOffset = () => {
-    const $aceOuter = $('iframe[name="ace_outer"]');
     const $inner = $aceOuter.contents().find('iframe').contents().find('#innerdocbody');
     const line = $inner.find(`div:nth-child(${lineNumberInt})`);
     if (line.length === 0) return null;
@@ -266,20 +266,44 @@ exports.focusOnLine = (ace) => {
   const maxSettleDuration = 10000;
   const settleInterval = 250;
   const startTime = Date.now();
-  let intervalId = null;
+  let intervalId: number | null = null;
+
+  const userEventNames = ['wheel', 'touchmove', 'keydown', 'mousedown'];
+  const docs: Document[] = [];
+  const stop = () => {
+    if (intervalId != null) {
+      window.clearInterval(intervalId);
+      intervalId = null;
+    }
+    for (const doc of docs) {
+      for (const name of userEventNames) doc.removeEventListener(name, stop, true);
+    }
+    docs.length = 0;
+  };
 
   const focusUntilStable = () => {
     if (Date.now() - startTime >= maxSettleDuration) {
-      window.clearInterval(intervalId);
+      stop();
       return;
     }
     const currentOffsetTop = getCurrentTargetOffset();
     if (currentOffsetTop == null) return;
-
     focusOnHashedLine(ace, lineNumberInt);
   };
 
   focusUntilStable();
   intervalId = window.setInterval(focusUntilStable, settleInterval);
+  // Stop fighting the user: any deliberate scroll, tap, click, or keystroke cancels the
+  // reapply loop so late layout corrections do not steal focus once the user takes over.
+  // Listen on both the ace_outer and ace_inner documents in capture phase so we see the
+  // user's intent even if inner handlers stopPropagation().
+  const outerDoc = ($aceOuter.contents()[0] as any) as Document | undefined;
+  const innerIframe = $aceOuter.contents().find('iframe')[0] as HTMLIFrameElement | undefined;
+  const innerDoc = innerIframe?.contentDocument;
+  for (const doc of [outerDoc, innerDoc]) {
+    if (!doc) continue;
+    docs.push(doc);
+    for (const name of userEventNames) doc.addEventListener(name, stop, true);
+  }
   // End of setSelection / set Y position of editor
 };

src/tests/frontend-new/specs/anchor_scroll.spec.ts

@@ -47,4 +47,38 @@ test.describe('anchor scrolling', () => {
       return Math.abs(currentViewportTop - initialViewportTop);
     }).toBeLessThanOrEqual(80);
   });
+
+  test('user scroll cancels the reapply loop so navigation is not locked', async ({page}) => {
+    await goToNewPad(page);
+    const padUrl = page.url();
+    await clearPadContent(page);
+    await writeToPad(page, Array.from({length: 30}, (_v, i) => `Line ${i + 1}`).join('\n'));
+    await page.waitForTimeout(1000);
+
+    await page.goto('about:blank');
+    await page.goto(`${padUrl}#L20`);
+    await page.waitForSelector('iframe[name="ace_outer"]');
+    await page.waitForSelector('#editorcontainer.initialized');
+
+    const outerDoc = page.frameLocator('iframe[name="ace_outer"]').locator('#outerdocbody');
+    const getScrollTop = async () => await outerDoc.evaluate(
+        (el) => el.parentElement?.scrollTop || 0);
+
+    await expect.poll(getScrollTop).toBeGreaterThan(10);
+
+    // User interacts with the pad. The anchor-scroll handler listens for
+    // wheel/mousedown/keydown/touchmove on the outer iframe document and must cancel
+    // its reapply loop. We dispatch a mousedown on the outer document, then reset
+    // scrollTop to 0 and verify it stays there.
+    await outerDoc.evaluate((el) => {
+      const doc = el.ownerDocument;
+      doc.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
+      if (el.parentElement) el.parentElement.scrollTop = 0;
+    });
+
+    // Give the reapply loop several ticks to attempt a re-scroll. If cancellation worked,
+    // scrollTop stays near 0 instead of snapping back to the anchor.
+    await page.waitForTimeout(1500);
+    expect(await getScrollTop()).toBeLessThanOrEqual(20);
+  });
 });