collavre 0.20.3 → 0.22.0

data/app/javascript/controllers/__tests__/link_creative_controller.test.js

@@ -0,0 +1,447 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { jest } from '@jest/globals'
+
+const browse = jest.fn()
+const search = jest.fn()
+
+jest.unstable_mockModule('../../lib/api/creatives', () => ({
+  default: { browse, search },
+  browse,
+  search,
+}))
+
+const { Application } = await import('@hotwired/stimulus')
+const LinkCreativeController = (await import('../link_creative_controller')).default
+
+const flush = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+const installController = async () => {
+  document.body.innerHTML = `
+    <div id="link-creative-modal" class="common-popup" style="display:none;" data-controller="link-creative"
+         data-link-creative-loading-text="Loading…"
+         data-link-creative-no-results-text="No results"
+         data-link-creative-empty-text="Empty"
+         data-link-creative-expand-text="Expand">
+      <button type="button" class="popup-close-btn" data-link-creative-target="close">&times;</button>
+      <input type="text" data-link-creative-target="input">
+      <ul class="common-popup-list link-creative-list" data-popup-list data-link-creative-target="list"></ul>
+    </div>`
+
+  const application = Application.start()
+  application.register('link-creative', LinkCreativeController)
+  await flush() // Stimulus connects asynchronously
+  const element = document.getElementById('link-creative-modal')
+  const controller = application.getControllerForElementAndIdentifier(element, 'link-creative')
+  return { application, element, controller }
+}
+
+const rect = { left: 0, top: 0, bottom: 0, right: 0, width: 0, height: 0 }
+
+describe('LinkCreativeController picker', () => {
+  beforeAll(() => {
+    // jsdom does not implement scrollIntoView (used when highlighting a node).
+    window.HTMLElement.prototype.scrollIntoView = jest.fn()
+    // jsdom does not compute layout, so offsetParent is null for every element;
+    // the picker's _visibleRows() filters on it. Treat any attached element as
+    // visible so keyboard navigation over the rendered rows is exercisable.
+    Object.defineProperty(window.HTMLElement.prototype, 'offsetParent', {
+      configurable: true,
+      get() {
+        return this.parentNode
+      },
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    jest.clearAllMocks()
+  })
+
+  test('renders a browsable tree on open with toggles for nodes that have children', async () => {
+    browse.mockResolvedValue([
+      { id: 1, description: 'Root A', progress: 0, has_children: true },
+      { id: 2, description: 'Root B', progress: 0, has_children: false },
+    ])
+
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush()
+
+    expect(browse).toHaveBeenCalledWith(null)
+    const items = document.querySelectorAll('.link-tree-item')
+    expect(items).toHaveLength(2)
+    // First node is expandable, second is a leaf
+    expect(items[0].querySelector('.link-tree-toggle:not(.link-tree-toggle-empty)')).not.toBeNull()
+    expect(items[1].querySelector('.link-tree-toggle-empty')).not.toBeNull()
+    expect(items[0].querySelector('.link-tree-label').textContent).toBe('Root A')
+
+    application.stop()
+  })
+
+  test('expands a node lazily, loading its children on toggle click', async () => {
+    browse
+      .mockResolvedValueOnce([{ id: 1, description: 'Root A', progress: 0, has_children: true }])
+      .mockResolvedValueOnce([{ id: 5, description: 'Child', progress: 0, has_children: false }])
+
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush()
+
+    const toggle = document.querySelector('.link-tree-toggle:not(.link-tree-toggle-empty)')
+    // Collapsed toggle renders the same SVG chevron as the main creative tree.
+    expect(toggle.querySelector('svg')).not.toBeNull()
+    expect(toggle.textContent).toBe('')
+
+    toggle.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await flush()
+
+    expect(browse).toHaveBeenLastCalledWith('1')
+    const child = document.querySelector('.link-tree-children .link-tree-item .link-tree-label')
+    expect(child.textContent).toBe('Child')
+    // Expanded toggle still renders an SVG chevron (icon swapped, not text).
+    expect(toggle.querySelector('svg')).not.toBeNull()
+
+    application.stop()
+  })
+
+  test('does not search below the 2-character threshold', async () => {
+    browse.mockResolvedValue([])
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush()
+
+    controller.inputTarget.value = 'a'
+    controller.search()
+    await flush()
+
+    expect(search).not.toHaveBeenCalled()
+
+    application.stop()
+  })
+
+  test('renders flat results with a clickable breadcrumb at >= 2 characters', async () => {
+    browse.mockResolvedValue([])
+    search.mockResolvedValue([
+      {
+        id: 9,
+        description: 'Deep Leaf',
+        progress: 0,
+        path: [
+          { id: 1, description: 'Root' },
+          { id: 3, description: 'Mid' },
+        ],
+      },
+    ])
+
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush()
+
+    controller.inputTarget.value = 'lea'
+    controller.search()
+    await flush()
+
+    expect(search).toHaveBeenCalledWith('lea', { simple: true })
+    const result = document.querySelector('.link-result-item')
+    expect(result.querySelector('.link-result-label').textContent).toBe('Deep Leaf')
+    const crumbs = result.querySelectorAll('.link-crumb')
+    expect(Array.from(crumbs).map((c) => c.textContent)).toEqual(['Root', 'Mid'])
+
+    application.stop()
+  })
+
+  test('masks restricted ancestors in the breadcrumb and keeps them non-clickable', async () => {
+    browse.mockResolvedValue([])
+    search.mockResolvedValue([
+      {
+        id: 9,
+        description: 'Deep Leaf',
+        progress: 0,
+        path: [
+          { id: 1, description: null, restricted: true },
+          { id: 3, description: 'Mid' },
+        ],
+      },
+    ])
+
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush()
+
+    controller.inputTarget.value = 'lea'
+    controller.search()
+    await flush()
+
+    const restricted = document.querySelector('.link-crumb-restricted')
+    expect(restricted).not.toBeNull()
+    expect(restricted.tagName).toBe('SPAN') // not a button -> not clickable
+    expect(restricted.textContent).toBe('…')
+
+    application.stop()
+  })
+
+  test('localizes the expand toggle aria-label from the data attribute', async () => {
+    browse.mockResolvedValue([{ id: 1, description: 'Root A', progress: 0, has_children: true }])
+
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush()
+
+    const toggle = document.querySelector('.link-tree-toggle:not(.link-tree-toggle-empty)')
+    expect(toggle.getAttribute('aria-label')).toBe('Expand')
+
+    application.stop()
+  })
+
+  test('breadcrumb maps an origin id back to its linked shell root and expands it', async () => {
+    // Root browse returns a linked shell (id 100) whose effective origin is 1.
+    browse
+      .mockResolvedValueOnce([
+        { id: 100, description: 'Shared', progress: 0, has_children: true, origin_id: 1 },
+      ])
+      // Expanding the shell loads the origin's real children (id 3).
+      .mockResolvedValueOnce([{ id: 3, description: 'Mid', progress: 0, has_children: false }])
+    // Search match's breadcrumb carries origin ids (root crumb id 1 == shell origin).
+    search.mockResolvedValue([
+      {
+        id: 9,
+        description: 'Deep Leaf',
+        progress: 0,
+        path: [
+          { id: 1, description: 'Shared' },
+          { id: 3, description: 'Mid' },
+        ],
+      },
+    ])
+
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush() // caches root nodes (the shell)
+
+    controller.inputTarget.value = 'lea'
+    controller.search()
+    await flush()
+
+    // Click the second crumb (Mid): chain = [origin id 1], target = 3.
+    const crumbs = document.querySelectorAll('.link-crumb')
+    crumbs[1].dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await flush()
+    await flush()
+
+    // The shell (id 100) must have been expanded via its origin id (1), not skipped.
+    expect(browse).toHaveBeenLastCalledWith('100')
+    const mid = document.querySelector('.link-tree-children .link-tree-item[data-id="3"]')
+    expect(mid).not.toBeNull()
+
+    application.stop()
+  })
+
+  test('reveal_path expands local folders to reach a nested linked shell', async () => {
+    // The shell is nested under the user's own (collapsed) folder, so root
+    // browse returns only that folder — not the shell.
+    browse
+      .mockResolvedValueOnce([
+        { id: 50, description: 'Local Folder', progress: 0, has_children: true },
+      ])
+      // Expanding the local folder reveals the shell (id 100, origin 1).
+      .mockResolvedValueOnce([
+        { id: 100, description: 'Shared', progress: 0, has_children: true, origin_id: 1 },
+      ])
+      // Expanding the shell loads the origin's real children (id 3).
+      .mockResolvedValueOnce([{ id: 3, description: 'Mid', progress: 0, has_children: false }])
+    // Origin-space breadcrumb (ids 1,3) plus the user-local reveal path to the shell.
+    search.mockResolvedValue([
+      {
+        id: 9,
+        description: 'Deep Leaf',
+        progress: 0,
+        // Keyed by origin ancestor: origin 1's shell is reached via [50, 100].
+        reveal_path: { 1: [50, 100] },
+        path: [
+          { id: 1, description: 'Shared' },
+          { id: 3, description: 'Mid' },
+        ],
+      },
+    ])
+
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush() // caches root nodes (the local folder)
+
+    controller.inputTarget.value = 'lea'
+    controller.search()
+    await flush()
+
+    // Click the second crumb (Mid): anchor at origin 1 -> chain = [50, 100], target = 3.
+    const crumbs = document.querySelectorAll('.link-crumb')
+    crumbs[1].dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    for (let i = 0; i < 5; i++) await flush()
+
+    // Local folder (50) and shell (100) were both expanded to surface the hit.
+    expect(browse).toHaveBeenCalledWith('50')
+    expect(browse).toHaveBeenCalledWith('100')
+    const mid = document.querySelector('.link-tree-children .link-tree-item[data-id="3"]')
+    expect(mid).not.toBeNull()
+
+    application.stop()
+  })
+
+  test('a higher ancestor crumb resolves through its own shell, not the deepest one', async () => {
+    // The user holds a shell for both origin 1 (under folder 50) and origin 3
+    // (under folder 60). Root browse returns both local folders.
+    browse
+      .mockResolvedValueOnce([
+        { id: 50, description: 'Folder A', progress: 0, has_children: true },
+        { id: 60, description: 'Folder D', progress: 0, has_children: true },
+      ])
+      // Expanding folder A (50) reveals origin 1's shell (id 100).
+      .mockResolvedValueOnce([
+        { id: 100, description: 'Ancestor', progress: 0, has_children: true, origin_id: 1 },
+      ])
+      // Expanding that shell loads origin 1's children.
+      .mockResolvedValueOnce([{ id: 3, description: 'Descendant', progress: 0, has_children: false }])
+    // Per-origin reveal map: each origin ancestor maps to its own shell path.
+    search.mockResolvedValue([
+      {
+        id: 9,
+        description: 'Deep Leaf',
+        progress: 0,
+        reveal_path: { 1: [50, 100], 3: [60, 200] },
+        path: [
+          { id: 1, description: 'Ancestor' },
+          { id: 3, description: 'Descendant' },
+        ],
+      },
+    ])
+
+    const { application, controller } = await installController()
+    controller.open(rect, jest.fn(), jest.fn())
+    await flush() // caches root nodes (both local folders)
+
+    controller.inputTarget.value = 'lea'
+    controller.search()
+    await flush()
+
+    // Click the FIRST crumb (Ancestor, id 1): must anchor at origin 1's shell
+    // (folder 50 -> shell 100), NOT the deeper origin 3 shell (folder 60).
+    const crumbs = document.querySelectorAll('.link-crumb')
+    crumbs[0].dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    for (let i = 0; i < 5; i++) await flush()
+
+    expect(browse).toHaveBeenCalledWith('50')
+    expect(browse).toHaveBeenCalledWith('100')
+    expect(browse).not.toHaveBeenCalledWith('60')
+    expect(browse).not.toHaveBeenCalledWith('200')
+
+    application.stop()
+  })
+
+  test('selecting a tree row invokes the callback with id and label', async () => {
+    browse.mockResolvedValue([{ id: 7, description: 'Pick Me', progress: 0, has_children: false }])
+    const onSelect = jest.fn()
+
+    const { application, controller } = await installController()
+    controller.open(rect, onSelect, jest.fn())
+    await flush()
+
+    document.querySelector('.link-tree-row').dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await flush()
+
+    expect(onSelect).toHaveBeenCalledWith({ id: 7, label: 'Pick Me' })
+
+    application.stop()
+  })
+
+  test('selecting a linked shell row emits the effective origin id', async () => {
+    // Shell row (id 100) whose effective origin is 1; selecting it must hand the
+    // origin id to consumers so a new link is based on the real shared creative,
+    // not the user's shell (which would corrupt the permission base).
+    browse.mockResolvedValue([
+      { id: 100, description: 'Shared', progress: 0, has_children: false, origin_id: 1 },
+    ])
+    const onSelect = jest.fn()
+
+    const { application, controller } = await installController()
+    controller.open(rect, onSelect, jest.fn())
+    await flush()
+
+    document.querySelector('.link-tree-row').dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    await flush()
+
+    expect(onSelect).toHaveBeenCalledWith({ id: 1, label: 'Shared' })
+
+    application.stop()
+  })
+
+  test('Tab in the initial browse state moves focus instead of linking the first row', async () => {
+    // Empty input => browse: the first root is auto-highlighted but unchosen.
+    // Tab (leaving the search field) must not link it; focus moves normally.
+    browse.mockResolvedValue([{ id: 7, description: 'Pick Me', progress: 0, has_children: false }])
+    const onSelect = jest.fn()
+
+    const { application, controller } = await installController()
+    controller.open(rect, onSelect, jest.fn())
+    await flush()
+
+    const tab = new KeyboardEvent('keydown', { key: 'Tab', cancelable: true, bubbles: true })
+    controller.inputTarget.dispatchEvent(tab)
+    await flush()
+
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(tab.defaultPrevented).toBe(false)
+
+    application.stop()
+  })
+
+  test('Tab selects the highlighted row after the user navigates the tree', async () => {
+    browse.mockResolvedValue([
+      { id: 7, description: 'Pick Me', progress: 0, has_children: false },
+      { id: 8, description: 'Second', progress: 0, has_children: false },
+    ])
+    const onSelect = jest.fn()
+
+    const { application, controller } = await installController()
+    controller.open(rect, onSelect, jest.fn())
+    await flush()
+
+    // Explicit navigation: move the active row down to the second node.
+    controller.inputTarget.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', cancelable: true, bubbles: true }),
+    )
+    const tab = new KeyboardEvent('keydown', { key: 'Tab', cancelable: true, bubbles: true })
+    controller.inputTarget.dispatchEvent(tab)
+    await flush()
+
+    expect(onSelect).toHaveBeenCalledWith({ id: 8, label: 'Second' })
+    expect(tab.defaultPrevented).toBe(true)
+
+    application.stop()
+  })
+
+  test('Tab selects the top search result without prior navigation', async () => {
+    // A typed query is an explicit choice context, so Tab selects the top result.
+    browse.mockResolvedValue([])
+    search.mockResolvedValue([{ id: 9, description: 'Found', progress: 0, path: [] }])
+    const onSelect = jest.fn()
+
+    const { application, controller } = await installController()
+    controller.open(rect, onSelect, jest.fn())
+    await flush()
+
+    controller.inputTarget.value = 'fo'
+    controller.search()
+    await flush()
+
+    const tab = new KeyboardEvent('keydown', { key: 'Tab', cancelable: true, bubbles: true })
+    controller.inputTarget.dispatchEvent(tab)
+    await flush()
+
+    expect(onSelect).toHaveBeenCalledWith({ id: 9, label: 'Found' })
+    expect(tab.defaultPrevented).toBe(true)
+
+    application.stop()
+  })
+})

data/app/javascript/controllers/comment_controller.js

@@ -10,7 +10,7 @@ if (!window._streamingCommentIds) window._streamingCommentIds = new Set()
 
 // Connects to data-controller="comment"
 export default class extends Controller {
-  static targets = ["ownerButton", "deleteButton", "approveButton", "actionApproveControls"]
+  static targets = ["ownerButton", "deleteButton", "approveButton", "denyButton", "actionApproveControls"]
 
   get _commentId() {
     return this.element.dataset.commentId
@@ -123,6 +123,15 @@ export default class extends Controller {
       }
     }
 
+    const actionMarkdownElement = this.element.querySelector('.comment-action-markdown')
+    if (actionMarkdownElement && actionMarkdownElement.dataset.rendered !== 'true') {
+      const text = actionMarkdownElement.textContent || ''
+      actionMarkdownElement.innerHTML = renderCommentMarkdown(text)
+      addTableDownloadButtons(actionMarkdownElement)
+      renderMermaidDiagrams(actionMarkdownElement)
+      actionMarkdownElement.dataset.rendered = 'true'
+    }
+
     // Text selection quote support
     this.handleMouseUp = this.handleMouseUp.bind(this)
     document.addEventListener('mouseup', this.handleMouseUp)
@@ -157,6 +166,11 @@ export default class extends Controller {
       this.approveButtonTargets.forEach((button) => {
         button.classList.remove('comment-approve-hidden')
       })
+      // Deny button (Claude Channel permission prompts only) is gated the same
+      // way as approve.
+      this.denyButtonTargets.forEach((button) => {
+        button.classList.remove('comment-approve-hidden')
+      })
       // Also show action block approve controls (edit action button, form)
       this.actionApproveControlsTargets.forEach((el) => {
         el.classList.remove('comment-approve-hidden')

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

@@ -121,3 +121,111 @@ describe('CommentsPresenceController', () => {
     expect(close).not.toHaveBeenCalled()
   })
 })
+
+describe('CommentsPresenceController typing-row horizontal scroll', () => {
+  let application
+  let container
+  let controller
+  let row
+  let scrollLeftValue
+
+  // jsdom has no layout engine, so scroll geometry must be stubbed. Treat the
+  // row as 100px wide with 300px of content: "at end" means scrollLeft >= 176.
+  function setGeometry({ clientWidth, scrollWidth, scrollLeft }) {
+    scrollLeftValue = scrollLeft
+    Object.defineProperty(row, 'clientWidth', { value: clientWidth, configurable: true })
+    Object.defineProperty(row, 'scrollWidth', { value: scrollWidth, configurable: true })
+    Object.defineProperty(row, 'scrollLeft', {
+      configurable: true,
+      get: () => scrollLeftValue,
+      set: (v) => { scrollLeftValue = v },
+    })
+  }
+
+  beforeEach(async () => {
+    document.body.dataset.currentUserId = '7'
+    global.fetch = jest.fn()
+
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div id="comments-popup" data-controller="comments--presence">
+        <textarea data-comments--presence-target="textarea"></textarea>
+        <input type="checkbox" data-comments--presence-target="privateCheckbox" />
+        <div id="typing-indicator-row">
+          <div id="typing-scroll-viewport" data-comments--presence-target="scrollRow">
+            <div data-comments--presence-target="channelChips"></div>
+            <div data-comments--presence-target="typingIndicator"></div>
+          </div>
+        </div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('comments--presence', PresenceController)
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    const el = document.getElementById('comments-popup')
+    controller = application.getControllerForElementAndIdentifier(el, 'comments--presence')
+    controller.creativeId = '123'
+    row = el.querySelector('#typing-scroll-viewport')
+  })
+
+  afterEach(() => {
+    application.stop()
+    document.body.innerHTML = ''
+    delete document.body.dataset.currentUserId
+    jest.restoreAllMocks()
+  })
+
+  test('auto-scrolls a new typer into view when parked at the right edge', () => {
+    setGeometry({ clientWidth: 100, scrollWidth: 300, scrollLeft: 200 }) // at end
+
+    controller.handlePresenceMessage({ typing: { id: 5, name: 'Alice' } })
+
+    expect(scrollLeftValue).toBe(300)
+  })
+
+  test('does NOT scroll when the user has scrolled back to look at earlier items', () => {
+    setGeometry({ clientWidth: 100, scrollWidth: 300, scrollLeft: 0 }) // scrolled back
+
+    controller.handlePresenceMessage({ typing: { id: 5, name: 'Alice' } })
+
+    expect(scrollLeftValue).toBe(0)
+  })
+
+  test('does not re-scroll on repeat typing pings from the same user (not a new item)', () => {
+    setGeometry({ clientWidth: 100, scrollWidth: 300, scrollLeft: 200 })
+    controller.handlePresenceMessage({ typing: { id: 5, name: 'Alice' } })
+    expect(scrollLeftValue).toBe(300)
+
+    // User scrolls back; a heartbeat ping for the same (already-shown) typer
+    // must not yank them to the end again.
+    scrollLeftValue = 0
+    controller.handlePresenceMessage({ typing: { id: 5, name: 'Alice' } })
+    expect(scrollLeftValue).toBe(0)
+  })
+
+  test("always scrolls the local user's own new typing indicator into view, even when scrolled back to badges", () => {
+    // currentUserId is '7'. The user is parked at the left looking at PR/Preview
+    // badges (scrollLeft 0, not at end). When they themselves start typing they
+    // always want to see their own indicator, so stick-to-end must not suppress it.
+    setGeometry({ clientWidth: 100, scrollWidth: 300, scrollLeft: 0 })
+
+    controller.handlePresenceMessage({ typing: { id: 7, name: 'Me' } })
+
+    expect(scrollLeftValue).toBe(300)
+  })
+
+  test('does not re-scroll on repeat self typing pings (only the first appearance forces scroll)', () => {
+    setGeometry({ clientWidth: 100, scrollWidth: 300, scrollLeft: 0 })
+    controller.handlePresenceMessage({ typing: { id: 7, name: 'Me' } })
+    expect(scrollLeftValue).toBe(300)
+
+    // A heartbeat ping for the same (already-shown) self typer while scrolled
+    // back must not yank to the end again — only the first appearance forces it.
+    scrollLeftValue = 0
+    controller.handlePresenceMessage({ typing: { id: 7, name: 'Me' } })
+    expect(scrollLeftValue).toBe(0)
+  })
+})

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

@@ -145,6 +145,10 @@ export default class extends Controller {
   onPopupOpened({ creativeId, canComment }) {
     this.creativeId = creativeId
     this.element.dataset.creativeId = creativeId || ''
+    // Stale topic ids from the previous creative are cleared by the popup
+    // controller BEFORE topics loadTopics() dispatches comments--topics:change,
+    // so by the time we get here, currentTopicId already reflects the new
+    // creative's restored topic. Do not re-clear it.
     this.formTarget.style.display = canComment ? '' : 'none'
     this.resetForm()
     if (canComment && this.shouldAutoFocusOnOpen()) {

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

@@ -432,6 +432,11 @@ export default class extends Controller {
       this.approveComment(target)
       return
     }
+    if (target.classList.contains('deny-comment-btn')) {
+      event.preventDefault()
+      this.denyComment(target)
+      return
+    }
     if (target.classList.contains('edit-comment-btn')) {
       event.preventDefault()
       this.editComment(target)
@@ -956,12 +961,22 @@ export default class extends Controller {
   }
 
   approveComment(button) {
-    // ... (Existing logic) ...
+    this.decideComment(button, 'approve')
+  }
+
+  // Deny a Claude Channel tool-permission prompt. Mirrors approveComment but
+  // hits the /deny endpoint, which relays a "deny" decision to the suspended
+  // session.
+  denyComment(button) {
+    this.decideComment(button, 'deny')
+  }
+
+  decideComment(button, action) {
     if (button.disabled) return
     button.disabled = true
     const commentId = button.getAttribute('data-comment-id')
     const topicQuery = this.topicQueryString()
-    fetch(`/creatives/${this.creativeId}/comments/${commentId}/approve${topicQuery}`, { method: 'POST', headers: { 'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content } })
+    fetch(`/creatives/${this.creativeId}/comments/${commentId}/${action}${topicQuery}`, { method: 'POST', headers: { 'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content } })
       .then(r => r.ok ? r.text() : r.json().then(j => { throw new Error(j.error) }))
       .then(html => {
         if (!html) { button.disabled = false; return; }
@@ -1123,25 +1138,28 @@ export default class extends Controller {
   openActionEditor(container) {
     if (!container) return
     const json = container.querySelector('.comment-action-json')
+    const md = container.querySelector('.comment-action-markdown')
     const form = container.querySelector('.comment-action-edit-form')
     const btn = container.querySelector('.edit-comment-action-btn')
     const txt = form?.querySelector('.comment-action-edit-textarea')
-    if (json && form && txt) {
-      txt.value = json.textContent || ''
-      form.style.display = 'block'
-      if (btn) btn.style.display = 'none'
-      json.style.display = 'none'
-      txt.focus()
-    }
+    if (!form || !txt) return
+    if (json) txt.value = json.textContent || ''
+    form.style.display = 'block'
+    if (btn) btn.style.display = 'none'
+    if (json) json.style.display = 'none'
+    if (md) md.style.display = 'none'
+    txt.focus()
   }
 
   closeActionEditor(container) {
     if (!container) return
     const json = container.querySelector('.comment-action-json')
+    const md = container.querySelector('.comment-action-markdown')
     const form = container.querySelector('.comment-action-edit-form')
     const btn = container.querySelector('.edit-comment-action-btn')
     if (form) form.style.display = 'none'
     if (json) json.style.display = ''
+    if (md) md.style.display = ''
     if (btn) btn.style.display = ''
   }