collavre 0.3.2 → 0.5.0

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

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { renderMarkdownInContainer } from '../../lib/utils/markdown'
+import { wrapHtmlInCodeBlocks } from '../../lib/html_code_block_wrapper'
 
 export default class extends Controller {
   static targets = [
@@ -14,6 +15,10 @@ export default class extends Controller {
     'imageInput',
     'imageButton',
     'attachmentList',
+    'quotedCommentId',
+    'quotedText',
+    'quoteIndicator',
+    'quoteIndicatorText',
   ]
 
   connect() {
@@ -53,6 +58,8 @@ export default class extends Controller {
     this.imageInputTarget?.addEventListener('change', this.handleImageChange)
     this.textareaTarget.addEventListener('dragover', this.handleDragOver)
     this.textareaTarget.addEventListener('drop', this.handleDrop)
+    this.handlePaste = this.handlePaste.bind(this)
+    this.textareaTarget.addEventListener('paste', this.handlePaste)
 
 
     this.recognition = null
@@ -97,6 +104,7 @@ export default class extends Controller {
     this.imageInputTarget?.removeEventListener('change', this.handleImageChange)
     this.textareaTarget.removeEventListener('dragover', this.handleDragOver)
     this.textareaTarget.removeEventListener('drop', this.handleDrop)
+    this.textareaTarget.removeEventListener('paste', this.handlePaste)
     this.element.removeEventListener('comments--topics:change', this.handleTopicChange)
   }
 
@@ -154,6 +162,7 @@ export default class extends Controller {
     if (this.cancelTarget) this.cancelTarget.style.display = 'none'
     this.presenceController?.clearManualTypingMessage()
     this.clearImageAttachments()
+    this.cancelQuote()
   }
 
   setSendingState(isSending) {
@@ -420,6 +429,31 @@ export default class extends Controller {
     this.updateAttachmentList()
   }
 
+  handlePaste(event) {
+    const clipboardData = event.clipboardData
+    if (!clipboardData) return
+
+    const text = clipboardData.getData('text/plain') || clipboardData.getData('text')
+    if (!text) return
+
+    const { changed, result } = wrapHtmlInCodeBlocks(text)
+    if (!changed) return
+
+    event.preventDefault()
+
+    const textarea = this.textareaTarget
+    const start = textarea.selectionStart
+    const end = textarea.selectionEnd
+    const before = textarea.value.substring(0, start)
+    const after = textarea.value.substring(end)
+    // Ensure blank line before code fence if there's preceding text
+    const separator = before.length > 0 && !before.endsWith('\n') ? '\n' : ''
+    textarea.value = before + separator + result + after
+    const cursorPos = start + separator.length + result.length
+    textarea.setSelectionRange(cursorPos, cursorPos)
+    textarea.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+
   handleDragOver(event) {
     if (this.hasImageFromDataTransfer(event.dataTransfer)) {
       event.preventDefault()
@@ -499,6 +533,24 @@ export default class extends Controller {
     })
   }
 
+  quoteComment(commentId, selectedText) {
+    if (!commentId || !selectedText) return
+    this.quotedCommentIdTarget.value = commentId
+    this.quotedTextTarget.value = selectedText
+    this.quoteIndicatorTarget.style.display = ''
+    this.quoteIndicatorTextTarget.textContent = selectedText.length > 80
+      ? selectedText.substring(0, 80) + '…'
+      : selectedText
+    this.focusTextarea()
+  }
+
+  cancelQuote() {
+    this.quotedCommentIdTarget.value = ''
+    this.quotedTextTarget.value = ''
+    this.quoteIndicatorTarget.style.display = 'none'
+    this.quoteIndicatorTextTarget.textContent = ''
+  }
+
   renderCommentHtml(html, { replaceExisting = false } = {}) {
     const listElement = document.getElementById('comments-list')
     if (!listElement || !html) return

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

@@ -2,6 +2,7 @@ import { Controller } from '@hotwired/stimulus'
 import { createSubscription } from '../../services/cable'
 
 const TYPING_TIMEOUT = 3000
+const AGENT_STATUS_TIMEOUT = 10000 // Safety timeout for agent_status (heartbeat expected every 3s)
 
 export default class extends Controller {
   static targets = ['participants', 'typingIndicator', 'textarea', 'privateCheckbox']
@@ -158,8 +159,20 @@ export default class extends Controller {
       }
       if (status === 'thinking' || status === 'streaming') {
         this.typingUsers[id] = name
+        // Safety timeout: auto-remove if no heartbeat within AGENT_STATUS_TIMEOUT
+        if (!this.agentStatusTimers) this.agentStatusTimers = {}
+        if (this.agentStatusTimers[id]) clearTimeout(this.agentStatusTimers[id])
+        this.agentStatusTimers[id] = setTimeout(() => {
+          delete this.typingUsers[id]
+          delete this.agentStatusTimers[id]
+          this.renderTypingIndicator()
+        }, AGENT_STATUS_TIMEOUT)
       } else {
         delete this.typingUsers[id]
+        if (this.agentStatusTimers?.[id]) {
+          clearTimeout(this.agentStatusTimers[id])
+          delete this.agentStatusTimers[id]
+        }
       }
       this.renderTypingIndicator()
     }

data/app/javascript/controllers/creatives/tree_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { renderCreativeTree, dispatchCreativeTreeUpdated } from '../../creatives/tree_renderer'
+import { parseEmojis } from '../../utils/emoji_parser'
 
 export default class extends Controller {
   static values = {
@@ -121,7 +122,7 @@ export default class extends Controller {
       emojiString = rootStyle.getPropertyValue('--creative-loading-emojis').replace(/"/g, '').trim()
     }
 
-    const emojis = emojiString ? emojiString.split(',').map(e => e.trim()) : ['🎨', '💡', '🚀', '✨', '🧩', '🎲']
+    const emojis = parseEmojis(emojiString)
 
     let emojiIndex = 0
     let frame = 0 // 0: ..., 1: ..E, 2: .E., 3: E..

data/app/javascript/controllers/link_creative_controller.js

@@ -6,7 +6,9 @@ export default class extends CommonPopupController {
 
     connect() {
         super.connect()
-        this.inputTarget.addEventListener('input', this.search.bind(this))
+        this._debounceTimer = null
+        this._searchToken = 0
+        this.inputTarget.addEventListener('input', this._debouncedSearch.bind(this))
         this.inputTarget.addEventListener('keydown', this.handleInputKeydown.bind(this))
         this.closeTarget.addEventListener('click', () => this.close())
 
@@ -14,6 +16,14 @@ export default class extends CommonPopupController {
         this.open = this.open.bind(this)
     }
 
+    disconnect() {
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer)
+            this._debounceTimer = null
+        }
+        super.disconnect()
+    }
+
     open(anchorRect, onSelectCallback, onCloseCallback) {
         this.onSelectCallback = onSelectCallback
         this.onCloseCallback = onCloseCallback
@@ -27,6 +37,10 @@ export default class extends CommonPopupController {
     }
 
     close() {
+        if (this._debounceTimer) {
+            clearTimeout(this._debounceTimer)
+            this._debounceTimer = null
+        }
         // super.close() calls popup.hide(), which triggers dispatchClose, 
         // where we now handle the callback. So we just need to call super.close().
         super.close()
@@ -42,21 +56,33 @@ export default class extends CommonPopupController {
         }
     }
 
+    _debouncedSearch() {
+        if (this._debounceTimer) clearTimeout(this._debounceTimer)
+        this._debounceTimer = setTimeout(() => this.search(), 300)
+    }
+
     search() {
         const query = this.inputTarget.value.trim()
-        if (!query) {
+        if (query.length < 3) {
+            this._searchToken++
             this.setItems([])
             return
         }
 
+        const token = ++this._searchToken
         creativesApi.search(query, { simple: true })
             .then((results) => {
+                // Discard stale responses if input changed since this request
+                if (token !== this._searchToken) return
+
                 const items = Array.isArray(results)
                     ? results.map((result) => ({ id: result.id, label: result.description }))
                     : []
                 this.setItems(items)
             })
-            .catch(() => this.setItems([]))
+            .catch(() => {
+                if (token === this._searchToken) this.setItems([])
+            })
     }
 
     // Override select to invoke callback

data/app/javascript/lib/__tests__/html_code_block_wrapper.test.js

@@ -0,0 +1,201 @@
+import { wrapHtmlInCodeBlocks } from '../html_code_block_wrapper'
+
+describe('wrapHtmlInCodeBlocks', () => {
+  // --- No change cases ---
+
+  test('returns unchanged for null/undefined/empty', () => {
+    expect(wrapHtmlInCodeBlocks(null)).toEqual({ changed: false, result: null })
+    expect(wrapHtmlInCodeBlocks(undefined)).toEqual({ changed: false, result: undefined })
+    expect(wrapHtmlInCodeBlocks('')).toEqual({ changed: false, result: '' })
+  })
+
+  test('returns unchanged for plain text', () => {
+    const text = 'Hello world, no HTML here'
+    expect(wrapHtmlInCodeBlocks(text)).toEqual({ changed: false, result: text })
+  })
+
+  test('returns unchanged for text with angle brackets but no tags', () => {
+    expect(wrapHtmlInCodeBlocks('5 > 3 and 2 < 4')).toEqual({
+      changed: false,
+      result: '5 > 3 and 2 < 4',
+    })
+  })
+
+  test('returns unchanged for already code-blocked content', () => {
+    const text = '```html\n<div>hello</div>\n```'
+    expect(wrapHtmlInCodeBlocks(text)).toEqual({ changed: false, result: text })
+  })
+
+  test('returns unchanged for code block with leading whitespace', () => {
+    const text = '  ```\n<div>hello</div>\n```'
+    expect(wrapHtmlInCodeBlocks(text)).toEqual({ changed: false, result: text })
+  })
+
+  // --- Single HTML block ---
+
+  test('wraps a single div', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('<div>hello</div>')
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n<div>hello</div>\n```')
+  })
+
+  test('wraps a div with attributes', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('<div class="test" id="foo">content</div>')
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n<div class="test" id="foo">content</div>\n```')
+  })
+
+  test('wraps nested HTML', () => {
+    const html = '<div><p>hello</p><span>world</span></div>'
+    const { changed, result } = wrapHtmlInCodeBlocks(html)
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n' + html + '\n```')
+  })
+
+  test('wraps self-closing tag', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('<br/>')
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n<br/>\n```')
+  })
+
+  test('wraps self-closing tag with space', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('<img src="test.png" />')
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n<img src="test.png" />\n```')
+  })
+
+  // --- HTML with surrounding text ---
+
+  test('wraps HTML with text before', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('여기 봐봐 <div>hello</div>')
+    expect(changed).toBe(true)
+    expect(result).toBe('여기 봐봐 \n\n```html\n<div>hello</div>\n```')
+  })
+
+  test('wraps HTML with text after', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('<div>hello</div> 이거 뭐야?')
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n<div>hello</div>\n```\n\n 이거 뭐야?')
+  })
+
+  test('wraps HTML with text before and after', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('여기 봐봐 <div>hello</div> 이거 뭐야?')
+    expect(changed).toBe(true)
+    expect(result).toBe('여기 봐봐 \n\n```html\n<div>hello</div>\n```\n\n 이거 뭐야?')
+  })
+
+  // --- Multiple HTML blocks ---
+
+  test('wraps multiple separate HTML blocks', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('<div>first</div> text <span>second</span>')
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n<div>first</div>\n```\n\n text \n\n```html\n<span>second</span>\n```')
+  })
+
+  // --- Complex real-world HTML ---
+
+  test('wraps complex HTML with attributes and nesting', () => {
+    const html = '<div id="llm-model-suggestions" class="common-popup mention-popup" style="display: none;"><ul class="common-popup-list"><li class="common-popup-item"><div class="mention-item">gemini-2.5-flash</div></li></ul></div>'
+    const { changed, result } = wrapHtmlInCodeBlocks(html)
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n' + html + '\n```')
+  })
+
+  test('wraps complex HTML with surrounding text', () => {
+    const html = '<div id="test" class="popup" style="display: none;"><ul><li>item</li></ul></div>'
+    const input = '이 코드를 봐줘 ' + html + ' 이게 맞아?'
+    const { changed, result } = wrapHtmlInCodeBlocks(input)
+    expect(changed).toBe(true)
+    expect(result).toBe('이 코드를 봐줘 \n\n```html\n' + html + '\n```\n\n 이게 맞아?')
+  })
+
+  // --- Multiline HTML ---
+
+  test('wraps multiline HTML', () => {
+    const html = '<div>\n  <p>hello</p>\n  <p>world</p>\n</div>'
+    const { changed, result } = wrapHtmlInCodeBlocks(html)
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n' + html + '\n```')
+  })
+
+  // --- Edge cases ---
+
+  test('handles single unclosed tag (no match)', () => {
+    const text = '<div>hello but no closing tag'
+    expect(wrapHtmlInCodeBlocks(text)).toEqual({ changed: false, result: text })
+  })
+
+  test('handles mismatched tags (no match)', () => {
+    const text = '<div>hello</span>'
+    expect(wrapHtmlInCodeBlocks(text)).toEqual({ changed: false, result: text })
+  })
+
+  test('handles HTML-like content in markdown', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('<b>bold text</b>')
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n<b>bold text</b>\n```')
+  })
+
+  test('handles table HTML', () => {
+    const html = '<table><tr><td>cell</td></tr></table>'
+    const { changed, result } = wrapHtmlInCodeBlocks(html)
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n' + html + '\n```')
+  })
+
+  test('handles input self-closing tag', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('<input type="text" />')
+    expect(changed).toBe(true)
+    expect(result).toBe('```html\n<input type="text" />\n```')
+  })
+
+  test('does not wrap markdown syntax', () => {
+    const text = '# heading\n\n**bold** and *italic*'
+    expect(wrapHtmlInCodeBlocks(text)).toEqual({ changed: false, result: text })
+  })
+
+  test('does not wrap template literals with angle brackets', () => {
+    const text = 'array.filter(x => x > 0)'
+    expect(wrapHtmlInCodeBlocks(text)).toEqual({ changed: false, result: text })
+  })
+
+  // --- Failure scenario: typing text then pasting HTML ---
+
+  test('text followed by HTML renders as proper markdown code block', () => {
+    const { changed, result } = wrapHtmlInCodeBlocks('test <html><h1>hello</h1></html>')
+    expect(changed).toBe(true)
+    // Must have blank line before code fence for marked to parse correctly
+    expect(result).toBe('test \n\n```html\n<html><h1>hello</h1></html>\n```')
+    expect(result).toContain('\n\n```html')
+  })
+
+  // --- Double-wrap prevention ---
+
+  test('does not double-wrap HTML inside existing code blocks', () => {
+    const input = '"\n```html\n<button type="button" class="popup-close-btn">×</button>\n```\n"'
+    const { changed } = wrapHtmlInCodeBlocks(input)
+    expect(changed).toBe(false)
+  })
+
+  test('does not wrap HTML inside code blocks but wraps HTML outside', () => {
+    const input = 'before\n```html\n<div>inside</div>\n```\nafter <span>outside</span> end'
+    const { changed, result } = wrapHtmlInCodeBlocks(input)
+    expect(changed).toBe(true)
+    expect(result).toContain('```html\n<div>inside</div>\n```')
+    expect(result).toContain('```html\n<span>outside</span>\n```')
+    // The inside div should NOT be double-wrapped
+    expect(result).not.toContain('```html\n```html')
+  })
+
+  test('mixed text with code block containing HTML is not double-wrapped', () => {
+    const input = 'some text\n```\n<button>click</button>\n```\nmore text'
+    const { changed } = wrapHtmlInCodeBlocks(input)
+    expect(changed).toBe(false)
+  })
+
+  test('text starting with quote then code block is not double-wrapped', () => {
+    const input = '"\n```html\n<button id="close-slack-modal" class="popup-close-btn">×</button>\n```\n"'
+    const { changed } = wrapHtmlInCodeBlocks(input)
+    expect(changed).toBe(false)
+  })
+})

data/app/javascript/lib/html_code_block_wrapper.js

@@ -0,0 +1,168 @@
+/**
+ * Wraps HTML tag blocks in a string with markdown code blocks.
+ * Handles nested tags of the same name correctly.
+ *
+ * @param {string} text - The input text potentially containing HTML
+ * @returns {{ changed: boolean, result: string }}
+ */
+export function wrapHtmlInCodeBlocks(text) {
+  if (!text) return { changed: false, result: text }
+
+  // If entire text is a single code block, skip
+  if (text.trimStart().startsWith('```') && text.trimEnd().endsWith('```')) {
+    return { changed: false, result: text }
+  }
+
+  const segments = extractHtmlSegments(text)
+  if (!segments) return { changed: false, result: text }
+
+  let result = ''
+  let lastIndex = 0
+
+  for (const seg of segments) {
+    result += text.slice(lastIndex, seg.start)
+    result += '\n\n```html\n' + seg.html + '\n```\n\n'
+    lastIndex = seg.end
+  }
+  result += text.slice(lastIndex)
+
+  // Trim leading/trailing newlines added by wrapping
+  result = result.replace(/^\n+/, '').replace(/\n+$/, '')
+
+  return { changed: true, result }
+}
+
+// Self-closing tag pattern: <tagname ... />
+const SELF_CLOSING_RE = /<([a-zA-Z][a-zA-Z0-9]*)\b[^>]*\/>/g
+
+// Opening tag pattern: <tagname ...>
+const OPEN_TAG_RE = /<([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>/g
+
+/**
+ * Find HTML segments (paired open/close tags or self-closing tags) in text.
+ * Returns array of { start, end, html } or null if no HTML found.
+ */
+function extractHtmlSegments(text) {
+  const segments = []
+
+  // First pass: find self-closing tags
+  const selfClosing = []
+  let m
+  SELF_CLOSING_RE.lastIndex = 0
+  while ((m = SELF_CLOSING_RE.exec(text)) !== null) {
+    selfClosing.push({ start: m.index, end: m.index + m[0].length })
+  }
+
+  // Second pass: find paired open/close tags with nesting support
+  let i = 0
+  while (i < text.length) {
+    // Skip positions inside already-found self-closing tags
+    if (selfClosing.some((sc) => i >= sc.start && i < sc.end)) {
+      const sc = selfClosing.find((sc) => i >= sc.start && i < sc.end)
+      i = sc.end
+      continue
+    }
+
+    // Look for opening tag at position i
+    OPEN_TAG_RE.lastIndex = i
+    const openMatch = OPEN_TAG_RE.exec(text)
+    if (!openMatch || openMatch.index !== i) {
+      i++
+      continue
+    }
+
+    // Check if this is actually a self-closing tag
+    if (openMatch[0].endsWith('/>')) {
+      segments.push({
+        start: openMatch.index,
+        end: openMatch.index + openMatch[0].length,
+        html: openMatch[0],
+      })
+      i = openMatch.index + openMatch[0].length
+      continue
+    }
+
+    const tagName = openMatch[1]
+    const searchStart = openMatch.index + openMatch[0].length
+
+    // Find matching close tag with nesting support
+    const closeIndex = findMatchingCloseTag(text, tagName, searchStart)
+    if (closeIndex === -1) {
+      i++
+      continue
+    }
+
+    const closeTag = `</${tagName}>`
+    const endPos = closeIndex + closeTag.length
+    segments.push({
+      start: openMatch.index,
+      end: endPos,
+      html: text.slice(openMatch.index, endPos),
+    })
+    i = endPos
+    continue
+  }
+
+  // Add self-closing tags that aren't inside paired segments
+  for (const sc of selfClosing) {
+    if (!segments.some((seg) => sc.start >= seg.start && sc.end <= seg.end)) {
+      segments.push({ start: sc.start, end: sc.end, html: text.slice(sc.start, sc.end) })
+    }
+  }
+
+  if (segments.length === 0) return null
+
+  // Sort by position
+  segments.sort((a, b) => a.start - b.start)
+
+  // Filter out segments inside existing markdown code blocks
+  const codeBlockRanges = []
+  const codeBlockRe = /^```[^\n]*\n[\s\S]*?^```/gm
+  let cbMatch
+  while ((cbMatch = codeBlockRe.exec(text)) !== null) {
+    codeBlockRanges.push({ start: cbMatch.index, end: cbMatch.index + cbMatch[0].length })
+  }
+  if (codeBlockRanges.length > 0) {
+    const filtered = segments.filter(
+      (seg) => !codeBlockRanges.some((cb) => seg.start >= cb.start && seg.end <= cb.end)
+    )
+    return filtered.length > 0 ? filtered : null
+  }
+
+  return segments
+}
+
+/**
+ * Find the matching close tag for tagName, handling nested same-name tags.
+ * Returns the index of the matching </tagName> or -1.
+ */
+function findMatchingCloseTag(text, tagName, startFrom) {
+  const openPattern = new RegExp(`<${tagName}\\b[^>]*>`, 'gi')
+  const closePattern = new RegExp(`</${tagName}>`, 'gi')
+
+  let depth = 1
+  let pos = startFrom
+
+  while (depth > 0 && pos < text.length) {
+    openPattern.lastIndex = pos
+    closePattern.lastIndex = pos
+
+    const nextOpen = openPattern.exec(text)
+    const nextClose = closePattern.exec(text)
+
+    if (!nextClose) return -1 // No closing tag found
+
+    if (nextOpen && nextOpen.index < nextClose.index && !nextOpen[0].endsWith('/>')) {
+      // Nested open tag comes first
+      depth++
+      pos = nextOpen.index + nextOpen[0].length
+    } else {
+      // Close tag comes first (or no more open tags)
+      depth--
+      if (depth === 0) return nextClose.index
+      pos = nextClose.index + nextClose[0].length
+    }
+  }
+
+  return -1
+}

data/app/javascript/lib/utils/markdown.js

@@ -11,7 +11,8 @@ export function renderMarkdownInline(html) {
 
 export function renderCommentMarkdown(text) {
   const content = text || ''
-  const html = content.includes('\n') ? marked.parse(content) : marked.parseInline(content)
+  const useBlock = content.includes('\n') || content.includes('```')
+  const html = useBlock ? marked.parse(content) : marked.parseInline(content)
   return DOMPurify.sanitize(html.trim())
 }
 

data/app/javascript/modules/creative_row_editor.js

@@ -1751,7 +1751,11 @@ export function initializeCreativeRowEditor() {
           }
         }
         updateProgressInputAvailability(readProgressValue());
-        scheduleSave();
+        // Save immediately on checkbox change to prevent losing the last toggle
+        // when the user navigates away before the debounce timer fires.
+        pendingSave = true;
+        clearTimeout(saveTimer);
+        saveForm();
       });
     }
 

data/app/javascript/utils/emoji_parser.js

@@ -0,0 +1,21 @@
+const DEFAULT_EMOJIS = ['🎨', '💡', '🚀', '✨', '🧩', '🎲']
+
+/**
+ * Parse a CSS custom property string of emojis into an array.
+ * Supports both comma-separated ("🔵, 🔴, 🟡") and concatenated ("🍅🔴🌶️") formats.
+ *
+ * @param {string} emojiString - raw string from CSS --creative-loading-emojis
+ * @returns {string[]} array of individual emoji characters
+ */
+export function parseEmojis(emojiString) {
+  if (!emojiString) return DEFAULT_EMOJIS
+
+  let emojis
+  if (emojiString.includes(',')) {
+    emojis = emojiString.split(',').map(e => e.trim()).filter(e => e)
+  } else {
+    emojis = [...emojiString.matchAll(/\p{Extended_Pictographic}(?:\u{FE0F}|\u{200D}\p{Extended_Pictographic})*/gu)].map(m => m[0])
+  }
+
+  return emojis.length > 0 ? emojis : DEFAULT_EMOJIS
+}

data/app/jobs/collavre/ai_agent_job.rb

@@ -23,10 +23,14 @@ module Collavre
           topic_id: context&.dig("topic", "id")
         )
 
-        # Record task for loop breaker tracking
+        # Record task for loop breaker tracking (per-topic, skip user-initiated)
         creative_id = context&.dig("creative", "id")
         if creative_id
-          Orchestration::LoopBreaker.new(context).record_task(creative_id, agent.id)
+          from_ai = context&.dig("comment", "from_ai") == true
+          topic_id = context&.dig("topic", "id")
+          Orchestration::LoopBreaker.new(context).record_task(
+            creative_id, agent.id, topic_id: topic_id, triggered_by_user: !from_ai
+          )
         end
       end