collavre 0.24.0 → 0.24.1

data/app/javascript/controllers/comments/__tests__/topics_controller_creation_container.test.js

@@ -0,0 +1,154 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+// The add-topic button used to be rendered as the last child of the horizontally
+// scrolling topic strip, so it drifted off-screen once enough topics existed.
+// It now lives outside the strip, left of the topic-list button, and renderTopics
+// only toggles it. These tests pin that it stays out of the strip, that the
+// permission gate still applies, and that a re-render no longer wipes a name
+// being typed.
+jest.unstable_mockModule('../../../lib/utils/dialog', () => ({
+  confirmDialog: jest.fn(),
+  alertDialog: jest.fn(),
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const TopicsController = (await import('../topics_controller')).default
+
+const TOPICS = Array.from({ length: 12 }, (_, i) => ({ id: i + 1, name: `topic-${i + 1}` }))
+
+describe('TopicsController create-button placement', () => {
+  let application
+  let container
+  let controller
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div id="topics" data-controller="comments--topics">
+        <div class="comment-topics-bar">
+          <div data-comments--topics-target="list" class="comment-topics-list"
+               data-new-topic-placeholder="New Topic"></div>
+          <span class="topic-creation-container"
+                data-comments--topics-target="creationContainer" hidden></span>
+          <button type="button" class="topic-list-btn"></button>
+        </div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--topics', TopicsController)
+
+    return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+      const element = document.getElementById('topics')
+      controller = application.getControllerForElementAndIdentifier(element, 'comments--topics')
+      controller.creativeIdValue = '42'
+      controller.loadTopics = jest.fn()
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    application.stop()
+    jest.clearAllMocks()
+  })
+
+  test('renders the create button outside the scrolling strip, left of the topic-list button', () => {
+    controller.renderTopics(TOPICS, true, true)
+
+    expect(controller.listTarget.querySelector('.add-topic-btn')).toBeNull()
+
+    const button = document.querySelector('.add-topic-btn')
+    expect(button).not.toBeNull()
+
+    const creation = button.closest('.topic-creation-container')
+    expect(creation.hidden).toBe(false)
+    expect(creation.previousElementSibling).toBe(controller.listTarget)
+    expect(creation.nextElementSibling.classList.contains('topic-list-btn')).toBe(true)
+  })
+
+  test('hides and empties the container when the user cannot create topics', () => {
+    controller.renderTopics(TOPICS, true, true)
+    controller.renderTopics(TOPICS, false, false)
+
+    const creation = controller.creationContainerTarget
+    expect(creation.hidden).toBe(true)
+    expect(creation.innerHTML).toBe('')
+    expect(document.querySelector('.add-topic-btn')).toBeNull()
+  })
+
+  test('re-shows the button when permission is regained', () => {
+    controller.renderTopics(TOPICS, false, false)
+    controller.renderTopics(TOPICS, true, true)
+
+    expect(controller.creationContainerTarget.hidden).toBe(false)
+    expect(document.querySelector('.add-topic-btn')).not.toBeNull()
+  })
+
+  // A topic broadcast used to re-render the whole strip and destroy the open input.
+  test('preserves an in-progress topic name across a re-render', () => {
+    controller.renderTopics(TOPICS, true, true)
+    controller.showInput({ preventDefault() {} })
+
+    const input = controller.creationContainerTarget.querySelector('.topic-input')
+    input.value = 'half-typed'
+
+    controller.renderTopics([...TOPICS, { id: 99, name: 'from-broadcast' }], true, true)
+
+    expect(controller.creationContainerTarget.querySelector('.topic-input')).toBe(input)
+    expect(input.value).toBe('half-typed')
+  })
+
+  // createTopic keeps `creating` set across its loadTopics() await, so the
+  // re-render it triggers must not mistake the submitted input for live typing.
+  test('restores the add button after a successful creation', async () => {
+    controller.renderTopics(TOPICS, true, true)
+    controller.showInput({ preventDefault() {} })
+
+    const input = controller.creationContainerTarget.querySelector('.topic-input')
+    input.value = 'shipped'
+
+    document.head.innerHTML = '<meta name="csrf-token" content="tok">'
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ id: 99, name: 'shipped' }),
+    })
+    controller.flushSaveLastTopic = jest.fn()
+    controller.loadTopics = jest.fn(async () => {
+      controller.renderTopics([...TOPICS, { id: 99, name: 'shipped' }], true, true)
+    })
+
+    await controller.createTopic('shipped')
+
+    expect(controller.creationContainerTarget.querySelector('.topic-input')).toBeNull()
+    expect(document.querySelector('.add-topic-btn')).not.toBeNull()
+  })
+
+  // Alt+Left/Right chat navigation switches creatives without blurring the input,
+  // so a preserved draft would otherwise be posted to the wrong creative.
+  test('drops an in-progress topic name when the creative changes', () => {
+    controller.renderTopics(TOPICS, true, true)
+    controller.showInput({ preventDefault() {} })
+    controller.creationContainerTarget.querySelector('.topic-input').value = 'for-42'
+
+    controller.creativeIdValue = '77'
+    controller.renderTopics(TOPICS, true, true)
+
+    expect(controller.creationContainerTarget.querySelector('.topic-input')).toBeNull()
+    expect(document.querySelector('.add-topic-btn')).not.toBeNull()
+  })
+
+  // The container is static markup, but rendering must not throw if a caller
+  // mounts the controller on a stripped-down strip.
+  test('no-ops when the container is absent', () => {
+    controller.creationContainerTarget.remove()
+
+    expect(() => controller.renderTopics(TOPICS, true, true)).not.toThrow()
+    expect(() => controller.showInput({ preventDefault() {} })).not.toThrow()
+    expect(controller.listTarget.querySelector('.topic-tag[data-id="12"]')).not.toBeNull()
+  })
+})

