@dfosco/storyboard-core 3.6.0 → 3.7.0

package/src/comments/ui/mount.js

@@ -4,7 +4,7 @@
  * Call mountComments() once at app startup (after initCommentsConfig).
  */
 
-import { isCommentsEnabled } from '../config.js'
+import { getCommentsConfig, isCommentsEnabled } from '../config.js'
 import { isAuthenticated, getCachedUser } from '../auth.js'
 import { toggleCommentMode, setCommentMode, isCommentModeActive, subscribeToCommentMode } from '../commentMode.js'
 import { fetchRouteCommentsSummary, fetchCommentDetail, moveComment, createComment } from '../api.js'
@@ -13,11 +13,20 @@ import { showComposer } from './composer.js'
 import { openAuthModal } from './authModal.js'
 import { showCommentWindow, closeCommentWindow } from './commentWindow.js'
 
+const INVALID_PAT_ERROR_MESSAGE = 'GitHub PAT is invalid or expired. Please sign in again.'
+const TOKEN_ACCESS_ERROR_MESSAGE =
+  `Token doesn't have access to repository discussions. ` +
+  'Fine-grained tokens need "Discussions: Read and write". ' +
+  'Classic tokens need the "repo" scope.'
+
 let banner = null
 let overlay = null
 let activeComposer = null
 let renderedPins = []
 let cachedDiscussion = null
+const CANVAS_SCROLL_SELECTOR = '[data-storyboard-canvas-scroll]'
+const CANVAS_ZOOM_SELECTOR = '[data-storyboard-canvas-zoom]'
+const CANVAS_SURFACE_SELECTOR = '.tc-canvas'
 
 function esc(str) {
   const d = document.createElement('div')
@@ -25,12 +34,97 @@ function esc(str) {
   return d.innerHTML
 }
 
+function roundPct(value) {
+  return Math.round(value * 10) / 10
+}
+
+function parseScale(transform) {
+  if (!transform || transform === 'none') return 1
+  const scaleMatch = transform.match(/scale\(([^)]+)\)/)
+  if (scaleMatch) {
+    const parsed = Number.parseFloat(scaleMatch[1])
+    if (Number.isFinite(parsed) && parsed > 0) return parsed
+  }
+  const matrixMatch = transform.match(/matrix\(([^)]+)\)/)
+  if (matrixMatch) {
+    const first = Number.parseFloat(matrixMatch[1].split(',')[0])
+    if (Number.isFinite(first) && first > 0) return first
+  }
+  return 1
+}
+
+function getCanvasContext() {
+  const scrollEl = document.querySelector(CANVAS_SCROLL_SELECTOR)
+  const zoomEl = document.querySelector(CANVAS_ZOOM_SELECTOR)
+  const canvasEl = (zoomEl && zoomEl.querySelector(CANVAS_SURFACE_SELECTOR)) || null
+  if (!scrollEl || !zoomEl || !canvasEl) return null
+  const scale = parseScale(zoomEl.style.transform || getComputedStyle(zoomEl).transform)
+  const width = canvasEl.offsetWidth || canvasEl.clientWidth
+  const height = canvasEl.offsetHeight || canvasEl.clientHeight
+  if (!width || !height) return null
+  return { scrollEl, scale, width, height }
+}
+
+function getAnchorPosition(xPct, yPct) {
+  const canvas = getCanvasContext()
+  if (!canvas) {
+    return {
+      left: `${xPct}%`,
+      top: `${yPct}%`,
+      canvas: false,
+    }
+  }
+
+  const rect = canvas.scrollEl.getBoundingClientRect()
+  const canvasX = (xPct / 100) * canvas.width
+  const canvasY = (yPct / 100) * canvas.height
+  const left = rect.left + (canvasX * canvas.scale) - canvas.scrollEl.scrollLeft
+  const top = rect.top + (canvasY * canvas.scale) - canvas.scrollEl.scrollTop
+
+  return {
+    left: `${left}px`,
+    top: `${top}px`,
+    canvas: true,
+  }
+}
+
+function getPercentFromPointer(clientX, clientY) {
+  const canvas = getCanvasContext()
+  if (canvas) {
+    const rect = canvas.scrollEl.getBoundingClientRect()
+    const canvasX = (clientX - rect.left + canvas.scrollEl.scrollLeft) / canvas.scale
+    const canvasY = (clientY - rect.top + canvas.scrollEl.scrollTop) / canvas.scale
+    const xPct = roundPct((canvasX / canvas.width) * 100)
+    const yPct = roundPct((canvasY / canvas.height) * 100)
+    return { xPct, yPct, canvas: true }
+  }
+
+  const xPct = roundPct((clientX / window.innerWidth) * 100)
+  const docHeight = document.documentElement.scrollHeight
+  const yPct = roundPct(((clientY + window.scrollY) / docHeight) * 100)
+  return { xPct, yPct, canvas: false }
+}
+
+function syncOverlayCoordinateSpace() {
+  if (!overlay) return
+  if (getCanvasContext()) {
+    overlay.style.position = 'fixed'
+    overlay.style.width = '100vw'
+    overlay.style.height = '100vh'
+  } else {
+    overlay.style.position = 'absolute'
+    overlay.style.width = ''
+    overlay.style.height = ''
+  }
+}
+
 function ensureOverlay() {
   if (overlay) return overlay
 
   overlay = document.createElement('div')
   overlay.className = 'sb-comment-overlay'
   document.body.appendChild(overlay)
+  syncOverlayCoordinateSpace()
 
   // Click handler for placing comments lives on the overlay itself
   overlay.addEventListener('click', (e) => {
@@ -38,6 +132,26 @@ function ensureOverlay() {
     if (e.target.closest('.sb-composer') || e.target.closest('.sb-comment-pin') || e.target.closest('.sb-comment-window')) return
     handleOverlayClick(e)
   })
+  // Keep canvas scroll usable while comment mode is active.
+  overlay.addEventListener('wheel', (e) => {
+    if (!isCommentModeActive()) return
+    const target = e.target
+    if (
+      target instanceof Element &&
+      (target.closest('.sb-composer') || target.closest('.sb-comment-pin') || target.closest('.sb-comment-window'))
+    ) {
+      return
+    }
+    const canvas = getCanvasContext()
+    if (!canvas) return
+    if (typeof canvas.scrollEl.scrollBy === 'function') {
+      canvas.scrollEl.scrollBy({ left: e.deltaX, top: e.deltaY, behavior: 'auto' })
+    } else {
+      canvas.scrollEl.scrollLeft += e.deltaX
+      canvas.scrollEl.scrollTop += e.deltaY
+    }
+    e.preventDefault()
+  }, { passive: false })
 
   return overlay
 }
@@ -64,6 +178,48 @@ function getCurrentRoute() {
   return window.location.pathname
 }
 
+function getAuthErrorMessage(err) {
+  const message = typeof err === 'string'
+    ? err
+    : (typeof err?.message === 'string' ? err.message : String(err ?? ''))
+
+  if (message.includes('invalid or expired')) {
+    return INVALID_PAT_ERROR_MESSAGE
+  }
+
+  if (message.includes('Not authenticated — no GitHub PAT found')) {
+    return 'Not authenticated — no GitHub PAT found. Please sign in.'
+  }
+
+  if (
+    message.includes('Resource not accessible by personal access token') ||
+    message.includes('insufficient') ||
+    message.includes("doesn't have access")
+  ) {
+    return TOKEN_ACCESS_ERROR_MESSAGE
+  }
+
+  if (message.includes('Could not resolve to a Repository with the name')) {
+    const config = getCommentsConfig()
+    const repo = config?.repo?.owner && config?.repo?.name
+      ? `${config.repo.owner}/${config.repo.name}`
+      : 'the configured repository'
+
+    return `Token cannot access repository \`${repo}\`. Please set the PAT repository access to \`${repo}\` and include Discussions read/write (classic tokens need repo scope).`
+  }
+
+  return null
+}
+
+async function promptReauthForAuthError(err) {
+  const errorMessage = getAuthErrorMessage(err)
+  if (!errorMessage) return false
+
+  setCommentMode(false)
+  openAuthModal({ initialError: errorMessage })
+  return true
+}
+
 function clearPins() {
   for (const pin of renderedPins) pin.remove()
   renderedPins = []
@@ -82,8 +238,9 @@ function renderOptimisticPin(ov, xPct, yPct, text, user) {
   const pendingId = `pending-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
   const pin = document.createElement('div')
   pin.className = 'sb-comment-pin sb-comment-pin-pending absolute br-100 sb-bg pointer sb-shadow pe-auto overflow-hidden'
-  pin.style.left = `${xPct}%`
-  pin.style.top = `${yPct}%`
+  const anchor = getAnchorPosition(xPct, yPct)
+  pin.style.left = anchor.left
+  pin.style.top = anchor.top
   pin.title = `${user?.login ?? 'you'}: ${text.slice(0, 80)}`
 
   pin.innerHTML = user?.avatarUrl
@@ -118,7 +275,8 @@ function renderOptimisticPin(ov, xPct, yPct, text, user) {
           removePendingComment(route, pendingId)
           pin.classList.remove('sb-comment-pin-pending')
           reloadComments()
-        } catch {
+        } catch (err) {
+          if (await promptReauthForAuthError(err)) return
           pin.classList.remove('sb-comment-pin-pending')
           pin.classList.add('sb-comment-pin-failed')
           pin.title = `⚠ Failed to post — click to retry: ${text.slice(0, 60)}`
@@ -137,8 +295,9 @@ function renderPendingPins(ov) {
   for (const p of pending) {
     const pin = document.createElement('div')
     pin.className = 'sb-comment-pin sb-comment-pin-failed absolute br-100 sb-bg pointer sb-shadow pe-auto overflow-hidden'
-    pin.style.left = `${p.x}%`
-    pin.style.top = `${p.y}%`
+    const anchor = getAnchorPosition(p.x, p.y)
+    pin.style.left = anchor.left
+    pin.style.top = anchor.top
     pin.title = `⚠ Failed to post — click to retry: ${p.text?.slice(0, 60) ?? ''}`
 
     pin.innerHTML = p.author?.avatarUrl
@@ -155,7 +314,8 @@ function renderPendingPins(ov) {
         removePendingComment(route, p.id)
         pin.remove()
         reloadComments()
-      } catch {
+      } catch (err) {
+        if (await promptReauthForAuthError(err)) return
         pin.classList.remove('sb-comment-pin-pending')
         pin.classList.add('sb-comment-pin-failed')
         pin.title = `⚠ Failed to post — click to retry: ${p.text?.slice(0, 60) ?? ''}`
@@ -171,8 +331,9 @@ function renderPin(ov, comment, index) {
   const hue = Math.round((index * 137.5) % 360)
   const pin = document.createElement('div')
   pin.className = 'sb-comment-pin absolute br-100 sb-bg pointer sb-shadow pe-auto overflow-hidden'
-  pin.style.left = `${comment.meta?.x ?? 0}%`
-  pin.style.top = `${comment.meta?.y ?? 0}%`
+  const startAnchor = getAnchorPosition(comment.meta?.x ?? 0, comment.meta?.y ?? 0)
+  pin.style.left = startAnchor.left
+  pin.style.top = startAnchor.top
   pin.style.setProperty('--pin-hue', String(hue))
 
   if (comment.meta?.resolved) pin.setAttribute('data-resolved', 'true')
@@ -192,19 +353,29 @@ function renderPin(ov, comment, index) {
     dragged = false
     const startX = e.clientX
     const startY = e.clientY
-    const startLeftPct = parseFloat(pin.style.left)
-    const startTopPct = parseFloat(pin.style.top)
+    const startCoords = getPercentFromPointer(e.clientX, e.clientY)
+    const startLeftPct = startCoords.xPct
+    const startTopPct = startCoords.yPct
+    let lastCoords = { xPct: startLeftPct, yPct: startTopPct }
 
     const onMove = (ev) => {
       const dx = ev.clientX - startX
       const dy = ev.clientY - startY
       if (!dragged && Math.abs(dx) < 4 && Math.abs(dy) < 4) return
       dragged = true
-      const xPct = Math.round((startLeftPct + (dx / window.innerWidth) * 100) * 10) / 10
-      const docHeight = document.documentElement.scrollHeight
-      const yPct = Math.round((startTopPct + (dy / docHeight) * 100) * 10) / 10
-      pin.style.left = `${xPct}%`
-      pin.style.top = `${yPct}%`
+
+      if (startCoords.canvas) {
+        lastCoords = getPercentFromPointer(ev.clientX, ev.clientY)
+        pin.style.left = `${ev.clientX}px`
+        pin.style.top = `${ev.clientY}px`
+      } else {
+        const xPct = roundPct(startLeftPct + (dx / window.innerWidth) * 100)
+        const docHeight = document.documentElement.scrollHeight
+        const yPct = roundPct(startTopPct + (dy / docHeight) * 100)
+        lastCoords = { xPct, yPct }
+        pin.style.left = `${xPct}%`
+        pin.style.top = `${yPct}%`
+      }
     }
 
     const onUp = async (ev) => {
@@ -212,11 +383,15 @@ function renderPin(ov, comment, index) {
       document.removeEventListener('mouseup', onUp)
       if (!dragged) return
 
-      const dx = ev.clientX - startX
-      const dy = ev.clientY - startY
-      const xPct = Math.round((startLeftPct + (dx / window.innerWidth) * 100) * 10) / 10
-      const docHeight = document.documentElement.scrollHeight
-      const yPct = Math.round((startTopPct + (dy / docHeight) * 100) * 10) / 10
+      let xPct = lastCoords.xPct
+      let yPct = lastCoords.yPct
+      if (!startCoords.canvas) {
+        const dx = ev.clientX - startX
+        const dy = ev.clientY - startY
+        xPct = roundPct(startLeftPct + (dx / window.innerWidth) * 100)
+        const docHeight = document.documentElement.scrollHeight
+        yPct = roundPct(startTopPct + (dy / docHeight) * 100)
+      }
       comment.meta = { ...comment.meta, x: xPct, y: yPct }
 
       try {
@@ -224,6 +399,7 @@ function renderPin(ov, comment, index) {
         comment._rawBody = null
         clearCachedComments(getCurrentRoute())
       } catch (err) {
+        if (await promptReauthForAuthError(err)) return
         console.error('[storyboard] Failed to move pin:', err)
       }
     }
@@ -246,6 +422,7 @@ function renderPin(ov, comment, index) {
       if (detail) {
         detail._rawBody = detail.body
         showCommentWindow(ov, detail, cachedDiscussion, {
+          getAnchorPosition,
           onClose: () => {},
           onMove: () => reloadComments(),
         })
@@ -254,6 +431,7 @@ function renderPin(ov, comment, index) {
       console.warn('[storyboard] Could not load comment detail:', err.message)
       // Fall back to summary data
       showCommentWindow(ov, comment, cachedDiscussion, {
+        getAnchorPosition,
         onClose: () => {},
         onMove: () => reloadComments(),
       })
@@ -312,6 +490,7 @@ async function loadAndRenderComments() {
 
     autoOpenCommentFromUrl(ov, discussion)
   } catch (err) {
+    if (await promptReauthForAuthError(err)) return
     console.warn('[storyboard] Could not load comments:', err.message)
   }
 }
@@ -324,13 +503,25 @@ async function autoOpenCommentFromUrl(ov, discussion) {
   if (!comment) return
 
   if (comment.meta?.y != null) {
-    const docHeight = document.documentElement.scrollHeight
-    const yPx = (comment.meta.y / 100) * docHeight
-    const viewTop = window.scrollY
-    const viewBottom = viewTop + window.innerHeight
-    if (yPx < viewTop || yPx > viewBottom) {
-      const scrollTarget = Math.max(0, yPx - window.innerHeight / 3)
-      window.scrollTo({ top: scrollTarget, behavior: 'smooth' })
+    const canvas = getCanvasContext()
+    if (canvas) {
+      const canvasY = (comment.meta.y / 100) * canvas.height
+      const yPx = canvasY * canvas.scale
+      const viewTop = canvas.scrollEl.scrollTop
+      const viewBottom = viewTop + canvas.scrollEl.clientHeight
+      if (yPx < viewTop || yPx > viewBottom) {
+        const scrollTarget = Math.max(0, yPx - canvas.scrollEl.clientHeight / 3)
+        canvas.scrollEl.scrollTo({ top: scrollTarget, behavior: 'smooth' })
+      }
+    } else {
+      const docHeight = document.documentElement.scrollHeight
+      const yPx = (comment.meta.y / 100) * docHeight
+      const viewTop = window.scrollY
+      const viewBottom = viewTop + window.innerHeight
+      if (yPx < viewTop || yPx > viewBottom) {
+        const scrollTarget = Math.max(0, yPx - window.innerHeight / 3)
+        window.scrollTo({ top: scrollTarget, behavior: 'smooth' })
+      }
     }
   }
 
@@ -340,18 +531,21 @@ async function autoOpenCommentFromUrl(ov, discussion) {
     if (detail) {
       detail._rawBody = detail.body
       showCommentWindow(ov, detail, discussion, {
+        getAnchorPosition,
         onClose: () => {},
         onMove: () => reloadComments(),
       })
       return
     }
   } catch (err) {
+    if (await promptReauthForAuthError(err)) return
     console.warn('[storyboard] Could not load comment detail:', err.message)
   }
 
   // Fallback to summary data
   comment._rawBody = comment.body
   showCommentWindow(ov, comment, discussion, {
+    getAnchorPosition,
     onClose: () => {},
     onMove: () => reloadComments(),
   })
@@ -363,10 +557,7 @@ function handleOverlayClick(e) {
 
   closeCommentWindow()
 
-  // x as percentage of viewport width, y as percentage of full document height
-  const xPct = Math.round((e.clientX / window.innerWidth) * 1000) / 10
-  const docHeight = document.documentElement.scrollHeight
-  const yPct = Math.round(((e.clientY + window.scrollY) / docHeight) * 1000) / 10
+  const { xPct, yPct } = getPercentFromPointer(e.clientX, e.clientY)
 
   // Move existing composer instead of destroying and recreating
   if (activeComposer) {
@@ -377,6 +568,7 @@ function handleOverlayClick(e) {
   const ov = ensureOverlay()
   const route = getCurrentRoute()
   activeComposer = showComposer(ov, xPct, yPct, route, {
+    getAnchorPosition,
     onCancel: () => { activeComposer = null },
     onSubmitOptimistic: (text, x, y) => {
       activeComposer = null
@@ -388,8 +580,9 @@ function handleOverlayClick(e) {
           opt.succeed()
           reloadComments()
         })
-        .catch((err) => {
+        .catch(async (err) => {
           console.error('[storyboard] Failed to post comment:', err)
+          if (await promptReauthForAuthError(err)) return
           opt.fail()
         })
     },
@@ -401,6 +594,7 @@ function setBodyCommentMode(active) {
     document.body.classList.add('sb-comment-mode')
     showBanner()
     ensureOverlay()
+    syncOverlayCoordinateSpace()
     renderCachedPins()
     loadAndRenderComments()
   } else {
@@ -431,6 +625,31 @@ export function mountComments() {
   _mounted = true
 
   subscribeToCommentMode(setBodyCommentMode)
+  window.addEventListener('popstate', () => {
+    if (isCommentModeActive()) {
+      setCommentMode(false)
+    }
+  })
+
+  document.addEventListener('storyboard:canvas:mounted', () => {
+    syncOverlayCoordinateSpace()
+    if (isCommentModeActive()) renderCachedPins()
+  })
+  document.addEventListener('storyboard:canvas:unmounted', () => {
+    syncOverlayCoordinateSpace()
+    if (isCommentModeActive()) renderCachedPins()
+  })
+  document.addEventListener('storyboard:canvas:zoom-changed', () => {
+    syncOverlayCoordinateSpace()
+    if (isCommentModeActive()) renderCachedPins()
+  })
+  document.addEventListener('scroll', (e) => {
+    const target = e.target
+    if (!(target instanceof Element)) return
+    if (!target.matches(CANVAS_SCROLL_SELECTOR)) return
+    if (!isCommentModeActive()) return
+    renderCachedPins()
+  }, true)
 
   window.addEventListener('keydown', (e) => {
     const tag = e.target.tagName

package/src/comments/ui/mount.test.js

@@ -48,6 +48,9 @@ describe('mount.js', () => {
   let initCommentsConfig
   let setToken
   let clearToken
+  let createComment
+  let openAuthModal
+  let showComposer
 
   beforeEach(async () => {
     // Reset DOM
@@ -85,6 +88,9 @@ describe('mount.js', () => {
     const commentModeMod = await import('../commentMode.js')
     const configMod = await import('../config.js')
     const authMod = await import('../auth.js')
+    const apiMod = await import('../api.js')
+    const authModalMod = await import('./authModal.js')
+    const composerMod = await import('./composer.js')
 
     mountComments = mountMod.mountComments
     setCommentMode = commentModeMod.setCommentMode
@@ -92,6 +98,9 @@ describe('mount.js', () => {
     initCommentsConfig = configMod.initCommentsConfig
     setToken = authMod.setToken
     clearToken = authMod.clearToken
+    createComment = apiMod.createComment
+    openAuthModal = authModalMod.openAuthModal
+    showComposer = composerMod.showComposer
 
     // Reset storyboard state
     setCommentMode(false)
@@ -195,4 +204,133 @@ describe('mount.js', () => {
       // No error thrown — _mounted guard prevents double init
     })
   })
+
+  describe('navigation and canvas coordinates', () => {
+    it('turns comment mode off on popstate navigation', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      setCommentMode(true)
+      expect(document.body.classList.contains('sb-comment-mode')).toBe(true)
+
+      window.dispatchEvent(new PopStateEvent('popstate'))
+      expect(document.body.classList.contains('sb-comment-mode')).toBe(false)
+    })
+
+    it('computes click coordinates relative to canvas absolute space', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      const scroll = document.createElement('div')
+      scroll.setAttribute('data-storyboard-canvas-scroll', '')
+      Object.defineProperty(scroll, 'scrollLeft', { value: 100, writable: true })
+      Object.defineProperty(scroll, 'scrollTop', { value: 50, writable: true })
+      Object.defineProperty(scroll, 'clientHeight', { value: 700, writable: true })
+      scroll.getBoundingClientRect = () => ({ left: 20, top: 10, right: 1020, bottom: 710, width: 1000, height: 700 })
+
+      const zoom = document.createElement('div')
+      zoom.setAttribute('data-storyboard-canvas-zoom', '')
+      zoom.style.transform = 'scale(2)'
+
+      const surface = document.createElement('main')
+      surface.className = 'tc-canvas'
+      Object.defineProperty(surface, 'offsetWidth', { value: 10000, writable: true })
+      Object.defineProperty(surface, 'offsetHeight', { value: 10000, writable: true })
+      zoom.appendChild(surface)
+      scroll.appendChild(zoom)
+      document.body.appendChild(scroll)
+
+      let captured = null
+      showComposer.mockImplementation((ov, x, y) => {
+        captured = { x, y }
+        return { destroy: vi.fn(), moveTo: vi.fn() }
+      })
+
+      setCommentMode(true)
+      const overlay = document.body.querySelector('.sb-comment-overlay')
+      overlay.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX: 220, clientY: 210 }))
+
+      expect(captured).toEqual({ x: 1.5, y: 1.3 })
+    })
+
+    it('scrolls canvas on wheel while comment mode is active', () => {
+      initCommentsConfig({ comments: { repo: { owner: 'o', name: 'r' } } })
+      setToken('ghp_test')
+      mountComments()
+
+      const scroll = document.createElement('div')
+      scroll.setAttribute('data-storyboard-canvas-scroll', '')
+      Object.defineProperty(scroll, 'scrollLeft', { value: 0, writable: true })
+      Object.defineProperty(scroll, 'scrollTop', { value: 0, writable: true })
+      scroll.scrollBy = vi.fn(({ left = 0, top = 0 }) => {
+        scroll.scrollLeft += left
+        scroll.scrollTop += top
+      })
+      scroll.getBoundingClientRect = () => ({ left: 0, top: 0, right: 1000, bottom: 700, width: 1000, height: 700 })
+
+      const zoom = document.createElement('div')
+      zoom.setAttribute('data-storyboard-canvas-zoom', '')
+      zoom.style.transform = 'scale(1)'
+
+      const surface = document.createElement('main')
+      surface.className = 'tc-canvas'
+      Object.defineProperty(surface, 'offsetWidth', { value: 10000, writable: true })
+      Object.defineProperty(surface, 'offsetHeight', { value: 10000, writable: true })
+      zoom.appendChild(surface)
+      scroll.appendChild(zoom)
+      document.body.appendChild(scroll)
+
+      setCommentMode(true)
+      const overlay = document.body.querySelector('.sb-comment-overlay')
+      const wheelEvent = new WheelEvent('wheel', { bubbles: true, cancelable: true, deltaX: 8, deltaY: 24 })
+      overlay.dispatchEvent(wheelEvent)
+
+      expect(scroll.scrollBy).toHaveBeenCalledTimes(1)
+      expect(scroll.scrollLeft).toBe(8)
+      expect(scroll.scrollTop).toBe(24)
+      expect(wheelEvent.defaultPrevented).toBe(true)
+    })
+  })
+
+  describe('auth error handling', () => {
+    it('opens auth modal with repo-specific message when PAT lacks repository access during submit', async () => {
+      initCommentsConfig({
+        comments: { discussions: { category: 'Comments' } },
+        repository: { owner: 'correct', name: 'repository' },
+      })
+      setToken('ghp_test')
+
+      createComment.mockRejectedValueOnce(
+        new Error("GraphQL error: Could not resolve to a Repository with the name 'github/storyboard'.")
+      )
+
+      showComposer.mockImplementation((ov, x, y, route, opts) => {
+        queueMicrotask(() => {
+          opts.onSubmitOptimistic('Hello', x, y)
+        })
+        return {
+          destroy: vi.fn(),
+          moveTo: vi.fn(),
+        }
+      })
+
+      mountComments()
+      setCommentMode(true)
+
+      const overlay = document.body.querySelector('.sb-comment-overlay')
+      overlay.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX: 10, clientY: 10 }))
+
+      await Promise.resolve()
+      await Promise.resolve()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      expect(openAuthModal).toHaveBeenCalledTimes(1)
+      const call = openAuthModal.mock.calls[0]?.[0]
+      expect(call?.initialError).toContain('`correct/repository`')
+      expect(call?.initialError).toContain('PAT repository access')
+      expect(document.body.classList.contains('sb-comment-mode')).toBe(false)
+    })
+  })
 })