data/app/javascript/controllers/comments/__tests__/topics_controller_primary_agent.test.js

@@ -0,0 +1,146 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+// setTopicPrimaryAgent used to drop the PATCH response on the floor and wait for
+// the WebSocket broadcast to render the avatar, and it swallowed failures into
+// console.error. These tests pin both: the avatar renders from the response with
+// no broadcast at all, and failures reach the user.
+jest.unstable_mockModule('../../../lib/utils/dialog', () => ({
+  confirmDialog: jest.fn(),
+  alertDialog: jest.fn(),
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const TopicsController = (await import('../topics_controller')).default
+const { alertDialog } = await import('../../../lib/utils/dialog')
+
+const AGENT = {
+  id: 4,
+  name: 'GitHub PR Analyzer',
+  avatar_url: '/avatar.png',
+  default_avatar: false,
+  initial: 'G',
+}
+
+describe('TopicsController#setTopicPrimaryAgent', () => {
+  let application
+  let container
+  let controller
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div id="topics" data-controller="comments--topics"
+           data-topic-set-agent-error="에이전트를 지정할 수 없습니다.">
+        <div data-comments--topics-target="list"></div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--topics', TopicsController)
+
+    const meta = document.createElement('meta')
+    meta.name = 'csrf-token'
+    meta.content = 'test-csrf'
+    document.head.appendChild(meta)
+
+    return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+      const element = document.getElementById('topics')
+      controller = application.getControllerForElementAndIdentifier(element, 'comments--topics')
+      controller.creativeIdValue = '42'
+      controller.loadTopics = jest.fn()
+      controller.topics = [{ id: 1, name: 'Main' }]
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    document.head.innerHTML = ''
+    application.stop()
+    jest.clearAllMocks()
+  })
+
+  test('renders the agent avatar from the PATCH response without any broadcast', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ success: true, topic: { id: 1, name: 'Main', primary_agent: AGENT } }),
+    })
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    const avatar = controller.listTarget.querySelector('.topic-agent-avatar')
+    expect(avatar).not.toBeNull()
+    expect(avatar.getAttribute('src')).toBe('/avatar.png')
+  })
+
+  test('surfaces the server error when the agent is rejected (422)', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      json: async () => ({ error: 'Selected user is not an AI agent' }),
+    })
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).toHaveBeenCalledWith('Selected user is not an AI agent')
+    expect(controller.listTarget.querySelector('.topic-agent-avatar')).toBeNull()
+  })
+
+  // The fallback path has no server-supplied (already localized) error to show,
+  // so it must use the localized string handed down by the ERB partial rather
+  // than an English literal.
+  test('surfaces the localized fallback when the response body is not JSON', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      json: async () => { throw new SyntaxError('Unexpected token <') },
+    })
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).toHaveBeenCalledWith('에이전트를 지정할 수 없습니다.')
+  })
+
+  test('surfaces the localized fallback when the request itself fails', async () => {
+    global.fetch = jest.fn().mockRejectedValue(new TypeError('Failed to fetch'))
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).toHaveBeenCalledWith('에이전트를 지정할 수 없습니다.')
+  })
+
+  // A successful response with no topic payload must not throw; the broadcast
+  // remains the fallback path in that case.
+  test('is a no-op when a successful response carries no topic', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ success: true }),
+    })
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).not.toHaveBeenCalled()
+    expect(controller.listTarget.querySelector('.topic-agent-avatar')).toBeNull()
+  })
+
+  test('does not issue a request when the controller has no creative', async () => {
+    controller.creativeIdValue = ''
+    global.fetch = jest.fn()
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(global.fetch).not.toHaveBeenCalled()
+    expect(alertDialog).not.toHaveBeenCalled()
+  })
+
+  test('falls back to English when the partial supplied no localized string', async () => {
+    delete document.getElementById('topics').dataset.topicSetAgentError
+    global.fetch = jest.fn().mockRejectedValue(new TypeError('Failed to fetch'))
+
+    await controller.setTopicPrimaryAgent('1', AGENT)
+
+    expect(alertDialog).toHaveBeenCalledWith('Unable to assign the agent to this topic.')
+  })
+})

data/app/javascript/controllers/comments/form_controller.js

@@ -884,6 +884,9 @@ export default class extends Controller {
         if (quote.id === store.activeId) {
           const commentEl = document.querySelector(`[data-comment-id="${quote.commentId}"]`)
           if (commentEl) {
+            // Programmatic list scroll — drop the prev-message anchor so the next
+            // previous-message click resolves from the quoted comment now in view.
+            this.listController?.notifyProgrammaticScroll()
             commentEl.scrollIntoView({ behavior: 'smooth', block: 'center' })
             commentEl.classList.add('comment-highlight')
             setTimeout(() => commentEl.classList.remove('comment-highlight'), 2000)

data/app/javascript/controllers/comments/list_controller.js

@@ -6,8 +6,14 @@ import creativesApi from '../../lib/api/creatives'
 import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
 import { updateCsrfTokenFromResponse } from '../../lib/api/csrf_fetch'
 import { alertDialog, confirmDialog } from '../../lib/utils/dialog'
+import PrevMessageNavigator from './prev_message_navigator'
 // CommonPopup is now used via TopicSearchController (Stimulus)
 
+// Gestures that mean the user moved the list themselves, invalidating the
+// previous-message anchor. Only user input fires these — our own smooth scroll
+// does not.
+const PREV_MSG_USER_INPUT_EVENTS = ['wheel', 'touchstart', 'keydown', 'pointerdown']
+
 export default class extends Controller {
   static targets = ['list']
 
@@ -20,8 +26,10 @@ export default class extends Controller {
     this.movingComments = false
     this.manualSearchQuery = null
     this.initialLoadComplete = false
+    this.prevMsgNavigator = new PrevMessageNavigator()
 
     this.handleScroll = this.handleScroll.bind(this)
+    this.handlePrevMsgUserInput = this.handlePrevMsgUserInput.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.handleClick = this.handleClick.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
@@ -33,6 +41,9 @@ export default class extends Controller {
     this.handleStreamRender = this.handleStreamRender.bind(this)
 
     this.listTarget.addEventListener('scroll', this.handleScroll)
+    PREV_MSG_USER_INPUT_EVENTS.forEach((name) => {
+      this.listTarget.addEventListener(name, this.handlePrevMsgUserInput)
+    })
     this.listTarget.addEventListener('change', this.handleChange)
     this.listTarget.addEventListener('click', this.handleClick)
     this.listTarget.addEventListener('submit', this.handleSubmit)
@@ -75,6 +86,9 @@ export default class extends Controller {
 
   disconnect() {
     this.listTarget.removeEventListener('scroll', this.handleScroll)
+    PREV_MSG_USER_INPUT_EVENTS.forEach((name) => {
+      this.listTarget.removeEventListener(name, this.handlePrevMsgUserInput)
+    })
     this.listTarget.removeEventListener('change', this.handleChange)
     this.listTarget.removeEventListener('click', this.handleClick)
     this.listTarget.removeEventListener('submit', this.handleSubmit)
@@ -152,6 +166,9 @@ export default class extends Controller {
     if (!this.creativeId) return
     if (this.selection.size > 0) return
 
+    // The list is about to be replaced wholesale; any anchor we hold is stale.
+    this.prevMsgNavigator.reset()
+
     const params = {}
     if (this.highlightAfterLoad) {
       params.around_comment_id = this.highlightAfterLoad
@@ -334,9 +351,17 @@ export default class extends Controller {
     return parseInt(last.dataset.commentId)
   }
 
+  // Public seam for sibling controllers that scroll the list on their own
+  // (e.g. the review-quote chip). Lets them drop the prev-message anchor at the
+  // choke point without reaching into the navigator's internals.
+  notifyProgrammaticScroll() {
+    this.prevMsgNavigator?.notifyProgrammaticScroll()
+  }
+
   highlightComment(commentId) {
     const comment = document.getElementById(`comment_${commentId}`)
     if (!comment) return
+    this.prevMsgNavigator?.notifyProgrammaticScroll()
     comment.scrollIntoView({ behavior: 'auto', block: 'center' })
     comment.classList.add('highlight-flash')
     comment.dataset.highlighted = 'true'
@@ -357,6 +382,10 @@ export default class extends Controller {
     }, 2000);
   }
 
+  handlePrevMsgUserInput() {
+    this.prevMsgNavigator.notifyUserInput()
+  }
+
   handleScroll() {
     if (!this.initialLoadComplete) return
 
@@ -1078,28 +1107,16 @@ export default class extends Controller {
 
   scrollToPreviousMessage() {
     const list = this.listTarget
-    const items = Array.from(list.querySelectorAll('.comment-item'))
-    if (items.length === 0) return
-
-    const listRect = list.getBoundingClientRect()
-    const viewportTop = listRect.top
-
-    let currentIdx = -1
-    for (let i = 0; i < items.length; i++) {
-      const rect = items[i].getBoundingClientRect()
-      if (rect.top >= viewportTop - 2) {
-        currentIdx = i
-        break
-      }
-    }
-
-    if (currentIdx === -1) currentIdx = items.length - 1
+    const elements = Array.from(list.querySelectorAll('.comment-item'))
+    if (elements.length === 0) return
 
-    const currentItem = items[currentIdx]
-    const currentRect = currentItem.getBoundingClientRect()
-    const isAtTop = Math.abs(currentRect.top - viewportTop) < 4
+    const viewportTop = list.getBoundingClientRect().top
+    const measured = elements.map((el) => ({
+      id: el.dataset.commentId,
+      top: el.getBoundingClientRect().top,
+    }))
 
-    const targetIdx = isAtTop ? currentIdx - 1 : currentIdx
+    const targetIdx = this.prevMsgNavigator.resolveTargetIndex(measured, viewportTop)
     if (targetIdx < 0) {
       if (!this.allOlderLoaded) {
         this.loadOlderComments()
@@ -1107,8 +1124,9 @@ export default class extends Controller {
       return
     }
 
-    const target = items[targetIdx]
+    const target = elements[targetIdx]
     const targetTop = target.offsetTop - list.offsetTop
+    this.prevMsgNavigator.commit(measured[targetIdx].id, measured[targetIdx].top)
     list.scrollTo({ top: targetTop, behavior: 'smooth' })
     this.stickToBottom = false
 
@@ -1126,6 +1144,9 @@ export default class extends Controller {
   }
 
   scrollToBottom() {
+    // A jump to latest we did not initiate via the button - drop the anchor so
+    // the next previous-message click resolves from here, not a stale target.
+    this.prevMsgNavigator?.notifyProgrammaticScroll()
     // In column reverse, bottom of scroll might be tricky.
     // Easiest is to set scrollTop to a large value.
     requestAnimationFrame(() => {

data/app/javascript/controllers/comments/prev_message_navigator.js

@@ -0,0 +1,94 @@
+// Tracks where the "previous message" button left off.
+//
+// The button scrolls with `behavior: 'smooth'`, so a rapid second click arrives
+// while the list is still mid-animation. Deriving the current position purely
+// from geometry at that moment picks the item we just left (it has not reached
+// the top yet), which makes the list bounce up and down instead of walking
+// backwards. Remembering the last target as an anchor keeps each click stepping
+// one message further back.
+//
+// The anchor is dropped once the user moves the list themselves, so geometry
+// takes over from wherever they landed. Invalidation is driven by input events
+// rather than scroll events: a scroll event cannot be attributed to the user
+// without guessing how long our own animation runs, and guessing short brings
+// the bounce back. Dropping the anchor is always the safe direction — a settled
+// list resolves correctly from geometry alone.
+//
+// Kept free of DOM access so it can be unit tested: jsdom has no layout engine,
+// so the controller measures the items and passes `{ id, top }` pairs in.
+
+// Sub-pixel scroll offsets (HiDPI, browser rounding) mean an item parked at the
+// top is rarely at exactly `viewportTop`.
+const TOP_TOLERANCE = 4
+
+export default class PrevMessageNavigator {
+  constructor() {
+    this.anchorId = null
+  }
+
+  // items: `{ id, top }` in DOM order (oldest first), top relative to viewport.
+  // Returns the index to scroll to, or -1 when there is nothing older in the
+  // list (the caller then loads older comments).
+  resolveTargetIndex(items, viewportTop) {
+    if (items.length === 0) return -1
+
+    if (this.anchorId !== null) {
+      const anchorIdx = items.findIndex((item) => item.id === this.anchorId)
+      if (anchorIdx !== -1 && this.anchorIsOnItsWay(items[anchorIdx].top, viewportTop)) {
+        return anchorIdx - 1
+      }
+      this.anchorId = null
+    }
+
+    let currentIdx = items.findIndex((item) => item.top >= viewportTop - TOP_TOLERANCE)
+    if (currentIdx === -1) currentIdx = items.length - 1
+
+    const isAtTop = Math.abs(items[currentIdx].top - viewportTop) < TOP_TOLERANCE
+    return isAtTop ? currentIdx - 1 : currentIdx
+  }
+
+  // The anchor travels from wherever it sat when we committed to `viewportTop`,
+  // and nothing else moves it. Outside that corridor the list was scrolled by
+  // something other than us - a new message arriving, a permalink jump - none of
+  // which fire a user input event, so the anchor would otherwise survive and wedge
+  // the button (anchored on the oldest item, every click resolves to -1 forever).
+  //
+  // The corridor spans both endpoints because the anchor can approach the top from
+  // either side: usually from above (the next message back), but from below when
+  // the click started between messages and we pulled the partially visible one up.
+  //
+  // Comparing the anchor against its own start position rather than the list's
+  // scroll offset keeps this correct when older comments are prepended: that
+  // shifts `scrollTop` but leaves the anchor where it is on screen.
+  anchorIsOnItsWay(anchorTop, viewportTop) {
+    const low = Math.min(this.anchorStartTop, viewportTop) - TOP_TOLERANCE
+    const high = Math.max(this.anchorStartTop, viewportTop) + TOP_TOLERANCE
+    return anchorTop >= low && anchorTop <= high
+  }
+
+  // Called once we start scrolling towards `id`, which currently sits at `top`.
+  commit(id, top) {
+    this.anchorId = id
+    this.anchorStartTop = top
+  }
+
+  // Called when the user interacts with the list (wheel, touch, key, pointer).
+  notifyUserInput() {
+    this.anchorId = null
+  }
+
+  // Called when our own code repositions the list without going through the
+  // button - jumping to the newest message, a permalink highlight. These fire no
+  // user input event, and a small jump can leave the anchor inside the corridor
+  // above, where geometry cannot tell it apart from our own in-flight scroll. The
+  // corridor still catches larger jumps, but the caller drops the anchor at these
+  // known sites so a still-visible message is never skipped.
+  notifyProgrammaticScroll() {
+    this.anchorId = null
+  }
+
+  // Called when the list contents are replaced wholesale.
+  reset() {
+    this.anchorId = null
+  }
+}